@cloudscape-design/components 3.0.758 → 3.0.760

package/app-layout/visual-refresh-toolbar/toolbar/styles.scoped.css

@@ -136,9 +136,9 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_universal-toolbar_1kzri_scjlm_141:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141:not(#\9) {
   background-color: var(--color-background-layout-panel-content-t82vgh, #ffffff);
   box-sizing: border-box;
   padding-block: 0;
@@ -150,22 +150,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: inset-block-start, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_universal-toolbar_1kzri_scjlm_141:not(#\9) {
+  .awsui_universal-toolbar_1kzri_17kqs_141:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_universal-toolbar_1kzri_scjlm_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_scjlm_141:not(#\9) {
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_17kqs_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_17kqs_141:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_universal-toolbar_1kzri_scjlm_141.awsui_disable-body-scroll_1kzri_scjlm_162:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141.awsui_disable-body-scroll_1kzri_17kqs_162:not(#\9) {
   inset-block-start: 0px;
 }
-.awsui_universal-toolbar_1kzri_scjlm_141.awsui_toolbar-hidden_1kzri_scjlm_165:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141.awsui_toolbar-hidden_1kzri_17kqs_165:not(#\9) {
   opacity: 0;
 }
-.awsui_universal-toolbar_1kzri_scjlm_141 > .awsui_toolbar-container_1kzri_scjlm_168:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141 > .awsui_toolbar-container_1kzri_17kqs_168:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: grid;
@@ -174,16 +174,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
   grid-template-rows: 1fr;
 }
-.awsui_universal-toolbar_1kzri_scjlm_141 > .awsui_toolbar-container_1kzri_scjlm_168 > .awsui_universal-toolbar-nav_1kzri_scjlm_177:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141 > .awsui_toolbar-container_1kzri_17kqs_168 > .awsui_universal-toolbar-nav_1kzri_17kqs_177:not(#\9) {
   grid-column: 1;
   padding-inline-end: var(--space-static-xxs-82cdfi, 4px);
 }
-.awsui_universal-toolbar_1kzri_scjlm_141 > .awsui_toolbar-container_1kzri_scjlm_168 > .awsui_universal-toolbar-breadcrumbs_1kzri_scjlm_181:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141 > .awsui_toolbar-container_1kzri_17kqs_168 > .awsui_universal-toolbar-breadcrumbs_1kzri_17kqs_181:not(#\9) {
   grid-column: 2;
   background-color: transparent;
   flex: 1 0;
 }
-.awsui_universal-toolbar_1kzri_scjlm_141 > .awsui_toolbar-container_1kzri_scjlm_168 > .awsui_universal-toolbar-drawers_1kzri_scjlm_186:not(#\9) {
+.awsui_universal-toolbar_1kzri_17kqs_141 > .awsui_toolbar-container_1kzri_17kqs_168 > .awsui_universal-toolbar-drawers_1kzri_17kqs_186:not(#\9) {
   grid-column: 3;
   column-gap: var(--space-static-xs-7sfb63, 8px);
   display: flex;
@@ -191,8 +191,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
 }
 
-.awsui_drawers-desktop-triggers-container_1kzri_scjlm_194:not(#\9),
-.awsui_drawers-mobile-triggers-container_1kzri_scjlm_195:not(#\9) {
+.awsui_drawers-desktop-triggers-container_1kzri_17kqs_194:not(#\9),
+.awsui_drawers-mobile-triggers-container_1kzri_17kqs_195:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -239,7 +239,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
 }
 
-.awsui_drawers-trigger-content_1kzri_scjlm_241:not(#\9) {
+.awsui_drawers-trigger-content_1kzri_17kqs_241:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: flex;
@@ -248,13 +248,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   justify-content: flex-end;
 }
 
-.awsui_group-divider_1kzri_scjlm_250:not(#\9) {
+.awsui_group-divider_1kzri_17kqs_250:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   block-size: 60%;
 }
 
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_1kzri_scjlm_241:not(#\9) {
+  .awsui_drawers-trigger_1kzri_17kqs_241:not(#\9) {
     display: flex;
     justify-content: center;
     align-items: center;

package/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js

@@ -2,17 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_scjlm_141",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_scjlm_162",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_scjlm_165",
-  "toolbar-container": "awsui_toolbar-container_1kzri_scjlm_168",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_scjlm_177",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_scjlm_181",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_scjlm_186",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_scjlm_194",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_scjlm_195",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_scjlm_241",
-  "group-divider": "awsui_group-divider_1kzri_scjlm_250",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_scjlm_241"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_17kqs_141",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_17kqs_162",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_17kqs_165",
+  "toolbar-container": "awsui_toolbar-container_1kzri_17kqs_168",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_17kqs_177",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_17kqs_181",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_17kqs_186",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_17kqs_194",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_17kqs_195",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_17kqs_241",
+  "group-divider": "awsui_group-divider_1kzri_17kqs_250",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_17kqs_241"
 };
   

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts

@@ -20,6 +20,35 @@ export interface TriggerButtonProps {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     badge?: boolean;
     highContrastHeader?: boolean;
+    /**
+     * If the button is expected to have a tooltip. When false it will not set the event listeners
+     *
+     * defaults to false
+     */
+    hasTooltip?: boolean;
+    /**
+     * This text allows for a customized tooltip.
+     *
+     * When falsy, the tooltip will parse the tooltip form the aria-lable
+     */
+    tooltipText?: string;
+    hasOpenDrawer?: boolean;
+    /**
+     * If the AppLayout is in mobile mode
+     * Used to determine if and where to render tooltips
+     */
+    isMobile?: boolean;
+    /**
+     * set to true if the trigger button was used to open the last active drawer
+     * this is also used to hide the tooltip should the focus be set programmatically
+     * on focus from a drawer close using this
+     */
+    isForPreviousActiveDrawer?: boolean;
+    /**
+     * if the trigger button is for the split panel
+     */
+    isForSplitPanel?: boolean;
+    tabIndex?: number | undefined;
 }
 declare const _default: React.ForwardRefExoticComponent<TriggerButtonProps & React.RefAttributes<ButtonProps.Ref>>;
 export default _default;

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAc,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAKxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;;AAkDD,wBAA+C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAOxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;;AAmLD,wBAA+C"}

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js

@@ -1,17 +1,119 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import Icon from '../../../../icon/internal';
+import Tooltip from '../../../../internal/components/tooltip';
+import { registerTooltip } from '../../../../internal/components/tooltip/registry';
 import styles from './styles.css.js';
-function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded, ariaControls, onClick, testId, disabled = false, badge, selected = false, highContrastHeader, }, ref) {
-    return (React.createElement("div", { className: clsx(styles['trigger-wrapper'], !highContrastHeader && styles['remove-high-contrast-header']) },
-        React.createElement("button", { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: clsx(styles.trigger, {
+function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded, ariaControls, onClick, testId, disabled = false, badge, selected = false, highContrastHeader, hasTooltip = false, tooltipText, hasOpenDrawer = false, isMobile = false, isForPreviousActiveDrawer = false, isForSplitPanel = false, }, ref) {
+    const containerRef = useRef(null);
+    const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [suppressTooltip, setSupressTooltip] = useState(false);
+    const handleTriggerClick = (event) => {
+        event.stopPropagation(); // Stop the event from propagating to the badge icon
+        setShowTooltip(false);
+        setSupressTooltip(true);
+        onClick(event);
+    };
+    const handleBlur = (keepSupressed = false) => {
+        setSupressTooltip(keepSupressed);
+        setShowTooltip(false);
+    };
+    const handlePointerEnter = () => {
+        setSupressTooltip(false);
+        setShowTooltip(true);
+    };
+    /**
+     * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists
+     * on the event relatedTarget to determine not to show the tooltip
+     * @param event
+     */
+    const handleOnFocus = useCallback((event) => {
+        var _a;
+        let shouldShowTooltip = false;
+        const eventWithRelatedTarget = event;
+        const relatedTarget = eventWithRelatedTarget === null || eventWithRelatedTarget === void 0 ? void 0 : eventWithRelatedTarget.relatedTarget;
+        const isFromAnotherTrigger = ((_a = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.dataset) === null || _a === void 0 ? void 0 : _a.shiftFocus) === 'awsui-layout-drawer-trigger';
+        if (isForSplitPanel || //for key navigation to button from breadcrumb
+            isFromAnotherTrigger || //for key navigation from another trigger button
+            !isForPreviousActiveDrawer //for when the drawer was not opened recently
+        ) {
+            shouldShowTooltip = true;
+        }
+        setSupressTooltip(!shouldShowTooltip);
+        setShowTooltip(true);
+    }, [
+        // To assert reference equality check
+        isForPreviousActiveDrawer,
+        isForSplitPanel,
+    ]);
+    const tooltipVisible = useMemo(() => {
+        return (hasTooltip &&
+            showTooltip &&
+            !suppressTooltip &&
+            !!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) &&
+            tooltipValue &&
+            !(isMobile && hasOpenDrawer));
+    }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);
+    useEffect(() => {
+        if (hasTooltip && tooltipValue) {
+            const close = () => {
+                setShowTooltip(false);
+                setSupressTooltip(false);
+            };
+            const shouldCloseTooltip = (event) => {
+                var _a;
+                if (event.target && containerRef && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                    return false;
+                }
+                return true;
+            };
+            const handlePointerDownEvent = (event) => {
+                if (shouldCloseTooltip(event)) {
+                    close();
+                }
+            };
+            const handleKeyDownEvent = (event) => {
+                if (event.key === 'Escape') {
+                    close();
+                }
+            };
+            const wrapperDiv = containerRef.current;
+            if (wrapperDiv) {
+                wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);
+                wrapperDiv.addEventListener('keydown', handleKeyDownEvent);
+                return () => {
+                    wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);
+                    wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);
+                };
+            }
+        }
+    }, [containerRef, hasTooltip, tooltipValue]);
+    useEffect(() => {
+        if (tooltipVisible) {
+            return registerTooltip(() => {
+                setShowTooltip(false);
+                setSupressTooltip(false);
+            });
+        }
+    }, [tooltipVisible]);
+    return (React.createElement("div", Object.assign({ ref: containerRef }, (hasTooltip && {
+        onPointerEnter: () => handlePointerEnter(),
+        onPointerLeave: () => handleBlur(true),
+        onFocus: e => handleOnFocus(e),
+        onBlur: () => handleBlur(true),
+    }), { className: clsx(styles['trigger-wrapper'], !highContrastHeader ? styles['remove-high-contrast-header'] : '', {
+            [styles['trigger-wrapper-tooltip-visible']]: tooltipVisible,
+        }) }),
+        React.createElement("button", { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: clsx(styles.trigger, styles['trigger-button-styles'], {
                 [styles.selected]: selected,
                 [styles.badge]: badge,
-            }, className), onClick: onClick, ref: ref, type: "button", "data-testid": testId },
-            React.createElement("span", { className: clsx(badge && styles['trigger-badge-wrapper']) }, (iconName || iconSvg) && React.createElement(Icon, { name: iconName, svg: iconSvg }))),
-        badge && React.createElement("div", { className: styles.dot })));
+            }, className), onClick: handleTriggerClick, ref: ref, type: "button", "data-testid": testId, "data-shift-focus": "awsui-layout-drawer-trigger" },
+            React.createElement("span", { className: clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles'])) }, (iconName || iconSvg) && React.createElement(Icon, { name: iconName, svg: iconSvg }))),
+        badge && React.createElement("div", { className: styles.dot }),
+        tooltipVisible && React.createElement(Tooltip, { trackRef: containerRef, value: tooltipValue, className: styles['trigger-tooltip'] })));
 }
 export default React.forwardRef(TriggerButton);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAE7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAuBrC,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,kBAAkB,GACC,EACrB,GAA+B;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,kBAAkB,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC;QAC3G,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,mBACN,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;aACtB,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAC,QAAQ,iBACA,MAAM;YAEnB,8BAAM,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAC5D,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CAC3D,CACA;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI,CACpC,CACP,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, { Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  badge?: boolean;\n  highContrastHeader?: boolean;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    highContrastHeader,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  return (\n    <div className={clsx(styles['trigger-wrapper'], !highContrastHeader && styles['remove-high-contrast-header'])}>\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n          },\n          className\n        )}\n        onClick={onClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n      >\n        <span className={clsx(badge && styles['trigger-badge-wrapper'])}>\n          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/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, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\nimport { registerTooltip } from '../../../../internal/components/tooltip/registry';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  badge?: boolean;\n  highContrastHeader?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    highContrastHeader,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        isForSplitPanel || //for key navigation to button from breadcrumb\n        isFromAnotherTrigger || //for key navigation from another trigger button\n        !isForPreviousActiveDrawer //for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent);\n\n        return () => {\n          wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);\n          wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  useEffect(() => {\n    if (tooltipVisible) {\n      return registerTooltip(() => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      });\n    }\n  }, [tooltipVisible]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={clsx(styles['trigger-wrapper'], !highContrastHeader ? styles['remove-high-contrast-header'] : '', {\n        [styles['trigger-wrapper-tooltip-visible']]: tooltipVisible,\n      })}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles['trigger-button-styles'],\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n      >\n        <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>\n          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && <Tooltip trackRef={containerRef} value={tooltipValue} className={styles['trigger-tooltip']} />}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js

@@ -1,11 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_1fc5q_141",
-  "trigger": "awsui_trigger_lpshu_1fc5q_141",
-  "selected": "awsui_selected_lpshu_1fc5q_230",
-  "badge": "awsui_badge_lpshu_1fc5q_250",
-  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_1fc5q_254",
-  "dot": "awsui_dot_lpshu_1fc5q_262"
+  "trigger-button-styles": "awsui_trigger-button-styles_lpshu_lpuqt_141",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_lpuqt_164",
+  "trigger": "awsui_trigger_lpshu_lpuqt_141",
+  "selected": "awsui_selected_lpshu_lpuqt_208",
+  "badge": "awsui_badge_lpshu_lpuqt_228",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_lpuqt_232",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_lpshu_lpuqt_240",
+  "dot": "awsui_dot_lpshu_lpuqt_244",
+  "trigger-tooltip": "awsui_trigger-tooltip_lpshu_lpuqt_257"
 };
   

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scoped.css

@@ -136,9 +136,9 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9) {
+.awsui_trigger-button-styles_lpshu_lpuqt_141:not(#\9) {
   background: transparent;
   color: var(--color-text-interactive-default-lnx6lk, #414d5c);
   border-start-start-radius: 50%;
@@ -151,6 +151,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+}
+.awsui_trigger-button-styles_lpshu_lpuqt_141:not(#\9):hover {
+  background: var(--color-background-input-disabled-ab59a3, #e9ebed);
+  color: var(--color-text-interactive-hover-mj8add, #000716);
+}
+.awsui_trigger-button-styles_lpshu_lpuqt_141:not(#\9):active {
+  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+  color: var(--color-text-interactive-hover-mj8add, #000716);
+}
+
+.awsui_trigger-badge-wrapper_lpshu_lpuqt_164:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -160,57 +171,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   clip-path: path("M32.185 9.34876C31.1913 10.1916 29.905 10.7 28.4999 10.7C25.3519 10.7 22.7999 8.14803 22.7999 5C22.7999 3.68192 23.2473 2.46833 23.9985 1.50281C21.8642 0.537421 19.4948 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34C26.3888 34 34 26.3888 34 17C34 14.2479 33.346 11.6485 32.185 9.34876Z");
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9):hover {
-  background: var(--color-background-input-disabled-ab59a3, #e9ebed);
-  color: var(--color-text-interactive-hover-mj8add, #000716);
-}
-.awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9):active {
-  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
-  color: var(--color-text-interactive-hover-mj8add, #000716);
-}
-.awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9):dir(rtl) {
+.awsui_trigger-badge-wrapper_lpshu_lpuqt_164:not(#\9):dir(rtl) {
   clip-path: path("M1.81502 9.34876C2.80869 10.1916 4.09501 10.7 5.50007 10.7C8.6481 10.7 11.2001 8.14803 11.2001 5C11.2001 3.68192 10.7527 2.46833 10.0015 1.50281C12.1358 0.537421 14.5052 0 17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 14.2479 0.653984 11.6485 1.81502 9.34876Z");
 }
 
-/*
-Warning! If these design tokens for width change it will adversely impact 
-the calculation used to determine the Split Panel maximum width in the 
-handleSplitPanelMaxWidth function in the context.
-*/
-.awsui_trigger_lpshu_1fc5q_141:not(#\9) {
-  background: transparent;
-  color: var(--color-text-interactive-default-lnx6lk, #414d5c);
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
-  block-size: 30px;
-  inline-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+.awsui_trigger_lpshu_lpuqt_141:not(#\9) {
   border-block: none;
   border-inline: none;
   cursor: pointer;
   pointer-events: auto;
 }
-.awsui_trigger_lpshu_1fc5q_141:not(#\9):hover {
-  background: var(--color-background-input-disabled-ab59a3, #e9ebed);
-  color: var(--color-text-interactive-hover-mj8add, #000716);
-}
-.awsui_trigger_lpshu_1fc5q_141:not(#\9):active {
-  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
-  color: var(--color-text-interactive-hover-mj8add, #000716);
-}
-body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1fc5q_141:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_lpuqt_141:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1fc5q_141:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_lpuqt_141:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(3px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1fc5q_141:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_lpuqt_141:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -224,34 +202,34 @@ body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1fc5q_141:not(#\9):focu
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_trigger_lpshu_1fc5q_141:not(#\9):focus {
+.awsui_trigger_lpshu_lpuqt_141:not(#\9):focus {
   outline: none;
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_selected_lpshu_1fc5q_230:not(#\9) {
+.awsui_trigger_lpshu_lpuqt_141.awsui_selected_lpshu_lpuqt_208:not(#\9) {
   background: var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
   color: var(--color-text-layout-toggle-selected-b93usl, #ffffff);
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_selected_lpshu_1fc5q_230:not(#\9):hover {
+.awsui_trigger_lpshu_lpuqt_141.awsui_selected_lpshu_lpuqt_208:not(#\9):hover {
   background: var(--color-background-layout-toggle-selected-hover-kjak2q, #065299);
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_selected_lpshu_1fc5q_230:not(#\9):active {
+.awsui_trigger_lpshu_lpuqt_141.awsui_selected_lpshu_lpuqt_208:not(#\9):active {
   background: var(--color-background-layout-toggle-selected-active-xfk480, #0972d3);
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_selected_lpshu_1fc5q_230 > .awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9) {
+.awsui_trigger_lpshu_lpuqt_141.awsui_selected_lpshu_lpuqt_208 > .awsui_trigger-badge-wrapper_lpshu_lpuqt_164:not(#\9) {
   background: var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
   color: var(--color-text-layout-toggle-selected-b93usl, #ffffff);
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_selected_lpshu_1fc5q_230 > .awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9):hover {
+.awsui_trigger_lpshu_lpuqt_141.awsui_selected_lpshu_lpuqt_208 > .awsui_trigger-badge-wrapper_lpshu_lpuqt_164:not(#\9):hover {
   background: var(--color-background-layout-toggle-selected-hover-kjak2q, #065299);
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_selected_lpshu_1fc5q_230 > .awsui_trigger-badge-wrapper_lpshu_1fc5q_141:not(#\9):active {
+.awsui_trigger_lpshu_lpuqt_141.awsui_selected_lpshu_lpuqt_208 > .awsui_trigger-badge-wrapper_lpshu_lpuqt_164:not(#\9):active {
   background: var(--color-background-layout-toggle-selected-active-xfk480, #0972d3);
 }
-.awsui_trigger_lpshu_1fc5q_141.awsui_badge_lpshu_1fc5q_250:not(#\9), .awsui_trigger_lpshu_1fc5q_141.awsui_badge_lpshu_1fc5q_250:not(#\9):hover, .awsui_trigger_lpshu_1fc5q_141.awsui_badge_lpshu_1fc5q_250:not(#\9):active {
+.awsui_trigger_lpshu_lpuqt_141.awsui_badge_lpshu_lpuqt_228:not(#\9), .awsui_trigger_lpshu_lpuqt_141.awsui_badge_lpshu_lpuqt_228:not(#\9):hover, .awsui_trigger_lpshu_lpuqt_141.awsui_badge_lpshu_lpuqt_228:not(#\9):active {
   background: transparent;
 }
 
-.awsui_trigger-wrapper_lpshu_1fc5q_254:not(#\9) {
+.awsui_trigger-wrapper_lpshu_lpuqt_232:not(#\9) {
   position: relative;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
@@ -259,7 +237,11 @@ body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1fc5q_141:not(#\9):focu
   border-end-end-radius: 50%;
 }
 
-.awsui_dot_lpshu_1fc5q_262:not(#\9) {
+.awsui_trigger-wrapper-tooltip-visible_lpshu_lpuqt_240:not(#\9) {
+  /* used in test-utils*/
+}
+
+.awsui_dot_lpshu_lpuqt_244:not(#\9) {
   position: absolute;
   inline-size: 8px;
   block-size: 8px;
@@ -270,4 +252,8 @@ body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1fc5q_141:not(#\9):focu
   background-color: var(--color-background-badge-icon-q1kfox, #d91515);
   inset-block-start: 1px;
   inset-inline-end: 1px;
+}
+
+.awsui_trigger-tooltip_lpshu_lpuqt_257:not(#\9) {
+  /* used in test-utils */
 }

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js

@@ -2,11 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_1fc5q_141",
-  "trigger": "awsui_trigger_lpshu_1fc5q_141",
-  "selected": "awsui_selected_lpshu_1fc5q_230",
-  "badge": "awsui_badge_lpshu_1fc5q_250",
-  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_1fc5q_254",
-  "dot": "awsui_dot_lpshu_1fc5q_262"
+  "trigger-button-styles": "awsui_trigger-button-styles_lpshu_lpuqt_141",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_lpuqt_164",
+  "trigger": "awsui_trigger_lpshu_lpuqt_141",
+  "selected": "awsui_selected_lpshu_lpuqt_208",
+  "badge": "awsui_badge_lpshu_lpuqt_228",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_lpuqt_232",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_lpshu_lpuqt_240",
+  "dot": "awsui_dot_lpshu_lpuqt_244",
+  "trigger-tooltip": "awsui_trigger-tooltip_lpshu_lpuqt_257"
 };
   

package/area-chart/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "series": "awsui_series_y1yrh_10sj4_185",
-  "root": "awsui_root_y1yrh_10sj4_199",
-  "series--highlighted": "awsui_series--highlighted_y1yrh_10sj4_211",
-  "series--dimmed": "awsui_series--dimmed_y1yrh_10sj4_215",
-  "series--threshold": "awsui_series--threshold_y1yrh_10sj4_219",
-  "popover-divider": "awsui_popover-divider_y1yrh_10sj4_224"
+  "series": "awsui_series_y1yrh_41xg2_185",
+  "root": "awsui_root_y1yrh_41xg2_199",
+  "series--highlighted": "awsui_series--highlighted_y1yrh_41xg2_211",
+  "series--dimmed": "awsui_series--dimmed_y1yrh_41xg2_215",
+  "series--threshold": "awsui_series--threshold_y1yrh_41xg2_219",
+  "popover-divider": "awsui_popover-divider_y1yrh_41xg2_224"
 };
   

package/area-chart/styles.scoped.css

@@ -176,31 +176,31 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_series_y1yrh_10sj4_185 > rect:not(#\9) {
+.awsui_series_y1yrh_41xg2_185 > rect:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_series_y1yrh_10sj4_185 > rect:not(#\9) {
+  .awsui_series_y1yrh_41xg2_185 > rect:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_series_y1yrh_10sj4_185 > rect:not(#\9), .awsui-mode-entering .awsui_series_y1yrh_10sj4_185 > rect:not(#\9) {
+.awsui-motion-disabled .awsui_series_y1yrh_41xg2_185 > rect:not(#\9), .awsui-mode-entering .awsui_series_y1yrh_41xg2_185 > rect:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_y1yrh_10sj4_199:not(#\9) {
+.awsui_root_y1yrh_41xg2_199:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_series_y1yrh_10sj4_185:not(#\9) {
+.awsui_series_y1yrh_41xg2_185:not(#\9) {
   display: block;
   stroke-width: var(--border-line-chart-width-9mzos2, 2px);
   fill: none;
@@ -208,20 +208,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   stroke-linejoin: var(--border-line-chart-line-join-hdz0jf, round);
 }
 
-.awsui_series--highlighted_y1yrh_10sj4_211:not(#\9) {
+.awsui_series--highlighted_y1yrh_41xg2_211:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_series--dimmed_y1yrh_10sj4_215:not(#\9) {
+.awsui_series--dimmed_y1yrh_41xg2_215:not(#\9) {
   opacity: 0.3;
 }
 
-.awsui_series--threshold_y1yrh_10sj4_219:not(#\9) {
+.awsui_series--threshold_y1yrh_41xg2_219:not(#\9) {
   stroke-dasharray: var(--border-line-chart-dash-array-k49cgz, 3 5);
   stroke-width: var(--border-line-chart-width-9mzos2, 2px);
 }
 
-.awsui_popover-divider_y1yrh_10sj4_224:not(#\9) {
+.awsui_popover-divider_y1yrh_41xg2_224:not(#\9) {
   margin-block: var(--space-xs-zb16t3, 8px);
   margin-inline: 0;
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);