@cloudscape-design/components 3.0.693 → 3.0.695

package/app-layout/visual-refresh-toolbar/compute-layout.d.ts

@@ -18,7 +18,7 @@ export declare function computeHorizontalLayout({ navigationOpen, navigationWidt
 };
 interface VerticalLayoutInput {
     topOffset: number;
-    hasToolbar: boolean;
+    hasVisibleToolbar: boolean;
     toolbarHeight: number;
     stickyNotifications: boolean;
     notificationsHeight: number;
@@ -28,6 +28,6 @@ export interface VerticalLayoutOutput {
     notifications: number;
     header: number;
 }
-export declare function computeVerticalLayout({ topOffset, hasToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }: VerticalLayoutInput): VerticalLayoutOutput;
+export declare function computeVerticalLayout({ topOffset, hasVisibleToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }: VerticalLayoutInput): VerticalLayoutOutput;
 export {};
 //# sourceMappingURL=compute-layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,GACf,EAAE,qBAAqB;;;;;;EAsBvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAY5C"}
+{"version":3,"file":"compute-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,GACf,EAAE,qBAAqB;;;;;;EAsBvB;AAED,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,mBAAmB,GAAG,oBAAoB,CAY5C"}

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

@@ -18,10 +18,10 @@ export function computeHorizontalLayout({ navigationOpen, navigationWidth, place
         maxDrawerSize,
     };
 }
-export function computeVerticalLayout({ topOffset, hasToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }) {
+export function computeVerticalLayout({ topOffset, hasVisibleToolbar, toolbarHeight, stickyNotifications, notificationsHeight, }) {
     const toolbar = topOffset;
     let notifications = topOffset;
-    if (hasToolbar) {
+    if (hasVisibleToolbar) {
         notifications += toolbarHeight;
     }
     let header = notifications;

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

@@ -1 +1 @@
-{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAavD,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,GACQ;IACtB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW;IAC1C,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,MAAM,uBAAuB,GAAG,IAAI,CAAC,GAAG,CACtC,CAAC,EACD,SAAS,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAChF,CAAC;IAEF,MAAM,wBAAwB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,qBAAqB,CAAC;IACpG,MAAM,0BAA0B,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAC;IACxG,MAAM,kBAAkB,GAAG,0BAA0B,KAAK,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;IACrE,MAAM,aAAa,GAAG,uBAAuB,GAAG,kBAAkB,CAAC;IAEnE,OAAO;QACL,kBAAkB,EAAE,0BAA0B;QAC9C,wBAAwB;QACxB,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;KACd,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACC;IACpB,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,aAAa,GAAG,SAAS,CAAC;IAC9B,IAAI,UAAU,EAAE;QACd,aAAa,IAAI,aAAa,CAAC;KAChC;IACD,IAAI,MAAM,GAAG,aAAa,CAAC;IAC3B,IAAI,mBAAmB,EAAE;QACvB,MAAM,IAAI,mBAAmB,CAAC;KAC/B;IAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;AAC5C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\n\ninterface HorizontalLayoutInput {\n  navigationOpen: boolean;\n  navigationWidth: number;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  minContentWidth: number;\n  activeDrawerSize: number;\n  splitPanelOpen: boolean;\n  splitPanelPosition: 'side' | 'bottom' | undefined;\n  splitPanelSize: number;\n}\n\nexport function computeHorizontalLayout({\n  navigationOpen,\n  navigationWidth,\n  placement,\n  minContentWidth,\n  activeDrawerSize,\n  splitPanelOpen,\n  splitPanelPosition,\n  splitPanelSize,\n}: HorizontalLayoutInput) {\n  const contentPadding = 2 * 24; // space-xl\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  const resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth\n  );\n\n  const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH;\n  const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n  const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n  const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;\n  const maxDrawerSize = resizableSpaceAvailable - sideSplitPanelSize;\n\n  return {\n    splitPanelPosition: resolvedSplitPanelPosition,\n    splitPanelForcedPosition,\n    sideSplitPanelSize,\n    maxSplitPanelSize,\n    maxDrawerSize,\n  };\n}\n\ninterface VerticalLayoutInput {\n  topOffset: number;\n  hasToolbar: boolean;\n  toolbarHeight: number;\n  stickyNotifications: boolean;\n  notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n  toolbar: number;\n  notifications: number;\n  header: number;\n}\n\nexport function computeVerticalLayout({\n  topOffset,\n  hasToolbar,\n  toolbarHeight,\n  stickyNotifications,\n  notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n  const toolbar = topOffset;\n  let notifications = topOffset;\n  if (hasToolbar) {\n    notifications += toolbarHeight;\n  }\n  let header = notifications;\n  if (stickyNotifications) {\n    header += notificationsHeight;\n  }\n\n  return { toolbar, notifications, header };\n}\n"]}
+{"version":3,"file":"compute-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/compute-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAavD,MAAM,UAAU,uBAAuB,CAAC,EACtC,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,cAAc,GACQ;IACtB,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW;IAC1C,MAAM,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,MAAM,uBAAuB,GAAG,IAAI,CAAC,GAAG,CACtC,CAAC,EACD,SAAS,CAAC,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,CAChF,CAAC;IAEF,MAAM,wBAAwB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,qBAAqB,CAAC;IACpG,MAAM,0BAA0B,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,CAAC;IACxG,MAAM,kBAAkB,GAAG,0BAA0B,KAAK,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7G,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;IACrE,MAAM,aAAa,GAAG,uBAAuB,GAAG,kBAAkB,CAAC;IAEnE,OAAO;QACL,kBAAkB,EAAE,0BAA0B;QAC9C,wBAAwB;QACxB,kBAAkB;QAClB,iBAAiB;QACjB,aAAa;KACd,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,qBAAqB,CAAC,EACpC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,GACC;IACpB,MAAM,OAAO,GAAG,SAAS,CAAC;IAC1B,IAAI,aAAa,GAAG,SAAS,CAAC;IAC9B,IAAI,iBAAiB,EAAE;QACrB,aAAa,IAAI,aAAa,CAAC;KAChC;IACD,IAAI,MAAM,GAAG,aAAa,CAAC;IAC3B,IAAI,mBAAmB,EAAE;QACvB,MAAM,IAAI,mBAAmB,CAAC;KAC/B;IAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;AAC5C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\n\ninterface HorizontalLayoutInput {\n  navigationOpen: boolean;\n  navigationWidth: number;\n  placement: AppLayoutPropsWithDefaults['placement'];\n  minContentWidth: number;\n  activeDrawerSize: number;\n  splitPanelOpen: boolean;\n  splitPanelPosition: 'side' | 'bottom' | undefined;\n  splitPanelSize: number;\n}\n\nexport function computeHorizontalLayout({\n  navigationOpen,\n  navigationWidth,\n  placement,\n  minContentWidth,\n  activeDrawerSize,\n  splitPanelOpen,\n  splitPanelPosition,\n  splitPanelSize,\n}: HorizontalLayoutInput) {\n  const contentPadding = 2 * 24; // space-xl\n  const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n  const resizableSpaceAvailable = Math.max(\n    0,\n    placement.inlineSize - minContentWidth - contentPadding - activeNavigationWidth\n  );\n\n  const splitPanelForcedPosition = resizableSpaceAvailable - activeDrawerSize < SPLIT_PANEL_MIN_WIDTH;\n  const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n  const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n  const maxSplitPanelSize = resizableSpaceAvailable - activeDrawerSize;\n  const maxDrawerSize = resizableSpaceAvailable - sideSplitPanelSize;\n\n  return {\n    splitPanelPosition: resolvedSplitPanelPosition,\n    splitPanelForcedPosition,\n    sideSplitPanelSize,\n    maxSplitPanelSize,\n    maxDrawerSize,\n  };\n}\n\ninterface VerticalLayoutInput {\n  topOffset: number;\n  hasVisibleToolbar: boolean;\n  toolbarHeight: number;\n  stickyNotifications: boolean;\n  notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n  toolbar: number;\n  notifications: number;\n  header: number;\n}\n\nexport function computeVerticalLayout({\n  topOffset,\n  hasVisibleToolbar,\n  toolbarHeight,\n  stickyNotifications,\n  notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n  const toolbar = topOffset;\n  let notifications = topOffset;\n  if (hasVisibleToolbar) {\n    notifications += toolbarHeight;\n  }\n  let header = notifications;\n  if (stickyNotifications) {\n    header += notificationsHeight;\n  }\n\n  return { toolbar, notifications, header };\n}\n"]}

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

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_12i0j_c2clt_101",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_c2clt_114",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_c2clt_122",
-  "drawer-content": "awsui_drawer-content_12i0j_c2clt_114",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_c2clt_131",
-  "drawer-slider": "awsui_drawer-slider_12i0j_c2clt_134"
+  "drawer": "awsui_drawer_12i0j_k2p6n_101",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_k2p6n_114",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_k2p6n_122",
+  "drawer-content": "awsui_drawer-content_12i0j_k2p6n_114",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_k2p6n_131",
+  "drawer-slider": "awsui_drawer-slider_12i0j_k2p6n_134"
 };
   

package/app-layout/visual-refresh-toolbar/drawer/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_drawer_12i0j_c2clt_101:not(#\9) {
+.awsui_drawer_12i0j_k2p6n_101:not(#\9) {
   position: sticky;
   z-index: 830;
   background-color: var(--color-background-container-content-4un1ap, #ffffff);
@@ -111,27 +111,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: auto;
   word-wrap: break-word;
 }
-.awsui_drawer_12i0j_c2clt_101 > .awsui_drawer-content-container_12i0j_c2clt_114:not(#\9) {
+.awsui_drawer_12i0j_k2p6n_101 > .awsui_drawer-content-container_12i0j_k2p6n_114:not(#\9) {
   grid-column: 1/span 2;
   grid-row: 1;
   display: grid;
   grid-template-columns: var(--space-m-udix3p, 16px) 1fr auto var(--space-m-udix3p, 16px);
-  grid-template-rows: var(--size-vertical-panel-icon-offset-wy8j08, 15px) auto 1fr;
+  grid-template-rows: 10px auto 1fr;
   overflow-y: auto;
 }
-.awsui_drawer_12i0j_c2clt_101 > .awsui_drawer-content-container_12i0j_c2clt_114 > .awsui_drawer-close-button_12i0j_c2clt_122:not(#\9) {
+.awsui_drawer_12i0j_k2p6n_101 > .awsui_drawer-content-container_12i0j_k2p6n_114 > .awsui_drawer-close-button_12i0j_k2p6n_122:not(#\9) {
   grid-column: 3;
   grid-row: 2;
   z-index: 1;
 }
-.awsui_drawer_12i0j_c2clt_101 > .awsui_drawer-content-container_12i0j_c2clt_114 > .awsui_drawer-content_12i0j_c2clt_114:not(#\9) {
+.awsui_drawer_12i0j_k2p6n_101 > .awsui_drawer-content-container_12i0j_k2p6n_114 > .awsui_drawer-content_12i0j_k2p6n_114:not(#\9) {
   grid-column: 1/span 4;
   grid-row: 1/span 2;
 }
-.awsui_drawer_12i0j_c2clt_101 > .awsui_drawer-content-container_12i0j_c2clt_114 > .awsui_drawer-content_12i0j_c2clt_114.awsui_drawer-content-hidden_12i0j_c2clt_131:not(#\9) {
+.awsui_drawer_12i0j_k2p6n_101 > .awsui_drawer-content-container_12i0j_k2p6n_114 > .awsui_drawer-content_12i0j_k2p6n_114.awsui_drawer-content-hidden_12i0j_k2p6n_131:not(#\9) {
   display: none;
 }
-.awsui_drawer_12i0j_c2clt_101 > .awsui_drawer-slider_12i0j_c2clt_134:not(#\9) {
+.awsui_drawer_12i0j_k2p6n_101 > .awsui_drawer-slider_12i0j_k2p6n_134:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   block-size: 100%;

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

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_12i0j_c2clt_101",
-  "drawer-content-container": "awsui_drawer-content-container_12i0j_c2clt_114",
-  "drawer-close-button": "awsui_drawer-close-button_12i0j_c2clt_122",
-  "drawer-content": "awsui_drawer-content_12i0j_c2clt_114",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_c2clt_131",
-  "drawer-slider": "awsui_drawer-slider_12i0j_c2clt_134"
+  "drawer": "awsui_drawer_12i0j_k2p6n_101",
+  "drawer-content-container": "awsui_drawer-content-container_12i0j_k2p6n_114",
+  "drawer-close-button": "awsui_drawer-close-button_12i0j_k2p6n_122",
+  "drawer-content": "awsui_drawer-content_12i0j_k2p6n_114",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_12i0j_k2p6n_131",
+  "drawer-slider": "awsui_drawer-slider_12i0j_k2p6n_134"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAU7D,OAAO,EAAE,cAAc,EAA8B,MAAM,eAAe,CAAC;AAiB3E,QAAA,MAAM,6BAA6B;;;;;;;;;;;;;;;4CAqRlC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,OAAO,EAAE,cAAc,EAA8B,MAAM,eAAe,CAAC;AAkB3E,QAAA,MAAM,6BAA6B;;;;;;;;;;;;;;;4CA+SlC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}

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

@@ -2,6 +2,7 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useImperativeHandle, useState } from 'react';
+import ScreenreaderOnly from '../../internal/components/screenreader-only';
 import { fireNonCancelableEvent } from '../../internal/events';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { useMobile } from '../../internal/hooks/use-mobile';
@@ -14,12 +15,13 @@ import { useFocusControl } from '../utils/use-focus-control';
 import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
 import { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';
 import { AppLayoutDrawer, AppLayoutNavigation, AppLayoutNotifications, AppLayoutSplitPanelBottom, AppLayoutSplitPanelSide, AppLayoutToolbar, } from './internal';
+import { useMultiAppLayout } from './multi-layout';
 import { SkeletonLayout } from './skeleton';
 const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
-    var _b;
+    var _b, _c;
     var { ariaLabels, contentHeader, content, navigationOpen, navigationWidth, navigation, navigationHide, onNavigationChange, tools, toolsOpen: controlledToolsOpen, onToolsChange, toolsHide, toolsWidth, contentType, headerVariant, breadcrumbs, notifications, stickyNotifications, splitPanelPreferences: controlledSplitPanelPreferences, splitPanelOpen: controlledSplitPanelOpen, splitPanel, splitPanelSize: controlledSplitPanelSize, onSplitPanelToggle, onSplitPanelResize, onSplitPanelPreferencesChange, disableContentPaddings, minContentWidth, maxContentWidth, placement } = _a, rest = __rest(_a, ["ariaLabels", "contentHeader", "content", "navigationOpen", "navigationWidth", "navigation", "navigationHide", "onNavigationChange", "tools", "toolsOpen", "onToolsChange", "toolsHide", "toolsWidth", "contentType", "headerVariant", "breadcrumbs", "notifications", "stickyNotifications", "splitPanelPreferences", "splitPanelOpen", "splitPanel", "splitPanelSize", "onSplitPanelToggle", "onSplitPanelResize", "onSplitPanelPreferencesChange", "disableContentPaddings", "minContentWidth", "maxContentWidth", "placement"]);
     const isMobile = useMobile();
-    const embeddedViewMode = rest.__embeddedViewMode;
+    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest;
     const splitPanelControlId = useUniqueId('split-panel');
     const [toolbarState, setToolbarState] = useState('show');
     const [toolbarHeight, setToolbarHeight] = useState(0);
@@ -95,16 +97,29 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         splitPanelOpen,
         splitPanelPosition: splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position,
     });
-    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs();
-    const hasToolbar = Boolean(!embeddedViewMode &&
-        (resolvedNavigation ||
-            breadcrumbs ||
-            discoveredBreadcrumbs ||
-            splitPanelToggleConfig.displayed ||
-            drawers.length > 0));
+    const { registered, toolbarProps } = useMultiAppLayout({
+        forceDeduplicationType,
+        ariaLabels: ariaLabelsWithDrawers,
+        navigation,
+        navigationOpen,
+        onNavigationToggle,
+        navigationFocusRef: navigationFocusControl.refs.toggle,
+        breadcrumbs,
+        activeDrawerId: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _c !== void 0 ? _c : null,
+        // only pass it down if there are non-empty drawers or tools
+        drawers: (drawers === null || drawers === void 0 ? void 0 : drawers.length) || !toolsHide ? drawers : undefined,
+        onActiveDrawerChange,
+        drawersFocusRef: drawersFocusControl.refs.toggle,
+        splitPanel,
+        splitPanelToggleProps: Object.assign(Object.assign({}, splitPanelToggleConfig), { active: splitPanelOpen, controlId: splitPanelControlId, position: splitPanelPosition }),
+        splitPanelFocusRef: splitPanelFocusControl.refs.toggle,
+        onSplitPanelToggle: onSplitPanelToggleHandler,
+    });
+    const hasToolbar = !embeddedViewMode && !!toolbarProps;
+    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar);
     const verticalOffsets = computeVerticalLayout({
         topOffset: placement.insetBlockStart,
-        hasToolbar: hasToolbar && toolbarState !== 'hide',
+        hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',
         notificationsHeight: notificationsHeight !== null && notificationsHeight !== void 0 ? notificationsHeight : 0,
         toolbarHeight: toolbarHeight !== null && toolbarHeight !== void 0 ? toolbarHeight : 0,
         stickyNotifications: !!stickyNotifications,
@@ -166,12 +181,16 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
         setSplitPanelToggle: setSplitPanelToggleConfig,
         refs: splitPanelFocusControl.refs,
     };
-    return (React.createElement(SkeletonLayout, { style: {
-            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
-            [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,
-            paddingBlockEnd: splitPanelOpen ? splitPanelReportedSize : '',
-        }, toolbar: hasToolbar && React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutInternals }), notifications: notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutInternals }, notifications)), contentHeader: contentHeader, content: content, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: navigationOpen, navigationWidth: navigationWidth, tools: activeDrawer && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' &&
-            splitPanel && (React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), bottomSplitPanel: splitPanelPosition === 'bottom' && (React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), splitPanelOpen: splitPanelOpen, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, disableContentPaddings: disableContentPaddings }));
+    return (React.createElement(React.Fragment, null,
+        !hasToolbar && breadcrumbs ? React.createElement(ScreenreaderOnly, null, breadcrumbs) : null,
+        React.createElement(SkeletonLayout, { style: {
+                [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
+                [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,
+                paddingBlockEnd: splitPanelOpen ? splitPanelReportedSize : '',
+            }, toolbar: hasToolbar && React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutInternals, toolbarProps: toolbarProps }), notifications: notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutInternals }, notifications)), contentHeader: contentHeader, 
+            // delay rendering the content until registration of this instance is complete
+            content: registered ? content : null, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: navigationOpen, navigationWidth: navigationWidth, tools: activeDrawer && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' &&
+                splitPanel && (React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), bottomSplitPanel: splitPanelPosition === 'bottom' && (React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), splitPanelOpen: splitPanelOpen, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, disableContentPaddings: disableContentPaddings })));
 });
 export default AppLayoutVisualRefreshToolbar;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-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, { useImperativeHandle, useState } from 'react';\n\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';\nimport { AppLayoutInternals } from './interfaces';\nimport {\n  AppLayoutDrawer,\n  AppLayoutNavigation,\n  AppLayoutNotifications,\n  AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelSide,\n  AppLayoutToolbar,\n} from './internal';\nimport { SkeletonLayout } from './skeleton';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef(\n  (\n    {\n      ariaLabels,\n      contentHeader,\n      content,\n      navigationOpen,\n      navigationWidth,\n      navigation,\n      navigationHide,\n      onNavigationChange,\n      tools,\n      toolsOpen: controlledToolsOpen,\n      onToolsChange,\n      toolsHide,\n      toolsWidth,\n      contentType,\n      headerVariant,\n      breadcrumbs,\n      notifications,\n      stickyNotifications,\n      splitPanelPreferences: controlledSplitPanelPreferences,\n      splitPanelOpen: controlledSplitPanelOpen,\n      splitPanel,\n      splitPanelSize: controlledSplitPanelSize,\n      onSplitPanelToggle,\n      onSplitPanelResize,\n      onSplitPanelPreferencesChange,\n      disableContentPaddings,\n      minContentWidth,\n      maxContentWidth,\n      placement,\n      ...rest\n    }: AppLayoutPropsWithDefaults,\n    forwardRef: React.Ref<AppLayoutProps.Ref>\n  ) => {\n    const isMobile = useMobile();\n    const embeddedViewMode = (rest as any).__embeddedViewMode;\n    const splitPanelControlId = useUniqueId('split-panel');\n    const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n    const [toolbarHeight, setToolbarHeight] = useState(0);\n    const [notificationsHeight, setNotificationsHeight] = useState(0);\n\n    const onNavigationToggle = (open: boolean) => {\n      fireNonCancelableEvent(onNavigationChange, { open });\n    };\n\n    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n      componentName: 'AppLayout',\n      controlledProp: 'toolsOpen',\n      changeHandler: 'onToolsChange',\n    });\n    const onToolsToggle = (open: boolean) => {\n      setToolsOpen(open);\n      drawersFocusControl.setFocus();\n      fireNonCancelableEvent(onToolsChange, { open });\n    };\n\n    const {\n      drawers,\n      activeDrawer,\n      minDrawerSize,\n      activeDrawerSize,\n      ariaLabelsWithDrawers,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    } = useDrawers(rest, ariaLabels, {\n      ariaLabels,\n      toolsHide,\n      toolsOpen,\n      tools,\n      toolsWidth,\n      onToolsToggle,\n    });\n\n    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n      controlledSplitPanelOpen,\n      onSplitPanelToggle,\n      false,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelOpen',\n        changeHandler: 'onSplitPanelToggle',\n      }\n    );\n\n    const onSplitPanelToggleHandler = () => {\n      setSplitPanelOpen(!splitPanelOpen);\n      fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n    };\n\n    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n      controlledSplitPanelPreferences,\n      onSplitPanelPreferencesChange,\n      undefined,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelPreferences',\n        changeHandler: 'onSplitPanelPreferencesChange',\n      }\n    );\n\n    const onSplitPanelPreferencesChangeHandler = (detail: AppLayoutProps.SplitPanelPreferences) => {\n      setSplitPanelPreferences(detail);\n      splitPanelFocusControl.setLastInteraction({ type: 'position' });\n      fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n    };\n\n    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(\n      controlledSplitPanelSize,\n      onSplitPanelResize,\n      getSplitPanelDefaultSize(splitPanelPreferences?.position ?? 'bottom'),\n      { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n    );\n\n    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n\n    const onSplitPanelResizeHandler = (size: number) => {\n      setSplitPanelSize(size);\n      fireNonCancelableEvent(onSplitPanelResize, { size });\n    };\n\n    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState<SplitPanelSideToggleProps>({\n      ariaLabel: undefined,\n      displayed: false,\n    });\n\n    const drawersFocusControl = useFocusControl(!!activeDrawer?.id);\n    const navigationFocusControl = useFocusControl(navigationOpen);\n    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\n\n    useImperativeHandle(forwardRef, () => ({\n      closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),\n      openTools: () => onToolsToggle(true),\n      focusToolsClose: () => drawersFocusControl.setFocus(true),\n      focusActiveDrawer: () => drawersFocusControl.setFocus(true),\n      focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),\n    }));\n\n    const resolvedNavigation = navigationHide ? null : navigation ?? <></>;\n    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({\n      activeDrawerSize,\n      splitPanelSize,\n      minContentWidth,\n      navigationOpen: !!resolvedNavigation && navigationOpen,\n      navigationWidth,\n      placement,\n      splitPanelOpen,\n      splitPanelPosition: splitPanelPreferences?.position,\n    });\n\n    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs();\n\n    const hasToolbar = Boolean(\n      !embeddedViewMode &&\n        (resolvedNavigation ||\n          breadcrumbs ||\n          discoveredBreadcrumbs ||\n          splitPanelToggleConfig.displayed ||\n          drawers!.length > 0)\n    );\n\n    const verticalOffsets = computeVerticalLayout({\n      topOffset: placement.insetBlockStart,\n      hasToolbar: hasToolbar && toolbarState !== 'hide',\n      notificationsHeight: notificationsHeight ?? 0,\n      toolbarHeight: toolbarHeight ?? 0,\n      stickyNotifications: !!stickyNotifications,\n    });\n\n    const appLayoutInternals: AppLayoutInternals = {\n      ariaLabels: ariaLabelsWithDrawers,\n      headerVariant,\n      isMobile,\n      breadcrumbs,\n      discoveredBreadcrumbs,\n      stickyNotifications,\n      navigationOpen,\n      navigation: resolvedNavigation,\n      navigationFocusControl,\n      activeDrawer,\n      activeDrawerSize,\n      minDrawerSize,\n      maxDrawerSize,\n      drawers: drawers!,\n      drawersFocusControl,\n      splitPanelPosition,\n      splitPanelToggleConfig,\n      splitPanelOpen,\n      splitPanelControlId,\n      splitPanelFocusControl,\n      placement,\n      toolbarState,\n      setToolbarState,\n      verticalOffsets,\n      setToolbarHeight,\n      setNotificationsHeight,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n      onNavigationToggle,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    };\n\n    const splitPanelInternals: SplitPanelProviderProps = {\n      bottomOffset: 0,\n      getMaxHeight: () => {\n        const availableHeight =\n          document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n        // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n        return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n      },\n      maxWidth: maxSplitPanelSize,\n      isForcedPosition: splitPanelForcedPosition,\n      isOpen: splitPanelOpen,\n      leftOffset: 0,\n      onPreferencesChange: onSplitPanelPreferencesChangeHandler,\n      onResize: onSplitPanelResizeHandler,\n      onToggle: onSplitPanelToggleHandler,\n      position: splitPanelPosition,\n      reportSize: size => setSplitPanelReportedSize(size),\n      reportHeaderHeight: () => {\n        /*unused in this design*/\n      },\n      rightOffset: 0,\n      size: splitPanelSize,\n      topOffset: 0,\n      setSplitPanelToggle: setSplitPanelToggleConfig,\n      refs: splitPanelFocusControl.refs,\n    };\n\n    return (\n      <SkeletonLayout\n        style={{\n          [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,\n          [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,\n          paddingBlockEnd: splitPanelOpen ? splitPanelReportedSize : '',\n        }}\n        toolbar={hasToolbar && <AppLayoutToolbar appLayoutInternals={appLayoutInternals} />}\n        notifications={\n          notifications && (\n            <AppLayoutNotifications appLayoutInternals={appLayoutInternals}>{notifications}</AppLayoutNotifications>\n          )\n        }\n        contentHeader={contentHeader}\n        content={content}\n        navigation={resolvedNavigation && <AppLayoutNavigation appLayoutInternals={appLayoutInternals} />}\n        navigationOpen={navigationOpen}\n        navigationWidth={navigationWidth}\n        tools={activeDrawer && <AppLayoutDrawer appLayoutInternals={appLayoutInternals} />}\n        toolsOpen={!!activeDrawer}\n        toolsWidth={activeDrawerSize}\n        sideSplitPanel={\n          splitPanelPosition === 'side' &&\n          splitPanel && (\n            <AppLayoutSplitPanelSide appLayoutInternals={appLayoutInternals} splitPanelInternals={splitPanelInternals}>\n              {splitPanel}\n            </AppLayoutSplitPanelSide>\n          )\n        }\n        bottomSplitPanel={\n          splitPanelPosition === 'bottom' && (\n            <AppLayoutSplitPanelBottom\n              appLayoutInternals={appLayoutInternals}\n              splitPanelInternals={splitPanelInternals}\n            >\n              {splitPanel}\n            </AppLayoutSplitPanelBottom>\n          )\n        }\n        splitPanelOpen={splitPanelOpen}\n        placement={placement}\n        contentType={contentType}\n        maxContentWidth={maxContentWidth}\n        disableContentPaddings={disableContentPaddings}\n      />\n    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-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, { useImperativeHandle, useState } from 'react';\n\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';\nimport { AppLayoutInternals } from './interfaces';\nimport {\n  AppLayoutDrawer,\n  AppLayoutNavigation,\n  AppLayoutNotifications,\n  AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelSide,\n  AppLayoutToolbar,\n} from './internal';\nimport { useMultiAppLayout } from './multi-layout';\nimport { SkeletonLayout } from './skeleton';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutPropsWithDefaults>(\n  (\n    {\n      ariaLabels,\n      contentHeader,\n      content,\n      navigationOpen,\n      navigationWidth,\n      navigation,\n      navigationHide,\n      onNavigationChange,\n      tools,\n      toolsOpen: controlledToolsOpen,\n      onToolsChange,\n      toolsHide,\n      toolsWidth,\n      contentType,\n      headerVariant,\n      breadcrumbs,\n      notifications,\n      stickyNotifications,\n      splitPanelPreferences: controlledSplitPanelPreferences,\n      splitPanelOpen: controlledSplitPanelOpen,\n      splitPanel,\n      splitPanelSize: controlledSplitPanelSize,\n      onSplitPanelToggle,\n      onSplitPanelResize,\n      onSplitPanelPreferencesChange,\n      disableContentPaddings,\n      minContentWidth,\n      maxContentWidth,\n      placement,\n      ...rest\n    },\n    forwardRef\n  ) => {\n    const isMobile = useMobile();\n    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest as any;\n    const splitPanelControlId = useUniqueId('split-panel');\n    const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n    const [toolbarHeight, setToolbarHeight] = useState(0);\n    const [notificationsHeight, setNotificationsHeight] = useState(0);\n\n    const onNavigationToggle = (open: boolean) => {\n      fireNonCancelableEvent(onNavigationChange, { open });\n    };\n\n    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n      componentName: 'AppLayout',\n      controlledProp: 'toolsOpen',\n      changeHandler: 'onToolsChange',\n    });\n    const onToolsToggle = (open: boolean) => {\n      setToolsOpen(open);\n      drawersFocusControl.setFocus();\n      fireNonCancelableEvent(onToolsChange, { open });\n    };\n\n    const {\n      drawers,\n      activeDrawer,\n      minDrawerSize,\n      activeDrawerSize,\n      ariaLabelsWithDrawers,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    } = useDrawers(rest, ariaLabels, {\n      ariaLabels,\n      toolsHide,\n      toolsOpen,\n      tools,\n      toolsWidth,\n      onToolsToggle,\n    });\n\n    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n      controlledSplitPanelOpen,\n      onSplitPanelToggle,\n      false,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelOpen',\n        changeHandler: 'onSplitPanelToggle',\n      }\n    );\n\n    const onSplitPanelToggleHandler = () => {\n      setSplitPanelOpen(!splitPanelOpen);\n      fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n    };\n\n    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n      controlledSplitPanelPreferences,\n      onSplitPanelPreferencesChange,\n      undefined,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelPreferences',\n        changeHandler: 'onSplitPanelPreferencesChange',\n      }\n    );\n\n    const onSplitPanelPreferencesChangeHandler = (detail: AppLayoutProps.SplitPanelPreferences) => {\n      setSplitPanelPreferences(detail);\n      splitPanelFocusControl.setLastInteraction({ type: 'position' });\n      fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n    };\n\n    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(\n      controlledSplitPanelSize,\n      onSplitPanelResize,\n      getSplitPanelDefaultSize(splitPanelPreferences?.position ?? 'bottom'),\n      { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n    );\n\n    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n\n    const onSplitPanelResizeHandler = (size: number) => {\n      setSplitPanelSize(size);\n      fireNonCancelableEvent(onSplitPanelResize, { size });\n    };\n\n    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState<SplitPanelSideToggleProps>({\n      ariaLabel: undefined,\n      displayed: false,\n    });\n\n    const drawersFocusControl = useFocusControl(!!activeDrawer?.id);\n    const navigationFocusControl = useFocusControl(navigationOpen);\n    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\n\n    useImperativeHandle(forwardRef, () => ({\n      closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),\n      openTools: () => onToolsToggle(true),\n      focusToolsClose: () => drawersFocusControl.setFocus(true),\n      focusActiveDrawer: () => drawersFocusControl.setFocus(true),\n      focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),\n    }));\n\n    const resolvedNavigation = navigationHide ? null : navigation ?? <></>;\n    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({\n      activeDrawerSize,\n      splitPanelSize,\n      minContentWidth,\n      navigationOpen: !!resolvedNavigation && navigationOpen,\n      navigationWidth,\n      placement,\n      splitPanelOpen,\n      splitPanelPosition: splitPanelPreferences?.position,\n    });\n\n    const { registered, toolbarProps } = useMultiAppLayout({\n      forceDeduplicationType,\n      ariaLabels: ariaLabelsWithDrawers,\n      navigation,\n      navigationOpen,\n      onNavigationToggle,\n      navigationFocusRef: navigationFocusControl.refs.toggle,\n      breadcrumbs,\n      activeDrawerId: activeDrawer?.id ?? null,\n      // only pass it down if there are non-empty drawers or tools\n      drawers: drawers?.length || !toolsHide ? drawers : undefined,\n      onActiveDrawerChange,\n      drawersFocusRef: drawersFocusControl.refs.toggle,\n      splitPanel,\n      splitPanelToggleProps: {\n        ...splitPanelToggleConfig,\n        active: splitPanelOpen,\n        controlId: splitPanelControlId,\n        position: splitPanelPosition,\n      },\n      splitPanelFocusRef: splitPanelFocusControl.refs.toggle,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n    });\n\n    const hasToolbar = !embeddedViewMode && !!toolbarProps;\n    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar);\n\n    const verticalOffsets = computeVerticalLayout({\n      topOffset: placement.insetBlockStart,\n      hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',\n      notificationsHeight: notificationsHeight ?? 0,\n      toolbarHeight: toolbarHeight ?? 0,\n      stickyNotifications: !!stickyNotifications,\n    });\n\n    const appLayoutInternals: AppLayoutInternals = {\n      ariaLabels: ariaLabelsWithDrawers,\n      headerVariant,\n      isMobile,\n      breadcrumbs,\n      discoveredBreadcrumbs,\n      stickyNotifications,\n      navigationOpen,\n      navigation: resolvedNavigation,\n      navigationFocusControl,\n      activeDrawer,\n      activeDrawerSize,\n      minDrawerSize,\n      maxDrawerSize,\n      drawers: drawers!,\n      drawersFocusControl,\n      splitPanelPosition,\n      splitPanelToggleConfig,\n      splitPanelOpen,\n      splitPanelControlId,\n      splitPanelFocusControl,\n      placement,\n      toolbarState,\n      setToolbarState,\n      verticalOffsets,\n      setToolbarHeight,\n      setNotificationsHeight,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n      onNavigationToggle,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    };\n\n    const splitPanelInternals: SplitPanelProviderProps = {\n      bottomOffset: 0,\n      getMaxHeight: () => {\n        const availableHeight =\n          document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n        // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n        return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n      },\n      maxWidth: maxSplitPanelSize,\n      isForcedPosition: splitPanelForcedPosition,\n      isOpen: splitPanelOpen,\n      leftOffset: 0,\n      onPreferencesChange: onSplitPanelPreferencesChangeHandler,\n      onResize: onSplitPanelResizeHandler,\n      onToggle: onSplitPanelToggleHandler,\n      position: splitPanelPosition,\n      reportSize: size => setSplitPanelReportedSize(size),\n      reportHeaderHeight: () => {\n        /*unused in this design*/\n      },\n      rightOffset: 0,\n      size: splitPanelSize,\n      topOffset: 0,\n      setSplitPanelToggle: setSplitPanelToggleConfig,\n      refs: splitPanelFocusControl.refs,\n    };\n\n    return (\n      <>\n        {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}\n        {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}\n        <SkeletonLayout\n          style={{\n            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,\n            [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,\n            paddingBlockEnd: splitPanelOpen ? splitPanelReportedSize : '',\n          }}\n          toolbar={\n            hasToolbar && <AppLayoutToolbar appLayoutInternals={appLayoutInternals} toolbarProps={toolbarProps} />\n          }\n          notifications={\n            notifications && (\n              <AppLayoutNotifications appLayoutInternals={appLayoutInternals}>{notifications}</AppLayoutNotifications>\n            )\n          }\n          contentHeader={contentHeader}\n          // delay rendering the content until registration of this instance is complete\n          content={registered ? content : null}\n          navigation={resolvedNavigation && <AppLayoutNavigation appLayoutInternals={appLayoutInternals} />}\n          navigationOpen={navigationOpen}\n          navigationWidth={navigationWidth}\n          tools={activeDrawer && <AppLayoutDrawer appLayoutInternals={appLayoutInternals} />}\n          toolsOpen={!!activeDrawer}\n          toolsWidth={activeDrawerSize}\n          sideSplitPanel={\n            splitPanelPosition === 'side' &&\n            splitPanel && (\n              <AppLayoutSplitPanelSide\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelSide>\n            )\n          }\n          bottomSplitPanel={\n            splitPanelPosition === 'bottom' && (\n              <AppLayoutSplitPanelBottom\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelBottom>\n            )\n          }\n          splitPanelOpen={splitPanelOpen}\n          placement={placement}\n          contentType={contentType}\n          maxContentWidth={maxContentWidth}\n          disableContentPaddings={disableContentPaddings}\n        />\n      </>\n    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}

package/app-layout/visual-refresh-toolbar/multi-layout.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { AppLayoutProps } from '../interfaces';
+import { Focusable } from '../utils/use-focus-control';
+import { SplitPanelToggleProps, ToolbarProps } from './toolbar';
+interface SharedProps {
+    forceDeduplicationType?: 'primary' | 'secondary';
+    ariaLabels: AppLayoutProps.Labels | undefined;
+    navigation: React.ReactNode;
+    navigationOpen: boolean;
+    onNavigationToggle: (open: boolean) => void;
+    navigationFocusRef: React.Ref<Focusable> | undefined;
+    breadcrumbs: React.ReactNode;
+    activeDrawerId: string | null;
+    drawers: ReadonlyArray<AppLayoutProps.Drawer> | undefined;
+    onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;
+    drawersFocusRef: React.Ref<Focusable> | undefined;
+    splitPanel: React.ReactNode;
+    splitPanelToggleProps: SplitPanelToggleProps;
+    splitPanelFocusRef: React.Ref<Focusable> | undefined;
+    onSplitPanelToggle: () => void;
+}
+export declare function useMultiAppLayout(props: SharedProps): {
+    registered: boolean;
+    toolbarProps: ToolbarProps | null;
+};
+export {};
+//# sourceMappingURL=multi-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-layout.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/multi-layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEhE,UAAU,WAAW;IACnB,sBAAsB,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACjD,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACrD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAC1D,oBAAoB,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtE,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACrD,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAuCD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW;;;EAoBnD"}

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

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useLayoutEffect, useState } from 'react';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { awsuiPluginsInternal } from '../../internal/plugins/api';
+function checkAlreadyExists(value, propName) {
+    if (value) {
+        warnOnce('AppLayout', `Another app layout instance on this page already defines ${propName} property. This instance will be ignored.`);
+        return true;
+    }
+    return false;
+}
+function mergeProps(ownProps, additionalProps) {
+    var _a;
+    const toolbar = {};
+    for (const props of [ownProps, ...additionalProps]) {
+        toolbar.ariaLabels = Object.assign((_a = toolbar.ariaLabels) !== null && _a !== void 0 ? _a : {}, props.ariaLabels);
+        if (props.drawers && !checkAlreadyExists(!!toolbar.drawers, 'tools or drawers')) {
+            toolbar.drawers = props.drawers;
+            toolbar.activeDrawerId = props.activeDrawerId;
+            toolbar.drawersFocusRef = props.drawersFocusRef;
+            toolbar.onActiveDrawerChange = props.onActiveDrawerChange;
+        }
+        if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {
+            toolbar.hasNavigation = true;
+            toolbar.navigationOpen = props.navigationOpen;
+            toolbar.navigationFocusRef = props.navigationFocusRef;
+            toolbar.onNavigationToggle = props.onNavigationToggle;
+        }
+        if (props.splitPanel && !checkAlreadyExists(!!toolbar.hasSplitPanel, 'splitPanel')) {
+            toolbar.hasSplitPanel = true;
+            toolbar.splitPanelFocusRef = props.splitPanelFocusRef;
+            toolbar.splitPanelToggleProps = props.splitPanelToggleProps;
+            toolbar.onSplitPanelToggle = props.onSplitPanelToggle;
+        }
+    }
+    return Object.keys(toolbar).length > 0 ? toolbar : null;
+}
+export function useMultiAppLayout(props) {
+    const [registration, setRegistration] = useState(null);
+    const { forceDeduplicationType } = props;
+    useLayoutEffect(() => {
+        return awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props => setRegistration(props));
+    }, [forceDeduplicationType]);
+    useLayoutEffect(() => {
+        if ((registration === null || registration === void 0 ? void 0 : registration.type) === 'secondary') {
+            registration.update(props);
+        }
+    });
+    return {
+        registered: !!(registration === null || registration === void 0 ? void 0 : registration.type),
+        toolbarProps: (registration === null || registration === void 0 ? void 0 : registration.type) === 'primary' ? mergeProps(props, registration.discoveredProps) : null,
+    };
+}
+//# sourceMappingURL=multi-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/multi-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAwBlE,SAAS,kBAAkB,CAAC,KAAc,EAAE,QAAgB;IAC1D,IAAI,KAAK,EAAE;QACT,QAAQ,CACN,WAAW,EACX,4DAA4D,QAAQ,2CAA2C,CAChH,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,UAAU,CAAC,QAAqB,EAAE,eAAoD;;IAC7F,MAAM,OAAO,GAAiB,EAAE,CAAC;IACjC,KAAK,MAAM,KAAK,IAAI,CAAC,QAAQ,EAAE,GAAG,eAAe,CAAC,EAAE;QAClD,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAA,OAAO,CAAC,UAAU,mCAAI,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,kBAAkB,CAAC,EAAE;YAC/E,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC;YAC9C,OAAO,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC;YAChD,OAAO,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;SAC3D;QACD,IAAI,KAAK,CAAC,UAAU,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE,YAAY,CAAC,EAAE;YAClF,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;YAC7B,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC;YAC9C,OAAO,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;YACtD,OAAO,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;SACvD;QACD,IAAI,KAAK,CAAC,UAAU,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE,YAAY,CAAC,EAAE;YAClF,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;YAC7B,OAAO,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;YACtD,OAAO,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC;YAC5D,OAAO,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;SACvD;KACF;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAkB;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAwC,IAAI,CAAC,CAAC;IAC9F,MAAM,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAC;IAEzC,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO,oBAAoB,CAAC,eAAe,CAAC,QAAQ,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE,CACnF,eAAe,CAAC,KAAuC,CAAC,CACzD,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,WAAW,EAAE;YACtC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,UAAU,EAAE,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAA;QAChC,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,MAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useState } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { RegistrationState } from '../../internal/plugins/controllers/app-layout-widget';\nimport { AppLayoutProps } from '../interfaces';\nimport { Focusable } from '../utils/use-focus-control';\nimport { SplitPanelToggleProps, ToolbarProps } from './toolbar';\n\ninterface SharedProps {\n  forceDeduplicationType?: 'primary' | 'secondary';\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  navigation: React.ReactNode;\n  navigationOpen: boolean;\n  onNavigationToggle: (open: boolean) => void;\n  navigationFocusRef: React.Ref<Focusable> | undefined;\n  breadcrumbs: React.ReactNode;\n  activeDrawerId: string | null;\n  drawers: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n  onActiveDrawerChange: ((drawerId: string | null) => void) | undefined;\n  drawersFocusRef: React.Ref<Focusable> | undefined;\n  splitPanel: React.ReactNode;\n  splitPanelToggleProps: SplitPanelToggleProps;\n  splitPanelFocusRef: React.Ref<Focusable> | undefined;\n  onSplitPanelToggle: () => void;\n}\n\nfunction checkAlreadyExists(value: boolean, propName: string) {\n  if (value) {\n    warnOnce(\n      'AppLayout',\n      `Another app layout instance on this page already defines ${propName} property. This instance will be ignored.`\n    );\n    return true;\n  }\n  return false;\n}\n\nfunction mergeProps(ownProps: SharedProps, additionalProps: ReadonlyArray<Partial<SharedProps>>): ToolbarProps | null {\n  const toolbar: ToolbarProps = {};\n  for (const props of [ownProps, ...additionalProps]) {\n    toolbar.ariaLabels = Object.assign(toolbar.ariaLabels ?? {}, props.ariaLabels);\n    if (props.drawers && !checkAlreadyExists(!!toolbar.drawers, 'tools or drawers')) {\n      toolbar.drawers = props.drawers;\n      toolbar.activeDrawerId = props.activeDrawerId;\n      toolbar.drawersFocusRef = props.drawersFocusRef;\n      toolbar.onActiveDrawerChange = props.onActiveDrawerChange;\n    }\n    if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {\n      toolbar.hasNavigation = true;\n      toolbar.navigationOpen = props.navigationOpen;\n      toolbar.navigationFocusRef = props.navigationFocusRef;\n      toolbar.onNavigationToggle = props.onNavigationToggle;\n    }\n    if (props.splitPanel && !checkAlreadyExists(!!toolbar.hasSplitPanel, 'splitPanel')) {\n      toolbar.hasSplitPanel = true;\n      toolbar.splitPanelFocusRef = props.splitPanelFocusRef;\n      toolbar.splitPanelToggleProps = props.splitPanelToggleProps;\n      toolbar.onSplitPanelToggle = props.onSplitPanelToggle;\n    }\n  }\n  return Object.keys(toolbar).length > 0 ? toolbar : null;\n}\n\nexport function useMultiAppLayout(props: SharedProps) {\n  const [registration, setRegistration] = useState<RegistrationState<SharedProps> | null>(null);\n  const { forceDeduplicationType } = props;\n\n  useLayoutEffect(() => {\n    return awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props =>\n      setRegistration(props as RegistrationState<SharedProps>)\n    );\n  }, [forceDeduplicationType]);\n\n  useLayoutEffect(() => {\n    if (registration?.type === 'secondary') {\n      registration.update(props);\n    }\n  });\n\n  return {\n    registered: !!registration?.type,\n    toolbarProps: registration?.type === 'primary' ? mergeProps(props, registration.discoveredProps) : null,\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,UAAU,sCAAsC;IAC9C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAAC,EAAE,kBAAkB,EAAE,EAAE,sCAAsC,eAgD/G;AAED,eAAO,MAAM,mCAAmC,6GAA+D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,UAAU,sCAAsC;IAC9C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAAC,EAAE,kBAAkB,EAAE,EAAE,sCAAsC,eAiD/G;AAED,eAAO,MAAM,mCAAmC,6GAA+D,CAAC"}

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

