@cloudscape-design/components 3.0.0

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

@@ -0,0 +1,102 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useRef, memo, useState } from 'react';
+import LiveRegion from '../live-region';
+import InternalBox from '../../../box/internal';
+import { KeyCode } from '../../keycode';
+import SeriesMarker from '../chart-series-marker';
+import styles from './styles.css.js';
+export default memo(ChartLegend);
+function ChartLegend(_a) {
+    var series = _a.series, onHighlightChange = _a.onHighlightChange, highlightedSeries = _a.highlightedSeries, legendTitle = _a.legendTitle, ariaLabel = _a.ariaLabel, plotContainerRef = _a.plotContainerRef;
+    var _b = useState(false), isFocused = _b[0], setIsFocused = _b[1];
+    var containerRef = useRef(null);
+    var highlightLeft = function () {
+        var currentIndex = findSeriesIndex(series, highlightedSeries) || 0;
+        var nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;
+        onHighlightChange(series[nextIndex].datum);
+    };
+    var highlightRight = function () {
+        var currentIndex = findSeriesIndex(series, highlightedSeries) || 0;
+        var nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;
+        onHighlightChange(series[nextIndex].datum);
+    };
+    var handleKeyPress = function (event) {
+        if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {
+            // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.
+            event.preventDefault();
+            switch (event.keyCode) {
+                case KeyCode.left:
+                    return highlightLeft();
+                case KeyCode.right:
+                    return highlightRight();
+                default:
+                    return;
+            }
+        }
+    };
+    var handleFocus = function () {
+        setIsFocused(true);
+        onHighlightChange(highlightedSeries || series[0].datum);
+    };
+    var handleBlur = function (event) {
+        var _a;
+        setIsFocused(false);
+        // We need to check if the next element to be focused inside the plot container or not
+        // so we don't clear the selected legend in case we are still focusing elements ( legend elements )
+        // inside the plot container
+        if (event.relatedTarget === null ||
+            !(event.relatedTarget instanceof Element) ||
+            (containerRef.current &&
+                !containerRef.current.contains(event.relatedTarget) &&
+                !((_a = plotContainerRef === null || plotContainerRef === void 0 ? void 0 : plotContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
+            onHighlightChange(null);
+        }
+    };
+    var handleMouseOver = function (s) {
+        if (s !== highlightedSeries) {
+            onHighlightChange(s);
+        }
+    };
+    var handleMouseLeave = function () {
+        onHighlightChange(null);
+    };
+    var highlightedSeriesLabel = findSeriesLabel(series, highlightedSeries);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { tabIndex: 0, className: styles.root, ref: containerRef, role: "application", "aria-label": legendTitle || ariaLabel, onKeyDown: handleKeyPress, onFocus: handleFocus, onBlur: handleBlur },
+            legendTitle && (React.createElement(InternalBox, { fontWeight: "bold", className: styles.title }, legendTitle)),
+            React.createElement("ul", { className: styles.list }, series.map(function (s, index) {
+                var _a;
+                var someHighlighted = highlightedSeries !== null;
+                var isHighlighted = highlightedSeries === s.datum;
+                var isDimmed = someHighlighted && !isHighlighted;
+                return (React.createElement("li", { key: index, onMouseOver: handleMouseOver.bind(null, s.datum), onMouseLeave: handleMouseLeave, className: clsx(styles.marker, (_a = {},
+                        _a[styles['marker--dimmed']] = isDimmed,
+                        _a[styles['marker--highlighted']] = isHighlighted,
+                        _a[styles['marker--focused']] = isHighlighted && isFocused,
+                        _a)), "aria-disabled": isDimmed ? true : undefined },
+                    React.createElement(SeriesMarker, { color: s.color, type: s.type }),
+                    " ",
+                    s.label));
+            }))),
+        React.createElement(LiveRegion, null, isFocused ? highlightedSeriesLabel : null)));
+}
+function findSeriesIndex(series, targetSeries) {
+    for (var index = 0; index < series.length; index++) {
+        if (series[index].datum === targetSeries) {
+            return index;
+        }
+    }
+    return undefined;
+}
+function findSeriesLabel(series, targetSeries) {
+    for (var _i = 0, series_1 = series; _i < series_1.length; _i++) {
+        var s = series_1[_i];
+        if (s.datum === targetSeries) {
+            return s.label;
+        }
+    }
+    return null;
+}
+//# 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\nimport clsx from 'clsx';\nimport React, { useRef, memo, useState } from 'react';\n\nimport LiveRegion from '../live-region';\nimport InternalBox from '../../../box/internal';\nimport { KeyCode } from '../../keycode';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\n\nexport interface ChartLegendItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartLegendProps<T> {\n  series: ReadonlyArray<ChartLegendItem<T>>;\n  highlightedSeries: T | null;\n  legendTitle?: string;\n  ariaLabel?: string;\n  plotContainerRef?: React.RefObject<HTMLDivElement>;\n  onHighlightChange: (series: T | null) => void;\n}\n\nexport default memo(ChartLegend) as typeof ChartLegend;\n\nfunction ChartLegend<T>({\n  series,\n  onHighlightChange,\n  highlightedSeries,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: ChartLegendProps<T>) {\n  const [isFocused, setIsFocused] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const highlightLeft = () => {\n    const currentIndex = findSeriesIndex(series, highlightedSeries) || 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    onHighlightChange(series[nextIndex].datum);\n  };\n\n  const highlightRight = () => {\n    const currentIndex = findSeriesIndex(series, highlightedSeries) || 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    onHighlightChange(series[nextIndex].datum);\n  };\n\n  const handleKeyPress = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      switch (event.keyCode) {\n        case KeyCode.left:\n          return highlightLeft();\n\n        case KeyCode.right:\n          return highlightRight();\n\n        default:\n          return;\n      }\n    }\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n    onHighlightChange(highlightedSeries || series[0].datum);\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\n    setIsFocused(false);\n\n    // We need to check if the next element to be focused inside the plot container or not\n    // so we don't clear the selected legend in case we are still focusing elements ( legend elements )\n    // inside the plot container\n    if (\n      event.relatedTarget === null ||\n      !(event.relatedTarget instanceof Element) ||\n      (containerRef.current &&\n        !containerRef.current.contains(event.relatedTarget) &&\n        !plotContainerRef?.current?.contains(event.relatedTarget))\n    ) {\n      onHighlightChange(null);\n    }\n  };\n\n  const handleMouseOver = (s: T) => {\n    if (s !== highlightedSeries) {\n      onHighlightChange(s);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    onHighlightChange(null);\n  };\n\n  const highlightedSeriesLabel = findSeriesLabel(series, highlightedSeries);\n\n  return (\n    <>\n      <div\n        tabIndex={0}\n        className={styles.root}\n        ref={containerRef}\n        role=\"application\"\n        aria-label={legendTitle || ariaLabel}\n        onKeyDown={handleKeyPress}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <ul className={styles.list}>\n          {series.map((s, index) => {\n            const someHighlighted = highlightedSeries !== null;\n            const isHighlighted = highlightedSeries === s.datum;\n            const isDimmed = someHighlighted && !isHighlighted;\n            return (\n              <li\n                key={index}\n                onMouseOver={handleMouseOver.bind(null, s.datum)}\n                onMouseLeave={handleMouseLeave}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                  [styles['marker--focused']]: isHighlighted && isFocused,\n                })}\n                aria-disabled={isDimmed ? true : undefined}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n\n      <LiveRegion>{isFocused ? highlightedSeriesLabel : null}</LiveRegion>\n    </>\n  );\n}\n\nfunction findSeriesIndex<T>(series: ReadonlyArray<ChartLegendItem<T>>, targetSeries: null | T): undefined | number {\n  for (let index = 0; index < series.length; index++) {\n    if (series[index].datum === targetSeries) {\n      return index;\n    }\n  }\n  return undefined;\n}\n\nfunction findSeriesLabel<T>(series: ReadonlyArray<ChartLegendItem<T>>, targetSeries: null | T): null | string {\n  for (const s of series) {\n    if (s.datum === targetSeries) {\n      return s.label;\n    }\n  }\n  return null;\n}\n"]}

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

