npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.294 → 3.0.296 - Mend

@cloudscape-design/components-themeable 3.0.294 → 3.0.296

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "182daec9b54abdf15e5b1569e7ff578041348ac0"
+  "commit": "897f229628b2517a5191f70e3b465f4140d1a45a"
 }

package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss CHANGED Viewed

@@ -121,7 +121,7 @@ section.appbar {
     box-shadow: awsui.$shadow-panel-toggle;
     grid-column: 1 / span 5;
     grid-row: 1;
-    height: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
+    height: var(#{custom-props.$mobileBarHeight});
     padding: 0 awsui.$space-m;
     position: sticky;
     top: var(#{custom-props.$offsetTop});

package/lib/internal/scss/app-layout/visual-refresh/layout.scss CHANGED Viewed

@@ -33,6 +33,7 @@
   #{custom-props.$mainOffsetLeft}: 0px;
   #{custom-props.$maxContentWidth}: 0px;
   #{custom-props.$minContentWidth}: 280px;
+  #{custom-props.$mobileBarHeight}: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
   #{custom-props.$notificationsHeight}: 0px;
   #{custom-props.$offsetTop}: 0px;
   #{custom-props.$offsetTopWithNotifications}: 0px;

package/lib/internal/scss/column-layout/styles.scss CHANGED Viewed

@@ -111,7 +111,7 @@ div.column-layout {
     &.grid-variant-text-grid {
       @include make-vertical-borders('left');
-      margin: calc(-1 * (#{awsui.$space-text-grid-vertical})) calc(-1 * #{$grid-gutter-width});
+      margin: calc(-1 * #{$grid-gutter-width} / 2) calc(-1 * #{$grid-gutter-width});
     }
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters) > * {
@@ -121,7 +121,7 @@ div.column-layout {
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters).grid-variant-text-grid > * {
       padding: 0 $grid-gutter-width;
-      margin: awsui.$space-text-grid-vertical 0;
+      margin: calc(#{$grid-gutter-width} / 2) 0;
     }
     &.grid-vertical-borders {

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,33 +1,34 @@
-    $activeDrawerWidth: --awsui-active-drawer-width-3j0evk;
-$offsetTop: --awsui-offset-top-3j0evk;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-3j0evk;
-$contentGapLeft: --awsui-content-gap-left-3j0evk;
-$contentGapRight: --awsui-content-gap-right-3j0evk;
-$contentHeight: --awsui-content-height-3j0evk;
-$defaultMaxContentWidth: --awsui-default-max-content-width-3j0evk;
-$defaultMinContentWidth: --awsui-default-min-content-width-3j0evk;
-$footerHeight: --awsui-footer-height-3j0evk;
-$headerHeight: --awsui-header-height-3j0evk;
-$layoutWidth: --awsui-layout-width-3j0evk;
-$mainOffsetLeft: --awsui-main-offset-left-3j0evk;
-$maxContentWidth: --awsui-max-content-width-3j0evk;
-$minContentWidth: --awsui-min-content-width-3j0evk;
-$notificationsHeight: --awsui-notifications-height-3j0evk;
-$overlapHeight: --awsui-overlap-height-3j0evk;
-$navigationWidth: --awsui-navigation-width-3j0evk;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-3j0evk;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-3j0evk;
-$splitPanelHeight: --awsui-split-panel-height-3j0evk;
-$splitPanelMinWidth: --awsui-split-panel-min-width-3j0evk;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-3j0evk;
-$toolsMaxWidth: --awsui-tools-max-width-3j0evk;
-$toolsWidth: --awsui-tools-width-3j0evk;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-3j0evk;
-$contentScrollMargin: --awsui-content-scroll-margin-3j0evk;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-3j0evk;
-$flashbarStackIndex: --awsui-flashbar-stack-index-3j0evk;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-3j0evk;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-3j0evk;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-3j0evk;
+    $activeDrawerWidth: --awsui-active-drawer-width-rrnppm;
+$offsetTop: --awsui-offset-top-rrnppm;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-rrnppm;
+$contentGapLeft: --awsui-content-gap-left-rrnppm;
+$contentGapRight: --awsui-content-gap-right-rrnppm;
+$contentHeight: --awsui-content-height-rrnppm;
+$defaultMaxContentWidth: --awsui-default-max-content-width-rrnppm;
+$defaultMinContentWidth: --awsui-default-min-content-width-rrnppm;
+$footerHeight: --awsui-footer-height-rrnppm;
+$headerHeight: --awsui-header-height-rrnppm;
+$layoutWidth: --awsui-layout-width-rrnppm;
+$mainOffsetLeft: --awsui-main-offset-left-rrnppm;
+$maxContentWidth: --awsui-max-content-width-rrnppm;
+$minContentWidth: --awsui-min-content-width-rrnppm;
+$mobileBarHeight: --awsui-mobile-bar-height-rrnppm;
+$notificationsHeight: --awsui-notifications-height-rrnppm;
+$overlapHeight: --awsui-overlap-height-rrnppm;
+$navigationWidth: --awsui-navigation-width-rrnppm;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-rrnppm;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-rrnppm;
+$splitPanelHeight: --awsui-split-panel-height-rrnppm;
+$splitPanelMinWidth: --awsui-split-panel-min-width-rrnppm;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-rrnppm;
+$toolsMaxWidth: --awsui-tools-max-width-rrnppm;
+$toolsWidth: --awsui-tools-width-rrnppm;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-rrnppm;
+$contentScrollMargin: --awsui-content-scroll-margin-rrnppm;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-rrnppm;
+$flashbarStackIndex: --awsui-flashbar-stack-index-rrnppm;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-rrnppm;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-rrnppm;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-rrnppm;

package/lib/internal/template/annotation-context/annotation/styles.css.js CHANGED Viewed

@@ -1,29 +1,29 @@
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1umef_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
-  "annotation": "awsui_annotation_1hpp3_1umef_145",
-  "next-button": "awsui_next-button_1hpp3_1umef_146",
-  "previous-button": "awsui_previous-button_1hpp3_1umef_147",
-  "finish-button": "awsui_finish-button_1hpp3_1umef_148",
-  "header": "awsui_header_1hpp3_1umef_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
-  "content": "awsui_content_1hpp3_1umef_151",
-  "description": "awsui_description_1hpp3_1umef_155",
-  "actionBar": "awsui_actionBar_1hpp3_1umef_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
-  "divider": "awsui_divider_1hpp3_1umef_171",
-  "hotspot": "awsui_hotspot_1hpp3_1umef_175",
-  "icon": "awsui_icon_1hpp3_1umef_215"
+  "arrow": "awsui_arrow_1hpp3_1271x_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1271x_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1271x_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1271x_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1271x_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1271x_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1271x_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1271x_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1271x_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1271x_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1271x_137",
+  "annotation": "awsui_annotation_1hpp3_1271x_145",
+  "next-button": "awsui_next-button_1hpp3_1271x_146",
+  "previous-button": "awsui_previous-button_1hpp3_1271x_147",
+  "finish-button": "awsui_finish-button_1hpp3_1271x_148",
+  "header": "awsui_header_1hpp3_1271x_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1271x_150",
+  "content": "awsui_content_1hpp3_1271x_151",
+  "description": "awsui_description_1hpp3_1271x_155",
+  "actionBar": "awsui_actionBar_1hpp3_1271x_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1271x_167",
+  "divider": "awsui_divider_1hpp3_1271x_171",
+  "hotspot": "awsui_hotspot_1hpp3_1271x_175",
+  "icon": "awsui_icon_1hpp3_1271x_215"
 };

package/lib/internal/template/annotation-context/annotation/styles.scoped.css CHANGED Viewed

@@ -90,11 +90,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_arrow_1hpp3_1umef_93:not(#\9) {
+.awsui_arrow_1hpp3_1271x_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_1umef_97:not(#\9), .awsui_arrow-inner_1hpp3_1umef_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_1271x_97:not(#\9), .awsui_arrow-inner_1hpp3_1271x_97:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1271x_97:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after {
   background-color: var(--color-border-status-info-0iedcr, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_1umef_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_1271x_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_1271x_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-yq3r41, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_1umef_128 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1umef_128 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_1271x_128 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1271x_128 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_1umef_131 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1umef_131 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_1271x_131 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1271x_131 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_1umef_134 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1umef_134 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_1271x_134 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1271x_134 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_1umef_137 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1umef_137 > .awsui_arrow-outer_1hpp3_1umef_97:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_1271x_137 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1271x_137 > .awsui_arrow-outer_1hpp3_1271x_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
@@ -142,37 +142,37 @@ 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_annotation_1hpp3_1umef_145:not(#\9),
-.awsui_next-button_1hpp3_1umef_146:not(#\9),
-.awsui_previous-button_1hpp3_1umef_147:not(#\9),
-.awsui_finish-button_1hpp3_1umef_148:not(#\9),
-.awsui_header_1hpp3_1umef_149:not(#\9),
-.awsui_step-counter-content_1hpp3_1umef_150:not(#\9),
-.awsui_content_1hpp3_1umef_151:not(#\9) {
+.awsui_annotation_1hpp3_1271x_145:not(#\9),
+.awsui_next-button_1hpp3_1271x_146:not(#\9),
+.awsui_previous-button_1hpp3_1271x_147:not(#\9),
+.awsui_finish-button_1hpp3_1271x_148:not(#\9),
+.awsui_header_1hpp3_1271x_149:not(#\9),
+.awsui_step-counter-content_1hpp3_1271x_150:not(#\9),
+.awsui_content_1hpp3_1271x_151:not(#\9) {
   /* used in test-utils */
 }
-.awsui_description_1hpp3_1umef_155:not(#\9) {
+.awsui_description_1hpp3_1271x_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-ynfts5, 4px);
 }
-.awsui_actionBar_1hpp3_1umef_160:not(#\9) {
+.awsui_actionBar_1hpp3_1271x_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
-.awsui_stepCounter_1hpp3_1umef_167:not(#\9) {
+.awsui_stepCounter_1hpp3_1271x_167:not(#\9) {
   margin-right: 20px;
 }
-.awsui_divider_1hpp3_1umef_171:not(#\9) {
+.awsui_divider_1hpp3_1271x_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
-.awsui_hotspot_1hpp3_1umef_175:not(#\9) {
+.awsui_hotspot_1hpp3_1271x_175:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: none;
   padding: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-3j0evk, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-rrnppm, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_1271x_175:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1271x_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1umef_175:not(#\9):focu
   border-radius: var(--border-radius-control-circular-focus-ring-l88ib6, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_hotspot_1hpp3_1umef_175 > .awsui_icon_1hpp3_1umef_215:not(#\9) {
+.awsui_hotspot_1hpp3_1271x_175 > .awsui_icon_1hpp3_1271x_215:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }
-.awsui_hotspot_1hpp3_1umef_175:not(#\9):hover > .awsui_icon_1hpp3_1umef_215 {
+.awsui_hotspot_1hpp3_1271x_175:not(#\9):hover > .awsui_icon_1hpp3_1271x_215 {
   stroke: var(--color-text-link-hover-ok01xk, #0073bb);
 }
-.awsui_hotspot_1hpp3_1umef_175:not(#\9):active > .awsui_icon_1hpp3_1umef_215 {
+.awsui_hotspot_1hpp3_1271x_175:not(#\9):active > .awsui_icon_1hpp3_1271x_215 {
   stroke: var(--color-text-link-default-753y4e, #0073bb);
 }

package/lib/internal/template/annotation-context/annotation/styles.selectors.js CHANGED Viewed

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_1umef_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
-  "annotation": "awsui_annotation_1hpp3_1umef_145",
-  "next-button": "awsui_next-button_1hpp3_1umef_146",
-  "previous-button": "awsui_previous-button_1hpp3_1umef_147",
-  "finish-button": "awsui_finish-button_1hpp3_1umef_148",
-  "header": "awsui_header_1hpp3_1umef_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
-  "content": "awsui_content_1hpp3_1umef_151",
-  "description": "awsui_description_1hpp3_1umef_155",
-  "actionBar": "awsui_actionBar_1hpp3_1umef_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
-  "divider": "awsui_divider_1hpp3_1umef_171",
-  "hotspot": "awsui_hotspot_1hpp3_1umef_175",
-  "icon": "awsui_icon_1hpp3_1umef_215"
+  "arrow": "awsui_arrow_1hpp3_1271x_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1271x_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1271x_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1271x_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1271x_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1271x_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1271x_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1271x_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1271x_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1271x_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1271x_137",
+  "annotation": "awsui_annotation_1hpp3_1271x_145",
+  "next-button": "awsui_next-button_1hpp3_1271x_146",
+  "previous-button": "awsui_previous-button_1hpp3_1271x_147",
+  "finish-button": "awsui_finish-button_1hpp3_1271x_148",
+  "header": "awsui_header_1hpp3_1271x_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1271x_150",
+  "content": "awsui_content_1hpp3_1271x_151",
+  "description": "awsui_description_1hpp3_1271x_155",
+  "actionBar": "awsui_actionBar_1hpp3_1271x_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1271x_167",
+  "divider": "awsui_divider_1hpp3_1271x_171",
+  "hotspot": "awsui_hotspot_1hpp3_1271x_175",
+  "icon": "awsui_icon_1hpp3_1271x_215"
 };

package/lib/internal/template/app-layout/drawer/interfaces.d.ts CHANGED Viewed

@@ -74,7 +74,11 @@ export interface DrawerItem {
     };
     ariaLabels: DrawerItemAriaLabels;
     resizable?: boolean;
-    size?: number;
+    defaultSize?: number;
+    onResize?: NonCancelableEventHandler<{
+        size: number;
+        id: string;
+    }>;
 }
 export interface SizeControlProps {
     position: 'side';

package/lib/internal/template/app-layout/drawer/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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~~CACf~~;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAC7C,QAAQ,CAAC,EAAE,yBAAyB,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/app-layout/drawer/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<ButtonProps.Ref>;\n close: React.Ref<ButtonProps.Ref>;\n };\n width: number;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n drawersAriaLabels?: DrawerItemAriaLabels \| undefined;\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string \| undefined;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n ~~size~~?: number;\n}\n\nexport interface SizeControlProps {\n position: 'side';\n splitPanelRef?: React.RefObject<HTMLDivElement>;\n handleRef?: React.RefObject<HTMLDivElement>;\n setSidePanelWidth: (width: number) => void;\n setBottomPanelHeight: (height: number) => void;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n };\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<ButtonProps.Ref>;\n close: React.Ref<ButtonProps.Ref>;\n };\n width: number;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n drawersAriaLabels?: DrawerItemAriaLabels \| undefined;\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string \| undefined;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n}\n\nexport interface SizeControlProps {\n position: 'side';\n splitPanelRef?: React.RefObject<HTMLDivElement>;\n handleRef?: React.RefObject<HTMLDivElement>;\n setSidePanelWidth: (width: number) => void;\n setBottomPanelHeight: (height: number) => void;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n };\n}\n"]}

package/lib/internal/template/app-layout/drawer/resizable-drawer.js CHANGED Viewed

@@ -14,7 +14,7 @@ export const ResizableDrawer = (_a) => {
     var _b;
     var { onResize, size, getMaxWidth, refs, activeDrawer } = _a, props = __rest(_a, ["onResize", "size", "getMaxWidth", "refs", "activeDrawer"]);
     const { isOpen, children, isMobile } = props;
-    const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.size) && activeDrawer.size < 280 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.size : 280;
+    const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) && activeDrawer.defaultSize < 280 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize : 280;
     const [relativeSize, setRelativeSize] = useState(0);
     useEffect(() => {
         // effects are called inside out in the components tree

package/lib/internal/template/app-layout/drawer/resizable-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAG/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAOT,EAAE,EAAE;;QAPK,EAC9B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,YAAY,OAES,EADlB,KAAK,cANsB,2DAO/B,CADS;IAER,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,SAAS,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,~~IAAI~~,KAAI,YAAY,CAAC,~~IAAI~~,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,~~IAAI~~,CAAC,CAAC,CAAC,GAAG,CAAC;~~IAC3F~~,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;YAC9B,eAAe,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAC/B,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,MAAM,IAAI,EAAE,IAAI,QAAQ,IAAI,SAAS,EAAE;YACzC,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,oBAAoB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IACtC,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ;QACR,aAAa,EAAE,eAAe;QAC9B,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,iBAAiB;QACjB,oBAAoB;KACrB,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,6BACE,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,mBACnC,GAAG,mBACH,CAAC,mBACD,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC,EAC3G,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB;QAElC,oBAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,GAAI,CACrG,CACP,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,GAAG,EAAE,eAAe,EACpB,YAAY,EACV,CAAC,QAAQ;aACT,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA,IAAI,6BAAK,SAAS,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,IAAG,YAAY,CAAO,KAGzG,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../../split-panel/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../../split-panel/utils/use-keyboard-events';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport { SizeControlProps, ResizableDrawerProps } from './interfaces';\n\nexport const ResizableDrawer = ({\n onResize,\n size,\n getMaxWidth,\n refs,\n activeDrawer,\n ...props\n}: ResizableDrawerProps) => {\n const { isOpen, children, isMobile } = props;\n\n const MIN_WIDTH = activeDrawer?.~~size~~ && activeDrawer.~~size~~ < 280 ? activeDrawer?.~~size~~ : 280;\n const [relativeSize, setRelativeSize] = useState(0);\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, getMaxWidth]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n const id = activeDrawer?.id;\n\n if (isOpen && id && maxWidth >= MIN_WIDTH) {\n onResize({ size, id });\n }\n };\n\n const position = 'side';\n const setBottomPanelHeight = () => {};\n const drawerRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n splitPanelRef: drawerRefObject,\n handleRef: refs.slider,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n </div>\n );\n\n return (\n <Drawer\n {...props}\n ref={drawerRefObject}\n resizeHandle={\n !isMobile &&\n activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n }\n >\n {children}\n </Drawer>\n );\n};\n"]}
1	+ {"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.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 clsx from 'clsx';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../../split-panel/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../../split-panel/utils/use-keyboard-events';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport { SizeControlProps, ResizableDrawerProps } from './interfaces';\n\nexport const ResizableDrawer = ({\n onResize,\n size,\n getMaxWidth,\n refs,\n activeDrawer,\n ...props\n}: ResizableDrawerProps) => {\n const { isOpen, children, isMobile } = props;\n\n const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 280 ? activeDrawer?.defaultSize : 280;\n const [relativeSize, setRelativeSize] = useState(0);\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, getMaxWidth]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n const id = activeDrawer?.id;\n\n if (isOpen && id && maxWidth >= MIN_WIDTH) {\n onResize({ size, id });\n }\n };\n\n const position = 'side';\n const setBottomPanelHeight = () => {};\n const drawerRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n splitPanelRef: drawerRefObject,\n handleRef: refs.slider,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n </div>\n );\n\n return (\n <Drawer\n {...props}\n ref={drawerRefObject}\n resizeHandle={\n !isMobile &&\n activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n }\n >\n {children}\n </Drawer>\n );\n};\n"]}

package/lib/internal/template/app-layout/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,~~KAAwE~~,MAAM,OAAO,CAAC;~~AAM7F~~,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;~~AAgsBF~~,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiF,MAAM,OAAO,CAAC;AAMtG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AA2sBF,eAAe,SAAS,CAAC"}

package/lib/internal/template/app-layout/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { getBaseProps } from '../internal/base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
 import { useMobile } from '../internal/hooks/use-mobile';
@@ -140,23 +140,25 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
         controlledProp: 'splitPanelOpen',
         changeHandler: 'onSplitPanelToggle',
     });
-    const sizes = (() => {
+    const drawerItems = useMemo(() => (drawers === null || drawers === void 0 ? void 0 : drawers.items) || [], [drawers === null || drawers === void 0 ? void 0 : drawers.items]);
+    const getDrawerItemSizes = useCallback(() => {
         const sizes = {};
-        if (!drawers) {
+        if (!drawerItems) {
             return {};
         }
-        for (const item of drawers.items) {
-            if (item.size) {
-                sizes[item.id] = item.size;
+        for (const item of drawerItems) {
+            if (item.defaultSize) {
+                sizes[item.id] = item.defaultSize || toolsWidth;
             }
         }
         return sizes;
-    })();
-    const [drawerSizes = {}, setDrawerSizes] = useControllable(Object.keys(sizes).length > 0 ? sizes : undefined, drawers === null || drawers === void 0 ? void 0 : drawers.onResize, {}, {
-        componentName: 'AppLayout',
-        controlledProp: 'drawers.items[].size',
-        changeHandler: 'drawers.onResize',
-    });
+    }, [drawerItems, toolsWidth]);
+    const [drawerSizes, setDrawerSizes] = useState(() => getDrawerItemSizes());
+    useEffect(() => {
+        // Ensure we only set new drawer items by performing a shallow merge
+        // of the latest drawer item sizes, and previous drawer item sizes.
+        setDrawerSizes(prev => (Object.assign(Object.assign({}, getDrawerItemSizes()), prev)));
+    }, [getDrawerItemSizes]);
     const drawerSize = (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) && drawerSizes[selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id] ? drawerSizes[selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id] : toolsWidth;
     const splitPanelPosition = (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) || 'bottom';
     const [splitPanelReportedToggle, setSplitPanelReportedToggle] = useState({
@@ -221,7 +223,8 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
         if (!mainContentRef.current || !defaults.minContentWidth) {
             return NaN;
         }
-        const width = parseInt(getComputedStyle(mainContentRef.current).width);
+        // Either use the computed width of the drawer or the drawerSize as defined.
+        const width = parseInt(getComputedStyle(mainContentRef.current).width || `${drawerSize}`);
         // when disableContentPaddings is true there is less available space,
         // so we subtract space-scaled-2x-xxxl * 2 for left and right padding
         const contentPadding = disableContentPaddings ? 80 : 0;
@@ -341,9 +344,10 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
         : splitPanelOpen
             ? splitPanelReportedSize
             : splitPanelReportedHeaderHeight)) !== null && _c !== void 0 ? _c : undefined;
+    const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.height);
     return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef },
         React.createElement("div", { className: styles['layout-wrapper'], style: contentHeightStyle },
-            isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, drawers: drawers
+            isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers
                     ? {
                         items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,
                         activeDrawerId: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id,
@@ -386,9 +390,13 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                                 !contentHeader &&
                                 styles['content-wrapper-first-child']) }),
                             React.createElement(AppLayoutContext.Provider, { value: {
-                                    stickyOffsetTop: (disableBodyScroll ? 0 : headerHeight) +
-                                        (stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
+                                    stickyOffsetTop:
+                                    // We don't support the table header being sticky in case the deprecated disableBodyScroll is enabled,
+                                    // therefore we ensure the table header scrolls out of view by offseting a large enough value (9999px)
+                                    (disableBodyScroll ? (isMobile ? -9999 : 0) : headerHeight) +
+                                        (isMobile ? 0 : stickyNotificationsHeight !== null ? stickyNotificationsHeight : 0),
                                     stickyOffsetBottom: footerHeight + (splitPanelBottomOffset || 0),
+                                    mobileBarHeight: mobileBarHeight !== null && mobileBarHeight !== void 0 ? mobileBarHeight : 0,
                                     hasBreadcrumbs: !!breadcrumbs,
                                 } }, content))),
                     finalSplitPanePosition === 'bottom' && splitPanelWrapped),
@@ -407,6 +415,10 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                             },
                         }, size: !isResizeInvalid ? drawerSize : toolsWidth, onResize: changeDetail => {
                             fireNonCancelableEvent(drawers.onResize, changeDetail);
+                            const drawerItem = drawerItems.find(({ id }) => id === changeDetail.id);
+                            if (drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.onResize) {
+                                fireNonCancelableEvent(drawerItem.onResize, changeDetail);
+                            }
                             setDrawerSizes(Object.assign(Object.assign({}, drawerSizes), { [changeDetail.id]: changeDetail.size }));
                         }, refs: drawerRefs, getMaxWidth: getDrawerMaxWidth }, selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.content)) : (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
                 hasDrawers && (React.createElement(DrawerTriggersBar, { contentClassName: testutilStyles['drawers-desktop-triggers-container'], toggleClassName: testutilStyles['drawers-trigger'], bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {