@cloudscape-design/components 3.0.1287 → 3.0.1289

package/date-range-picker/styles.selectors.js

@@ -2,28 +2,28 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_mgja0_1ueys_153",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_1ueys_1",
-  "root": "awsui_root_mgja0_1ueys_176",
-  "wide": "awsui_wide_mgja0_1ueys_207",
-  "focus-lock": "awsui_focus-lock_mgja0_1ueys_214",
-  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_1ueys_218",
-  "calendar-container": "awsui_calendar-container_mgja0_1ueys_222",
-  "one-grid": "awsui_one-grid_mgja0_1ueys_225",
-  "calendar-header": "awsui_calendar-header_mgja0_1ueys_229",
-  "calendar-header-pages-wrapper": "awsui_calendar-header-pages-wrapper_mgja0_1ueys_235",
-  "calendar-header-page": "awsui_calendar-header-page_mgja0_1ueys_235",
-  "date-and-time-container": "awsui_date-and-time-container_mgja0_1ueys_255",
-  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_1ueys_261",
-  "footer": "awsui_footer_mgja0_1ueys_268",
-  "has-clear-button": "awsui_has-clear-button_mgja0_1ueys_277",
-  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_1ueys_286",
-  "icon-wrapper": "awsui_icon-wrapper_mgja0_1ueys_293",
-  "label": "awsui_label_mgja0_1ueys_298",
-  "label-enabled": "awsui_label-enabled_mgja0_1ueys_302",
-  "label-text": "awsui_label-text_mgja0_1ueys_306",
-  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_1ueys_311",
-  "dropdown": "awsui_dropdown_mgja0_1ueys_315",
-  "dropdown-content": "awsui_dropdown-content_mgja0_1ueys_337"
+  "calendar": "awsui_calendar_mgja0_195n8_153",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_mgja0_195n8_1",
+  "root": "awsui_root_mgja0_195n8_176",
+  "wide": "awsui_wide_mgja0_195n8_207",
+  "focus-lock": "awsui_focus-lock_mgja0_195n8_214",
+  "trigger-flexbox": "awsui_trigger-flexbox_mgja0_195n8_218",
+  "calendar-container": "awsui_calendar-container_mgja0_195n8_222",
+  "one-grid": "awsui_one-grid_mgja0_195n8_225",
+  "calendar-header": "awsui_calendar-header_mgja0_195n8_229",
+  "calendar-header-pages-wrapper": "awsui_calendar-header-pages-wrapper_mgja0_195n8_235",
+  "calendar-header-page": "awsui_calendar-header-page_mgja0_195n8_235",
+  "date-and-time-container": "awsui_date-and-time-container_mgja0_195n8_255",
+  "date-and-time-wrapper": "awsui_date-and-time-wrapper_mgja0_195n8_261",
+  "footer": "awsui_footer_mgja0_195n8_268",
+  "has-clear-button": "awsui_has-clear-button_mgja0_195n8_277",
+  "footer-button-wrapper": "awsui_footer-button-wrapper_mgja0_195n8_286",
+  "icon-wrapper": "awsui_icon-wrapper_mgja0_195n8_293",
+  "label": "awsui_label_mgja0_195n8_298",
+  "label-enabled": "awsui_label-enabled_mgja0_195n8_302",
+  "label-text": "awsui_label-text_mgja0_195n8_306",
+  "label-token-nowrap": "awsui_label-token-nowrap_mgja0_195n8_311",
+  "dropdown": "awsui_dropdown_mgja0_195n8_315",
+  "dropdown-content": "awsui_dropdown-content_mgja0_195n8_337"
 };
   

