@cloudscape-design/components-themeable 3.0.233 → 3.0.234

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "a905cd624839c4f67b05a3f8efed4ba2304bb96d"
+  "commit": "425aff2e638ede57b85aff3606d7840961b9f3af"
 }

package/lib/internal/scss/app-layout/drawer/styles.scss

@@ -0,0 +1,59 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../internal/styles/tokens' as awsui;
+@use '../constants' as constants;
+
+// should be above sticky notifications
+$drawer-z-index: 830;
+// should be above mobile toolbar
+$drawer-z-index-mobile: 1001;
+
+.toggle {
+  box-sizing: border-box;
+  padding: constants.$toggle-padding;
+}
+
+.drawer {
+  flex-shrink: 0;
+  position: relative;
+  word-wrap: break-word;
+  box-shadow: awsui.$shadow-panel;
+
+  &:not(.drawer-mobile) {
+    z-index: $drawer-z-index;
+  }
+  &-closed {
+    min-width: constants.$sidebar-size-closed;
+    cursor: pointer;
+    &.drawer-mobile {
+      display: none;
+    }
+  }
+}
+
+.drawer-content {
+  position: fixed;
+  overflow: auto;
+  background-color: awsui.$color-background-layout-panel-content;
+
+  .drawer-mobile > & {
+    z-index: $drawer-z-index-mobile;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .drawer-closed > & {
+    width: constants.$sidebar-size-closed;
+    &:hover {
+      background: awsui.$color-background-layout-panel-hover;
+    }
+  }
+
+  & > [aria-hidden='true'] {
+    display: none;
+  }
+}

package/lib/internal/scss/app-layout/split-panel-drawer/styles.scss

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../constants' as constants;
+
+.drawer-displayed {
+  min-width: constants.$sidebar-size-closed;
+}
+
+.drawer-content {
+  position: fixed;
+}

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

@@ -7,12 +7,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use './constants' as constants;
 
-$drawer-z-index: 830;
-// should be above mobile toolbar
-$drawer-z-index-mobile: 1001;
-
-$drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{awsui.$space-layout-toggle-padding});
-
 // double flex container to work around flexbox issue in IE
 // https://github.com/philipwalton/flexbugs#flexbug-3
 .root,
@@ -55,75 +49,6 @@ $drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{awsui.$space-
   visibility: hidden;
 }
 
