@cloudscape-design/chart-components 1.0.0

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

@@ -0,0 +1,233 @@
+/*
+ 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 */
+body[data-awsui-focus-visible=true] .awsui_focus-outline_1kjc7_lk6jz_15:not(#\9) {
+  stroke: var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+/*
+ 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_item_1kjc7_lk6jz_27:not(#\9) {
+  transition: opacity 90ms linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_item_1kjc7_lk6jz_27:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_item_1kjc7_lk6jz_27:not(#\9), .awsui-mode-entering .awsui_item_1kjc7_lk6jz_27:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_root_1kjc7_lk6jz_41:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  overflow: auto;
+  max-height: inherit;
+}
+.awsui_root_1kjc7_lk6jz_41:not(#\9):focus {
+  outline: none;
+}
+
+.awsui_root-side_1kjc7_lk6jz_81:not(#\9) {
+  display: flex;
+  flex-direction: column;
+}
+
+.awsui_list_1kjc7_lk6jz_86:not(#\9) {
+  display: flex;
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: var(--space-static-xxxs-yidks1, 2px);
+  padding-inline: var(--space-static-xxxs-yidks1, 2px);
+  padding-block-start: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.awsui_list-bottom_1kjc7_lk6jz_96:not(#\9) {
+  flex-wrap: wrap;
+  overflow-y: auto;
+  justify-content: space-between;
+}
+
+.awsui_list-side_1kjc7_lk6jz_102:not(#\9) {
+  flex-wrap: nowrap;
+  flex-direction: column;
+}
+
+.awsui_legend-bottom_1kjc7_lk6jz_107:not(#\9) {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  max-inline-size: 100%;
+  gap: var(--space-scaled-xxs-pfm1nx, 4px) var(--space-static-m-m6qboo, 16px);
+}
+
+.awsui_legend-side_1kjc7_lk6jz_116:not(#\9) {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  gap: var(--space-scaled-xxs-pfm1nx, 4px) var(--space-static-m-m6qboo, 16px);
+}
+
+.awsui_item_1kjc7_lk6jz_27:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: inline-flex;
+  padding-block: 0;
+  padding-inline: 0;
+  border-block: 0;
+  border-inline: 0;
+  background-color: transparent;
+  cursor: pointer;
+  opacity: 1;
+  max-inline-size: 100%;
+}
+.awsui_item_1kjc7_lk6jz_27:not(#\9):focus {
+  outline: none;
+}
+body[data-awsui-focus-visible=true] .awsui_item_1kjc7_lk6jz_27:not(#\9):focus {
+  position: relative;
+  box-sizing: border-box;
+  outline: 2px dotted transparent;
+  outline-offset: 1px;
+}
+body[data-awsui-focus-visible=true] .awsui_item_1kjc7_lk6jz_27:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  inset-inline-start: calc(-1 * 2px);
+  inset-block-start: calc(-1 * 2px);
+  inline-size: calc(100% + 2 * 2px);
+  block-size: calc(100% + 2 * 2px);
+  border-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.awsui_item_1kjc7_lk6jz_27.awsui_item--inactive_1kjc7_lk6jz_187:not(#\9) {
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.awsui_item_1kjc7_lk6jz_27.awsui_item--dimmed_1kjc7_lk6jz_193:not(#\9) {
+  opacity: 0.35;
+}
+
+.awsui_item-label_1kjc7_lk6jz_197:not(#\9) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.awsui_actions_1kjc7_lk6jz_207:not(#\9) {
+  display: flex;
+  align-items: center;
+}
+
+.awsui_actions-bottom_1kjc7_lk6jz_212:not(#\9) {
+  flex-direction: row;
+}
+
+.awsui_actions-side_1kjc7_lk6jz_216:not(#\9) {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.awsui_actions-divider-bottom_1kjc7_lk6jz_221:not(#\9) {
+  inline-size: 1px;
+  block-size: 80%;
+  margin-inline: var(--space-scaled-xs-xwoogq, 8px);
+  background: var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+
+.awsui_actions-divider-side_1kjc7_lk6jz_228:not(#\9) {
+  inline-size: 80%;
+  block-size: 1px;
+  margin-block-end: var(--space-scaled-xs-xwoogq, 8px);
+  background: var(--color-border-divider-default-nr68jt, #c6c6cd);
+}

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

@@ -0,0 +1,23 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "focus-outline": "awsui_focus-outline_1kjc7_lk6jz_15",
+  "item": "awsui_item_1kjc7_lk6jz_27",
+  "root": "awsui_root_1kjc7_lk6jz_41",
+  "root-side": "awsui_root-side_1kjc7_lk6jz_81",
+  "list": "awsui_list_1kjc7_lk6jz_86",
+  "list-bottom": "awsui_list-bottom_1kjc7_lk6jz_96",
+  "list-side": "awsui_list-side_1kjc7_lk6jz_102",
+  "legend-bottom": "awsui_legend-bottom_1kjc7_lk6jz_107",
+  "legend-side": "awsui_legend-side_1kjc7_lk6jz_116",
+  "item--inactive": "awsui_item--inactive_1kjc7_lk6jz_187",
+  "item--dimmed": "awsui_item--dimmed_1kjc7_lk6jz_193",
+  "item-label": "awsui_item-label_1kjc7_lk6jz_197",
+  "actions": "awsui_actions_1kjc7_lk6jz_207",
+  "actions-bottom": "awsui_actions-bottom_1kjc7_lk6jz_212",
+  "actions-side": "awsui_actions-side_1kjc7_lk6jz_216",
+  "actions-divider-bottom": "awsui_actions-divider-bottom_1kjc7_lk6jz_221",
+  "actions-divider-side": "awsui_actions-divider-side_1kjc7_lk6jz_228"
+};
+  

package/internal/components/chart-legend/test-classes/styles.css.js

@@ -0,0 +1,11 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_hnnwn_1xf1x_5",
+  "actions": "awsui_actions_hnnwn_1xf1x_6",
+  "title": "awsui_title_hnnwn_1xf1x_7",
+  "item": "awsui_item_hnnwn_1xf1x_8",
+  "hidden-item": "awsui_hidden-item_hnnwn_1xf1x_9",
+  "dimmed-item": "awsui_dimmed-item_hnnwn_1xf1x_10"
+};
+  

package/internal/components/chart-legend/test-classes/styles.scoped.css

@@ -0,0 +1,12 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_hnnwn_1xf1x_5:not(#\9),
+.awsui_actions_hnnwn_1xf1x_6:not(#\9),
+.awsui_title_hnnwn_1xf1x_7:not(#\9),
+.awsui_item_hnnwn_1xf1x_8:not(#\9),
+.awsui_hidden-item_hnnwn_1xf1x_9:not(#\9),
+.awsui_dimmed-item_hnnwn_1xf1x_10:not(#\9) {
+  /* used in test-utils */
+}