package/drawer/implementation.d.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { NextDrawerProps } from './interfaces';
-type DrawerInternalProps = NextDrawerProps & InternalBaseComponentProps;
+type DrawerInternalProps = NextDrawerProps & InternalBaseComponentProps & {
+  __ref?: React.Ref<NextDrawerProps.Ref>;
+};
 export declare function DrawerImplementation({
   header,
   footer,
@@ -9,12 +12,22 @@ export declare function DrawerImplementation({
   i18nStrings,
   disableContentPaddings,
   __internalRootRef,
+  __ref,
   headerActions,
   position,
   placement,
   offset,
   stickyOffset,
   zIndex,
+  closeAction,
+  hideCloseAction,
+  backdrop,
+  open,
+  onClose,
+  ariaLabel,
+  ariaLabelledby,
+  focusBehavior,
+  role,
   ...restProps
 }: DrawerInternalProps): JSX.Element;
 export declare const createWidgetizedDrawer: (Loader?: typeof DrawerImplementation | undefined) => typeof DrawerImplementation;

package/drawer/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,KAAK,mBAAmB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAExE,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,QAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,YAAY,EACZ,MAAM,EACN,GAAG,SAAS,EACb,EAAE,mBAAmB,eAwErB;AAED,eAAO,MAAM,sBAAsB,mFAAkD,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,KAAK,mBAAmB,GAAG,eAAe,GACxC,0BAA0B,GAAG;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;CACxC,CAAC;AAEJ,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,KAAK,EACL,aAAa,EACb,QAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,YAAY,EACZ,MAAM,EACN,WAAW,EACX,eAAuB,EACvB,QAAgB,EAChB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,cAAc,EACd,aAAa,EACb,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,mBAAmB,eAwKrB;AAED,eAAO,MAAM,sBAAsB,mFAAkD,CAAC"}

package/drawer/implementation.js

@@ -1,46 +1,119 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import clsx from 'clsx';
+import { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
+import InternalButton from '../button/internal';
 import { BuiltInErrorBoundary } from '../error-boundary/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
+import FocusLock from '../internal/components/focus-lock';
+import { getAllFocusables, isFocusable } from '../internal/components/focus-lock/utils';
+import { fireNonCancelableEvent } from '../internal/events';
+import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
 import { createWidgetizedComponent } from '../internal/widgets';
 import InternalLiveRegion from '../live-region/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
 import { useStickyFooter } from './use-sticky-footer';
 import { getPositionStyles } from './utils';
 import styles from './styles.css.js';
-export function DrawerImplementation({ header, footer, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, headerActions, position = 'static', placement = 'end', offset, stickyOffset, zIndex, ...restProps }) {
+import testClasses from './test-classes/styles.css.js';
+export function DrawerImplementation({ header, footer, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, __ref, headerActions, position = 'static', placement = 'end', offset, stickyOffset, zIndex, closeAction, hideCloseAction = false, backdrop = false, open, onClose, ariaLabel, ariaLabelledby, focusBehavior, role, ...restProps }) {
+    var _a, _b;
+    const containerRef = useRef(null);
+    const footerRef = useRef(null);
+    const returnFocusTargetRef = useRef(null);
     const baseProps = getBaseProps(restProps);
     const isToolbar = useAppLayoutToolbarDesignEnabled();
     const i18n = useInternalI18n('drawer');
     const positionStyles = getPositionStyles({ position, placement, offset, stickyOffset, zIndex });
+    const headerId = useUniqueId('drawer-header');
+    const defaultRegionLabelledBy = header ? headerId : undefined;
+    ariaLabelledby = ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : (ariaLabel ? undefined : defaultRegionLabelledBy);
+    role = role !== null && role !== void 0 ? role : (position === 'static' ? 'presentation' : 'region');
+    const roleProps = role === 'region'
+        ? { role: 'region', tabIndex: -1, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby }
+        : {};
     const containerProps = {
-        ...baseProps,
+        ref: containerRef,
+        ...roleProps,
         style: positionStyles.style,
-        className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar'], !!footer && styles['with-footer'], positionStyles.className),
+        className: clsx(styles.drawer, loading && styles['content-with-paddings'], isToolbar && styles['with-toolbar'], !!footer && styles['with-footer'], closeAction && !hideCloseAction && styles['has-close-action'], positionStyles.className),
     };
-    const footerRef = useRef(null);
+    const focusIn = useStableCallback(() => {
+        var _a;
+        returnFocusTargetRef.current = document.activeElement;
+        if (containerRef.current && isFocusable(containerRef.current)) {
+            containerRef.current.focus();
+        }
+        else if (containerRef.current) {
+            (_a = getAllFocusables(containerRef.current)[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    });
+    const focusOut = useStableCallback(() => {
+        if (focusBehavior === null || focusBehavior === void 0 ? void 0 : focusBehavior.returnFocus) {
+            focusBehavior.returnFocus();
+        }
+        else if (returnFocusTargetRef.current && returnFocusTargetRef.current.isConnected) {
+            returnFocusTargetRef.current.focus();
+        }
+        returnFocusTargetRef.current = null;
+    });
+    const autoFocusRef = useRef(false);
+    autoFocusRef.current = (_a = focusBehavior === null || focusBehavior === void 0 ? void 0 : focusBehavior.autoFocus) !== null && _a !== void 0 ? _a : true;
+    // The use-effect-on-update ensures no focus transition on component's initial render.
+    // If focus transition is needed - the drawerRef.current.focus() should be used instead.
+    useEffectOnUpdate(() => {
+        if (open === undefined) {
+            return;
+        }
+        if (open && autoFocusRef.current) {
+            focusIn();
+        }
+        if (!open) {
+            focusOut();
+        }
+    }, [open, focusIn, focusOut]);
+    const handleClose = useStableCallback((method) => fireNonCancelableEvent(onClose, { method }));
+    useImperativeHandle(__ref, () => ({ focus: () => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }), []);
     const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef });
     const hasAdditionalDrawerAction = !!(runtimeDrawerContext === null || runtimeDrawerContext === void 0 ? void 0 : runtimeDrawerContext.isExpandable);
     const { isSticky: isFooterSticky } = useStickyFooter({
-        drawerRef: __internalRootRef,
+        rootRef: __internalRootRef,
+        drawerRef: containerRef,
         footerRef,
     });
-    return loading ? (React.createElement("div", { ...containerProps, className: clsx(containerProps.className, styles['content-with-paddings']), ref: __internalRootRef },
-        React.createElement(InternalStatusIndicator, { type: "loading" },
-            React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('i18nStrings.loadingText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loadingText))))) : (React.createElement("div", { ...containerProps, ref: __internalRootRef },
-        header && (React.createElement("div", { className: clsx(styles.header, runtimeDrawerContext && styles['with-runtime-context'], hasAdditionalDrawerAction && styles['with-additional-action']) },
-            header,
-            headerActions && React.createElement("div", { className: styles['header-actions'] }, headerActions))),
-        React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], styles.content, !disableContentPaddings && styles['content-with-paddings']) },
-            React.createElement(BuiltInErrorBoundary, null, children)),
-        footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, {
-                [styles['is-sticky']]: isFooterSticky,
-            }) }, footer))));
+    const showBackdrop = backdrop && (position === 'fixed' || position === 'absolute');
+    const trapFocus = (_b = focusBehavior === null || focusBehavior === void 0 ? void 0 : focusBehavior.trapFocus) !== null && _b !== void 0 ? _b : showBackdrop;
+    useEffect(() => {
+        if (!showBackdrop) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                handleClose('escape');
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [showBackdrop, handleClose]);
+    return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, testClasses.root, open === false && styles.hidden), ref: __internalRootRef },
+        showBackdrop && (React.createElement("div", { className: clsx(styles.backdrop, testClasses.backdrop, styles[`backdrop-${position}`]), style: { zIndex }, onClick: () => handleClose('backdrop-click') })),
+        React.createElement(FocusLock, { disabled: !trapFocus, className: styles['focus-trap'] },
+            React.createElement("div", { ...containerProps }, loading ? (React.createElement(InternalStatusIndicator, { type: "loading" },
+                React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('i18nStrings.loadingText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loadingText)))) : (React.createElement(React.Fragment, null,
+                header && (React.createElement("div", { className: clsx(styles.header, runtimeDrawerContext && styles['with-runtime-context'], hasAdditionalDrawerAction && styles['with-additional-action'], hideCloseAction && styles['hide-close-action']) },
+                    React.createElement("span", { id: headerId }, header),
+                    headerActions && React.createElement("div", { className: styles['header-actions'] }, headerActions))),
+                closeAction && !hideCloseAction && (React.createElement("div", { className: styles['close-action'] },
+                    React.createElement(InternalButton, { variant: "icon", iconName: "close", ...closeAction, className: testClasses['close-action'], onClick: () => handleClose('close-action') }))),
+                React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], styles.content, !disableContentPaddings && styles['content-with-paddings']) },
+                    React.createElement(BuiltInErrorBoundary, null, children)),
+                footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, {
+                        [styles['is-sticky']]: isFooterSticky,
+                    }) }, footer))))))));
 }
 export const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);
 //# sourceMappingURL=implementation.js.map