@@ -0,0 +1,12 @@
+
+    import './styles.scoped.css';
+    export default {
+  "marker": "awsui_marker_1kjc7_1tp2d_93",
+  "root": "awsui_root_1kjc7_1tp2d_111",
+  "title": "awsui_title_1kjc7_1tp2d_125",
+  "list": "awsui_list_1kjc7_1tp2d_129",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_1tp2d_151",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_1tp2d_154",
+  "marker--focused": "awsui_marker--focused_1kjc7_1tp2d_157"
+};
+  

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

@@ -0,0 +1,209 @@
+/*
+ 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_marker_1kjc7_1tp2d_93:not(#\9) {
+  transition: opacity 90ms linear;
+  transition: opacity var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_marker_1kjc7_1tp2d_93:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_marker_1kjc7_1tp2d_93:not(#\9), .awsui-mode-entering .awsui_marker_1kjc7_1tp2d_93:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_1kjc7_1tp2d_111: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);
+}
+.awsui_root_1kjc7_1tp2d_111:not(#\9):focus {
+  outline: none;
+}
+
+.awsui_title_1kjc7_1tp2d_125:not(#\9) {
+  /* used in test utils */
+}
+
+.awsui_list_1kjc7_1tp2d_129:not(#\9) {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.awsui_marker_1kjc7_1tp2d_93:not(#\9) {
+  display: inline-flex;
+  align-items: flex-start;
+  margin-right: 16px;
+  margin-right: var(--space-m-17eucw, 16px);
+  padding: 0;
+  cursor: pointer;
+  opacity: 1;
+}
+.awsui_marker_1kjc7_1tp2d_93:not(#\9):focus {
+  outline: none;
+}
+.awsui_marker_1kjc7_1tp2d_93:not(#\9):last-child {
+  margin-right: 0;
+}
+.awsui_marker_1kjc7_1tp2d_93.awsui_marker--dimmed_1kjc7_1tp2d_151:not(#\9) {
+  opacity: 0.35;
+}
+.awsui_marker_1kjc7_1tp2d_93.awsui_marker--highlighted_1kjc7_1tp2d_154:not(#\9) {
+  /* used in test utils */
+}
+.awsui_marker_1kjc7_1tp2d_93.awsui_marker--focused_1kjc7_1tp2d_157:not(#\9) {
+  position: relative;
+}
+.awsui_marker_1kjc7_1tp2d_93.awsui_marker--focused_1kjc7_1tp2d_157:not(#\9) {
+  outline: 2px dotted transparent;
+  outline-offset: calc(2px - 1px);
+}
+.awsui_marker_1kjc7_1tp2d_93.awsui_marker--focused_1kjc7_1tp2d_157:not(#\9)::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 2px);
+  top: calc(-1 * 2px);
+  width: calc(100% + 2 * 2px);
+  height: calc(100% + 2 * 2px);
+  border-radius: 4px;
+  border-radius: var(--border-control-focus-ring-radius-default-6g2tnn, 4px);
+  box-shadow: 0 0 0 2px #0972d3;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}

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

@@ -0,0 +1,13 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "marker": "awsui_marker_1kjc7_1tp2d_93",
+  "root": "awsui_root_1kjc7_1tp2d_111",
+  "title": "awsui_title_1kjc7_1tp2d_125",
+  "list": "awsui_list_1kjc7_1tp2d_129",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_1tp2d_151",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_1tp2d_154",
+  "marker--focused": "awsui_marker--focused_1kjc7_1tp2d_157"
+};
+  

