@cloudscape-design/components-themeable 3.0.349 → 3.0.351

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "f2157d08391a051b016df6a34ee27029a2b2084d"
+  "commit": "d85259aaebc05fdf1fb4a2b939e95d2e034a6767"
 }

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

@@ -8,14 +8,9 @@
 
 // Toggle should have 40px width, whereas button is 26px wide.
 // 40 - 26 = 14px in total or 7px on each side
-$toggle-padding-horizontal: 0.7 * styles.$base-size;
-$toggle-padding-vertical: awsui.$space-xxs;
-$toggle-padding: $toggle-padding-vertical $toggle-padding-horizontal;
-
-// New styles for when there are drawers
-$drawers-padding-horizontal: 0.6 * styles.$base-size;
-$drawers-padding-vertical: awsui.$space-scaled-xs;
-$drawers-padding: $drawers-padding-vertical $drawers-padding-horizontal;
+$_toggle-padding-horizontal: 0.7 * styles.$base-size;
+$_toggle-padding-vertical: awsui.$space-xxs;
+$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal;
 
 $sidebar-size-closed: 4 * styles.$base-size;
 

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

@@ -3,6 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/styles' as styles;
+@use '../../internal/hooks/focus-visible' as focus-visible;
 @use '../constants' as constants;
 
 // should be above sticky notifications
@@ -29,7 +31,6 @@ $drawer-z-index-mobile: 1001;
   }
   &-closed {
     min-width: constants.$sidebar-size-closed;
-    cursor: pointer;
     &.drawer-mobile {
       display: none;
     }
@@ -48,13 +49,11 @@ $drawer-z-index-mobile: 1001;
   }
   .drawer-closed > & {
     width: constants.$sidebar-size-closed;
-    &:hover {
-      background: awsui.$color-background-layout-panel-hover;
-    }
-    &.non-interactive {
+    &.drawer-content-clickable {
+      cursor: pointer;
+      color: awsui.$color-text-interactive-default;
       &:hover {
-        background: awsui.$color-background-layout-panel-content;
-        cursor: default;
+        background: awsui.$color-background-layout-panel-hover;
       }
     }
   }
@@ -63,34 +62,26 @@ $drawer-z-index-mobile: 1001;
   }
 }
 
