@cloudscape-design/components 3.0.459 → 3.0.460

package/internal/components/chart-plot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport { Offset } from '../interfaces';\nimport { useInternalI18n } from '../../../i18n/context';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number | string;\n  height: number | string;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: string;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onClick,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    ...restProps\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = () => {\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current && !plotClickedRef.current) {\n      setPlotFocused(true);\n    }\n    // The click should focus the underling application bypassing the svg.\n    else if (plotClickedRef.current) {\n      applicationRef.current!.focus();\n    }\n  };\n  const onPlotClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onClick && onClick(event);\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onBlur && onBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        {...restProps}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        style={{\n          width,\n          height,\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onClick={onPlotClick}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={activeElementKey || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onApplicationFocus}\n            onBlur={onApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport { Offset } from '../interfaces';\nimport { useInternalI18n } from '../../../i18n/context';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number | string;\n  height: number | string;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: React.ReactNode;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onClick,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    ...restProps\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = () => {\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current && !plotClickedRef.current) {\n      setPlotFocused(true);\n    }\n    // The click should focus the underling application bypassing the svg.\n    else if (plotClickedRef.current) {\n      applicationRef.current!.focus();\n    }\n  };\n  const onPlotClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onClick && onClick(event);\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onBlur && onBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        {...restProps}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        style={{\n          width,\n          height,\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onClick={onPlotClick}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={activeElementKey || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onApplicationFocus}\n            onBlur={onApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}

package/internal/components/chart-series-details/index.d.ts

@@ -1,24 +1,16 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { BaseComponentProps } from '../../base-component';
+import { ChartDetailPair } from '../../../pie-chart/interfaces';
 import { ChartSeriesMarkerType } from '../chart-series-marker';
-interface ChartDetailPair {
-    key: ReactNode;
-    value: ReactNode;
-}
 export interface ChartSeriesDetailItem extends ChartDetailPair {
     markerType?: ChartSeriesMarkerType;
     color?: string;
     isDimmed?: boolean;
-    subItems?: ReadonlyArray<ChartDetailPair>;
-    expandableId?: string;
 }
-export type ExpandedSeries = Set<string>;
 export interface ChartSeriesDetailsProps extends BaseComponentProps {
     details: ReadonlyArray<ChartSeriesDetailItem>;
-    expandedSeries?: ExpandedSeries;
-    setPopoverText?: (s: string) => void;
-    setExpandedState?: (seriesTitle: string, state: boolean) => void;
 }
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ChartSeriesDetailsProps & React.RefAttributes<HTMLDivElement>>>;
+declare const _default: React.MemoExoticComponent<typeof ChartSeriesDetails>;
 export default _default;
