@cloudscape-design/components 3.0.0

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

@@ -0,0 +1,109 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { useUniqueId } from '../../hooks/use-unique-id';
+import { KeyCode } from '../../keycode';
+import LiveRegion from '../live-region/index';
+import ApplicationController from './application-controller';
+import FocusOutline from './focus-outline';
+import focusSvgElement from '../../utils/focus-svg-element';
+var DEFAULT_PLOT_FOCUS_OFFSET = 3;
+var DEFAULT_ELEMENT_FOCUS_OFFSET = 3;
+/**
+  An extension for the SVG to be used for charts. It includes a controller element to
+  handle the focus and keyboard interactions in a way that is supported by screen readers.
+
+  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The
+  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when
+  the focus transition was made.
+
+  Alternatively, ariaLiveRegion can be used to make announcements.
+*/
+export default forwardRef(ChartPlot);
+function ChartPlot(_a, ref) {
+    var _b;
+    var width = _a.width, height = _a.height, transform = _a.transform, offsetTop = _a.offsetTop, offsetBottom = _a.offsetBottom, offsetLeft = _a.offsetLeft, offsetRight = _a.offsetRight, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaRoleDescription = _a.ariaRoleDescription, ariaDescription = _a.ariaDescription, ariaDescribedby = _a.ariaDescribedby, activeElementKey = _a.activeElementKey, activeElementRef = _a.activeElementRef, ariaLiveRegion = _a.ariaLiveRegion, isClickable = _a.isClickable, isPrecise = _a.isPrecise, children = _a.children, onMouseDown = _a.onMouseDown, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, _c = _a.focusOffset, focusOffset = _c === void 0 ? DEFAULT_PLOT_FOCUS_OFFSET : _c, _d = _a.activeElementFocusOffset, activeElementFocusOffset = _d === void 0 ? DEFAULT_ELEMENT_FOCUS_OFFSET : _d, restProps = __rest(_a, ["width", "height", "transform", "offsetTop", "offsetBottom", "offsetLeft", "offsetRight", "ariaLabel", "ariaLabelledby", "ariaRoleDescription", "ariaDescription", "ariaDescribedby", "activeElementKey", "activeElementRef", "ariaLiveRegion", "isClickable", "isPrecise", "children", "onMouseDown", "onKeyDown", "onFocus", "onBlur", "focusOffset", "activeElementFocusOffset"]);
+    var svgRef = useRef(null);
+    var applicationRef = useRef(null);
+    var plotClickedRef = useRef(false);
+    var _e = useState(false), isPlotFocused = _e[0], setPlotFocused = _e[1];
+    var _f = useState(false), isApplicationFocused = _f[0], setApplicationFocused = _f[1];
+    var internalDescriptionId = useUniqueId('awsui-chart-plot__description');
+    var ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');
+    useImperativeHandle(ref, function () { return ({
+        svg: svgRef.current,
+        focusPlot: function () { return focusSvgElement(svgRef.current); },
+        focusApplication: function () { return applicationRef.current.focus(); }
+    }); });
+    var onPlotMouseDown = function (event) {
+        onMouseDown && onMouseDown(event);
+        // Record the click was made for the application focus handler.
+        plotClickedRef.current = true;
+    };
+    var onPlotFocus = function (event) {
+        if (event.target === svgRef.current && !plotClickedRef.current) {
+            setPlotFocused(true);
+        }
+        // The click should focus the underling application bypassing the svg.
+        else if (plotClickedRef.current) {
+            applicationRef.current.focus();
+        }
+    };
+    var onPlotBlur = function (event) {
+        if (event.target === svgRef.current) {
+            setPlotFocused(false);
+        }
+    };
+    // Once one of the expected keys is pressed the focus is delegated to the application controller.
+    var onPlotKeyDown = function (event) {
+        if (isPlotFocused) {
+            // Delegate the focus to the application if one of the expected keys was pressed.
+            var codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];
+            if (codes.indexOf(event.keyCode) !== -1) {
+                applicationRef.current.focus();
+            }
+        }
+    };
+    var onApplicationFocus = function (event) {
+        onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');
+        // "Release" the click reference to not affect the next call of this handler.
+        plotClickedRef.current = false;
+        setApplicationFocused(true);
+    };
+    var onApplicationBlur = function (event) {
+        onBlur && onBlur(event);
+        setApplicationFocused(false);
+    };
+    var onApplicationKeyDown = onKeyDown;
+    var plotFocusable = !isApplicationFocused;
+    var plotTabIndex = plotFocusable ? 0 : -1;
+    var plotAria = !isApplicationFocused
+        ? {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            'aria-describedby': ariaDescriptionId,
+            'aria-roledescription': ariaRoleDescription
+        }
+        : {};
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", __assign({}, restProps, { focusable: plotFocusable, tabIndex: plotTabIndex, role: "application", "aria-hidden": "false" }, plotAria, { ref: svgRef, width: width, height: height, style: {
+                marginTop: offsetTop,
+                marginBottom: offsetBottom,
+                marginLeft: offsetLeft,
+                marginRight: offsetRight
+            }, className: clsx(styles.root, (_b = {},
+                _b[styles.clickable] = isClickable,
+                _b[styles.precise] = isPrecise,
+                _b)), onMouseDown: onPlotMouseDown, onFocus: onPlotFocus, onBlur: onPlotBlur, onKeyDown: onPlotKeyDown }),
+            React.createElement(FocusOutline, { elementRef: svgRef, elementKey: isPlotFocused, offset: focusOffset }),
+            React.createElement("g", { transform: transform, role: "group" },
+                React.createElement(ApplicationController, { activeElementKey: activeElementKey || null, activeElementRef: activeElementRef, ref: applicationRef, onFocus: onApplicationFocus, onBlur: onApplicationBlur, onKeyDown: onApplicationKeyDown }),
+                ariaDescription && plotFocusable && (React.createElement("desc", { "aria-hidden": "true", id: internalDescriptionId }, ariaDescription)),
+                children,
+                React.createElement(FocusOutline, { elementRef: activeElementRef, elementKey: isApplicationFocused && activeElementKey, offset: activeElementFocusOffset }))),
+        React.createElement(LiveRegion, null, ariaLiveRegion)));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/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 focusSvgElement from '../../utils/focus-svg-element';\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;\n  height: number;\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?: number;\n  ariaLiveRegion?: React.ReactNode;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onMouseDown?: (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    onMouseDown,\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 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: () => focusSvgElement(svgRef.current!),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onMouseDown && onMouseDown(event);\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 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': 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        width={width}\n        height={height}\n        style={{\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        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform} role=\"group\">\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-plot/styles.css.js

@@ -0,0 +1,10 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1fcus_1uxsj_93",
+  "clickable": "awsui_clickable_1fcus_1uxsj_102",
+  "precise": "awsui_precise_1fcus_1uxsj_106",
+  "focus-outline": "awsui_focus-outline_1fcus_1uxsj_110",
+  "application": "awsui_application_1fcus_1uxsj_119"
+};
+  

