@cloudscape-design/components-themeable 3.0.1221 → 3.0.1223

package/lib/internal/template/modal/interfaces.d.ts

@@ -17,12 +17,36 @@ export interface BaseModalProps {
     removeModalRoot?: PortalProps['removeContainer'];
 }
 export interface ModalProps extends BaseComponentProps, BaseModalProps {
+    /**
+     * Specifies the width of the modal. When provided, takes precedence over the `size` property.
+     * If the specified width exceeds available viewport space, the modal will use the maximum available space.
+     * The minimum width is 320px (equivalent to the `small` size).
+     */
+    width?: number;
+    /**
+     * Specifies the height of the modal. When provided, the modal content becomes scrollable if it exceeds the specified height.
+     * If the specified height exceeds available viewport space, the modal will use the maximum available space.
+     * To make sure the content is accessible, the component will apply a minimum height of 60px for the content area,
+     * plus the header height and the footer height.
+     */
+    height?: number;
     /**
      * Sets the width of the modal. `max` uses variable width up to the
-     * largest size allowed by the design guidelines. Other sizes
-     * (`small`/`medium`/`large`) have fixed widths.
+     * largest size allowed by the design guidelines. Other sizes have fixed widths:
+     * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).
      */
     size?: ModalProps.Size;
+    /**
+     * Controls the vertical positioning of the modal.
+     *
+     * - `center` (default) - The modal is vertically centered in the viewport and re-centers
+     *   when content height changes. Use for dialogs with static, predictable content.
+     *
+     * - `top` - The modal anchors at fixed distance and grows downward
+     *   as content expands. Use when the content changes dynamically to prevent disruptive
+     *   vertical repositioning that can cause users to lose context.
+     */
+    position?: ModalProps.Position;
     /**
      * Determines whether the modal is displayed on the screen. Modals are hidden by default.
      * Set this property to `true` to show them.
@@ -72,7 +96,8 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
     analyticsMetadata?: ModalProps.AnalyticsMetadata;
 }
 export declare namespace ModalProps {
-    type Size = 'small' | 'medium' | 'large' | 'max';
+    type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';
+    type Position = 'center' | 'top';
     interface DismissDetail {
         reason: string;
     }

package/lib/internal/template/modal/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAE3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAE3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC;IAC/B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,CAAC;IACjF,KAAY,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IAExC,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;CACF"}

package/lib/internal/template/modal/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/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';\n\nimport { PortalProps } from '@cloudscape-design/component-toolkit/internal';\n\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseModalProps {\n  /**\n   * Use this property to specify a different dynamic modal root for the dialog.\n   * The function will be called when a user clicks on the trigger button.\n   */\n  getModalRoot?: PortalProps['getContainer'];\n\n  /**\n   * Use this property when `getModalRoot` is used to clean up the modal root\n   * element after a user closes the dialog. The function receives the return value\n   * of the most recent getModalRoot call as an argument.\n   */\n  removeModalRoot?: PortalProps['removeContainer'];\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n  /**\n   * Sets the width of the modal. `max` uses variable width up to the\n   * largest size allowed by the design guidelines. Other sizes\n   * (`small`/`medium`/`large`) have fixed widths.\n   */\n  size?: ModalProps.Size;\n  /**\n   * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n   * Set this property to `true` to show them.\n   */\n  visible: boolean;\n  /**\n   * Adds an `aria-label` to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n   */\n  header?: React.ReactNode;\n  /**\n   * Body of the modal.\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies a footer for the modal. If empty, the footer isn't displayed.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n  /**\n   * Called when a user closes the modal by using the close icon button,\n   * clicking outside of the modal, or pressing ESC.\n   * The event detail contains the `reason`, which can be any of the following:\n   * `['closeButton', 'overlay', 'keyboard']`.\n   */\n  onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n  /**\n   * Specifies the HTML element where the modal is rendered.\n   * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n   * render to an element under `document.body`.\n   */\n  modalRoot?: HTMLElement;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: ModalProps.AnalyticsMetadata;\n}\n\nexport namespace ModalProps {\n  export type Size = 'small' | 'medium' | 'large' | 'max';\n\n  export interface DismissDetail {\n    reason: string;\n  }\n\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/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';\n\nimport { PortalProps } from '@cloudscape-design/component-toolkit/internal';\n\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseModalProps {\n  /**\n   * Use this property to specify a different dynamic modal root for the dialog.\n   * The function will be called when a user clicks on the trigger button.\n   */\n  getModalRoot?: PortalProps['getContainer'];\n\n  /**\n   * Use this property when `getModalRoot` is used to clean up the modal root\n   * element after a user closes the dialog. The function receives the return value\n   * of the most recent getModalRoot call as an argument.\n   */\n  removeModalRoot?: PortalProps['removeContainer'];\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n  /**\n   * Specifies the width of the modal. When provided, takes precedence over the `size` property.\n   * If the specified width exceeds available viewport space, the modal will use the maximum available space.\n   * The minimum width is 320px (equivalent to the `small` size).\n   */\n  width?: number;\n\n  /**\n   * Specifies the height of the modal. When provided, the modal content becomes scrollable if it exceeds the specified height.\n   * If the specified height exceeds available viewport space, the modal will use the maximum available space.\n   * To make sure the content is accessible, the component will apply a minimum height of 60px for the content area,\n   * plus the header height and the footer height.\n   */\n  height?: number;\n\n  /**\n   * Sets the width of the modal. `max` uses variable width up to the\n   * largest size allowed by the design guidelines. Other sizes have fixed widths:\n   * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).\n   */\n  size?: ModalProps.Size;\n  /**\n   * Controls the vertical positioning of the modal.\n   *\n   * - `center` (default) - The modal is vertically centered in the viewport and re-centers\n   *   when content height changes. Use for dialogs with static, predictable content.\n   *\n   * - `top` - The modal anchors at fixed distance and grows downward\n   *   as content expands. Use when the content changes dynamically to prevent disruptive\n   *   vertical repositioning that can cause users to lose context.\n   */\n  position?: ModalProps.Position;\n  /**\n   * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n   * Set this property to `true` to show them.\n   */\n  visible: boolean;\n  /**\n   * Adds an `aria-label` to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n   */\n  header?: React.ReactNode;\n  /**\n   * Body of the modal.\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies a footer for the modal. If empty, the footer isn't displayed.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n  /**\n   * Called when a user closes the modal by using the close icon button,\n   * clicking outside of the modal, or pressing ESC.\n   * The event detail contains the `reason`, which can be any of the following:\n   * `['closeButton', 'overlay', 'keyboard']`.\n   */\n  onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n  /**\n   * Specifies the HTML element where the modal is rendered.\n   * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n   * render to an element under `document.body`.\n   */\n  modalRoot?: HTMLElement;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: ModalProps.AnalyticsMetadata;\n}\n\nexport namespace ModalProps {\n  export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';\n  export type Position = 'center' | 'top';\n\n  export interface DismissDetail {\n    reason: string;\n  }\n\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n  }\n}\n"]}

package/lib/internal/template/modal/internal.d.ts

@@ -13,6 +13,8 @@ type InternalModalProps = SomeRequired<ModalProps, 'size'> & InternalBaseCompone
     __injectAnalyticsComponentMetadata?: boolean;
     onButtonClick?: ButtonContextProps['onClick'];
     referrerId?: string;
+    width?: number;
+    height?: number;
 };
 export default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps): JSX.Element;
 export {};