-.navigation-panel {
-  overflow-anchor: none;
-}
-
-.drawer {
-  flex-shrink: 0;
-  position: relative;
-  word-wrap: break-word;
-  box-shadow: awsui.$shadow-panel;
-
-  &:not(.drawer-mobile) {
-    z-index: $drawer-z-index;
-  }
-  &-closed {
-    min-width: constants.$sidebar-size-closed;
-    cursor: pointer;
-    &.drawer-mobile {
-      display: none;
-    }
-  }
-}
-
-.drawer-content {
-  position: fixed;
-  overflow: auto;
-  background-color: awsui.$color-background-layout-panel-content;
-
-  .drawer-mobile > & {
-    z-index: $drawer-z-index-mobile;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .drawer-closed > & {
-    width: constants.$sidebar-size-closed;
-    &:hover {
-      background: awsui.$color-background-layout-panel-hover;
-    }
-  }
-
-  & > [aria-hidden='true'] {
-    display: none;
-  }
-}
-
-.toggle {
-  box-sizing: border-box;
-  padding: constants.$toggle-padding;
-}
-
-.visual-refresh-toggle {
-  position: fixed;
-  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
-  &-type-tools {
-    right: 0;
-  }
-  &-type-navigation {
-    left: 0;
-  }
-  &[aria-hidden='true'] {
-    visibility: hidden;
-  }
-  &[aria-hidden='false'] {
-    visibility: visible;
-  }
-}
-
 .breadcrumbs-desktop {
   padding-top: awsui.$space-scaled-m;
   padding-bottom: awsui.$space-scaled-s;
@@ -146,26 +71,3 @@ $drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{awsui.$space-
   // applied to content or content header, whatever comes first
   padding-top: awsui.$space-scaled-m;
 }
-
-.panel-wrapper-outer {
-  position: fixed;
-  height: 100%;
-  z-index: $drawer-z-index;
-  display: flex;
-
-  &.mobile {
-    left: 0;
-    right: 0;
-    z-index: -1;
-    pointer-events: none;
-    &.open {
-      z-index: $drawer-z-index-mobile;
-      width: 100vw;
-      pointer-events: auto;
-    }
-  }
-}
-
-.panel-wrapper-inner {
-  background: awsui.$color-background-layout-panel-content;
-}

package/lib/internal/template/app-layout/{drawer.d.ts → drawer/index.d.ts}

@@ -1,26 +1,26 @@
 import React from 'react';
-import { ButtonProps } from '../button/interfaces';
-import { togglesConfig } from './toggles';
-import { AppLayoutProps } from './interfaces';
+import { ButtonProps } from '../../button/interfaces';
+import { togglesConfig } from '../toggles';
+import { AppLayoutProps } from '../interfaces';
 export interface DesktopDrawerProps {
-    contentClassName?: string;
-    toggleClassName?: string;
-    closeClassName?: string;
+    contentClassName: string;
+    toggleClassName: string;
+    closeClassName: string;
     toggleRefs: {
         toggle: React.Ref<ButtonProps.Ref>;
         close: React.Ref<ButtonProps.Ref>;
     };
     width: number;
-    topOffset?: number;
-    bottomOffset?: number;
-    ariaLabels?: AppLayoutProps.Labels;
+    topOffset: number | undefined;
+    bottomOffset: number | undefined;
+    ariaLabels: AppLayoutProps.Labels | undefined;
     children: React.ReactNode;
     type: keyof typeof togglesConfig;
-    isMobile?: boolean;
-    isOpen?: boolean;
+    isMobile: boolean;
+    isOpen: boolean;
     onToggle: (isOpen: boolean) => void;
     onClick?: (event: React.MouseEvent) => void;
     onLoseFocus?: (event: React.FocusEvent) => void;
 }
 export declare function Drawer({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, children, isOpen, isMobile, onToggle, onClick, onLoseFocus, }: DesktopDrawerProps): JSX.Element;
-//# sourceMappingURL=drawer.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAgC,aAAa,EAAE,MAAM,YAAY,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,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,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,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;CACjD;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,OAAO,EACP,WAAW,GACZ,EAAE,kBAAkB,eAkEpB"}

package/lib/internal/template/app-layout/{drawer.js → drawer/index.js}

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
 import React from 'react';
-import { AppLayoutButton, CloseButton, togglesConfig } from './toggles';
+import { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';
+import testutilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
 // We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several
 // known bugs in NVDA that cause focus changes within a container to sometimes not be
@@ -25,15 +26,13 @@ export function Drawer({ contentClassName, toggleClassName, closeClassName, widt
     const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);
     const drawerContentWidthOpen = isMobile ? undefined : width;
     const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;
-    const closeIconName = 'close';
     const regularOpenButton = (React.createElement(TagName, { "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
         React.createElement(AppLayoutButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: false })));
     return (React.createElement("div", { className: clsx(styles.drawer, {
             [styles['drawer-closed']]: !isOpen,
+            [testutilStyles['drawer-closed']]: !isOpen,
             [styles['drawer-mobile']]: isMobile,
-        }), style: {
-            width: drawerContentWidth,
-        }, onBlur: onLoseFocus
+        }), style: { width: drawerContentWidth }, onBlur: onLoseFocus
             ? e => {
                 if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
                     onLoseFocus(e);
@@ -53,7 +52,7 @@ export function Drawer({ contentClassName, toggleClassName, closeClassName, widt
         React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
             !isMobile && regularOpenButton,
             React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
-                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => onToggle(false), iconName: closeIconName }),
+                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => onToggle(false) }),
                 children))));
 }
