chore: Exposes internal dependencies for chart components (#3333)

Co-authored-by: Joan Perals <[email protected]>

Author: pan-kot

build-tools/tasks/package-json.js

@@ -23,9 +23,16 @@ function getComponentsExports() {
     './contexts/form-field': './contexts/form-field.js',
     // Public internal components
     './internal/tooltip-do-not-use': './internal/tooltip-do-not-use/index.js',
+    './internal/do-not-use/chart-filter': './internal/do-not-use/chart-filter.js',
+    './internal/do-not-use/chart-tooltip': './internal/do-not-use/chart-tooltip.js',
+    './internal/do-not-use/expandable-section': './internal/do-not-use/expandable-section.js',
+    './internal/do-not-use/i18n': './internal/do-not-use/i18n.js',
+    './internal/do-not-use/tooltip': './internal/do-not-use/tooltip.js',
     './internal/widget-exports': './internal/widget-exports.js',
     './test-utils/dom/internal/tooltip': './test-utils/dom/internal/tooltip.js',
     './test-utils/selectors/internal/tooltip': './test-utils/selectors/internal/tooltip.js',
+    './test-utils/dom/internal/chart-tooltip': './test-utils/dom/internal/chart-tooltip.js',
+    './test-utils/selectors/internal/chart-tooltip': './test-utils/selectors/internal/chart-tooltip.js',
   };
   let components = listPublicItems('src');
 

package.json

@@ -164,7 +164,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "755 kB",
+      "limit": "764 kB",
       "ignore": "react-dom"
     }
   ],

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -350,6 +350,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_application_1fcus",
     "awsui_axis-label--x_f0fot",
     "awsui_axis-label--y_f0fot",
+    "awsui_body_dgs8z",
     "awsui_button-trigger_18eso",
     "awsui_button_m5h9f",
     "awsui_chart-filter_1px7g",