package/lib/internal/template/modal/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,sBAAsB,EACtB,yBAAyB,EAC1B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,WAAW,EAA8C,MAAM,wCAAwC,CAAC;AAGjH,OAAO,EAAiB,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,kBAAkB,eAqB9D;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GACxD,0BAA0B,GAAG;IAC3B,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,iBAAiB,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;IACvE,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM9G"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,sBAAsB,EACtB,yBAAyB,EAC1B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,WAAW,EAA8C,MAAM,wCAAwC,CAAC;AAGjH,OAAO,EAAiB,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,kBAAkB,eAqB9D;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GACxD,0BAA0B,GAAG;IAC3B,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,iBAAiB,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;IACvE,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM9G"}

package/lib/internal/template/modal/internal.js

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
-import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalBox from '../box/internal';
@@ -24,6 +23,7 @@ import { useIntersectionObserver } from '../internal/hooks/use-intersection-obse
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { disableBodyScrolling, enableBodyScrolling } from './body-scroll';
+import { useModalDimensions } from './use-modal-dimensions';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 export function InternalModalAsFunnel(props) {
@@ -44,7 +44,7 @@ export default function InternalModal({ modalRoot, getModalRoot, removeModalRoot
 }
 // Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.
 // useContainerQuery needs its targeted element to exist on the first render in order to work properly.
-function PortaledModal({ size, visible, header, children, footer, disableContentPaddings, onButtonClick = () => { }, onDismiss, __internalRootRef, __injectAnalyticsComponentMetadata, __funnelProps, __funnelStepProps, __subStepRef, __subStepFunnelProps, referrerId, ...rest }) {
+function PortaledModal({ size, visible, header, children, footer, disableContentPaddings, position = 'center', onButtonClick = () => { }, onDismiss, width, height, __internalRootRef, __injectAnalyticsComponentMetadata, __funnelProps, __funnelStepProps, __subStepRef, __subStepFunnelProps, referrerId, ...rest }) {
     var _a;
     const instanceUniqueId = useUniqueId();
     const headerId = `${rest.id || instanceUniqueId}-header`;
@@ -88,7 +88,7 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
             PerformanceMetrics.modalPerformanceData({
                 timeToContentReadyInModal,
                 instanceIdentifier: instanceUniqueId,
-                componentIdentifier: ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.textContent) || '',
+                componentIdentifier: ((_a = headerTextRef.current) === null || _a === void 0 ? void 0 : _a.textContent) || '',
             });
             performanceMetricLogged.current = true;
         }
@@ -139,11 +139,13 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
     // We use an empty div element at the end of the content slot as a sentinel
     // to detect when the user has scrolled to the bottom.
     const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();
-    // Add extra scroll padding to account for the height of the sticky footer,
-    // to prevent it from covering focused elements.
-    const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);
-    const headerRef = useRef(null);
+    const headerTextRef = useRef(null);
     const { subStepRef } = useFunnelSubStep();
+    const { footerRef, headerRef, hasCustomHeight, hasCustomWidth, dialogCustomStyles, footerHeight } = useModalDimensions({
+        height,
+        width,
+        hasFooter: !!footer,
+    });
     return (React.createElement(FunnelNameSelectorContext.Provider, { value: `.${styles['header--text']}` },
         React.createElement(ResetContextsForModal, null,
             React.createElement(ModalContext.Provider, { value: {
@@ -152,20 +154,24 @@ function PortaledModal({ size, visible, header, children, footer, disableContent
                     emitTimeToContentReadyInModal,
                 } },
                 React.createElement("div", { ...baseProps, ...__funnelProps, ...__funnelStepProps, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_a = subStepRef.current) === null || _a === void 0 ? void 0 : _a.id) || referrerId },
-                    React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: styles['focus-lock'] },
-                        React.createElement("div", { className: clsx(styles.dialog, styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh), onKeyDown: escKeyHandler, ...metadataAttribute },
-                            React.createElement("div", { className: styles.container },
-                                React.createElement("div", { className: clsx(styles.header, analyticsSelectors.header) },
+                    React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: clsx(styles['focus-lock'], styles[`position-${position}`]) },
+                        React.createElement("div", { className: clsx(styles.dialog, !hasCustomWidth && styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh, hasCustomWidth && styles['custom-width'], hasCustomHeight && styles['custom-height']), style: dialogCustomStyles, onKeyDown: escKeyHandler, ...metadataAttribute },
+                            React.createElement("div", { className: clsx(styles.container, hasCustomHeight && styles['custom-height-container']) },
+                                React.createElement("div", { ref: headerRef, className: clsx(styles.header, analyticsSelectors.header) },
                                     React.createElement(InternalHeader, { variant: "h2", __disableActionsWrapping: true, actions: React.createElement("div", { ...getAnalyticsMetadataAttribute({
                                                 action: 'dismiss',
                                             }) },
                                             React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick })) },
-                                        React.createElement("span", { ref: headerRef, id: headerId, className: styles['header--text'] }, header))),
+                                        React.createElement("span", { ref: headerTextRef, id: headerId, className: styles['header--text'] }, header))),
                                 React.createElement(BuiltInErrorBoundary, { wrapper: content => React.createElement(InternalBox, { padding: { bottom: 'm', horizontal: 'l' } }, content) },
-                                    React.createElement("div", { ref: __subStepRef, ...__subStepFunnelProps, className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) },
+                                    React.createElement("div", { ref: __subStepRef, ...__subStepFunnelProps, className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }, hasCustomHeight && styles['custom-height-content']), ...(hasCustomHeight && {
+                                            tabIndex: 0,
+                                            role: 'region',
+                                            'aria-labelledby': headerId,
+                                        }) },
                                         children,
                                         React.createElement("div", { ref: stickySentinelRef })),
                                     footer && (React.createElement(ButtonContext.Provider, { value: { onClick: onButtonClick } },
-                                        React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer))))))))))));
+                                        React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck'], hasCustomHeight && styles['custom-height']) }, footer))))))))))));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/modal/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { PerformanceMetrics } from '../internal/analytics';\nimport {\n  FunnelNameSelectorContext,\n  FunnelStepContextValue,\n  FunnelSubStepContextValue,\n} from '../internal/analytics/context/analytics-context';\nimport { FunnelProps, useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n  GeneratedAnalyticsMetadataModalComponent,\n  GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport function InternalModalAsFunnel(props: InternalModalProps) {\n  const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const onButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  return (\n    <InternalModal\n      __funnelProps={funnelProps}\n      __funnelStepProps={funnelStepProps}\n      __subStepRef={subStepRef}\n      __subStepFunnelProps={funnelSubStepProps}\n      onButtonClick={onButtonClick}\n      {...props}\n    />\n  );\n}\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n  InternalBaseComponentProps & {\n    __funnelProps?: FunnelProps;\n    __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];\n    __subStepRef?: FunnelSubStepContextValue['subStepRef'];\n    __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];\n    __injectAnalyticsComponentMetadata?: boolean;\n    onButtonClick?: ButtonContextProps['onClick'];\n    referrerId?: string;\n  };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n  return (\n    <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n      <PortaledModal {...rest} />\n    </Portal>\n  );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  onButtonClick = () => {},\n  onDismiss,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  __funnelProps,\n  __funnelStepProps,\n  __subStepRef,\n  __subStepFunnelProps,\n  referrerId,\n  ...rest\n}: PortaledModalProps) {\n  const instanceUniqueId = useUniqueId();\n  const headerId = `${rest.id || instanceUniqueId}-header`;\n  const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n  const i18n = useInternalI18n('modal');\n  const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n  const refObject = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n    name: 'awsui.Modal',\n    label: `.${analyticsSelectors.header} h2`,\n  };\n  const metadataAttribute = __injectAnalyticsComponentMetadata\n    ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n    : {};\n  const loadStartTime = useRef<number>(0);\n  const loadCompleteTime = useRef<number>(0);\n  const componentLoadingCount = useRef<number>(0);\n  const performanceMetricLogged = useRef<boolean>(false);\n\n  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  const resetModalPerformanceData = () => {\n    loadStartTime.current = performance.now();\n    loadCompleteTime.current = 0;\n    performanceMetricLogged.current = false;\n  };\n\n  const emitTimeToContentReadyInModal = (loadCompleteTime: number) => {\n    if (\n      componentLoadingCount.current === 0 &&\n      loadStartTime.current &&\n      loadStartTime.current !== 0 &&\n      !performanceMetricLogged.current\n    ) {\n      const timeToContentReadyInModal = loadCompleteTime - loadStartTime.current;\n      PerformanceMetrics.modalPerformanceData({\n        timeToContentReadyInModal,\n        instanceIdentifier: instanceUniqueId,\n        componentIdentifier: headerRef.current?.textContent || '',\n      });\n      performanceMetricLogged.current = true;\n    }\n  };\n\n  const MODAL_READY_TIMEOUT = 100;\n  /**\n   * This useEffect is triggered when the visible attribute of modal changes.\n   * When modal becomes visible, modal performance metrics are reset marking the beginning loading process.\n   * To ensure that the modal component ready metric is always emitted, a setTimeout is implemented.\n   * This setTimeout automatically emits the component ready metric after a specified duration.\n   */\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n      resetModalPerformanceData();\n      setTimeout(() => {\n        emitTimeToContentReadyInModal(loadStartTime.current);\n      }, MODAL_READY_TIMEOUT);\n    } else {\n      enableBodyScrolling();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n  useEffect(() => {\n    if (visible && refObject.current) {\n      refObject.current.scrollTop = 0;\n    }\n  }, [visible]);\n\n  const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n  const onOverlayMouseDown = (event: React.MouseEvent) => {\n    lastMouseDownElementRef.current = event.target as HTMLElement;\n  };\n  const onOverlayClick = (event: React.MouseEvent) => {\n    const overlay = refObject.current;\n    const lastClicked = lastMouseDownElementRef.current;\n\n    if (event.target === overlay && lastClicked === overlay) {\n      dismiss('overlay');\n    }\n  };\n  const onCloseButtonClick = () => dismiss('closeButton');\n  const escKeyHandler = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      dismiss('keyboard');\n    }\n  };\n\n  // We use an empty div element at the end of the content slot as a sentinel\n  // to detect when the user has scrolled to the bottom.\n  const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n  // Add extra scroll padding to account for the height of the sticky footer,\n  // to prevent it from covering focused elements.\n  const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { subStepRef } = useFunnelSubStep();\n\n  return (\n    <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n      <ResetContextsForModal>\n        <ModalContext.Provider\n          value={{\n            isInModal: true,\n            componentLoadingCount,\n            emitTimeToContentReadyInModal,\n          }}\n        >\n          <div\n            {...baseProps}\n            {...__funnelProps}\n            {...__funnelStepProps}\n            className={clsx(\n              styles.root,\n              { [styles.hidden]: !visible },\n              baseProps.className,\n              isRefresh && styles.refresh\n            )}\n            role=\"dialog\"\n            aria-labelledby={headerId}\n            onMouseDown={onOverlayMouseDown}\n            onClick={onOverlayClick}\n            ref={mergedRef}\n            style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n            data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n          >\n            <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n              <div\n                className={clsx(\n                  styles.dialog,\n                  styles[size],\n                  styles[`breakpoint-${breakpoint}`],\n                  isRefresh && styles.refresh\n                )}\n                onKeyDown={escKeyHandler}\n                {...metadataAttribute}\n              >\n                <div className={styles.container}>\n                  <div className={clsx(styles.header, analyticsSelectors.header)}>\n                    <InternalHeader\n                      variant=\"h2\"\n                      __disableActionsWrapping={true}\n                      actions={\n                        <div\n                          {...getAnalyticsMetadataAttribute({\n                            action: 'dismiss',\n                          } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n                        >\n                          <InternalButton\n                            ariaLabel={closeAriaLabel}\n                            className={styles['dismiss-control']}\n                            variant=\"modal-dismiss\"\n                            iconName=\"close\"\n                            formAction=\"none\"\n                            onClick={onCloseButtonClick}\n                          />\n                        </div>\n                      }\n                    >\n                      <span ref={headerRef} id={headerId} className={styles['header--text']}>\n                        {header}\n                      </span>\n                    </InternalHeader>\n                  </div>\n                  <BuiltInErrorBoundary\n                    wrapper={content => <InternalBox padding={{ bottom: 'm', horizontal: 'l' }}>{content}</InternalBox>}\n                  >\n                    <div\n                      ref={__subStepRef}\n                      {...__subStepFunnelProps}\n                      className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}\n                    >\n                      {children}\n                      <div ref={stickySentinelRef} />\n                    </div>\n                    {footer && (\n                      <ButtonContext.Provider value={{ onClick: onButtonClick }}>\n                        <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>\n                          {footer}\n                        </div>\n                      </ButtonContext.Provider>\n                    )}\n                  </BuiltInErrorBoundary>\n                </div>\n              </div>\n            </FocusLock>\n          </div>\n        </ModalContext.Provider>\n      </ResetContextsForModal>\n    </FunnelNameSelectorContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { PerformanceMetrics } from '../internal/analytics';\nimport {\n  FunnelNameSelectorContext,\n  FunnelStepContextValue,\n  FunnelSubStepContextValue,\n} from '../internal/analytics/context/analytics-context';\nimport { FunnelProps, useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n  GeneratedAnalyticsMetadataModalComponent,\n  GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport { useModalDimensions } from './use-modal-dimensions';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport function InternalModalAsFunnel(props: InternalModalProps) {\n  const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const onButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  return (\n    <InternalModal\n      __funnelProps={funnelProps}\n      __funnelStepProps={funnelStepProps}\n      __subStepRef={subStepRef}\n      __subStepFunnelProps={funnelSubStepProps}\n      onButtonClick={onButtonClick}\n      {...props}\n    />\n  );\n}\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n  InternalBaseComponentProps & {\n    __funnelProps?: FunnelProps;\n    __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];\n    __subStepRef?: FunnelSubStepContextValue['subStepRef'];\n    __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];\n    __injectAnalyticsComponentMetadata?: boolean;\n    onButtonClick?: ButtonContextProps['onClick'];\n    referrerId?: string;\n    width?: number;\n    height?: number;\n  };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n  return (\n    <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n      <PortaledModal {...rest} />\n    </Portal>\n  );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  position = 'center',\n  onButtonClick = () => {},\n  onDismiss,\n  width,\n  height,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  __funnelProps,\n  __funnelStepProps,\n  __subStepRef,\n  __subStepFunnelProps,\n  referrerId,\n  ...rest\n}: PortaledModalProps) {\n  const instanceUniqueId = useUniqueId();\n  const headerId = `${rest.id || instanceUniqueId}-header`;\n  const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n  const i18n = useInternalI18n('modal');\n  const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n  const refObject = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n    name: 'awsui.Modal',\n    label: `.${analyticsSelectors.header} h2`,\n  };\n  const metadataAttribute = __injectAnalyticsComponentMetadata\n    ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n    : {};\n  const loadStartTime = useRef<number>(0);\n  const loadCompleteTime = useRef<number>(0);\n  const componentLoadingCount = useRef<number>(0);\n  const performanceMetricLogged = useRef<boolean>(false);\n\n  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  const resetModalPerformanceData = () => {\n    loadStartTime.current = performance.now();\n    loadCompleteTime.current = 0;\n    performanceMetricLogged.current = false;\n  };\n\n  const emitTimeToContentReadyInModal = (loadCompleteTime: number) => {\n    if (\n      componentLoadingCount.current === 0 &&\n      loadStartTime.current &&\n      loadStartTime.current !== 0 &&\n      !performanceMetricLogged.current\n    ) {\n      const timeToContentReadyInModal = loadCompleteTime - loadStartTime.current;\n      PerformanceMetrics.modalPerformanceData({\n        timeToContentReadyInModal,\n        instanceIdentifier: instanceUniqueId,\n        componentIdentifier: headerTextRef.current?.textContent || '',\n      });\n      performanceMetricLogged.current = true;\n    }\n  };\n\n  const MODAL_READY_TIMEOUT = 100;\n  /**\n   * This useEffect is triggered when the visible attribute of modal changes.\n   * When modal becomes visible, modal performance metrics are reset marking the beginning loading process.\n   * To ensure that the modal component ready metric is always emitted, a setTimeout is implemented.\n   * This setTimeout automatically emits the component ready metric after a specified duration.\n   */\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n      resetModalPerformanceData();\n      setTimeout(() => {\n        emitTimeToContentReadyInModal(loadStartTime.current);\n      }, MODAL_READY_TIMEOUT);\n    } else {\n      enableBodyScrolling();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n  useEffect(() => {\n    if (visible && refObject.current) {\n      refObject.current.scrollTop = 0;\n    }\n  }, [visible]);\n\n  const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n  const onOverlayMouseDown = (event: React.MouseEvent) => {\n    lastMouseDownElementRef.current = event.target as HTMLElement;\n  };\n  const onOverlayClick = (event: React.MouseEvent) => {\n    const overlay = refObject.current;\n    const lastClicked = lastMouseDownElementRef.current;\n\n    if (event.target === overlay && lastClicked === overlay) {\n      dismiss('overlay');\n    }\n  };\n  const onCloseButtonClick = () => dismiss('closeButton');\n  const escKeyHandler = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      dismiss('keyboard');\n    }\n  };\n\n  // We use an empty div element at the end of the content slot as a sentinel\n  // to detect when the user has scrolled to the bottom.\n  const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n  const headerTextRef = useRef<HTMLSpanElement>(null);\n  const { subStepRef } = useFunnelSubStep();\n\n  const { footerRef, headerRef, hasCustomHeight, hasCustomWidth, dialogCustomStyles, footerHeight } =\n    useModalDimensions({\n      height,\n      width,\n      hasFooter: !!footer,\n    });\n\n  return (\n    <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n      <ResetContextsForModal>\n        <ModalContext.Provider\n          value={{\n            isInModal: true,\n            componentLoadingCount,\n            emitTimeToContentReadyInModal,\n          }}\n        >\n          <div\n            {...baseProps}\n            {...__funnelProps}\n            {...__funnelStepProps}\n            className={clsx(\n              styles.root,\n              { [styles.hidden]: !visible },\n              baseProps.className,\n              isRefresh && styles.refresh\n            )}\n            role=\"dialog\"\n            aria-labelledby={headerId}\n            onMouseDown={onOverlayMouseDown}\n            onClick={onOverlayClick}\n            ref={mergedRef}\n            style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n            data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n          >\n            <FocusLock\n              disabled={!visible}\n              autoFocus={true}\n              restoreFocus={true}\n              className={clsx(styles['focus-lock'], styles[`position-${position}`])}\n            >\n              <div\n                className={clsx(\n                  styles.dialog,\n                  !hasCustomWidth && styles[size],\n                  styles[`breakpoint-${breakpoint}`],\n                  isRefresh && styles.refresh,\n                  hasCustomWidth && styles['custom-width'],\n                  hasCustomHeight && styles['custom-height']\n                )}\n                style={dialogCustomStyles}\n                onKeyDown={escKeyHandler}\n                {...metadataAttribute}\n              >\n                <div className={clsx(styles.container, hasCustomHeight && styles['custom-height-container'])}>\n                  <div ref={headerRef} className={clsx(styles.header, analyticsSelectors.header)}>\n                    <InternalHeader\n                      variant=\"h2\"\n                      __disableActionsWrapping={true}\n                      actions={\n                        <div\n                          {...getAnalyticsMetadataAttribute({\n                            action: 'dismiss',\n                          } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n                        >\n                          <InternalButton\n                            ariaLabel={closeAriaLabel}\n                            className={styles['dismiss-control']}\n                            variant=\"modal-dismiss\"\n                            iconName=\"close\"\n                            formAction=\"none\"\n                            onClick={onCloseButtonClick}\n                          />\n                        </div>\n                      }\n                    >\n                      <span ref={headerTextRef} id={headerId} className={styles['header--text']}>\n                        {header}\n                      </span>\n                    </InternalHeader>\n                  </div>\n                  <BuiltInErrorBoundary\n                    wrapper={content => <InternalBox padding={{ bottom: 'm', horizontal: 'l' }}>{content}</InternalBox>}\n                  >\n                    <div\n                      ref={__subStepRef}\n                      {...__subStepFunnelProps}\n                      className={clsx(\n                        styles.content,\n                        { [styles['no-paddings']]: disableContentPaddings },\n                        hasCustomHeight && styles['custom-height-content']\n                      )}\n                      {...(hasCustomHeight && {\n                        tabIndex: 0,\n                        role: 'region',\n                        'aria-labelledby': headerId,\n                      })}\n                    >\n                      {children}\n                      <div ref={stickySentinelRef} />\n                    </div>\n                    {footer && (\n                      <ButtonContext.Provider value={{ onClick: onButtonClick }}>\n                        <div\n                          ref={footerRef}\n                          className={clsx(\n                            styles.footer,\n                            footerStuck && styles['footer--stuck'],\n                            hasCustomHeight && styles['custom-height']\n                          )}\n                        >\n                          {footer}\n                        </div>\n                      </ButtonContext.Provider>\n                    )}\n                  </BuiltInErrorBoundary>\n                </div>\n              </div>\n            </FocusLock>\n          </div>\n        </ModalContext.Provider>\n      </ResetContextsForModal>\n    </FunnelNameSelectorContext.Provider>\n  );\n}\n"]}