-//# sourceMappingURL=drawer.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface DesktopDrawerProps {\n  contentClassName: string;\n  toggleClassName: string;\n  closeClassName: string;\n  toggleRefs: {\n    toggle: React.Ref<ButtonProps.Ref>;\n    close: React.Ref<ButtonProps.Ref>;\n  };\n  width: number;\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  children: React.ReactNode;\n  type: keyof typeof togglesConfig;\n  isMobile: boolean;\n  isOpen: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n}\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  isMobile,\n  onToggle,\n  onClick,\n  onLoseFocus,\n}: DesktopDrawerProps) {\n  const { TagName, iconName, getLabels } = togglesConfig[type];\n  const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n  const drawerContentWidthOpen = isMobile ? undefined : width;\n  const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\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        [testutilStyles['drawer-closed']]: !isOpen,\n        [styles['drawer-mobile']]: isMobile,\n      })}\n      style={{ width: drawerContentWidth }}\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          />\n          {children}\n        </TagName>\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+
+    import './styles.scoped.css';
+    export default {
+  "toggle": "awsui_toggle_1uo6m_cnce0_97",
+  "drawer": "awsui_drawer_1uo6m_cnce0_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_cnce0_108",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_cnce0_111",
+  "drawer-content": "awsui_drawer-content_1uo6m_cnce0_119"
+};
+  

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

@@ -0,0 +1,139 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_toggle_1uo6m_cnce0_97:not(#\9) {
+  box-sizing: border-box;
+  padding: var(--space-xxs-ynfts5, 4px) 7px;
+}
+
+.awsui_drawer_1uo6m_cnce0_102:not(#\9) {
+  flex-shrink: 0;
+  position: relative;
+  word-wrap: break-word;
+  box-shadow: var(--shadow-panel-v9vx7i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+}
+.awsui_drawer_1uo6m_cnce0_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_cnce0_108) {
+  z-index: 830;
+}
+.awsui_drawer-closed_1uo6m_cnce0_111:not(#\9) {
+  min-width: 40px;
+  cursor: pointer;
+}
+.awsui_drawer-closed_1uo6m_cnce0_111.awsui_drawer-mobile_1uo6m_cnce0_108:not(#\9) {
+  display: none;
+}
+
+.awsui_drawer-content_1uo6m_cnce0_119:not(#\9) {
+  position: fixed;
+  overflow: auto;
+  background-color: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
+}
+.awsui_drawer-mobile_1uo6m_cnce0_108 > .awsui_drawer-content_1uo6m_cnce0_119:not(#\9) {
+  z-index: 1001;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.awsui_drawer-closed_1uo6m_cnce0_111 > .awsui_drawer-content_1uo6m_cnce0_119:not(#\9) {
+  width: 40px;
+}
+.awsui_drawer-closed_1uo6m_cnce0_111 > .awsui_drawer-content_1uo6m_cnce0_119:not(#\9):hover {
+  background: var(--color-background-layout-panel-hover-thdv3z, #eaeded);
+}
+.awsui_drawer-content_1uo6m_cnce0_119 > [aria-hidden=true]:not(#\9) {
+  display: none;
+}

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

@@ -0,0 +1,11 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "toggle": "awsui_toggle_1uo6m_cnce0_97",
+  "drawer": "awsui_drawer_1uo6m_cnce0_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_cnce0_108",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_cnce0_111",
+  "drawer-content": "awsui_drawer-content_1uo6m_cnce0_119"
+};
+  

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;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAgeF,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;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAydF,eAAe,SAAS,CAAC"}

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

@@ -26,8 +26,8 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import ContentWrapper from './content-wrapper';
 import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
-import { NavigationPanel } from './navigation-panel';
-import { ToolsAndSplitPanel } from './tools-and-split-panel';
+import { Drawer } from './drawer';
+import { SideSplitPanelDrawer } from './split-panel-drawer';
 import useAppLayoutOffsets from './utils/use-content-width';
 import { isDevelopment } from '../internal/is-development';
 import { warnOnce } from '../internal/logging';
@@ -69,7 +69,7 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
     };
     const navigationVisible = !navigationHide && navigationOpen;
     const toolsVisible = !toolsHide && toolsOpen;
