@cloudscape-design/components 3.0.519 → 3.0.521

package/annotation-context/annotation/styles.scoped.css

@@ -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_1dlb8_93:not(#\9) {
+.awsui_arrow_1hpp3_b3kyy_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9), .awsui_arrow-inner_1hpp3_1dlb8_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9), .awsui_arrow-inner_1hpp3_b3kyy_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_1dlb8_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_1dlb8_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_b3kyy_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_1dlb8_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after {
   background-color: var(--color-border-status-info-8upc6f, #0972d3);
 }
-.awsui_arrow-inner_1hpp3_1dlb8_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_b3kyy_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_1dlb8_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_b3kyy_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-mvnbre, #f2f8fd);
 }
-.awsui_arrow-position-right-top_1hpp3_1dlb8_128 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_1dlb8_128 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_b3kyy_128 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_b3kyy_128 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
-.awsui_arrow-position-left-top_1hpp3_1dlb8_131 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_1dlb8_131 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_b3kyy_131 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_b3kyy_131 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
-.awsui_arrow-position-top-center_1hpp3_1dlb8_134 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_1dlb8_134 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_b3kyy_134 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_b3kyy_134 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
-.awsui_arrow-position-bottom-center_1hpp3_1dlb8_137 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_1dlb8_137 > .awsui_arrow-outer_1hpp3_1dlb8_97:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_b3kyy_137 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_b3kyy_137 > .awsui_arrow-outer_1hpp3_b3kyy_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12));
 }
 
