@cloudscape-design/chart-components 1.0.0

package/internal/chart-styles.js

@@ -0,0 +1,145 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { colorBackgroundContainerContent, colorChartsLineTick, colorChartsPaletteCategorical1, colorChartsPaletteCategorical2, colorChartsPaletteCategorical3, colorChartsPaletteCategorical4, colorChartsPaletteCategorical5, colorChartsPaletteCategorical6, colorChartsPaletteCategorical7, colorChartsPaletteCategorical8, colorChartsPaletteCategorical9, colorChartsPaletteCategorical10, colorChartsThresholdNeutral, colorTextBodyDefault, colorTextBodySecondary, fontFamilyBase, fontSizeBodyM, fontSizeBodyS, fontWeightHeadingS, } from "@cloudscape-design/design-tokens";
+import styles from "./styles.css.js";
+// Here we define chart styles and colors, used across multiple components, including core chart, cartesian- and pie charts,
+// series markers.
+export const colors = [
+    colorChartsPaletteCategorical1,
+    colorChartsPaletteCategorical2,
+    colorChartsPaletteCategorical3,
+    colorChartsPaletteCategorical4,
+    colorChartsPaletteCategorical5,
+    colorChartsPaletteCategorical6,
+    colorChartsPaletteCategorical7,
+    colorChartsPaletteCategorical8,
+    colorChartsPaletteCategorical9,
+    colorChartsPaletteCategorical10,
+];
+export const chart = {
+    spacing: [10, 10, 0, 0],
+    backgroundColor: "transparent",
+};
+export const axisTitleCss = {
+    color: colorTextBodyDefault,
+    fontSize: fontSizeBodyM,
+    fontWeight: fontWeightHeadingS,
+};
+export const axisLabelsCss = {
+    color: colorTextBodySecondary,
+    fontSize: fontSizeBodyS,
+};
+export const xAxisOptions = {
+    tickColor: colorChartsLineTick,
+    lineColor: colorChartsLineTick,
+    gridLineColor: colorChartsLineTick,
+    lineWidth: 1,
+    crosshair: false,
+};
+export const yAxisOptions = {
+    tickColor: colorChartsLineTick,
+    lineColor: colorChartsLineTick,
+    gridLineColor: colorChartsLineTick,
+    lineWidth: 0,
+    crosshair: false,
+};
+export const chartPlotCss = {
+    font: fontFamilyBase,
+    color: colorTextBodyDefault,
+    fontSize: fontSizeBodyM,
+};
+export const seriesBorderColor = colorBackgroundContainerContent;
+export const hiddenSeriesMarker = { enabled: false, radius: 3, symbol: "circle" };
+export const areaSeries = {
+    fillOpacity: 0.4,
+    marker: hiddenSeriesMarker,
+};
+export const lineSeries = {
+    marker: hiddenSeriesMarker,
+};
+export const columnSeries = {
+    groupPadding: 0.075,
+    borderRadius: 4,
+    borderWidth: 2,
+    marker: hiddenSeriesMarker,
+};
+export const errorbarSeries = {
+    color: colorChartsThresholdNeutral,
+    stemColor: colorChartsThresholdNeutral,
+    whiskerColor: colorChartsThresholdNeutral,
+};
+export const pieSeries = {
+    borderWidth: 2,
+    // This sets the color of the empty pie/donut ring.
+    // See: https://github.com/highcharts/highcharts/issues/23073.
+    color: "transparent",
+    size: "60%",
+};
+export const donutSeries = {
+    ...pieSeries,
+    innerSize: "80%",
+};
+export const pieSeriesDataLabels = {
+    connectorColor: colorChartsThresholdNeutral,
+};
+export const dimmedPlotLineOpacity = 0.4;
+export const seriesDataLabelsCss = {
+    font: fontFamilyBase,
+    color: colorTextBodyDefault,
+    fontSize: fontSizeBodyM,
+    fontWeight: fontWeightHeadingS,
+    textOutline: "",
+};
+export const seriesOpacityInactive = 0.3;
+export const verticalAxisTitleBlockSize = 24;
+export const verticalAxisTitleMargin = 4;
+export const navigationFocusOutline = {
+    class: styles["focus-outline"],
+    "stroke-width": 2,
+    rx: 4,
+    zIndex: 10,
+};
+export const cursorLine = {
+    fill: colorChartsLineTick,
+    zIndex: 5,
+    style: "pointer-events: none",
+};
+export const focusOutlineOffsets = {
+    chart: -1,
+    group: 4,
+    point: 6,
+    pointByType: { column: 2, pie: 2 },
+};
+export const thresholdSeries = {
+    dashStyle: "ShortDash",
+    lineWidth: 0,
+    color: colorChartsThresholdNeutral,
+};
+export const thresholdPlotLine = {
+    width: 2,
+    dashStyle: "ShortDash",
+    zIndex: 3,
+    color: colorChartsThresholdNeutral,
+};
+export const chatPlotBaseline = {
+    color: colorChartsLineTick,
+    width: 2,
+    zIndex: 2,
+};
+export const innerAreaTitleCss = {
+    fontSize: "28",
+    fontWeight: "bold",
+};
+export const innerAreaDescriptionCss = {
+    fontSize: "18",
+    fontWeight: "bold",
+    color: colorTextBodySecondary,
+};
+export const segmentDescriptionCss = {
+    fontFamily: fontFamilyBase,
+    fontWeight: "normal",
+    fontSize: fontSizeBodyS,
+    color: colorTextBodySecondary,
+};
+export const tooltipSnap = 4;
+//# sourceMappingURL=chart-styles.js.map

