@cloudscape-design/components-themeable 3.0.984 → 3.0.986

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "707472c1bedd06d5d7ecbf24063a6751fe46b389"
+  "commit": "894b79b980721dfe473688157944b6e94b6428ee"
 }

package/lib/internal/scss/app-layout/test-classes/styles.scss

@@ -25,6 +25,7 @@
 .drawers-slider,
 .toolbar,
 .trigger-wrapper-tooltip-visible,
-.trigger-tooltip {
+.trigger-tooltip,
+.active-drawer-expanded-mode-button {
   /* used in test-utils */
 }

package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss

@@ -19,6 +19,10 @@
   }
 }
 
+$global-drawer-gap-size: 8px;
+$global-drawer-expanded-mode-motion: #{awsui.$motion-duration-refresh-only-slow} #{awsui.$motion-easing-refresh-only-a};
+$drawer-resize-handle-size: awsui.$space-m;
+
 .drawer {
   position: sticky;
   z-index: constants.$drawer-z-index;
@@ -34,6 +38,14 @@
   pointer-events: auto;
   word-wrap: break-word;
 
+  &.with-expanded-motion {
+    @include styles.with-motion {
+      transition:
+        inline-size #{$global-drawer-expanded-mode-motion},
+        min-inline-size #{$global-drawer-expanded-mode-motion};
+    }
+  }
+
   @include desktop-only {
     &:not(.legacy) {
       border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
@@ -48,8 +60,14 @@
   }
 
   &.drawer-global {
+    display: block;
+
+    @include desktop-only {
+      inline-size: var(#{custom-props.$drawerSize});
+    }
+
     @include mobile-only {
-      &:not(.last-opened) {
+      &:not(.last-opened):not(.drawer-expanded) {
         display: none;
       }
     }
@@ -59,6 +77,47 @@
     display: none;
   }
 
+  &.drawer-expanded {
+    inline-size: 100%;
+
+    @include desktop-only {
+      border-inline-start: none;
+
+      &.has-next-siblings {
+        > .global-drawer-wrapper {
+          &:after {
+            content: '';
+            position: absolute;
+            block-size: 100%;
+            inline-size: $global-drawer-gap-size;
+            inset-inline-end: 0;
+            background: awsui.$color-gap-global-drawer;
+            border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+            box-sizing: border-box;
+          }
+        }
+      }
+
+      > .global-drawer-wrapper {
+        inline-size: 100%;
+        grid-template-columns: $global-drawer-gap-size 1fr;
+
+        > .drawer-content-container {
+          grid-column: 2;
+        }
+
+        > .drawer-gap {
+          grid-column: 1;
+          grid-row: 1;
+          block-size: 100%;
+          inline-size: $global-drawer-gap-size;
+          background: awsui.$color-gap-global-drawer;
+          border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+        }
+      }
+    }
+  }
+
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;
@@ -66,6 +125,7 @@
     grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
     grid-template-rows: constants.$toolbar-vertical-panel-icon-offset auto 1fr;
     overflow-y: auto;
+    min-inline-size: var(#{custom-props.$drawerSize});
 
     > .drawer-close-button {
       grid-column: 3;
@@ -74,6 +134,15 @@
       align-self: start;
     }
 
+    > .drawer-expanded-mode-button {
+      grid-column: 2;
+      grid-row: 2;
+      z-index: 1;
+      align-self: start;
+      display: flex;
+      justify-content: end;
+    }
+
     > .drawer-content {
       grid-column: 1 / span 4;
       grid-row: 1 / span 2;
@@ -90,4 +159,81 @@
     display: flex;
     align-items: center;
   }
+
+  > .global-drawer-wrapper {
+    display: grid;
+    min-inline-size: var(#{custom-props.$drawerSize});
+    grid-template-columns: $global-drawer-gap-size $drawer-resize-handle-size 1fr;
+    overflow: hidden;
+
+    @include mobile-only {
+      grid-template-columns: 1fr;
+    }
+
+    > .drawer-gap {
+      grid-column: 1;
+      grid-row: 1;
+      block-size: 100%;
+      inline-size: $global-drawer-gap-size;
+      background: awsui.$color-gap-global-drawer;
+      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    }
+
+    > .drawer-slider {
+      grid-column: 2;
+      grid-row: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    > .drawer-content-container {
+      grid-row: 1;
+      display: grid;
+      grid-template-columns: $drawer-resize-handle-size 1fr auto $drawer-resize-handle-size;
+      grid-template-rows: constants.$toolbar-vertical-panel-icon-offset auto 1fr;
+      overflow-y: auto;
+
+      @include desktop-only {
+        grid-column: 2 / span 2;
+      }
+
+      @include mobile-only {
+        grid-column: 1 / span 2;
+      }
+
+      > .drawer-actions {
+        position: absolute;
+        display: flex;
+        align-self: flex-start;
+        justify-self: flex-end;
+        padding-inline-end: awsui.$space-m;
+        padding-block-start: constants.$toolbar-vertical-panel-icon-offset;
+      }
+
+      > .drawer-close-button {
+        grid-column: 3;
+        grid-row: 2;
+        z-index: 1;
+        align-self: start;
+      }
+
+      > .drawer-expanded-mode-button {
+        grid-column: 2;
+        grid-row: 2;
+        z-index: 1;
+        align-self: start;
+        display: flex;
+        justify-content: end;
+      }
+
+      > .drawer-content {
+        grid-column: 1 / span 4;
+        grid-row: 1 / span 2;
+
+        &.drawer-content-hidden {
+          display: none;
+        }
+      }
+    }
+  }
 }

package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/styles.scss

@@ -22,6 +22,7 @@
 
 @mixin grid-column-full-content-width {
   grid-column: 1 / -1;
+
   @include desktop-only {
     grid-column: 2 / 5;
   }
@@ -72,6 +73,17 @@
         }
       }
     }
+
+    &.drawer-expanded-mode {
+      grid-template-columns:
+        0
+        0
+        0
+        0
+        0
+        0
+        auto;
+    }
   }
 }
 
@@ -82,6 +94,7 @@
   grid-column: 1 / -1;
   background: awsui.$color-background-container-content;
   opacity: 1;
+
   @include mobile-only {
     inline-size: 100%;
   }
@@ -109,6 +122,7 @@
     /* stylelint-disable plugin/no-unsupported-browser-features */
     &:not(:has(> [data-testid])) {
       inline-size: var(#{custom-props.$toolsWidth});
+
       &.tools-open {
         border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
       }
@@ -120,6 +134,7 @@
   @include desktop-only {
     display: flex;
     grid-area: global-tools;
+    justify-content: flex-end;
   }
 }
 
@@ -144,6 +159,7 @@
   border-inline: none;
   opacity: 0;
   z-index: 0;
+
   &.navigation,
   &.tools,
   &.global-tools {
@@ -176,6 +192,7 @@
   grid-area: main;
   margin-block-start: awsui.$space-scaled-s;
   margin-block-end: awsui.$space-layout-content-bottom;
+
   &-disable-paddings {
     margin-block: 0;
     @include grid-column-full-content-width;
@@ -196,3 +213,7 @@
     visibility: hidden;
   }
 }
+
+.hidden {
+  display: none;
+}

package/lib/internal/scss/drawer/styles.scss

@@ -5,6 +5,13 @@
 
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../app-layout/constants.scss' as constants;
+
+@mixin desktop-only {
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    @content;
+  }
+}
 
 .drawer {
   @include styles.styles-reset;
@@ -17,10 +24,24 @@
   justify-content: space-between;
   color: awsui.$color-text-heading-default;
   padding-block: awsui.$space-panel-header-vertical;
-  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
+  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-l} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
 
+  @include desktop-only {
+    &.with-additional-action {
+      /*
+        this padding is needed when the drawer renders inside a runtime drawer and the runtime drawer has an additional action
+        on the right (or left in rtl). in this case this padding ensures that the drawer's content does not overlap with runtime actions
+      */
+      padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xxl});
+    }
+  }
+
+  &.with-runtime-context {
+    padding-block: constants.$toolbar-vertical-panel-icon-offset;
+  }
+
   .with-toolbar > & {
     border-color: transparent;
     margin-block-end: 0px;
@@ -43,11 +64,6 @@
   display: inline-flex;
   align-items: flex-start;
   z-index: 1;
-  /*
-   Compensate for the difference between the runtime drawer's and the drawer component's heading
-   to ensure the header actions are vertically aligned
-   */
-  margin-block-start: -6px;
 }
 
 .content-with-paddings:not(:empty) {

package/lib/internal/scss/internal/components/chart-popover/test-classes/styles.scss

@@ -7,4 +7,4 @@
 .body,
 .footer {
   /* used in test-utils */
-}
+}