@@ -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_1dlb8_145:not(#\9),
-.awsui_next-button_1hpp3_1dlb8_146:not(#\9),
-.awsui_previous-button_1hpp3_1dlb8_147:not(#\9),
-.awsui_finish-button_1hpp3_1dlb8_148:not(#\9),
-.awsui_header_1hpp3_1dlb8_149:not(#\9),
-.awsui_step-counter-content_1hpp3_1dlb8_150:not(#\9),
-.awsui_content_1hpp3_1dlb8_151:not(#\9) {
+.awsui_annotation_1hpp3_b3kyy_145:not(#\9),
+.awsui_next-button_1hpp3_b3kyy_146:not(#\9),
+.awsui_previous-button_1hpp3_b3kyy_147:not(#\9),
+.awsui_finish-button_1hpp3_b3kyy_148:not(#\9),
+.awsui_header_1hpp3_b3kyy_149:not(#\9),
+.awsui_step-counter-content_1hpp3_b3kyy_150:not(#\9),
+.awsui_content_1hpp3_b3kyy_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_1dlb8_155:not(#\9) {
+.awsui_description_1hpp3_b3kyy_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_actionBar_1hpp3_1dlb8_160:not(#\9) {
+.awsui_actionBar_1hpp3_b3kyy_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_1dlb8_167:not(#\9) {
+.awsui_stepCounter_1hpp3_b3kyy_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_1dlb8_171:not(#\9) {
+.awsui_divider_1hpp3_b3kyy_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
 
-.awsui_hotspot_1hpp3_1dlb8_175:not(#\9) {
+.awsui_hotspot_1hpp3_b3kyy_175:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -214,34 +214,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_1dlb8_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_b3kyy_175:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1dlb8_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_b3kyy_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1dlb8_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_b3kyy_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_1dlb8_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_b3kyy_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
-  left: calc(-1 * 2px);
-  top: calc(-1 * 2px);
-  width: calc(100% + 2 * 2px);
-  height: calc(100% + 2 * 2px);
-  border-radius: var(--border-radius-control-circular-focus-ring-w07mub, 4px);
+  inset-inline-start: calc(-1 * 2px);
+  inset-block-start: calc(-1 * 2px);
+  inline-size: calc(100% + 2 * 2px);
+  block-size: calc(100% + 2 * 2px);
+  border-start-start-radius: var(--border-radius-control-circular-focus-ring-w07mub, 4px);
+  border-start-end-radius: var(--border-radius-control-circular-focus-ring-w07mub, 4px);
+  border-end-start-radius: var(--border-radius-control-circular-focus-ring-w07mub, 4px);
+  border-end-end-radius: var(--border-radius-control-circular-focus-ring-w07mub, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_hotspot_1hpp3_1dlb8_175 > .awsui_icon_1hpp3_1dlb8_237:not(#\9) {
+.awsui_hotspot_1hpp3_b3kyy_175 > .awsui_icon_1hpp3_b3kyy_240:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-latg1a, #0972d3);
 }
-.awsui_hotspot_1hpp3_1dlb8_175:not(#\9):hover > .awsui_icon_1hpp3_1dlb8_237 {
+.awsui_hotspot_1hpp3_b3kyy_175:not(#\9):hover > .awsui_icon_1hpp3_b3kyy_240 {
   stroke: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_hotspot_1hpp3_1dlb8_175:not(#\9):active > .awsui_icon_1hpp3_1dlb8_237 {
+.awsui_hotspot_1hpp3_b3kyy_175:not(#\9):active > .awsui_icon_1hpp3_b3kyy_240 {
   stroke: var(--color-text-link-default-latg1a, #0972d3);
 }

package/annotation-context/annotation/styles.selectors.js

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_1dlb8_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1dlb8_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1dlb8_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1dlb8_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1dlb8_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1dlb8_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1dlb8_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1dlb8_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1dlb8_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1dlb8_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1dlb8_137",
-  "annotation": "awsui_annotation_1hpp3_1dlb8_145",
-  "next-button": "awsui_next-button_1hpp3_1dlb8_146",
-  "previous-button": "awsui_previous-button_1hpp3_1dlb8_147",
-  "finish-button": "awsui_finish-button_1hpp3_1dlb8_148",
-  "header": "awsui_header_1hpp3_1dlb8_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1dlb8_150",
-  "content": "awsui_content_1hpp3_1dlb8_151",
-  "description": "awsui_description_1hpp3_1dlb8_155",
-  "actionBar": "awsui_actionBar_1hpp3_1dlb8_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1dlb8_167",
-  "divider": "awsui_divider_1hpp3_1dlb8_171",
-  "hotspot": "awsui_hotspot_1hpp3_1dlb8_175",
-  "icon": "awsui_icon_1hpp3_1dlb8_237"
+  "arrow": "awsui_arrow_1hpp3_b3kyy_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_b3kyy_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_b3kyy_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_b3kyy_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_b3kyy_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_b3kyy_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_b3kyy_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_b3kyy_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_b3kyy_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_b3kyy_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_b3kyy_137",
+  "annotation": "awsui_annotation_1hpp3_b3kyy_145",
+  "next-button": "awsui_next-button_1hpp3_b3kyy_146",
+  "previous-button": "awsui_previous-button_1hpp3_b3kyy_147",
+  "finish-button": "awsui_finish-button_1hpp3_b3kyy_148",
+  "header": "awsui_header_1hpp3_b3kyy_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_b3kyy_150",
+  "content": "awsui_content_1hpp3_b3kyy_151",
+  "description": "awsui_description_1hpp3_b3kyy_155",
+  "actionBar": "awsui_actionBar_1hpp3_b3kyy_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_b3kyy_167",
+  "divider": "awsui_divider_1hpp3_b3kyy_171",
+  "hotspot": "awsui_hotspot_1hpp3_b3kyy_175",
+  "icon": "awsui_icon_1hpp3_b3kyy_240"
 };
   

package/app-layout/defaults.d.ts

@@ -2,8 +2,8 @@ import { AppLayoutProps } from './interfaces';
 export interface AppLayoutState {
     navigationOpen?: boolean;
     toolsOpen?: boolean;
-    minContentWidth: number;
+    minContentWidth?: number;
     maxContentWidth?: number | undefined;
 }
-export declare function applyDefaults(contentType: AppLayoutProps.ContentType, stateFromProps: Pick<AppLayoutProps, 'minContentWidth' | 'maxContentWidth' | 'navigationOpen' | 'toolsOpen'>, isRefresh: boolean): AppLayoutState;
+export declare function applyDefaults(contentType: AppLayoutProps.ContentType, stateFromProps: AppLayoutState, isRefresh: boolean): AppLayoutState;
 //# sourceMappingURL=defaults.d.ts.map

package/app-layout/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAC3B,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,WAAW,CAAC,EAC5G,SAAS,EAAE,OAAO,GACjB,cAAc,CAWhB"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAC3B,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,OAAO,GACjB,cAAc,CAWhB"}

package/app-layout/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAIA,MAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,QAAQ,GAAuD;IACnE,OAAO,oBACF,uBAAuB,CAC3B;IACD,SAAS,oBACJ,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,cAA4G,EAC5G,SAAkB;;IAElB,MAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,iCAAM,QAAQ,CAAC,WAAW,CAAC,KAAE,eAAe,EAAE,SAAS,IACxD,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE1B,OAAO;QACL,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,cAAc,EAAE,MAAA,cAAc,CAAC,cAAc,mCAAI,mBAAmB,CAAC,cAAc;QACnF,SAAS,EAAE,MAAA,cAAc,CAAC,SAAS,mCAAI,mBAAmB,CAAC,SAAS;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps } from './interfaces';\n\nconst defaultContentTypeState: AppLayoutState = {\n  navigationOpen: true,\n  minContentWidth: 280,\n  maxContentWidth: undefined,\n};\n\nconst defaults: Record<AppLayoutProps.ContentType, AppLayoutState> = {\n  default: {\n    ...defaultContentTypeState,\n  },\n  dashboard: {\n    ...defaultContentTypeState,\n  },\n  cards: {\n    navigationOpen: true,\n    minContentWidth: 280,\n    maxContentWidth: undefined,\n  },\n  form: {\n    navigationOpen: false,\n    minContentWidth: 280,\n    maxContentWidth: 800,\n  },\n  table: {\n    navigationOpen: true,\n    minContentWidth: 280,\n    maxContentWidth: undefined,\n  },\n  wizard: {\n    navigationOpen: false,\n    minContentWidth: 280,\n    maxContentWidth: 1080,\n  },\n};\n\nexport interface AppLayoutState {\n  navigationOpen?: boolean;\n  toolsOpen?: boolean;\n  minContentWidth: number;\n  maxContentWidth?: number | undefined;\n}\n\nexport function applyDefaults(\n  contentType: AppLayoutProps.ContentType,\n  stateFromProps: Pick<AppLayoutProps, 'minContentWidth' | 'maxContentWidth' | 'navigationOpen' | 'toolsOpen'>,\n  isRefresh: boolean\n): AppLayoutState {\n  const contentTypeDefaults = isRefresh\n    ? { ...defaults[contentType], maxContentWidth: undefined }\n    : defaults[contentType];\n\n  return {\n    maxContentWidth: stateFromProps.maxContentWidth ?? contentTypeDefaults.maxContentWidth,\n    minContentWidth: stateFromProps.minContentWidth ?? contentTypeDefaults.minContentWidth,\n    navigationOpen: stateFromProps.navigationOpen ?? contentTypeDefaults.navigationOpen,\n    toolsOpen: stateFromProps.toolsOpen ?? contentTypeDefaults.toolsOpen,\n  };\n}\n"]}
+{"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAIA,MAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,QAAQ,GAAuD;IACnE,OAAO,oBACF,uBAAuB,CAC3B;IACD,SAAS,oBACJ,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,cAA8B,EAC9B,SAAkB;;IAElB,MAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,iCAAM,QAAQ,CAAC,WAAW,CAAC,KAAE,eAAe,EAAE,SAAS,IACxD,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE1B,OAAO;QACL,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,cAAc,EAAE,MAAA,cAAc,CAAC,cAAc,mCAAI,mBAAmB,CAAC,cAAc;QACnF,SAAS,EAAE,MAAA,cAAc,CAAC,SAAS,mCAAI,mBAAmB,CAAC,SAAS;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps } from './interfaces';\n\nconst defaultContentTypeState: AppLayoutState = {\n  navigationOpen: true,\n  minContentWidth: 280,\n  maxContentWidth: undefined,\n};\n\nconst defaults: Record<AppLayoutProps.ContentType, AppLayoutState> = {\n  default: {\n    ...defaultContentTypeState,\n  },\n  dashboard: {\n    ...defaultContentTypeState,\n  },\n  cards: {\n    navigationOpen: true,\n    minContentWidth: 280,\n    maxContentWidth: undefined,\n  },\n  form: {\n    navigationOpen: false,\n    minContentWidth: 280,\n    maxContentWidth: 800,\n  },\n  table: {\n    navigationOpen: true,\n    minContentWidth: 280,\n    maxContentWidth: undefined,\n  },\n  wizard: {\n    navigationOpen: false,\n    minContentWidth: 280,\n    maxContentWidth: 1080,\n  },\n};\n\nexport interface AppLayoutState {\n  navigationOpen?: boolean;\n  toolsOpen?: boolean;\n  minContentWidth?: number;\n  maxContentWidth?: number | undefined;\n}\n\nexport function applyDefaults(\n  contentType: AppLayoutProps.ContentType,\n  stateFromProps: AppLayoutState,\n  isRefresh: boolean\n): AppLayoutState {\n  const contentTypeDefaults = isRefresh\n    ? { ...defaults[contentType], maxContentWidth: undefined }\n    : defaults[contentType];\n\n  return {\n    maxContentWidth: stateFromProps.maxContentWidth ?? contentTypeDefaults.maxContentWidth,\n    minContentWidth: stateFromProps.minContentWidth ?? contentTypeDefaults.minContentWidth,\n    navigationOpen: stateFromProps.navigationOpen ?? contentTypeDefaults.navigationOpen,\n    toolsOpen: stateFromProps.toolsOpen ?? contentTypeDefaults.toolsOpen,\n  };\n}\n"]}

package/app-layout/drawer/interfaces.d.ts

@@ -43,8 +43,9 @@ export interface ResizableDrawerProps extends DesktopDrawerProps {
         size: number;
         id: string;
     }) => void;
-    minWidth: number;
-    maxWidth: number;
+    minSize: number;
+    size: number;
+    getMaxWidth: () => number;
     refs: FocusControlRefs;
     toolsContent: React.ReactNode;
 }

package/app-layout/drawer/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}

package/app-layout/drawer/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":";AA4FA,sBAAsB","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { FocusControlRefs } from '../utils/use-focus-control';\n\nexport interface DesktopDrawerProps {\n  id?: string;\n  contentClassName: string;\n  toggleClassName: string;\n  closeClassName: string;\n  toggleRefs: {\n    toggle: React.Ref<{ focus(): void }>;\n    close: React.Ref<{ focus(): void }>;\n  };\n  width: number;\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  ariaLabels: {\n    mainLabel: string | undefined;\n    closeLabel: string | undefined;\n    openLabel: string | undefined;\n    resizeHandle?: string;\n  };\n  children: React.ReactNode;\n  hideOpenButton?: boolean;\n  type: keyof typeof togglesConfig;\n  isMobile: boolean;\n  isOpen: boolean;\n  isHidden?: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n  resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  onResize: (resizeDetail: { size: number; id: string }) => void;\n  minWidth: number;\n  maxWidth: number;\n  refs: FocusControlRefs;\n  toolsContent: React.ReactNode;\n}\n\nexport interface DrawerTriggersBarProps {\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  isMobile: boolean;\n  drawers: Array<AppLayoutProps.Drawer>;\n  activeDrawerId: string | null;\n  onDrawerChange: (newDrawerId: string | null) => void;\n  ariaLabels: AppLayoutProps['ariaLabels'];\n  drawerRefs: FocusControlRefs;\n}\n\n// Beta interfaces\n// TODO: remove after beta consumers migrate to prod API\ninterface BetaDrawerItemAriaLabels {\n  content?: string;\n  closeButton?: string;\n  triggerButton?: string;\n  resizeHandle?: string;\n}\n\ninterface BetaDrawerItem {\n  id: string;\n  content: React.ReactNode;\n  trigger: {\n    iconName?: IconProps.Name;\n    iconSvg?: React.ReactNode;\n  };\n  ariaLabels: BetaDrawerItemAriaLabels;\n  resizable?: boolean;\n  defaultSize?: number;\n  onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n  badge?: boolean;\n}\n\nexport interface BetaDrawersProps {\n  items: Array<BetaDrawerItem>;\n  activeDrawerId?: string | null;\n  onChange?: NonCancelableEventHandler<string | null>;\n  onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n  ariaLabel?: string;\n  overflowAriaLabel?: string;\n  overflowWithBadgeAriaLabel?: string;\n}\n// Beta interfaces end\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":";AA6FA,sBAAsB","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { FocusControlRefs } from '../utils/use-focus-control';\n\nexport interface DesktopDrawerProps {\n  id?: string;\n  contentClassName: string;\n  toggleClassName: string;\n  closeClassName: string;\n  toggleRefs: {\n    toggle: React.Ref<{ focus(): void }>;\n    close: React.Ref<{ focus(): void }>;\n  };\n  width: number;\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  ariaLabels: {\n    mainLabel: string | undefined;\n    closeLabel: string | undefined;\n    openLabel: string | undefined;\n    resizeHandle?: string;\n  };\n  children: React.ReactNode;\n  hideOpenButton?: boolean;\n  type: keyof typeof togglesConfig;\n  isMobile: boolean;\n  isOpen: boolean;\n  isHidden?: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n  resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  onResize: (resizeDetail: { size: number; id: string }) => void;\n  minSize: number;\n  size: number;\n  getMaxWidth: () => number;\n  refs: FocusControlRefs;\n  toolsContent: React.ReactNode;\n}\n\nexport interface DrawerTriggersBarProps {\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  isMobile: boolean;\n  drawers: Array<AppLayoutProps.Drawer>;\n  activeDrawerId: string | null;\n  onDrawerChange: (newDrawerId: string | null) => void;\n  ariaLabels: AppLayoutProps['ariaLabels'];\n  drawerRefs: FocusControlRefs;\n}\n\n// Beta interfaces\n// TODO: remove after beta consumers migrate to prod API\ninterface BetaDrawerItemAriaLabels {\n  content?: string;\n  closeButton?: string;\n  triggerButton?: string;\n  resizeHandle?: string;\n}\n\ninterface BetaDrawerItem {\n  id: string;\n  content: React.ReactNode;\n  trigger: {\n    iconName?: IconProps.Name;\n    iconSvg?: React.ReactNode;\n  };\n  ariaLabels: BetaDrawerItemAriaLabels;\n  resizable?: boolean;\n  defaultSize?: number;\n  onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n  badge?: boolean;\n}\n\nexport interface BetaDrawersProps {\n  items: Array<BetaDrawerItem>;\n  activeDrawerId?: string | null;\n  onChange?: NonCancelableEventHandler<string | null>;\n  onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n  ariaLabel?: string;\n  overflowAriaLabel?: string;\n  overflowWithBadgeAriaLabel?: string;\n}\n// Beta interfaces end\n"]}

package/app-layout/drawer/resizable-drawer.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ResizableDrawerProps } from './interfaces';
-export declare const ResizableDrawer: ({ onResize, maxWidth, minWidth, refs, activeDrawer, toolsContent, ...props }: ResizableDrawerProps) => JSX.Element;
+export declare const ResizableDrawer: ({ onResize, size, minSize, getMaxWidth, refs, activeDrawer, toolsContent, ...props }: ResizableDrawerProps) => JSX.Element;
 //# sourceMappingURL=resizable-drawer.d.ts.map

package/app-layout/drawer/resizable-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,gBAiEtB,CAAC"}
+{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,eAAe,yFASzB,oBAAoB,gBAyEtB,CAAC"}

package/app-layout/drawer/resizable-drawer.js

@@ -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, { useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { getLimitedValue } from '../../split-panel/utils/size-utils';
 import { usePointerEvents } from '../utils/use-pointer-events';
 import { useKeyboardEvents } from '../utils/use-keyboard-events';
@@ -14,14 +14,23 @@ import styles from './styles.css.js';
 import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
 export const ResizableDrawer = (_a) => {
     var _b, _c, _d, _e;
-    var { onResize, maxWidth, minWidth, refs, activeDrawer, toolsContent } = _a, props = __rest(_a, ["onResize", "maxWidth", "minWidth", "refs", "activeDrawer", "toolsContent"]);
-    const { isOpen, children, width, isMobile } = props;
-    const clampedWidth = getLimitedValue(minWidth, width, maxWidth);
-    const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;
-    const setSidePanelWidth = (newWidth) => {
-        const size = getLimitedValue(minWidth, newWidth, maxWidth);
+    var { onResize, size, minSize, getMaxWidth, refs, activeDrawer, toolsContent } = _a, props = __rest(_a, ["onResize", "size", "minSize", "getMaxWidth", "refs", "activeDrawer", "toolsContent"]);
+    const { isOpen, children, isMobile } = props;
+    const [relativeSize, setRelativeSize] = useState(0);
+    useEffect(() => {
+        // effects are called inside out in the components tree
+        // wait one frame to allow app-layout to complete its calculations
+        const handle = requestAnimationFrame(() => {
+            const maxSize = getMaxWidth();
+            setRelativeSize((size / maxSize) * 100);
+        });
+        return () => cancelAnimationFrame(handle);
+    }, [size, getMaxWidth]);
+    const setSidePanelWidth = (width) => {
+        const maxWidth = getMaxWidth();
+        const size = getLimitedValue(minSize, width, maxWidth);
         const id = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
-        if (isOpen && id && maxWidth >= minWidth) {
+        if (isOpen && id && maxWidth >= minSize) {
             onResize({ size, id });
         }
     };
@@ -36,7 +45,7 @@ export const ResizableDrawer = (_a) => {
     const onKeyDown = useKeyboardEvents(sizeControlProps);
     const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
         React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
-    return (React.createElement(Drawer, Object.assign({}, props, { id: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id, width: clampedWidth, ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
+    return (React.createElement(Drawer, Object.assign({}, props, { id: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id, ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
             (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle), ariaLabels: {
             openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
             mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.drawerName,

package/app-layout/drawer/resizable-drawer.js.map

@@ -1 +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, { useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\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 styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n  onResize,\n  maxWidth,\n  minWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, width, isMobile } = props;\n\n  const clampedWidth = getLimitedValue(minWidth, width, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const setSidePanelWidth = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= minWidth) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\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      id={activeDrawer?.id}\n      width={clampedWidth}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}
+{"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 '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\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 styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n  onResize,\n  size,\n  minSize,\n  getMaxWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, isMobile } = props;\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(minSize, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= minSize) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\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      id={activeDrawer?.id}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}

package/app-layout/index.d.ts.map

@@ -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;AAwC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAiCd,CAAC;AAmlBF,eAAe,SAAS,CAAC"}
+{"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;AAmC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAiCd,CAAC;AAkpBF,eAAe,SAAS,CAAC"}

package/app-layout/index.js

@@ -11,7 +11,7 @@ import { applyDefaults } from './defaults';
 import { Notifications } from './notifications';
 import { MobileToolbar } from './mobile-toolbar';
 import { useFocusControl } from './utils/use-focus-control';
-import useDocumentWidth from './utils/use-document-width';
+import useWindowWidth from './utils/use-window-width';
 import useContentHeight from './utils/use-content-height';
 import styles from './styles.css.js';
 import testutilStyles from './test-classes/styles.css.js';
@@ -24,7 +24,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import ContentWrapper from './content-wrapper';
 import { Drawer, DrawerTriggersBar } from './drawer';
 import { ResizableDrawer } from './drawer/resizable-drawer';
-import { SPLIT_PANEL_MIN_WIDTH, SideSplitPanelDrawer, SplitPanelProvider, } from './split-panel';
+import { SplitPanelProvider, SideSplitPanelDrawer } from './split-panel';
 import useAppLayoutOffsets from './utils/use-content-width';
 import { isDevelopment } from '../internal/is-development';
 import { useStableCallback, warnOnce } from '@cloudscape-design/component-toolkit/internal';
@@ -110,6 +110,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
     const navigationVisible = !navigationHide && navigationOpen;
     const toolsVisible = !toolsHide && toolsOpen;
     const { contentHeightStyle, headerHeight, footerHeight } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
+    const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.contentBoxHeight);
     const anyPanelOpen = navigationVisible || toolsVisible || !!activeDrawer;
     const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
@@ -133,12 +134,14 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
     const closedDrawerWidth = 40;
     const effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
     const getEffectiveToolsWidth = () => {
+        if (toolsHide &&
+            (!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side') &&
+            (!drawers || drawers.length === 0)) {
+            return 0;
+        }
         if (activeDrawer && activeDrawerSize) {
             return activeDrawerSize;
         }
-        if (toolsHide || drawers) {
-            return 0;
-        }
         if (toolsOpen) {
             return toolsWidth;
         }
@@ -171,6 +174,30 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
         setSplitPanelLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });
         fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });
     }, [setSplitPanelOpen, splitPanelOpen, onSplitPanelToggle, setSplitPanelLastInteraction]);
+    const getSplitPanelMaxWidth = useStableCallback(() => {
+        if (!mainContentRef.current || !defaults.minContentWidth) {
+            return NaN;
+        }
+        const width = parseInt(getComputedStyle(mainContentRef.current).width);
+        // 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;
+        const spaceAvailable = width - defaults.minContentWidth - contentPadding;
+        const spaceTaken = finalSplitPanePosition === 'side' ? splitPanelSize : 0;
+        return Math.max(0, spaceTaken + spaceAvailable);
+    });
+    const getDrawerMaxWidth = useStableCallback(() => {
+        if (!mainContentRef.current || !defaults.minContentWidth) {
+            return NaN;
+        }
+        // Either use the computed width of the drawer or the drawerSize as defined.
+        const width = parseInt(getComputedStyle(mainContentRef.current).width || `${activeDrawerSize}`);
+        // 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;
+        const spaceAvailable = width - defaults.minContentWidth - contentPadding;
+        return Math.max(0, activeDrawerSize + spaceAvailable);
+    });
     const getSplitPanelMaxHeight = useStableCallback(() => {
         if (typeof document === 'undefined') {
             return 0; // render the split panel in its minimum possible size
@@ -186,42 +213,65 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                 : availableHeight - MAIN_PANEL_MIN_HEIGHT;
         }
     });
-    const documentWidth = useDocumentWidth();
+    const finalSplitPanePosition = isSplitpanelForcedPosition ? 'bottom' : splitPanelPosition;
+    const splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';
+    const splitPanelOpenOnTheSide = splitPaneAvailableOnTheSide && splitPanelOpen;
+    const toggleButtonsBarWidth = 0;
+    const windowWidth = useWindowWidth();
     const { left: leftOffset, right: rightOffset } = useAppLayoutOffsets(rootRef.current);
-    const rightDrawerBarWidth = drawers ? (drawers.length > 1 ? closedDrawerWidth : 0) : 0;
-    const contentPadding = 80;
-    // all content except split-panel + drawers/tools area
-    const resizableSpaceAvailable = Math.max(0, documentWidth -
+    const contentWidthWithSplitPanel = windowWidth -
         leftOffset -
         rightOffset -
+        effectiveToolsWidth -
         effectiveNavigationWidth -
-        defaults.minContentWidth -
-        contentPadding -
-        rightDrawerBarWidth);
-    // if there is no space to display split panel in the side, force to bottom
-    const isSplitPanelForcedPosition = isMobile || resizableSpaceAvailable - effectiveToolsWidth < SPLIT_PANEL_MIN_WIDTH;
-    const finalSplitPanePosition = isSplitPanelForcedPosition ? 'bottom' : splitPanelPosition;
-    const splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';
-    const sideSplitPanelSize = splitPaneAvailableOnTheSide ? (splitPanelOpen ? splitPanelSize : closedDrawerWidth) : 0;
-    const splitPanelMaxWidth = Math.max(0, resizableSpaceAvailable - effectiveToolsWidth);
-    const drawerMaxSize = Math.max(0, resizableSpaceAvailable - sideSplitPanelSize);
+        (disableContentPaddings ? 0 : toggleButtonsBarWidth);
+    const isResizeInvalid = isMobile || (defaults.minContentWidth || 0) > contentWidthWithSplitPanel;
+    useEffect(() => {
+        const contentWidth = contentWidthWithSplitPanel - splitPanelSize;
+        setIsSplitpanelForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
+        // This is a workaround to avoid a forced position due to splitPanelSize, which is
+        // user controlled variable.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [contentWidthWithSplitPanel, activeDrawerSize, defaults.minContentWidth, isMobile]);
     const navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;
+    const toolsClosedWidth = toolsHide || isMobile || (!hasDrawers && toolsHide) ? 0 : closedDrawerWidth;
     const contentMaxWidthStyle = !isMobile ? { maxWidth: defaults.maxContentWidth } : undefined;
     const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
     const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);
+    const getSplitPanelRightOffset = () => {
+        if (isMobile) {
+            return 0;
+        }
+        if (hasDrawers) {
+            if (activeDrawer) {
+                if (drawers.length === 1) {
+                    return activeDrawerSize;
+                }
+                if (!isResizeInvalid && activeDrawerSize) {
+                    return activeDrawerSize + closedDrawerWidth;
+                }
+                return toolsWidth + closedDrawerWidth;
+            }
+            return drawers.length > 0 ? closedDrawerWidth : 0;
+        }
+        if (!toolsHide && toolsOpen) {
+            return toolsWidth;
+        }
+        return toolsClosedWidth;
+    };
     const splitPanelContextProps = {
         topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
         bottomOffset: footerHeight,
         leftOffset: leftOffset + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
-        rightOffset: isMobile ? 0 : rightOffset + effectiveToolsWidth + rightDrawerBarWidth,
+        rightOffset: rightOffset + getSplitPanelRightOffset(),
         position: finalSplitPanePosition,
         size: splitPanelSize,
-        maxWidth: splitPanelMaxWidth,
+        getMaxWidth: getSplitPanelMaxWidth,
         getMaxHeight: getSplitPanelMaxHeight,
         disableContentPaddings,
         contentWidthStyles: contentMaxWidthStyle,
         isOpen: splitPanelOpen,
-        isForcedPosition: isSplitPanelForcedPosition,
+        isForcedPosition: isSplitpanelForcedPosition,
         onResize: onSplitPanelSizeSet,
         onToggle: onSplitPanelToggleHandler,
         onPreferencesChange: onSplitPanelPreferencesSet,
@@ -245,7 +295,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
             // 2. Tools panel is present and open
             toolsVisible ||
             // 3. Split panel is open in side position
-            (splitPaneAvailableOnTheSide && splitPanelOpen),
+            splitPanelOpenOnTheSide,
         isMobile,
     };
     useImperativeHandle(ref, () => ({
@@ -320,13 +370,13 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                     closeLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.closeButton,
                     mainLabel: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels.drawerName,
                     resizeHandle: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.resizeHandle,
-                }, minWidth: minDrawerSize, maxWidth: drawerMaxSize, width: activeDrawerSize, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: isOpen => {
+                }, width: !isResizeInvalid ? activeDrawerSize : toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: isOpen => {
                     if (!isOpen) {
                         focusToolsButtons();
                         focusDrawersButtons();
                         onActiveDrawerChange(null);
                     }
-                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, toolsContent: (_f = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _f === void 0 ? void 0 : _f.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
+                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, minSize: minDrawerSize, size: !isResizeInvalid ? activeDrawerSize : toolsWidth, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, getMaxWidth: getDrawerMaxWidth, toolsContent: (_f = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _f === void 0 ? void 0 : _f.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
             hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
                     if (activeDrawerId !== newDrawerId) {
                         focusToolsButtons();