@@ -360,8 +361,10 @@ exports[`test-utils selectors 1`] = `
     "awsui_dropdown_qwoo0",
     "awsui_filter-container_z5mul",
     "awsui_filtering-match-highlight_1p2cx",
+    "awsui_footer_dgs8z",
     "awsui_handle_sdha6",
     "awsui_has-background_15o6u",
+    "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
     "awsui_inner-list-item_10ipo",
     "awsui_key_10ipo",

src/area-chart/elements/area-chart-filter.tsx

@@ -3,6 +3,7 @@
 import React, { memo } from 'react';
 
 import ChartFilter from '../../internal/components/chart-filter';
+import ChartSeriesMarker from '../../internal/components/chart-series-marker';
 import { AreaChartProps } from '../interfaces';
 import { ChartModel } from '../model';
 
@@ -21,7 +22,11 @@ function AreaChartFilter<T extends AreaChartProps.DataTypes>({
 }) {
   const filterItems = model.allSeries.map(s => {
     const { title, color, markerType } = model.getInternalSeries(s);
-    return { label: title, color, type: markerType, datum: s };
+    return {
+      label: title,
+      marker: <ChartSeriesMarker type={markerType} color={color} />,
+      datum: s,
+    };
   });
 
   return (

src/area-chart/elements/area-chart-legend.tsx

@@ -3,6 +3,7 @@
 import React, { memo, useMemo } from 'react';
 
 import ChartLegend from '../../internal/components/chart-legend';
+import ChartSeriesMarker from '../../internal/components/chart-series-marker';
 import { useSelector } from '../async-store';
 import { AreaChartProps } from '../interfaces';
 import { ChartModel } from '../model';
@@ -24,7 +25,7 @@ function AreaChartLegend<T extends AreaChartProps.DataTypes>({
     () =>
       model.series.map(s => {
         const { title, color, markerType } = model.getInternalSeries(s);
-        return { label: title, color, type: markerType, datum: s };
+        return { label: title, marker: <ChartSeriesMarker color={color} type={markerType} />, datum: s };
       }),
     [model]
   );

src/area-chart/elements/chart-popover.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 
 import ChartPopover from '../../internal/components/chart-popover';
-import ChartPopoverFooter from '../../internal/components/chart-popover-footer';
 import ChartSeriesDetails from '../../internal/components/chart-series-details';
 import { AreaChartProps } from '../interfaces';
 import { ChartModel } from '../model';
@@ -47,11 +46,11 @@ export default function AreaChartPopover<T extends AreaChartProps.DataTypes>({
       dismissAriaLabel={dismissAriaLabel}
       size={size}
       onBlur={onBlur}
+      footer={footer}
     >
       <ChartSeriesDetails details={highlightDetails.seriesDetails} />
       <div className={styles['popover-divider']} />
       <ChartSeriesDetails details={highlightDetails.totalDetails} />
-      {footer && <ChartPopoverFooter>{footer}</ChartPopoverFooter>}
     </ChartPopover>
   );
 }

src/expandable-section/internal.tsx

@@ -5,6 +5,7 @@ import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 
 import { getBaseProps } from '../internal/base-component';
+import { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';
 import { fireNonCancelableEvent } from '../internal/events';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
@@ -18,7 +19,7 @@ import { variantSupportsDescription } from './utils';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 
-type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> &
+export type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> &
   InternalBaseComponentProps & {
     variant?: InternalVariant;
     __injectAnalyticsComponentMetadata?: boolean;
@@ -109,7 +110,7 @@ export default function InternalExpandableSection({
         <ExpandableSectionHeader
           id={triggerControlId}
           descriptionId={descriptionId}
-          className={clsx(styles.header, styles[`header-${baseVariant}`])}
+          className={clsx(styles.header, styles[`header-${baseVariant}`], screenReaderTextClass)}
           variant={baseVariant}
           expanded={!!expanded}
           header={header}

src/internal/components/chart-filter/__tests__/chart-filter.test.tsx

@@ -11,10 +11,10 @@ import tokenGroupStyles from '../../../../../lib/components/token-group/styles.s
 const datum0 = {};
 const datum1 = {};
 
-const series = [
-  { label: 'Chocolate', color: 'chocolate', type: 'line', datum: datum0 },
-  { label: 'Apples', color: 'red', type: 'rectangle', datum: datum1 },
-] as const;
+const series: ChartFilterProps<any>['series'] = [
+  { label: 'Chocolate', marker: <div />, datum: datum0 },
+  { label: 'Apples', marker: <div />, datum: datum1 },
+];
 
 const i18nStrings = {
   filterLabel: 'Filter displayed data',

src/internal/components/chart-filter/__tests__/i18n.test.tsx

@@ -4,16 +4,16 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import TestI18nProvider from '../../../../../lib/components/i18n/testing';
-import ChartFilter from '../../../../../lib/components/internal/components/chart-filter';
+import ChartFilter, { ChartFilterProps } from '../../../../../lib/components/internal/components/chart-filter';
 import createWrapper from '../../../../../lib/components/test-utils/dom';
 
 const datum0 = {};
 const datum1 = {};
 
-const series = [
-  { label: 'Chocolate', color: 'chocolate', type: 'line', datum: datum0 },
-  { label: 'Apples', color: 'red', type: 'rectangle', datum: datum1 },
-] as const;
+const series: ChartFilterProps<any>['series'] = [
+  { label: 'Chocolate', marker: <div />, datum: datum0 },
+  { label: 'Apples', marker: <div />, datum: datum1 },
+];
 
 const defaultProps = {
   series,

src/internal/components/chart-filter/index.tsx

@@ -9,7 +9,6 @@ import { MultiselectProps } from '../../../multiselect/interfaces';
 import InternalMultiselect from '../../../multiselect/internal';
 import { BaseComponentProps, getBaseProps } from '../../base-component';
 import { NonCancelableEventHandler } from '../../events';
-import SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';
 
 import styles from './styles.css.js';
 
@@ -21,8 +20,7 @@ interface I18nStrings {
 
 interface ChartFilterItem<T> {
   label: string;
-  color: string;
-  type: ChartSeriesMarkerType;
+  marker: React.ReactNode;
   datum: T;
 }
 
@@ -44,11 +42,7 @@ function ChartFilter<T>({ series, i18nStrings, selectedSeries, onChange, ...rest
     label: d.label,
     value: '' + i,
     datum: d.datum,
-    __customIcon: (
-      <span className={styles['custom-icon-wrapper']}>
-        <SeriesMarker color={d.color} type={d.type} />
-      </span>
-    ),
+    __customIcon: <span className={styles['custom-icon-wrapper']}>{d.marker}</span>,
   }));
 
   const selectedOptions = defaultOptions.filter(option => selectedSeries?.indexOf(option.datum) !== -1);