@cloudscape-design/components-themeable 3.0.708 → 3.0.710

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "navigation": "awsui_navigation_2p2ab_amekz_97",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_amekz_125",
-  "animating": "awsui_animating_2p2ab_amekz_129",
-  "openNavigation": "awsui_openNavigation_2p2ab_amekz_1",
-  "animated-content": "awsui_animated-content_2p2ab_amekz_142",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_amekz_151"
+  "navigation": "awsui_navigation_2p2ab_1ou1b_101",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1ou1b_129",
+  "animating": "awsui_animating_2p2ab_1ou1b_133",
+  "openNavigation": "awsui_openNavigation_2p2ab_1ou1b_1",
+  "animated-content": "awsui_animated-content_2p2ab_1ou1b_146",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_1ou1b_155"
 };
   

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

@@ -94,7 +94,11 @@ 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_navigation_2p2ab_amekz_97:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_navigation_2p2ab_1ou1b_101:not(#\9) {
   position: sticky;
   background-color: var(--color-background-container-content-il2pe5, #ffffff);
   inset-block-end: 0;
@@ -112,7 +116,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   prevent unwanted text wrapping.
   */
 }
-@keyframes awsui_openNavigation_2p2ab_amekz_1 {
+@keyframes awsui_openNavigation_2p2ab_1ou1b_1 {
   from {
     opacity: 0;
     inline-size: calc(var(--space-layout-toggle-padding-k1jpy8, 12px) * 2 + var(--space-layout-toggle-diameter-ugv12v, 36px));
@@ -122,34 +126,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     inline-size: var(--awsui-navigation-width-g964ok);
   }
 }
-.awsui_navigation_2p2ab_amekz_97:not(#\9):not(.awsui_is-navigation-open_2p2ab_amekz_125) {
+.awsui_navigation_2p2ab_1ou1b_101:not(#\9):not(.awsui_is-navigation-open_2p2ab_1ou1b_129) {
   inline-size: 0;
   display: none;
 }
-.awsui_navigation_2p2ab_amekz_97.awsui_is-navigation-open_2p2ab_amekz_125.awsui_animating_2p2ab_amekz_129:not(#\9) {
-  animation: awsui_openNavigation_2p2ab_amekz_1 var(--motion-duration-refresh-only-fast-y7h37k, 115ms);
+.awsui_navigation_2p2ab_1ou1b_101.awsui_is-navigation-open_2p2ab_1ou1b_129.awsui_animating_2p2ab_1ou1b_133:not(#\9) {
+  animation: awsui_openNavigation_2p2ab_1ou1b_1 var(--motion-duration-refresh-only-fast-y7h37k, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_navigation_2p2ab_amekz_97.awsui_is-navigation-open_2p2ab_amekz_125.awsui_animating_2p2ab_amekz_129:not(#\9) {
+  .awsui_navigation_2p2ab_1ou1b_101.awsui_is-navigation-open_2p2ab_1ou1b_129.awsui_animating_2p2ab_1ou1b_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_navigation_2p2ab_amekz_97.awsui_is-navigation-open_2p2ab_amekz_125.awsui_animating_2p2ab_amekz_129:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_amekz_97.awsui_is-navigation-open_2p2ab_amekz_125.awsui_animating_2p2ab_amekz_129:not(#\9) {
+.awsui-motion-disabled .awsui_navigation_2p2ab_1ou1b_101.awsui_is-navigation-open_2p2ab_1ou1b_129.awsui_animating_2p2ab_1ou1b_133:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_1ou1b_101.awsui_is-navigation-open_2p2ab_1ou1b_129.awsui_animating_2p2ab_1ou1b_133:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_navigation_2p2ab_amekz_97 > .awsui_animated-content_2p2ab_amekz_142:not(#\9) {
+.awsui_navigation_2p2ab_1ou1b_101 > .awsui_animated-content_2p2ab_1ou1b_146:not(#\9) {
   inline-size: var(--awsui-navigation-width-g964ok);
 }
 @media (max-width: 688px) {
-  .awsui_navigation_2p2ab_amekz_97:not(#\9) {
+  .awsui_navigation_2p2ab_1ou1b_101:not(#\9) {
     --awsui-navigation-width-g964ok: 100vw;
   }
 }
 
-.awsui_hide-navigation_2p2ab_amekz_151:not(#\9) {
+.awsui_hide-navigation_2p2ab_1ou1b_155:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-kpg8id, 16px);
-  inset-block-start: var(--size-vertical-panel-icon-offset-04nxf8, 15px);
+  inset-block-start: 10px;
 }

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

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation": "awsui_navigation_2p2ab_amekz_97",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_amekz_125",
-  "animating": "awsui_animating_2p2ab_amekz_129",
-  "openNavigation": "awsui_openNavigation_2p2ab_amekz_1",
-  "animated-content": "awsui_animated-content_2p2ab_amekz_142",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_amekz_151"
+  "navigation": "awsui_navigation_2p2ab_1ou1b_101",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1ou1b_129",
+  "animating": "awsui_animating_2p2ab_1ou1b_133",
+  "openNavigation": "awsui_openNavigation_2p2ab_1ou1b_1",
+  "animated-content": "awsui_animated-content_2p2ab_1ou1b_146",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_1ou1b_155"
 };
   

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

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_1subn_101",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1subn_150",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1subn_165",
-  "navigation": "awsui_navigation_7nfqu_1subn_180",
-  "tools": "awsui_tools_7nfqu_1subn_181",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1subn_205",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1subn_211",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1subn_224",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1subn_228",
-  "notifications-container": "awsui_notifications-container_7nfqu_1subn_234",
-  "main-landmark": "awsui_main-landmark_7nfqu_1subn_241",
-  "main": "awsui_main_7nfqu_1subn_241",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1subn_250",
-  "content-header": "awsui_content-header_7nfqu_1subn_260",
-  "content": "awsui_content_7nfqu_1subn_260",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1subn_269"
+  "root": "awsui_root_7nfqu_18aiq_101",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_18aiq_150",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_18aiq_165",
+  "navigation": "awsui_navigation_7nfqu_18aiq_180",
+  "tools": "awsui_tools_7nfqu_18aiq_181",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_18aiq_205",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_18aiq_211",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_18aiq_224",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_18aiq_228",
+  "notifications-container": "awsui_notifications-container_7nfqu_18aiq_234",
+  "main-landmark": "awsui_main-landmark_7nfqu_18aiq_241",
+  "main": "awsui_main_7nfqu_18aiq_241",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_18aiq_250",
+  "content-header": "awsui_content-header_7nfqu_18aiq_260",
+  "content": "awsui_content_7nfqu_18aiq_260",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_18aiq_269"
 };
   

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

@@ -98,7 +98,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_1subn_101:not(#\9) {
+.awsui_root_7nfqu_18aiq_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -136,50 +136,50 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-layout-main-td853a, #f2f3f3);
   --awsui-max-content-width-g964ok: 100%;
   display: grid;
-  grid-template-areas: "topBar    topBar     topBar" ".      notifications ." ".          main      .";
+  grid-template-areas: "toolbar    toolbar     toolbar" ".       notifications  ." ".           main       .";
   grid-template-columns: var(--space-layout-content-horizontal-sin989, 40px) 1fr var(--space-layout-content-horizontal-sin989, 40px);
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_1subn_101:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101:not(#\9) {
     grid-template-areas: "navigation toolbar      toolbar       toolbar   toolbar         tools" "navigation .         notifications    .         sideSplitPanel  tools" "navigation .             main         .         sideSplitPanel  tools";
     grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-sin989, 40px), 1fr) minmax(0, var(--awsui-max-content-width-g964ok)) minmax(var(--space-layout-content-horizontal-sin989, 40px), 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_1subn_101.awsui_has-adaptive-widths-default_7nfqu_1subn_150:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101.awsui_has-adaptive-widths-default_7nfqu_18aiq_150:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1subn_101.awsui_has-adaptive-widths-default_7nfqu_1subn_150:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101.awsui_has-adaptive-widths-default_7nfqu_18aiq_150:not(#\9) {
     --awsui-max-content-width-g964ok: 1440px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1subn_101.awsui_has-adaptive-widths-default_7nfqu_1subn_150:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101.awsui_has-adaptive-widths-default_7nfqu_18aiq_150:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_1subn_101.awsui_has-adaptive-widths-dashboard_7nfqu_1subn_165:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101.awsui_has-adaptive-widths-dashboard_7nfqu_18aiq_165:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_1subn_101.awsui_has-adaptive-widths-dashboard_7nfqu_1subn_165:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101.awsui_has-adaptive-widths-dashboard_7nfqu_18aiq_165:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_1subn_101.awsui_has-adaptive-widths-dashboard_7nfqu_1subn_165:not(#\9) {
+  .awsui_root_7nfqu_18aiq_101.awsui_has-adaptive-widths-dashboard_7nfqu_18aiq_165:not(#\9) {
     --awsui-max-content-width-g964ok: 2160px;
   }
 }
 
-.awsui_navigation_7nfqu_1subn_180:not(#\9),
-.awsui_tools_7nfqu_1subn_181:not(#\9) {
+.awsui_navigation_7nfqu_18aiq_180:not(#\9),
+.awsui_tools_7nfqu_18aiq_181:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-il2pe5, #ffffff);
@@ -187,7 +187,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_1subn_180:not(#\9) {
+  .awsui_navigation_7nfqu_18aiq_180:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-g964ok);
     border-inline-end: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
@@ -195,7 +195,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_1subn_181:not(#\9) {
+  .awsui_tools_7nfqu_18aiq_181:not(#\9) {
     grid-area: tools;
     inline-size: var(--awsui-tools-width-g964ok);
     border-inline-start: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
@@ -203,13 +203,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_1subn_205:not(#\9) {
+  .awsui_split-panel-side_7nfqu_18aiq_205:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: 1px solid var(--color-border-divider-panel-side-btgups, transparent);
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_1subn_211:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_18aiq_211:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -217,61 +217,61 @@ 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_1subn_211:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_18aiq_211:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_panel-hidden_7nfqu_1subn_224:not(#\9) {
+.awsui_panel-hidden_7nfqu_18aiq_224:not(#\9) {
   display: none;
 }
 
-.awsui_toolbar-container_7nfqu_1subn_228:not(#\9) {
+.awsui_toolbar-container_7nfqu_18aiq_228:not(#\9) {
   grid-area: toolbar;
   block-size: 48px;
   border-block-end: 1px solid var(--color-border-divider-panel-bottom-sc2k0v, rgba(0, 28, 36, 0.15));
 }
 
-.awsui_notifications-container_7nfqu_1subn_234:not(#\9) {
+.awsui_notifications-container_7nfqu_18aiq_234:not(#\9) {
   grid-area: notifications;
 }
-.awsui_notifications-container_7nfqu_1subn_234:not(#\9):not(:empty) {
+.awsui_notifications-container_7nfqu_18aiq_234:not(#\9):not(:empty) {
   padding-block-start: var(--space-scaled-xs-x91h81, 8px);
 }
 
-.awsui_main-landmark_7nfqu_1subn_241:not(#\9) {
+.awsui_main-landmark_7nfqu_18aiq_241:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_1subn_241:not(#\9) {
+.awsui_main_7nfqu_18aiq_241:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-9q8n2q, 12px);
   margin-block-end: var(--space-layout-content-bottom-ve4osc, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_1subn_250:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_18aiq_250:not(#\9) {
   grid-column: 1/-1;
   margin-block: 0;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_1subn_250:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_18aiq_250:not(#\9) {
     grid-column: 2/span 3;
   }
 }
 
-.awsui_content-header_7nfqu_1subn_260:not(#\9) {
+.awsui_content-header_7nfqu_18aiq_260:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-d3iv03, 16px);
 }
 
-.awsui_content_7nfqu_1subn_260:not(#\9) {
+.awsui_content_7nfqu_18aiq_260:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable-mobile_7nfqu_1subn_269 *:not(#\9) {
+.awsui_unfocusable-mobile_7nfqu_18aiq_269 *:not(#\9) {
   visibility: hidden;
 }
 @media (min-width: 689px) {
-  .awsui_unfocusable-mobile_7nfqu_1subn_269 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_18aiq_269 *:not(#\9) {
     visibility: visible;
   }
 }

package/lib/internal/template/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_1subn_101",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_1subn_150",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_1subn_165",
-  "navigation": "awsui_navigation_7nfqu_1subn_180",
-  "tools": "awsui_tools_7nfqu_1subn_181",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_1subn_205",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_1subn_211",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_1subn_224",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_1subn_228",
-  "notifications-container": "awsui_notifications-container_7nfqu_1subn_234",
-  "main-landmark": "awsui_main-landmark_7nfqu_1subn_241",
-  "main": "awsui_main_7nfqu_1subn_241",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_1subn_250",
-  "content-header": "awsui_content-header_7nfqu_1subn_260",
-  "content": "awsui_content_7nfqu_1subn_260",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_1subn_269"
+  "root": "awsui_root_7nfqu_18aiq_101",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_18aiq_150",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_18aiq_165",
+  "navigation": "awsui_navigation_7nfqu_18aiq_180",
+  "tools": "awsui_tools_7nfqu_18aiq_181",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_18aiq_205",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_18aiq_211",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_18aiq_224",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_18aiq_228",
+  "notifications-container": "awsui_notifications-container_7nfqu_18aiq_234",
+  "main-landmark": "awsui_main-landmark_7nfqu_18aiq_241",
+  "main": "awsui_main_7nfqu_18aiq_241",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_18aiq_250",
+  "content-header": "awsui_content-header_7nfqu_18aiq_260",
+  "content": "awsui_content_7nfqu_18aiq_260",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_18aiq_269"
 };
   

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

@@ -1,20 +1,22 @@
 import React from 'react';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../../interfaces';
 import { Focusable } from '../../utils/use-focus-control';
+export interface SplitPanelToggleProps {
+    displayed: boolean;
+    ariaLabel: string | undefined;
+    controlId: string | undefined;
+    active: boolean;
+    position: AppLayoutProps.SplitPanelPosition;
+}
 interface DrawerTriggersProps {
     ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];
     activeDrawerId: string | null;
-    drawersFocusRef: React.Ref<Focusable>;
+    drawersFocusRef: React.Ref<Focusable> | undefined;
     drawers: ReadonlyArray<AppLayoutProps.Drawer>;
-    onActiveDrawerChange: (drawerId: string | null) => void;
-    splitPanelToggleProps: undefined | {
-        ariaLabel: string | undefined;
-        controlId: string | undefined;
-        active: boolean;
-        position: AppLayoutProps.SplitPanelPosition;
-    };
-    splitPanelFocusRef: React.Ref<Focusable>;
-    onSplitPanelToggle: () => void;
+    onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;
+    splitPanelToggleProps: SplitPanelToggleProps | undefined;
+    splitPanelFocusRef: React.Ref<Focusable> | undefined;
+    onSplitPanelToggle: (() => void) | undefined;
 }
 export declare function DrawerTriggers({ ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, }: DrawerTriggersProps): JSX.Element | null;
 export {};

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;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAO1D,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,CAAC;IACtC,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9C,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAExD,qBAAqB,EACjB,SAAS,GACT;QACE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC;KAC7C,CAAC;IACN,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACzC,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,EAAE,mBAAmB,sBA8GrB"}
+{"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/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js

@@ -49,11 +49,11 @@ 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(), selected: splitPanelToggleProps.active, ref: splitPanelFocusRef })),
+            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 })),
             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(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}` }));
+                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}` }));
             }),
-            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems, 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 }) => (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass), iconName: "ellipsis", onClick: onClick })), onItemClick: event => onActiveDrawerChange(event.detail.id) })))));
+            overflowItems.length > 0 && (React.createElement(OverflowMenu, { items: overflowItems, 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 }) => (React.createElement(TriggerButton, { ref: triggerRef, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, badge: overflowMenuHasBadge, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass), iconName: "ellipsis", onClick: onClick })), onItemClick: event => onActiveDrawerChange === null || onActiveDrawerChange === void 0 ? void 0 : onActiveDrawerChange(event.detail.id) })))));
 }
 //# sourceMappingURL=drawer-triggers.js.map

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 { 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\ninterface DrawerTriggersProps {\n  ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];\n\n  activeDrawerId: string | null;\n  drawersFocusRef: React.Ref<Focusable>;\n  drawers: ReadonlyArray<AppLayoutProps.Drawer>;\n  onActiveDrawerChange: (drawerId: string | null) => void;\n\n  splitPanelToggleProps:\n    | undefined\n    | {\n        ariaLabel: string | undefined;\n        controlId: string | undefined;\n        active: boolean;\n        position: AppLayoutProps.SplitPanelPosition;\n      };\n  splitPanelFocusRef: React.Ref<Focusable>;\n  onSplitPanelToggle: () => void;\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={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: activeDrawerId,\n      })}\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={clsx(styles['drawers-desktop-triggers-container'], {\n        [styles['has-multiple-triggers']]: hasMultipleTriggers,\n        [styles['has-open-drawer']]: activeDrawerId,\n      })}\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"]}

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