package/drawer/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.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 React, { RefObject, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { NextDrawerProps } from './interfaces';\nimport { useStickyFooter } from './use-sticky-footer';\nimport { getPositionStyles } from './utils';\n\nimport styles from './styles.css.js';\n\ntype DrawerInternalProps = NextDrawerProps & InternalBaseComponentProps;\n\nexport function DrawerImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  i18nStrings,\n  disableContentPaddings,\n  __internalRootRef,\n  headerActions,\n  position = 'static',\n  placement = 'end',\n  offset,\n  stickyOffset,\n  zIndex,\n  ...restProps\n}: DrawerInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const i18n = useInternalI18n('drawer');\n  const positionStyles = getPositionStyles({ position, placement, offset, stickyOffset, zIndex });\n  const containerProps = {\n    ...baseProps,\n    style: positionStyles.style,\n    className: clsx(\n      baseProps.className,\n      styles.drawer,\n      isToolbar && styles['with-toolbar'],\n      !!footer && styles['with-footer'],\n      positionStyles.className\n    ),\n  };\n  const footerRef = useRef<HTMLDivElement>(null);\n\n  const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef as RefObject<HTMLElement> });\n  const hasAdditionalDrawerAction = !!runtimeDrawerContext?.isExpandable;\n  const { isSticky: isFooterSticky } = useStickyFooter({\n    drawerRef: __internalRootRef as RefObject<HTMLElement>,\n    footerRef,\n  });\n\n  return loading ? (\n    <div\n      {...containerProps}\n      className={clsx(containerProps.className, styles['content-with-paddings'])}\n      ref={__internalRootRef}\n    >\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">\n          {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n        </InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && (\n        <div\n          className={clsx(\n            styles.header,\n            runtimeDrawerContext && styles['with-runtime-context'],\n            hasAdditionalDrawerAction && styles['with-additional-action']\n          )}\n        >\n          {header}\n          {headerActions && <div className={styles['header-actions']}>{headerActions}</div>}\n        </div>\n      )}\n      <div\n        className={clsx(\n          styles['test-utils-drawer-content'],\n          styles.content,\n          !disableContentPaddings && styles['content-with-paddings']\n        )}\n      >\n        <BuiltInErrorBoundary>{children}</BuiltInErrorBoundary>\n      </div>\n      {footer && (\n        <div\n          ref={footerRef}\n          className={clsx(styles.footer, {\n            [styles['is-sticky']]: isFooterSticky,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.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\n\nimport React, { RefObject, useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport InternalButton from '../button/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport { getAllFocusables, isFocusable } from '../internal/components/focus-lock/utils';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { NextDrawerProps } from './interfaces';\nimport { useStickyFooter } from './use-sticky-footer';\nimport { getPositionStyles } from './utils';\n\nimport styles from './styles.css.js';\nimport testClasses from './test-classes/styles.css.js';\n\ntype DrawerInternalProps = NextDrawerProps &\n  InternalBaseComponentProps & {\n    __ref?: React.Ref<NextDrawerProps.Ref>;\n  };\n\nexport function DrawerImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  i18nStrings,\n  disableContentPaddings,\n  __internalRootRef,\n  __ref,\n  headerActions,\n  position = 'static',\n  placement = 'end',\n  offset,\n  stickyOffset,\n  zIndex,\n  closeAction,\n  hideCloseAction = false,\n  backdrop = false,\n  open,\n  onClose,\n  ariaLabel,\n  ariaLabelledby,\n  focusBehavior,\n  role,\n  ...restProps\n}: DrawerInternalProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const returnFocusTargetRef = useRef<HTMLElement | null>(null);\n\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const i18n = useInternalI18n('drawer');\n  const positionStyles = getPositionStyles({ position, placement, offset, stickyOffset, zIndex });\n  const headerId = useUniqueId('drawer-header');\n  const defaultRegionLabelledBy = header ? headerId : undefined;\n  ariaLabelledby = ariaLabelledby ?? (ariaLabel ? undefined : defaultRegionLabelledBy);\n  role = role ?? (position === 'static' ? 'presentation' : 'region');\n  const roleProps =\n    role === 'region'\n      ? { role: 'region', tabIndex: -1, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby }\n      : {};\n  const containerProps = {\n    ref: containerRef,\n    ...roleProps,\n    style: positionStyles.style,\n    className: clsx(\n      styles.drawer,\n      loading && styles['content-with-paddings'],\n      isToolbar && styles['with-toolbar'],\n      !!footer && styles['with-footer'],\n      closeAction && !hideCloseAction && styles['has-close-action'],\n      positionStyles.className\n    ),\n  };\n\n  const focusIn = useStableCallback(() => {\n    returnFocusTargetRef.current = document.activeElement as HTMLElement;\n    if (containerRef.current && isFocusable(containerRef.current)) {\n      containerRef.current.focus();\n    } else if (containerRef.current) {\n      getAllFocusables(containerRef.current)[0]?.focus();\n    }\n  });\n\n  const focusOut = useStableCallback(() => {\n    if (focusBehavior?.returnFocus) {\n      focusBehavior.returnFocus();\n    } else if (returnFocusTargetRef.current && returnFocusTargetRef.current.isConnected) {\n      returnFocusTargetRef.current.focus();\n    }\n    returnFocusTargetRef.current = null;\n  });\n\n  const autoFocusRef = useRef(false);\n  autoFocusRef.current = focusBehavior?.autoFocus ?? true;\n\n  // The use-effect-on-update ensures no focus transition on component's initial render.\n  // If focus transition is needed - the drawerRef.current.focus() should be used instead.\n  useEffectOnUpdate(() => {\n    if (open === undefined) {\n      return;\n    }\n    if (open && autoFocusRef.current) {\n      focusIn();\n    }\n    if (!open) {\n      focusOut();\n    }\n  }, [open, focusIn, focusOut]);\n\n  const handleClose = useStableCallback((method: 'close-action' | 'backdrop-click' | 'escape') =>\n    fireNonCancelableEvent(onClose, { method })\n  );\n\n  useImperativeHandle(__ref, () => ({ focus: () => containerRef.current?.focus() }), []);\n\n  const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef as RefObject<HTMLElement> });\n  const hasAdditionalDrawerAction = !!runtimeDrawerContext?.isExpandable;\n  const { isSticky: isFooterSticky } = useStickyFooter({\n    rootRef: __internalRootRef as RefObject<HTMLElement>,\n    drawerRef: containerRef,\n    footerRef,\n  });\n\n  const showBackdrop = backdrop && (position === 'fixed' || position === 'absolute');\n  const trapFocus = focusBehavior?.trapFocus ?? showBackdrop;\n\n  useEffect(() => {\n    if (!showBackdrop) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleClose('escape');\n      }\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [showBackdrop, handleClose]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, testClasses.root, open === false && styles.hidden)}\n      ref={__internalRootRef}\n    >\n      {showBackdrop && (\n        <div\n          className={clsx(styles.backdrop, testClasses.backdrop, styles[`backdrop-${position}`])}\n          style={{ zIndex }}\n          onClick={() => handleClose('backdrop-click')}\n        />\n      )}\n      <FocusLock disabled={!trapFocus} className={styles['focus-trap']}>\n        <div {...containerProps}>\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">\n              <InternalLiveRegion tagName=\"span\">\n                {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n              </InternalLiveRegion>\n            </InternalStatusIndicator>\n          ) : (\n            <>\n              {header && (\n                <div\n                  className={clsx(\n                    styles.header,\n                    runtimeDrawerContext && styles['with-runtime-context'],\n                    hasAdditionalDrawerAction && styles['with-additional-action'],\n                    hideCloseAction && styles['hide-close-action']\n                  )}\n                >\n                  <span id={headerId}>{header}</span>\n                  {headerActions && <div className={styles['header-actions']}>{headerActions}</div>}\n                </div>\n              )}\n              {closeAction && !hideCloseAction && (\n                <div className={styles['close-action']}>\n                  <InternalButton\n                    variant=\"icon\"\n                    iconName=\"close\"\n                    {...closeAction}\n                    className={testClasses['close-action']}\n                    onClick={() => handleClose('close-action')}\n                  />\n                </div>\n              )}\n              <div\n                className={clsx(\n                  styles['test-utils-drawer-content'],\n                  styles.content,\n                  !disableContentPaddings && styles['content-with-paddings']\n                )}\n              >\n                <BuiltInErrorBoundary>{children}</BuiltInErrorBoundary>\n              </div>\n              {footer && (\n                <div\n                  ref={footerRef}\n                  className={clsx(styles.footer, {\n                    [styles['is-sticky']]: isFooterSticky,\n                  })}\n                >\n                  {footer}\n                </div>\n              )}\n            </>\n          )}\n        </div>\n      </FocusLock>\n    </div>\n  );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}

package/drawer/interfaces.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { ButtonProps } from '../button/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
 export interface DrawerProps extends BaseComponentProps {
   /**
    * Header of the drawer.
@@ -43,6 +45,30 @@ export declare namespace DrawerProps {
   }
 }
 export interface NextDrawerProps extends DrawerProps {
+  /**
+   * Sets the ARIA role of the drawer.
+   * - `"region"` (default for non-`static` positions) — exposes the drawer as a
+   * landmark region. The drawer receives focus when opened.
+   * - `"presentation"` (default for `position="static"`) — removes landmark semantics
+   * from the drawer body. Use this when the containing element already provides the
+   * appropriate semantic role (e.g. a wrapping `<nav>` or `<aside>`). The drawer does not
+   * receive focus when opened.
+   */
+  role?: 'region' | 'presentation';
+  /**
+   * Sets the `aria-label` on the drawer body.
+   * By default the body is labelled by the drawer's `header` content. Use this when you need a different
+   * or more specific label (e.g. to include additional context or exclude parts of the header).
+   * Does not apply when `role="presentation"`. Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+   */
+  ariaLabel?: string;
+  /**
+   * Sets the `aria-labelledby` on the drawer body.
+   * By default the body is labelled by the drawer's `header` content. Use this when you need a different
+   * or more specific label (e.g. to include additional context or exclude parts of the header).
+   * Does not apply when `role="presentation"`. Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+   */
+  ariaLabelledby?: string;
   /**
    * Specifies the CSS positioning mode of the drawer, and supports the following options:
    * * `static` (default) - The drawer is positioned in the normal document flow.
@@ -85,6 +111,57 @@ export interface NextDrawerProps extends DrawerProps {
    * Applicable when using `position="sticky"`, `position="absolute"`, or `position="fixed"`.
    */
   zIndex?: number;
+  /**
+   * When defined, renders a close button in the header with the provided configuration.
+   * The close button fires the `onClose` event with method `'close-action'` when
+   * clicked.
+   */
+  closeAction?: Pick<ButtonProps, 'ariaLabel' | 'disabled' | 'disabledReason' | 'iconName' | 'iconSvg' | 'iconUrl' | 'iconAlt'>;
+  /**
+   * Hides the close action slot next to the header actions, which is present even
+   * when close action is not set. Use it when a close action is not needed, or a
+   * custom close action implementation is used.
+   */
+  hideCloseAction?: boolean;
+  /**
+   * Called when the user performs a close action. The `event.detail.method` indicates the trigger:
+   * * `'close-action'` - The close button was clicked.
+   * * `'backdrop-click'` - The backdrop was clicked (only when `backdrop=true`).
+   * * `'escape'` - The Escape key was pressed (only when `backdrop=true`).
+   */
+  onClose?: NonCancelableEventHandler<NextDrawerProps.CloseDetail>;
+  /**
+   * Drawer open state. Set to `true` to show the drawer, `false` to hide it.
+   * Handle the `onClose` event to update this value when the user requests to close the drawer.
+   *
+   * When the property is unset - the drawer is always visible, and the built-in focus in/out behaviors are disabled.
+   */
+  open?: boolean;
+  /**
+   * Shows a semi-transparent backdrop behind the drawer when open. Used with `absolute`
+   * and `fixed` positions.
+   *
+   * When a backdrop is set, the keyboard focus is trapped inside the drawer by default
+   * to prevent it from moving to elements covered by the backdrop. This can be overridden
+   * with `focusBehavior.trapFocus`.
+   */
+  backdrop?: boolean;
+  /**
+   * Customizes focus-related behavior:
+   *
+   * - `autoFocus` - Whether focus moves into the drawer when `open` changes from `false` to `true`,
+   * and captures the previously focused element for default return-focus on close.
+   * Defaults to `true`. Set to `false` to manage focus-in manually via `ref.current.focus()`.
+   *
+   * - `trapFocus` - Whether keyboard focus is constrained to elements inside the drawer.
+   * Defaults to `true` when `backdrop` is set, `false` otherwise.
+   *
+   * - `returnFocus` - Called instead of the default return-focus behavior when the drawer closes.
+   * Use this to override where focus lands on close (e.g. a specific trigger element).
+   * If omitted, focus returns to the element that was focused when the drawer opened.
+   * If that element is no longer in the DOM, the behavior silently no-ops.
+   */
+  focusBehavior?: NextDrawerProps.FocusBehavior;
 }
 export declare namespace NextDrawerProps {
   type Position = 'static' | 'sticky' | 'absolute' | 'fixed';
@@ -99,4 +176,20 @@ export declare namespace NextDrawerProps {
     top?: number;
     bottom?: number;
   }
+  interface CloseDetail {
+    method: 'close-action' | 'backdrop-click' | 'escape';
+  }
+  interface FocusBehavior {
+    autoFocus?: boolean;
+    trapFocus?: boolean;
+    returnFocus?: () => void;
+  }
+  interface Ref {
+    /**
+     * Moves focus to the drawer element. Use in controlled mode when `focusBehavior.autoFocus`
+     * is disabled and you need to manage focus manually, or to focus a drawer, initially rendered
+     * with `open=true`. The drawer with `role="presentation"` cannot be focused.
+     */
+    focus(): void;
+  }
 }

package/drawer/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,WAAW;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB;CACF;AAGD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC;IAEpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC;IAEhC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC;IAE5C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAElE,KAAY,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE3D,UAAiB,MAAM;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;IAED,UAAiB,YAAY;QAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,WAAW;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB;CACF;AAGD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;IAEjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC;IAEpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC;IAEhC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC;IAE5C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,WAAW,CAAC,EAAE,IAAI,CAChB,WAAW,EACX,WAAW,GAAG,UAAU,GAAG,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAC7F,CAAC;IAEF;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEjE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC;CAC/C;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAElE,KAAY,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE3D,UAAiB,MAAM;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;IAED,UAAiB,YAAY;QAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;IAED,UAAiB,WAAW;QAC1B,MAAM,EAAE,cAAc,GAAG,gBAAgB,GAAG,QAAQ,CAAC;KACtD;IAED,UAAiB,aAAa;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;KAC1B;IAED,UAAiB,GAAG;QAClB;;;;WAIG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/drawer/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `i18nStrings.loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `loadingText` - The text that's displayed when the drawer is in a loading state.\n   * @i18n\n   */\n  i18nStrings?: DrawerProps.I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\nexport namespace DrawerProps {\n  export interface I18nStrings {\n    loadingText?: string;\n  }\n}\n\n// Props for a future release\nexport interface NextDrawerProps extends DrawerProps {\n  /**\n   * Specifies the CSS positioning mode of the drawer, and supports the following options:\n   * * `static` (default) - The drawer is positioned in the normal document flow.\n   * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement=\"top\"` or `placement=\"bottom\"`.\n   * Using `sticky` with `placement=\"start\"` or `placement=\"end\"` falls back to `static`.\n   * * `absolute` - The drawer is positioned relative to its nearest positioned ancestor.\n   * * `fixed` - The drawer is positioned relative to the viewport.\n   */\n  position?: NextDrawerProps.Position;\n\n  /**\n   * Specifies which edge of its container the drawer is anchored to, and supports these options:\n   * * `start` - Anchored to the inline-start edge.\n   * * `end` - (default) Anchored to the inline-end edge.\n   * * `top` - Anchored to the top edge.\n   * * `bottom` - Anchored to the bottom edge.\n   */\n  placement?: NextDrawerProps.Placement;\n\n  /**\n   * Specifies the distance in pixels between the drawer and the edges of its container.\n   * Applicable when using `position=\"absolute\"` or `position=\"fixed\"`.\n   * Supported properties:\n   * * `start` - Distance from the inline-start edge. Not applicable when `placement` is `\"end\"`.\n   * * `end` - Distance from the inline-end edge. Not applicable when `placement` is `\"start\"`.\n   * * `top` - Distance from the top edge. Not applicable when `placement` is `\"bottom\"`.\n   * * `bottom` - Distance from the bottom edge. Not applicable when `placement` is `\"top\"`.\n   */\n  offset?: NextDrawerProps.Offset;\n\n  /**\n   * Specifies the distance in pixels from the top or bottom edge of the scrolling container\n   * at which the drawer sticks. Applicable only when using `position=\"sticky\"` with `placement=\"top\"` or `placement=\"bottom\"`.\n   * * Supported properties:\n   * * `top` - Distance from the top of the scrolling container.\n   * * `bottom` - Distance from the bottom of the scrolling container.\n   */\n  stickyOffset?: NextDrawerProps.StickyOffset;\n\n  /**\n   * Sets the CSS `z-index` of the drawer. Use this to control stacking order when the drawer\n   * overlaps other positioned elements on the page.\n   *\n   * Applicable when using `position=\"sticky\"`, `position=\"absolute\"`, or `position=\"fixed\"`.\n   */\n  zIndex?: number;\n}\n\nexport namespace NextDrawerProps {\n  export type Position = 'static' | 'sticky' | 'absolute' | 'fixed';\n\n  export type Placement = 'start' | 'end' | 'top' | 'bottom';\n\n  export interface Offset {\n    start?: number;\n    end?: number;\n    top?: number;\n    bottom?: number;\n  }\n\n  export interface StickyOffset {\n    top?: number;\n    bottom?: number;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `i18nStrings.loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `loadingText` - The text that's displayed when the drawer is in a loading state.\n   * @i18n\n   */\n  i18nStrings?: DrawerProps.I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\nexport namespace DrawerProps {\n  export interface I18nStrings {\n    loadingText?: string;\n  }\n}\n\n// Props for a future release\nexport interface NextDrawerProps extends DrawerProps {\n  /**\n   * Sets the ARIA role of the drawer.\n   * - `\"region\"` (default for non-`static` positions) — exposes the drawer as a\n   * landmark region. The drawer receives focus when opened.\n   * - `\"presentation\"` (default for `position=\"static\"`) — removes landmark semantics\n   * from the drawer body. Use this when the containing element already provides the\n   * appropriate semantic role (e.g. a wrapping `<nav>` or `<aside>`). The drawer does not\n   * receive focus when opened.\n   */\n  role?: 'region' | 'presentation';\n\n  /**\n   * Sets the `aria-label` on the drawer body.\n   * By default the body is labelled by the drawer's `header` content. Use this when you need a different\n   * or more specific label (e.g. to include additional context or exclude parts of the header).\n   * Does not apply when `role=\"presentation\"`. Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` on the drawer body.\n   * By default the body is labelled by the drawer's `header` content. Use this when you need a different\n   * or more specific label (e.g. to include additional context or exclude parts of the header).\n   * Does not apply when `role=\"presentation\"`. Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Specifies the CSS positioning mode of the drawer, and supports the following options:\n   * * `static` (default) - The drawer is positioned in the normal document flow.\n   * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement=\"top\"` or `placement=\"bottom\"`.\n   * Using `sticky` with `placement=\"start\"` or `placement=\"end\"` falls back to `static`.\n   * * `absolute` - The drawer is positioned relative to its nearest positioned ancestor.\n   * * `fixed` - The drawer is positioned relative to the viewport.\n   */\n  position?: NextDrawerProps.Position;\n\n  /**\n   * Specifies which edge of its container the drawer is anchored to, and supports these options:\n   * * `start` - Anchored to the inline-start edge.\n   * * `end` - (default) Anchored to the inline-end edge.\n   * * `top` - Anchored to the top edge.\n   * * `bottom` - Anchored to the bottom edge.\n   */\n  placement?: NextDrawerProps.Placement;\n\n  /**\n   * Specifies the distance in pixels between the drawer and the edges of its container.\n   * Applicable when using `position=\"absolute\"` or `position=\"fixed\"`.\n   * Supported properties:\n   * * `start` - Distance from the inline-start edge. Not applicable when `placement` is `\"end\"`.\n   * * `end` - Distance from the inline-end edge. Not applicable when `placement` is `\"start\"`.\n   * * `top` - Distance from the top edge. Not applicable when `placement` is `\"bottom\"`.\n   * * `bottom` - Distance from the bottom edge. Not applicable when `placement` is `\"top\"`.\n   */\n  offset?: NextDrawerProps.Offset;\n\n  /**\n   * Specifies the distance in pixels from the top or bottom edge of the scrolling container\n   * at which the drawer sticks. Applicable only when using `position=\"sticky\"` with `placement=\"top\"` or `placement=\"bottom\"`.\n   * * Supported properties:\n   * * `top` - Distance from the top of the scrolling container.\n   * * `bottom` - Distance from the bottom of the scrolling container.\n   */\n  stickyOffset?: NextDrawerProps.StickyOffset;\n\n  /**\n   * Sets the CSS `z-index` of the drawer. Use this to control stacking order when the drawer\n   * overlaps other positioned elements on the page.\n   *\n   * Applicable when using `position=\"sticky\"`, `position=\"absolute\"`, or `position=\"fixed\"`.\n   */\n  zIndex?: number;\n\n  /**\n   * When defined, renders a close button in the header with the provided configuration.\n   * The close button fires the `onClose` event with method `'close-action'` when\n   * clicked.\n   */\n  closeAction?: Pick<\n    ButtonProps,\n    'ariaLabel' | 'disabled' | 'disabledReason' | 'iconName' | 'iconSvg' | 'iconUrl' | 'iconAlt'\n  >;\n\n  /**\n   * Hides the close action slot next to the header actions, which is present even\n   * when close action is not set. Use it when a close action is not needed, or a\n   * custom close action implementation is used.\n   */\n  hideCloseAction?: boolean;\n\n  /**\n   * Called when the user performs a close action. The `event.detail.method` indicates the trigger:\n   * * `'close-action'` - The close button was clicked.\n   * * `'backdrop-click'` - The backdrop was clicked (only when `backdrop=true`).\n   * * `'escape'` - The Escape key was pressed (only when `backdrop=true`).\n   */\n  onClose?: NonCancelableEventHandler<NextDrawerProps.CloseDetail>;\n\n  /**\n   * Drawer open state. Set to `true` to show the drawer, `false` to hide it.\n   * Handle the `onClose` event to update this value when the user requests to close the drawer.\n   *\n   * When the property is unset - the drawer is always visible, and the built-in focus in/out behaviors are disabled.\n   */\n  open?: boolean;\n\n  /**\n   * Shows a semi-transparent backdrop behind the drawer when open. Used with `absolute`\n   * and `fixed` positions.\n   *\n   * When a backdrop is set, the keyboard focus is trapped inside the drawer by default\n   * to prevent it from moving to elements covered by the backdrop. This can be overridden\n   * with `focusBehavior.trapFocus`.\n   */\n  backdrop?: boolean;\n\n  /**\n   * Customizes focus-related behavior:\n   *\n   * - `autoFocus` - Whether focus moves into the drawer when `open` changes from `false` to `true`,\n   * and captures the previously focused element for default return-focus on close.\n   * Defaults to `true`. Set to `false` to manage focus-in manually via `ref.current.focus()`.\n   *\n   * - `trapFocus` - Whether keyboard focus is constrained to elements inside the drawer.\n   * Defaults to `true` when `backdrop` is set, `false` otherwise.\n   *\n   * - `returnFocus` - Called instead of the default return-focus behavior when the drawer closes.\n   * Use this to override where focus lands on close (e.g. a specific trigger element).\n   * If omitted, focus returns to the element that was focused when the drawer opened.\n   * If that element is no longer in the DOM, the behavior silently no-ops.\n   */\n  focusBehavior?: NextDrawerProps.FocusBehavior;\n}\n\nexport namespace NextDrawerProps {\n  export type Position = 'static' | 'sticky' | 'absolute' | 'fixed';\n\n  export type Placement = 'start' | 'end' | 'top' | 'bottom';\n\n  export interface Offset {\n    start?: number;\n    end?: number;\n    top?: number;\n    bottom?: number;\n  }\n\n  export interface StickyOffset {\n    top?: number;\n    bottom?: number;\n  }\n\n  export interface CloseDetail {\n    method: 'close-action' | 'backdrop-click' | 'escape';\n  }\n\n  export interface FocusBehavior {\n    autoFocus?: boolean;\n    trapFocus?: boolean;\n    returnFocus?: () => void;\n  }\n\n  export interface Ref {\n    /**\n     * Moves focus to the drawer element. Use in controlled mode when `focusBehavior.autoFocus`\n     * is disabled and you need to manage focus manually, or to focus a drawer, initially rendered\n     * with `open=true`. The drawer with `role=\"presentation\"` cannot be focused.\n     */\n    focus(): void;\n  }\n}\n"]}

