@cloudscape-design/components 3.0.731 → 3.0.733

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

@@ -146,7 +146,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_7nfqu_1dz4s_149:not(#\9) {
+.awsui_root_7nfqu_1kxg6_149:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -189,60 +189,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_1dz4s_149:not(#\9) {
-    grid-template-areas: "navigation toolbar      toolbar       toolbar   toolbar         tools" "navigation .         notifications    .         sideSplitPanel  tools" "navigation .             main         .         sideSplitPanel  tools";
+  .awsui_root_7nfqu_1kxg6_149:not(#\9) {
+    grid-template-areas: "toolbar    toolbar      toolbar       toolbar   toolbar         toolbar" "navigation .         notifications    .         sideSplitPanel  tools" "navigation .             main         .         sideSplitPanel  tools";
     grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-g964ok)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_1dz4s_149.awsui_has-adaptive-widths-default_7nfqu_1dz4s_198:not(#\9) {
+  .awsui_root_7nfqu_1kxg6_149.awsui_has-adaptive-widths-default_7nfqu_1kxg6_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1dz4s_149.awsui_has-adaptive-widths-default_7nfqu_1dz4s_198:not(#\9) {
+  .awsui_root_7nfqu_1kxg6_149.awsui_has-adaptive-widths-default_7nfqu_1kxg6_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1440px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1dz4s_149.awsui_has-adaptive-widths-default_7nfqu_1dz4s_198:not(#\9) {
+  .awsui_root_7nfqu_1kxg6_149.awsui_has-adaptive-widths-default_7nfqu_1kxg6_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_1dz4s_149.awsui_has-adaptive-widths-dashboard_7nfqu_1dz4s_213:not(#\9) {
+  .awsui_root_7nfqu_1kxg6_149.awsui_has-adaptive-widths-dashboard_7nfqu_1kxg6_213:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1dz4s_149.awsui_has-adaptive-widths-dashboard_7nfqu_1dz4s_213:not(#\9) {
+  .awsui_root_7nfqu_1kxg6_149.awsui_has-adaptive-widths-dashboard_7nfqu_1kxg6_213:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1dz4s_149.awsui_has-adaptive-widths-dashboard_7nfqu_1dz4s_213:not(#\9) {
+  .awsui_root_7nfqu_1kxg6_149.awsui_has-adaptive-widths-dashboard_7nfqu_1kxg6_213:not(#\9) {
     --awsui-max-content-width-g964ok: 2160px;
   }
 }
 
-.awsui_navigation_7nfqu_1dz4s_228:not(#\9),
-.awsui_tools_7nfqu_1dz4s_229:not(#\9) {
+.awsui_navigation_7nfqu_1kxg6_228:not(#\9),
+.awsui_tools_7nfqu_1kxg6_229:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-4un1ap, #ffffff);
-  z-index: 850;
+  z-index: 830;
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_1dz4s_228:not(#\9),
-  .awsui_tools_7nfqu_1dz4s_229:not(#\9) {
+  .awsui_navigation_7nfqu_1kxg6_228:not(#\9),
+  .awsui_tools_7nfqu_1kxg6_229:not(#\9) {
     inline-size: 100%;
+    z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_1dz4s_228:not(#\9) {
+  .awsui_navigation_7nfqu_1kxg6_228:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-g964ok);
     border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-1zovx9, #b6bec9);
@@ -250,7 +251,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_1dz4s_229:not(#\9) {
+  .awsui_tools_7nfqu_1kxg6_229:not(#\9) {
     grid-area: tools;
     inline-size: var(--awsui-tools-width-g964ok);
     border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-1zovx9, #b6bec9);
@@ -258,14 +259,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_1dz4s_260:not(#\9) {
+  .awsui_split-panel-side_7nfqu_1kxg6_261:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-1zovx9, #b6bec9);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_1dz4s_267:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_1kxg6_268:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -273,64 +274,64 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_1dz4s_267:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_1kxg6_268:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_panel-hidden_7nfqu_1dz4s_280:not(#\9) {
+.awsui_panel-hidden_7nfqu_1kxg6_281:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_1dz4s_280.awsui_navigation_7nfqu_1dz4s_228:not(#\9), .awsui_panel-hidden_7nfqu_1dz4s_280.awsui_tools_7nfqu_1dz4s_229:not(#\9) {
+.awsui_panel-hidden_7nfqu_1kxg6_281.awsui_navigation_7nfqu_1kxg6_228:not(#\9), .awsui_panel-hidden_7nfqu_1kxg6_281.awsui_tools_7nfqu_1kxg6_229:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_1dz4s_290:not(#\9) {
+.awsui_toolbar-container_7nfqu_1kxg6_291:not(#\9) {
   grid-area: toolbar;
   block-size: 48px;
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-1zovx9, #b6bec9);
 }
 
-.awsui_notifications-container_7nfqu_1dz4s_296:not(#\9) {
+.awsui_notifications-container_7nfqu_1kxg6_297:not(#\9) {
   grid-area: notifications;
 }
-.awsui_notifications-container_7nfqu_1dz4s_296:not(#\9):not(:empty) {
+.awsui_notifications-container_7nfqu_1kxg6_297:not(#\9):not(:empty) {
   padding-block-start: var(--space-scaled-xs-26e2du, 8px);
 }
 
-.awsui_main-landmark_7nfqu_1dz4s_303:not(#\9) {
+.awsui_main-landmark_7nfqu_1kxg6_304:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_1dz4s_303:not(#\9) {
+.awsui_main_7nfqu_1kxg6_304:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-aqzyko, 12px);
   margin-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
 }
-.awsui_main-disable-paddings_7nfqu_1dz4s_312:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_1kxg6_313:not(#\9) {
   grid-column: 1/-1;
   margin-block: 0;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_1dz4s_312:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_1kxg6_313:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_content-header_7nfqu_1dz4s_322:not(#\9) {
+.awsui_content-header_7nfqu_1kxg6_323:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
 
-.awsui_content_7nfqu_1dz4s_322:not(#\9) {
+.awsui_content_7nfqu_1kxg6_323:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_1dz4s_332 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_1kxg6_333 *:not(#\9) {
     visibility: hidden;
   }
 }

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

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_1dz4s_149",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1dz4s_198",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1dz4s_213",
-  "navigation": "awsui_navigation_7nfqu_1dz4s_228",
-  "tools": "awsui_tools_7nfqu_1dz4s_229",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1dz4s_260",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1dz4s_267",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1dz4s_280",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1dz4s_290",
-  "notifications-container": "awsui_notifications-container_7nfqu_1dz4s_296",
-  "main-landmark": "awsui_main-landmark_7nfqu_1dz4s_303",
-  "main": "awsui_main_7nfqu_1dz4s_303",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1dz4s_312",
-  "content-header": "awsui_content-header_7nfqu_1dz4s_322",
-  "content": "awsui_content_7nfqu_1dz4s_322",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1dz4s_332"
+  "root": "awsui_root_7nfqu_1kxg6_149",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1kxg6_198",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1kxg6_213",
+  "navigation": "awsui_navigation_7nfqu_1kxg6_228",
+  "tools": "awsui_tools_7nfqu_1kxg6_229",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_1kxg6_261",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1kxg6_268",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_1kxg6_281",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_1kxg6_291",
+  "notifications-container": "awsui_notifications-container_7nfqu_1kxg6_297",
+  "main-landmark": "awsui_main-landmark_7nfqu_1kxg6_304",
+  "main": "awsui_main_7nfqu_1kxg6_304",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1kxg6_313",
+  "content-header": "awsui_content-header_7nfqu_1kxg6_323",
+  "content": "awsui_content_7nfqu_1kxg6_323",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1kxg6_333"
 };
   

package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-triggers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAO1D,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC;CAC7C;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IAErD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9C,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEtE,qBAAqB,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACzD,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACrD,kBAAkB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC9C;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,EAAE,mBAAmB,sBA2GrB"}
+{"version":3,"file":"drawer-triggers.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAO1D,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC;CAC7C;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IAErD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9C,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEtE,qBAAqB,EAAE,qBAAqB,GAAG,SAAS,CAAC;IACzD,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACrD,kBAAkB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC9C;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,EAAE,mBAAmB,sBA8GrB"}

package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js

@@ -46,7 +46,9 @@ export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFoc
                 [styles['has-multiple-triggers']]: hasMultipleTriggers,
                 [styles['has-open-drawer']]: activeDrawerId,
             }), role: "toolbar", "aria-orientation": "horizontal" },
-            splitPanelToggleProps && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelToggleProps.position === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle(), selected: splitPanelToggleProps.active, ref: splitPanelFocusRef })),
+            splitPanelToggleProps && (React.createElement(React.Fragment, null,
+                React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelToggleProps.position === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle(), selected: splitPanelToggleProps.active, ref: splitPanelFocusRef }),
+                hasMultipleTriggers ? React.createElement("div", { className: styles['group-divider'] }) : null)),
             visibleItems.map(item => {
                 var _a;
                 return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: item.id === activeDrawerId, ariaControls: activeDrawerId === item.id ? item.id : undefined, className: clsx(styles['drawers-trigger'], !toolsOnlyMode && testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null), ref: item.id === previousActiveDrawerId.current ? drawersFocusRef : undefined, selected: item.id === activeDrawerId, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}` }));

package/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-triggers.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { splitItems } from '../../drawer/drawers-helpers';\nimport OverflowMenu from '../../drawer/overflow-menu';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../../interfaces';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { Focusable } from '../../utils/use-focus-control';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SplitPanelToggleProps {\n  displayed: boolean;\n  ariaLabel: string | undefined;\n  controlId: string | undefined;\n  active: boolean;\n  position: AppLayoutProps.SplitPanelPosition;\n}\n\ninterface DrawerTriggersProps {\n  ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];\n\n  activeDrawerId: string | null;\n  drawersFocusRef: React.Ref<Focusable> | undefined;\n  drawers: ReadonlyArray<AppLayoutProps.Drawer>;\n  onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;\n\n  splitPanelToggleProps: SplitPanelToggleProps | undefined;\n  splitPanelFocusRef: React.Ref<Focusable> | undefined;\n  onSplitPanelToggle: (() => void) | undefined;\n}\n\nexport function DrawerTriggers({\n  ariaLabels,\n  activeDrawerId,\n  drawers,\n  drawersFocusRef,\n  onActiveDrawerChange,\n  splitPanelFocusRef,\n  splitPanelToggleProps,\n  onSplitPanelToggle,\n}: DrawerTriggersProps) {\n  const isMobile = useMobile();\n  const hasMultipleTriggers = drawers.length > 1;\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n  if (!drawers && !splitPanelToggleProps) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const getIndexOfOverflowItem = () => {\n    if (isMobile) {\n      return 2;\n    }\n    if (containerWidth) {\n      const ITEM_WIDTH = 50; // Roughly 34px + padding = 42px but added extra for safety\n      const overflowSpot = containerWidth;\n\n      const index = Math.floor(overflowSpot / ITEM_WIDTH);\n\n      let splitPanelItem = 0;\n      if (splitPanelToggleProps) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId ?? null);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n\n  return (\n    <aside\n      className={styles['drawers-desktop-triggers-container']}\n      aria-label={ariaLabels?.drawers}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: activeDrawerId,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        {splitPanelToggleProps && (\n          <TriggerButton\n            ariaLabel={splitPanelToggleProps.ariaLabel}\n            ariaControls={splitPanelToggleProps.controlId}\n            ariaExpanded={splitPanelToggleProps.active}\n            className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n            iconName={splitPanelToggleProps.position === 'side' ? 'view-vertical' : 'view-horizontal'}\n            onClick={() => onSplitPanelToggle?.()}\n            selected={splitPanelToggleProps.active}\n            ref={splitPanelFocusRef}\n          />\n        )}\n        {visibleItems.map(item => {\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                !toolsOnlyMode && testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null)}\n              ref={item.id === previousActiveDrawerId.current ? drawersFocusRef : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n              />\n            )}\n            onItemClick={event => onActiveDrawerChange?.(event.detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}
+{"version":3,"file":"drawer-triggers.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { splitItems } from '../../drawer/drawers-helpers';\nimport OverflowMenu from '../../drawer/overflow-menu';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../../interfaces';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { Focusable } from '../../utils/use-focus-control';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SplitPanelToggleProps {\n  displayed: boolean;\n  ariaLabel: string | undefined;\n  controlId: string | undefined;\n  active: boolean;\n  position: AppLayoutProps.SplitPanelPosition;\n}\n\ninterface DrawerTriggersProps {\n  ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];\n\n  activeDrawerId: string | null;\n  drawersFocusRef: React.Ref<Focusable> | undefined;\n  drawers: ReadonlyArray<AppLayoutProps.Drawer>;\n  onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;\n\n  splitPanelToggleProps: SplitPanelToggleProps | undefined;\n  splitPanelFocusRef: React.Ref<Focusable> | undefined;\n  onSplitPanelToggle: (() => void) | undefined;\n}\n\nexport function DrawerTriggers({\n  ariaLabels,\n  activeDrawerId,\n  drawers,\n  drawersFocusRef,\n  onActiveDrawerChange,\n  splitPanelFocusRef,\n  splitPanelToggleProps,\n  onSplitPanelToggle,\n}: DrawerTriggersProps) {\n  const isMobile = useMobile();\n  const hasMultipleTriggers = drawers.length > 1;\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n  const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n  if (!drawers && !splitPanelToggleProps) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  const getIndexOfOverflowItem = () => {\n    if (isMobile) {\n      return 2;\n    }\n    if (containerWidth) {\n      const ITEM_WIDTH = 50; // Roughly 34px + padding = 42px but added extra for safety\n      const overflowSpot = containerWidth;\n\n      const index = Math.floor(overflowSpot / ITEM_WIDTH);\n\n      let splitPanelItem = 0;\n      if (splitPanelToggleProps) {\n        splitPanelItem = 1;\n      }\n      return index - splitPanelItem;\n    }\n    return 0;\n  };\n\n  const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId ?? null);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n\n  return (\n    <aside\n      className={styles['drawers-desktop-triggers-container']}\n      aria-label={ariaLabels?.drawers}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: activeDrawerId,\n        })}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        {splitPanelToggleProps && (\n          <>\n            <TriggerButton\n              ariaLabel={splitPanelToggleProps.ariaLabel}\n              ariaControls={splitPanelToggleProps.controlId}\n              ariaExpanded={splitPanelToggleProps.active}\n              className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n              iconName={splitPanelToggleProps.position === 'side' ? 'view-vertical' : 'view-horizontal'}\n              onClick={() => onSplitPanelToggle?.()}\n              selected={splitPanelToggleProps.active}\n              ref={splitPanelFocusRef}\n            />\n            {hasMultipleTriggers ? <div className={styles['group-divider']}></div> : null}\n          </>\n        )}\n        {visibleItems.map(item => {\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={item.id === activeDrawerId}\n              ariaControls={activeDrawerId === item.id ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                !toolsOnlyMode && testutilStyles['drawers-trigger'],\n                item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n              )}\n              iconName={item.trigger.iconName}\n              iconSvg={item.trigger.iconSvg}\n              key={item.id}\n              onClick={() => onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null)}\n              ref={item.id === previousActiveDrawerId.current ? drawersFocusRef : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems}\n            ariaLabel={overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n              <TriggerButton\n                ref={triggerRef}\n                ariaLabel={ariaLabel}\n                ariaExpanded={ariaExpanded}\n                badge={overflowMenuHasBadge}\n                className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n                iconName=\"ellipsis\"\n                onClick={onClick}\n              />\n            )}\n            onItemClick={event => onActiveDrawerChange?.(event.detail.id)}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}

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

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
-import { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';
+import { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { ToolbarSlot } from '../skeleton/slot-wrappers';
 import { DrawerTriggers } from './drawer-triggers';
@@ -77,11 +77,11 @@ toolbarProps = {}, }) {
             insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,
         } },
         React.createElement("div", { className: styles['toolbar-container'] },
-            hasNavigation && !navigationOpen && (React.createElement("nav", { className: clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed']) },
-                React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(true), ref: navigationFocusRef, selected: navigationOpen }))),
+            hasNavigation && (React.createElement("nav", { className: clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed']) },
+                React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(!navigationOpen), ref: navigationFocusRef, selected: navigationOpen }))),
             (breadcrumbs || discoveredBreadcrumbs) && (React.createElement("div", { className: clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) },
                 breadcrumbs,
-                discoveredBreadcrumbs && (React.createElement(InternalBreadcrumbGroup, Object.assign({}, discoveredBreadcrumbs, { __injectAnalyticsComponentMetadata: true }))))),
+                discoveredBreadcrumbs && (React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { __injectAnalyticsComponentMetadata: true }))))),
             ((drawers && drawers.length > 0) || (hasSplitPanel && (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed))) && (React.createElement("span", { className: clsx(styles['universal-toolbar-drawers']) },
                 React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: drawers !== null && drawers !== void 0 ? drawers : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle }))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n  return {\n    ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n    activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n    drawers: toolbarProps.drawers ?? legacyProps.drawers,\n    drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n    onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n    hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n    navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n    navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n    onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n    hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n    splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n    splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n      ...legacyProps.splitPanelToggleConfig,\n      active: legacyProps.splitPanelOpen,\n      controlId: legacyProps.splitPanelControlId,\n      position: legacyProps.splitPanelPosition,\n    },\n    onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n  };\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const {\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    verticalOffsets,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    setToolbarHeight,\n  } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = convertLegacyProps(toolbarProps, appLayoutInternals);\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && !navigationOpen && (\n          <nav className={clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle?.(true)}\n              ref={navigationFocusRef}\n              selected={navigationOpen}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            {breadcrumbs}\n            {discoveredBreadcrumbs && (\n              <InternalBreadcrumbGroup {...discoveredBreadcrumbs} __injectAnalyticsComponentMetadata={true} />\n            )}\n          </div>\n        )}\n        {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <span className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n            />\n          </span>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n  return {\n    ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n    activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n    drawers: toolbarProps.drawers ?? legacyProps.drawers,\n    drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n    onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n    hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n    navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n    navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n    onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n    hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n    splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n    splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n      ...legacyProps.splitPanelToggleConfig,\n      active: legacyProps.splitPanelOpen,\n      controlId: legacyProps.splitPanelControlId,\n      position: legacyProps.splitPanelPosition,\n    },\n    onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n  };\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const {\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    verticalOffsets,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    setToolbarHeight,\n  } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = convertLegacyProps(toolbarProps, appLayoutInternals);\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && (\n          <nav className={clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle?.(!navigationOpen)}\n              ref={navigationFocusRef}\n              selected={navigationOpen}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            {breadcrumbs}\n            {discoveredBreadcrumbs && (\n              <BreadcrumbGroupImplementation {...discoveredBreadcrumbs} __injectAnalyticsComponentMetadata={true} />\n            )}\n          </div>\n        )}\n        {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <span className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n            />\n          </span>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}

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

@@ -1,18 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_1qisx_141",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_1qisx_162",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_1qisx_165",
-  "toolbar-container": "awsui_toolbar-container_1kzri_1qisx_168",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_1qisx_177",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_1qisx_181",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_1qisx_186",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_1qisx_194",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_1qisx_195",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_1qisx_241",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_1kzri_1qisx_249",
-  "has-open-drawer": "awsui_has-open-drawer_1kzri_1qisx_249",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_1qisx_241"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_1n996_141",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_1n996_162",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_1n996_165",
+  "toolbar-container": "awsui_toolbar-container_1kzri_1n996_168",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_1n996_177",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_1n996_181",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_1n996_186",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_1n996_194",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_1n996_195",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_1n996_241",
+  "group-divider": "awsui_group-divider_1kzri_1n996_250",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_1n996_241"
 };
   

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

@@ -138,7 +138,7 @@
 */
 /* 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_1qisx_141:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_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_1qisx_141:not(#\9) {
+  .awsui_universal-toolbar_1kzri_1n996_141:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_universal-toolbar_1kzri_1qisx_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_1qisx_141:not(#\9) {
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_1n996_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_1n996_141:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_universal-toolbar_1kzri_1qisx_141.awsui_disable-body-scroll_1kzri_1qisx_162:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_141.awsui_disable-body-scroll_1kzri_1n996_162:not(#\9) {
   inset-block-start: 0px;
 }
-.awsui_universal-toolbar_1kzri_1qisx_141.awsui_toolbar-hidden_1kzri_1qisx_165:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_141.awsui_toolbar-hidden_1kzri_1n996_165:not(#\9) {
   opacity: 0;
 }
-.awsui_universal-toolbar_1kzri_1qisx_141 > .awsui_toolbar-container_1kzri_1qisx_168:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_141 > .awsui_toolbar-container_1kzri_1n996_168:not(#\9) {
   block-size: 48px;
   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 auto minmax(140px, 1fr);
   grid-template-rows: 1fr;
 }
-.awsui_universal-toolbar_1kzri_1qisx_141 > .awsui_toolbar-container_1kzri_1qisx_168 > .awsui_universal-toolbar-nav_1kzri_1qisx_177:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_141 > .awsui_toolbar-container_1kzri_1n996_168 > .awsui_universal-toolbar-nav_1kzri_1n996_177:not(#\9) {
   grid-column: 1;
   padding-inline-end: var(--space-static-xxs-82cdfi, 4px);
 }
-.awsui_universal-toolbar_1kzri_1qisx_141 > .awsui_toolbar-container_1kzri_1qisx_168 > .awsui_universal-toolbar-breadcrumbs_1kzri_1qisx_181:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_141 > .awsui_toolbar-container_1kzri_1n996_168 > .awsui_universal-toolbar-breadcrumbs_1kzri_1n996_181:not(#\9) {
   grid-column: 2;
   background-color: transparent;
   flex: 1 0;
 }
-.awsui_universal-toolbar_1kzri_1qisx_141 > .awsui_toolbar-container_1kzri_1qisx_168 > .awsui_universal-toolbar-drawers_1kzri_1qisx_186:not(#\9) {
+.awsui_universal-toolbar_1kzri_1n996_141 > .awsui_toolbar-container_1kzri_1n996_168 > .awsui_universal-toolbar-drawers_1kzri_1n996_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_1qisx_194:not(#\9),
-.awsui_drawers-mobile-triggers-container_1kzri_1qisx_195:not(#\9) {
+.awsui_drawers-desktop-triggers-container_1kzri_1n996_194:not(#\9),
+.awsui_drawers-mobile-triggers-container_1kzri_1n996_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_1qisx_241:not(#\9) {
+.awsui_drawers-trigger-content_1kzri_1n996_241:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: flex;
@@ -247,15 +247,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   gap: var(--space-xs-zb16t3, 8px);
   justify-content: flex-end;
 }
-.awsui_drawers-trigger-content_1kzri_1qisx_241:not(#\9):not(.awsui_has-multiple-triggers_1kzri_1qisx_249).awsui_has-open-drawer_1kzri_1qisx_249 {
-  opacity: 0;
-}
-.awsui_drawers-trigger-content_1kzri_1qisx_241:not(#\9):not(.awsui_has-multiple-triggers_1kzri_1qisx_249):not(.awsui_has-open-drawer_1kzri_1qisx_249) {
-  opacity: 1;
+
+.awsui_group-divider_1kzri_1n996_250:not(#\9) {
+  border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-1zovx9, #b6bec9);
+  block-size: 60%;
 }
 
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_1kzri_1qisx_241:not(#\9) {
+  .awsui_drawers-trigger_1kzri_1n996_241:not(#\9) {
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -2,18 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_1qisx_141",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_1qisx_162",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_1qisx_165",
-  "toolbar-container": "awsui_toolbar-container_1kzri_1qisx_168",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_1qisx_177",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_1qisx_181",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_1qisx_186",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_1qisx_194",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_1qisx_195",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_1qisx_241",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_1kzri_1qisx_249",
-  "has-open-drawer": "awsui_has-open-drawer_1kzri_1qisx_249",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_1qisx_241"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_1n996_141",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_1n996_162",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_1n996_165",
+  "toolbar-container": "awsui_toolbar-container_1kzri_1n996_168",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_1n996_177",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_1n996_181",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_1n996_186",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_1n996_194",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_1n996_195",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_1n996_241",
+  "group-divider": "awsui_group-divider_1kzri_1n996_250",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_1n996_241"
 };
   

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

@@ -8,11 +8,17 @@ export interface TriggerButtonProps {
     iconSvg?: React.ReactNode;
     ariaExpanded: boolean | undefined;
     ariaControls?: string;
+    disabled?: boolean;
+    /**
+     * Ovewrwrites any internal testIds when provided
+     */
     testId?: string;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * If button is selected. Used only for desktop and applies a selected class
+     */
     selected?: boolean;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
     badge?: boolean;
-    disabled?: boolean;
     highContrastHeader?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<TriggerButtonProps & React.RefAttributes<ButtonProps.Ref>>;

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,KAAK,MAAM,OAAO,CAAC;AAG1B,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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;;AAiDD,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,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"}

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

@@ -4,14 +4,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Icon from '../../../../icon/internal';
 import styles from './styles.css.js';
-function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded, ariaControls, onClick, testId, badge, selected, disabled, }, ref) {
-    return (React.createElement("div", { className: styles['trigger-wrapper'] },
+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, {
                 [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']) },
-                React.createElement(Icon, { name: iconName, svg: iconSvg }))),
+            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 })));
 }
 export default React.forwardRef(TriggerButton);