package/internal/components/chart-plot/application-controller.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ApplicationRef {
+    focus(): void;
+}
+export interface ApplicationControllerProps {
+    activeElementKey: null | string | number | boolean;
+    activeElementRef?: React.RefObject<SVGGElement>;
+    onFocus?: (event: React.FocusEvent<SVGGElement>) => void;
+    onBlur?: (event: React.FocusEvent<SVGGElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<ApplicationControllerProps & React.RefAttributes<ApplicationRef>>;
+export default _default;
+//# sourceMappingURL=application-controller.d.ts.map

package/internal/components/chart-plot/application-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-controller.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/application-controller.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAIzG,MAAM,WAAW,cAAc;IAC7B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;;AAED,wBAAiD"}

package/internal/components/chart-plot/application-controller.js

@@ -0,0 +1,105 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import focusSvgElement from '../../utils/focus-svg-element';
+import styles from './styles.css.js';
+export default forwardRef(ApplicationController);
+function ApplicationController(_a, ref) {
+    var activeElementKey = _a.activeElementKey, activeElementRef = _a.activeElementRef, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
+    var containerRef = useRef(null);
+    var applicationRef = useRef(null);
+    var focusTransitionRef = useRef(false);
+    var _b = useState(false), isFocused = _b[0], setFocused = _b[1];
+    // Calls provided onFocus handler when the application obtains focus, ignoring internal focus juggling.
+    var onApplicationFocus = useCallback(function (event) {
+        if (focusTransitionRef.current === false) {
+            setFocused(true);
+            onFocus && onFocus(event);
+        }
+        else {
+            focusTransitionRef.current = false;
+        }
+    }, [onFocus]);
+    // Calls provided onBlur handler when the application loses focus, ignoring internal focus juggling.
+    var onApplicationBlur = useCallback(function (event) {
+        if (focusTransitionRef.current === false) {
+            setFocused(false);
+            onBlur && onBlur(event);
+            // The application controller can only be focused programmatically.
+            muteApplication(applicationRef.current);
+        }
+    }, [onBlur]);
+    var onApplicationKeyDown = onKeyDown;
+    useImperativeHandle(ref, function () { return ({
+        focus: function () { return focusApplication(applicationRef.current, (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || null); }
+    }); }, [activeElementRef]);
+    // Re-attaches and re-focuses the application for screen readers to treat it as an update.
+    useEffect(function () {
+        // Skip if not focused or if the transition is already happening.
+        if (!isFocused || focusTransitionRef.current === true) {
+            return;
+        }
+        // Delay focus juggle to let the last focus event settle in Firefox.
+        // Without the delay the focus is getting lost.
+        var timeoutId = setTimeout(function () {
+            focusTransitionRef.current = true;
+            containerRef.current.removeChild(applicationRef.current);
+            containerRef.current.appendChild(applicationRef.current);
+            focusApplication(applicationRef.current, (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || null);
+        }, 0);
+        return function () { return clearTimeout(timeoutId); };
+    }, [isFocused, activeElementKey, activeElementRef]);
+    return (React.createElement("g", { ref: containerRef },
+        React.createElement("g", { focusable: false, tabIndex: -1, ref: applicationRef, onFocus: onApplicationFocus, onBlur: onApplicationBlur, onKeyDown: onApplicationKeyDown, className: styles.application })));
+}
+// Focuses application but before copies aria-attributes from the target.
+function focusApplication(app, target) {
+    // Remove prev attributes.
+    for (var _i = 0, _a = getAttributeNames(app); _i < _a.length; _i++) {
+        var attributeName = _a[_i];
+        if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
+            app.removeAttribute(attributeName);
+        }
+    }
+    // Copy new attributes.
+    if (target) {
+        for (var _b = 0, _c = getAttributeNames(target); _b < _c.length; _b++) {
+            var attributeName = _c[_b];
+            if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
+                var attributeValue = target.getAttribute(attributeName);
+                attributeValue && app.setAttribute(attributeName, attributeValue);
+            }
+        }
+    }
+    // Make app focusable.
+    app.tabIndex = 0;
+    app.setAttribute('focusable', 'true');
+    app.setAttribute('aria-hidden', 'false');
+    // Focus app.
+    focusSvgElement(app);
+}
+// The application is to be only focused programmatically.
+function muteApplication(app) {
+    // Remove prev attributes.
+    for (var _i = 0, _a = getAttributeNames(app); _i < _a.length; _i++) {
+        var attributeName = _a[_i];
+        if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
+            app.removeAttribute(attributeName);
+        }
+    }
+    // Make app non-focusable.
+    app.tabIndex = -1;
+    app.setAttribute('focusable', 'false');
+    app.setAttribute('aria-hidden', 'true');
+}
+// Polyfill for element.getAttributeNames(), IE11
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames#polyfill
+function getAttributeNames(element) {
+    var attributes = element.attributes;
+    var result = new Array(attributes.length);
+    for (var i = 0; i < attributes.length; i++) {
+        result[i] = attributes[i].name;
+    }
+    return result;
+}
+//# sourceMappingURL=application-controller.js.map

package/internal/components/chart-plot/application-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-controller.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/application-controller.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, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport focusSvgElement from '../../utils/focus-svg-element';\nimport styles from './styles.css.js';\n\nexport interface ApplicationRef {\n  focus(): void;\n}\n\nexport interface ApplicationControllerProps {\n  activeElementKey: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  onFocus?: (event: React.FocusEvent<SVGGElement>) => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n}\n\nexport default forwardRef(ApplicationController);\n\nfunction ApplicationController(\n  { activeElementKey, activeElementRef, onFocus, onBlur, onKeyDown }: ApplicationControllerProps,\n  ref: React.Ref<ApplicationRef>\n) {\n  const containerRef = useRef<SVGGElement>(null);\n  const applicationRef = useRef<SVGGElement>(null);\n  const focusTransitionRef = useRef(false);\n  const [isFocused, setFocused] = useState(false);\n\n  // Calls provided onFocus handler when the application obtains focus, ignoring internal focus juggling.\n  const onApplicationFocus = useCallback(\n    (event: React.FocusEvent<SVGGElement>) => {\n      if (focusTransitionRef.current === false) {\n        setFocused(true);\n        onFocus && onFocus(event);\n      } else {\n        focusTransitionRef.current = false;\n      }\n    },\n    [onFocus]\n  );\n  // Calls provided onBlur handler when the application loses focus, ignoring internal focus juggling.\n  const onApplicationBlur = useCallback(\n    (event: React.FocusEvent<SVGGElement>) => {\n      if (focusTransitionRef.current === false) {\n        setFocused(false);\n        onBlur && onBlur(event);\n        // The application controller can only be focused programmatically.\n        muteApplication(applicationRef.current!);\n      }\n    },\n    [onBlur]\n  );\n  const onApplicationKeyDown = onKeyDown;\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => focusApplication(applicationRef.current!, activeElementRef?.current || null),\n    }),\n    [activeElementRef]\n  );\n\n  // Re-attaches and re-focuses the application for screen readers to treat it as an update.\n  useEffect(() => {\n    // Skip if not focused or if the transition is already happening.\n    if (!isFocused || focusTransitionRef.current === true) {\n      return;\n    }\n\n    // Delay focus juggle to let the last focus event settle in Firefox.\n    // Without the delay the focus is getting lost.\n    const timeoutId = setTimeout(() => {\n      focusTransitionRef.current = true;\n      containerRef.current!.removeChild(applicationRef.current!);\n      containerRef.current!.appendChild(applicationRef.current!);\n      focusApplication(applicationRef.current!, activeElementRef?.current || null);\n    }, 0);\n\n    return () => clearTimeout(timeoutId);\n  }, [isFocused, activeElementKey, activeElementRef]);\n\n  return (\n    <g ref={containerRef}>\n      <g\n        focusable={false}\n        tabIndex={-1}\n        ref={applicationRef}\n        onFocus={onApplicationFocus}\n        onBlur={onApplicationBlur}\n        onKeyDown={onApplicationKeyDown}\n        className={styles.application}\n      ></g>\n    </g>\n  );\n}\n\n// Focuses application but before copies aria-attributes from the target.\nfunction focusApplication(app: SVGGElement, target: null | SVGGElement) {\n  // Remove prev attributes.\n  for (const attributeName of getAttributeNames(app)) {\n    if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {\n      app.removeAttribute(attributeName);\n    }\n  }\n\n  // Copy new attributes.\n  if (target) {\n    for (const attributeName of getAttributeNames(target)) {\n      if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {\n        const attributeValue = target.getAttribute(attributeName);\n        attributeValue && app.setAttribute(attributeName, attributeValue);\n      }\n    }\n  }\n\n  // Make app focusable.\n  app.tabIndex = 0;\n  app.setAttribute('focusable', 'true');\n  app.setAttribute('aria-hidden', 'false');\n\n  // Focus app.\n  focusSvgElement(app);\n}\n\n// The application is to be only focused programmatically.\nfunction muteApplication(app: SVGGElement) {\n  // Remove prev attributes.\n  for (const attributeName of getAttributeNames(app)) {\n    if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {\n      app.removeAttribute(attributeName);\n    }\n  }\n\n  // Make app non-focusable.\n  app.tabIndex = -1;\n  app.setAttribute('focusable', 'false');\n  app.setAttribute('aria-hidden', 'true');\n}\n\n// Polyfill for element.getAttributeNames(), IE11\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames#polyfill\nfunction getAttributeNames(element: Element) {\n  const attributes = element.attributes;\n  const result = new Array(attributes.length);\n  for (let i = 0; i < attributes.length; i++) {\n    result[i] = attributes[i].name;\n  }\n  return result;\n}\n"]}

package/internal/components/chart-plot/focus-outline.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FocusOutlineProps {
+    elementKey?: null | string | number | boolean;
+    elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;
+    offset?: number;
+}
+export default function FocusOutline({ elementKey, elementRef, offset }: FocusOutlineProps): JSX.Element;
+//# sourceMappingURL=focus-outline.d.ts.map

package/internal/components/chart-plot/focus-outline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-outline.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,WAAW,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAU,EAAE,EAAE,iBAAiB,eAkB7F"}

package/internal/components/chart-plot/focus-outline.js

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import styles from './styles.css.js';
+import useFocusVisible from '../../hooks/focus-visible/index';
+export default function FocusOutline(_a) {
+    var elementKey = _a.elementKey, elementRef = _a.elementRef, _b = _a.offset, offset = _b === void 0 ? 0 : _b;
+    var ref = useRef(null);
+    var focusVisible = useFocusVisible()["data-awsui-focus-visible"];
+    useEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {
+            var element = elementRef.current.getBBox();
+            showOutline(ref.current, element, offset);
+        }
+        else {
+            hideOutline(ref.current);
+        }
+    }, [focusVisible, elementKey, elementRef, offset]);
+    return React.createElement("rect", { ref: ref, "aria-hidden": "true", className: styles['focus-outline'], rx: "2" });
+}
+function showOutline(el, position, offset) {
+    el.setAttribute('x', (position.x - offset).toString());
+    el.setAttribute('y', (position.y - offset).toString());
+    el.setAttribute('width', (position.width + 2 * offset).toString());
+    el.setAttribute('height', (position.height + 2 * offset).toString());
+    el.style.visibility = 'visible';
+}
+function hideOutline(el) {
+    el.style.visibility = 'hidden';
+    el.removeAttribute('x');
+    el.removeAttribute('y');
+    el.removeAttribute('width');
+    el.removeAttribute('height');
+}
+//# sourceMappingURL=focus-outline.js.map