package/internal/components/chart-legend/test-classes/styles.selectors.js

@@ -0,0 +1,12 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_hnnwn_1xf1x_5",
+  "actions": "awsui_actions_hnnwn_1xf1x_6",
+  "title": "awsui_title_hnnwn_1xf1x_7",
+  "item": "awsui_item_hnnwn_1xf1x_8",
+  "hidden-item": "awsui_hidden-item_hnnwn_1xf1x_9",
+  "dimmed-item": "awsui_dimmed-item_hnnwn_1xf1x_10"
+};
+  

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

@@ -0,0 +1,17 @@
+import { NonCancelableEventHandler } from "../../../internal/events";
+import { LegendItem } from "../interfaces";
+interface ChartSeriesFilterProps {
+    items: readonly LegendItem[];
+    selectedItems: readonly string[];
+    onChange: NonCancelableEventHandler<{
+        selectedItems: readonly string[];
+    }>;
+    i18nStrings?: {
+        filterLabel?: string;
+        filterPlaceholder?: string;
+        filterSelectedAriaLabel?: string;
+    };
+}
+declare const ChartSeriesFilter: (props: ChartSeriesFilterProps) => import("react/jsx-runtime").JSX.Element;
+export type { ChartSeriesFilterProps };
+export default ChartSeriesFilter;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { InternalChartFilter } from "@cloudscape-design/components/internal/do-not-use/chart-filter";
+import { fireNonCancelableEvent } from "../../../internal/events";
+const ChartSeriesFilter = (props) => {
+    return (_jsx(InternalChartFilter, { series: props.items.map((item) => ({
+            label: item.name,
+            datum: item.id,
+            marker: item.marker,
+        })), selectedSeries: props.selectedItems, onChange: (selectedItems) => fireNonCancelableEvent(props.onChange, { selectedItems }), i18nStrings: props.i18nStrings }));
+};
+export default ChartSeriesFilter;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-series-filter/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,gEAAgE,CAAC;AAErG,OAAO,EAAE,sBAAsB,EAA6B,MAAM,0BAA0B,CAAC;AAc7F,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC1D,OAAO,CACL,KAAC,mBAAmB,IAClB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,IAAI;YAChB,KAAK,EAAE,IAAI,CAAC,EAAE;YACd,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC,EACH,cAAc,EAAE,KAAK,CAAC,aAAa,EACnC,QAAQ,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,aAAa,EAAE,CAAC,EACtF,WAAW,EAAE,KAAK,CAAC,WAAW,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAIF,eAAe,iBAAiB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { InternalChartFilter } from \"@cloudscape-design/components/internal/do-not-use/chart-filter\";\n\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from \"../../../internal/events\";\nimport { LegendItem } from \"../interfaces\";\n\ninterface ChartSeriesFilterProps {\n  items: readonly LegendItem[];\n  selectedItems: readonly string[];\n  onChange: NonCancelableEventHandler<{ selectedItems: readonly string[] }>;\n  i18nStrings?: {\n    filterLabel?: string;\n    filterPlaceholder?: string;\n    filterSelectedAriaLabel?: string;\n  };\n}\n\nconst ChartSeriesFilter = (props: ChartSeriesFilterProps) => {\n  return (\n    <InternalChartFilter\n      series={props.items.map((item) => ({\n        label: item.name,\n        datum: item.id,\n        marker: item.marker,\n      }))}\n      selectedSeries={props.selectedItems}\n      onChange={(selectedItems) => fireNonCancelableEvent(props.onChange, { selectedItems })}\n      i18nStrings={props.i18nStrings}\n    />\n  );\n};\n\nexport type { ChartSeriesFilterProps };\n\nexport default ChartSeriesFilter;\n"]}