@@ -19,6 +19,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
     };
     return (React.createElement("nav", { "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.navigation, {
             [styles['is-navigation-open']]: navigationOpen,
+            [testutilStyles['drawer-closed']]: !navigationOpen,
         }, testutilStyles.navigation), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
             blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
             insetBlockStart: placement.insetBlockStart,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAC/G,kBAAkB,CAAC;IAErB,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;SAC/C,EACD,cAAc,CAAC,UAAU,CAC1B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YACxF,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport { findUpUntil } from '../../../internal/utils/dom';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement } =\n    appLayoutInternals;\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n        },\n        testutilStyles.navigation\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      <div className={clsx(styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAC/G,kBAAkB,CAAC;IAErB,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,CAC1B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YACxF,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport { findUpUntil } from '../../../internal/utils/dom';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement } =\n    appLayoutInternals;\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n          [testutilStyles['drawer-closed']]: !navigationOpen,\n        },\n        testutilStyles.navigation\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      <div className={clsx(styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}

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

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "navigation": "awsui_navigation_2p2ab_23w7n_97",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_23w7n_125",
-  "animating": "awsui_animating_2p2ab_23w7n_129",
-  "openNavigation": "awsui_openNavigation_2p2ab_23w7n_1",
-  "animated-content": "awsui_animated-content_2p2ab_23w7n_142",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_23w7n_151"
+  "navigation": "awsui_navigation_2p2ab_10zez_101",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_10zez_129",
+  "animating": "awsui_animating_2p2ab_10zez_133",
+  "openNavigation": "awsui_openNavigation_2p2ab_10zez_1",
+  "animated-content": "awsui_animated-content_2p2ab_10zez_146",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_10zez_155"
 };
   