@@ -1,9 +1,29 @@
-/// <reference types="react" />
+import React from 'react';
+import { AppLayoutProps } from '../../interfaces';
+import { Focusable } from '../../utils/use-focus-control';
 import { AppLayoutInternals } from '../interfaces';
+import { SplitPanelToggleProps } from './drawer-triggers';
+export { SplitPanelToggleProps };
+export interface ToolbarProps {
+    ariaLabels?: AppLayoutProps.Labels;
+    hasNavigation?: boolean;
+    navigationOpen?: boolean;
+    onNavigationToggle?: (open: boolean) => void;
+    navigationFocusRef?: React.Ref<Focusable>;
+    hasBreadcrumbsPortal?: boolean;
+    hasSplitPanel?: boolean;
+    splitPanelToggleProps?: SplitPanelToggleProps;
+    splitPanelFocusRef?: React.Ref<Focusable>;
+    onSplitPanelToggle?: () => void;
+    activeDrawerId?: string | null;
+    drawers?: ReadonlyArray<AppLayoutProps.Drawer>;
+    drawersFocusRef?: React.Ref<Focusable>;
+    onActiveDrawerChange?: (drawerId: string | null) => void;
+}
 interface AppLayoutToolbarImplementationProps {
     appLayoutInternals: AppLayoutInternals;
+    toolbarProps: ToolbarProps;
 }