package/drawer/next.d.ts

@@ -1,16 +1,5 @@
+import React from 'react';
 import { NextDrawerProps } from './interfaces';
 export { NextDrawerProps };
-declare const Drawer: ({
-  header,
-  headerActions,
-  footer,
-  disableContentPaddings,
-  loading,
-  position,
-  placement,
-  offset,
-  stickyOffset,
-  zIndex,
-  ...props
-}: NextDrawerProps) => JSX.Element;
+declare const Drawer: React.ForwardRefExoticComponent<NextDrawerProps & React.RefAttributes<NextDrawerProps.Ref>>;
 export default Drawer;

package/drawer/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../../../src/drawer/next.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,MAAM,GAAmB,iIAY5B,eAAe,gBAiCjB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../../../src/drawer/next.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAK3B,QAAA,MAAM,MAAM,6FAwEV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/drawer/next.js

@@ -2,30 +2,37 @@
 // SPDX-License-Identifier: Apache-2.0
 // eslint-disable-next-line @cloudscape-design/build-tools/react-server-components-directive
 'use client';
-import React from 'react';
+import React, { forwardRef } from 'react';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { getExternalProps } from '../internal/utils/external-props';
 import { InternalDrawer } from './internal';
-const Drawer = function Drawer({ header, headerActions, footer, disableContentPaddings = false, loading = false, position = 'static', placement = 'end', offset, stickyOffset, zIndex, ...props }) {
+// Matches App Layout drawers z-index.
+const DEFAULT_Z_INDEX = 830;
+const Drawer = forwardRef(function Drawer({ header, headerActions, footer, disableContentPaddings = false, loading = false, position = 'static', placement = 'end', offset, stickyOffset, zIndex = DEFAULT_Z_INDEX, closeAction, hideCloseAction = false, open, backdrop = false, onClose, focusBehavior, role, ...props }, ref) {
+    if (backdrop && position !== 'fixed' && position !== 'absolute') {
+        warnOnce('Drawer', `\`backdrop\` is not supported with position="${position}" and will be ignored.`);
+    }
+    if (open !== undefined && !onClose) {
+        warnOnce('Drawer', 'You provided `open` without an `onClose` handler. The drawer will not respond to close actions.');
+    }
     const baseComponentProps = useBaseComponent('Drawer', {
-        props: {
-            disableContentPaddings,
-            loading,
-            placement,
-            position,
-            zIndex,
-        },
+        props: { disableContentPaddings, loading, placement, position, zIndex, hideCloseAction, backdrop, role },
         metadata: {
             hasHeader: !!header,
             hasHeaderActions: !!headerActions,
             hasFooter: !!footer,
             hasOffset: !!offset,
             hasStickyOffset: !!stickyOffset,
+            hasCloseAction: !!closeAction,
+            autoFocus: !!(focusBehavior === null || focusBehavior === void 0 ? void 0 : focusBehavior.autoFocus),
+            trapFocus: !!(focusBehavior === null || focusBehavior === void 0 ? void 0 : focusBehavior.trapFocus),
+            returnFocus: !!(focusBehavior === null || focusBehavior === void 0 ? void 0 : focusBehavior.returnFocus),
         },
     });
-    return (React.createElement(InternalDrawer, { ...getExternalProps(props), ...baseComponentProps, header: header, headerActions: headerActions, footer: footer, disableContentPaddings: disableContentPaddings, loading: loading, placement: placement, position: position, offset: offset, stickyOffset: stickyOffset, zIndex: zIndex }));
-};
+    return (React.createElement(InternalDrawer, { ...getExternalProps(props), ...baseComponentProps, __ref: ref, header: header, headerActions: headerActions, footer: footer, disableContentPaddings: disableContentPaddings, loading: loading, placement: placement, position: position, offset: offset, stickyOffset: stickyOffset, zIndex: zIndex, closeAction: closeAction, hideCloseAction: hideCloseAction, open: open, backdrop: backdrop, onClose: onClose, focusBehavior: focusBehavior, role: role }));
+});
 export default Drawer;
 applyDisplayName(Drawer, 'Drawer');
 //# sourceMappingURL=next.js.map

