@cloudscape-design/components-themeable 3.0.984 → 3.0.986

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

@@ -150,7 +150,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_gwump_153:not(#\9) {
+.awsui_root_7nfqu_sgvgx_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -190,92 +190,98 @@ 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_gwump_153:not(#\9) {
+  .awsui_root_7nfqu_sgvgx_153:not(#\9) {
     grid-template-areas: "toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "navigation .         notifications    .         sideSplitPanel  tools    global-tools" "navigation .             main         .         sideSplitPanel  tools    global-tools";
     grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-xgujsu)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
-  .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-default_7nfqu_gwump_197:not(#\9) {
+  .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-default_7nfqu_sgvgx_197:not(#\9) {
     --awsui-max-content-width-xgujsu: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202:not(#\9) {
+  .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202:not(#\9) {
     --awsui-max-content-width-xgujsu: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202:not(#\9) {
+  .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202:not(#\9) {
     --awsui-max-content-width-xgujsu: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_gwump_153.awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202:not(#\9) {
+  .awsui_root_7nfqu_sgvgx_153.awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202:not(#\9) {
     --awsui-max-content-width-xgujsu: 2160px;
   }
 }
+@media (min-width: 689px) {
+  .awsui_root_7nfqu_sgvgx_153.awsui_drawer-expanded-mode_7nfqu_sgvgx_217:not(#\9) {
+    grid-template-columns: 0 0 0 0 0 0 auto;
+  }
+}
 
-.awsui_navigation_7nfqu_gwump_217:not(#\9),
-.awsui_tools_7nfqu_gwump_218:not(#\9),
-.awsui_global-tools_7nfqu_gwump_219:not(#\9) {
+.awsui_navigation_7nfqu_sgvgx_222:not(#\9),
+.awsui_tools_7nfqu_sgvgx_223:not(#\9),
+.awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-mvmryi, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_gwump_217:not(#\9),
-  .awsui_tools_7nfqu_gwump_218:not(#\9),
-  .awsui_global-tools_7nfqu_gwump_219:not(#\9) {
+  .awsui_navigation_7nfqu_sgvgx_222:not(#\9),
+  .awsui_tools_7nfqu_sgvgx_223:not(#\9),
+  .awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
     inline-size: 100%;
   }
 }
 
-.awsui_navigation_7nfqu_gwump_217:not(#\9) {
+.awsui_navigation_7nfqu_sgvgx_222:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_gwump_217:not(#\9) {
+  .awsui_navigation_7nfqu_sgvgx_222:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-xgujsu);
     border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_gwump_217:not(#\9) {
+  .awsui_navigation_7nfqu_sgvgx_222:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_gwump_218:not(#\9) {
+  .awsui_tools_7nfqu_sgvgx_223:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_gwump_218:not(#\9):not(:has(> [data-testid])) {
+  .awsui_tools_7nfqu_sgvgx_223:not(#\9):not(:has(> [data-testid])) {
     inline-size: var(--awsui-tools-width-xgujsu);
   }
-  .awsui_tools_7nfqu_gwump_218:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_gwump_257 {
+  .awsui_tools_7nfqu_sgvgx_223:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_sgvgx_262 {
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_gwump_219:not(#\9) {
+  .awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
     display: flex;
     grid-area: global-tools;
+    justify-content: flex-end;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_gwump_270:not(#\9) {
+  .awsui_split-panel-side_7nfqu_sgvgx_276:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_gwump_277:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_sgvgx_283:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -283,72 +289,76 @@ 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_gwump_277:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_sgvgx_283:not(#\9) {
     grid-column: 2/5;
   }
 }
 
-.awsui_panel-hidden_7nfqu_gwump_290:not(#\9) {
+.awsui_panel-hidden_7nfqu_sgvgx_296:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_gwump_290.awsui_navigation_7nfqu_gwump_217:not(#\9), .awsui_panel-hidden_7nfqu_gwump_290.awsui_tools_7nfqu_gwump_218:not(#\9), .awsui_panel-hidden_7nfqu_gwump_290.awsui_global-tools_7nfqu_gwump_219:not(#\9) {
+.awsui_panel-hidden_7nfqu_sgvgx_296.awsui_navigation_7nfqu_sgvgx_222:not(#\9), .awsui_panel-hidden_7nfqu_sgvgx_296.awsui_tools_7nfqu_sgvgx_223:not(#\9), .awsui_panel-hidden_7nfqu_sgvgx_296.awsui_global-tools_7nfqu_sgvgx_224:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_gwump_300:not(#\9) {
+.awsui_toolbar-container_7nfqu_sgvgx_306:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-gb61sp, #d5dbdb);
 }
 
-.awsui_notifications-container_7nfqu_gwump_306:not(#\9) {
+.awsui_notifications-container_7nfqu_sgvgx_312:not(#\9) {
   grid-area: notifications;
 }
 
-.awsui_notifications-background_7nfqu_gwump_310:not(#\9) {
+.awsui_notifications-background_7nfqu_sgvgx_316:not(#\9) {
   background: var(--color-background-layout-main-nu5m0g, #f2f3f3);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_gwump_310:not(#\9) {
+  .awsui_notifications-background_7nfqu_sgvgx_316:not(#\9) {
     grid-column: 2/5;
   }
 }
 
-.awsui_main-landmark_7nfqu_gwump_321:not(#\9) {
+.awsui_main-landmark_7nfqu_sgvgx_327:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_gwump_321:not(#\9) {
+.awsui_main_7nfqu_sgvgx_327:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-gjhvjd, 12px);
   margin-block-end: var(--space-layout-content-bottom-iu1izz, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_gwump_330:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_sgvgx_336:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_gwump_330:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_sgvgx_336:not(#\9) {
     grid-column: 2/5;
   }
 }
 
-.awsui_content-header_7nfqu_gwump_340:not(#\9) {
+.awsui_content-header_7nfqu_sgvgx_346:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
 }
 
-.awsui_content_7nfqu_gwump_340:not(#\9) {
+.awsui_content_7nfqu_sgvgx_346:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_gwump_350 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_sgvgx_356 *:not(#\9) {
     visibility: hidden;
   }
+}
+
+.awsui_hidden_7nfqu_sgvgx_361:not(#\9) {
+  display: none;
 }

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

@@ -2,24 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_gwump_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_gwump_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_gwump_202",
-  "navigation": "awsui_navigation_7nfqu_gwump_217",
-  "tools": "awsui_tools_7nfqu_gwump_218",
-  "global-tools": "awsui_global-tools_7nfqu_gwump_219",
-  "tools-open": "awsui_tools-open_7nfqu_gwump_257",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_gwump_270",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_gwump_277",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_gwump_290",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_gwump_300",
-  "notifications-container": "awsui_notifications-container_7nfqu_gwump_306",
-  "notifications-background": "awsui_notifications-background_7nfqu_gwump_310",
-  "main-landmark": "awsui_main-landmark_7nfqu_gwump_321",
-  "main": "awsui_main_7nfqu_gwump_321",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_gwump_330",
-  "content-header": "awsui_content-header_7nfqu_gwump_340",
-  "content": "awsui_content_7nfqu_gwump_340",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_gwump_350"
+  "root": "awsui_root_7nfqu_sgvgx_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_sgvgx_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_sgvgx_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_sgvgx_217",
+  "navigation": "awsui_navigation_7nfqu_sgvgx_222",
+  "tools": "awsui_tools_7nfqu_sgvgx_223",
+  "global-tools": "awsui_global-tools_7nfqu_sgvgx_224",
+  "tools-open": "awsui_tools-open_7nfqu_sgvgx_262",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_sgvgx_276",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_sgvgx_283",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_sgvgx_296",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_sgvgx_306",
+  "notifications-container": "awsui_notifications-container_7nfqu_sgvgx_312",
+  "notifications-background": "awsui_notifications-background_7nfqu_sgvgx_316",
+  "main-landmark": "awsui_main-landmark_7nfqu_sgvgx_327",
+  "main": "awsui_main_7nfqu_sgvgx_327",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_sgvgx_336",
+  "content-header": "awsui_content-header_7nfqu_sgvgx_346",
+  "content": "awsui_content_7nfqu_sgvgx_346",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_sgvgx_356",
+  "hidden": "awsui_hidden_7nfqu_sgvgx_361"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts

@@ -19,6 +19,8 @@ interface DrawerTriggersProps {
     globalDrawersFocusControl?: FocusControlMultipleStates;
     globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;
     onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;
+    expandedDrawerId?: string | null;
+    setExpandedDrawerId: (value: string | null) => void;
     splitPanelOpen?: boolean;
     splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];
     splitPanelToggleProps: SplitPanelToggleProps | undefined;
@@ -26,6 +28,6 @@ interface DrawerTriggersProps {
     onSplitPanelToggle: (() => void) | undefined;
     disabled: boolean;
 }
-export declare function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }: DrawerTriggersProps): JSX.Element | null;
+export declare function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, }: DrawerTriggersProps): JSX.Element | null;
 export {};
 //# sourceMappingURL=drawer-triggers.d.ts.map

package/lib/internal/template/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;AAC9E,OAAO,EAAE,cAAc,EAAmB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAOtF,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,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE9F,sBAAsB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,aAAa,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpD,2BAA2B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAEpF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACtE,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;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,kBAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,aAAa,EACb,yBAAyB,EACzB,2BAA2B,GAC5B,EAAE,mBAAmB,sBA+LrB"}
+{"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;AAC9E,OAAO,EAAE,cAAc,EAAmB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAOtF,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,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE9F,sBAAsB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,aAAa,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpD,2BAA2B,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACpF,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACtE,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;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,kBAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,aAAa,EACb,yBAAyB,EACzB,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,GACpB,EAAE,mBAAmB,sBA0NrB"}

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

@@ -11,7 +11,7 @@ import TriggerButton from './trigger-button';
 import splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, }) {
+export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelOpen, splitPanelPosition = 'bottom', splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, disabled, activeGlobalDrawersIds, globalDrawers, globalDrawersFocusControl, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, }) {
     const isMobile = useMobile();
     const hasMultipleTriggers = drawers.length > 1;
     const previousActiveLocalDrawerId = useRef(activeDrawerId);
@@ -49,29 +49,56 @@ export function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFoc
     const globalDrawersStartIndex = drawers.length;
     const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);
     const splitPanelResolvedPosition = splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.position;
+    const exitExpandedMode = () => {
+        if (setExpandedDrawerId) {
+            setExpandedDrawerId(null);
+        }
+    };
     return (React.createElement("aside", { className: styles[`drawers-${isMobile ? 'mobile' : 'desktop'}-triggers-container`], "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, ref: triggersContainerRef, role: "region" },
         React.createElement("div", { className: styles['drawers-trigger-content'], "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, role: "toolbar", "aria-orientation": "horizontal" },
             splitPanelToggleProps && (React.createElement(React.Fragment, null,
-                React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle(), selected: splitPanelToggleProps.active, ref: splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined, hasTooltip: true, isMobile: isMobile, isForSplitPanel: true, disabled: disabled }),
+                React.createElement(TriggerButton, { ariaLabel: splitPanelToggleProps.ariaLabel, ariaControls: splitPanelToggleProps.controlId, ariaExpanded: !expandedDrawerId && splitPanelToggleProps.active, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], splitPanelTestUtilStyles['open-button']), iconName: splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal', onClick: () => {
+                        exitExpandedMode();
+                        if (!!expandedDrawerId && splitPanelToggleProps.active) {
+                            return;
+                        }
+                        onSplitPanelToggle === null || onSplitPanelToggle === void 0 ? void 0 : onSplitPanelToggle();
+                    }, selected: !expandedDrawerId && splitPanelToggleProps.active, ref: splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined, hasTooltip: true, isMobile: isMobile, isForSplitPanel: true, disabled: disabled }),
                 hasMultipleTriggers ? React.createElement("div", { className: styles['group-divider'] }) : null)),
             visibleItems.slice(0, globalDrawersStartIndex).map(item => {
                 var _a, _b;
                 const isForPreviousActiveDrawer = (previousActiveLocalDrawerId === null || previousActiveLocalDrawerId === void 0 ? void 0 : previousActiveLocalDrawerId.current) === item.id;
-                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, { initiatedByUserAction: true }), ref: item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined, selected: item.id === activeDrawerId, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_b = item.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
+                const selected = !expandedDrawerId && item.id === activeDrawerId;
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: selected, 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: () => {
+                        exitExpandedMode();
+                        if (!!expandedDrawerId && activeDrawerId === item.id) {
+                            return;
+                        }
+                        onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true });
+                    }, ref: item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined, selected: selected, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_b = item.ariaLabels) === null || _b === void 0 ? void 0 : _b.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
             }),
             globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (React.createElement("div", { className: styles['group-divider'] })),
             visibleItems.slice(globalDrawersStartIndex).map(item => {
                 var _a, _b, _c;
                 const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds === null || previousActiveGlobalDrawersIds === void 0 ? void 0 : previousActiveGlobalDrawersIds.current.includes(item.id);
-                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: activeGlobalDrawersIds.includes(item.id), ariaControls: activeGlobalDrawersIds.includes(item.id) ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                const selected = activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId);
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: selected, ariaControls: selected ? item.id : undefined, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                        exitExpandedMode();
+                        if (!!expandedDrawerId && item.id !== expandedDrawerId && activeGlobalDrawersIds.includes(item.id)) {
+                            return;
+                        }
                         onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(item.id, { initiatedByUserAction: true });
-                    }, ref: (_b = globalDrawersFocusControl === null || globalDrawersFocusControl === void 0 ? void 0 : globalDrawersFocusControl.refs[item.id]) === null || _b === void 0 ? void 0 : _b.toggle, selected: activeGlobalDrawersIds.includes(item.id), badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_c = item.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
+                    }, ref: (_b = globalDrawersFocusControl === null || globalDrawersFocusControl === void 0 ? void 0 : globalDrawersFocusControl.refs[item.id]) === null || _b === void 0 ? void 0 : _b.toggle, selected: selected, badge: item.badge, testId: `awsui-app-layout-trigger-${item.id}`, hasTooltip: true, hasOpenDrawer: hasOpenDrawer, tooltipText: (_c = item.ariaLabels) === null || _c === void 0 ? void 0 : _c.drawerName, isForPreviousActiveDrawer: isForPreviousActiveDrawer, isMobile: isMobile, disabled: disabled }));
             }),
-            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems.map(item => (Object.assign(Object.assign({}, item), { active: activeGlobalDrawersIds.includes(item.id) }))), ariaLabel: overflowMenuHasBadge ? ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflowWithBadge : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflow, customTriggerBuilder: ({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {
+            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems.map(item => (Object.assign(Object.assign({}, item), { active: activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId) }))), ariaLabel: overflowMenuHasBadge ? ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflowWithBadge : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflow, customTriggerBuilder: ({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {
                     return (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testutilStyles['drawers-trigger-global'], testUtilsClass), iconName: "ellipsis", onClick: onClick, disabled: disabled }));
                 }, onItemClick: event => {
                     const id = event.detail.id;
+                    exitExpandedMode();
                     if (globalDrawers.find(drawer => drawer.id === id)) {
+                        if (!!expandedDrawerId && id !== expandedDrawerId && activeGlobalDrawersIds.includes(id)) {
+                            return;
+                        }
                         onActiveGlobalDrawersChange === null || onActiveGlobalDrawersChange === void 0 ? void 0 : onActiveGlobalDrawersChange(id, { initiatedByUserAction: true });
                     }
                     else {

package/lib/internal/template/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 { OnChangeParams, TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } 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, params: OnChangeParams) => void) | undefined;\n\n  activeGlobalDrawersIds: ReadonlyArray<string>;\n  globalDrawersFocusControl?: FocusControlMultipleStates;\n  globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;\n  onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;\n\n  splitPanelOpen?: boolean;\n  splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];\n  splitPanelToggleProps: SplitPanelToggleProps | undefined;\n  splitPanelFocusRef: React.Ref<Focusable> | undefined;\n  onSplitPanelToggle: (() => void) | undefined;\n  disabled: boolean;\n}\n\nexport function DrawerTriggers({\n  ariaLabels,\n  activeDrawerId,\n  drawers,\n  drawersFocusRef,\n  onActiveDrawerChange,\n  splitPanelOpen,\n  splitPanelPosition = 'bottom',\n  splitPanelFocusRef,\n  splitPanelToggleProps,\n  onSplitPanelToggle,\n  disabled,\n  activeGlobalDrawersIds,\n  globalDrawers,\n  globalDrawersFocusControl,\n  onActiveGlobalDrawersChange,\n}: DrawerTriggersProps) {\n  const isMobile = useMobile();\n  const hasMultipleTriggers = drawers.length > 1;\n  const previousActiveLocalDrawerId = useRef(activeDrawerId);\n  const previousActiveGlobalDrawersIds = useRef(activeGlobalDrawersIds);\n  const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n  if (!drawers.length && !globalDrawers.length && !splitPanelToggleProps) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveLocalDrawerId.current = activeDrawerId;\n  }\n\n  if (activeGlobalDrawersIds.length) {\n    previousActiveGlobalDrawersIds.current = activeGlobalDrawersIds;\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 indexOfOverflowItem = getIndexOfOverflowItem();\n\n  const { visibleItems, overflowItems } = splitItems(\n    [...drawers, ...globalDrawers],\n    indexOfOverflowItem,\n    activeDrawerId ?? null\n  );\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const globalDrawersStartIndex = drawers.length;\n  const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);\n  const splitPanelResolvedPosition = splitPanelToggleProps?.position;\n\n  return (\n    <aside\n      className={styles[`drawers-${isMobile ? 'mobile' : 'desktop'}-triggers-container`]}\n      aria-label={ariaLabels?.drawers}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={styles['drawers-trigger-content']}\n        aria-label={ariaLabels?.drawers}\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(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                splitPanelTestUtilStyles['open-button']\n              )}\n              iconName={splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal'}\n              onClick={() => onSplitPanelToggle?.()}\n              selected={splitPanelToggleProps.active}\n              ref={splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined}\n              hasTooltip={true}\n              isMobile={isMobile}\n              isForSplitPanel={true}\n              disabled={disabled}\n            />\n            {hasMultipleTriggers ? <div className={styles['group-divider']}></div> : null}\n          </>\n        )}\n        {visibleItems.slice(0, globalDrawersStartIndex).map(item => {\n          const isForPreviousActiveDrawer = previousActiveLocalDrawerId?.current === item.id;\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={() =>\n                onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true })\n              }\n              ref={item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined}\n              selected={item.id === activeDrawerId}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              hasTooltip={true}\n              hasOpenDrawer={hasOpenDrawer}\n              tooltipText={item.ariaLabels?.drawerName}\n              isForPreviousActiveDrawer={isForPreviousActiveDrawer}\n              isMobile={isMobile}\n              disabled={disabled}\n            />\n          );\n        })}\n        {globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (\n          <div className={styles['group-divider']}></div>\n        )}\n        {visibleItems.slice(globalDrawersStartIndex).map(item => {\n          const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds?.current.includes(item.id);\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={activeGlobalDrawersIds.includes(item.id)}\n              ariaControls={activeGlobalDrawersIds.includes(item.id) ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                testutilStyles['drawers-trigger-global']\n              )}\n              iconName={item.trigger!.iconName}\n              iconSvg={item.trigger!.iconSvg}\n              key={item.id}\n              onClick={() => {\n                onActiveGlobalDrawersChange?.(item.id, { initiatedByUserAction: true });\n              }}\n              ref={globalDrawersFocusControl?.refs[item.id]?.toggle}\n              selected={activeGlobalDrawersIds.includes(item.id)}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              hasTooltip={true}\n              hasOpenDrawer={hasOpenDrawer}\n              tooltipText={item.ariaLabels?.drawerName}\n              isForPreviousActiveDrawer={isForPreviousActiveDrawer}\n              isMobile={isMobile}\n              disabled={disabled}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems.map(item => ({\n              ...item,\n              active: activeGlobalDrawersIds.includes(item.id),\n            }))}\n            ariaLabel={overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {\n              return (\n                <TriggerButton\n                  ref={triggerRef}\n                  ariaLabel={ariaLabel}\n                  ariaExpanded={ariaExpanded}\n                  badge={overflowMenuHasBadge}\n                  className={clsx(\n                    styles['drawers-trigger'],\n                    testutilStyles['drawers-trigger'],\n                    testutilStyles['drawers-trigger-global'],\n                    testUtilsClass\n                  )}\n                  iconName=\"ellipsis\"\n                  onClick={onClick}\n                  disabled={disabled}\n                />\n              );\n            }}\n            onItemClick={event => {\n              const id = event.detail.id;\n              if (globalDrawers.find(drawer => drawer.id === id)) {\n                onActiveGlobalDrawersChange?.(id, { initiatedByUserAction: true });\n              } else {\n                onActiveDrawerChange?.(event.detail.id, { initiatedByUserAction: true });\n              }\n            }}\n            globalDrawersStartIndex={globalDrawersStartIndex - indexOfOverflowItem}\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 { OnChangeParams, TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } 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, params: OnChangeParams) => void) | undefined;\n\n  activeGlobalDrawersIds: ReadonlyArray<string>;\n  globalDrawersFocusControl?: FocusControlMultipleStates;\n  globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;\n  onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;\n  expandedDrawerId?: string | null;\n  setExpandedDrawerId: (value: string | null) => void;\n\n  splitPanelOpen?: boolean;\n  splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];\n  splitPanelToggleProps: SplitPanelToggleProps | undefined;\n  splitPanelFocusRef: React.Ref<Focusable> | undefined;\n  onSplitPanelToggle: (() => void) | undefined;\n  disabled: boolean;\n}\n\nexport function DrawerTriggers({\n  ariaLabels,\n  activeDrawerId,\n  drawers,\n  drawersFocusRef,\n  onActiveDrawerChange,\n  splitPanelOpen,\n  splitPanelPosition = 'bottom',\n  splitPanelFocusRef,\n  splitPanelToggleProps,\n  onSplitPanelToggle,\n  disabled,\n  activeGlobalDrawersIds,\n  globalDrawers,\n  globalDrawersFocusControl,\n  onActiveGlobalDrawersChange,\n  expandedDrawerId,\n  setExpandedDrawerId,\n}: DrawerTriggersProps) {\n  const isMobile = useMobile();\n  const hasMultipleTriggers = drawers.length > 1;\n  const previousActiveLocalDrawerId = useRef(activeDrawerId);\n  const previousActiveGlobalDrawersIds = useRef(activeGlobalDrawersIds);\n  const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n  if (!drawers.length && !globalDrawers.length && !splitPanelToggleProps) {\n    return null;\n  }\n\n  if (activeDrawerId) {\n    previousActiveLocalDrawerId.current = activeDrawerId;\n  }\n\n  if (activeGlobalDrawersIds.length) {\n    previousActiveGlobalDrawersIds.current = activeGlobalDrawersIds;\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 indexOfOverflowItem = getIndexOfOverflowItem();\n\n  const { visibleItems, overflowItems } = splitItems(\n    [...drawers, ...globalDrawers],\n    indexOfOverflowItem,\n    activeDrawerId ?? null\n  );\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n  const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n  const globalDrawersStartIndex = drawers.length;\n  const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);\n  const splitPanelResolvedPosition = splitPanelToggleProps?.position;\n\n  const exitExpandedMode = () => {\n    if (setExpandedDrawerId) {\n      setExpandedDrawerId(null);\n    }\n  };\n\n  return (\n    <aside\n      className={styles[`drawers-${isMobile ? 'mobile' : 'desktop'}-triggers-container`]}\n      aria-label={ariaLabels?.drawers}\n      ref={triggersContainerRef}\n      role=\"region\"\n    >\n      <div\n        className={styles['drawers-trigger-content']}\n        aria-label={ariaLabels?.drawers}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        {splitPanelToggleProps && (\n          <>\n            <TriggerButton\n              ariaLabel={splitPanelToggleProps.ariaLabel}\n              ariaControls={splitPanelToggleProps.controlId}\n              ariaExpanded={!expandedDrawerId && splitPanelToggleProps.active}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                splitPanelTestUtilStyles['open-button']\n              )}\n              iconName={splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal'}\n              onClick={() => {\n                exitExpandedMode();\n                if (!!expandedDrawerId && splitPanelToggleProps.active) {\n                  return;\n                }\n                onSplitPanelToggle?.();\n              }}\n              selected={!expandedDrawerId && splitPanelToggleProps.active}\n              ref={splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined}\n              hasTooltip={true}\n              isMobile={isMobile}\n              isForSplitPanel={true}\n              disabled={disabled}\n            />\n            {hasMultipleTriggers ? <div className={styles['group-divider']}></div> : null}\n          </>\n        )}\n        {visibleItems.slice(0, globalDrawersStartIndex).map(item => {\n          const isForPreviousActiveDrawer = previousActiveLocalDrawerId?.current === item.id;\n          const selected = !expandedDrawerId && item.id === activeDrawerId;\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={selected}\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={() => {\n                exitExpandedMode();\n                if (!!expandedDrawerId && activeDrawerId === item.id) {\n                  return;\n                }\n                onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true });\n              }}\n              ref={item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined}\n              selected={selected}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              hasTooltip={true}\n              hasOpenDrawer={hasOpenDrawer}\n              tooltipText={item.ariaLabels?.drawerName}\n              isForPreviousActiveDrawer={isForPreviousActiveDrawer}\n              isMobile={isMobile}\n              disabled={disabled}\n            />\n          );\n        })}\n        {globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (\n          <div className={styles['group-divider']}></div>\n        )}\n        {visibleItems.slice(globalDrawersStartIndex).map(item => {\n          const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds?.current.includes(item.id);\n          const selected =\n            activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId);\n          return (\n            <TriggerButton\n              ariaLabel={item.ariaLabels?.triggerButton}\n              ariaExpanded={selected}\n              ariaControls={selected ? item.id : undefined}\n              className={clsx(\n                styles['drawers-trigger'],\n                testutilStyles['drawers-trigger'],\n                testutilStyles['drawers-trigger-global']\n              )}\n              iconName={item.trigger!.iconName}\n              iconSvg={item.trigger!.iconSvg}\n              key={item.id}\n              onClick={() => {\n                exitExpandedMode();\n                if (!!expandedDrawerId && item.id !== expandedDrawerId && activeGlobalDrawersIds.includes(item.id)) {\n                  return;\n                }\n                onActiveGlobalDrawersChange?.(item.id, { initiatedByUserAction: true });\n              }}\n              ref={globalDrawersFocusControl?.refs[item.id]?.toggle}\n              selected={selected}\n              badge={item.badge}\n              testId={`awsui-app-layout-trigger-${item.id}`}\n              hasTooltip={true}\n              hasOpenDrawer={hasOpenDrawer}\n              tooltipText={item.ariaLabels?.drawerName}\n              isForPreviousActiveDrawer={isForPreviousActiveDrawer}\n              isMobile={isMobile}\n              disabled={disabled}\n            />\n          );\n        })}\n        {overflowItems.length > 0 && (\n          <OverflowMenu\n            items={overflowItems.map(item => ({\n              ...item,\n              active: activeGlobalDrawersIds.includes(item.id) && (!expandedDrawerId || item.id === expandedDrawerId),\n            }))}\n            ariaLabel={overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow}\n            customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {\n              return (\n                <TriggerButton\n                  ref={triggerRef}\n                  ariaLabel={ariaLabel}\n                  ariaExpanded={ariaExpanded}\n                  badge={overflowMenuHasBadge}\n                  className={clsx(\n                    styles['drawers-trigger'],\n                    testutilStyles['drawers-trigger'],\n                    testutilStyles['drawers-trigger-global'],\n                    testUtilsClass\n                  )}\n                  iconName=\"ellipsis\"\n                  onClick={onClick}\n                  disabled={disabled}\n                />\n              );\n            }}\n            onItemClick={event => {\n              const id = event.detail.id;\n              exitExpandedMode();\n              if (globalDrawers.find(drawer => drawer.id === id)) {\n                if (!!expandedDrawerId && id !== expandedDrawerId && activeGlobalDrawersIds.includes(id)) {\n                  return;\n                }\n                onActiveGlobalDrawersChange?.(id, { initiatedByUserAction: true });\n              } else {\n                onActiveDrawerChange?.(event.detail.id, { initiatedByUserAction: true });\n              }\n            }}\n            globalDrawersStartIndex={globalDrawersStartIndex - indexOfOverflowItem}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts

@@ -24,6 +24,8 @@ export interface ToolbarProps {
     globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
     activeGlobalDrawersIds?: ReadonlyArray<string>;
     onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;
+    expandedDrawerId?: string | null;
+    setExpandedDrawerId?: (value: string | null) => void;
 }
 export interface AppLayoutToolbarImplementationProps {
     appLayoutInternals: AppLayoutInternals;

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAChG;AAED,MAAM,WAAW,mCAAmC;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eA2IrC;AAED,eAAO,MAAM,gCAAgC,uGAG5C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAE/F,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,mCAAmC;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eAwJrC;AAED,eAAO,MAAM,gCAAgC,uGAG5C,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js

@@ -17,9 +17,10 @@ export function AppLayoutToolbarImplementation({ appLayoutInternals,
 toolbarProps = {}, }) {
     var _a, _b, _c;
     const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, toolbarState, setToolbarState, setToolbarHeight, } = appLayoutInternals;
-    const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, globalDrawersFocusControl, globalDrawers, activeGlobalDrawersIds, onActiveGlobalDrawersChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, } = toolbarProps;
+    const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, globalDrawersFocusControl, globalDrawers, activeGlobalDrawersIds, onActiveGlobalDrawersChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, expandedDrawerId, setExpandedDrawerId, } = toolbarProps;
     // TODO: expose configuration property
     const pinnedToolbar = true;
+    const drawerExpandedMode = !!expandedDrawerId;
     const ref = useRef(null);
     useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
     useEffect(() => {
@@ -75,11 +76,19 @@ toolbarProps = {}, }) {
         } },
         React.createElement("div", { className: styles['toolbar-container'] },
             hasNavigation && (React.createElement("nav", Object.assign({}, navLandmarkAttributes, { className: clsx(styles['universal-toolbar-nav']) }),
-                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, disabled: anyPanelOpenInMobile }))),
+                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: () => {
+                        if (setExpandedDrawerId) {
+                            setExpandedDrawerId(null);
+                        }
+                        if (navigationOpen) {
+                            return;
+                        }
+                        onNavigationToggle === null || onNavigationToggle === void 0 ? void 0 : onNavigationToggle(!navigationOpen);
+                    }, ref: navigationFocusRef, selected: !drawerExpandedMode && navigationOpen, disabled: anyPanelOpenInMobile }))),
             (breadcrumbs || discoveredBreadcrumbs) && (React.createElement("div", { className: clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) },
                 React.createElement(BreadcrumbsSlot, { ownBreadcrumbs: appLayoutInternals.breadcrumbs, discoveredBreadcrumbs: appLayoutInternals.discoveredBreadcrumbs }))),
             ((drawers === null || drawers === void 0 ? void 0 : drawers.length) || (globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.length) || (hasSplitPanel && (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed))) && (React.createElement("div", { className: clsx(styles['universal-toolbar-drawers']) },
-                React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: (_b = drawers === null || drawers === void 0 ? void 0 : drawers.filter(item => !!item.trigger)) !== null && _b !== void 0 ? _b : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle, disabled: anyPanelOpenInMobile, globalDrawersFocusControl: globalDrawersFocusControl, globalDrawers: (_c = globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.filter(item => !!item.trigger)) !== null && _c !== void 0 ? _c : [], activeGlobalDrawersIds: activeGlobalDrawersIds !== null && activeGlobalDrawersIds !== void 0 ? activeGlobalDrawersIds : [], onActiveGlobalDrawersChange: onActiveGlobalDrawersChange }))))));
+                React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null, drawers: (_b = drawers === null || drawers === void 0 ? void 0 : drawers.filter(item => !!item.trigger)) !== null && _b !== void 0 ? _b : [], drawersFocusRef: drawersFocusRef, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: (splitPanelToggleProps === null || splitPanelToggleProps === void 0 ? void 0 : splitPanelToggleProps.displayed) ? splitPanelToggleProps : undefined, splitPanelFocusRef: splitPanelFocusRef, onSplitPanelToggle: onSplitPanelToggle, disabled: anyPanelOpenInMobile, globalDrawersFocusControl: globalDrawersFocusControl, globalDrawers: (_c = globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.filter(item => !!item.trigger)) !== null && _c !== void 0 ? _c : [], activeGlobalDrawersIds: activeGlobalDrawersIds !== null && activeGlobalDrawersIds !== void 0 ? activeGlobalDrawersIds : [], onActiveGlobalDrawersChange: onActiveGlobalDrawersChange, expandedDrawerId: expandedDrawerId, setExpandedDrawerId: setExpandedDrawerId }))))));
 }
 export const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation, ToolbarSkeleton);
 //# sourceMappingURL=index.js.map