-export declare function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayoutToolbarImplementationProps): JSX.Element;
+export declare function AppLayoutToolbarImplementation({ appLayoutInternals, toolbarProps, }: AppLayoutToolbarImplementationProps): JSX.Element;
 export declare const createWidgetizedAppLayoutToolbar: (Loader?: typeof AppLayoutToolbarImplementation | undefined) => typeof AppLayoutToolbarImplementation;
-export {};
 //# sourceMappingURL=index.d.ts.map

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":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAQnD,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,8BAA8B,CAAC,EAAE,kBAAkB,EAAE,EAAE,mCAAmC,eA4HzG;AAED,eAAO,MAAM,gCAAgC,uGAA4D,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;AAOjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,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,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAED,UAAU,mCAAmC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAClB,YAAY,GACb,EAAE,mCAAmC,eAgHrC;AAED,eAAO,MAAM,gCAAgC,uGAA4D,CAAC"}

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

@@ -10,9 +10,10 @@ import { DrawerTriggers } from './drawer-triggers';
 import TriggerButton from './trigger-button';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
-export function AppLayoutToolbarImplementation({ appLayoutInternals }) {
-    var _a, _b;
-    const { ariaLabels, breadcrumbs, discoveredBreadcrumbs, activeDrawer, drawers, drawersFocusControl, setToolbarHeight, verticalOffsets, onNavigationToggle, isMobile, toolbarState, setToolbarState, navigationOpen, navigation, navigationFocusControl, splitPanelControlId, splitPanelPosition, splitPanelToggleConfig, splitPanelFocusControl, onSplitPanelToggle, splitPanelOpen, onActiveDrawerChange, } = appLayoutInternals;
+export function AppLayoutToolbarImplementation({ appLayoutInternals, toolbarProps, }) {
+    var _a;
+    const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, toolbarState, setToolbarState, setToolbarHeight, } = appLayoutInternals;
+    const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, } = toolbarProps;
     // TODO: expose configuration property
     const pinnedToolbar = true;
     const ref = useRef(null);
