@cloudscape-design/components-themeable 3.0.176 → 3.0.178

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "817a6f5f64a0f72f98a3d080b457a760adb88eb7"
+  "commit": "5609551a62b994bda9009c093da7b01c8ab1ce4a"
 }

package/lib/internal/scss/app-layout/constants.scss

@@ -13,3 +13,9 @@ $toggle-padding-vertical: awsui.$space-xxs;
 $toggle-padding: $toggle-padding-vertical $toggle-padding-horizontal;
 
 $sidebar-size-closed: 4 * styles.$base-size;
+
+$adaptive-content-widths: (
+  styles.$breakpoint-large: 1280px,
+  styles.$breakpoint-x-large: 1440px,
+  styles.$breakpoint-xx-large: 1620px,
+);

package/lib/internal/scss/app-layout/content-wrapper/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../constants' as constants;
 
 .content-wrapper {
   padding-left: awsui.$space-scaled-2x-xxxl;
@@ -14,3 +15,13 @@
     padding-right: awsui.$space-l;
   }
 }
+
+.content-type-dashboard {
+  margin-left: auto;
+  margin-right: auto;
+  @each $breakpoint, $width in constants.$adaptive-content-widths {
+    @include styles.media-breakpoint-up($breakpoint) {
+      max-width: $width;
+    }
+  }
+}

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

@@ -3,8 +3,9 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/styles/' as styles;
+@use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../constants' as constants;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 /*
@@ -15,7 +16,7 @@
   navigationHide and/or toolsHide properties have been set then the first
   and last column width will default to the minimum content gap properties to
   create the necessary visual space around the main content.
-  
+
   The minimum content width property is set to zero and applied under all
   circumstances regardless of whether the minContentWidth property is
   explicitly set in script.
@@ -49,14 +50,10 @@
 
   // Add unified max-width for AppLayout content based on breakpoints.
   &:not(.has-max-content-width) {
-    @include styles.media-breakpoint-up(styles.$breakpoint-large) {
-      #{custom-props.$defaultMaxContentWidth}: 1280px;
-    }
-    @include styles.media-breakpoint-up(styles.$breakpoint-x-large) {
-      #{custom-props.$defaultMaxContentWidth}: 1440px;
-    }
-    @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
-      #{custom-props.$defaultMaxContentWidth}: 1620px;
+    @each $breakpoint, $width in constants.$adaptive-content-widths {
+      @include styles.media-breakpoint-up($breakpoint) {
+        #{custom-props.$defaultMaxContentWidth}: $width;
+      }
     }
   }
 
