@cloudscape-design/components 3.0.221 → 3.0.223

package/app-layout/visual-refresh/tools.js

@@ -18,49 +18,47 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  * the show tools form that contains the triggers for both the drawer and the
  * split panel in large viewports;
  */
-export default function Tools(_a) {
-    var children = _a.children;
-    var _b = useAppLayoutInternals(), ariaLabels = _b.ariaLabels, handleSplitPanelClick = _b.handleSplitPanelClick, handleToolsClick = _b.handleToolsClick, hasDefaultToolsWidth = _b.hasDefaultToolsWidth, isNavigationOpen = _b.isNavigationOpen, isMobile = _b.isMobile, isSplitPanelOpen = _b.isSplitPanelOpen, isToolsOpen = _b.isToolsOpen, splitPanelDisplayed = _b.splitPanelDisplayed, tools = _b.tools, toolsHide = _b.toolsHide, toolsWidth = _b.toolsWidth, isAnyPanelOpen = _b.isAnyPanelOpen, navigationHide = _b.navigationHide, toolsFocusControl = _b.toolsFocusControl, splitPanelPosition = _b.splitPanelPosition, splitPanelToggle = _b.splitPanelToggle;
-    var hasSplitPanel = getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);
-    var hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
-    var hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);
-    var focusRefs = toolsFocusControl.refs;
+export default function Tools({ children }) {
+    const { ariaLabels, handleSplitPanelClick, handleToolsClick, hasDefaultToolsWidth, isNavigationOpen, isMobile, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, tools, toolsHide, toolsWidth, isAnyPanelOpen, navigationHide, toolsFocusControl, splitPanelPosition, splitPanelToggle, } = useAppLayoutInternals();
+    const hasSplitPanel = getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);
+    const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);
+    const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);
+    const { refs: focusRefs } = toolsFocusControl;
     if (toolsHide && !hasSplitPanel) {
         return null;
     }