package/internal/components/interfaces.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface LegendItem {
+    id: string;
+    name: string;
+    marker: React.ReactNode;
+    visible: boolean;
+    highlighted: boolean;
+}
+export type GetLegendTooltipContent = (props: GetLegendTooltipContentProps) => LegendTooltipContent;
+export interface GetLegendTooltipContentProps {
+    legendItem: LegendItem;
+}
+export interface LegendTooltipContent {
+    header: React.ReactNode;
+    body: React.ReactNode;
+    footer?: React.ReactNode;
+}

package/internal/components/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/components/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/internal/components/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface LegendItem {\n  id: string;\n  name: string;\n  marker: React.ReactNode;\n  visible: boolean;\n  highlighted: boolean;\n}\n\nexport type GetLegendTooltipContent = (props: GetLegendTooltipContentProps) => LegendTooltipContent;\n\nexport interface GetLegendTooltipContentProps {\n  legendItem: LegendItem;\n}\n\nexport interface LegendTooltipContent {\n  header: React.ReactNode;\n  body: React.ReactNode;\n  footer?: React.ReactNode;\n}\n"]}

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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { BaseComponentProps } from "@cloudscape-design/components/internal/base-component";
+interface ChartDetailPair {
+    key: ReactNode;
+    value: ReactNode;
+}
+export interface ChartSeriesDetailItem extends ChartDetailPair {
+    highlighted?: boolean;
+    marker?: React.ReactNode;
+    isDimmed?: boolean;
+    subItems?: ReadonlyArray<ChartDetailPair>;
+    expandableId?: string;
+    description?: ReactNode;
+}
+export type ExpandedSeries = Set<string>;
+interface ChartSeriesDetailsProps extends BaseComponentProps {
+    details: ReadonlyArray<ChartSeriesDetailItem>;
+    expandedSeries?: ExpandedSeries;
+    setExpandedState?: (seriesTitle: string, state: boolean) => void;
+    compactList?: boolean;
+}
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ChartSeriesDetailsProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default _default;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { forwardRef, memo, useEffect, useRef } from "react";
+import clsx from "clsx";
+import { useMergeRefs } from "@cloudscape-design/component-toolkit/internal";
+import { InternalExpandableSection } from "@cloudscape-design/components/internal/do-not-use/expandable-section";
+import { getDataAttributes } from "../../base-component/get-data-attributes";
+import styles from "./styles.css.js";
+import testClasses from "./test-classes/styles.css.js";
+export default memo(forwardRef(ChartSeriesDetails));
+function ChartSeriesDetails({ details, expandedSeries, setExpandedState, compactList, ...restProps }, ref) {
+    const baseProps = getDataAttributes(restProps);
+    const className = clsx(baseProps.className, styles.root);
+    const detailsRef = useRef(null);
+    const mergedRef = useMergeRefs(ref, detailsRef);
+    const selectedRef = useRef(null);
+    const isExpanded = (seriesTitle) => !!expandedSeries && expandedSeries.has(seriesTitle);
+    const selectedIndex = details.findIndex((d) => d.highlighted);
+    useEffect(() => {
+        if (selectedIndex !== -1 && selectedRef.current && "scrollIntoView" in selectedRef.current) {
+            selectedRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    }, [selectedIndex]);
+    return (_jsx("div", { ...baseProps, className: className, ref: mergedRef, children: _jsx("ul", { className: clsx(styles.list, compactList && styles.compact), children: details.map(({ key, value, marker, isDimmed, subItems, expandableId, description, highlighted }, index) => (_jsxs("li", { className: clsx({
+                    [styles.dimmed]: isDimmed,
+                    [styles["list-item"]]: true,
+                    [testClasses["list-item"]]: true,
+                    [styles["with-sub-items"]]: subItems === null || subItems === void 0 ? void 0 : subItems.length,
+                    [styles.expandable]: !!expandableId,
+                }), children: [details.length > 1 && highlighted ? (_jsx("div", { ref: selectedRef, className: styles["highlight-indicator"] })) : null, (subItems === null || subItems === void 0 ? void 0 : subItems.length) && !!expandableId ? (_jsx(ExpandableSeries, { itemKey: key, value: value, marker: marker, description: description, subItems: subItems, expanded: isExpanded(expandableId), setExpandedState: (state) => setExpandedState && setExpandedState(expandableId, state) })) : (_jsx(NonExpandableSeries, { itemKey: key, value: value, marker: marker, description: description, subItems: subItems }))] }, [index, highlighted].join("-")))) }) }));
+}
+function SubItems({ items, expandable, expanded, }) {
+    return (_jsx("ul", { className: clsx(styles["sub-items"], expandable && styles.expandable), children: items.map(({ key, value }, index) => (_jsxs("li", { className: clsx(testClasses["inner-list-item"], styles["inner-list-item"], styles["key-value-pair"], (expanded || !expandable) && styles.announced), children: [_jsx("span", { className: clsx(testClasses.key, styles.key), children: key }), _jsx("span", { className: clsx(testClasses.value, styles.value), children: value })] }, index))) }));
+}
+function ExpandableSeries({ itemKey, value, subItems, marker, expanded, setExpandedState, description, }) {
+    return (_jsxs("div", { className: styles["expandable-section"], children: [marker, _jsxs("div", { className: styles["full-width"], children: [_jsx(InternalExpandableSection, { headerText: _jsx("span", { className: clsx(testClasses.key, styles.key), children: itemKey }), headerActions: _jsx("span", { className: clsx(testClasses.value, styles.value, styles.expandable), children: value }), expanded: expanded, onChange: ({ detail }) => setExpandedState(detail.expanded), variant: "compact", children: _jsx(SubItems, { items: subItems, expandable: true, expanded: expanded }) }), _jsx(Details, { children: description })] })] }));
+}
+function NonExpandableSeries({ itemKey, value, subItems, marker, description }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx(styles["key-value-pair"], styles.announced), children: [_jsxs("div", { className: clsx(testClasses.key, styles.key), children: [marker, _jsx("span", { children: itemKey })] }), _jsx("span", { className: clsx(testClasses.value, styles.value), children: value })] }), subItems && _jsx(SubItems, { items: subItems }), _jsx(Details, { children: description })] }));
+}
+function Details({ children }) {
+    return children ? _jsx("div", { className: clsx(testClasses.description, styles.description), children: children }) : null;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/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\n\nimport { forwardRef, memo, ReactNode, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs } from \"@cloudscape-design/component-toolkit/internal\";\nimport { BaseComponentProps } from \"@cloudscape-design/components/internal/base-component\";\nimport { InternalExpandableSection } from \"@cloudscape-design/components/internal/do-not-use/expandable-section\";\n\nimport { getDataAttributes } from \"../../base-component/get-data-attributes\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\ninterface ChartDetailPair {\n  key: ReactNode;\n  value: ReactNode;\n}\n\ninterface ListItemProps {\n  itemKey: ReactNode;\n  value: ReactNode;\n  subItems?: ReadonlyArray<ChartDetailPair>;\n  marker?: React.ReactNode;\n  description?: ReactNode;\n}\n\nexport interface ChartSeriesDetailItem extends ChartDetailPair {\n  highlighted?: boolean;\n  marker?: React.ReactNode;\n  isDimmed?: boolean;\n  subItems?: ReadonlyArray<ChartDetailPair>;\n  expandableId?: string;\n  description?: ReactNode;\n}\nexport type ExpandedSeries = Set<string>;\n\ninterface ChartSeriesDetailsProps extends BaseComponentProps {\n  details: ReadonlyArray<ChartSeriesDetailItem>;\n  expandedSeries?: ExpandedSeries;\n  setExpandedState?: (seriesTitle: string, state: boolean) => void;\n  compactList?: boolean;\n}\n\nexport default memo(forwardRef(ChartSeriesDetails));\n\nfunction ChartSeriesDetails(\n  { details, expandedSeries, setExpandedState, compactList, ...restProps }: ChartSeriesDetailsProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const baseProps = getDataAttributes(restProps);\n  const className = clsx(baseProps.className, styles.root);\n  const detailsRef = useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergeRefs(ref, detailsRef);\n  const selectedRef = useRef<HTMLDivElement>(null);\n\n  const isExpanded = (seriesTitle: string) => !!expandedSeries && expandedSeries.has(seriesTitle);\n\n  const selectedIndex = details.findIndex((d) => d.highlighted);\n  useEffect(() => {\n    if (selectedIndex !== -1 && selectedRef.current && \"scrollIntoView\" in selectedRef.current) {\n      selectedRef.current.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n    }\n  }, [selectedIndex]);\n\n  return (\n    <div {...baseProps} className={className} ref={mergedRef}>\n      <ul className={clsx(styles.list, compactList && styles.compact)}>\n        {details.map(({ key, value, marker, isDimmed, subItems, expandableId, description, highlighted }, index) => (\n          <li\n            // Include 'highlighted' in the key to force React re-render when highlight state changes.\n            // Without this, the highlight indicator div may not be removed when cursor moves away from data points\n            // due to React's reconciliation algorithm not detecting the state change in complex data scenarios.\n            // This ensures proper cleanup of visual highlight indicators.\n            key={[index, highlighted].join(\"-\")}\n            className={clsx({\n              [styles.dimmed]: isDimmed,\n              [styles[\"list-item\"]]: true,\n              [testClasses[\"list-item\"]]: true,\n              [styles[\"with-sub-items\"]]: subItems?.length,\n              [styles.expandable]: !!expandableId,\n            })}\n          >\n            {details.length > 1 && highlighted ? (\n              <div ref={selectedRef} className={styles[\"highlight-indicator\"]}></div>\n            ) : null}\n            {subItems?.length && !!expandableId ? (\n              <ExpandableSeries\n                itemKey={key}\n                value={value}\n                marker={marker}\n                description={description}\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                marker={marker}\n                description={description}\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            testClasses[\"inner-list-item\"],\n            styles[\"inner-list-item\"],\n            styles[\"key-value-pair\"],\n            (expanded || !expandable) && styles.announced,\n          )}\n        >\n          <span className={clsx(testClasses.key, styles.key)}>{key}</span>\n          <span className={clsx(testClasses.value, styles.value)}>{value}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction ExpandableSeries({\n  itemKey,\n  value,\n  subItems,\n  marker,\n  expanded,\n  setExpandedState,\n  description,\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      {marker}\n      <div className={styles[\"full-width\"]}>\n        <InternalExpandableSection\n          headerText={<span className={clsx(testClasses.key, styles.key)}>{itemKey}</span>}\n          headerActions={<span className={clsx(testClasses.value, styles.value, styles.expandable)}>{value}</span>}\n          expanded={expanded}\n          onChange={({ detail }) => setExpandedState(detail.expanded)}\n          variant=\"compact\"\n        >\n          <SubItems items={subItems} expandable={true} expanded={expanded} />\n        </InternalExpandableSection>\n        <Details>{description}</Details>\n      </div>\n    </div>\n  );\n}\n\nfunction NonExpandableSeries({ itemKey, value, subItems, marker, description }: ListItemProps) {\n  return (\n    <>\n      <div className={clsx(styles[\"key-value-pair\"], styles.announced)}>\n        <div className={clsx(testClasses.key, styles.key)}>\n          {marker}\n          <span>{itemKey}</span>\n        </div>\n        <span className={clsx(testClasses.value, styles.value)}>{value}</span>\n      </div>\n      {subItems && <SubItems items={subItems} />}\n      <Details>{description}</Details>\n    </>\n  );\n}\n\nfunction Details({ children }: { children: ReactNode }) {\n  return children ? <div className={clsx(testClasses.description, styles.description)}>{children}</div> : null;\n}\n"]}

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