-.trigger {
-  .drawer-content > .drawer-triggers > & {
-    background: awsui.$color-background-layout-toggle-default;
-    border: 0;
-    border-radius: 0;
-    color: awsui.$color-text-layout-toggle;
-    padding: constants.$drawers-padding-vertical awsui.$space-s;
-    margin-top: 1px;
-
-    &:not(:last-child) {
-      box-shadow: 0px 1px awsui.$color-shadow-layout-toggle;
-    }
-    &-drawer {
-      &:hover:not(.selected) {
-        color: awsui.$color-text-layout-toggle-hover;
-        &:not(:last-child) {
-          box-shadow: 0px 1px awsui.$color-shadow-layout-toggle;
-        }
-      }
-    }
+.drawer-triggers-wrapper {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: stretch;
+}
 
-    &.selected,
-    &.selected:hover {
-      background-color: awsui.$color-background-layout-toggle-selected-default;
-      border-top: 1px solid awsui.$color-background-layout-toggle-selected-default;
-      box-shadow: none;
-      color: awsui.$color-text-layout-toggle-active;
-      margin: 0;
-    }
+.drawer-trigger {
+  padding: constants.$toggle-padding;
+  cursor: pointer;
+  color: awsui.$color-text-interactive-default;
+  &:not(:first-child) {
+    border-top: 1px solid awsui.$color-border-layout;
+  }
+  &:hover {
+    color: awsui.$color-text-layout-toggle-hover;
+  }
+  &-active,
+  &-active:hover {
+    background-color: awsui.$color-background-layout-toggle-selected-default;
+    color: awsui.$color-text-layout-toggle-active;
   }
 }

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

@@ -12,7 +12,6 @@
 }
 
 .mobile-bar {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   display: flex;
   align-items: center;
@@ -32,38 +31,26 @@
   margin-right: awsui.$space-m;
 }
 
-.mobile-trigger-with-drawers {
-  width: constants.$sidebar-size-closed;
-  display: flex;
-  justify-content: center;
-}
-
 .mobile-toggle {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
   padding: constants.$toggle-padding;
   width: constants.$sidebar-size-closed;
-  &:first-child {
+  color: awsui.$color-text-interactive-default;
+  &-type-navigation {
     border-right: 1px solid awsui.$color-border-layout;
   }
-  &:last-child:not(.mobile-toggle-with-drawers) {
+  &-type-tools,
+  &-type-drawer {
     border-left: 1px solid awsui.$color-border-layout;
   }
-  &:hover:not(.mobile-toggle-with-drawers) {
+  &:hover {
     background: awsui.$color-background-layout-panel-hover;
   }
+}
 
-  &-with-drawers {
-    display: flex;
-    width: auto;
-    padding: 0;
-    height: 100%;
-
-    > .mobile-trigger-with-drawers {
-      border-left: 1px solid awsui.$color-border-layout;
-      display: flex;
-      align-items: center;
-    }
-  }
+.drawers-container {
+  display: flex;
+  align-items: stretch;
 }

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

@@ -7,6 +7,24 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/hooks/focus-visible' as focus-visible;
 
+.toggle-button {
+  cursor: pointer;
+  border: 0;
+  // resemble button styles with an extra 1px offset for non-existing here border width
+  $padding-vertical: calc(#{awsui.$space-scaled-xxs} + 1px);
+  $padding-horizontal: calc(#{awsui.$space-xxs} + 1px);
+  padding: $padding-vertical $padding-horizontal;
+  background: transparent;
+  color: currentColor;
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
+  }
+}
+
 .close-button {
   position: absolute;
   outline: none;

package/lib/internal/scss/table/body-cell/styles.scss

@@ -18,6 +18,12 @@ $cell-horizontal-padding-w-border: calc(#{$cell-edge-horizontal-padding} + #{aws
 $selected-border: awsui.$border-item-width solid awsui.$color-border-item-selected;
 $selected-border-placeholder: awsui.$border-divider-list-width solid awsui.$color-border-item-placeholder;
 $border-placeholder: awsui.$border-item-width solid transparent;
+$icon-width-with-spacing: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
+// Right paddings of the absolute positioned icons (success icon is shown next to the edit icon)
+$edit-button-padding-right: calc(
+  #{awsui.$space-xs} + #{awsui.$space-xxs}
+); // Cell vertical padding + xxs space that would normally come from the button.
+$success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 
 .body-cell {
   box-sizing: border-box;
@@ -180,6 +186,15 @@ $border-placeholder: awsui.$border-item-width solid transparent;
   &-selected:not(.body-cell-prev-selected) {
     padding-top: $cell-vertical-padding;
   }
+
+  &-editor {
+    padding: 0 $edit-button-padding-right 0 0;
+  }
+
+  &-success {
+    padding: 0 $success-icon-padding-right 0 0;
+  }
+
   &-success,
   &-editor {
     top: 0;
@@ -196,10 +211,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
     outline: 0;
     background: 0;
     border: 0;
-    padding: 0;
 
-    // Additional xxs padding that would normally come from the Inline Icon Button
-    padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs});
     color: awsui.$color-text-button-normal-default;
 
     &:hover {
@@ -256,20 +268,22 @@ $border-placeholder: awsui.$border-item-width solid transparent;
           opacity: 1;
         }
         & > .body-cell-success {
-          opacity: 0;
+          opacity: 1;
         }
       }
       & > .body-cell-editor {
         opacity: 0;
       }
-      &.body-cell-has-success {
-        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
-      }
       // We don't use our focus-visible polyfill here because it doesn't work properly with screen readers.
       // These edit buttons are special because they are visually hidden (opacity: 0), but exposed to assistive technology.
       // It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
       // For example, when an edit button is selected from the VoiceOver rotor menu.
       &:focus-within {
+        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        &.body-cell-has-success {
+          // After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
+          padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
+        }
         @include focused-editor-styles;
         @include styles.focus-highlight(
           (
@@ -293,7 +307,11 @@ $border-placeholder: awsui.$border-item-width solid transparent;
           right: 0;
         }
         & > .body-cell-editor {
-          padding-right: calc(#{awsui.$space-xs} + #{awsui.$space-xxs} - (2 * #{awsui.$border-divider-list-width}));
+          padding-right: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+        }
+        & > .body-cell-success {
+          // Update padding to avoid a jumping icon because of the additional borders added when hovering an editable cell.
+          padding-right: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         &.body-cell-last-row.body-cell-selected,
         &.body-cell-next-selected {
@@ -322,6 +340,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
       border-top-right-radius: awsui.$border-radius-item;
       border-bottom-right-radius: awsui.$border-radius-item;
     }
+    &.body-cell-first-row > .body-cell-success,
     &.body-cell-first-row > .body-cell-editor {
       padding-top: awsui.$border-divider-list-width;
     }

package/lib/internal/template/alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAGpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,IAAa,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,eAyCpF"}

package/lib/internal/template/alert/index.js

@@ -1,13 +1,48 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalAlert from './internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
+import { FunnelMetrics } from '../internal/analytics';
+import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
+import { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';
 export default function Alert(_a) {
     var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
     const baseComponentProps = useBaseComponent('Alert');
+    const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
+    const { stepNumber, stepNameSelector } = useFunnelStep();
+    const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
+    useEffect(() => {
+        if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {
+            const stepName = getNameFromSelector(stepNameSelector);
+            const subStepName = getNameFromSelector(subStepNameSelector);
+            errorCount.current++;
+            if (subStepSelector) {
+                FunnelMetrics.funnelSubStepError({
+                    funnelInteractionId,
+                    subStepSelector,
+                    subStepName,
+                    subStepNameSelector,
+                    stepNumber,
+                    stepName,
+                    stepNameSelector,
+                    subStepAllSelector: getSubStepAllSelector(),
+                });
+            }
+            else {
+                FunnelMetrics.funnelError({
+                    funnelInteractionId,
+                });
+            }
+            return () => {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                errorCount.current--;
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [funnelInteractionId, visible, submissionAttempt, errorCount]);
     return React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps));
 }
 applyDisplayName(Alert, 'Alert');

package/lib/internal/template/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n  const baseComponentProps = useBaseComponent('Alert');\n  return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAI7F,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAuD;QAAvD,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACrE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACxF,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IACzD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,IAAI,OAAO,IAAI,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC5F,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,kBAAkB,CAAC;oBAC/B,mBAAmB;oBACnB,eAAe;oBACf,WAAW;oBACX,mBAAmB;oBACnB,UAAU;oBACV,QAAQ;oBACR,gBAAgB;oBAChB,kBAAkB,EAAE,qBAAqB,EAAE;iBAC5C,CAAC,CAAC;aACJ;iBAAM;gBACL,aAAa,CAAC,WAAW,CAAC;oBACxB,mBAAmB;iBACpB,CAAC,CAAC;aACJ;YAED,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAElE,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC5F,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\nexport { AlertProps };\n\nexport default function Alert({ type = 'info', visible = true, ...props }: AlertProps) {\n  const baseComponentProps = useBaseComponent('Alert');\n\n  const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n  const { stepNumber, stepNameSelector } = useFunnelStep();\n  const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n  useEffect(() => {\n    if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n      const stepName = getNameFromSelector(stepNameSelector);\n      const subStepName = getNameFromSelector(subStepNameSelector);\n\n      errorCount.current++;\n\n      if (subStepSelector) {\n        FunnelMetrics.funnelSubStepError({\n          funnelInteractionId,\n          subStepSelector,\n          subStepName,\n          subStepNameSelector,\n          stepNumber,\n          stepName,\n          stepNameSelector,\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      } else {\n        FunnelMetrics.funnelError({\n          funnelInteractionId,\n        });\n      }\n\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n  return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(Alert, 'Alert');\n"]}

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
 import React, { useRef } from 'react';
-import { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';
+import { ToggleButton, 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
@@ -34,7 +34,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
     });
     const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);
     const regularOpenButton = (React.createElement(TagName, { ref: openButtonWrapperRef, "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 })));
+        React.createElement(ToggleButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: false })));
     return (React.createElement("div", { ref: ref, className: clsx(styles.drawer, {
             [styles['drawer-closed']]: !isOpen,
             [testutilStyles['drawer-closed']]: !isOpen,
@@ -58,7 +58,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
                 }
             }
         } },
-        React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
+        React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
             !isMobile && regularOpenButton,
             resizeHandle,
             React.createElement(TagName, { "aria-label": drawers ? drawerMainLabel : mainLabel, "aria-hidden": !isOpen },
@@ -73,9 +73,10 @@ export function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers,
     return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
             [styles['drawer-mobile']]: isMobile,
         }) },
-        React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['non-interactive']) }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers'], contentClassName) }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+        React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: styles['drawer-content'] }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper'], contentClassName) }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
             var _a;
-            return (React.createElement(AppLayoutButton, { className: clsx(toggleClassName, styles.trigger, styles['trigger-drawer'], drawers.activeDrawerId === item.id && styles.selected), key: `drawer-trigger-${index}`, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined }), ariaExpanded: drawers.activeDrawerId !== undefined }));
+            return (React.createElement("span", { key: index, className: clsx(styles['drawer-trigger'], drawers.activeDrawerId === item.id && styles['drawer-trigger-active']), onClick: () => drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined }) },
+                React.createElement(ToggleButton, { className: toggleClassName, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
         }))))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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, { useRef } from 'react';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\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)\nexport const Drawer = React.forwardRef(\n  (\n    {\n      contentClassName,\n      toggleClassName,\n      closeClassName,\n      width,\n      type,\n      toggleRefs,\n      topOffset,\n      bottomOffset,\n      ariaLabels,\n      drawersAriaLabels,\n      children,\n      isOpen,\n      isMobile,\n      onToggle,\n      onClick,\n      onLoseFocus,\n      drawers,\n      resizeHandle,\n    }: DesktopDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const openButtonWrapperRef = useRef<HTMLElement | null>(null);\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 getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n      drawerMainLabel: labels?.content,\n      drawerOpenLabel: labels?.triggerButton,\n      drawerCloseLabel: labels?.closeButton,\n    });\n    const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n    const regularOpenButton = (\n      <TagName ref={openButtonWrapperRef} 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        ref={ref}\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          if (!isOpen) {\n            // to prevent calling onToggle from the drawer when it's called from the toggle button\n            if (\n              openButtonWrapperRef.current === event.target ||\n              !openButtonWrapperRef.current?.contains(event.target as Node)\n            ) {\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          {resizeHandle}\n          <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n            <CloseButton\n              ref={toggleRefs.close}\n              className={closeClassName}\n              ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n              onClick={() => {\n                onToggle(false);\n                drawers?.onChange({ activeDrawerId: undefined });\n              }}\n            />\n            {children}\n          </TagName>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport function DrawerTriggersBar({\n  isMobile,\n  topOffset,\n  bottomOffset,\n  drawers,\n  contentClassName,\n  toggleClassName,\n}: DrawerTriggersBarProps) {\n  return (\n    <div\n      className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n        [styles['drawer-mobile']]: isMobile,\n      })}\n    >\n      <div\n        style={{ top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'], styles['non-interactive'])}\n      >\n        {!isMobile && (\n          <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers'], contentClassName)}>\n            {drawers?.items?.map((item: DrawerItem, index: number) => (\n              <AppLayoutButton\n                className={clsx(\n                  toggleClassName,\n                  styles.trigger,\n                  styles['trigger-drawer'],\n                  drawers.activeDrawerId === item.id && styles.selected\n                )}\n                key={`drawer-trigger-${index}`}\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                onClick={() =>\n                  drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n                }\n                ariaExpanded={drawers.activeDrawerId !== undefined}\n              />\n            ))}\n          </aside>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\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)\nexport const Drawer = React.forwardRef(\n  (\n    {\n      contentClassName,\n      toggleClassName,\n      closeClassName,\n      width,\n      type,\n      toggleRefs,\n      topOffset,\n      bottomOffset,\n      ariaLabels,\n      drawersAriaLabels,\n      children,\n      isOpen,\n      isMobile,\n      onToggle,\n      onClick,\n      onLoseFocus,\n      drawers,\n      resizeHandle,\n    }: DesktopDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const openButtonWrapperRef = useRef<HTMLElement | null>(null);\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 getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n      drawerMainLabel: labels?.content,\n      drawerOpenLabel: labels?.triggerButton,\n      drawerCloseLabel: labels?.closeButton,\n    });\n    const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n    const regularOpenButton = (\n      <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n        <ToggleButton\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        ref={ref}\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          if (!isOpen) {\n            // to prevent calling onToggle from the drawer when it's called from the toggle button\n            if (\n              openButtonWrapperRef.current === event.target ||\n              !openButtonWrapperRef.current?.contains(event.target as Node)\n            ) {\n              onToggle(true);\n            }\n          }\n        }}\n      >\n        <div\n          style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n          className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n        >\n          {!isMobile && regularOpenButton}\n          {resizeHandle}\n          <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n            <CloseButton\n              ref={toggleRefs.close}\n              className={closeClassName}\n              ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n              onClick={() => {\n                onToggle(false);\n                drawers?.onChange({ activeDrawerId: undefined });\n              }}\n            />\n            {children}\n          </TagName>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport function DrawerTriggersBar({\n  isMobile,\n  topOffset,\n  bottomOffset,\n  drawers,\n  contentClassName,\n  toggleClassName,\n}: DrawerTriggersBarProps) {\n  return (\n    <div\n      className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n        [styles['drawer-mobile']]: isMobile,\n      })}\n    >\n      <div style={{ top: topOffset, bottom: bottomOffset }} className={styles['drawer-content']}>\n        {!isMobile && (\n          <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>\n            {drawers?.items?.map((item: DrawerItem, index: number) => (\n              <span\n                key={index}\n                className={clsx(\n                  styles['drawer-trigger'],\n                  drawers.activeDrawerId === item.id && styles['drawer-trigger-active']\n                )}\n                onClick={() =>\n                  drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n                }\n              >\n                <ToggleButton\n                  className={toggleClassName}\n                  iconName={item.trigger.iconName}\n                  iconSvg={item.trigger.iconSvg}\n                  ariaLabel={item.ariaLabels?.triggerButton}\n                  ariaExpanded={drawers.activeDrawerId !== undefined}\n                  testId={`awsui-app-layout-trigger-${item.id}`}\n                />\n              </span>\n            ))}\n          </aside>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ButtonProps } from '../../button/interfaces';
 import { togglesConfig } from '../toggles';
 import { AppLayoutProps } from '../interfaces';
 import { IconProps } from '../../icon/interfaces';
@@ -10,8 +9,12 @@ export interface DesktopDrawerProps {
     toggleClassName: string;
     closeClassName: string;
     toggleRefs: {
-        toggle: React.Ref<ButtonProps.Ref>;
-        close: React.Ref<ButtonProps.Ref>;
+        toggle: React.Ref<{
+            focus(): void;
+        }>;
+        close: React.Ref<{
+            focus(): void;
+        }>;
     };
     width: number;
     topOffset: number | undefined;

package/lib/internal/template/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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,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,iBAAiB,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACrD,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;IAChD,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAC7C,QAAQ,CAAC,EAAE,yBAAyB,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}

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

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

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

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_dsezo_97",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_dsezo_102",
-  "drawer": "awsui_drawer_1uo6m_dsezo_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_dsezo_112",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_dsezo_115",
-  "drawer-content": "awsui_drawer-content_1uo6m_dsezo_123",
-  "non-interactive": "awsui_non-interactive_1uo6m_dsezo_141",
-  "trigger": "awsui_trigger_1uo6m_dsezo_149",
-  "trigger-drawer": "awsui_trigger-drawer_1uo6m_dsezo_160",
-  "selected": "awsui_selected_1uo6m_dsezo_160"
+  "toggle": "awsui_toggle_1uo6m_1fg2f_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1fg2f_102",
+  "drawer": "awsui_drawer_1uo6m_1fg2f_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1fg2f_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_1fg2f_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_1fg2f_122",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1fg2f_137",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1fg2f_148",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_1fg2f_102",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1fg2f_166"
 };