package/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_23w7n_97:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_navigation_2p2ab_10zez_101:not(#\9) {
   position: sticky;
   background-color: var(--color-background-container-content-4un1ap, #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_23w7n_1 {
+@keyframes awsui_openNavigation_2p2ab_10zez_1 {
   from {
     opacity: 0;
     inline-size: calc(var(--space-layout-toggle-padding-lcu6qi, 12px) * 2 + var(--space-layout-toggle-diameter-hb85rk, 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_23w7n_97:not(#\9):not(.awsui_is-navigation-open_2p2ab_23w7n_125) {
+.awsui_navigation_2p2ab_10zez_101:not(#\9):not(.awsui_is-navigation-open_2p2ab_10zez_129) {
   inline-size: 0;
   display: none;
 }
-.awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9) {
-  animation: awsui_openNavigation_2p2ab_23w7n_1 var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
+.awsui_navigation_2p2ab_10zez_101.awsui_is-navigation-open_2p2ab_10zez_129.awsui_animating_2p2ab_10zez_133:not(#\9) {
+  animation: awsui_openNavigation_2p2ab_10zez_1 var(--motion-duration-refresh-only-fast-4jn2d7, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9) {
+  .awsui_navigation_2p2ab_10zez_101.awsui_is-navigation-open_2p2ab_10zez_129.awsui_animating_2p2ab_10zez_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_23w7n_97.awsui_is-navigation-open_2p2ab_23w7n_125.awsui_animating_2p2ab_23w7n_129:not(#\9) {
+.awsui-motion-disabled .awsui_navigation_2p2ab_10zez_101.awsui_is-navigation-open_2p2ab_10zez_129.awsui_animating_2p2ab_10zez_133:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_10zez_101.awsui_is-navigation-open_2p2ab_10zez_129.awsui_animating_2p2ab_10zez_133:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_navigation_2p2ab_23w7n_97 > .awsui_animated-content_2p2ab_23w7n_142:not(#\9) {
+.awsui_navigation_2p2ab_10zez_101 > .awsui_animated-content_2p2ab_10zez_146:not(#\9) {
   inline-size: var(--awsui-navigation-width-g964ok);
 }
 @media (max-width: 688px) {
-  .awsui_navigation_2p2ab_23w7n_97:not(#\9) {
+  .awsui_navigation_2p2ab_10zez_101:not(#\9) {
     --awsui-navigation-width-g964ok: 100vw;
   }
 }
 
-.awsui_hide-navigation_2p2ab_23w7n_151:not(#\9) {
+.awsui_hide-navigation_2p2ab_10zez_155:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-udix3p, 16px);
-  inset-block-start: var(--size-vertical-panel-icon-offset-wy8j08, 15px);
+  inset-block-start: 10px;
 }

package/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_23w7n_97",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_23w7n_125",
-  "animating": "awsui_animating_2p2ab_23w7n_129",
-  "openNavigation": "awsui_openNavigation_2p2ab_23w7n_1",
-  "animated-content": "awsui_animated-content_2p2ab_23w7n_142",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_23w7n_151"
+  "navigation": "awsui_navigation_2p2ab_10zez_101",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_10zez_129",
+  "animating": "awsui_animating_2p2ab_10zez_133",
+  "openNavigation": "awsui_openNavigation_2p2ab_10zez_1",
+  "animated-content": "awsui_animated-content_2p2ab_10zez_146",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_10zez_155"
 };