@@ -0,0 +1,22 @@
+
+    import './styles.scoped.css';
+    export default {
+  "focus-outline": "awsui_focus-outline_1no4y_1pjth_15",
+  "marker": "awsui_marker_1no4y_1pjth_27",
+  "value": "awsui_value_1no4y_1pjth_65",
+  "expandable": "awsui_expandable_1no4y_1pjth_69",
+  "list-item": "awsui_list-item_1no4y_1pjth_73",
+  "inner-list-item": "awsui_inner-list-item_1no4y_1pjth_74",
+  "key-value-pair": "awsui_key-value-pair_1no4y_1pjth_80",
+  "expandable-section": "awsui_expandable-section_1no4y_1pjth_81",
+  "key": "awsui_key_1no4y_1pjth_80",
+  "sub-items": "awsui_sub-items_1no4y_1pjth_96",
+  "list": "awsui_list_1no4y_1pjth_73",
+  "dimmed": "awsui_dimmed_1no4y_1pjth_115",
+  "compact": "awsui_compact_1no4y_1pjth_119",
+  "with-sub-items": "awsui_with-sub-items_1no4y_1pjth_124",
+  "description": "awsui_description_1no4y_1pjth_129",
+  "full-width": "awsui_full-width_1no4y_1pjth_138",
+  "highlight-indicator": "awsui_highlight-indicator_1no4y_1pjth_142"
+};
+  

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