+declare function ChartSeriesDetails({ details, ...restProps }: ChartSeriesDetailsProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/chart-series-details/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-series-details/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAqB,MAAM,OAAO,CAAC;AAG9E,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAA0B,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAMlF,UAAU,eAAe;IACvB,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,EAAE,SAAS,CAAC;CAClB;AAUD,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AACD,MAAM,MAAM,cAAc,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,OAAO,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClE;;AAED,wBAAoD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-series-details/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAA0B,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAGlF,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,OAAO,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;CAC/C;;AAED,wBAAwC;AAExC,iBAAS,kBAAkB,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,uBAAuB,eAyB7E"}

package/internal/components/chart-series-details/index.js

@@ -1,61 +1,25 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import React, { memo } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../../base-component';
+import InternalBox from '../../../box/internal';
 import ChartSeriesMarker from '../chart-series-marker';
 import styles from './styles.css.js';
-import InternalExpandableSection from '../../../expandable-section/internal';
-import getSeriesDetailsText from './series-details-text';
-import { useMergeRefs } from '../../hooks/use-merge-refs';
-export default memo(forwardRef(ChartSeriesDetails));
-function ChartSeriesDetails(_a, ref) {
-    var { details, expandedSeries, setPopoverText, setExpandedState } = _a, restProps = __rest(_a, ["details", "expandedSeries", "setPopoverText", "setExpandedState"]);
+export default memo(ChartSeriesDetails);
+function ChartSeriesDetails(_a) {
+    var { details } = _a, restProps = __rest(_a, ["details"]);
     const baseProps = getBaseProps(restProps);
     const className = clsx(baseProps.className, styles.root);
-    const detailsRef = useRef(null);
-    const mergedRef = useMergeRefs(ref, detailsRef);
-    // Once the component has rendered, pass its content in plain text
-    // so that it can be used by screen readers.
-    useEffect(() => {
-        if (setPopoverText) {
-            if (detailsRef.current) {
-                setPopoverText(getSeriesDetailsText(detailsRef.current));
-            }
-            return () => {
-                setPopoverText('');
-            };
-        }
-    }, [details, setPopoverText]);
-    const isExpanded = (seriesTitle) => !!expandedSeries && expandedSeries.has(seriesTitle);
-    return (React.createElement("div", Object.assign({}, baseProps, { className: className, ref: mergedRef }),
-        React.createElement("ul", { className: styles.list }, details.map(({ key, value, markerType, color, isDimmed, subItems, expandableId }, index) => (React.createElement("li", { key: index, className: clsx({
+    return (React.createElement("div", Object.assign({}, baseProps, { className: className }),
+        React.createElement("ul", { className: styles.list }, details.map(({ key, value, markerType, color, isDimmed }, index) => (React.createElement("li", { key: index, className: clsx({
                 [styles.dimmed]: isDimmed,
                 [styles['list-item']]: true,
-                [styles['with-sub-items']]: subItems === null || subItems === void 0 ? void 0 : subItems.length,
-                [styles.expandable]: !!expandableId,
-            }) }, (subItems === null || subItems === void 0 ? void 0 : subItems.length) && !!expandableId ? (React.createElement(ExpandableSeries, { itemKey: key, value: value, markerType: markerType, color: color, subItems: subItems, expanded: isExpanded(expandableId), setExpandedState: state => setExpandedState && setExpandedState(expandableId, state) })) : (React.createElement(NonExpandableSeries, { itemKey: key, value: value, markerType: markerType, color: color, subItems: subItems }))))))));
-}
-function SubItems({ items, expandable, expanded, }) {
-    return (React.createElement("ul", { className: clsx(styles['sub-items'], expandable && styles.expandable) }, items.map(({ key, value }, index) => (React.createElement("li", { key: index, className: clsx(styles['inner-list-item'], styles['key-value-pair'], (expanded || !expandable) && styles.announced) },
-        React.createElement("span", { className: styles.key }, key),
-        React.createElement("span", { className: styles.value }, value))))));
-}
-function ExpandableSeries({ itemKey, value, subItems, markerType, color, expanded, setExpandedState, }) {
-    return (React.createElement("div", { className: styles['expandable-section'] },
-        markerType && color && React.createElement(ChartSeriesMarker, { type: markerType, color: color }),
-        React.createElement("div", { className: styles['full-width'] },
-            React.createElement(InternalExpandableSection, { variant: "compact", headerText: itemKey, headerActions: React.createElement("span", { className: clsx(styles.value, styles.expandable) }, value), expanded: expanded, onChange: ({ detail }) => setExpandedState(detail.expanded) },
-                React.createElement(SubItems, { items: subItems, expandable: true, expanded: expanded })))));
-}
-function NonExpandableSeries({ itemKey, value, subItems, markerType, color }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: clsx(styles['key-value-pair'], styles.announced) },
+            }) },
             React.createElement("div", { className: styles.key },
                 markerType && color && React.createElement(ChartSeriesMarker, { type: markerType, color: color }),
-                React.createElement("span", null, itemKey)),
-            React.createElement("span", { className: styles.value }, value)),
-        subItems && React.createElement(SubItems, { items: subItems })));
+                React.createElement("span", null, key)),
+            React.createElement(InternalBox, { textAlign: "right" }, value)))))));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/chart-series-details/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-series-details/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo, ReactNode, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport ChartSeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\nimport InternalExpandableSection from '../../../expandable-section/internal';\nimport getSeriesDetailsText from './series-details-text';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\n\ninterface ChartDetailPair {\n  key: ReactNode;\n  value: ReactNode;\n}\n\ninterface ListItemProps {\n  itemKey: ReactNode;\n  value: ReactNode;\n  subItems?: ReadonlyArray<ChartDetailPair>;\n  markerType?: ChartSeriesMarkerType;\n  color?: string;\n}\n\nexport interface ChartSeriesDetailItem extends ChartDetailPair {\n  markerType?: ChartSeriesMarkerType;\n  color?: string;\n  isDimmed?: boolean;\n  subItems?: ReadonlyArray<ChartDetailPair>;\n  expandableId?: string;\n}\nexport type ExpandedSeries = Set<string>;\n\nexport interface ChartSeriesDetailsProps extends BaseComponentProps {\n  details: ReadonlyArray<ChartSeriesDetailItem>;\n  expandedSeries?: ExpandedSeries;\n  setPopoverText?: (s: string) => void;\n  setExpandedState?: (seriesTitle: string, state: boolean) => void;\n}\n\nexport default memo(forwardRef(ChartSeriesDetails));\n\nfunction ChartSeriesDetails(\n  { details, expandedSeries, setPopoverText, setExpandedState, ...restProps }: ChartSeriesDetailsProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const baseProps = getBaseProps(restProps);\n  const className = clsx(baseProps.className, styles.root);\n  const detailsRef = useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergeRefs(ref, detailsRef);\n\n  // Once the component has rendered, pass its content in plain text\n  // so that it can be used by screen readers.\n  useEffect(() => {\n    if (setPopoverText) {\n      if (detailsRef.current) {\n        setPopoverText(getSeriesDetailsText(detailsRef.current));\n      }\n      return () => {\n        setPopoverText('');\n      };\n    }\n  }, [details, setPopoverText]);\n\n  const isExpanded = (seriesTitle: string) => !!expandedSeries && expandedSeries.has(seriesTitle);\n\n  return (\n    <div {...baseProps} className={className} ref={mergedRef}>\n      <ul className={styles.list}>\n        {details.map(({ key, value, markerType, color, isDimmed, subItems, expandableId }, index) => (\n          <li\n            key={index}\n            className={clsx({\n              [styles.dimmed]: isDimmed,\n              [styles['list-item']]: true,\n              [styles['with-sub-items']]: subItems?.length,\n              [styles.expandable]: !!expandableId,\n            })}\n          >\n            {subItems?.length && !!expandableId ? (\n              <ExpandableSeries\n                itemKey={key}\n                value={value}\n                markerType={markerType}\n                color={color}\n                subItems={subItems}\n                expanded={isExpanded(expandableId)}\n                setExpandedState={state => setExpandedState && setExpandedState(expandableId, state)}\n              />\n            ) : (\n              <NonExpandableSeries\n                itemKey={key}\n                value={value}\n                markerType={markerType}\n                color={color}\n                subItems={subItems}\n              />\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nfunction SubItems({\n  items,\n  expandable,\n  expanded,\n}: {\n  items: ReadonlyArray<ChartDetailPair>;\n  expandable?: boolean;\n  expanded?: boolean;\n}) {\n  return (\n    <ul className={clsx(styles['sub-items'], expandable && styles.expandable)}>\n      {items.map(({ key, value }, index) => (\n        <li\n          key={index}\n          className={clsx(\n            styles['inner-list-item'],\n            styles['key-value-pair'],\n            (expanded || !expandable) && styles.announced\n          )}\n        >\n          <span className={styles.key}>{key}</span>\n          <span className={styles.value}>{value}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction ExpandableSeries({\n  itemKey,\n  value,\n  subItems,\n  markerType,\n  color,\n  expanded,\n  setExpandedState,\n}: ListItemProps &\n  Required<Pick<ListItemProps, 'subItems'>> & {\n    expanded: boolean;\n    setExpandedState: (state: boolean) => void;\n  }) {\n  return (\n    <div className={styles['expandable-section']}>\n      {markerType && color && <ChartSeriesMarker type={markerType} color={color} />}\n      <div className={styles['full-width']}>\n        <InternalExpandableSection\n          variant=\"compact\"\n          headerText={itemKey}\n          headerActions={<span className={clsx(styles.value, styles.expandable)}>{value}</span>}\n          expanded={expanded}\n          onChange={({ detail }) => setExpandedState(detail.expanded)}\n        >\n          <SubItems items={subItems} expandable={true} expanded={expanded} />\n        </InternalExpandableSection>\n      </div>\n    </div>\n  );\n}\n\nfunction NonExpandableSeries({ itemKey, value, subItems, markerType, color }: ListItemProps) {\n  return (\n    <>\n      <div className={clsx(styles['key-value-pair'], styles.announced)}>\n        <div className={styles.key}>\n          {markerType && color && <ChartSeriesMarker type={markerType} color={color} />}\n          <span>{itemKey}</span>\n        </div>\n        <span className={styles.value}>{value}</span>\n      </div>\n      {subItems && <SubItems items={subItems} />}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-series-details/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAEhD,OAAO,iBAA4C,MAAM,wBAAwB,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,eAAe,IAAI,CAAC,kBAAkB,CAAC,CAAC;AAExC,SAAS,kBAAkB,CAAC,EAAkD;QAAlD,EAAE,OAAO,OAAyC,EAApC,SAAS,cAAvB,WAAyB,CAAF;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,6CAAS,SAAS,IAAE,SAAS,EAAE,SAAS;QACtC,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IACvB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACnE,4BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,IAAI,CAAC;gBACd,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ;gBACzB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,IAAI;aAC5B,CAAC;YAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACvB,UAAU,IAAI,KAAK,IAAI,oBAAC,iBAAiB,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI;gBAC7E,kCAAO,GAAG,CAAQ,CACd;YACN,oBAAC,WAAW,IAAC,SAAS,EAAC,OAAO,IAAE,KAAK,CAAe,CACjD,CACN,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport InternalBox from '../../../box/internal';\nimport { ChartDetailPair } from '../../../pie-chart/interfaces';\nimport ChartSeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\n\nexport interface ChartSeriesDetailItem extends ChartDetailPair {\n  markerType?: ChartSeriesMarkerType;\n  color?: string;\n  isDimmed?: boolean;\n}\n\nexport interface ChartSeriesDetailsProps extends BaseComponentProps {\n  details: ReadonlyArray<ChartSeriesDetailItem>;\n}\n\nexport default memo(ChartSeriesDetails);\n\nfunction ChartSeriesDetails({ details, ...restProps }: ChartSeriesDetailsProps) {\n  const baseProps = getBaseProps(restProps);\n  const className = clsx(baseProps.className, styles.root);\n\n  return (\n    <div {...baseProps} className={className}>\n      <ul className={styles.list}>\n        {details.map(({ key, value, markerType, color, isDimmed }, index) => (\n          <li\n            key={index}\n            className={clsx({\n              [styles.dimmed]: isDimmed,\n              [styles['list-item']]: true,\n            })}\n          >\n            <div className={styles.key}>\n              {markerType && color && <ChartSeriesMarker type={markerType} color={color} />}\n              <span>{key}</span>\n            </div>\n            <InternalBox textAlign=\"right\">{value}</InternalBox>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"]}

package/internal/components/chart-series-details/styles.css.js

@@ -1,24 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "dimmed": "awsui_dimmed_10ipo_19hs8_93",
-  "marker": "awsui_marker_10ipo_19hs8_122",
-  "marker--line": "awsui_marker--line_10ipo_19hs8_140",
-  "marker--rectangle": "awsui_marker--rectangle_10ipo_19hs8_144",
-  "marker--hollow-rectangle": "awsui_marker--hollow-rectangle_10ipo_19hs8_148",
-  "marker--dashed": "awsui_marker--dashed_10ipo_19hs8_160",
-  "root": "awsui_root_10ipo_19hs8_180",
-  "value": "awsui_value_10ipo_19hs8_193",
-  "expandable": "awsui_expandable_10ipo_19hs8_197",
-  "list-item": "awsui_list-item_10ipo_19hs8_201",
-  "inner-list-item": "awsui_inner-list-item_10ipo_19hs8_202",
-  "key-value-pair": "awsui_key-value-pair_10ipo_19hs8_207",
-  "expandable-section": "awsui_expandable-section_10ipo_19hs8_208",
-  "key": "awsui_key_10ipo_19hs8_207",
-  "sub-items": "awsui_sub-items_10ipo_19hs8_221",
-  "list": "awsui_list_10ipo_19hs8_201",
-  "with-sub-items": "awsui_with-sub-items_10ipo_19hs8_245",
-  "full-width": "awsui_full-width_10ipo_19hs8_250",
-  "announced": "awsui_announced_10ipo_19hs8_254"
+  "dimmed": "awsui_dimmed_10ipo_1oktv_93",
+  "root": "awsui_root_10ipo_1oktv_122",
+  "list": "awsui_list_10ipo_1oktv_135",
+  "list-item": "awsui_list-item_10ipo_1oktv_142",
+  "key": "awsui_key_10ipo_1oktv_147"
 };
   