package/drawer/next.js.map

@@ -1 +1 @@
-{"version":3,"file":"next.js","sourceRoot":"","sources":["../../../src/drawer/next.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,4FAA4F;AAC5F,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAI5C,MAAM,MAAM,GAAG,SAAS,MAAM,CAAC,EAC7B,MAAM,EACN,aAAa,EACb,MAAM,EACN,sBAAsB,GAAG,KAAK,EAC9B,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,QAAQ,EACnB,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,YAAY,EACZ,MAAM,EACN,GAAG,KAAK,EACQ;IAChB,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE;YACL,sBAAsB;YACtB,OAAO;YACP,SAAS;YACT,QAAQ;YACR,MAAM;SACP;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,CAAC,CAAC,MAAM;YACnB,gBAAgB,EAAE,CAAC,CAAC,aAAa;YACjC,SAAS,EAAE,CAAC,CAAC,MAAM;YACnB,SAAS,EAAE,CAAC,CAAC,MAAM;YACnB,eAAe,EAAE,CAAC,CAAC,YAAY;SAChC;KACF,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,cAAc,OACT,gBAAgB,CAAC,KAAK,CAAC,KACvB,kBAAkB,EACtB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// eslint-disable-next-line @cloudscape-design/build-tools/react-server-components-directive\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { NextDrawerProps } from './interfaces';\nimport { InternalDrawer } from './internal';\n\nexport { NextDrawerProps };\n\nconst Drawer = function Drawer({\n  header,\n  headerActions,\n  footer,\n  disableContentPaddings = false,\n  loading = false,\n  position = 'static',\n  placement = 'end',\n  offset,\n  stickyOffset,\n  zIndex,\n  ...props\n}: NextDrawerProps) {\n  const baseComponentProps = useBaseComponent('Drawer', {\n    props: {\n      disableContentPaddings,\n      loading,\n      placement,\n      position,\n      zIndex,\n    },\n    metadata: {\n      hasHeader: !!header,\n      hasHeaderActions: !!headerActions,\n      hasFooter: !!footer,\n      hasOffset: !!offset,\n      hasStickyOffset: !!stickyOffset,\n    },\n  });\n  return (\n    <InternalDrawer\n      {...getExternalProps(props)}\n      {...baseComponentProps}\n      header={header}\n      headerActions={headerActions}\n      footer={footer}\n      disableContentPaddings={disableContentPaddings}\n      loading={loading}\n      placement={placement}\n      position={position}\n      offset={offset}\n      stickyOffset={stickyOffset}\n      zIndex={zIndex}\n    />\n  );\n};\n\nexport default Drawer;\n\napplyDisplayName(Drawer, 'Drawer');\n"]}
+{"version":3,"file":"next.js","sourceRoot":"","sources":["../../../src/drawer/next.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\n\n// eslint-disable-next-line @cloudscape-design/build-tools/react-server-components-directive\n'use client';\nimport React, { forwardRef } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { NextDrawerProps } from './interfaces';\nimport { InternalDrawer } from './internal';\n\nexport { NextDrawerProps };\n\n// Matches App Layout drawers z-index.\nconst DEFAULT_Z_INDEX = 830;\n\nconst Drawer = forwardRef(function Drawer(\n  {\n    header,\n    headerActions,\n    footer,\n    disableContentPaddings = false,\n    loading = false,\n    position = 'static',\n    placement = 'end',\n    offset,\n    stickyOffset,\n    zIndex = DEFAULT_Z_INDEX,\n    closeAction,\n    hideCloseAction = false,\n    open,\n    backdrop = false,\n    onClose,\n    focusBehavior,\n    role,\n    ...props\n  }: NextDrawerProps,\n  ref: React.Ref<NextDrawerProps.Ref>\n) {\n  if (backdrop && position !== 'fixed' && position !== 'absolute') {\n    warnOnce('Drawer', `\\`backdrop\\` is not supported with position=\"${position}\" and will be ignored.`);\n  }\n  if (open !== undefined && !onClose) {\n    warnOnce(\n      'Drawer',\n      'You provided `open` without an `onClose` handler. The drawer will not respond to close actions.'\n    );\n  }\n\n  const baseComponentProps = useBaseComponent('Drawer', {\n    props: { disableContentPaddings, loading, placement, position, zIndex, hideCloseAction, backdrop, role },\n    metadata: {\n      hasHeader: !!header,\n      hasHeaderActions: !!headerActions,\n      hasFooter: !!footer,\n      hasOffset: !!offset,\n      hasStickyOffset: !!stickyOffset,\n      hasCloseAction: !!closeAction,\n      autoFocus: !!focusBehavior?.autoFocus,\n      trapFocus: !!focusBehavior?.trapFocus,\n      returnFocus: !!focusBehavior?.returnFocus,\n    },\n  });\n\n  return (\n    <InternalDrawer\n      {...getExternalProps(props)}\n      {...baseComponentProps}\n      __ref={ref}\n      header={header}\n      headerActions={headerActions}\n      footer={footer}\n      disableContentPaddings={disableContentPaddings}\n      loading={loading}\n      placement={placement}\n      position={position}\n      offset={offset}\n      stickyOffset={stickyOffset}\n      zIndex={zIndex}\n      closeAction={closeAction}\n      hideCloseAction={hideCloseAction}\n      open={open}\n      backdrop={backdrop}\n      onClose={onClose}\n      focusBehavior={focusBehavior}\n      role={role}\n    />\n  );\n});\n\nexport default Drawer;\n\napplyDisplayName(Drawer, 'Drawer');\n"]}

