chore: Exposes internal dependencies for chart components

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);

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

@@ -12,9 +12,9 @@ import createWrapper from '../../../../../lib/components/test-utils/dom';
 import styles from '../../../../../lib/components/internal/components/chart-legend/styles.selectors.js';
 
 const series = [
-  { label: 'Chocolate', color: 'chocolate', type: 'line', datum: { title: 's1' } },
-  { label: 'Apples', color: 'red', type: 'rectangle', datum: { title: 's2' } },
-  { label: 'Oranges', color: 'orange', type: 'rectangle', datum: { title: 's3' } },
+  { label: 'Chocolate', marker: <div />, datum: { title: 's1' } },
+  { label: 'Apples', marker: <div />, datum: { title: 's2' } },
+  { label: 'Oranges', marker: <div />, datum: { title: 's3' } },
 ] as const;
 
 function getTextContent(wrapper: ElementWrapper) {

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

@@ -7,14 +7,12 @@ import InternalBox from '../../../box/internal';
 import { useInternalI18n } from '../../../i18n/context';
 import { KeyCode } from '../../keycode';
 import handleKey from '../../utils/handle-key';
-import SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';
 
 import styles from './styles.css.js';
 
 interface ChartLegendItem<T> {
   label: string;
-  color: string;
-  type: ChartSeriesMarkerType;
+  marker: React.ReactNode;
   datum: T;
 }
 
@@ -142,7 +140,7 @@ function ChartLegend<T>({
                 onMouseOver={() => handleMouseOver(s.datum)}
                 onMouseLeave={handleMouseLeave}
               >
-                <SeriesMarker color={s.color} type={s.type} /> {s.label}
+                {s.marker} {s.label}
               </div>
             );
           })}

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

@@ -14,13 +14,15 @@ import { nodeBelongs } from '../../utils/node-belongs';
 
 import popoverStyles from '../../../popover/styles.css.js';
 import styles from './styles.css.js';
+import testClasses from './test-classes/styles.css.js';
 
-interface ChartPopoverProps extends PopoverProps {
+export interface ChartPopoverProps extends PopoverProps {
   /** Title of the popover */
   title?: React.ReactNode;
 
   /** References the element the container is positioned against. */
-  trackRef: React.RefObject<HTMLElement | SVGElement>;
+  trackRef?: React.RefObject<HTMLElement | SVGElement>;
+  getTrack?: () => null | HTMLElement | SVGElement;
   /**
     Used to update the container position in case track or track position changes:
 
@@ -31,6 +33,7 @@ interface ChartPopoverProps extends PopoverProps {
     </>)
   */
   trackKey?: string | number;
+  minVisibleBlockSize?: number;
 
   /** Optional container element that prevents any clicks in there from dismissing the popover */
   container: Element | null;
@@ -48,6 +51,9 @@ interface ChartPopoverProps extends PopoverProps {
 
   /** Popover content */
   children?: React.ReactNode;
+
+  /** Popover footer */
+  footer?: React.ReactNode;
 }
 
 export default React.forwardRef(ChartPopover);
@@ -61,12 +67,15 @@ function ChartPopover(
     dismissAriaLabel,
 
     children,
+    footer,
 
     title,
     trackRef,
+    getTrack,
     trackKey,
     onDismiss,
     container,
+    minVisibleBlockSize,
 
     onMouseEnter,
     onMouseLeave,
@@ -118,7 +127,9 @@ function ChartPopover(
         fixedWidth={fixedWidth}
         position={position}
         trackRef={trackRef}
+        getTrack={getTrack}
         trackKey={trackKey}
+        minVisibleBlockSize={minVisibleBlockSize}
         arrow={position => (
           <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>
             <div className={popoverStyles['arrow-outer']} />
@@ -128,19 +139,20 @@ function ChartPopover(
         keepPosition={true}
         allowVerticalOverflow={true}
         allowScrollToFit={isPinned}
+        hoverArea={true}
       >
-        <div className={styles['hover-area']}>
-          <PopoverBody
-            dismissButton={dismissButton}
-            dismissAriaLabel={dismissAriaLabel}
-            header={title}
-            onDismiss={onDismiss}
-            overflowVisible="content"
-            className={styles['popover-body']}
-          >
-            {children}
-          </PopoverBody>
-        </div>
+        <PopoverBody
+          dismissButton={dismissButton}
+          dismissAriaLabel={dismissAriaLabel}
+          header={<span className={testClasses.header}>{title}</span>}
+          onDismiss={onDismiss}
+          overflowVisible="content"
+          className={styles['popover-body']}
+          variant="chart"
+        >
+          <div className={testClasses.body}>{children}</div>
+          {footer && <div className={clsx(testClasses.footer, styles.footer)}>{footer}</div>}
+        </PopoverBody>
       </PopoverContainer>
     </div>
   );

src/internal/components/chart-popover/styles.scss

@@ -10,14 +10,20 @@
   @include styles.styles-reset;
   position: absolute;
 }
-.hover-area {
-  pointer-events: none;
-  padding-block: awsui.$space-static-s;
-  padding-inline: awsui.$space-static-s;
-  margin-block: calc(-1 * #{awsui.$space-static-s});
-  margin-inline: calc(-1 * #{awsui.$space-static-s});
-}
 
 .popover-body {
   pointer-events: auto;
 }
+
+.footer {
+  margin-block-start: awsui.$space-static-xs;
+
+  /* stylelint-disable-next-line selector-max-type */
+  > hr {
+    border-block: none;
+    border-inline: none;
+    border-block-start: 1px solid awsui.$color-border-divider-default;
+    margin-block: awsui.$space-static-xs;
+    margin-inline: 0;
+  }
+}

src/internal/components/chart-popover/test-classes/styles.scss

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.header,
+.body,
+.footer {
+  /* used in test-utils */
+}