package/lib/internal/template/modal/styles.css.js

@@ -1,28 +1,36 @@
 
     import './styles.scoped.css';
     export default {
-  "dialog": "awsui_dialog_1d2i7_766d8_169",
-  "modal-slide-up": "awsui_modal-slide-up_1d2i7_766d8_1",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_766d8_1",
-  "refresh": "awsui_refresh_1d2i7_766d8_192",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_766d8_1",
-  "root": "awsui_root_1d2i7_766d8_225",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_766d8_1",
-  "hidden": "awsui_hidden_1d2i7_766d8_302",
-  "focus-lock": "awsui_focus-lock_1d2i7_766d8_306",
-  "small": "awsui_small_1d2i7_766d8_326",
-  "medium": "awsui_medium_1d2i7_766d8_329",
-  "large": "awsui_large_1d2i7_766d8_332",
-  "max": "awsui_max_1d2i7_766d8_335",
-  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_766d8_335",
-  "container": "awsui_container_1d2i7_766d8_341",
-  "content": "awsui_content_1d2i7_766d8_382",
-  "no-paddings": "awsui_no-paddings_1d2i7_766d8_387",
-  "header": "awsui_header_1d2i7_766d8_392",
-  "header--text": "awsui_header--text_1d2i7_766d8_404",
-  "footer": "awsui_footer_1d2i7_766d8_408",
-  "footer--stuck": "awsui_footer--stuck_1d2i7_766d8_417",
-  "dismiss-control": "awsui_dismiss-control_1d2i7_766d8_429",
-  "modal-open": "awsui_modal-open_1d2i7_766d8_433"
+  "dialog": "awsui_dialog_1d2i7_jna9e_169",
+  "modal-slide-up": "awsui_modal-slide-up_1d2i7_jna9e_1",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_jna9e_1",
+  "refresh": "awsui_refresh_1d2i7_jna9e_192",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_jna9e_1",
+  "root": "awsui_root_1d2i7_jna9e_225",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_jna9e_1",
+  "hidden": "awsui_hidden_1d2i7_jna9e_302",
+  "focus-lock": "awsui_focus-lock_1d2i7_jna9e_306",
+  "position-top": "awsui_position-top_1d2i7_jna9e_314",
+  "position-center": "awsui_position-center_1d2i7_jna9e_317",
+  "small": "awsui_small_1d2i7_jna9e_331",
+  "medium": "awsui_medium_1d2i7_jna9e_334",
+  "large": "awsui_large_1d2i7_jna9e_337",
+  "x-large": "awsui_x-large_1d2i7_jna9e_340",
+  "xx-large": "awsui_xx-large_1d2i7_jna9e_343",
+  "custom-width": "awsui_custom-width_1d2i7_jna9e_346",
+  "max": "awsui_max_1d2i7_jna9e_349",
+  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_jna9e_349",
+  "custom-height": "awsui_custom-height_1d2i7_jna9e_354",
+  "container": "awsui_container_1d2i7_jna9e_359",
+  "custom-height-container": "awsui_custom-height-container_1d2i7_jna9e_399",
+  "content": "awsui_content_1d2i7_jna9e_405",
+  "no-paddings": "awsui_no-paddings_1d2i7_jna9e_410",
+  "custom-height-content": "awsui_custom-height-content_1d2i7_jna9e_414",
+  "header": "awsui_header_1d2i7_jna9e_419",
+  "header--text": "awsui_header--text_1d2i7_jna9e_431",
+  "footer": "awsui_footer_1d2i7_jna9e_435",
+  "footer--stuck": "awsui_footer--stuck_1d2i7_jna9e_448",
+  "dismiss-control": "awsui_dismiss-control_1d2i7_jna9e_460",
+  "modal-open": "awsui_modal-open_1d2i7_jna9e_464"
 };
   