package/internal/components/chart-plot/styles.scoped.css

@@ -0,0 +1,122 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_1fcus_1uxsj_93:not(#\9) {
+  outline: none;
+  shape-rendering: auto;
+  overflow: visible;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+}
+
+.awsui_clickable_1fcus_1uxsj_102:not(#\9) {
+  cursor: pointer;
+}
+
+.awsui_precise_1fcus_1uxsj_106:not(#\9) {
+  shape-rendering: geometricPrecision;
+}
+
+.awsui_focus-outline_1fcus_1uxsj_110:not(#\9) {
+  outline: none;
+  pointer-events: none;
+  fill: none;
+  stroke: #0972d3;
+  stroke: var(--color-border-item-focused-ap3b6s, #0972d3);
+  stroke-width: 2px;
+  visibility: hidden;
+}
+
+.awsui_application_1fcus_1uxsj_119:not(#\9) {
+  /* Used in test-utils */
+}

package/internal/components/chart-plot/styles.selectors.js

@@ -0,0 +1,11 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1fcus_1uxsj_93",
+  "clickable": "awsui_clickable_1fcus_1uxsj_102",
+  "precise": "awsui_precise_1fcus_1uxsj_106",
+  "focus-outline": "awsui_focus-outline_1fcus_1uxsj_110",
+  "application": "awsui_application_1fcus_1uxsj_119"
+};
+  