package/lib/internal/scss/internal/components/panel-resize-handle/styles.scss

@@ -29,5 +29,6 @@
 
 .slider-side {
   cursor: ew-resize;
-  padding-inline-start: 2px;
+  margin-block: 0;
+  margin-inline-end: 0;
 }

package/lib/internal/template/app-layout/test-classes/styles.css.js

@@ -1,28 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fj9k_z5zo8_5",
-  "navigation": "awsui_navigation_1fj9k_z5zo8_6",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_z5zo8_7",
-  "navigation-close": "awsui_navigation-close_1fj9k_z5zo8_8",
-  "content": "awsui_content_1fj9k_z5zo8_9",
-  "notifications": "awsui_notifications_1fj9k_z5zo8_10",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_z5zo8_11",
-  "tools": "awsui_tools_1fj9k_z5zo8_12",
-  "tools-close": "awsui_tools-close_1fj9k_z5zo8_13",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_z5zo8_14",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_z5zo8_15",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_z5zo8_16",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_z5zo8_17",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_z5zo8_18",
-  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_z5zo8_19",
-  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_z5zo8_20",
-  "active-drawer": "awsui_active-drawer_1fj9k_z5zo8_21",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_z5zo8_22",
-  "overflow-menu": "awsui_overflow-menu_1fj9k_z5zo8_23",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_z5zo8_24",
-  "toolbar": "awsui_toolbar_1fj9k_z5zo8_25",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_z5zo8_26",
-  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_z5zo8_27"
+  "root": "awsui_root_1fj9k_jfqbk_5",
+  "navigation": "awsui_navigation_1fj9k_jfqbk_6",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_jfqbk_7",
+  "navigation-close": "awsui_navigation-close_1fj9k_jfqbk_8",
+  "content": "awsui_content_1fj9k_jfqbk_9",
+  "notifications": "awsui_notifications_1fj9k_jfqbk_10",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_jfqbk_11",
+  "tools": "awsui_tools_1fj9k_jfqbk_12",
+  "tools-close": "awsui_tools-close_1fj9k_jfqbk_13",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_jfqbk_14",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_jfqbk_15",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_jfqbk_16",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_jfqbk_17",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_jfqbk_18",
+  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_jfqbk_19",
+  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_jfqbk_20",
+  "active-drawer": "awsui_active-drawer_1fj9k_jfqbk_21",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_jfqbk_22",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_jfqbk_23",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_jfqbk_24",
+  "toolbar": "awsui_toolbar_1fj9k_jfqbk_25",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_jfqbk_26",
+  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_jfqbk_27",
+  "active-drawer-expanded-mode-button": "awsui_active-drawer-expanded-mode-button_1fj9k_jfqbk_28"
 };
   