-    const { contentHeightStyle, headerHeight, footerHeight, panelHeightStyle } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
+    const { contentHeightStyle, headerHeight, footerHeight } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
     const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.height);
     const anyPanelOpen = navigationVisible || toolsVisible;
@@ -227,29 +227,11 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
         : splitPanelOpen
             ? splitPanelReportedSize
             : splitPanelReportedHeaderHeight)) !== null && _a !== void 0 ? _a : undefined;
-    const toolsDrawerWidth = (() => {
-        if (isMobile) {
-            return 0;
-        }
-        const toolsPanelWidth = toolsHide ? 0 : toolsOpen ? toolsWidth : closedDrawerWidth;
-        const splitPanelWidth = !splitPanelDisplayed || finalSplitPanePosition !== 'side'
-            ? 0
-            : splitPanelOpen
-                ? splitPanelReportedSize
-                : closedDrawerWidth;
-        return toolsPanelWidth + splitPanelWidth;
-    })();
-    const navigationDrawerWidth = (() => {
-        if (isMobile) {
-            return 0;
-        }
-        return effectiveNavigationWidth;
-    })();
     return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef },
         React.createElement("div", { className: styles['layout-wrapper'], style: contentHeightStyle },
             isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen }, breadcrumbs)),
             React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
-                !navigationHide && (React.createElement(NavigationPanel, { ariaLabels: ariaLabels, footerHeight: footerHeight, headerHeight: headerHeight, isMobile: isMobile, navigation: navigation, navigationDrawerWidth: navigationDrawerWidth, navigationOpen: navigationOpen, onClick: isMobile ? onNavigationClick : undefined, onNavigationToggle: onNavigationToggle, panelHeightStyle: panelHeightStyle, toggleRefs: navigationRefs, navigationWidth: navigationWidth })),
+                !navigationHide && (React.createElement(Drawer, { contentClassName: testutilStyles.navigation, toggleClassName: testutilStyles['navigation-toggle'], closeClassName: testutilStyles['navigation-close'], ariaLabels: ariaLabels, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, isOpen: navigationOpen, onClick: isMobile ? onNavigationClick : undefined, onToggle: onNavigationToggle, toggleRefs: navigationRefs, type: "navigation", width: navigationWidth }, navigation)),
                 React.createElement("main", { ref: legacyScrollRootRef, className: clsx(styles['layout-main'], {
                         [styles['layout-main-scrollable']]: disableBodyScroll,
                         [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,
@@ -281,7 +263,8 @@ const OldAppLayout = React.forwardRef(({ navigation, navigationWidth = 280, navi
                                     hasBreadcrumbs: !!breadcrumbs,
                                 } }, content))),
                     finalSplitPanePosition === 'bottom' && splitPanelWrapped),
-                React.createElement(ToolsAndSplitPanel, { splitPanel: finalSplitPanePosition === 'side' ? splitPanelWrapped : undefined, ariaLabels: ariaLabels, drawerWidth: toolsDrawerWidth, footerHeight: footerHeight, headerHeight: headerHeight, isMobile: isMobile, onToolsToggle: onToolsToggle, panelHeightStyle: panelHeightStyle, toggleRefs: toolsRefs, onLoseToolsFocus: loseToolsFocus, tools: tools, toolsHide: Boolean(toolsHide), toolsOpen: toolsOpen, toolsWidth: toolsWidth })))));
+                finalSplitPanePosition === 'side' && (React.createElement(SideSplitPanelDrawer, { topOffset: headerHeight, bottomOffset: footerHeight, displayed: splitPanelDisplayed, width: splitPanelOpen ? splitPanelSize : undefined }, splitPanelWrapped)),
+                !toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))))));
 });
 applyDisplayName(AppLayout, 'AppLayout');
 export default AppLayout;