@@ -54,14 +55,13 @@ export function AppLayoutToolbarImplementation({ appLayoutInternals }) {
             insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,
         } },
         React.createElement("div", { className: styles['toolbar-container'] },
-            navigation && !navigationOpen && (React.createElement("nav", { "aria-hidden": navigationOpen, className: clsx(styles['universal-toolbar-nav'], { [testutilStyles['drawer-closed']]: !navigationOpen }) },
-                React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: navigationOpen ? undefined : false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle(!navigationOpen), ref: navigationFocusControl.refs.toggle, selected: navigationOpen }))),
+            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 }))),
             (breadcrumbs || discoveredBreadcrumbs) && (React.createElement("div", { className: clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) },
                 breadcrumbs,
                 discoveredBreadcrumbs && React.createElement(InternalBreadcrumbGroup, Object.assign({}, discoveredBreadcrumbs)))),
-            (drawers.length > 0 || splitPanelToggleConfig.displayed) && (React.createElement("span", { className: clsx(styles['universal-toolbar-drawers']) },
-                React.createElement(DrawerTriggers, { ariaLabels: ariaLabels, activeDrawerId: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _b !== void 0 ? _b : null, drawers: drawers, drawersFocusRef: drawersFocusControl.refs.toggle, onActiveDrawerChange: onActiveDrawerChange, splitPanelToggleProps: splitPanelToggleConfig.displayed
-                        ? Object.assign(Object.assign({}, splitPanelToggleConfig), { controlId: splitPanelControlId, active: splitPanelOpen, position: splitPanelPosition }) : undefined, splitPanelFocusRef: splitPanelFocusControl.refs.toggle, onSplitPanelToggle: onSplitPanelToggle }))))));
+            ((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 }))))));
 }
 export const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);
 //# 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 { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayoutToolbarImplementationProps) {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    activeDrawer,\n    drawers,\n    drawersFocusControl,\n    setToolbarHeight,\n    verticalOffsets,\n    onNavigationToggle,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    splitPanelControlId,\n    splitPanelPosition,\n    splitPanelToggleConfig,\n    splitPanelFocusControl,\n    onSplitPanelToggle,\n    splitPanelOpen,\n    onActiveDrawerChange,\n  } = 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'], {\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        {navigation && !navigationOpen && (\n          <nav\n            aria-hidden={navigationOpen}\n            className={clsx(styles['universal-toolbar-nav'], { [testutilStyles['drawer-closed']]: !navigationOpen })}\n          >\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={navigationOpen ? undefined : false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle(!navigationOpen)}\n              ref={navigationFocusControl.refs.toggle}\n              selected={navigationOpen}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            {breadcrumbs}\n            {discoveredBreadcrumbs && <InternalBreadcrumbGroup {...discoveredBreadcrumbs} />}\n          </div>\n        )}\n        {(drawers.length > 0 || splitPanelToggleConfig.displayed) && (\n          <span className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawer?.id ?? null}\n              drawers={drawers}\n              drawersFocusRef={drawersFocusControl.refs.toggle}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={\n                splitPanelToggleConfig.displayed\n                  ? {\n                      ...splitPanelToggleConfig,\n                      controlId: splitPanelControlId,\n                      active: splitPanelOpen,\n                      position: splitPanelPosition,\n                    }\n                  : undefined\n              }\n              splitPanelFocusRef={splitPanelFocusControl.refs.toggle}\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 { 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\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\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  } = 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 toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-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 && <InternalBreadcrumbGroup {...discoveredBreadcrumbs} />}\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"]}