@cloudscape-design/components-themeable 3.0.226 → 3.0.228

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

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -9,25 +8,24 @@ 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 focusVisible = useFocusVisible();
-    var containerRef = useRef(null);
-    var segmentsRef = useRef([]);
-    var highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);
-    var highlightLeft = function () {
+function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle, ariaLabel, plotContainerRef, }) {
+    const focusVisible = useFocusVisible();
+    const containerRef = useRef(null);
+    const segmentsRef = useRef([]);
+    const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);
+    const highlightLeft = () => {
         var _a;
-        var currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
-        var nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;
+        const currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
+        const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;
         (_a = segmentsRef.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    var highlightRight = function () {
+    const highlightRight = () => {
         var _a;
-        var currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
-        var nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;
+        const currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
+        const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;
         (_a = segmentsRef.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    var handleKeyPress = function (event) {
+    const handleKeyPress = (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();
@@ -41,12 +39,12 @@ function ChartLegend(_a) {
             }
         }
     };
-    var handleSelection = function (index) {
+    const handleSelection = (index) => {
         if (series[index].datum !== highlightedSeries) {
             onHighlightChange(series[index].datum);
         }
     };
-    var handleBlur = function (event) {
+    const handleBlur = (event) => {
         var _a;
         // 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 )
@@ -58,40 +56,39 @@ function ChartLegend(_a) {
             onHighlightChange(null);
         }
     };
-    var handleMouseOver = function (s) {
+    const handleMouseOver = (s) => {
         if (s !== highlightedSeries) {
             onHighlightChange(s);
         }
     };
-    var handleMouseLeave = function () {
+    const handleMouseLeave = () => {
         onHighlightChange(null);
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: containerRef, role: "toolbar", "aria-label": legendTitle || ariaLabel, className: styles.root, onKeyDown: handleKeyPress, onBlur: handleBlur },
             legendTitle && (React.createElement(InternalBox, { fontWeight: "bold", className: styles.title }, legendTitle)),
-            React.createElement("div", { 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("div", __assign({}, focusVisible, { role: "button", key: index, "aria-pressed": isHighlighted, className: clsx(styles.marker, (_a = {},
-                        _a[styles['marker--dimmed']] = isDimmed,
-                        _a[styles['marker--highlighted']] = isHighlighted,
-                        _a)), ref: function (elem) {
+            React.createElement("div", { className: styles.list }, series.map((s, index) => {
+                const someHighlighted = highlightedSeries !== null;
+                const isHighlighted = highlightedSeries === s.datum;
+                const isDimmed = someHighlighted && !isHighlighted;
+                return (React.createElement("div", Object.assign({}, focusVisible, { role: "button", key: index, "aria-pressed": isHighlighted, className: clsx(styles.marker, {
+                        [styles['marker--dimmed']]: isDimmed,
+                        [styles['marker--highlighted']]: isHighlighted,
+                    }), ref: elem => {
                         if (elem) {
                             segmentsRef.current[index] = elem;
                         }
                         else {
                             delete segmentsRef.current[index];
                         }
-                    }, tabIndex: index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1, onFocus: function () { return handleSelection(index); }, onClick: function () { return handleSelection(index); }, onMouseOver: function () { return handleMouseOver(s.datum); }, onMouseLeave: handleMouseLeave }),
+                    }, tabIndex: index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1, onFocus: () => handleSelection(index), onClick: () => handleSelection(index), onMouseOver: () => handleMouseOver(s.datum), onMouseLeave: handleMouseLeave }),
                     React.createElement(SeriesMarker, { color: s.color, type: s.type }),
                     " ",
                     s.label));
             })))));
 }
 function findSeriesIndex(series, targetSeries) {
-    for (var index = 0; index < series.length; index++) {
+    for (let index = 0; index < series.length; index++) {
         if (series[index].datum === targetSeries) {
             return index;
         }

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

@@ -1 +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 } from 'react';\n\nimport useFocusVisible from '../../hooks/focus-visible';\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 focusVisible = useFocusVisible();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const segmentsRef = useRef<Record<number, HTMLElement>>([]);\n\n  const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);\n\n  const highlightLeft = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const highlightRight = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    segmentsRef.current[nextIndex]?.focus();\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 handleSelection = (index: number) => {\n    if (series[index].datum !== highlightedSeries) {\n      onHighlightChange(series[index].datum);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\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      (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  return (\n    <>\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={styles.root}\n        onKeyDown={handleKeyPress}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <div 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              <div\n                {...focusVisible}\n                role=\"button\"\n                key={index}\n                aria-pressed={isHighlighted}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                })}\n                ref={elem => {\n                  if (elem) {\n                    segmentsRef.current[index] = elem;\n                  } else {\n                    delete segmentsRef.current[index];\n                  }\n                }}\n                tabIndex={\n                  index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1\n                }\n                onFocus={() => handleSelection(index)}\n                onClick={() => handleSelection(index)}\n                onMouseOver={() => handleMouseOver(s.datum)}\n                onMouseLeave={handleMouseLeave}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </div>\n            );\n          })}\n        </div>\n      </div>\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"]}
+{"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 } from 'react';\n\nimport useFocusVisible from '../../hooks/focus-visible';\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 focusVisible = useFocusVisible();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const segmentsRef = useRef<Record<number, HTMLElement>>([]);\n\n  const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);\n\n  const highlightLeft = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const highlightRight = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    segmentsRef.current[nextIndex]?.focus();\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 handleSelection = (index: number) => {\n    if (series[index].datum !== highlightedSeries) {\n      onHighlightChange(series[index].datum);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\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      (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  return (\n    <>\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={styles.root}\n        onKeyDown={handleKeyPress}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <div 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              <div\n                {...focusVisible}\n                role=\"button\"\n                key={index}\n                aria-pressed={isHighlighted}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                })}\n                ref={elem => {\n                  if (elem) {\n                    segmentsRef.current[index] = elem;\n                  } else {\n                    delete segmentsRef.current[index];\n                  }\n                }}\n                tabIndex={\n                  index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1\n                }\n                onFocus={() => handleSelection(index)}\n                onClick={() => handleSelection(index)}\n                onMouseOver={() => handleMouseOver(s.datum)}\n                onMouseLeave={handleMouseLeave}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </div>\n            );\n          })}\n        </div>\n      </div>\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"]}

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

@@ -4,14 +4,13 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef,
 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];
+function ApplicationController({ activeElementKey, activeElementRef, onFocus, onBlur, onKeyDown }, ref) {
+    const containerRef = useRef(null);
+    const applicationRef = useRef(null);
+    const focusTransitionRef = useRef(false);
+    const [isFocused, setFocused] = useState(false);
     // Calls provided onFocus handler when the application obtains focus, ignoring internal focus juggling.
-    var onApplicationFocus = useCallback(function (event) {
+    const onApplicationFocus = useCallback((event) => {
         if (focusTransitionRef.current === false) {
             setFocused(true);
             onFocus && onFocus(event);
@@ -21,7 +20,7 @@ function ApplicationController(_a, ref) {
         }
     }, [onFocus]);
     // Calls provided onBlur handler when the application loses focus, ignoring internal focus juggling.
-    var onApplicationBlur = useCallback(function (event) {
+    const onApplicationBlur = useCallback((event) => {
         if (focusTransitionRef.current === false) {
             setFocused(false);
             onBlur && onBlur(event);
@@ -29,25 +28,25 @@ function ApplicationController(_a, ref) {
             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]);
+    const onApplicationKeyDown = onKeyDown;
+    useImperativeHandle(ref, () => ({
+        focus: () => 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 () {
+    useEffect(() => {
         // 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 () {
+        const timeoutId = setTimeout(() => {
             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); };
+        return () => clearTimeout(timeoutId);
     }, [isFocused, activeElementKey, activeElementRef]);
     return (React.createElement("g", { ref: containerRef },
         React.createElement("g", { tabIndex: -1, ref: applicationRef, onFocus: onApplicationFocus, onBlur: onApplicationBlur, onKeyDown: onApplicationKeyDown, className: styles.application })));
@@ -55,18 +54,16 @@ function ApplicationController(_a, ref) {
 // 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];
+    for (const attributeName of getAttributeNames(app)) {
         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];
+        for (const attributeName of getAttributeNames(target)) {
             if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
-                var attributeValue = target.getAttribute(attributeName);
+                const attributeValue = target.getAttribute(attributeName);
                 attributeValue && app.setAttribute(attributeName, attributeValue);
             }
         }
@@ -81,8 +78,7 @@ function focusApplication(app, target) {
 // 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];
+    for (const attributeName of getAttributeNames(app)) {
         if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {
             app.removeAttribute(attributeName);
         }
@@ -95,9 +91,9 @@ function muteApplication(app) {
 // 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++) {
+    const attributes = element.attributes;
+    const result = new Array(attributes.length);
+    for (let i = 0; i < attributes.length; i++) {
         result[i] = attributes[i].name;
     }
     return result;

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

@@ -1 +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        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"]}
+{"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        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/lib/internal/template/internal/components/chart-plot/focus-outline.js

@@ -3,16 +3,15 @@
 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 () {
+export default function FocusOutline({ elementKey, elementRef, offset = 0 }) {
+    const ref = useRef(null);
+    const { 'data-awsui-focus-visible': focusVisible } = useFocusVisible();
+    useEffect(() => {
         if (!ref.current) {
             return;
         }
         if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {
-            var element = elementRef.current.getBBox();
+            const element = elementRef.current.getBBox();
             showOutline(ref.current, element, offset);
         }
         else {
@@ -22,8 +21,8 @@ export default function FocusOutline(_a) {
     return React.createElement("rect", { ref: ref, "aria-hidden": "true", className: styles['focus-outline'], rx: "2" });
 }
 function showOutline(el, position, offset) {
-    var offsetX = typeof offset === 'number' ? offset : offset.x;
-    var offsetY = typeof offset === 'number' ? offset : offset.y;
+    const offsetX = typeof offset === 'number' ? offset : offset.x;
+    const offsetY = typeof offset === 'number' ? offset : offset.y;
     el.setAttribute('x', (position.x - offsetX).toString());
     el.setAttribute('y', (position.y - offsetY).toString());
     el.setAttribute('width', (position.width + 2 * offsetX).toString());

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

@@ -1 +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;AAS9D,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,IAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,IAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtE,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';\nimport { Offset } from '../interfaces';\n\nexport interface FocusOutlineProps {\n  elementKey?: null | string | number | boolean;\n  elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n  offset?: Offset;\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: Offset\n) {\n  const offsetX = typeof offset === 'number' ? offset : offset.x;\n  const offsetY = typeof offset === 'number' ? offset : offset.y;\n  el.setAttribute('x', (position.x - offsetX).toString());\n  el.setAttribute('y', (position.y - offsetY).toString());\n  el.setAttribute('width', (position.width + 2 * offsetX).toString());\n  el.setAttribute('height', (position.height + 2 * offsetY).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"]}
+{"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;AAS9D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,EAAqB;IAC5F,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,0BAA0B,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,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,MAAM,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,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtE,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';\nimport { Offset } from '../interfaces';\n\nexport interface FocusOutlineProps {\n  elementKey?: null | string | number | boolean;\n  elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n  offset?: Offset;\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: Offset\n) {\n  const offsetX = typeof offset === 'number' ? offset : offset.x;\n  const offsetY = typeof offset === 'number' ? offset : offset.y;\n  el.setAttribute('x', (position.x - offsetX).toString());\n  el.setAttribute('y', (position.y - offsetY).toString());\n  el.setAttribute('width', (position.width + 2 * offsetX).toString());\n  el.setAttribute('height', (position.height + 2 * offsetY).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/lib/internal/template/internal/components/chart-plot/index.js

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

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

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