@@ -0,0 +1,150 @@
+/*
+ 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 */
+body[data-awsui-focus-visible=true] .awsui_focus-outline_1no4y_1pjth_15:not(#\9) {
+  stroke: var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+/*
+ 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_marker_1no4y_1pjth_27:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  margin-block-start: var(--space-static-xxxs-yidks1, 2px);
+  margin-inline-end: var(--space-static-xxs-ns94dp, 4px);
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
+  inline-size: 16px;
+  block-size: 16px;
+  flex-shrink: 0;
+  cursor: inherit;
+}
+
+.awsui_value_1no4y_1pjth_65:not(#\9) {
+  text-align: end;
+  margin-inline-start: var(--space-static-xxl-ifa9j8, 32px);
+}
+.awsui_value_1no4y_1pjth_65.awsui_expandable_1no4y_1pjth_69:not(#\9) {
+  font-weight: var(--font-weight-heading-s-lcx0ai, 700);
+}
+
+.awsui_list-item_1no4y_1pjth_73:not(#\9),
+.awsui_inner-list-item_1no4y_1pjth_74:not(#\9) {
+  list-style: none;
+  position: relative;
+}
+
+.awsui_inner-list-item_1no4y_1pjth_74:not(#\9),
+.awsui_list-item_1no4y_1pjth_73 > .awsui_key-value-pair_1no4y_1pjth_80:not(#\9),
+.awsui_list-item_1no4y_1pjth_73 > .awsui_expandable-section_1no4y_1pjth_81:not(#\9) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  inline-size: 100%;
+}
+.awsui_inner-list-item_1no4y_1pjth_74 > .awsui_key_1no4y_1pjth_80:not(#\9),
+.awsui_list-item_1no4y_1pjth_73 > .awsui_key-value-pair_1no4y_1pjth_80 > .awsui_key_1no4y_1pjth_80:not(#\9),
+.awsui_list-item_1no4y_1pjth_73 > .awsui_expandable-section_1no4y_1pjth_81 > .awsui_key_1no4y_1pjth_80:not(#\9) {
+  min-inline-size: 0;
+  word-break: break-word;
+  display: inline-flex;
+  color: var(--color-text-group-label-a2qc05, #424650);
+}
+
+.awsui_sub-items_1no4y_1pjth_96:not(#\9):not(.awsui_expandable_1no4y_1pjth_69) {
+  padding-inline-start: calc(16px + var(--space-static-xxs-ns94dp, 4px));
+}
+.awsui_sub-items_1no4y_1pjth_96.awsui_expandable_1no4y_1pjth_69:not(#\9) {
+  padding-inline-start: 0;
+}
+.awsui_sub-items_1no4y_1pjth_96.awsui_expandable_1no4y_1pjth_69 > .awsui_inner-list-item_1no4y_1pjth_74 > .awsui_value_1no4y_1pjth_65:not(#\9) {
+  white-space: nowrap;
+}
+
+.awsui_list_1no4y_1pjth_73:not(#\9) {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  list-style: none;
+  flex-direction: column;
+}
+.awsui_list_1no4y_1pjth_73 > .awsui_list-item_1no4y_1pjth_73.awsui_dimmed_1no4y_1pjth_115:not(#\9) {
+  opacity: 0.35;
+}
+
+.awsui_list_1no4y_1pjth_73:not(#\9):not(.awsui_compact_1no4y_1pjth_119) > .awsui_list-item_1no4y_1pjth_73:not(:first-child),
+.awsui_inner-list-item_1no4y_1pjth_74:not(#\9) {
+  margin-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.awsui_list-item_1no4y_1pjth_73.awsui_with-sub-items_1no4y_1pjth_124:not(#\9):not(.awsui_expandable_1no4y_1pjth_69) > .awsui_key-value-pair_1no4y_1pjth_80 > .awsui_key_1no4y_1pjth_80,
+.awsui_list-item_1no4y_1pjth_73.awsui_with-sub-items_1no4y_1pjth_124:not(#\9):not(.awsui_expandable_1no4y_1pjth_69) > .awsui_key-value-pair_1no4y_1pjth_80 > .awsui_value_1no4y_1pjth_65 {
+  font-weight: var(--font-weight-heading-s-lcx0ai, 700);
+}
+
+.awsui_list-item_1no4y_1pjth_73 .awsui_description_1no4y_1pjth_129:not(#\9) {
+  color: var(--color-text-body-secondary-bcbgoi, #424650);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+}
+
+.awsui_list-item_1no4y_1pjth_73.awsui_with-sub-items_1no4y_1pjth_124 .awsui_description_1no4y_1pjth_129:not(#\9) {
+  margin-top: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.awsui_full-width_1no4y_1pjth_138:not(#\9) {
+  inline-size: 100%;
+}
+
+.awsui_highlight-indicator_1no4y_1pjth_142:not(#\9) {
+  position: absolute;
+  top: 3px;
+  left: -6px;
+  inline-size: 3px;
+  block-size: 14px;
+  border-radius: 4px;
+  background: var(--color-text-body-secondary-bcbgoi, #424650);
+}

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

@@ -0,0 +1,23 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "focus-outline": "awsui_focus-outline_1no4y_1pjth_15",
+  "marker": "awsui_marker_1no4y_1pjth_27",
+  "value": "awsui_value_1no4y_1pjth_65",
+  "expandable": "awsui_expandable_1no4y_1pjth_69",
+  "list-item": "awsui_list-item_1no4y_1pjth_73",
+  "inner-list-item": "awsui_inner-list-item_1no4y_1pjth_74",
+  "key-value-pair": "awsui_key-value-pair_1no4y_1pjth_80",
+  "expandable-section": "awsui_expandable-section_1no4y_1pjth_81",
+  "key": "awsui_key_1no4y_1pjth_80",
+  "sub-items": "awsui_sub-items_1no4y_1pjth_96",
+  "list": "awsui_list_1no4y_1pjth_73",
+  "dimmed": "awsui_dimmed_1no4y_1pjth_115",
+  "compact": "awsui_compact_1no4y_1pjth_119",
+  "with-sub-items": "awsui_with-sub-items_1no4y_1pjth_124",
+  "description": "awsui_description_1no4y_1pjth_129",
+  "full-width": "awsui_full-width_1no4y_1pjth_138",
+  "highlight-indicator": "awsui_highlight-indicator_1no4y_1pjth_142"
+};
+