package/lib/internal/template/app-layout/test-classes/styles.scoped.css

@@ -2,28 +2,29 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_z5zo8_5:not(#\9),
-.awsui_navigation_1fj9k_z5zo8_6:not(#\9),
-.awsui_navigation-toggle_1fj9k_z5zo8_7:not(#\9),
-.awsui_navigation-close_1fj9k_z5zo8_8:not(#\9),
-.awsui_content_1fj9k_z5zo8_9:not(#\9),
-.awsui_notifications_1fj9k_z5zo8_10:not(#\9),
-.awsui_breadcrumbs_1fj9k_z5zo8_11:not(#\9),
-.awsui_tools_1fj9k_z5zo8_12:not(#\9),
-.awsui_tools-close_1fj9k_z5zo8_13:not(#\9),
-.awsui_tools-toggle_1fj9k_z5zo8_14:not(#\9),
-.awsui_drawer-closed_1fj9k_z5zo8_15:not(#\9),
-.awsui_mobile-bar_1fj9k_z5zo8_16:not(#\9),
-.awsui_disable-body-scroll-root_1fj9k_z5zo8_17:not(#\9),
-.awsui_drawers-trigger_1fj9k_z5zo8_18:not(#\9),
-.awsui_drawers-trigger-global_1fj9k_z5zo8_19:not(#\9),
-.awsui_drawers-trigger-with-badge_1fj9k_z5zo8_20:not(#\9),
-.awsui_active-drawer_1fj9k_z5zo8_21:not(#\9),
-.awsui_active-drawer-close-button_1fj9k_z5zo8_22:not(#\9),
-.awsui_overflow-menu_1fj9k_z5zo8_23:not(#\9),
-.awsui_drawers-slider_1fj9k_z5zo8_24:not(#\9),
-.awsui_toolbar_1fj9k_z5zo8_25:not(#\9),
-.awsui_trigger-wrapper-tooltip-visible_1fj9k_z5zo8_26:not(#\9),
-.awsui_trigger-tooltip_1fj9k_z5zo8_27:not(#\9) {
+.awsui_root_1fj9k_jfqbk_5:not(#\9),
+.awsui_navigation_1fj9k_jfqbk_6:not(#\9),
+.awsui_navigation-toggle_1fj9k_jfqbk_7:not(#\9),
+.awsui_navigation-close_1fj9k_jfqbk_8:not(#\9),
+.awsui_content_1fj9k_jfqbk_9:not(#\9),
+.awsui_notifications_1fj9k_jfqbk_10:not(#\9),
+.awsui_breadcrumbs_1fj9k_jfqbk_11:not(#\9),
+.awsui_tools_1fj9k_jfqbk_12:not(#\9),
+.awsui_tools-close_1fj9k_jfqbk_13:not(#\9),
+.awsui_tools-toggle_1fj9k_jfqbk_14:not(#\9),
+.awsui_drawer-closed_1fj9k_jfqbk_15:not(#\9),
+.awsui_mobile-bar_1fj9k_jfqbk_16:not(#\9),
+.awsui_disable-body-scroll-root_1fj9k_jfqbk_17:not(#\9),
+.awsui_drawers-trigger_1fj9k_jfqbk_18:not(#\9),
+.awsui_drawers-trigger-global_1fj9k_jfqbk_19:not(#\9),
+.awsui_drawers-trigger-with-badge_1fj9k_jfqbk_20:not(#\9),
+.awsui_active-drawer_1fj9k_jfqbk_21:not(#\9),
+.awsui_active-drawer-close-button_1fj9k_jfqbk_22:not(#\9),
+.awsui_overflow-menu_1fj9k_jfqbk_23:not(#\9),
+.awsui_drawers-slider_1fj9k_jfqbk_24:not(#\9),
+.awsui_toolbar_1fj9k_jfqbk_25:not(#\9),
+.awsui_trigger-wrapper-tooltip-visible_1fj9k_jfqbk_26:not(#\9),
+.awsui_trigger-tooltip_1fj9k_jfqbk_27:not(#\9),
+.awsui_active-drawer-expanded-mode-button_1fj9k_jfqbk_28:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/app-layout/test-classes/styles.selectors.js

@@ -2,28 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_z5zo8_5",
-  "navigation": "awsui_navigation_1fj9k_z5zo8_6",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_z5zo8_7",
-  "navigation-close": "awsui_navigation-close_1fj9k_z5zo8_8",
-  "content": "awsui_content_1fj9k_z5zo8_9",
-  "notifications": "awsui_notifications_1fj9k_z5zo8_10",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_z5zo8_11",
-  "tools": "awsui_tools_1fj9k_z5zo8_12",
-  "tools-close": "awsui_tools-close_1fj9k_z5zo8_13",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_z5zo8_14",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_z5zo8_15",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_z5zo8_16",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_z5zo8_17",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_z5zo8_18",
-  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_z5zo8_19",
-  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_z5zo8_20",
-  "active-drawer": "awsui_active-drawer_1fj9k_z5zo8_21",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_z5zo8_22",
-  "overflow-menu": "awsui_overflow-menu_1fj9k_z5zo8_23",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_z5zo8_24",
-  "toolbar": "awsui_toolbar_1fj9k_z5zo8_25",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_z5zo8_26",
-  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_z5zo8_27"
+  "root": "awsui_root_1fj9k_jfqbk_5",
+  "navigation": "awsui_navigation_1fj9k_jfqbk_6",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_jfqbk_7",
+  "navigation-close": "awsui_navigation-close_1fj9k_jfqbk_8",
+  "content": "awsui_content_1fj9k_jfqbk_9",
+  "notifications": "awsui_notifications_1fj9k_jfqbk_10",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_jfqbk_11",
+  "tools": "awsui_tools_1fj9k_jfqbk_12",
+  "tools-close": "awsui_tools-close_1fj9k_jfqbk_13",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_jfqbk_14",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_jfqbk_15",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_jfqbk_16",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_jfqbk_17",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_jfqbk_18",
+  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_jfqbk_19",
+  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_jfqbk_20",
+  "active-drawer": "awsui_active-drawer_1fj9k_jfqbk_21",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_jfqbk_22",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_jfqbk_23",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_jfqbk_24",
+  "toolbar": "awsui_toolbar_1fj9k_jfqbk_25",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_jfqbk_26",
+  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_jfqbk_27",
+  "active-drawer-expanded-mode-button": "awsui_active-drawer-expanded-mode-button_1fj9k_jfqbk_28"
 };
   

package/lib/internal/template/app-layout/utils/use-drawers.d.ts

@@ -39,6 +39,8 @@ export declare function useDrawers({ drawers, activeDrawerId: controlledActiveDr
         size: number;
     }) => void;
     onActiveGlobalDrawersChange: (drawerId: string, { initiatedByUserAction }?: Partial<OnChangeParams>) => void;
+    expandedDrawerId: string | null;
+    setExpandedDrawerId: React.Dispatch<React.SetStateAction<string | null>>;
 };
 export {};
 //# sourceMappingURL=use-drawers.d.ts.map

package/lib/internal/template/app-layout/utils/use-drawers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,eAAe,yBAAyB,CAAC;AAEtD,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,OAAO,CAAC;CAChC;AAiJD,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,GAAG;IAC7F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,UAAU,CACxB,EACE,OAAO,EACP,cAAc,EAAE,wBAAwB,EACxC,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,eAAe,EAClB,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,EACxC,UAAU,EAAE,UAAU;;;;;;;;;;;;;;wCAoBP,MAAM,GAAG,IAAI,8BACC,cAAc;;YATO,MAAM;cAAQ,MAAM;;4CAuC1D,MAAM,8BACW,QAAQ,cAAc,CAAC;EA8FrD"}
+{"version":3,"file":"use-drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,eAAO,MAAM,eAAe,yBAAyB,CAAC;AAEtD,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,OAAO,CAAC;CAChC;AAiJD,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,GAAG;IAC7F,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,UAAU,CACxB,EACE,OAAO,EACP,cAAc,EAAE,wBAAwB,EACxC,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,eAAe,EAClB,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,EACxC,UAAU,EAAE,UAAU;;;;;;;;;;;;;;wCAqBP,MAAM,GAAG,IAAI,8BACC,cAAc;;YATO,MAAM;cAAQ,MAAM;;4CAuC1D,MAAM,8BACW,QAAQ,cAAc,CAAC;;;EAmGrD"}

package/lib/internal/template/app-layout/utils/use-drawers.js

@@ -129,6 +129,7 @@ export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId,
     });
     const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState([]);
     const [drawerSizes, setDrawerSizes] = useState({});
+    const [expandedDrawerId, setExpandedDrawerId] = useState(null);
     // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer
     const drawersOpenQueue = useRef([]);
     function onActiveDrawerResize({ id, size }) {
@@ -167,6 +168,9 @@ export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId,
             onGlobalDrawerFocus === null || onGlobalDrawerFocus === void 0 ? void 0 : onGlobalDrawerFocus(drawerId, false);
             drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId);
             fireNonCancelableEvent(drawer === null || drawer === void 0 ? void 0 : drawer.onToggle, { isOpen: false, initiatedByUserAction });
+            if (drawerId === expandedDrawerId) {
+                setExpandedDrawerId(null);
+            }
         }
         else if (drawerId) {
             onAddNewActiveDrawer === null || onAddNewActiveDrawer === void 0 ? void 0 : onAddNewActiveDrawer(drawerId);
@@ -223,6 +227,8 @@ export function useDrawers({ drawers, activeDrawerId: controlledActiveDrawerId,
         onActiveDrawerChange,
         onActiveDrawerResize,
         onActiveGlobalDrawersChange,
+        expandedDrawerId,
+        setExpandedDrawerId,
     };
 }
 //# sourceMappingURL=use-drawers.js.map