package/lib/internal/template/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 { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\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  globalDrawersFocusControl?: FocusControlMultipleStates;\n  onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n  globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  activeGlobalDrawersIds?: ReadonlyArray<string>;\n  onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\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    globalDrawersFocusControl,\n    globalDrawers,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = toolbarProps;\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 anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n  useEffect(() => {\n    if (anyPanelOpenInMobile) {\n      document.body.classList.add(styles['block-body-scroll']);\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n    return () => {\n      document.body.classList.remove(styles['block-body-scroll']);\n    };\n  }, [anyPanelOpenInMobile]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n  const navLandmarkAttributes = navigationOpen\n    ? { role: 'presentation' }\n    : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\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 {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\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              disabled={anyPanelOpenInMobile}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            <BreadcrumbsSlot\n              ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n              discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n            />\n          </div>\n        )}\n        {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <div className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers?.filter(item => !!item.trigger) ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n              disabled={anyPanelOpenInMobile}\n              globalDrawersFocusControl={globalDrawersFocusControl}\n              globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n              activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n              onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n            />\n          </div>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n  AppLayoutToolbarImplementation,\n  ToolbarSkeleton\n);\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 { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\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  globalDrawersFocusControl?: FocusControlMultipleStates;\n  onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n  globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  activeGlobalDrawersIds?: ReadonlyArray<string>;\n  onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n\n  expandedDrawerId?: string | null;\n  setExpandedDrawerId?: (value: string | null) => void;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\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    globalDrawersFocusControl,\n    globalDrawers,\n    activeGlobalDrawersIds,\n    onActiveGlobalDrawersChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n    expandedDrawerId,\n    setExpandedDrawerId,\n  } = toolbarProps;\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const drawerExpandedMode = !!expandedDrawerId;\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 anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n  useEffect(() => {\n    if (anyPanelOpenInMobile) {\n      document.body.classList.add(styles['block-body-scroll']);\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n    return () => {\n      document.body.classList.remove(styles['block-body-scroll']);\n    };\n  }, [anyPanelOpenInMobile]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n  const navLandmarkAttributes = navigationOpen\n    ? { role: 'presentation' }\n    : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\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 {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => {\n                if (setExpandedDrawerId) {\n                  setExpandedDrawerId(null);\n                }\n                if (navigationOpen) {\n                  return;\n                }\n                onNavigationToggle?.(!navigationOpen);\n              }}\n              ref={navigationFocusRef}\n              selected={!drawerExpandedMode && navigationOpen}\n              disabled={anyPanelOpenInMobile}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            <BreadcrumbsSlot\n              ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n              discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n            />\n          </div>\n        )}\n        {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <div className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers?.filter(item => !!item.trigger) ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n              disabled={anyPanelOpenInMobile}\n              globalDrawersFocusControl={globalDrawersFocusControl}\n              globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n              activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n              onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n              expandedDrawerId={expandedDrawerId}\n              setExpandedDrawerId={setExpandedDrawerId!}\n            />\n          </div>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n  AppLayoutToolbarImplementation,\n  ToolbarSkeleton\n);\n"]}

package/lib/internal/template/code-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/code-editor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAqB7F,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAqB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA2Qd,CAAC;AAGH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/code-editor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAqB7F,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAqB/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA+Qd,CAAC;AAGH,eAAe,UAAU,CAAC"}