package/internal/components/chart-series-details/styles.scoped.css

@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_dimmed_10ipo_19hs8_93:not(#\9) {
+.awsui_dimmed_10ipo_1oktv_93:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
   transition-delay: var(--motion-duration-transition-quick-6npj01, 90ms);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -131,12 +131,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dimmed_10ipo_19hs8_93:not(#\9) {
+  .awsui_dimmed_10ipo_1oktv_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dimmed_10ipo_19hs8_93:not(#\9), .awsui-mode-entering .awsui_dimmed_10ipo_19hs8_93:not(#\9) {
+.awsui-motion-disabled .awsui_dimmed_10ipo_1oktv_93:not(#\9), .awsui-mode-entering .awsui_dimmed_10ipo_1oktv_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -145,7 +145,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_marker_10ipo_19hs8_122:not(#\9) {
+.awsui_root_10ipo_1oktv_122:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -182,153 +182,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  margin-right: var(--space-xxs-p8yyaw, 4px);
-  margin-top: var(--space-xxs-p8yyaw, 4px);
-  border-radius: 2px;
-  width: 14px;
-  flex-shrink: 0;
-  cursor: inherit;
-}
-.awsui_marker--line_10ipo_19hs8_140:not(#\9) {
-  margin-top: 9px;
-  height: 4px;
-}
-.awsui_marker--rectangle_10ipo_19hs8_144:not(#\9) {
-  height: 14px;
-  border-radius: 2px;
-}
-.awsui_marker--hollow-rectangle_10ipo_19hs8_148:not(#\9) {
-  height: 14px;
-  border-radius: 2px;
-}
-.awsui_marker--hollow-rectangle_10ipo_19hs8_148:not(#\9)::after {
-  content: "";
-  display: block;
-  margin: 2px;
-  height: 10px;
-  background-color: var(--color-background-container-content-4un1ap, #ffffff);
-  opacity: 0.5;
-}
-.awsui_marker--dashed_10ipo_19hs8_160:not(#\9) {
-  height: 4px;
-  width: 6px;
-  margin-top: 9px;
-  margin-right: 12px;
-}
-.awsui_marker--dashed_10ipo_19hs8_160:not(#\9)::after {
-  content: "";
-  display: block;
-  width: 6px;
-  height: 4px;
-  margin-left: 8px;
-  border-radius: 2px;
-  background-color: inherit;
-}
-
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-.awsui_root_10ipo_19hs8_180:not(#\9) {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  border-collapse: separate;
-  border-spacing: 0;
-  caption-side: top;
-  cursor: auto;
-  direction: ltr;
-  empty-cells: show;
-  font-family: serif;
-  font-size: medium;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-hyphens: none;
-          hyphens: none;
-  letter-spacing: normal;
-  list-style: disc outside none;
-  tab-size: 8;
-  text-align: left;
-  text-align-last: auto;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  widows: 2;
-  word-spacing: normal;
-  box-sizing: border-box;
-  font-size: var(--font-size-body-m-x4okxb, 14px);
-  line-height: var(--line-height-body-m-30ar75, 20px);
-  color: var(--color-text-body-default-2sxhhn, #000716);
-  font-weight: 400;
-  font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
-.awsui_value_10ipo_19hs8_193:not(#\9) {
-  text-align: right;
-  margin-inline-start: var(--space-xxl-cu2m1r, 32px);
-}
-.awsui_value_10ipo_19hs8_193.awsui_expandable_10ipo_19hs8_197:not(#\9) {
-  font-weight: var(--font-weight-heading-s-cwn6wc, 700);
-}
-
-.awsui_list-item_10ipo_19hs8_201:not(#\9),
-.awsui_inner-list-item_10ipo_19hs8_202:not(#\9) {
-  list-style: none;
-}
-
-.awsui_inner-list-item_10ipo_19hs8_202:not(#\9),
-.awsui_list-item_10ipo_19hs8_201 > .awsui_key-value-pair_10ipo_19hs8_207:not(#\9),
-.awsui_list-item_10ipo_19hs8_201 > .awsui_expandable-section_10ipo_19hs8_208:not(#\9) {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-}
-.awsui_inner-list-item_10ipo_19hs8_202 > .awsui_key_10ipo_19hs8_207:not(#\9),
-.awsui_list-item_10ipo_19hs8_201 > .awsui_key-value-pair_10ipo_19hs8_207 > .awsui_key_10ipo_19hs8_207:not(#\9),
-.awsui_list-item_10ipo_19hs8_201 > .awsui_expandable-section_10ipo_19hs8_208 > .awsui_key_10ipo_19hs8_207:not(#\9) {
-  display: inline-flex;
-  color: var(--color-text-group-label-zuh0h0, #414d5c);
-}
-
-.awsui_sub-items_10ipo_19hs8_221:not(#\9):not(.awsui_expandable_10ipo_19hs8_197) {
-  padding-inline-start: calc(14px + var(--space-xxs-p8yyaw, 4px));
-}
-.awsui_sub-items_10ipo_19hs8_221.awsui_expandable_10ipo_19hs8_197:not(#\9) {
-  padding-inline-start: 0;
-}
-.awsui_sub-items_10ipo_19hs8_221.awsui_expandable_10ipo_19hs8_197 > .awsui_inner-list-item_10ipo_19hs8_202 > .awsui_value_10ipo_19hs8_193:not(#\9) {
-  white-space: nowrap;
 }
 
-.awsui_list_10ipo_19hs8_201:not(#\9) {
+.awsui_list_10ipo_1oktv_135:not(#\9) {
   display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
   flex-direction: column;
 }
-.awsui_list_10ipo_19hs8_201 > .awsui_list-item_10ipo_19hs8_201 > .awsui_key-value-pair_10ipo_19hs8_207 > .awsui_key_10ipo_19hs8_207:not(#\9) {
-  align-items: flex-start;
-}
-.awsui_list_10ipo_19hs8_201 > .awsui_list-item_10ipo_19hs8_201.awsui_dimmed_10ipo_19hs8_93:not(#\9) {
-  opacity: 0.35;
-}
-
-.awsui_list-item_10ipo_19hs8_201.awsui_with-sub-items_10ipo_19hs8_245:not(#\9):not(.awsui_expandable_10ipo_19hs8_197) > .awsui_key-value-pair_10ipo_19hs8_207 > .awsui_key_10ipo_19hs8_207,
-.awsui_list-item_10ipo_19hs8_201.awsui_with-sub-items_10ipo_19hs8_245:not(#\9):not(.awsui_expandable_10ipo_19hs8_197) > .awsui_key-value-pair_10ipo_19hs8_207 > .awsui_value_10ipo_19hs8_193 {
-  font-weight: var(--font-weight-heading-s-cwn6wc, 700);
+.awsui_list_10ipo_1oktv_135 > .awsui_list-item_10ipo_1oktv_142:not(#\9) {
+  display: inline-flex;
+  justify-content: space-between;
 }
 
-.awsui_full-width_10ipo_19hs8_250:not(#\9) {
-  width: 100%;
+.awsui_key_10ipo_1oktv_147:not(#\9) {
+  display: inline-flex;
+  align-items: flex-start;
+  color: var(--color-text-group-label-zuh0h0, #414d5c);
+  margin-right: var(--space-xxl-cu2m1r, 32px);
 }
 
-.awsui_announced_10ipo_19hs8_254:not(#\9) {
-  /* Used by getSeriesDetailText to select text to be announced by screen readers */
+.awsui_dimmed_10ipo_1oktv_93:not(#\9) {
+  opacity: 0.35;
 }

package/internal/components/chart-series-details/styles.selectors.js

@@ -2,24 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "dimmed": "awsui_dimmed_10ipo_19hs8_93",
-  "marker": "awsui_marker_10ipo_19hs8_122",
-  "marker--line": "awsui_marker--line_10ipo_19hs8_140",
-  "marker--rectangle": "awsui_marker--rectangle_10ipo_19hs8_144",
-  "marker--hollow-rectangle": "awsui_marker--hollow-rectangle_10ipo_19hs8_148",
-  "marker--dashed": "awsui_marker--dashed_10ipo_19hs8_160",
-  "root": "awsui_root_10ipo_19hs8_180",
-  "value": "awsui_value_10ipo_19hs8_193",
-  "expandable": "awsui_expandable_10ipo_19hs8_197",
-  "list-item": "awsui_list-item_10ipo_19hs8_201",
-  "inner-list-item": "awsui_inner-list-item_10ipo_19hs8_202",
-  "key-value-pair": "awsui_key-value-pair_10ipo_19hs8_207",
-  "expandable-section": "awsui_expandable-section_10ipo_19hs8_208",
-  "key": "awsui_key_10ipo_19hs8_207",
-  "sub-items": "awsui_sub-items_10ipo_19hs8_221",
-  "list": "awsui_list_10ipo_19hs8_201",
-  "with-sub-items": "awsui_with-sub-items_10ipo_19hs8_245",
-  "full-width": "awsui_full-width_10ipo_19hs8_250",
-  "announced": "awsui_announced_10ipo_19hs8_254"
+  "dimmed": "awsui_dimmed_10ipo_1oktv_93",
+  "root": "awsui_root_10ipo_1oktv_122",
+  "list": "awsui_list_10ipo_1oktv_135",
+  "list-item": "awsui_list-item_10ipo_1oktv_142",
+  "key": "awsui_key_10ipo_1oktv_147"
 };
   

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (b5ca2a63)";
+export var PACKAGE_VERSION = "3.0.0 (d64a5bbe)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (b5ca2a63)",
+  "PACKAGE_VERSION": "3.0.0 (d64a5bbe)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "b5ca2a63a0b044b4e85b83b4a009ab1f559b90e0"
+  "commit": "d64a5bbe977d91971a1a04a4fa7c167a6ef5d90c"
 }

package/line-chart/interfaces.d.ts

@@ -1,6 +1,7 @@
-import { ChartDataTypes, CommonMixedChartProps, MixedLineBarChartProps } from '../mixed-line-bar-chart/interfaces';
+import { CartesianChartProps } from '../internal/components/cartesian-chart/interfaces';
+import { ChartDataTypes, MixedLineBarChartProps } from '../mixed-line-bar-chart/interfaces';
 type LineSeries<T> = MixedLineBarChartProps.LineDataSeries<T> | MixedLineBarChartProps.ThresholdSeries<T>;
-export interface LineChartProps<T extends ChartDataTypes> extends CommonMixedChartProps<T> {
+export interface LineChartProps<T extends ChartDataTypes> extends CartesianChartProps<T, MixedLineBarChartProps.ChartSeries<T>> {
     /**
      * Array that represents the source of data for the displayed chart.
      * Each element can represent a line series or a threshold, and can have the following properties:
@@ -12,6 +13,11 @@ export interface LineChartProps<T extends ChartDataTypes> extends CommonMixedCha
      * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.
      */
     series: ReadonlyArray<LineSeries<T>>;
+    /**
+     * When set to `true`, adds a visual emphasis on the zero baseline axis.
+     * See the usage guidelines for more details.
+     */
+    emphasizeBaselineAxis?: boolean;
 }
 export declare namespace LineChartProps { }
 export {};

package/line-chart/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["line-chart/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAEnH,KAAK,UAAU,CAAC,CAAC,IAAI,sBAAsB,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;AAE1G,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACxF;;;;;;;;;OASG;IACH,MAAM,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;CACtC;AAGD,yBAAiB,cAAc,CAAC,GAAE"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["line-chart/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAE5F,KAAK,UAAU,CAAC,CAAC,IAAI,sBAAsB,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;AAE1G,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CACtD,SAAQ,mBAAmB,CAAC,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACrE;;;;;;;;;OASG;IACH,MAAM,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAErC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAGD,yBAAiB,cAAc,CAAC,GAAE"}

package/line-chart/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["line-chart/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartDataTypes, CommonMixedChartProps, MixedLineBarChartProps } from '../mixed-line-bar-chart/interfaces';\n\ntype LineSeries<T> = MixedLineBarChartProps.LineDataSeries<T> | MixedLineBarChartProps.ThresholdSeries<T>;\n\nexport interface LineChartProps<T extends ChartDataTypes> extends CommonMixedChartProps<T> {\n  /**\n   * Array that represents the source of data for the displayed chart.\n   * Each element can represent a line series or a threshold, and can have the following properties:\n   *\n   * * `title` (string): A human-readable title for this series\n   * * `type` (string): Series type (`\"line\"`, or `\"threshold\"`)\n   * * `data` (Array): An array of data points, represented as objects with `x` and `y` properties\n   * * `color` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color\n   * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.\n   */\n  series: ReadonlyArray<LineSeries<T>>;\n}\n\n// W/o this documenter injects CartesianChartProps namespace properties into LineChartProps definition.\nexport namespace LineChartProps {}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["line-chart/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CartesianChartProps } from '../internal/components/cartesian-chart/interfaces';\nimport { ChartDataTypes, MixedLineBarChartProps } from '../mixed-line-bar-chart/interfaces';\n\ntype LineSeries<T> = MixedLineBarChartProps.LineDataSeries<T> | MixedLineBarChartProps.ThresholdSeries<T>;\n\nexport interface LineChartProps<T extends ChartDataTypes>\n  extends CartesianChartProps<T, MixedLineBarChartProps.ChartSeries<T>> {\n  /**\n   * Array that represents the source of data for the displayed chart.\n   * Each element can represent a line series or a threshold, and can have the following properties:\n   *\n   * * `title` (string): A human-readable title for this series\n   * * `type` (string): Series type (`\"line\"`, or `\"threshold\"`)\n   * * `data` (Array): An array of data points, represented as objects with `x` and `y` properties\n   * * `color` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color\n   * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.\n   */\n  series: ReadonlyArray<LineSeries<T>>;\n\n  /**\n   * When set to `true`, adds a visual emphasis on the zero baseline axis.\n   * See the usage guidelines for more details.\n   */\n  emphasizeBaselineAxis?: boolean;\n}\n\n// W/o this documenter injects CartesianChartProps namespace properties into LineChartProps definition.\nexport namespace LineChartProps {}\n"]}

package/mixed-line-bar-chart/chart-container.d.ts

@@ -31,7 +31,6 @@ export interface ChartContainerProps<T extends ChartDataTypes> {
     ariaDescription: MixedLineBarChartProps<T>['ariaDescription'];
     i18nStrings: MixedLineBarChartProps<T>['i18nStrings'];
     plotContainerRef: React.RefObject<HTMLDivElement>;
-    detailPopoverSeriesContent?: MixedLineBarChartProps.DetailPopoverSeriesContent<T>;
 }
-export default function ChartContainer<T extends ChartDataTypes>({ fitHeight, height: explicitPlotHeight, series, visibleSeries, highlightedSeries, onHighlightChange, highlightedPoint, setHighlightedPoint, highlightedGroupIndex, setHighlightedGroupIndex, detailPopoverFooter, detailPopoverSize, stackedBars, horizontalBars, xScaleType, yScaleType, xTickFormatter, yTickFormatter, emphasizeBaselineAxis, xTitle, yTitle, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings, plotContainerRef, detailPopoverSeriesContent, ...props }: ChartContainerProps<T>): JSX.Element;
+export default function ChartContainer<T extends ChartDataTypes>({ fitHeight, height: explicitPlotHeight, series, visibleSeries, highlightedSeries, onHighlightChange, highlightedPoint, setHighlightedPoint, highlightedGroupIndex, setHighlightedGroupIndex, detailPopoverFooter, detailPopoverSize, stackedBars, horizontalBars, xScaleType, yScaleType, xTickFormatter, yTickFormatter, emphasizeBaselineAxis, xTitle, yTitle, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings, plotContainerRef, ...props }: ChartContainerProps<T>): JSX.Element;
 //# sourceMappingURL=chart-container.d.ts.map

package/mixed-line-bar-chart/chart-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["mixed-line-bar-chart/chart-container.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["mixed-line-bar-chart/chart-container.tsx"],"names":[],"mappings":"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"}

package/mixed-line-bar-chart/chart-container.js

@@ -35,12 +35,11 @@ const BOTTOM_LABELS_OFFSET = 12;
 const fallbackContainerWidth = 500;
 export default function ChartContainer(_a) {
     var _b, _c;
-    var { fitHeight, height: explicitPlotHeight, series, visibleSeries, highlightedSeries, onHighlightChange, highlightedPoint, setHighlightedPoint, highlightedGroupIndex, setHighlightedGroupIndex, detailPopoverFooter, detailPopoverSize = 'medium', stackedBars = false, horizontalBars = false, xScaleType, yScaleType, xTickFormatter, yTickFormatter, emphasizeBaselineAxis, xTitle, yTitle, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings = {}, plotContainerRef, detailPopoverSeriesContent } = _a, props = __rest(_a, ["fitHeight", "height", "series", "visibleSeries", "highlightedSeries", "onHighlightChange", "highlightedPoint", "setHighlightedPoint", "highlightedGroupIndex", "setHighlightedGroupIndex", "detailPopoverFooter", "detailPopoverSize", "stackedBars", "horizontalBars", "xScaleType", "yScaleType", "xTickFormatter", "yTickFormatter", "emphasizeBaselineAxis", "xTitle", "yTitle", "ariaLabel", "ariaLabelledby", "ariaDescription", "i18nStrings", "plotContainerRef", "detailPopoverSeriesContent"]);
+    var { fitHeight, height: explicitPlotHeight, series, visibleSeries, highlightedSeries, onHighlightChange, highlightedPoint, setHighlightedPoint, highlightedGroupIndex, setHighlightedGroupIndex, detailPopoverFooter, detailPopoverSize = 'medium', stackedBars = false, horizontalBars = false, xScaleType, yScaleType, xTickFormatter, yTickFormatter, emphasizeBaselineAxis, xTitle, yTitle, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings = {}, plotContainerRef } = _a, props = __rest(_a, ["fitHeight", "height", "series", "visibleSeries", "highlightedSeries", "onHighlightChange", "highlightedPoint", "setHighlightedPoint", "highlightedGroupIndex", "setHighlightedGroupIndex", "detailPopoverFooter", "detailPopoverSize", "stackedBars", "horizontalBars", "xScaleType", "yScaleType", "xTickFormatter", "yTickFormatter", "emphasizeBaselineAxis", "xTitle", "yTitle", "ariaLabel", "ariaLabelledby", "ariaDescription", "i18nStrings", "plotContainerRef"]);
     const plotRef = useRef(null);
     const verticalMarkerRef = useRef(null);
     const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);
     const [verticalMarkerX, setVerticalMarkerX] = useState(null);
-    const [detailsPopoverText, setDetailsPopoverText] = useState('');
     const [containerWidth, containerMeasureRef] = useContainerWidth(fallbackContainerWidth);
     const maxLeftLabelsWidth = Math.round(containerWidth / 2);
     const plotWidth = containerWidth
@@ -318,23 +317,15 @@ export default function ChartContainer(_a) {
         // When series point is highlighted show the corresponding series and matching x-thresholds.
         if (highlightedPoint) {
             const seriesToShow = visibleSeries.filter(series => series.series === (highlightedPoint === null || highlightedPoint === void 0 ? void 0 : highlightedPoint.series) || isXThreshold(series.series));
-            return formatHighlighted({
-                position: highlightedX,
-                series: seriesToShow,
-                xTickFormatter,
-                detailPopoverSeriesContent,
-            });
+            return formatHighlighted(highlightedX, seriesToShow, xTickFormatter);
         }
         // Otherwise - show all visible series details.
-        return formatHighlighted({
-            position: highlightedX,
-            series: visibleSeries,
-            xTickFormatter,
-            detailPopoverSeriesContent,
-        });
-    }, [highlightedX, highlightedPoint, visibleSeries, xTickFormatter, detailPopoverSeriesContent]);
+        return formatHighlighted(highlightedX, visibleSeries, xTickFormatter);
+    }, [highlightedX, highlightedPoint, visibleSeries, xTickFormatter]);
     const detailPopoverFooterContent = useMemo(() => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX) : null), [detailPopoverFooter, highlightedX]);
-    const activeAriaLabel = highlightDetails && detailsPopoverText ? `${highlightDetails.position}, ${detailsPopoverText}` : '';
+    const activeAriaLabel = useMemo(() => highlightDetails
+        ? `${highlightDetails.position}, ${highlightDetails.details.map(d => d.key + ' ' + d.value).join(',')}`
+        : '', [highlightDetails]);
     // Live region is used when nothing is focused e.g. when hovering.
     const activeLiveRegion = activeAriaLabel && !highlightedPoint && highlightedGroupIndex === null ? activeAriaLabel : '';
     const isLineXKeyboardFocused = isPlotFocused && !highlightedPoint && verticalMarkerX;
@@ -350,6 +341,6 @@ export default function ChartContainer(_a) {
             React.createElement(VerticalMarker, { key: verticalLineX || '', height: plotHeight, showPoints: highlightedPoint === null, showLine: !isGroupNavigation, points: verticalMarkers, ref: verticalMarkerRef }),
             highlightedPoint && (React.createElement(HighlightedPoint, { ref: highlightedPointRef, point: point, role: "button", ariaLabel: activeAriaLabel, ariaHasPopup: true, ariaExpanded: isPopoverPinned })),
             isGroupNavigation && xAxisProps.scale.isCategorical() && (React.createElement(BarGroups, { ariaLabel: activeAriaLabel, isRefresh: isRefresh, isPopoverPinned: isPopoverPinned, barGroups: barGroups, highlightedGroupIndex: highlightedGroupIndex, highlightedGroupRef: highlightedGroupRef })),
-            React.createElement(BottomLabels, Object.assign({}, bottomLabelsProps, { axis: x, scale: bottomAxisProps.scale, title: bottomAxisProps.title, ariaRoleDescription: bottomAxisProps.ariaRoleDescription, height: plotHeight, width: plotWidth, offsetLeft: leftLabelsWidth + BOTTOM_LABELS_OFFSET, offsetRight: BOTTOM_LABELS_OFFSET }))), popover: React.createElement(ChartPopover, { ref: popoverRef, containerRef: containerRefObject, trackRef: highlightedElementRef, isOpen: isPopoverOpen, isPinned: isPopoverPinned, highlightDetails: highlightDetails, onDismiss: onPopoverDismiss, size: detailPopoverSize, footer: detailPopoverFooterContent, dismissAriaLabel: i18nStrings.detailPopoverDismissAriaLabel, onMouseLeave: onPopoverLeave, onBlur: onSVGBlur, setPopoverText: setDetailsPopoverText }) }));
+            React.createElement(BottomLabels, Object.assign({}, bottomLabelsProps, { axis: x, scale: bottomAxisProps.scale, title: bottomAxisProps.title, ariaRoleDescription: bottomAxisProps.ariaRoleDescription, height: plotHeight, width: plotWidth, offsetLeft: leftLabelsWidth + BOTTOM_LABELS_OFFSET, offsetRight: BOTTOM_LABELS_OFFSET }))), popover: React.createElement(ChartPopover, { ref: popoverRef, containerRef: containerRefObject, trackRef: highlightedElementRef, isOpen: isPopoverOpen, isPinned: isPopoverPinned, highlightDetails: highlightDetails, onDismiss: onPopoverDismiss, size: detailPopoverSize, footer: detailPopoverFooterContent, dismissAriaLabel: i18nStrings.detailPopoverDismissAriaLabel, onMouseLeave: onPopoverLeave, onBlur: onSVGBlur }) }));
 }
 //# sourceMappingURL=chart-container.js.map