package/internal/components/chart-popover/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { PopoverProps } from '../../../popover/interfaces';
+export interface ChartPopoverProps extends PopoverProps {
+    /** Title of the popover */
+    title?: React.ReactNode;
+    /** References the element the container is positioned against. */
+    trackRef: React.RefObject<Element>;
+    /**
+      Used to update the container position in case track or track position changes:
+      
+      const trackRef = useRef<Element>(null)
+      return (<>
+        <Track style={getPosition(selectedItemId)} ref={trackRef} />
+        <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>
+      </>)
+    */
+    trackKey?: string | number;
+    /** Optional container element that prevents any clicks in there from dismissing the popover */
+    container: Element | null;
+    /** Event that is fired when the popover is dismissed */
+    onDismiss: (outsideClick?: boolean) => void;
+    /** Popover content */
+    children?: React.ReactNode;
+}
+export default function ChartPopover({ position, size, fixedWidth, dismissButton, dismissAriaLabel, children, title, trackRef, trackKey, onDismiss, container, ...restProps }: ChartPopoverProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/chart-popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,kEAAkE;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,+FAA+F;IAC/F,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,wDAAwD;IACxD,SAAS,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAkB,EAClB,IAAe,EACf,UAAkB,EAClB,aAAqB,EACrB,gBAAgB,EAEhB,QAAQ,EAER,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EAET,GAAG,SAAS,EACb,EAAE,iBAAiB,eAoDnB"}

package/internal/components/chart-popover/index.js

@@ -0,0 +1,37 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../../base-component';
+import PopoverContainer from '../../../popover/container';
+import PopoverBody from '../../../popover/body';
+import popoverStyles from '../../../popover/styles.css.js';
+import { nodeContains } from '../../utils/dom';
+import styles from './styles.css.js';
+export default function ChartPopover(_a) {
+    var _b;
+    var _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.fixedWidth, fixedWidth = _e === void 0 ? false : _e, _f = _a.dismissButton, dismissButton = _f === void 0 ? false : _f, dismissAriaLabel = _a.dismissAriaLabel, children = _a.children, title = _a.title, trackRef = _a.trackRef, trackKey = _a.trackKey, onDismiss = _a.onDismiss, container = _a.container, restProps = __rest(_a, ["position", "size", "fixedWidth", "dismissButton", "dismissAriaLabel", "children", "title", "trackRef", "trackKey", "onDismiss", "container"]);
+    var baseProps = getBaseProps(restProps);
+    var popoverRef = useRef(null);
+    useEffect(function () {
+        var onDocumentClick = function (event) {
+            if (event.target &&
+                !nodeContains(popoverRef.current, event.target) && // click not in popover
+                !nodeContains(container, event.target) // click not in segment
+            ) {
+                onDismiss(true);
+            }
+        };
+        document.addEventListener('mousedown', onDocumentClick, { capture: true });
+        return function () {
+            document.removeEventListener('mousedown', onDocumentClick, { capture: true });
+        };
+    }, [container, onDismiss]);
+    return (React.createElement("span", __assign({}, baseProps, { className: clsx(popoverStyles.root, styles.root, baseProps.className, (_b = {}, _b[styles.dismissable] = dismissButton, _b)), ref: popoverRef }),
+        React.createElement(PopoverContainer, { position: position, trackRef: trackRef, trackKey: trackKey, arrow: function (position) { return (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles["arrow-position-".concat(position)]) },
+                React.createElement("div", { className: popoverStyles['arrow-outer'] }),
+                React.createElement("div", { className: popoverStyles['arrow-inner'] }))); } },
+            React.createElement(PopoverBody, { size: size, fixedWidth: fixedWidth, dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, returnFocus: false, header: title, onDismiss: onDismiss }, children))));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AA6BrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAgBjB;;IAflB,IAAA,gBAAkB,EAAlB,QAAQ,mBAAG,OAAO,KAAA,EAClB,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,gBAAgB,sBAAA,EAEhB,QAAQ,cAAA,EAER,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EAEN,SAAS,cAfuB,8IAgBpC,CADa;IAEZ,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,UAAU,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAExD,SAAS,CAAC;QACR,IAAM,eAAe,GAAG,UAAC,KAAiB;YACxC,IACE,KAAK,CAAC,MAAM;gBACZ,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,MAAiB,CAAC,IAAI,uBAAuB;gBACrF,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,MAAiB,CAAC,CAAC,uBAAuB;cACzE;gBACA,SAAS,CAAC,IAAI,CAAC,CAAC;aACjB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAChF,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,yCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,YAAI,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa,MAAG,EAC9G,GAAG,EAAE,UAAU;QAEf,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAA,QAAQ,IAAI,OAAA,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,yBAAkB,QAAQ,CAAE,CAAC,CAAC;gBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;gBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP,EALkB,CAKlB;YAED,oBAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,KAAK,EAClB,MAAM,EAAE,KAAK,EACb,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACG,CACG,CACd,CACR,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../../base-component';\n\nimport { PopoverProps } from '../../../popover/interfaces';\nimport PopoverContainer from '../../../popover/container';\nimport PopoverBody from '../../../popover/body';\nimport popoverStyles from '../../../popover/styles.css.js';\nimport { nodeContains } from '../../utils/dom';\n\nimport styles from './styles.css.js';\n\nexport interface ChartPopoverProps extends PopoverProps {\n  /** Title of the popover */\n  title?: React.ReactNode;\n\n  /** References the element the container is positioned against. */\n  trackRef: React.RefObject<Element>;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n\n  /** Optional container element that prevents any clicks in there from dismissing the popover */\n  container: Element | null;\n\n  /** Event that is fired when the popover is dismissed */\n  onDismiss: (outsideClick?: boolean) => void;\n\n  /** Popover content */\n  children?: React.ReactNode;\n}\n\nexport default function ChartPopover({\n  position = 'right',\n  size = 'medium',\n  fixedWidth = false,\n  dismissButton = false,\n  dismissAriaLabel,\n\n  children,\n\n  title,\n  trackRef,\n  trackKey,\n  onDismiss,\n  container,\n\n  ...restProps\n}: ChartPopoverProps) {\n  const baseProps = getBaseProps(restProps);\n  const popoverRef = useRef<HTMLSpanElement | null>(null);\n\n  useEffect(() => {\n    const onDocumentClick = (event: MouseEvent) => {\n      if (\n        event.target &&\n        !nodeContains(popoverRef.current, event.target as Element) && // click not in popover\n        !nodeContains(container, event.target as Element) // click not in segment\n      ) {\n        onDismiss(true);\n      }\n    };\n\n    document.addEventListener('mousedown', onDocumentClick, { capture: true });\n    return () => {\n      document.removeEventListener('mousedown', onDocumentClick, { capture: true });\n    };\n  }, [container, onDismiss]);\n\n  return (\n    <span\n      {...baseProps}\n      className={clsx(popoverStyles.root, styles.root, baseProps.className, { [styles.dismissable]: dismissButton })}\n      ref={popoverRef}\n    >\n      <PopoverContainer\n        position={position}\n        trackRef={trackRef}\n        trackKey={trackKey}\n        arrow={position => (\n          <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n            <div className={popoverStyles['arrow-outer']} />\n            <div className={popoverStyles['arrow-inner']} />\n          </div>\n        )}\n      >\n        <PopoverBody\n          size={size}\n          fixedWidth={fixedWidth}\n          dismissButton={dismissButton}\n          dismissAriaLabel={dismissAriaLabel}\n          returnFocus={false}\n          header={title}\n          onDismiss={onDismiss}\n        >\n          {children}\n        </PopoverBody>\n      </PopoverContainer>\n    </span>\n  );\n}\n"]}