package/lib/internal/template/modal/styles.scoped.css

@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@keyframes awsui_modal-slide-up_1d2i7_766d8_1 {
+@keyframes awsui_modal-slide-up_1d2i7_jna9e_1 {
   0% {
     transform: translate(0, 10px);
   }
@@ -166,12 +166,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     transform: translate(0, 0);
   }
 }
-.awsui_dialog_1d2i7_766d8_169:not(#\9) {
-  animation: awsui_modal-slide-up_1d2i7_766d8_1 var(--motion-duration-slow-cxexcj, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_766d8_1 var(--motion-duration-slow-cxexcj, 180ms) ease-out;
+.awsui_dialog_1d2i7_jna9e_169:not(#\9) {
+  animation: awsui_modal-slide-up_1d2i7_jna9e_1 var(--motion-duration-slow-cxexcj, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_jna9e_1 var(--motion-duration-slow-cxexcj, 180ms) ease-out;
   animation-delay: var(--motion-duration-fast-okdxjh, 90ms);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1d2i7_766d8_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_jna9e_1 {
   from {
     opacity: 0;
   }
@@ -180,22 +180,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dialog_1d2i7_766d8_169:not(#\9) {
+  .awsui_dialog_1d2i7_jna9e_169:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dialog_1d2i7_766d8_169:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_766d8_169:not(#\9) {
+.awsui-motion-disabled .awsui_dialog_1d2i7_jna9e_169:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_jna9e_169:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_dialog_1d2i7_766d8_169.awsui_refresh_1d2i7_766d8_192:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_1d2i7_766d8_1, awsui_awsui-motion-fade-in-0_1d2i7_766d8_1;
+.awsui_dialog_1d2i7_jna9e_169.awsui_refresh_1d2i7_jna9e_192:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_1d2i7_jna9e_1, awsui_awsui-motion-fade-in-0_1d2i7_jna9e_1;
   animation-duration: var(--motion-duration-refresh-only-fast-v9rk6z, 0ms);
   animation-timing-function: var(--motion-easing-refresh-only-a-8gio5w, cubic-bezier(0, 0, 0, 1));
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1d2i7_766d8_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_jna9e_1 {
   from {
     opacity: 0;
   }
@@ -203,7 +203,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-scale-popup_1d2i7_766d8_1 {
+@keyframes awsui_awsui-motion-scale-popup_1d2i7_jna9e_1 {
   0% {
     transform: scale(0.95);
   }
@@ -212,21 +212,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dialog_1d2i7_766d8_169.awsui_refresh_1d2i7_766d8_192:not(#\9) {
+  .awsui_dialog_1d2i7_jna9e_169.awsui_refresh_1d2i7_jna9e_192:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dialog_1d2i7_766d8_169.awsui_refresh_1d2i7_766d8_192:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_766d8_169.awsui_refresh_1d2i7_766d8_192:not(#\9) {
+.awsui-motion-disabled .awsui_dialog_1d2i7_jna9e_169.awsui_refresh_1d2i7_jna9e_192:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_jna9e_169.awsui_refresh_1d2i7_jna9e_192:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1d2i7_766d8_225:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_1d2i7_766d8_1 var(--motion-duration-extra-slow-j8l6m4, 270ms) ease-out;
+.awsui_root_1d2i7_jna9e_225:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_1d2i7_jna9e_1 var(--motion-duration-extra-slow-j8l6m4, 270ms) ease-out;
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in_1d2i7_766d8_1 {
+@keyframes awsui_awsui-motion-fade-in_1d2i7_jna9e_1 {
   from {
     opacity: 0.2;
   }
@@ -235,30 +235,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1d2i7_766d8_225:not(#\9) {
+  .awsui_root_1d2i7_jna9e_225:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1d2i7_766d8_225:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_766d8_225:not(#\9) {
+.awsui-motion-disabled .awsui_root_1d2i7_jna9e_225:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_jna9e_225:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1d2i7_766d8_225.awsui_refresh_1d2i7_766d8_192:not(#\9) {
+.awsui_root_1d2i7_jna9e_225.awsui_refresh_1d2i7_jna9e_192:not(#\9) {
   animation-duration: var(--motion-duration-refresh-only-fast-v9rk6z, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1d2i7_766d8_225.awsui_refresh_1d2i7_766d8_192:not(#\9) {
+  .awsui_root_1d2i7_jna9e_225.awsui_refresh_1d2i7_jna9e_192:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1d2i7_766d8_225.awsui_refresh_1d2i7_766d8_192:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_766d8_225.awsui_refresh_1d2i7_766d8_192:not(#\9) {
+.awsui-motion-disabled .awsui_root_1d2i7_jna9e_225.awsui_refresh_1d2i7_jna9e_192:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_jna9e_225.awsui_refresh_1d2i7_jna9e_192:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1d2i7_766d8_225:not(#\9) {
+.awsui_root_1d2i7_jna9e_225:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -299,21 +299,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: auto;
   cursor: pointer;
 }
-.awsui_root_1d2i7_766d8_225.awsui_hidden_1d2i7_766d8_302:not(#\9) {
+.awsui_root_1d2i7_jna9e_225.awsui_hidden_1d2i7_jna9e_302:not(#\9) {
   display: none;
 }
 
-.awsui_focus-lock_1d2i7_766d8_306:not(#\9) {
+.awsui_focus-lock_1d2i7_jna9e_306:not(#\9) {
   align-self: flex-start;
-  margin-block: auto;
   margin-inline: auto;
   padding-block: var(--space-s-4a5hs8, 12px);
   padding-inline: 0;
   z-index: 5000;
   pointer-events: none;
 }
+.awsui_focus-lock_1d2i7_jna9e_306.awsui_position-top_1d2i7_jna9e_314:not(#\9) {
+  margin-block-start: 0;
+}
+.awsui_focus-lock_1d2i7_jna9e_306.awsui_position-center_1d2i7_jna9e_317:not(#\9) {
+  margin-block: auto;
+}
 
-.awsui_dialog_1d2i7_766d8_169:not(#\9) {
+.awsui_dialog_1d2i7_jna9e_169:not(#\9) {
   position: static;
   inset-block-start: 0;
   transform: translate(0, 0);
@@ -323,22 +328,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 5000;
   pointer-events: all;
 }
-.awsui_dialog_1d2i7_766d8_169.awsui_small_1d2i7_766d8_326:not(#\9) {
+.awsui_dialog_1d2i7_jna9e_169.awsui_small_1d2i7_jna9e_331:not(#\9) {
   max-inline-size: 320px;
 }
-.awsui_dialog_1d2i7_766d8_169.awsui_medium_1d2i7_766d8_329:not(#\9) {
+.awsui_dialog_1d2i7_jna9e_169.awsui_medium_1d2i7_jna9e_334:not(#\9) {
   max-inline-size: 600px;
 }
-.awsui_dialog_1d2i7_766d8_169.awsui_large_1d2i7_766d8_332:not(#\9) {
+.awsui_dialog_1d2i7_jna9e_169.awsui_large_1d2i7_jna9e_337:not(#\9) {
   max-inline-size: 820px;
 }
-.awsui_dialog_1d2i7_766d8_169.awsui_max_1d2i7_766d8_335.awsui_breakpoint-xs_1d2i7_766d8_335:not(#\9) {
+.awsui_dialog_1d2i7_jna9e_169.awsui_x-large_1d2i7_jna9e_340:not(#\9) {
+  max-inline-size: 1024px;
+}
+.awsui_dialog_1d2i7_jna9e_169.awsui_xx-large_1d2i7_jna9e_343:not(#\9) {
+  max-inline-size: 1280px;
+}
+.awsui_dialog_1d2i7_jna9e_169.awsui_custom-width_1d2i7_jna9e_346:not(#\9) {
+  max-inline-size: var(--awsui-modal-custom-width-n6lfw8);
+}
+.awsui_dialog_1d2i7_jna9e_169.awsui_max_1d2i7_jna9e_349.awsui_breakpoint-xs_1d2i7_jna9e_349:not(#\9) {
   max-inline-size: calc(100vw - (8 * 10px + var(--space-xxxl-qhelse, 40px)));
   margin-block: auto;
   margin-inline: auto;
 }
+.awsui_dialog_1d2i7_jna9e_169.awsui_custom-height_1d2i7_jna9e_354:not(#\9) {
+  block-size: var(--awsui-modal-custom-height-n6lfw8);
+  max-block-size: calc(100vh - 2 * var(--space-s-4a5hs8, 12px));
+}
 
-.awsui_container_1d2i7_766d8_341:not(#\9) {
+.awsui_container_1d2i7_jna9e_359:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -378,18 +396,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-l30zxy, 0px);
   box-shadow: var(--shadow-modal-pjndl9, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
+.awsui_container_1d2i7_jna9e_359.awsui_custom-height-container_1d2i7_jna9e_399:not(#\9) {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+}
 
-.awsui_content_1d2i7_766d8_382:not(#\9) {
+.awsui_content_1d2i7_jna9e_405:not(#\9) {
   padding-block-start: var(--space-container-content-top-8fvzh2, 16px);
   padding-block-end: var(--space-modal-content-bottom-pxcvcj, 20px);
   padding-inline: var(--space-modal-horizontal-tieytu, 20px);
 }
-.awsui_content_1d2i7_766d8_382.awsui_no-paddings_1d2i7_766d8_387:not(#\9) {
+.awsui_content_1d2i7_jna9e_405.awsui_no-paddings_1d2i7_jna9e_410:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
 }
+.awsui_content_1d2i7_jna9e_405.awsui_custom-height-content_1d2i7_jna9e_414:not(#\9) {
+  flex-grow: 1;
+  overflow-y: auto;
+}
 
-.awsui_header_1d2i7_766d8_392:not(#\9) {
+.awsui_header_1d2i7_jna9e_419:not(#\9) {
   padding-block-start: var(--space-container-header-top-3cfni8, 12px);
   padding-block-end: var(--space-container-header-bottom-rbnprk, 12px);
   padding-inline: var(--space-modal-horizontal-tieytu, 20px);
@@ -401,11 +428,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: 0;
 }
 
-.awsui_header--text_1d2i7_766d8_404:not(#\9) {
+.awsui_header--text_1d2i7_jna9e_431:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_footer_1d2i7_766d8_408:not(#\9) {
+.awsui_footer_1d2i7_jna9e_435:not(#\9) {
   border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
   padding-block: var(--space-scaled-s-gjhvjd, 12px);
   padding-inline: var(--space-container-horizontal-ipmk0e, 20px);
@@ -414,23 +441,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-end: 0;
   z-index: 800;
 }
-.awsui_footer--stuck_1d2i7_766d8_417:not(#\9) {
+.awsui_footer_1d2i7_jna9e_435.awsui_custom-height_1d2i7_jna9e_354:not(#\9) {
+  border-end-start-radius: var(--border-radius-container-l30zxy, 0px);
+  border-end-end-radius: var(--border-radius-container-l30zxy, 0px);
+}
+.awsui_footer--stuck_1d2i7_jna9e_448:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   border-end-start-radius: var(--border-radius-container-l30zxy, 0px);
   border-end-end-radius: var(--border-radius-container-l30zxy, 0px);
 }
-.awsui_footer_1d2i7_766d8_408:not(#\9):after {
+.awsui_footer_1d2i7_jna9e_435:not(#\9):after {
   content: "";
   display: table;
   clear: both;
 }
 
-.awsui_dismiss-control_1d2i7_766d8_429:not(#\9) {
+.awsui_dismiss-control_1d2i7_jna9e_460:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_modal-open_1d2i7_766d8_433:not(#\9) {
+.awsui_modal-open_1d2i7_jna9e_464:not(#\9) {
   overflow: hidden;
   /*
    * When padding-right is added to account for scrollbar being turned