@@ -70,11 +67,11 @@
   }
 
   /*
-  Warning! This is a hack! We are implementing a short term fix to prevent the 
-  tools drawer from potentially getting pushed off screen. Currently there is no 
-  protection against a navigationWidth, minContentWidth, and toolsWidth that are 
-  in excess ove the available space in the viewport. To accomodate this we remove 
-  the minContentWidth and set it to zero in small viewports and below until the 
+  Warning! This is a hack! We are implementing a short term fix to prevent the
+  tools drawer from potentially getting pushed off screen. Currently there is no
+  protection against a navigationWidth, minContentWidth, and toolsWidth that are
+  in excess ove the available space in the viewport. To accomodate this we remove
+  the minContentWidth and set it to zero in small viewports and below until the
   isMobile breakpoint sets the drawers to overlay at 100vw.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-small) {
@@ -157,14 +154,14 @@
   }
 
   /*
-  In desktop viewports the content gap property for the left and right 
-  columns should override the default of zero if the navigationHide 
+  In desktop viewports the content gap property for the left and right
+  columns should override the default of zero if the navigationHide
   or toolsHide property is set. This ensures adequate horizontal space
-  for the center column from the edges of the viewport when there is 
+  for the center column from the edges of the viewport when there is
   not left or right content.
 
-  Warning! If these design tokens change it will adversely impact the 
-  calculation used to determine the Split Panel maximum width in the 
+  Warning! If these design tokens change it will adversely impact the
+  calculation used to determine the Split Panel maximum width in the
   handleSplitPanelMaxWidth function in the context.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -180,8 +177,8 @@
   /*
   In mobile viewports the Navigation and Tools drawers are hidden
   and triggered by the AppBar which then take up the entire viewport.
-  The center column needs permanent space from the horizontal viewport 
-  edges regardless of whether or not there is a Navigation or Tools. 
+  The center column needs permanent space from the horizontal viewport
+  edges regardless of whether or not there is a Navigation or Tools.
   */
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     #{custom-props.$contentGapLeft}: #{awsui.$space-l};
@@ -191,7 +188,7 @@
 
 /*
 This CSS class is applied to the document body to prevent overflow scrolling
-when the navigation or tools drawers are open in responsive viewports. 
+when the navigation or tools drawers are open in responsive viewports.
 */
 .block-body-scroll {
   overflow: hidden;

package/lib/internal/template/app-layout/content-wrapper/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { AppLayoutProps } from '../interfaces';
 export interface ContentWrapperProps {
     className?: string;
+    contentType: AppLayoutProps.ContentType;
     children?: React.ReactNode;
     isMobile: boolean;
     navigationPadding: boolean;

package/lib/internal/template/app-layout/content-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/content-wrapper/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,cAAc,4FAoCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/content-wrapper/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,cAAc,4FAsCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/app-layout/content-wrapper/index.js

@@ -4,11 +4,11 @@ import clsx from 'clsx';
 import React from 'react';
 import styles from './styles.css.js';
 var ContentWrapper = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, toolsPadding = _a.toolsPadding, disablePaddings = _a.disablePaddings, navigationPadding = _a.navigationPadding, isMobile = _a.isMobile, contentWidthStyles = _a.contentWidthStyles;
+    var className = _a.className, contentType = _a.contentType, children = _a.children, toolsPadding = _a.toolsPadding, disablePaddings = _a.disablePaddings, navigationPadding = _a.navigationPadding, isMobile = _a.isMobile, contentWidthStyles = _a.contentWidthStyles;
     if (disablePaddings) {
         return (React.createElement("div", { className: className, ref: ref }, children));
     }
-    return (React.createElement("div", { ref: ref, className: clsx(className, styles['content-wrapper'], !navigationPadding && styles['content-wrapper-no-navigation-padding'], !toolsPadding && styles['content-wrapper-no-tools-padding'], isMobile && styles['content-wrapper-mobile']), style: contentWidthStyles }, children));
+    return (React.createElement("div", { ref: ref, className: clsx(className, styles['content-wrapper'], styles["content-type-".concat(contentType)], !navigationPadding && styles['content-wrapper-no-navigation-padding'], !toolsPadding && styles['content-wrapper-no-tools-padding'], isMobile && styles['content-wrapper-mobile']), style: contentWidthStyles }, children));
 });
 export default ContentWrapper;
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/content-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/content-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,UACE,EAQsB,EACtB,GAA8B;QAR5B,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,kBAAkB,wBAAA;IAIpB,IAAI,eAAe,EAAE;QACnB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAChC,QAAQ,CACL,CACP,CAAC;KACH;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,iBAAiB,CAAC,EACzB,CAAC,iBAAiB,IAAI,MAAM,CAAC,uCAAuC,CAAC,EACrE,CAAC,YAAY,IAAI,MAAM,CAAC,kCAAkC,CAAC,EAC3D,QAAQ,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAC7C,EACD,KAAK,EAAE,kBAAkB,IAExB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,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 from 'react';\nimport styles from './styles.css.js';\n\nexport interface ContentWrapperProps {\n  className?: string;\n  children?: React.ReactNode;\n  isMobile: boolean;\n  navigationPadding: boolean;\n  toolsPadding: boolean;\n  disablePaddings?: boolean;\n  contentWidthStyles?: React.CSSProperties;\n}\n\nconst ContentWrapper = React.forwardRef(\n  (\n    {\n      className,\n      children,\n      toolsPadding,\n      disablePaddings,\n      navigationPadding,\n      isMobile,\n      contentWidthStyles,\n    }: ContentWrapperProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (disablePaddings) {\n      return (\n        <div className={className} ref={ref}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          className,\n          styles['content-wrapper'],\n          !navigationPadding && styles['content-wrapper-no-navigation-padding'],\n          !toolsPadding && styles['content-wrapper-no-tools-padding'],\n          isMobile && styles['content-wrapper-mobile']\n        )}\n        style={contentWidthStyles}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default ContentWrapper;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/content-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAcrC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,UACE,EASsB,EACtB,GAA8B;QAT5B,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,kBAAkB,wBAAA;IAIpB,IAAI,eAAe,EAAE;QACnB,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAChC,QAAQ,CACL,CACP,CAAC;KACH;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,iBAAiB,CAAC,EACzB,MAAM,CAAC,uBAAgB,WAAW,CAAE,CAAC,EACrC,CAAC,iBAAiB,IAAI,MAAM,CAAC,uCAAuC,CAAC,EACrE,CAAC,YAAY,IAAI,MAAM,CAAC,kCAAkC,CAAC,EAC3D,QAAQ,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAC7C,EACD,KAAK,EAAE,kBAAkB,IAExB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,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 from 'react';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\n\nexport interface ContentWrapperProps {\n  className?: string;\n  contentType: AppLayoutProps.ContentType;\n  children?: React.ReactNode;\n  isMobile: boolean;\n  navigationPadding: boolean;\n  toolsPadding: boolean;\n  disablePaddings?: boolean;\n  contentWidthStyles?: React.CSSProperties;\n}\n\nconst ContentWrapper = React.forwardRef(\n  (\n    {\n      className,\n      contentType,\n      children,\n      toolsPadding,\n      disablePaddings,\n      navigationPadding,\n      isMobile,\n      contentWidthStyles,\n    }: ContentWrapperProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (disablePaddings) {\n      return (\n        <div className={className} ref={ref}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          className,\n          styles['content-wrapper'],\n          styles[`content-type-${contentType}`],\n          !navigationPadding && styles['content-wrapper-no-navigation-padding'],\n          !toolsPadding && styles['content-wrapper-no-tools-padding'],\n          isMobile && styles['content-wrapper-mobile']\n        )}\n        style={contentWidthStyles}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default ContentWrapper;\n"]}

package/lib/internal/template/app-layout/content-wrapper/styles.css.js

@@ -1,7 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "content-wrapper": "awsui_content-wrapper_zycdx_s6r07_93",
-  "content-wrapper-mobile": "awsui_content-wrapper-mobile_zycdx_s6r07_97"
+  "content-wrapper": "awsui_content-wrapper_zycdx_19ivr_97",
+  "content-wrapper-mobile": "awsui_content-wrapper-mobile_zycdx_19ivr_101",
+  "content-type-dashboard": "awsui_content-type-dashboard_zycdx_19ivr_106"
 };
   

package/lib/internal/template/app-layout/content-wrapper/styles.scoped.css

@@ -90,11 +90,35 @@ 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_content-wrapper_zycdx_s6r07_93:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_content-wrapper_zycdx_19ivr_97:not(#\9) {
   padding-left: var(--space-scaled-2x-xxxl-lbp35j, 40px);
   padding-right: var(--space-scaled-2x-xxxl-lbp35j, 40px);
 }
-.awsui_content-wrapper-mobile_zycdx_s6r07_97:not(#\9) {
+.awsui_content-wrapper-mobile_zycdx_19ivr_101:not(#\9) {
   padding-left: var(--space-l-4vl6xu, 20px);
   padding-right: var(--space-l-4vl6xu, 20px);
+}
+
+.awsui_content-type-dashboard_zycdx_19ivr_106:not(#\9) {
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (min-width: 1401px) {
+  .awsui_content-type-dashboard_zycdx_19ivr_106:not(#\9) {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .awsui_content-type-dashboard_zycdx_19ivr_106:not(#\9) {
+    max-width: 1440px;
+  }
+}
+@media (min-width: 2541px) {
+  .awsui_content-type-dashboard_zycdx_19ivr_106:not(#\9) {
+    max-width: 1620px;
+  }
 }

package/lib/internal/template/app-layout/content-wrapper/styles.selectors.js

@@ -2,7 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-wrapper": "awsui_content-wrapper_zycdx_s6r07_93",
-  "content-wrapper-mobile": "awsui_content-wrapper-mobile_zycdx_s6r07_97"
+  "content-wrapper": "awsui_content-wrapper_zycdx_19ivr_97",
+  "content-wrapper-mobile": "awsui_content-wrapper-mobile_zycdx_19ivr_101",
+  "content-type-dashboard": "awsui_content-type-dashboard_zycdx_19ivr_106"
 };
   

package/lib/internal/template/app-layout/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAkC9C,UAAU,cAAc;IACtB,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"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,UAAU,cAAc;IACtB,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/lib/internal/template/app-layout/defaults.js

@@ -6,6 +6,7 @@ var defaultContentTypeState = {
 };
 var defaults = {
     "default": __assign({}, defaultContentTypeState),
+    dashboard: __assign({}, defaultContentTypeState),
     cards: {
         navigationOpen: true,
         minContentWidth: 280,

package/lib/internal/template/app-layout/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/app-layout/defaults.ts"],"names":[],"mappings":";AAIA,IAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,IAAM,QAAQ,GAAuD;IACnE,SAAO,eACF,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,IAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,uBAAM,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  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\ninterface 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"]}
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/app-layout/defaults.ts"],"names":[],"mappings":";AAIA,IAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,IAAM,QAAQ,GAAuD;IACnE,SAAO,eACF,uBAAuB,CAC3B;IACD,SAAS,eACJ,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,IAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,uBAAM,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\ninterface 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/lib/internal/template/app-layout/drawer.d.ts

@@ -10,7 +10,6 @@ export interface DesktopDrawerProps {
         toggle: React.Ref<ButtonProps.Ref>;
         close: React.Ref<ButtonProps.Ref>;
     };
-    externalizedToggle?: boolean;
     width: number;
     topOffset?: number;
     bottomOffset?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/app-layout/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAgC,aAAa,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD,wBAAgB,MAAM,CAAC,EACrB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,wBAAwB,EACxB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,WAAe,GAChB,EAAE,kBAAkB,eAgFpB"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/app-layout/drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAgC,aAAa,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM9C,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD,wBAAgB,MAAM,CAAC,EACrB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,wBAAwB,EACxB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,WAAe,GAChB,EAAE,kBAAkB,eAgFpB"}

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/app-layout/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 from 'react';\nimport { ButtonProps } from '../button/interfaces';\nimport { AppLayoutButton, CloseButton, togglesConfig } from './toggles';\nimport { AppLayoutProps } from './interfaces';\nimport styles from './styles.css.js';\n\n// This matches the design token awsui.$border-divider-section-width in Visual Refresh\nconst BORDER_WIDTH = 2;\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  externalizedToggle?: boolean;\n  width: number;\n  topOffset?: number;\n  bottomOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  children: React.ReactNode;\n  type: keyof typeof togglesConfig;\n  isMobile?: boolean;\n  isOpen?: boolean;\n  isHidden?: boolean;\n  hasDividerWithSplitPanel?: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n  extendRight?: number;\n}\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\n\nexport function Drawer({\n  contentClassName,\n  toggleClassName,\n  closeClassName,\n  width,\n  type,\n  toggleRefs,\n  topOffset,\n  bottomOffset,\n  ariaLabels,\n  children,\n  isOpen,\n  isHidden,\n  isMobile,\n  hasDividerWithSplitPanel,\n  onToggle,\n  onClick,\n  onLoseFocus,\n  extendRight = 0,\n}: DesktopDrawerProps) {\n  const { TagName, iconName, getLabels } = togglesConfig[type];\n  const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n  const hasDividerWithButtonBar = isOpen && extendRight !== 0;\n\n  const drawerContentWidthOpen = isMobile ? undefined : width;\n  const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n  const drawerWidth =\n    hasDividerWithButtonBar && drawerContentWidth ? drawerContentWidth + BORDER_WIDTH : drawerContentWidth;\n\n  const closeIconName = 'close';\n\n  const regularOpenButton = (\n    <TagName aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n      <AppLayoutButton\n        ref={toggleRefs.toggle}\n        className={toggleClassName}\n        iconName={iconName}\n        ariaLabel={openLabel}\n        onClick={() => onToggle(true)}\n        ariaExpanded={false}\n      />\n    </TagName>\n  );\n\n  return (\n    <div\n      className={clsx(styles.drawer, {\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-hidden']]: isHidden,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['has-divider-with-splitpanel']]: hasDividerWithSplitPanel,\n        [styles['opaque-background']]: hasDividerWithButtonBar,\n      })}\n      style={{\n        width: drawerWidth,\n        marginRight: isOpen ? -1 * extendRight : 0,\n        paddingRight: isOpen ? extendRight : 0,\n      }}\n      onBlur={\n        onLoseFocus\n          ? e => {\n              if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                onLoseFocus(e);\n              }\n            }\n          : undefined\n      }\n      onClick={event => {\n        if (onClick) {\n          onClick(event);\n        }\n\n        if (!isOpen) {\n          // to prevent calling onToggle from the drawer when it's called from the toggle button\n          if ((event.target as Element).tagName !== 'BUTTON') {\n            onToggle(true);\n          }\n        }\n      }}\n    >\n      <div\n        style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'], contentClassName)}\n      >\n        {!isMobile && regularOpenButton}\n        <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n          <CloseButton\n            ref={toggleRefs.close}\n            className={closeClassName}\n            ariaLabel={closeLabel}\n            onClick={() => onToggle(false)}\n            iconName={closeIconName}\n          />\n          {children}\n        </TagName>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/app-layout/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 from 'react';\nimport { ButtonProps } from '../button/interfaces';\nimport { AppLayoutButton, CloseButton, togglesConfig } from './toggles';\nimport { AppLayoutProps } from './interfaces';\nimport styles from './styles.css.js';\n\n// This matches the design token awsui.$border-divider-section-width in Visual Refresh\nconst BORDER_WIDTH = 2;\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;\n  bottomOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  children: React.ReactNode;\n  type: keyof typeof togglesConfig;\n  isMobile?: boolean;\n  isOpen?: boolean;\n  isHidden?: boolean;\n  hasDividerWithSplitPanel?: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n  extendRight?: number;\n}\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\n\nexport function Drawer({\n  contentClassName,\n  toggleClassName,\n  closeClassName,\n  width,\n  type,\n  toggleRefs,\n  topOffset,\n  bottomOffset,\n  ariaLabels,\n  children,\n  isOpen,\n  isHidden,\n  isMobile,\n  hasDividerWithSplitPanel,\n  onToggle,\n  onClick,\n  onLoseFocus,\n  extendRight = 0,\n}: DesktopDrawerProps) {\n  const { TagName, iconName, getLabels } = togglesConfig[type];\n  const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n  const hasDividerWithButtonBar = isOpen && extendRight !== 0;\n\n  const drawerContentWidthOpen = isMobile ? undefined : width;\n  const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n  const drawerWidth =\n    hasDividerWithButtonBar && drawerContentWidth ? drawerContentWidth + BORDER_WIDTH : drawerContentWidth;\n\n  const closeIconName = 'close';\n\n  const regularOpenButton = (\n    <TagName aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n      <AppLayoutButton\n        ref={toggleRefs.toggle}\n        className={toggleClassName}\n        iconName={iconName}\n        ariaLabel={openLabel}\n        onClick={() => onToggle(true)}\n        ariaExpanded={false}\n      />\n    </TagName>\n  );\n\n  return (\n    <div\n      className={clsx(styles.drawer, {\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-hidden']]: isHidden,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['has-divider-with-splitpanel']]: hasDividerWithSplitPanel,\n        [styles['opaque-background']]: hasDividerWithButtonBar,\n      })}\n      style={{\n        width: drawerWidth,\n        marginRight: isOpen ? -1 * extendRight : 0,\n        paddingRight: isOpen ? extendRight : 0,\n      }}\n      onBlur={\n        onLoseFocus\n          ? e => {\n              if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                onLoseFocus(e);\n              }\n            }\n          : undefined\n      }\n      onClick={event => {\n        if (onClick) {\n          onClick(event);\n        }\n\n        if (!isOpen) {\n          // to prevent calling onToggle from the drawer when it's called from the toggle button\n          if ((event.target as Element).tagName !== 'BUTTON') {\n            onToggle(true);\n          }\n        }\n      }}\n    >\n      <div\n        style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'], contentClassName)}\n      >\n        {!isMobile && regularOpenButton}\n        <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n          <CloseButton\n            ref={toggleRefs.close}\n            className={closeClassName}\n            ariaLabel={closeLabel}\n            onClick={() => onToggle(false)}\n            iconName={closeIconName}\n          />\n          {children}\n        </TagName>\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAsC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AA8fF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAuC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAogBF,eAAe,SAAS,CAAC"}

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

@@ -85,25 +85,30 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
         controlledProp: 'splitPanelPreferences',
         changeHandler: 'onSplitPanelPreferencesChange'
     }), splitPanelPreferences = _r[0], setSplitPanelPreferences = _r[1];
+    var _s = useControllable(controlledSplitPanelOpen, onSplitPanelToggle, false, {
+        componentName: 'AppLayout',
+        controlledProp: 'splitPanelOpen',
+        changeHandler: 'onSplitPanelToggle'
+    }), _t = _s[0], splitPanelOpen = _t === void 0 ? false : _t, setSplitPanelOpen = _s[1];
     var splitPanelPosition = (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) || 'bottom';
+    var _u = useState({
+        displayed: false,
+        ariaLabel: undefined
+    }), splitPanelReportedToggle = _u[0], setSplitPanelReportedToggle = _u[1];
+    var splitPanelDisplayed = !!(splitPanel && (splitPanelReportedToggle.displayed || splitPanelOpen));
     var closedDrawerWidth = 40;
     var effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
-    var effectiveToolsWidth = toolsHide && (!splitPanel || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side')
+    var effectiveToolsWidth = toolsHide && (!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side')
         ? 0
         : toolsOpen
             ? toolsWidth
             : closedDrawerWidth;
     var defaultSplitPanelSize = getSplitPanelDefaultSize(splitPanelPosition);
-    var _s = useControllable(controlledSplitPanelSize, onSplitPanelResize, defaultSplitPanelSize, {
+    var _v = useControllable(controlledSplitPanelSize, onSplitPanelResize, defaultSplitPanelSize, {
         componentName: 'AppLayout',
         controlledProp: 'splitPanelSize',
         changeHandler: 'onSplitPanelResize'
-    }), _t = _s[0], splitPanelSize = _t === void 0 ? defaultSplitPanelSize : _t, setSplitPanelSize = _s[1];
-    var _u = useControllable(controlledSplitPanelOpen, onSplitPanelToggle, false, {
-        componentName: 'AppLayout',
-        controlledProp: 'splitPanelOpen',
-        changeHandler: 'onSplitPanelToggle'
-    }), _v = _u[0], splitPanelOpen = _v === void 0 ? false : _v, setSplitPanelOpen = _u[1];
+    }), _w = _v[0], splitPanelSize = _w === void 0 ? defaultSplitPanelSize : _w, setSplitPanelSize = _v[1];
     var mainContentRef = useRef(null);
     var legacyScrollRootRef = useRef(null);
     var onSplitPanelPreferencesSet = useCallback(function (detail) {
@@ -146,11 +151,11 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
         }
     });
     var finalSplitPanePosition = isSplitpanelForcedPosition ? 'bottom' : splitPanelPosition;
-    var splitPaneAvailableOnTheSide = Boolean(splitPanel) && finalSplitPanePosition === 'side';
+    var splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';
     var splitPanelOpenOnTheSide = splitPaneAvailableOnTheSide && splitPanelOpen;
     var toggleButtonsBarWidth = 0;
     var windowWidth = useWindowWidth();
-    var _w = useAppLayoutOffsets(rootRef.current), leftOffset = _w.left, rightOffset = _w.right;
+    var _x = useAppLayoutOffsets(rootRef.current), leftOffset = _x.left, rightOffset = _x.right;
     var contentWidthWithSplitPanel = windowWidth -
         leftOffset -
         rightOffset -
@@ -166,12 +171,12 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
     }, [contentWidthWithSplitPanel, defaults.minContentWidth, isMobile]);
     var navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;
     var toolsClosedWidth = toolsHide || isMobile ? 0 : closedDrawerWidth;
-    var _x = useState(), splitPanelLastInteraction = _x[0], setSplitPanelLastInteraction = _x[1];
+    var _y = useState(), splitPanelLastInteraction = _y[0], setSplitPanelLastInteraction = _y[1];
     useEffectOnUpdate(function () { return setSplitPanelLastInteraction(splitPanelOpen ? { type: 'open' } : { type: 'close' }); }, [splitPanelOpen]);
     useEffectOnUpdate(function () { return setSplitPanelLastInteraction({ type: 'position' }); }, [splitPanelPosition]);
     var contentMaxWidthStyle = !isMobile ? { maxWidth: defaults.maxContentWidth } : undefined;
-    var _y = useState(0), splitPanelReportedSize = _y[0], setSplitPanelReportedSize = _y[1];
-    var _z = useState(0), splitPanelReportedHeaderHeight = _z[0], setSplitPanelReportedHeaderHeight = _z[1];
+    var _z = useState(0), splitPanelReportedSize = _z[0], setSplitPanelReportedSize = _z[1];
+    var _0 = useState(0), splitPanelReportedHeaderHeight = _0[0], setSplitPanelReportedHeaderHeight = _0[1];
     var splitPanelContext = {
         topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
         bottomOffset: footerHeight,
@@ -190,16 +195,18 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
         onResize: onSplitPanelSizeSet,
         onToggle: onToggle,
         onPreferencesChange: onSplitPanelPreferencesSet,
+        setSplitPanelToggle: setSplitPanelReportedToggle,
         reportSize: setSplitPanelReportedSize,
         reportHeaderHeight: setSplitPanelReportedHeaderHeight
     };
     var splitPanelWrapped = splitPanel && (React.createElement(SplitPanelContextProvider, { value: splitPanelContext }, splitPanel));
     var contentWrapperProps = {
+        contentType: contentType,
         navigationPadding: navigationHide || !!navigationOpen,
         toolsPadding: 
         // tools padding is displayed in one of the three cases
         // 1. Nothing on the that screen edge (no tools panel and no split panel)
-        (toolsHide && (!splitPanel || finalSplitPanePosition !== 'side')) ||
+        (toolsHide && (!splitPanelDisplayed || finalSplitPanePosition !== 'side')) ||
             // 2. Tools panel is present and open
             toolsVisible ||
             // 3. Split panel is open in side position
@@ -207,7 +214,7 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
         isMobile: isMobile
     };
     var navigationRefs = useFocusControl(navigationOpen).refs;
-    var _0 = useFocusControl(toolsOpen, true), toolsRefs = _0.refs, focusToolsClose = _0.setFocus, loseToolsFocus = _0.loseFocus;
+    var _1 = useFocusControl(toolsOpen, true), toolsRefs = _1.refs, focusToolsClose = _1.setFocus, loseToolsFocus = _1.loseFocus;
     useImperativeHandle(ref, function () { return ({
         openTools: function () { return onToolsToggle(true); },
         closeNavigationIfNecessary: function () {
@@ -217,7 +224,7 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
         },
         focusToolsClose: focusToolsClose
     }); }, [isMobile, onNavigationToggle, onToolsToggle, focusToolsClose]);
-    var splitPanelBottomOffset = (_c = (!splitPanel || finalSplitPanePosition !== 'bottom'
+    var splitPanelBottomOffset = (_c = (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'
         ? undefined
         : splitPanelOpen
             ? splitPanelReportedSize
@@ -231,7 +238,7 @@ var OldAppLayout = React.forwardRef(function (_a, ref) {
             return 0;
         }
         var toolsPanelWidth = toolsHide ? 0 : toolsOpen ? toolsWidth : closedDrawerWidth;
-        var splitPanelWidth = !splitPanel || finalSplitPanePosition !== 'side'
+        var splitPanelWidth = !splitPanelDisplayed || finalSplitPanePosition !== 'side'
             ? 0
             : splitPanelOpen
                 ? splitPanelReportedSize