package/internal/components/chart-popover/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1t44z_19k97_93",
+  "dismissable": "awsui_dismissable_1t44z_19k97_105"
+};
+  

package/internal/components/chart-popover/styles.scoped.css

@@ -0,0 +1,138 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_1t44z_19k97_93: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;
+      -ms-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: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  position: absolute;
+  pointer-events: none;
+}
+.awsui_root_1t44z_19k97_93.awsui_dismissable_1t44z_19k97_105:not(#\9) {
+  pointer-events: auto;
+}

package/internal/components/chart-popover/styles.selectors.js

@@ -0,0 +1,8 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1t44z_19k97_93",
+  "dismissable": "awsui_dismissable_1t44z_19k97_105"
+};
+  

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BaseComponentProps } from '../../base-component';
+import { ChartDetailPair } from '../../../pie-chart/interfaces';
+import { ChartSeriesMarkerType } from '../chart-series-marker';
+export interface ChartSeriesDetailItem extends ChartDetailPair {
+    markerType?: ChartSeriesMarkerType;
+    color?: string;
+    isDimmed?: boolean;
+}
+export interface ChartSeriesDetailsProps extends BaseComponentProps {
+    details: ReadonlyArray<ChartSeriesDetailItem>;
+}
+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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/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

@@ -0,0 +1,29 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+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';
+export default memo(ChartSeriesDetails);
+function ChartSeriesDetails(_a) {
+    var details = _a.details, restProps = __rest(_a, ["details"]);
+    var baseProps = getBaseProps(restProps);
+    var className = clsx(baseProps.className, styles.root);
+    return (React.createElement("div", __assign({}, baseProps, { className: className }),
+        React.createElement("ul", { className: styles.list }, details.map(function (_a, index) {
+            var _b;
+            var key = _a.key, value = _a.value, markerType = _a.markerType, color = _a.color, isDimmed = _a.isDimmed;
+            return (React.createElement("li", { key: index, className: clsx((_b = {},
+                    _b[styles.dimmed] = isDimmed,
+                    _b[styles['list-item']] = true,
+                    _b)) },
+                React.createElement("div", { className: styles.key },
+                    markerType && color && React.createElement(ChartSeriesMarker, { type: markerType, color: color }),
+                    React.createElement("span", null, key)),
+                React.createElement(InternalBox, { textAlign: "right" }, value)));
+        }))));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/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;IAAhD,IAAA,OAAO,aAAA,EAAK,SAAS,cAAvB,WAAyB,CAAF;IACjD,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,SAAS;QACtC,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IACvB,OAAO,CAAC,GAAG,CAAC,UAAC,EAA2C,EAAE,KAAK;;gBAAhD,GAAG,SAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA;YAAc,OAAA,CACnE,4BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,IAAI;oBACb,GAAC,MAAM,CAAC,MAAM,IAAG,QAAQ;oBACzB,GAAC,MAAM,CAAC,WAAW,CAAC,IAAG,IAAI;wBAC3B;gBAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;oBACvB,UAAU,IAAI,KAAK,IAAI,oBAAC,iBAAiB,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI;oBAC7E,kCAAO,GAAG,CAAQ,CACd;gBACN,oBAAC,WAAW,IAAC,SAAS,EAAC,OAAO,IAAE,KAAK,CAAe,CACjD,CACN;QAdoE,CAcpE,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

@@ -0,0 +1,10 @@
+
+    import './styles.scoped.css';
+    export default {
+  "dimmed": "awsui_dimmed_10ipo_1pmg0_93",
+  "root": "awsui_root_10ipo_1pmg0_120",
+  "list": "awsui_list_10ipo_1pmg0_131",
+  "list-item": "awsui_list-item_10ipo_1pmg0_138",
+  "key": "awsui_key_10ipo_1pmg0_143"
+};
+