-    var isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;
-    return (React.createElement(Transition, { "in": isToolsOpen !== null && isToolsOpen !== void 0 ? isToolsOpen : false }, function (state, transitionEventsRef) {
-        var _a, _b, _c, _d;
-        var _e, _f, _g;
-        return (React.createElement("div", { className: clsx(styles['tools-container'], (_a = {},
-                _a[testutilStyles['drawer-closed']] = !isToolsOpen,
-                _a[styles.unfocusable] = isUnfocusable,
-                _a)), style: (_b = {},
-                _b[customCssProps.toolsAnimationStartingOpacity] = "".concat(hasSplitPanel && isSplitPanelOpen ? 1 : 0),
+    const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;
+    return (React.createElement(Transition, { in: isToolsOpen !== null && isToolsOpen !== void 0 ? isToolsOpen : false }, (state, transitionEventsRef) => {
+        var _a, _b, _c;
+        return (React.createElement("div", { className: clsx(styles['tools-container'], {
+                [testutilStyles['drawer-closed']]: !isToolsOpen,
+                [styles.unfocusable]: isUnfocusable,
+            }), style: {
+                [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,
                 // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.
-                _b[customCssProps.toolsWidth] = hasDefaultToolsWidth ? '' : "".concat(toolsWidth, "px"),
-                _b), onBlur: function (e) {
+                [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,
+            }, onBlur: e => {
                 if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
                     toolsFocusControl.loseFocus();
                 }
             } },
             children,
-            !toolsHide && (React.createElement("aside", { "aria-hidden": !isToolsOpen ? true : false, "aria-label": (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _e !== void 0 ? _e : undefined, className: clsx(styles.tools, (_c = {},
-                    _c[styles.animating] = state === 'entering',
-                    _c[styles['has-tools-form-persistence']] = hasToolsFormPersistence,
-                    _c[styles['is-tools-open']] = isToolsOpen,
-                    _c), testutilStyles.tools), ref: state !== 'exiting' ? transitionEventsRef : undefined },
+            !toolsHide && (React.createElement("aside", { "aria-hidden": !isToolsOpen ? true : false, "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.tools, {
+                    [styles.animating]: state === 'entering',
+                    [styles['has-tools-form-persistence']]: hasToolsFormPersistence,
+                    [styles['is-tools-open']]: isToolsOpen,
+                }, testutilStyles.tools), ref: state !== 'exiting' ? transitionEventsRef : undefined },
                 React.createElement("div", { className: clsx(styles['animated-content']) },
                     React.createElement("div", { className: clsx(styles['hide-tools']) },
-                        React.createElement(InternalButton, { ariaLabel: (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose) !== null && _f !== void 0 ? _f : undefined, iconName: isMobile ? 'close' : 'angle-right', onClick: function () { return handleToolsClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['tools-close'], ref: focusRefs.close })),
+                        React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-right', onClick: () => handleToolsClick(false), variant: "icon", formAction: "none", className: testutilStyles['tools-close'], ref: focusRefs.close })),
                     tools))),
-            !isMobile && (React.createElement("aside", { "aria-hidden": !hasToolsForm ? true : false, "aria-label": (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _g !== void 0 ? _g : undefined, className: clsx(styles['show-tools'], (_d = {},
-                    _d[styles.animating] = state === 'exiting',
-                    _d[styles['has-tools-form']] = hasToolsForm,
-                    _d[styles['has-tools-form-persistence']] = hasToolsFormPersistence,
-                    _d), splitPanelStyles.root), ref: state === 'exiting' ? transitionEventsRef : undefined },
-                !toolsHide && (React.createElement(TriggerButton, { ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle, iconName: "status-info", onClick: function () { return handleToolsClick(!isToolsOpen); }, selected: hasSplitPanel && isToolsOpen, className: testutilStyles['tools-toggle'], ref: focusRefs.toggle })),
-                hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, iconName: "view-vertical", onClick: function () { return handleSplitPanelClick(); }, selected: hasSplitPanel && isSplitPanelOpen, className: splitPanelStyles['open-button'] }))))));
+            !isMobile && (React.createElement("aside", { "aria-hidden": !hasToolsForm ? true : false, "aria-label": (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _c !== void 0 ? _c : undefined, className: clsx(styles['show-tools'], {
+                    [styles.animating]: state === 'exiting',
+                    [styles['has-tools-form']]: hasToolsForm,
+                    [styles['has-tools-form-persistence']]: hasToolsFormPersistence,
+                }, splitPanelStyles.root), ref: state === 'exiting' ? transitionEventsRef : undefined },
+                !toolsHide && (React.createElement(TriggerButton, { ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle, iconName: "status-info", onClick: () => handleToolsClick(!isToolsOpen), selected: hasSplitPanel && isToolsOpen, className: testutilStyles['tools-toggle'], ref: focusRefs.toggle })),
+                hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, iconName: "view-vertical", onClick: () => handleSplitPanelClick(), selected: hasSplitPanel && isSplitPanelOpen, className: splitPanelStyles['open-button'] }))))));
     }));
 }
 /**
@@ -69,7 +67,7 @@ export default function Tools(_a) {
  * set then it should be closed as well. Otherwise, default to the toolsOpen prop.
  */
 export function getToolsDefaultState(isMobile, stateFromProps) {
-    var isToolsOpen;
+    let isToolsOpen;
     if (isMobile || stateFromProps === undefined) {
         isToolsOpen = false;
     }
@@ -92,7 +90,7 @@ function getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition) {
  * should be present in the UI under the below circumstances.
  */
 function getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide) {
-    var hasToolsForm = false;
+    let hasToolsForm = false;
     if (!isMobile) {
         // Both the Split Panel and Tools button are needed
         if (hasSplitPanel && !toolsHide) {
@@ -118,7 +116,7 @@ function getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOp
  * selected / not selected state.
  */
 function getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide) {
-    var hasToolsFormPersistence = false;
+    let hasToolsFormPersistence = false;
     // Both Tools and Split Panel exist and one or both is open
     if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {
         hasToolsFormPersistence = true;

package/app-layout/visual-refresh/tools.js.map

@@ -1 +1 @@
-{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanelDisplayed,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n    toolsFocusControl,\n    splitPanelPosition,\n    splitPanelToggle,\n  } = useAppLayoutInternals();\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const { refs: focusRefs } = toolsFocusControl;\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n          onBlur={e => {\n            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n              toolsFocusControl.loseFocus();\n            }\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && splitPanelToggle.displayed && (\n                <TriggerButton\n                  ariaLabel={splitPanelToggle.ariaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanelDisplayed: boolean, splitPanelPosition: string) {\n  return splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanelDisplayed,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n    toolsFocusControl,\n    splitPanelPosition,\n    splitPanelToggle,\n  } = useAppLayoutInternals();\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanelDisplayed, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const { refs: focusRefs } = toolsFocusControl;\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n          onBlur={e => {\n            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n              toolsFocusControl.loseFocus();\n            }\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && splitPanelToggle.displayed && (\n                <TriggerButton\n                  ariaLabel={splitPanelToggle.ariaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanelDisplayed: boolean, splitPanelPosition: string) {\n  return splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}

package/app-layout/visual-refresh/trigger-button.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 React from 'react';
@@ -6,13 +5,11 @@ import clsx from 'clsx';
 import useFocusVisible from '../../internal/hooks/focus-visible';
 import Icon from '../../icon/internal';
 import styles from './styles.css.js';
-function TriggerButton(_a, ref) {
-    var _b;
-    var ariaLabel = _a.ariaLabel, iconName = _a.iconName, onClick = _a.onClick, _c = _a.selected, selected = _c === void 0 ? false : _c, className = _a.className;
-    var focusVisible = useFocusVisible();
-    return (React.createElement("button", __assign({ "aria-label": ariaLabel, "aria-expanded": false, "aria-haspopup": true, className: clsx(styles.trigger, (_b = {},
-            _b[styles.selected] = selected,
-            _b), className), onClick: onClick, type: "button", ref: ref }, focusVisible),
+function TriggerButton({ ariaLabel, iconName, onClick, selected = false, className }, ref) {
+    const focusVisible = useFocusVisible();
+    return (React.createElement("button", Object.assign({ "aria-label": ariaLabel, "aria-expanded": false, "aria-haspopup": true, className: clsx(styles.trigger, {
+            [styles.selected]: selected,
+        }, className), onClick: onClick, type: "button", ref: ref }, focusVisible),
         React.createElement(Icon, { name: iconName })));
 }
 export default React.forwardRef(TriggerButton);

package/app-layout/visual-refresh/trigger-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,SAAS,aAAa,CACpB,EAAiF,EACjF,GAA+B;;QAD7B,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA;IAG3D,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,uDACc,SAAS,mBACN,KAAK,mBACL,IAAI,EACnB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO;YAEZ,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;iBAE7B,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAmC,IACpC,YAAY;QAEhB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\ninterface TriggerButtonProps {\n  ariaLabel?: string;\n  iconName: IconProps.Name;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  className?: string;\n}\n\nfunction TriggerButton(\n  { ariaLabel, iconName, onClick, selected = false, className }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const focusVisible = useFocusVisible();\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      aria-expanded={false}\n      aria-haspopup={true}\n      className={clsx(\n        styles.trigger,\n        {\n          [styles.selected]: selected,\n        },\n        className\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref as React.Ref<HTMLButtonElement>}\n      {...focusVisible}\n    >\n      <Icon name={iconName} />\n    </button>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,SAAS,aAAa,CACpB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAsB,EACjF,GAA+B;IAE/B,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,4DACc,SAAS,mBACN,KAAK,mBACL,IAAI,EACnB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;SAC5B,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAmC,IACpC,YAAY;QAEhB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\ninterface TriggerButtonProps {\n  ariaLabel?: string;\n  iconName: IconProps.Name;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  className?: string;\n}\n\nfunction TriggerButton(\n  { ariaLabel, iconName, onClick, selected = false, className }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const focusVisible = useFocusVisible();\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      aria-expanded={false}\n      aria-haspopup={true}\n      className={clsx(\n        styles.trigger,\n        {\n          [styles.selected]: selected,\n        },\n        className\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref as React.Ref<HTMLButtonElement>}\n      {...focusVisible}\n    >\n      <Icon name={iconName} />\n    </button>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/area-chart/chart-container.js

@@ -15,30 +15,29 @@ import AreaVerticalMarker from './elements/vertical-marker';
 import styles from './styles.css.js';
 import useHighlightDetails from './elements/use-highlight-details';
 import useContainerWidth from '../internal/utils/use-container-width';
-var DEFAULT_CHART_WIDTH = 500;
-var LEFT_LABELS_MARGIN = 16;
-var BOTTOM_LABELS_OFFSET = 12;
+const DEFAULT_CHART_WIDTH = 500;
+const LEFT_LABELS_MARGIN = 16;
+const BOTTOM_LABELS_OFFSET = 12;
 export default memo(ChartContainer);
-function ChartContainer(_a) {
-    var model = _a.model, autoWidth = _a.autoWidth, xTitle = _a.xTitle, yTitle = _a.yTitle, detailPopoverSize = _a.detailPopoverSize, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescription = _a.ariaDescription, _b = _a.i18nStrings, _c = _b === void 0 ? {} : _b, xTickFormatter = _c.xTickFormatter, yTickFormatter = _c.yTickFormatter, detailTotalFormatter = _c.detailTotalFormatter, detailTotalLabel = _c.detailTotalLabel, chartAriaRoleDescription = _c.chartAriaRoleDescription, xAxisAriaRoleDescription = _c.xAxisAriaRoleDescription, yAxisAriaRoleDescription = _c.yAxisAriaRoleDescription, detailPopoverDismissAriaLabel = _c.detailPopoverDismissAriaLabel;
-    var _d = useState(0), leftLabelsWidth = _d[0], setLeftLabelsWidth = _d[1];
-    var _e = useState(0), bottomLabelsHeight = _e[0], setBottomLabelsHeight = _e[1];
-    var _f = useContainerWidth(DEFAULT_CHART_WIDTH), containerWidth = _f[0], containerWidthRef = _f[1];
+function ChartContainer({ model, autoWidth, xTitle, yTitle, detailPopoverSize, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings: { xTickFormatter, yTickFormatter, detailTotalFormatter, detailTotalLabel, chartAriaRoleDescription, xAxisAriaRoleDescription, yAxisAriaRoleDescription, detailPopoverDismissAriaLabel, } = {}, }) {
+    const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);
+    const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);
+    const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);
     // Calculate the width of the plot area and tell it to the parent.
-    var plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);
-    useEffect(function () {
+    const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);
+    useEffect(() => {
         autoWidth(plotWidth);
     }, [autoWidth, plotWidth]);
-    var highlightDetails = useHighlightDetails({
-        model: model,
-        xTickFormatter: xTickFormatter,
-        yTickFormatter: yTickFormatter,
-        detailTotalFormatter: detailTotalFormatter,
-        detailTotalLabel: detailTotalLabel
+    const highlightDetails = useHighlightDetails({
+        model,
+        xTickFormatter,
+        yTickFormatter,
+        detailTotalFormatter,
+        detailTotalLabel,
     });
-    var highlightedPointRef = useRef(null);
-    var mergedRef = useMergeRefs(containerWidthRef, model.refs.container);
-    var isPointHighlighted = model.interactions.get().highlightedPoint !== null;
+    const highlightedPointRef = useRef(null);
+    const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);
+    const isPointHighlighted = model.interactions.get().highlightedPoint !== null;
     return (React.createElement("div", { className: styles['chart-container'], ref: mergedRef },
         React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }),
         React.createElement("div", { className: styles['chart-container__horizontal'] },

package/area-chart/chart-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.js","sourceRoot":"","sources":["../../../src/area-chart/chart-container.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, { useState, useEffect, memo, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport styles from './styles.css.js';\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n  extends Pick<\n    AreaChartProps<T>,\n    'xTitle' | 'yTitle' | 'detailPopoverSize' | 'ariaLabel' | 'ariaLabelledby' | 'ariaDescription' | 'i18nStrings'\n  > {\n  model: ChartModel<T>;\n  autoWidth: (value: number) => void;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n  model,\n  autoWidth,\n  xTitle,\n  yTitle,\n  detailPopoverSize,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  i18nStrings: {\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n    chartAriaRoleDescription,\n    xAxisAriaRoleDescription,\n    yAxisAriaRoleDescription,\n    detailPopoverDismissAriaLabel,\n  } = {},\n}: ChartContainerProps<T>) {\n  const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);\n  const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n  // Calculate the width of the plot area and tell it to the parent.\n  const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n  useEffect(() => {\n    autoWidth(plotWidth);\n  }, [autoWidth, plotWidth]);\n\n  const highlightDetails = useHighlightDetails({\n    model,\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n  });\n\n  const highlightedPointRef = useRef<SVGGElement>(null);\n\n  const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n  const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n  return (\n    <div className={styles['chart-container']} ref={mergedRef}>\n      <AxisLabel axis=\"y\" position=\"left\" title={yTitle} />\n\n      <div className={styles['chart-container__horizontal']}>\n        <LabelsMeasure\n          scale={model.computed.yScale}\n          ticks={model.computed.yTicks}\n          tickFormatter={yTickFormatter as TickFormatter}\n          autoWidth={setLeftLabelsWidth}\n        />\n\n        <div className={styles['chart-container__vertical']}>\n          <ChartPlot\n            ref={model.refs.plot}\n            width={model.width}\n            height={model.height}\n            offsetBottom={bottomLabelsHeight}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            ariaRoleDescription={chartAriaRoleDescription}\n            activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n            activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n            activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n            isClickable={!highlightDetails?.isPopoverPinned}\n            onMouseMove={model.handlers.onSVGMouseMove}\n            onMouseOut={model.handlers.onSVGMouseOut}\n            onMouseDown={model.handlers.onSVGMouseDown}\n            onKeyDown={model.handlers.onSVGKeyDown}\n            onFocus={model.handlers.onSVGFocus}\n            onBlur={model.handlers.onSVGBlur}\n          >\n            <LeftLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.yScale}\n              ticks={model.computed.yTicks}\n              tickFormatter={yTickFormatter}\n              title={yTitle}\n              ariaRoleDescription={yAxisAriaRoleDescription}\n            />\n\n            <AreaDataSeries model={model} />\n\n            <BottomLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.xScale}\n              ticks={model.computed.xTicks}\n              tickFormatter={xTickFormatter as TickFormatter}\n              title={xTitle}\n              ariaRoleDescription={xAxisAriaRoleDescription}\n              autoHeight={setBottomLabelsHeight}\n              offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n              offsetRight={BOTTOM_LABELS_OFFSET}\n            />\n\n            <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n            <AreaVerticalMarker model={model} />\n\n            <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n          </ChartPlot>\n\n          <AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />\n        </div>\n\n        <AreaChartPopover\n          model={model}\n          highlightDetails={highlightDetails}\n          dismissAriaLabel={detailPopoverDismissAriaLabel}\n          size={detailPopoverSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"chart-container.js","sourceRoot":"","sources":["../../../src/area-chart/chart-container.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, { useState, useEffect, memo, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport styles from './styles.css.js';\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n  extends Pick<\n    AreaChartProps<T>,\n    'xTitle' | 'yTitle' | 'detailPopoverSize' | 'ariaLabel' | 'ariaLabelledby' | 'ariaDescription' | 'i18nStrings'\n  > {\n  model: ChartModel<T>;\n  autoWidth: (value: number) => void;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n  model,\n  autoWidth,\n  xTitle,\n  yTitle,\n  detailPopoverSize,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  i18nStrings: {\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n    chartAriaRoleDescription,\n    xAxisAriaRoleDescription,\n    yAxisAriaRoleDescription,\n    detailPopoverDismissAriaLabel,\n  } = {},\n}: ChartContainerProps<T>) {\n  const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);\n  const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n  // Calculate the width of the plot area and tell it to the parent.\n  const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n  useEffect(() => {\n    autoWidth(plotWidth);\n  }, [autoWidth, plotWidth]);\n\n  const highlightDetails = useHighlightDetails({\n    model,\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n  });\n\n  const highlightedPointRef = useRef<SVGGElement>(null);\n\n  const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n  const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n  return (\n    <div className={styles['chart-container']} ref={mergedRef}>\n      <AxisLabel axis=\"y\" position=\"left\" title={yTitle} />\n\n      <div className={styles['chart-container__horizontal']}>\n        <LabelsMeasure\n          scale={model.computed.yScale}\n          ticks={model.computed.yTicks}\n          tickFormatter={yTickFormatter as TickFormatter}\n          autoWidth={setLeftLabelsWidth}\n        />\n\n        <div className={styles['chart-container__vertical']}>\n          <ChartPlot\n            ref={model.refs.plot}\n            width={model.width}\n            height={model.height}\n            offsetBottom={bottomLabelsHeight}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            ariaRoleDescription={chartAriaRoleDescription}\n            activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n            activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n            activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n            isClickable={!highlightDetails?.isPopoverPinned}\n            onMouseMove={model.handlers.onSVGMouseMove}\n            onMouseOut={model.handlers.onSVGMouseOut}\n            onMouseDown={model.handlers.onSVGMouseDown}\n            onKeyDown={model.handlers.onSVGKeyDown}\n            onFocus={model.handlers.onSVGFocus}\n            onBlur={model.handlers.onSVGBlur}\n          >\n            <LeftLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.yScale}\n              ticks={model.computed.yTicks}\n              tickFormatter={yTickFormatter}\n              title={yTitle}\n              ariaRoleDescription={yAxisAriaRoleDescription}\n            />\n\n            <AreaDataSeries model={model} />\n\n            <BottomLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.xScale}\n              ticks={model.computed.xTicks}\n              tickFormatter={xTickFormatter as TickFormatter}\n              title={xTitle}\n              ariaRoleDescription={xAxisAriaRoleDescription}\n              autoHeight={setBottomLabelsHeight}\n              offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n              offsetRight={BOTTOM_LABELS_OFFSET}\n            />\n\n            <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n            <AreaVerticalMarker model={model} />\n\n            <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n          </ChartPlot>\n\n          <AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />\n        </div>\n\n        <AreaChartPopover\n          model={model}\n          highlightDetails={highlightDetails}\n          dismissAriaLabel={detailPopoverDismissAriaLabel}\n          size={detailPopoverSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/area-chart/elements/area-chart-filter.js

@@ -3,16 +3,15 @@
 import React, { memo } from 'react';
 import ChartFilter from '../../internal/components/chart-filter';
 export default memo(AreaChartFilter);
-function AreaChartFilter(_a) {
-    var model = _a.model, filterLabel = _a.filterLabel, filterPlaceholder = _a.filterPlaceholder, filterSelectedAriaLabel = _a.filterSelectedAriaLabel;
-    var filterItems = model.allSeries.map(function (s) {
-        var _a = model.getInternalSeries(s), title = _a.title, color = _a.color, markerType = _a.markerType;
-        return { label: title, color: color, type: markerType, datum: s };
+function AreaChartFilter({ model, filterLabel, filterPlaceholder, filterSelectedAriaLabel, }) {
+    const filterItems = model.allSeries.map(s => {
+        const { title, color, markerType } = model.getInternalSeries(s);
+        return { label: title, color, type: markerType, datum: s };
     });
     return (React.createElement(ChartFilter, { series: filterItems, onChange: model.handlers.onFilterSeries, selectedSeries: model.series, i18nStrings: {
-            filterLabel: filterLabel,
-            filterPlaceholder: filterPlaceholder,
-            filterSelectedAriaLabel: filterSelectedAriaLabel
+            filterLabel,
+            filterPlaceholder,
+            filterSelectedAriaLabel,
         } }));
 }
 //# sourceMappingURL=area-chart-filter.js.map

package/area-chart/elements/area-chart-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart-filter.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-filter.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAqC,EAU5D;QATC,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,iBAAiB,uBAAA,EACjB,uBAAuB,6BAAA;IAOvB,IAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAA,CAAC;QACjC,IAAA,KAA+B,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAvD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAA+B,CAAC;QAChE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,OAAA,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,EACvC,cAAc,EAAE,KAAK,CAAC,MAAM,EAC5B,WAAW,EAAE;YACX,WAAW,aAAA;YACX,iBAAiB,mBAAA;YACjB,uBAAuB,yBAAA;SACxB,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport ChartFilter from '../../internal/components/chart-filter';\n\nexport default memo(AreaChartFilter) as typeof AreaChartFilter;\n\nfunction AreaChartFilter<T extends AreaChartProps.DataTypes>({\n  model,\n  filterLabel,\n  filterPlaceholder,\n  filterSelectedAriaLabel,\n}: {\n  model: ChartModel<T>;\n  filterLabel?: string;\n  filterPlaceholder?: string;\n  filterSelectedAriaLabel?: string;\n}) {\n  const filterItems = model.allSeries.map(s => {\n    const { title, color, markerType } = model.getInternalSeries(s);\n    return { label: title, color, type: markerType, datum: s };\n  });\n\n  return (\n    <ChartFilter\n      series={filterItems}\n      onChange={model.handlers.onFilterSeries}\n      selectedSeries={model.series}\n      i18nStrings={{\n        filterLabel,\n        filterPlaceholder,\n        filterSelectedAriaLabel,\n      }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"area-chart-filter.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-filter.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAqC,EAC3D,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,uBAAuB,GAMxB;IACC,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QAC1C,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QAChE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,EACvC,cAAc,EAAE,KAAK,CAAC,MAAM,EAC5B,WAAW,EAAE;YACX,WAAW;YACX,iBAAiB;YACjB,uBAAuB;SACxB,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport ChartFilter from '../../internal/components/chart-filter';\n\nexport default memo(AreaChartFilter) as typeof AreaChartFilter;\n\nfunction AreaChartFilter<T extends AreaChartProps.DataTypes>({\n  model,\n  filterLabel,\n  filterPlaceholder,\n  filterSelectedAriaLabel,\n}: {\n  model: ChartModel<T>;\n  filterLabel?: string;\n  filterPlaceholder?: string;\n  filterSelectedAriaLabel?: string;\n}) {\n  const filterItems = model.allSeries.map(s => {\n    const { title, color, markerType } = model.getInternalSeries(s);\n    return { label: title, color, type: markerType, datum: s };\n  });\n\n  return (\n    <ChartFilter\n      series={filterItems}\n      onChange={model.handlers.onFilterSeries}\n      selectedSeries={model.series}\n      i18nStrings={{\n        filterLabel,\n        filterPlaceholder,\n        filterSelectedAriaLabel,\n      }}\n    />\n  );\n}\n"]}

package/area-chart/elements/area-chart-legend.js

@@ -4,15 +4,12 @@ import React, { memo, useMemo } from 'react';
 import ChartLegend from '../../internal/components/chart-legend';
 import { useSelector } from '../model/async-store';
 export default memo(AreaChartLegend);
-function AreaChartLegend(_a) {
-    var model = _a.model, legendTitle = _a.legendTitle, ariaLabel = _a.ariaLabel, plotContainerRef = _a.plotContainerRef;
-    var legendItems = useMemo(function () {
-        return model.series.map(function (s) {
-            var _a = model.getInternalSeries(s), title = _a.title, color = _a.color, markerType = _a.markerType;
-            return { label: title, color: color, type: markerType, datum: s };
-        });
-    }, [model]);
-    var legendSeries = useSelector(model.interactions, function (state) { return state.legendSeries; });
+function AreaChartLegend({ model, legendTitle, ariaLabel, plotContainerRef, }) {
+    const legendItems = useMemo(() => model.series.map(s => {
+        const { title, color, markerType } = model.getInternalSeries(s);
+        return { label: title, color, type: markerType, datum: s };
+    }), [model]);
+    const legendSeries = useSelector(model.interactions, state => state.legendSeries);
     return (React.createElement(ChartLegend, { series: legendItems, highlightedSeries: legendSeries, onHighlightChange: model.handlers.onLegendHighlight, legendTitle: legendTitle, ariaLabel: ariaLabel, plotContainerRef: plotContainerRef }));
 }
 //# sourceMappingURL=area-chart-legend.js.map

package/area-chart/elements/area-chart-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart-legend.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-legend.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAqC,EAU5D;QATC,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,gBAAgB,sBAAA;IAOhB,IAAM,WAAW,GAAG,OAAO,CACzB;QACE,OAAA,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,CAAC;YACV,IAAA,KAA+B,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAvD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAA+B,CAAC;YAChE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,OAAA,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;QAC7D,CAAC,CAAC;IAHF,CAGE,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,YAAY,EAAlB,CAAkB,CAAC,CAAC;IAElF,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,iBAAiB,EAAE,YAAY,EAC/B,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,iBAAiB,EACnD,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useMemo } from 'react';\n\nimport { AreaChartProps } from '../interfaces';\nimport ChartLegend from '../../internal/components/chart-legend';\nimport { useSelector } from '../model/async-store';\nimport { ChartModel } from '../model';\n\nexport default memo(AreaChartLegend) as typeof AreaChartLegend;\n\nfunction AreaChartLegend<T extends AreaChartProps.DataTypes>({\n  model,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: {\n  model: ChartModel<T>;\n  plotContainerRef: React.RefObject<HTMLDivElement>;\n  legendTitle?: string;\n  ariaLabel?: string;\n}) {\n  const legendItems = useMemo(\n    () =>\n      model.series.map(s => {\n        const { title, color, markerType } = model.getInternalSeries(s);\n        return { label: title, color, type: markerType, datum: s };\n      }),\n    [model]\n  );\n\n  const legendSeries = useSelector(model.interactions, state => state.legendSeries);\n\n  return (\n    <ChartLegend\n      series={legendItems}\n      highlightedSeries={legendSeries}\n      onHighlightChange={model.handlers.onLegendHighlight}\n      legendTitle={legendTitle}\n      ariaLabel={ariaLabel}\n      plotContainerRef={plotContainerRef}\n    />\n  );\n}\n"]}
+{"version":3,"file":"area-chart-legend.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-chart-legend.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAqC,EAC3D,KAAK,EACL,WAAW,EACX,SAAS,EACT,gBAAgB,GAMjB;IACC,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACnB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QAChE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAC7D,CAAC,CAAC,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAElF,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,iBAAiB,EAAE,YAAY,EAC/B,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,iBAAiB,EACnD,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useMemo } from 'react';\n\nimport { AreaChartProps } from '../interfaces';\nimport ChartLegend from '../../internal/components/chart-legend';\nimport { useSelector } from '../model/async-store';\nimport { ChartModel } from '../model';\n\nexport default memo(AreaChartLegend) as typeof AreaChartLegend;\n\nfunction AreaChartLegend<T extends AreaChartProps.DataTypes>({\n  model,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: {\n  model: ChartModel<T>;\n  plotContainerRef: React.RefObject<HTMLDivElement>;\n  legendTitle?: string;\n  ariaLabel?: string;\n}) {\n  const legendItems = useMemo(\n    () =>\n      model.series.map(s => {\n        const { title, color, markerType } = model.getInternalSeries(s);\n        return { label: title, color, type: markerType, datum: s };\n      }),\n    [model]\n  );\n\n  const legendSeries = useSelector(model.interactions, state => state.legendSeries);\n\n  return (\n    <ChartLegend\n      series={legendItems}\n      highlightedSeries={legendSeries}\n      onHighlightChange={model.handlers.onLegendHighlight}\n      legendTitle={legendTitle}\n      ariaLabel={ariaLabel}\n      plotContainerRef={plotContainerRef}\n    />\n  );\n}\n"]}

package/area-chart/elements/area-series.js

@@ -3,19 +3,18 @@
 import React, { memo } from 'react';
 import { line, area } from 'd3-shape';
 export default memo(AreaSeries);
-function AreaSeries(_a) {
-    var data = _a.data, color = _a.color, chartAreaClipPath = _a.chartAreaClipPath;
-    var areaGenerator = area()
-        .x(function (p) { return p.scaled.x; })
-        .y0(function (p) { return p.scaled.y0; })
-        .y1(function (p) { return p.scaled.y1; });
-    var areaPath = areaGenerator(data) || '';
-    var lineGenerator = line()
-        .x(function (p) { return p.scaled.x; })
-        .y(function (p) { return p.scaled.y1; });
-    var linePath = lineGenerator(data) || '';
+function AreaSeries({ data, color, chartAreaClipPath }) {
+    const areaGenerator = area()
+        .x((p) => p.scaled.x)
+        .y0((p) => p.scaled.y0)
+        .y1((p) => p.scaled.y1);
+    const areaPath = areaGenerator(data) || '';
+    const lineGenerator = line()
+        .x((p) => p.scaled.x)
+        .y((p) => p.scaled.y1);
+    const linePath = lineGenerator(data) || '';
     return (React.createElement(React.Fragment, null,
-        React.createElement("path", { "aria-hidden": true, fill: color, stroke: color, style: { opacity: 0.4 }, clipPath: "url(#".concat(chartAreaClipPath, ")"), d: areaPath }),
-        React.createElement("path", { "aria-hidden": true, stroke: color, clipPath: "url(#".concat(chartAreaClipPath, ")"), d: linePath })));
+        React.createElement("path", { "aria-hidden": true, fill: color, stroke: color, style: { opacity: 0.4 }, clipPath: `url(#${chartAreaClipPath})`, d: areaPath }),
+        React.createElement("path", { "aria-hidden": true, stroke: color, clipPath: `url(#${chartAreaClipPath})`, d: linePath })));
 }
 //# sourceMappingURL=area-series.js.map

package/area-chart/elements/area-series.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-series.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAStC,eAAe,IAAI,CAAC,UAAU,CAAsB,CAAC;AAErD,SAAS,UAAU,CAAI,EAAsD;QAApD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,iBAAiB,uBAAA;IACrD,IAAM,aAAa,GAAG,IAAI,EAA2B;SAClD,CAAC,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,CAAC,EAAV,CAAU,CAAC;SAC7C,EAAE,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,EAAX,CAAW,CAAC;SAC/C,EAAE,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,EAAX,CAAW,CAAC,CAAC;IACnD,IAAM,QAAQ,GAAG,aAAa,CAAC,IAAiC,CAAC,IAAI,EAAE,CAAC;IAExE,IAAM,aAAa,GAAG,IAAI,EAA2B;SAClD,CAAC,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,CAAC,EAAV,CAAU,CAAC;SAC7C,CAAC,CAAC,UAAC,CAA0B,IAAK,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,EAAX,CAAW,CAAC,CAAC;IAClD,IAAM,QAAQ,GAAG,aAAa,CAAC,IAAiC,CAAC,IAAI,EAAE,CAAC;IAExE,OAAO,CACL;QACE,6CACe,IAAI,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,QAAQ,EAAE,eAAQ,iBAAiB,MAAG,EACtC,CAAC,EAAE,QAAQ,GACX;QACF,6CAAmB,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAQ,iBAAiB,MAAG,EAAE,CAAC,EAAE,QAAQ,GAAI,CAC9F,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport { line, area } from 'd3-shape';\nimport { ChartModel } from '../model';\n\nexport interface AreaSeriesProps<T> {\n  data: readonly ChartModel.PlotPoint<T>[];\n  color: string;\n  chartAreaClipPath: string;\n}\n\nexport default memo(AreaSeries) as typeof AreaSeries;\n\nfunction AreaSeries<T>({ data, color, chartAreaClipPath }: AreaSeriesProps<T>) {\n  const areaGenerator = area<ChartModel.PlotPoint<T>>()\n    .x((p: ChartModel.PlotPoint<T>) => p.scaled.x)\n    .y0((p: ChartModel.PlotPoint<T>) => p.scaled.y0)\n    .y1((p: ChartModel.PlotPoint<T>) => p.scaled.y1);\n  const areaPath = areaGenerator(data as ChartModel.PlotPoint<T>[]) || '';\n\n  const lineGenerator = line<ChartModel.PlotPoint<T>>()\n    .x((p: ChartModel.PlotPoint<T>) => p.scaled.x)\n    .y((p: ChartModel.PlotPoint<T>) => p.scaled.y1);\n  const linePath = lineGenerator(data as ChartModel.PlotPoint<T>[]) || '';\n\n  return (\n    <>\n      <path\n        aria-hidden={true}\n        fill={color}\n        stroke={color}\n        style={{ opacity: 0.4 }}\n        clipPath={`url(#${chartAreaClipPath})`}\n        d={areaPath}\n      />\n      <path aria-hidden={true} stroke={color} clipPath={`url(#${chartAreaClipPath})`} d={linePath} />\n    </>\n  );\n}\n"]}
+{"version":3,"file":"area-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/area-series.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAStC,eAAe,IAAI,CAAC,UAAU,CAAsB,CAAC;AAErD,SAAS,UAAU,CAAI,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAsB;IAC3E,MAAM,aAAa,GAAG,IAAI,EAA2B;SAClD,CAAC,CAAC,CAAC,CAA0B,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;SAC7C,EAAE,CAAC,CAAC,CAA0B,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;SAC/C,EAAE,CAAC,CAAC,CAA0B,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAiC,CAAC,IAAI,EAAE,CAAC;IAExE,MAAM,aAAa,GAAG,IAAI,EAA2B;SAClD,CAAC,CAAC,CAAC,CAA0B,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;SAC7C,CAAC,CAAC,CAAC,CAA0B,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAiC,CAAC,IAAI,EAAE,CAAC;IAExE,OAAO,CACL;QACE,6CACe,IAAI,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,QAAQ,EAAE,QAAQ,iBAAiB,GAAG,EACtC,CAAC,EAAE,QAAQ,GACX;QACF,6CAAmB,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,iBAAiB,GAAG,EAAE,CAAC,EAAE,QAAQ,GAAI,CAC9F,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport { line, area } from 'd3-shape';\nimport { ChartModel } from '../model';\n\nexport interface AreaSeriesProps<T> {\n  data: readonly ChartModel.PlotPoint<T>[];\n  color: string;\n  chartAreaClipPath: string;\n}\n\nexport default memo(AreaSeries) as typeof AreaSeries;\n\nfunction AreaSeries<T>({ data, color, chartAreaClipPath }: AreaSeriesProps<T>) {\n  const areaGenerator = area<ChartModel.PlotPoint<T>>()\n    .x((p: ChartModel.PlotPoint<T>) => p.scaled.x)\n    .y0((p: ChartModel.PlotPoint<T>) => p.scaled.y0)\n    .y1((p: ChartModel.PlotPoint<T>) => p.scaled.y1);\n  const areaPath = areaGenerator(data as ChartModel.PlotPoint<T>[]) || '';\n\n  const lineGenerator = line<ChartModel.PlotPoint<T>>()\n    .x((p: ChartModel.PlotPoint<T>) => p.scaled.x)\n    .y((p: ChartModel.PlotPoint<T>) => p.scaled.y1);\n  const linePath = lineGenerator(data as ChartModel.PlotPoint<T>[]) || '';\n\n  return (\n    <>\n      <path\n        aria-hidden={true}\n        fill={color}\n        stroke={color}\n        style={{ opacity: 0.4 }}\n        clipPath={`url(#${chartAreaClipPath})`}\n        d={areaPath}\n      />\n      <path aria-hidden={true} stroke={color} clipPath={`url(#${chartAreaClipPath})`} d={linePath} />\n    </>\n  );\n}\n"]}

package/area-chart/elements/chart-popover.js

@@ -1,25 +1,23 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import ChartPopover from '../../internal/components/chart-popover';
 import ChartSeriesDetails from '../../internal/components/chart-series-details';
 import styles from '../styles.css.js';
-export default function AreaChartPopover(_a) {
-    var model = _a.model, highlightDetails = _a.highlightDetails, dismissAriaLabel = _a.dismissAriaLabel, size = _a.size;
+export default function AreaChartPopover({ model, highlightDetails, dismissAriaLabel, size, }) {
     if (!highlightDetails) {
         return null;
     }
-    var popoverProps = {
+    const popoverProps = {
         title: highlightDetails.formattedX,
         trackRef: model.refs.verticalMarker,
         trackKey: highlightDetails.highlightIndex,
         dismissButton: highlightDetails.isPopoverPinned,
         onDismiss: model.handlers.onPopoverDismiss,
         onMouseLeave: model.handlers.onPopoverLeave,
-        ref: model.refs.popoverRef
+        ref: model.refs.popoverRef,
     };
-    return (React.createElement(ChartPopover, __assign({}, popoverProps, { container: model.refs.container.current, dismissAriaLabel: dismissAriaLabel, size: size }),
+    return (React.createElement(ChartPopover, Object.assign({}, popoverProps, { container: model.refs.container.current, dismissAriaLabel: dismissAriaLabel, size: size }),
         React.createElement(ChartSeriesDetails, { details: highlightDetails.seriesDetails }),
         React.createElement("div", { className: styles['popover-divider'] }),
         React.createElement(ChartSeriesDetails, { details: highlightDetails.totalDetails })));

package/area-chart/elements/chart-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-popover.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAIhF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAqC,EAU5E;QATC,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,IAAI,UAAA;IAOJ,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG;QACnB,KAAK,EAAE,gBAAgB,CAAC,UAAU;QAClC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,gBAAgB,CAAC,cAAc;QACzC,aAAa,EAAE,gBAAgB,CAAC,eAAe;QAC/C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,gBAAgB;QAC1C,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc;QAC3C,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU;KAC3B,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,eACP,YAAY,IAChB,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EACvC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI;QAEV,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,aAAa,GAAI;QAC/D,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,GAAI;QAC7C,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,GAAI,CACjD,CAChB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport ChartPopover from '../../internal/components/chart-popover';\nimport ChartSeriesDetails from '../../internal/components/chart-series-details';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport styles from '../styles.css.js';\nimport { HighlightDetails } from './use-highlight-details';\n\nexport default function AreaChartPopover<T extends AreaChartProps.DataTypes>({\n  model,\n  highlightDetails,\n  dismissAriaLabel,\n  size,\n}: {\n  model: ChartModel<T>;\n  highlightDetails: null | HighlightDetails;\n  dismissAriaLabel?: string;\n  size?: 'small' | 'medium' | 'large';\n}) {\n  if (!highlightDetails) {\n    return null;\n  }\n\n  const popoverProps = {\n    title: highlightDetails.formattedX,\n    trackRef: model.refs.verticalMarker,\n    trackKey: highlightDetails.highlightIndex,\n    dismissButton: highlightDetails.isPopoverPinned,\n    onDismiss: model.handlers.onPopoverDismiss,\n    onMouseLeave: model.handlers.onPopoverLeave,\n    ref: model.refs.popoverRef,\n  };\n\n  return (\n    <ChartPopover\n      {...popoverProps}\n      container={model.refs.container.current}\n      dismissAriaLabel={dismissAriaLabel}\n      size={size}\n    >\n      <ChartSeriesDetails details={highlightDetails.seriesDetails} />\n      <div className={styles['popover-divider']} />\n      <ChartSeriesDetails details={highlightDetails.totalDetails} />\n    </ChartPopover>\n  );\n}\n"]}
+{"version":3,"file":"chart-popover.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/chart-popover.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAIhF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAqC,EAC3E,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,IAAI,GAML;IACC,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG;QACnB,KAAK,EAAE,gBAAgB,CAAC,UAAU;QAClC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,gBAAgB,CAAC,cAAc;QACzC,aAAa,EAAE,gBAAgB,CAAC,eAAe;QAC/C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,gBAAgB;QAC1C,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc;QAC3C,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU;KAC3B,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,oBACP,YAAY,IAChB,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EACvC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI;QAEV,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,aAAa,GAAI;QAC/D,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,GAAI;QAC7C,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,GAAI,CACjD,CAChB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport ChartPopover from '../../internal/components/chart-popover';\nimport ChartSeriesDetails from '../../internal/components/chart-series-details';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport styles from '../styles.css.js';\nimport { HighlightDetails } from './use-highlight-details';\n\nexport default function AreaChartPopover<T extends AreaChartProps.DataTypes>({\n  model,\n  highlightDetails,\n  dismissAriaLabel,\n  size,\n}: {\n  model: ChartModel<T>;\n  highlightDetails: null | HighlightDetails;\n  dismissAriaLabel?: string;\n  size?: 'small' | 'medium' | 'large';\n}) {\n  if (!highlightDetails) {\n    return null;\n  }\n\n  const popoverProps = {\n    title: highlightDetails.formattedX,\n    trackRef: model.refs.verticalMarker,\n    trackKey: highlightDetails.highlightIndex,\n    dismissButton: highlightDetails.isPopoverPinned,\n    onDismiss: model.handlers.onPopoverDismiss,\n    onMouseLeave: model.handlers.onPopoverLeave,\n    ref: model.refs.popoverRef,\n  };\n\n  return (\n    <ChartPopover\n      {...popoverProps}\n      container={model.refs.container.current}\n      dismissAriaLabel={dismissAriaLabel}\n      size={size}\n    >\n      <ChartSeriesDetails details={highlightDetails.seriesDetails} />\n      <div className={styles['popover-divider']} />\n      <ChartSeriesDetails details={highlightDetails.totalDetails} />\n    </ChartPopover>\n  );\n}\n"]}

package/area-chart/elements/data-series.js

@@ -8,15 +8,14 @@ import ThresholdSeries from './threshold-series';
 import styles from '../styles.css.js';
 import { useSelector } from '../model/async-store';
 export default memo(DataSeries);
-function DataSeries(_a) {
-    var model = _a.model;
-    var chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');
-    var highlightedX = useSelector(model.interactions, function (state) { return state.highlightedX; });
-    var highlightedSeries = useSelector(model.interactions, function (state) { return state.highlightedSeries; });
-    var useHighlightDimmed = !highlightedX;
+function DataSeries({ model }) {
+    const chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');
+    const highlightedX = useSelector(model.interactions, state => state.highlightedX);
+    const highlightedSeries = useSelector(model.interactions, state => state.highlightedSeries);
+    const useHighlightDimmed = !highlightedX;
     // Iterating series in the reversed order so that SVG paths overlap correctly.
-    var seriesData = [];
-    for (var seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {
+    const seriesData = [];
+    for (let seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {
         if (model.computed.plot.sx[seriesIndex]) {
             seriesData.push([model.series[seriesIndex], model.computed.plot.sx[seriesIndex] || []]);
         }
@@ -25,15 +24,13 @@ function DataSeries(_a) {
         React.createElement("defs", { "aria-hidden": "true" },
             React.createElement("clipPath", { id: chartAreaClipPath },
                 React.createElement("rect", { x: 0, y: 0, width: model.width, height: model.height }))),
-        React.createElement("g", { role: "group" }, seriesData.map(function (_a) {
-            var _b;
-            var series = _a[0], data = _a[1];
-            var isHighlighted = series === highlightedSeries;
-            var isDimmed = !!highlightedSeries && !isHighlighted;
-            return (React.createElement("g", { key: series.title, role: "group", "aria-label": series.title, className: clsx(styles.series, styles["series--".concat(series.type)], (_b = {},
-                    _b[styles['series--highlighted']] = isHighlighted,
-                    _b[styles['series--dimmed']] = useHighlightDimmed && isDimmed,
-                    _b)) }, series.type === 'area' ? (React.createElement(AreaSeries, { data: data, color: model.getInternalSeries(series).color, chartAreaClipPath: chartAreaClipPath })) : (React.createElement(ThresholdSeries, { data: data, xScale: model.computed.xScale, color: model.getInternalSeries(series).color, chartAreaClipPath: chartAreaClipPath }))));
+        React.createElement("g", { role: "group" }, seriesData.map(([series, data]) => {
+            const isHighlighted = series === highlightedSeries;
+            const isDimmed = !!highlightedSeries && !isHighlighted;
+            return (React.createElement("g", { key: series.title, role: "group", "aria-label": series.title, className: clsx(styles.series, styles[`series--${series.type}`], {
+                    [styles['series--highlighted']]: isHighlighted,
+                    [styles['series--dimmed']]: useHighlightDimmed && isDimmed,
+                }) }, series.type === 'area' ? (React.createElement(AreaSeries, { data: data, color: model.getInternalSeries(series).color, chartAreaClipPath: chartAreaClipPath })) : (React.createElement(ThresholdSeries, { data: data, xScale: model.computed.xScale, color: model.getInternalSeries(series).color, chartAreaClipPath: chartAreaClipPath }))));
         }))));
 }
 //# sourceMappingURL=data-series.js.map

package/area-chart/elements/data-series.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/data-series.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, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport AreaSeries from './area-series';\nimport ThresholdSeries from './threshold-series';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\n\nimport styles from '../styles.css.js';\nimport { useSelector } from '../model/async-store';\n\nexport default memo(DataSeries) as typeof DataSeries;\n\nfunction DataSeries<T extends AreaChartProps.DataTypes>({ model }: { model: ChartModel<T> }) {\n  const chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');\n\n  const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n  const highlightedSeries = useSelector(model.interactions, state => state.highlightedSeries);\n  const useHighlightDimmed = !highlightedX;\n\n  // Iterating series in the reversed order so that SVG paths overlap correctly.\n  const seriesData: [AreaChartProps.Series<T>, ChartModel.PlotPoint<T>[]][] = [];\n  for (let seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {\n    if (model.computed.plot.sx[seriesIndex]) {\n      seriesData.push([model.series[seriesIndex], model.computed.plot.sx[seriesIndex] || []]);\n    }\n  }\n\n  return (\n    <>\n      <defs aria-hidden=\"true\">\n        <clipPath id={chartAreaClipPath}>\n          <rect x={0} y={0} width={model.width} height={model.height} />\n        </clipPath>\n      </defs>\n      <g role=\"group\">\n        {seriesData.map(([series, data]) => {\n          const isHighlighted = series === highlightedSeries;\n          const isDimmed = !!highlightedSeries && !isHighlighted;\n\n          return (\n            <g\n              key={series.title}\n              role=\"group\"\n              aria-label={series.title}\n              className={clsx(styles.series, styles[`series--${series.type}`], {\n                [styles['series--highlighted']]: isHighlighted,\n                [styles['series--dimmed']]: useHighlightDimmed && isDimmed,\n              })}\n            >\n              {series.type === 'area' ? (\n                <AreaSeries\n                  data={data}\n                  color={model.getInternalSeries(series).color}\n                  chartAreaClipPath={chartAreaClipPath}\n                />\n              ) : (\n                <ThresholdSeries\n                  data={data}\n                  xScale={model.computed.xScale}\n                  color={model.getInternalSeries(series).color}\n                  chartAreaClipPath={chartAreaClipPath}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"data-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/data-series.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, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport AreaSeries from './area-series';\nimport ThresholdSeries from './threshold-series';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\n\nimport styles from '../styles.css.js';\nimport { useSelector } from '../model/async-store';\n\nexport default memo(DataSeries) as typeof DataSeries;\n\nfunction DataSeries<T extends AreaChartProps.DataTypes>({ model }: { model: ChartModel<T> }) {\n  const chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');\n\n  const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n  const highlightedSeries = useSelector(model.interactions, state => state.highlightedSeries);\n  const useHighlightDimmed = !highlightedX;\n\n  // Iterating series in the reversed order so that SVG paths overlap correctly.\n  const seriesData: [AreaChartProps.Series<T>, ChartModel.PlotPoint<T>[]][] = [];\n  for (let seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {\n    if (model.computed.plot.sx[seriesIndex]) {\n      seriesData.push([model.series[seriesIndex], model.computed.plot.sx[seriesIndex] || []]);\n    }\n  }\n\n  return (\n    <>\n      <defs aria-hidden=\"true\">\n        <clipPath id={chartAreaClipPath}>\n          <rect x={0} y={0} width={model.width} height={model.height} />\n        </clipPath>\n      </defs>\n      <g role=\"group\">\n        {seriesData.map(([series, data]) => {\n          const isHighlighted = series === highlightedSeries;\n          const isDimmed = !!highlightedSeries && !isHighlighted;\n\n          return (\n            <g\n              key={series.title}\n              role=\"group\"\n              aria-label={series.title}\n              className={clsx(styles.series, styles[`series--${series.type}`], {\n                [styles['series--highlighted']]: isHighlighted,\n                [styles['series--dimmed']]: useHighlightDimmed && isDimmed,\n              })}\n            >\n              {series.type === 'area' ? (\n                <AreaSeries\n                  data={data}\n                  color={model.getInternalSeries(series).color}\n                  chartAreaClipPath={chartAreaClipPath}\n                />\n              ) : (\n                <ThresholdSeries\n                  data={data}\n                  xScale={model.computed.xScale}\n                  color={model.getInternalSeries(series).color}\n                  chartAreaClipPath={chartAreaClipPath}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    </>\n  );\n}\n"]}