package/drawer/styles.css.js

@@ -1,21 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1sxt8_zqi16_189",
-  "position-absolute": "awsui_position-absolute_1sxt8_zqi16_222",
-  "position-sticky": "awsui_position-sticky_1sxt8_zqi16_222",
-  "position-fixed": "awsui_position-fixed_1sxt8_zqi16_222",
-  "with-footer": "awsui_with-footer_1sxt8_zqi16_225",
-  "position-static": "awsui_position-static_1sxt8_zqi16_229",
-  "content": "awsui_content_1sxt8_zqi16_232",
-  "header": "awsui_header_1sxt8_zqi16_236",
-  "with-additional-action": "awsui_with-additional-action_1sxt8_zqi16_253",
-  "with-runtime-context": "awsui_with-runtime-context_1sxt8_zqi16_261",
-  "with-toolbar": "awsui_with-toolbar_1sxt8_zqi16_264",
-  "header-actions": "awsui_header-actions_1sxt8_zqi16_283",
-  "content-with-paddings": "awsui_content-with-paddings_1sxt8_zqi16_289",
-  "footer": "awsui_footer_1sxt8_zqi16_296",
-  "is-sticky": "awsui_is-sticky_1sxt8_zqi16_302",
-  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_zqi16_310"
+  "root": "awsui_root_1sxt8_1cneo_193",
+  "drawer": "awsui_drawer_1sxt8_1cneo_197",
+  "has-close-action": "awsui_has-close-action_1sxt8_1cneo_230",
+  "position-absolute": "awsui_position-absolute_1sxt8_1cneo_233",
+  "position-sticky": "awsui_position-sticky_1sxt8_1cneo_233",
+  "position-fixed": "awsui_position-fixed_1sxt8_1cneo_233",
+  "with-footer": "awsui_with-footer_1sxt8_1cneo_236",
+  "position-static": "awsui_position-static_1sxt8_1cneo_240",
+  "content": "awsui_content_1sxt8_1cneo_243",
+  "header": "awsui_header_1sxt8_1cneo_271",
+  "hide-close-action": "awsui_hide-close-action_1sxt8_1cneo_287",
+  "with-additional-action": "awsui_with-additional-action_1sxt8_1cneo_291",
+  "with-runtime-context": "awsui_with-runtime-context_1sxt8_1cneo_299",
+  "with-toolbar": "awsui_with-toolbar_1sxt8_1cneo_302",
+  "header-actions": "awsui_header-actions_1sxt8_1cneo_321",
+  "close-action": "awsui_close-action_1sxt8_1cneo_327",
+  "content-with-paddings": "awsui_content-with-paddings_1sxt8_1cneo_333",
+  "footer": "awsui_footer_1sxt8_1cneo_340",
+  "is-sticky": "awsui_is-sticky_1sxt8_1cneo_346",
+  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_1cneo_354",
+  "hidden": "awsui_hidden_1sxt8_1cneo_358",
+  "focus-trap": "awsui_focus-trap_1sxt8_1cneo_362",
+  "backdrop": "awsui_backdrop_1sxt8_1cneo_366",
+  "backdrop-fixed": "awsui_backdrop-fixed_1sxt8_1cneo_370",
+  "backdrop-absolute": "awsui_backdrop-absolute_1sxt8_1cneo_373"
 };