package/internal/components/chart-plot/focus-outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-outline.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAQ9D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAyD;QAAvD,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,cAAU,EAAV,MAAM,mBAAG,CAAC,KAAA;IACvE,IAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjC,IAA4B,YAAY,GAAK,eAAe,EAAE,4BAAtB,CAAuB;IAEvE,SAAS,CAAC;QACR,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAO;SACR;QAED,IAAI,YAAY,IAAI,UAAU,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE;YAChG,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC7C,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3C;aAAM;YACL,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnD,OAAO,8BAAM,GAAG,EAAE,GAAG,iBAAc,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EAAE,EAAC,GAAG,GAAG,CAAC;AAC1F,CAAC;AAED,SAAS,WAAW,CAClB,EAAkB,EAClB,QAAiE,EACjE,MAAc;IAEd,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvD,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACnE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;AAClC,CAAC;AAED,SAAS,WAAW,CAAC,EAAkB;IACrC,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC/B,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACxB,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACxB,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5B,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;AAC/B,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';\n\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible/index';\n\nexport interface FocusOutlineProps {\n  elementKey?: null | string | number | boolean;\n  elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n  offset?: number;\n}\n\nexport default function FocusOutline({ elementKey, elementRef, offset = 0 }: FocusOutlineProps) {\n  const ref = useRef<SVGRectElement>(null);\n  const { 'data-awsui-focus-visible': focusVisible } = useFocusVisible();\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {\n      const element = elementRef.current.getBBox();\n      showOutline(ref.current, element, offset);\n    } else {\n      hideOutline(ref.current);\n    }\n  }, [focusVisible, elementKey, elementRef, offset]);\n\n  return <rect ref={ref} aria-hidden=\"true\" className={styles['focus-outline']} rx=\"2\" />;\n}\n\nfunction showOutline(\n  el: SVGRectElement,\n  position: { x: number; y: number; width: number; height: number },\n  offset: number\n) {\n  el.setAttribute('x', (position.x - offset).toString());\n  el.setAttribute('y', (position.y - offset).toString());\n  el.setAttribute('width', (position.width + 2 * offset).toString());\n  el.setAttribute('height', (position.height + 2 * offset).toString());\n  el.style.visibility = 'visible';\n}\n\nfunction hideOutline(el: SVGRectElement) {\n  el.style.visibility = 'hidden';\n  el.removeAttribute('x');\n  el.removeAttribute('y');\n  el.removeAttribute('width');\n  el.removeAttribute('height');\n}\n"]}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+export interface ChartPlotRef {
+    svg: SVGSVGElement;
+    focusPlot(): void;
+    focusApplication(): void;
+}
+export interface ChartPlotProps {
+    width: number;
+    height: number;
+    transform?: string;
+    offsetTop?: number;
+    offsetBottom?: number;
+    offsetLeft?: number;
+    offsetRight?: number;
+    focusOffset?: number;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescription?: string;
+    ariaDescribedby?: string;
+    ariaRoleDescription?: string;
+    activeElementKey?: null | string | number | boolean;
+    activeElementRef?: React.RefObject<SVGGElement>;
+    activeElementFocusOffset?: number;
+    ariaLiveRegion?: React.ReactNode;
+    isClickable?: boolean;
+    isPrecise?: boolean;
+    onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;
+    onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;
+    onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;
+    onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;
+    onBlur?: (event: React.FocusEvent<SVGGElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;
+    children: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<ChartPlotProps & React.RefAttributes<ChartPlotRef>>;
+/**
+  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 _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAejF,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,aAAa,CAAC;IACnB,SAAS,IAAI,IAAI,CAAC;IAClB,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,UAAU,KAAK,IAAI,CAAC;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED;;;;;;;;;EASE;AACF,wBAAqC"}