package/internal/chart-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-styles.js","sourceRoot":"","sources":["../../../src/internal/chart-styles.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,OAAO,EACL,+BAA+B,EAC/B,mBAAmB,EACnB,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,+BAA+B,EAC/B,2BAA2B,EAC3B,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,aAAa,EACb,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,4HAA4H;AAC5H,kBAAkB;AAElB,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;IAC9B,+BAA+B;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;IACvB,eAAe,EAAE,aAAa;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAyB;IAChD,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,aAAa;IACvB,UAAU,EAAE,kBAAkB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyB;IACjD,KAAK,EAAE,sBAAsB;IAC7B,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA4B;IACnD,SAAS,EAAE,mBAAmB;IAC9B,SAAS,EAAE,mBAAmB;IAC9B,aAAa,EAAE,mBAAmB;IAClC,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA4B;IACnD,SAAS,EAAE,mBAAmB;IAC9B,SAAS,EAAE,mBAAmB;IAC9B,aAAa,EAAE,mBAAmB;IAClC,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAyB;IAChD,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;AAEjE,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAElF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,kBAAkB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,kBAAkB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,CAAC;IACf,WAAW,EAAE,CAAC;IACd,MAAM,EAAE,kBAAkB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,2BAA2B;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,WAAW,EAAE,CAAC;IACd,mDAAmD;IACnD,8DAA8D;IAC9D,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,KAAK;CACZ,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,GAAG,SAAS;IACZ,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,cAAc,EAAE,2BAA2B;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAEzC,MAAM,CAAC,MAAM,mBAAmB,GAAyB;IACvD,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,aAAa;IACvB,UAAU,EAAE,kBAAkB;IAC9B,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAEzC,MAAM,CAAC,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAC7C,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC;IAC9B,cAAc,EAAE,CAAC;IACjB,EAAE,EAAE,CAAC;IACL,MAAM,EAAE,EAAE;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAwC;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA0C;IACpE,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAiF;IAC7G,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA8C;IACzE,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAyB;IACrD,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,MAAM;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAyB;IAC3D,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAwB;IACxD,UAAU,EAAE,cAAc;IAC1B,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type Highcharts from \"highcharts\";\n\nimport {\n  colorBackgroundContainerContent,\n  colorChartsLineTick,\n  colorChartsPaletteCategorical1,\n  colorChartsPaletteCategorical2,\n  colorChartsPaletteCategorical3,\n  colorChartsPaletteCategorical4,\n  colorChartsPaletteCategorical5,\n  colorChartsPaletteCategorical6,\n  colorChartsPaletteCategorical7,\n  colorChartsPaletteCategorical8,\n  colorChartsPaletteCategorical9,\n  colorChartsPaletteCategorical10,\n  colorChartsThresholdNeutral,\n  colorTextBodyDefault,\n  colorTextBodySecondary,\n  fontFamilyBase,\n  fontSizeBodyM,\n  fontSizeBodyS,\n  fontWeightHeadingS,\n} from \"@cloudscape-design/design-tokens\";\n\nimport styles from \"./styles.css.js\";\n\n// Here we define chart styles and colors, used across multiple components, including core chart, cartesian- and pie charts,\n// series markers.\n\nexport const colors = [\n  colorChartsPaletteCategorical1,\n  colorChartsPaletteCategorical2,\n  colorChartsPaletteCategorical3,\n  colorChartsPaletteCategorical4,\n  colorChartsPaletteCategorical5,\n  colorChartsPaletteCategorical6,\n  colorChartsPaletteCategorical7,\n  colorChartsPaletteCategorical8,\n  colorChartsPaletteCategorical9,\n  colorChartsPaletteCategorical10,\n];\n\nexport const chart: Highcharts.ChartOptions = {\n  spacing: [10, 10, 0, 0],\n  backgroundColor: \"transparent\",\n};\n\nexport const axisTitleCss: Highcharts.CSSObject = {\n  color: colorTextBodyDefault,\n  fontSize: fontSizeBodyM,\n  fontWeight: fontWeightHeadingS,\n};\n\nexport const axisLabelsCss: Highcharts.CSSObject = {\n  color: colorTextBodySecondary,\n  fontSize: fontSizeBodyS,\n};\n\nexport const xAxisOptions: Highcharts.XAxisOptions = {\n  tickColor: colorChartsLineTick,\n  lineColor: colorChartsLineTick,\n  gridLineColor: colorChartsLineTick,\n  lineWidth: 1,\n  crosshair: false,\n};\n\nexport const yAxisOptions: Highcharts.YAxisOptions = {\n  tickColor: colorChartsLineTick,\n  lineColor: colorChartsLineTick,\n  gridLineColor: colorChartsLineTick,\n  lineWidth: 0,\n  crosshair: false,\n};\n\nexport const chartPlotCss: Highcharts.CSSObject = {\n  font: fontFamilyBase,\n  color: colorTextBodyDefault,\n  fontSize: fontSizeBodyM,\n};\n\nexport const seriesBorderColor = colorBackgroundContainerContent;\n\nexport const hiddenSeriesMarker = { enabled: false, radius: 3, symbol: \"circle\" };\n\nexport const areaSeries = {\n  fillOpacity: 0.4,\n  marker: hiddenSeriesMarker,\n};\n\nexport const lineSeries = {\n  marker: hiddenSeriesMarker,\n};\n\nexport const columnSeries = {\n  groupPadding: 0.075,\n  borderRadius: 4,\n  borderWidth: 2,\n  marker: hiddenSeriesMarker,\n};\n\nexport const errorbarSeries = {\n  color: colorChartsThresholdNeutral,\n  stemColor: colorChartsThresholdNeutral,\n  whiskerColor: colorChartsThresholdNeutral,\n};\n\nexport const pieSeries = {\n  borderWidth: 2,\n  // This sets the color of the empty pie/donut ring.\n  // See: https://github.com/highcharts/highcharts/issues/23073.\n  color: \"transparent\",\n  size: \"60%\",\n};\nexport const donutSeries = {\n  ...pieSeries,\n  innerSize: \"80%\",\n};\n\nexport const pieSeriesDataLabels = {\n  connectorColor: colorChartsThresholdNeutral,\n};\n\nexport const dimmedPlotLineOpacity = 0.4;\n\nexport const seriesDataLabelsCss: Highcharts.CSSObject = {\n  font: fontFamilyBase,\n  color: colorTextBodyDefault,\n  fontSize: fontSizeBodyM,\n  fontWeight: fontWeightHeadingS,\n  textOutline: \"\",\n};\n\nexport const seriesOpacityInactive = 0.3;\n\nexport const verticalAxisTitleBlockSize = 24;\nexport const verticalAxisTitleMargin = 4;\n\nexport const navigationFocusOutline = {\n  class: styles[\"focus-outline\"],\n  \"stroke-width\": 2,\n  rx: 4,\n  zIndex: 10,\n};\n\nexport const cursorLine = {\n  fill: colorChartsLineTick,\n  zIndex: 5,\n  style: \"pointer-events: none\",\n};\n\nexport const focusOutlineOffsets = {\n  chart: -1,\n  group: 4,\n  point: 6,\n  pointByType: { column: 2, pie: 2 } as Record<string, number | undefined>,\n};\n\nexport const thresholdSeries: Partial<Highcharts.SeriesLineOptions> = {\n  dashStyle: \"ShortDash\",\n  lineWidth: 0,\n  color: colorChartsThresholdNeutral,\n};\n\nexport const thresholdPlotLine: Partial<Highcharts.XAxisPlotLinesOptions | Highcharts.YAxisPlotLinesOptions> = {\n  width: 2,\n  dashStyle: \"ShortDash\",\n  zIndex: 3,\n  color: colorChartsThresholdNeutral,\n};\n\nexport const chatPlotBaseline: Partial<Highcharts.XAxisPlotLinesOptions> = {\n  color: colorChartsLineTick,\n  width: 2,\n  zIndex: 2,\n};\n\nexport const innerAreaTitleCss: Highcharts.CSSObject = {\n  fontSize: \"28\",\n  fontWeight: \"bold\",\n};\n\nexport const innerAreaDescriptionCss: Highcharts.CSSObject = {\n  fontSize: \"18\",\n  fontWeight: \"bold\",\n  color: colorTextBodySecondary,\n};\n\nexport const segmentDescriptionCss: React.CSSProperties = {\n  fontFamily: fontFamilyBase,\n  fontWeight: \"normal\",\n  fontSize: fontSizeBodyS,\n  color: colorTextBodySecondary,\n};\n\nexport const tooltipSnap = 4;\n"]}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from "../interfaces";
+export interface ChartLegendProps {
+    items: readonly LegendItem[];
+    legendTitle?: string;
+    ariaLabel?: string;
+    actions?: React.ReactNode;
+    position: "bottom" | "side";
+    onItemHighlightEnter: (item: LegendItem) => void;
+    onItemHighlightExit: () => void;
+    onItemVisibilityChange: (hiddenItems: string[]) => void;
+    getTooltipContent: (props: GetLegendTooltipContentProps) => null | LegendTooltipContent;
+}
+export declare const ChartLegend: ({ items, legendTitle, ariaLabel, actions, position, onItemVisibilityChange, onItemHighlightEnter, onItemHighlightExit, getTooltipContent, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,245 @@
+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, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { circleIndex, handleKey, KeyCode, SingleTabStopNavigationProvider, useMergeRefs, useSingleTabStopNavigation, } from "@cloudscape-design/component-toolkit/internal";
+import Box from "@cloudscape-design/components/box";
+import { InternalChartTooltip } from "@cloudscape-design/components/internal/do-not-use/chart-tooltip";
+import { DebouncedCall } from "../../utils/utils";
+import styles from "./styles.css.js";
+import testClasses from "./test-classes/styles.css.js";
+const TOOLTIP_BLUR_DELAY = 50;
+const HIGHLIGHT_LOST_DELAY = 50;
+const SCROLL_DELAY = 100;
+export const ChartLegend = ({ items, legendTitle, ariaLabel, actions, position, onItemVisibilityChange, onItemHighlightEnter, onItemHighlightExit, getTooltipContent, }) => {
+    var _a;
+    const containerRef = useRef(null);
+    const elementsByIndexRef = useRef([]);
+    const elementsByIdRef = useRef({});
+    const tooltipRef = useRef(null);
+    const highlightControl = useMemo(() => new DebouncedCall(), []);
+    const scrollIntoViewControl = useMemo(() => new DebouncedCall(), []);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [tooltipItemId, setTooltipItemId] = useState(null);
+    const { showTooltip, hideTooltip } = useMemo(() => {
+        const control = new DebouncedCall();
+        return {
+            showTooltip(itemId) {
+                control.call(() => setTooltipItemId(itemId));
+            },
+            hideTooltip(lock = false) {
+                control.call(() => setTooltipItemId(null), TOOLTIP_BLUR_DELAY);
+                if (lock) {
+                    control.lock(TOOLTIP_BLUR_DELAY);
+                }
+            },
+        };
+    }, []);
+    useEffect(() => {
+        if (!tooltipItemId) {
+            return;
+        }
+        const onDocumentKeyDown = (event) => {
+            var _a;
+            if (event.keyCode === KeyCode.escape) {
+                hideTooltip(true);
+                (_a = elementsByIdRef.current[tooltipItemId]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        document.addEventListener("keydown", onDocumentKeyDown, true);
+        return () => {
+            document.removeEventListener("keydown", onDocumentKeyDown, true);
+        };
+    }, [items, tooltipItemId, hideTooltip]);
+    const isMouseInContainer = useRef(false);
+    // Scrolling to the highlighted legend item.
+    useEffect(() => {
+        const highlightedIndex = items.findIndex((item) => item.highlighted);
+        if (highlightedIndex === -1) {
+            return;
+        }
+        scrollIntoViewControl.call(() => {
+            var _a;
+            if (isMouseInContainer.current) {
+                return;
+            }
+            const container = containerRef.current;
+            const element = (_a = elementsByIndexRef.current) === null || _a === void 0 ? void 0 : _a[highlightedIndex];
+            if (!container || !element) {
+                return;
+            }
+            const elementRect = element.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+            if (!isVisible) {
+                const elementCenter = elementRect.top + elementRect.height / 2;
+                const containerCenter = containerRect.top + containerRect.height / 2;
+                const top = container.scrollTop + (elementCenter - containerCenter);
+                container.scrollTo({ top, behavior: "smooth" });
+            }
+        }, SCROLL_DELAY);
+    }, [items, scrollIntoViewControl]);
+    const showHighlight = (itemId) => {
+        const item = items.find((item) => item.id === itemId);
+        if (item === null || item === void 0 ? void 0 : item.visible) {
+            highlightControl.cancelPrevious();
+            onItemHighlightEnter(item);
+        }
+    };
+    const clearHighlight = () => {
+        highlightControl.call(onItemHighlightExit, HIGHLIGHT_LOST_DELAY);
+    };
+    const navigationAPI = useRef(null);
+    function onFocus(index, itemId) {
+        setSelectedIndex(index);
+        navigationAPI.current.updateFocusTarget();
+        showHighlight(itemId);
+        showTooltip(itemId);
+    }
+    function onBlur(event) {
+        navigationAPI.current.updateFocusTarget();
+        // Hide tooltip and clear highlight unless focus moves inside tooltip;
+        if (tooltipRef.current && event.relatedTarget && !tooltipRef.current.contains(event.relatedTarget)) {
+            clearHighlight();
+            hideTooltip();
+        }
+    }
+    function focusElement(index) {
+        var _a;
+        (_a = elementsByIndexRef.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function onKeyDown(event) {
+        if (event.keyCode === KeyCode.right ||
+            event.keyCode === KeyCode.left ||
+            event.keyCode === KeyCode.up ||
+            event.keyCode === KeyCode.down ||
+            event.keyCode === KeyCode.home ||
+            event.keyCode === KeyCode.end ||
+            event.keyCode === KeyCode.escape) {
+            // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.
+            event.preventDefault();
+            const range = [0, items.length - 1];
+            handleKey(event, {
+                onInlineStart: () => focusElement(circleIndex(selectedIndex - 1, range)),
+                onInlineEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),
+                onBlockStart: () => focusElement(circleIndex(selectedIndex - 1, range)),
+                onBlockEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),
+                onHome: () => focusElement(0),
+                onEnd: () => focusElement(items.length - 1),
+                onEscape: () => onItemHighlightExit(),
+            });
+        }
+    }
+    function getNextFocusTarget() {
+        var _a;
+        if (containerRef.current) {
+            const buttons = Array.from(containerRef.current.querySelectorAll(`.${styles.item}`));
+            return (_a = buttons[selectedIndex]) !== null && _a !== void 0 ? _a : null;
+        }
+        return null;
+    }
+    function onUnregisterActive(focusableElement, navigationAPI) {
+        var _a;
+        const target = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {
+            target.focus();
+        }
+    }
+    useEffect(() => {
+        navigationAPI.current.updateFocusTarget();
+    });
+    const toggleItem = (itemId) => {
+        const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
+        if (visibleItems.includes(itemId)) {
+            onItemVisibilityChange(visibleItems.filter((visibleItemId) => visibleItemId !== itemId));
+        }
+        else {
+            onItemVisibilityChange([...visibleItems, itemId]);
+        }
+        // Needed for touch devices.
+        onItemHighlightExit();
+    };
+    const selectItem = (itemId) => {
+        const visibleItems = items.filter((i) => i.visible).map((i) => i.id);
+        if (visibleItems.length === 1 && visibleItems[0] === itemId) {
+            onItemVisibilityChange(items.map((i) => i.id));
+        }
+        else {
+            onItemVisibilityChange([itemId]);
+        }
+        // Needed for touch devices.
+        onItemHighlightExit();
+    };
+    const tooltipTrack = useRef(null);
+    const tooltipTarget = (_a = items.find((item) => item.id === tooltipItemId)) !== null && _a !== void 0 ? _a : null;
+    tooltipTrack.current = tooltipItemId ? elementsByIdRef.current[tooltipItemId] : null;
+    const tooltipContent = tooltipTarget && getTooltipContent({ legendItem: tooltipTarget });
+    const tooltipPosition = position === "bottom" ? "bottom" : "left";
+    return (_jsx(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: () => getNextFocusTarget(), onUnregisterActive: (element) => onUnregisterActive(element, navigationAPI), children: _jsxs("div", { ref: containerRef, role: "toolbar", "aria-label": legendTitle || ariaLabel, className: clsx(testClasses.root, styles.root, {
+                [styles["root-side"]]: position === "side",
+            }), onMouseEnter: () => (isMouseInContainer.current = true), onMouseLeave: () => (isMouseInContainer.current = false), children: [legendTitle && (_jsx(Box, { fontWeight: "bold", className: testClasses.title, children: legendTitle })), _jsxs("div", { 
+                    // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.
+                    // Setting the tab index to -1 does fix the problem.
+                    tabIndex: -1, className: clsx(styles.list, {
+                        [styles["list-bottom"]]: position === "bottom",
+                        [styles["list-side"]]: position === "side",
+                    }), children: [actions && (_jsx(_Fragment, { children: _jsxs("div", { className: clsx(testClasses.actions, styles.actions, {
+                                    [styles["actions-bottom"]]: position === "bottom",
+                                    [styles["actions-side"]]: position === "side",
+                                }), children: [actions, _jsx("div", { className: clsx(styles["actions-divider"], {
+                                            [styles["actions-divider-bottom"]]: position === "bottom",
+                                            [styles["actions-divider-side"]]: position === "side",
+                                        }) })] }) })), _jsx("div", { className: clsx({
+                                [styles["legend-bottom"]]: position === "bottom",
+                                [styles["legend-side"]]: position === "side",
+                            }), children: items.map((item, index) => {
+                                const handlers = {
+                                    onMouseEnter: () => {
+                                        showHighlight(item.id);
+                                        showTooltip(item.id);
+                                    },
+                                    onMouseLeave: () => {
+                                        clearHighlight();
+                                        hideTooltip();
+                                    },
+                                    onFocus: () => {
+                                        onFocus(index, item.id);
+                                    },
+                                    onBlur: (event) => {
+                                        onBlur(event);
+                                    },
+                                    onKeyDown,
+                                };
+                                const thisTriggerRef = (elem) => {
+                                    if (elem) {
+                                        elementsByIndexRef.current[index] = elem;
+                                        elementsByIdRef.current[item.id] = elem;
+                                    }
+                                    else {
+                                        delete elementsByIndexRef.current[index];
+                                        delete elementsByIdRef.current[index];
+                                    }
+                                };
+                                return (_jsx(LegendItemTrigger, { ...handlers, ref: thisTriggerRef, onClick: (event) => {
+                                        if (event.metaKey || event.ctrlKey) {
+                                            toggleItem(item.id);
+                                        }
+                                        else {
+                                            selectItem(item.id);
+                                        }
+                                    }, isHighlighted: item.highlighted, someHighlighted: items.some((item) => item.highlighted), itemId: item.id, label: item.name, visible: item.visible, marker: item.marker }, index));
+                            }) })] }), tooltipContent && (_jsx(InternalChartTooltip, { trackRef: tooltipTrack, trackKey: tooltipTarget.id, container: null, dismissButton: false, onDismiss: () => { }, position: tooltipPosition, title: tooltipContent.header, onMouseEnter: () => showTooltip(tooltipTarget.id), onMouseLeave: () => hideTooltip(), onBlur: () => hideTooltip(), footer: tooltipContent.footer && (_jsxs(_Fragment, { children: [_jsx("hr", { "aria-hidden": true }), tooltipContent.footer] })), children: tooltipContent.body }))] }) }));
+};
+const LegendItemTrigger = forwardRef(({ isHighlighted, someHighlighted, itemId, label, marker, visible, onClick, triggerRef, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, }, ref) => {
+    const refObject = useRef(null);
+    const mergedRef = useMergeRefs(ref, triggerRef, refObject);
+    const { tabIndex } = useSingleTabStopNavigation(refObject);
+    return (_jsxs("button", { "data-itemid": itemId, "aria-pressed": visible, "aria-current": isHighlighted, className: clsx(testClasses.item, styles.item, {
+            [styles["item--inactive"]]: !visible,
+            [testClasses["hidden-item"]]: !visible,
+            [styles["item--dimmed"]]: someHighlighted && !isHighlighted,
+            [testClasses["dimmed-item"]]: someHighlighted && !isHighlighted,
+        }), ref: mergedRef, tabIndex: tabIndex, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, children: [marker, _jsx("span", { className: styles["item-label"], children: label })] }));
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/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, Ref, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n  circleIndex,\n  handleKey,\n  KeyCode,\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n  useMergeRefs,\n  useSingleTabStopNavigation,\n} from \"@cloudscape-design/component-toolkit/internal\";\nimport Box from \"@cloudscape-design/components/box\";\nimport { InternalChartTooltip } from \"@cloudscape-design/components/internal/do-not-use/chart-tooltip\";\n\nimport { DebouncedCall } from \"../../utils/utils\";\nimport { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from \"../interfaces\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\nconst TOOLTIP_BLUR_DELAY = 50;\nconst HIGHLIGHT_LOST_DELAY = 50;\nconst SCROLL_DELAY = 100;\n\nexport interface ChartLegendProps {\n  items: readonly LegendItem[];\n  legendTitle?: string;\n  ariaLabel?: string;\n  actions?: React.ReactNode;\n  position: \"bottom\" | \"side\";\n  onItemHighlightEnter: (item: LegendItem) => void;\n  onItemHighlightExit: () => void;\n  onItemVisibilityChange: (hiddenItems: string[]) => void;\n  getTooltipContent: (props: GetLegendTooltipContentProps) => null | LegendTooltipContent;\n}\n\nexport const ChartLegend = ({\n  items,\n  legendTitle,\n  ariaLabel,\n  actions,\n  position,\n  onItemVisibilityChange,\n  onItemHighlightEnter,\n  onItemHighlightExit,\n  getTooltipContent,\n}: ChartLegendProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const elementsByIndexRef = useRef<Record<number, HTMLElement>>([]);\n  const elementsByIdRef = useRef<Record<string, HTMLElement>>({});\n  const tooltipRef = useRef<HTMLElement>(null);\n  const highlightControl = useMemo(() => new DebouncedCall(), []);\n  const scrollIntoViewControl = useMemo(() => new DebouncedCall(), []);\n  const [selectedIndex, setSelectedIndex] = useState<number>(0);\n  const [tooltipItemId, setTooltipItemId] = useState<string | null>(null);\n  const { showTooltip, hideTooltip } = useMemo(() => {\n    const control = new DebouncedCall();\n    return {\n      showTooltip(itemId: string) {\n        control.call(() => setTooltipItemId(itemId));\n      },\n      hideTooltip(lock = false) {\n        control.call(() => setTooltipItemId(null), TOOLTIP_BLUR_DELAY);\n        if (lock) {\n          control.lock(TOOLTIP_BLUR_DELAY);\n        }\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!tooltipItemId) {\n      return;\n    }\n    const onDocumentKeyDown = (event: KeyboardEvent) => {\n      if (event.keyCode === KeyCode.escape) {\n        hideTooltip(true);\n        elementsByIdRef.current[tooltipItemId]?.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", onDocumentKeyDown, true);\n    return () => {\n      document.removeEventListener(\"keydown\", onDocumentKeyDown, true);\n    };\n  }, [items, tooltipItemId, hideTooltip]);\n  const isMouseInContainer = useRef<boolean>(false);\n\n  // Scrolling to the highlighted legend item.\n  useEffect(() => {\n    const highlightedIndex = items.findIndex((item) => item.highlighted);\n    if (highlightedIndex === -1) {\n      return;\n    }\n    scrollIntoViewControl.call(() => {\n      if (isMouseInContainer.current) {\n        return;\n      }\n      const container = containerRef.current;\n      const element = elementsByIndexRef.current?.[highlightedIndex];\n      if (!container || !element) {\n        return;\n      }\n      const elementRect = element.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n      const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;\n      if (!isVisible) {\n        const elementCenter = elementRect.top + elementRect.height / 2;\n        const containerCenter = containerRect.top + containerRect.height / 2;\n        const top = container.scrollTop + (elementCenter - containerCenter);\n        container.scrollTo({ top, behavior: \"smooth\" });\n      }\n    }, SCROLL_DELAY);\n  }, [items, scrollIntoViewControl]);\n\n  const showHighlight = (itemId: string) => {\n    const item = items.find((item) => item.id === itemId);\n    if (item?.visible) {\n      highlightControl.cancelPrevious();\n      onItemHighlightEnter(item);\n    }\n  };\n  const clearHighlight = () => {\n    highlightControl.call(onItemHighlightExit, HIGHLIGHT_LOST_DELAY);\n  };\n\n  const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n  function onFocus(index: number, itemId: string) {\n    setSelectedIndex(index);\n    navigationAPI.current!.updateFocusTarget();\n    showHighlight(itemId);\n    showTooltip(itemId);\n  }\n\n  function onBlur(event: React.FocusEvent) {\n    navigationAPI.current!.updateFocusTarget();\n\n    // Hide tooltip and clear highlight unless focus moves inside tooltip;\n    if (tooltipRef.current && event.relatedTarget && !tooltipRef.current.contains(event.relatedTarget)) {\n      clearHighlight();\n      hideTooltip();\n    }\n  }\n\n  function focusElement(index: number) {\n    elementsByIndexRef.current[index]?.focus();\n  }\n\n  function onKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n    if (\n      event.keyCode === KeyCode.right ||\n      event.keyCode === KeyCode.left ||\n      event.keyCode === KeyCode.up ||\n      event.keyCode === KeyCode.down ||\n      event.keyCode === KeyCode.home ||\n      event.keyCode === KeyCode.end ||\n      event.keyCode === KeyCode.escape\n    ) {\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      const range = [0, items.length - 1] as [number, number];\n\n      handleKey(event, {\n        onInlineStart: () => focusElement(circleIndex(selectedIndex - 1, range)),\n        onInlineEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),\n        onBlockStart: () => focusElement(circleIndex(selectedIndex - 1, range)),\n        onBlockEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),\n        onHome: () => focusElement(0),\n        onEnd: () => focusElement(items.length - 1),\n        onEscape: () => onItemHighlightExit(),\n      });\n    }\n  }\n\n  function getNextFocusTarget(): null | HTMLElement {\n    if (containerRef.current) {\n      const buttons: HTMLButtonElement[] = Array.from(containerRef.current.querySelectorAll(`.${styles.item}`));\n      return buttons[selectedIndex] ?? null;\n    }\n    return null;\n  }\n\n  function onUnregisterActive(\n    focusableElement: HTMLElement,\n    navigationAPI: React.RefObject<{ getFocusTarget: () => HTMLElement | null }>,\n  ) {\n    const target = navigationAPI.current?.getFocusTarget();\n\n    if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {\n      target.focus();\n    }\n  }\n\n  useEffect(() => {\n    navigationAPI.current!.updateFocusTarget();\n  });\n\n  const toggleItem = (itemId: string) => {\n    const visibleItems = items.filter((i) => i.visible).map((i) => i.id);\n    if (visibleItems.includes(itemId)) {\n      onItemVisibilityChange(visibleItems.filter((visibleItemId) => visibleItemId !== itemId));\n    } else {\n      onItemVisibilityChange([...visibleItems, itemId]);\n    }\n    // Needed for touch devices.\n    onItemHighlightExit();\n  };\n\n  const selectItem = (itemId: string) => {\n    const visibleItems = items.filter((i) => i.visible).map((i) => i.id);\n    if (visibleItems.length === 1 && visibleItems[0] === itemId) {\n      onItemVisibilityChange(items.map((i) => i.id));\n    } else {\n      onItemVisibilityChange([itemId]);\n    }\n    // Needed for touch devices.\n    onItemHighlightExit();\n  };\n\n  const tooltipTrack = useRef<null | HTMLElement>(null);\n  const tooltipTarget = items.find((item) => item.id === tooltipItemId) ?? null;\n  tooltipTrack.current = tooltipItemId ? elementsByIdRef.current[tooltipItemId] : null;\n  const tooltipContent = tooltipTarget && getTooltipContent({ legendItem: tooltipTarget });\n  const tooltipPosition = position === \"bottom\" ? \"bottom\" : \"left\";\n\n  return (\n    <SingleTabStopNavigationProvider\n      ref={navigationAPI}\n      navigationActive={true}\n      getNextFocusTarget={() => getNextFocusTarget()}\n      onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n    >\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={clsx(testClasses.root, styles.root, {\n          [styles[\"root-side\"]]: position === \"side\",\n        })}\n        onMouseEnter={() => (isMouseInContainer.current = true)}\n        onMouseLeave={() => (isMouseInContainer.current = false)}\n      >\n        {legendTitle && (\n          <Box fontWeight=\"bold\" className={testClasses.title}>\n            {legendTitle}\n          </Box>\n        )}\n\n        <div\n          // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.\n          // Setting the tab index to -1 does fix the problem.\n          tabIndex={-1}\n          className={clsx(styles.list, {\n            [styles[\"list-bottom\"]]: position === \"bottom\",\n            [styles[\"list-side\"]]: position === \"side\",\n          })}\n        >\n          {actions && (\n            <>\n              <div\n                className={clsx(testClasses.actions, styles.actions, {\n                  [styles[\"actions-bottom\"]]: position === \"bottom\",\n                  [styles[\"actions-side\"]]: position === \"side\",\n                })}\n              >\n                {actions}\n                <div\n                  className={clsx(styles[\"actions-divider\"], {\n                    [styles[\"actions-divider-bottom\"]]: position === \"bottom\",\n                    [styles[\"actions-divider-side\"]]: position === \"side\",\n                  })}\n                />\n              </div>\n            </>\n          )}\n          <div\n            className={clsx({\n              [styles[\"legend-bottom\"]]: position === \"bottom\",\n              [styles[\"legend-side\"]]: position === \"side\",\n            })}\n          >\n            {items.map((item, index) => {\n              const handlers = {\n                onMouseEnter: () => {\n                  showHighlight(item.id);\n                  showTooltip(item.id);\n                },\n                onMouseLeave: () => {\n                  clearHighlight();\n                  hideTooltip();\n                },\n                onFocus: () => {\n                  onFocus(index, item.id);\n                },\n                onBlur: (event: React.FocusEvent) => {\n                  onBlur(event);\n                },\n                onKeyDown,\n              };\n              const thisTriggerRef = (elem: null | HTMLElement) => {\n                if (elem) {\n                  elementsByIndexRef.current[index] = elem;\n                  elementsByIdRef.current[item.id] = elem;\n                } else {\n                  delete elementsByIndexRef.current[index];\n                  delete elementsByIdRef.current[index];\n                }\n              };\n              return (\n                <LegendItemTrigger\n                  key={index}\n                  {...handlers}\n                  ref={thisTriggerRef}\n                  onClick={(event) => {\n                    if (event.metaKey || event.ctrlKey) {\n                      toggleItem(item.id);\n                    } else {\n                      selectItem(item.id);\n                    }\n                  }}\n                  isHighlighted={item.highlighted}\n                  someHighlighted={items.some((item) => item.highlighted)}\n                  itemId={item.id}\n                  label={item.name}\n                  visible={item.visible}\n                  marker={item.marker}\n                />\n              );\n            })}\n          </div>\n        </div>\n        {tooltipContent && (\n          <InternalChartTooltip\n            trackRef={tooltipTrack}\n            trackKey={tooltipTarget.id}\n            container={null}\n            dismissButton={false}\n            onDismiss={() => {}}\n            position={tooltipPosition}\n            title={tooltipContent.header}\n            onMouseEnter={() => showTooltip(tooltipTarget.id)}\n            onMouseLeave={() => hideTooltip()}\n            onBlur={() => hideTooltip()}\n            footer={\n              tooltipContent.footer && (\n                <>\n                  <hr aria-hidden={true} />\n                  {tooltipContent.footer}\n                </>\n              )\n            }\n          >\n            {tooltipContent.body}\n          </InternalChartTooltip>\n        )}\n      </div>\n    </SingleTabStopNavigationProvider>\n  );\n};\n\nconst LegendItemTrigger = forwardRef(\n  (\n    {\n      isHighlighted,\n      someHighlighted,\n      itemId,\n      label,\n      marker,\n      visible,\n      onClick,\n      triggerRef,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    }: {\n      isHighlighted?: boolean;\n      someHighlighted?: boolean;\n      itemId: string;\n      label: string;\n      marker?: React.ReactNode;\n      visible: boolean;\n      onClick: (event: React.MouseEvent) => void;\n      onMarkerClick?: () => void;\n      triggerRef?: Ref<HTMLElement>;\n      onMouseEnter?: () => void;\n      onMouseLeave?: () => void;\n      onFocus?: () => void;\n      onBlur?: (event: React.FocusEvent) => void;\n      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n    },\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const refObject = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs(ref, triggerRef, refObject);\n    const { tabIndex } = useSingleTabStopNavigation(refObject);\n    return (\n      <button\n        data-itemid={itemId}\n        aria-pressed={visible}\n        aria-current={isHighlighted}\n        className={clsx(testClasses.item, styles.item, {\n          [styles[\"item--inactive\"]]: !visible,\n          [testClasses[\"hidden-item\"]]: !visible,\n          [styles[\"item--dimmed\"]]: someHighlighted && !isHighlighted,\n          [testClasses[\"dimmed-item\"]]: someHighlighted && !isHighlighted,\n        })}\n        ref={mergedRef}\n        tabIndex={tabIndex}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n      >\n        {marker}\n        <span className={styles[\"item-label\"]}>{label}</span>\n      </button>\n    );\n  },\n);\n"]}

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

@@ -0,0 +1,22 @@
+
+    import './styles.scoped.css';
+    export 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"
+};
+