@cloudscape-design/components 3.0.237 → 3.0.238

package/icon/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface IconProps extends BaseComponentProps {\n  /**\n   * Specifies the icon to be displayed.\n   */\n  name?: IconProps.Name;\n  /**\n   * Specifies the size of the icon.\n   *\n   * If you set size to `inherit`, an icon size will be assigned based on the icon's inherited line height.\n   * For icons used alongside text, ensure the icon is placed inside the acompanying text tag.\n   * The icon will be vertically centered based on the height.\n   *\n   * @visualrefresh `medium` size\n   */\n  size?: IconProps.Size;\n\n  /**\n   * Specifies the color variant of the icon. The `normal` variant picks up the current color of its context.\n   */\n  variant?: IconProps.Variant;\n\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.\n   * For SVG icons, use the `svg` slot instead.\n   *\n   * If you set both `url` and `svg`, `svg` will take precedence.\n   */\n  url?: string;\n  /**\n   * Specifies alternate text for a custom icon (using the `url` attribute). We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.\n   */\n  alt?: string;\n\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span` and ensure icon `size` is not set to `inherit`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `url` and `svg`, `svg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  svg?: React.ReactNode;\n}\n\nexport namespace IconProps {\n  // Why not enums? Explained there\n  // https://stackoverflow.com/questions/52393730/typescript-string-literal-union-type-from-enum\n  export type Name =\n    | 'add-plus'\n    | 'angle-left-double'\n    | 'angle-left'\n    | 'angle-right-double'\n    | 'angle-right'\n    | 'angle-up'\n    | 'angle-down'\n    | 'arrow-left'\n    | 'audio-full'\n    | 'audio-half'\n    | 'audio-off'\n    | 'bug'\n    | 'call'\n    | 'calendar'\n    | 'caret-down-filled'\n    | 'caret-down'\n    | 'caret-left-filled'\n    | 'caret-right-filled'\n    | 'caret-up-filled'\n    | 'caret-up'\n    | 'check'\n    | 'contact'\n    | 'close'\n    | 'copy'\n    | 'delete-marker'\n    | 'download'\n    | 'edit'\n    | 'ellipsis'\n    | 'envelope'\n    | 'expand'\n    | 'external'\n    | 'file-open'\n    | 'file'\n    | 'filter'\n    | 'flag'\n    | 'folder-open'\n    | 'folder'\n    | 'group-active'\n    | 'group'\n    | 'heart'\n    | 'insert-row'\n    | 'key'\n    | 'keyboard'\n    | 'lock-private'\n    | 'menu'\n    | 'microphone'\n    | 'microphone-off'\n    | 'multiscreen'\n    | 'notification'\n    | 'redo'\n    | 'refresh'\n    | 'remove'\n    | 'script'\n    | 'search'\n    | 'security'\n    | 'settings'\n    | 'share'\n    | 'shrink'\n    | 'status-in-progress'\n    | 'status-info'\n    | 'status-negative'\n    | 'status-pending'\n    | 'status-positive'\n    | 'status-stopped'\n    | 'status-warning'\n    | 'suggestions'\n    | 'thumbs-down-filled'\n    | 'thumbs-down'\n    | 'thumbs-up-filled'\n    | 'thumbs-up'\n    | 'ticket'\n    | 'treeview-collapse'\n    | 'treeview-expand'\n    | 'undo'\n    | 'unlocked'\n    | 'upload-download'\n    | 'upload'\n    | 'user-profile-active'\n    | 'user-profile'\n    | 'video-off'\n    | 'video-on'\n    | 'video-unavailable'\n    | 'view-full'\n    | 'view-horizontal'\n    | 'view-vertical'\n    | 'zoom-in'\n    | 'zoom-out'\n    | 'zoom-to-fit';\n\n  export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';\n\n  export type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/icon/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface IconProps extends BaseComponentProps {\n  /**\n   * Specifies the icon to be displayed.\n   */\n  name?: IconProps.Name;\n  /**\n   * Specifies the size of the icon.\n   *\n   * If you set size to `inherit`, an icon size will be assigned based on the icon's inherited line height.\n   * For icons used alongside text, ensure the icon is placed inside the acompanying text tag.\n   * The icon will be vertically centered based on the height.\n   *\n   * @visualrefresh `medium` size\n   */\n  size?: IconProps.Size;\n\n  /**\n   * Specifies the color variant of the icon. The `normal` variant picks up the current color of its context.\n   */\n  variant?: IconProps.Variant;\n\n  /**\n   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.\n   * For SVG icons, use the `svg` slot instead.\n   *\n   * If you set both `url` and `svg`, `svg` will take precedence.\n   */\n  url?: string;\n  /**\n   * Specifies alternate text for a custom icon (using the `url` attribute). We recommend that you provide this for accessibility.\n   * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.\n   */\n  alt?: string;\n\n  /**\n   * Specifies the SVG of a custom icon.\n   *\n   * Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.\n   * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n   * - has attribute `focusable=\"false\"`.\n   * - has `viewBox=\"0 0 16 16\"`.\n   *\n   * If you set the `svg` element as the root node of the slot, the component will automatically\n   * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n   * - set the stroke width based on the size of the icon.\n   * - set the width and height of the SVG element based on the size of the icon.\n   *\n   * If you don't want these styles to be automatically set, wrap the `svg` element into a `span` and ensure icon `size` is not set to `inherit`.\n   * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n   *\n   * If you set both `url` and `svg`, `svg` will take precedence.\n   *\n   * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n   * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n   */\n  svg?: React.ReactNode;\n}\n\nexport namespace IconProps {\n  // Why not enums? Explained there\n  // https://stackoverflow.com/questions/52393730/typescript-string-literal-union-type-from-enum\n  export type Name =\n    | 'add-plus'\n    | 'angle-left-double'\n    | 'angle-left'\n    | 'angle-right-double'\n    | 'angle-right'\n    | 'angle-up'\n    | 'angle-down'\n    | 'arrow-left'\n    | 'audio-full'\n    | 'audio-half'\n    | 'audio-off'\n    | 'bug'\n    | 'call'\n    | 'calendar'\n    | 'caret-down-filled'\n    | 'caret-down'\n    | 'caret-left-filled'\n    | 'caret-right-filled'\n    | 'caret-up-filled'\n    | 'caret-up'\n    | 'check'\n    | 'contact'\n    | 'close'\n    | 'copy'\n    | 'delete-marker'\n    | 'download'\n    | 'drag-indicator'\n    | 'edit'\n    | 'ellipsis'\n    | 'envelope'\n    | 'expand'\n    | 'external'\n    | 'file-open'\n    | 'file'\n    | 'filter'\n    | 'flag'\n    | 'folder-open'\n    | 'folder'\n    | 'group-active'\n    | 'group'\n    | 'heart'\n    | 'insert-row'\n    | 'key'\n    | 'keyboard'\n    | 'lock-private'\n    | 'menu'\n    | 'microphone'\n    | 'microphone-off'\n    | 'multiscreen'\n    | 'notification'\n    | 'redo'\n    | 'refresh'\n    | 'remove'\n    | 'resize-area'\n    | 'script'\n    | 'search'\n    | 'security'\n    | 'settings'\n    | 'share'\n    | 'shrink'\n    | 'status-in-progress'\n    | 'status-info'\n    | 'status-negative'\n    | 'status-pending'\n    | 'status-positive'\n    | 'status-stopped'\n    | 'status-warning'\n    | 'suggestions'\n    | 'thumbs-down-filled'\n    | 'thumbs-down'\n    | 'thumbs-up-filled'\n    | 'thumbs-up'\n    | 'ticket'\n    | 'treeview-collapse'\n    | 'treeview-expand'\n    | 'undo'\n    | 'unlocked'\n    | 'upload-download'\n    | 'upload'\n    | 'user-profile-active'\n    | 'user-profile'\n    | 'video-off'\n    | 'video-on'\n    | 'video-unavailable'\n    | 'view-full'\n    | 'view-horizontal'\n    | 'view-vertical'\n    | 'zoom-in'\n    | 'zoom-out'\n    | 'zoom-to-fit';\n\n  export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';\n\n  export type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (543b649)';
+    export var PACKAGE_VERSION = '3.0.0 (fae213c)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/hooks/use-intersection-observer/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A hook that uses an Intersection Observer on the target element ref
+ * and detects if the element is intersecting with its parent.
+ */
+export declare function useIntersectionObserver<T extends HTMLElement>(): {
+    ref: (instance: T | null) => void;
+    isIntersecting: boolean;
+};
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/use-intersection-observer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-intersection-observer/index.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,WAAW;;;EAuB5D"}

package/internal/hooks/use-intersection-observer/index.js

@@ -0,0 +1,28 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useRef, useState } from 'react';
+/**
+ * A hook that uses an Intersection Observer on the target element ref
+ * and detects if the element is intersecting with its parent.
+ */
+export function useIntersectionObserver() {
+    const observerRef = useRef(null);
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    const ref = useCallback(targetElement => {
+        if (typeof IntersectionObserver === 'undefined') {
+            // Do nothing in environments like JSDOM
+            return;
+        }
+        if (observerRef.current) {
+            // Dismiss previous observer because the target changed
+            observerRef.current.disconnect();
+        }
+        // Create a new observer with the target element
+        if (targetElement) {
+            observerRef.current = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting));
+            observerRef.current.observe(targetElement);
+        }
+    }, []);
+    return { ref, isIntersecting };
+}
+//# sourceMappingURL=index.js.map

package/internal/hooks/use-intersection-observer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-intersection-observer/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAe,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnE;;;GAGG;AACH,MAAM,UAAU,uBAAuB;IACrC,MAAM,WAAW,GAAG,MAAM,CAA8B,IAAI,CAAC,CAAC;IAC9D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,GAAG,GAAG,WAAW,CAAiB,aAAa,CAAC,EAAE;QACtD,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE;YAC/C,wCAAwC;YACxC,OAAO;SACR;QAED,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,uDAAuD;YACvD,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;SAClC;QAED,gDAAgD;QAChD,IAAI,aAAa,EAAE;YACjB,WAAW,CAAC,OAAO,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;YACrG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;SAC5C;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,CAAC;AACjC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefCallback, useCallback, useRef, useState } from 'react';\n\n/**\n * A hook that uses an Intersection Observer on the target element ref\n * and detects if the element is intersecting with its parent.\n */\nexport function useIntersectionObserver<T extends HTMLElement>() {\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const [isIntersecting, setIsIntersecting] = useState(false);\n\n  const ref = useCallback<RefCallback<T>>(targetElement => {\n    if (typeof IntersectionObserver === 'undefined') {\n      // Do nothing in environments like JSDOM\n      return;\n    }\n\n    if (observerRef.current) {\n      // Dismiss previous observer because the target changed\n      observerRef.current.disconnect();\n    }\n\n    // Create a new observer with the target element\n    if (targetElement) {\n      observerRef.current = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting));\n      observerRef.current.observe(targetElement);\n    }\n  }, []);\n\n  return { ref, isIntersecting };\n}\n"]}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "543b6496673e316c85444104e9108da9ad7b8c5b"
+  "commit": "fae213c62ab1c7147ecb6d01b2a41ff4b1d7dc24"
 }

package/modal/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAYlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,CAAC,GAAG,0BAA0B,CAAC;AAE3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,SAAS,EACT,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eAmHpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAYlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,CAAC,GAAG,0BAA0B,CAAC;AAE3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,SAAS,EACT,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eAwHpB"}

package/modal/internal.js

@@ -18,6 +18,7 @@ import { disableBodyScrolling, enableBodyScrolling } from './body-scroll';
 import styles from './styles.css.js';
 import FocusLock from '../internal/components/focus-lock';
 import { useInternalI18n } from '../internal/i18n/context';
+import { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';
 export default function InternalModal(_a) {
     var { size, visible, header, children, footer, disableContentPaddings, onDismiss, modalRoot, __internalRootRef = null } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onDismiss", "modalRoot", "__internalRootRef"]);
     const instanceUniqueId = useUniqueId();
@@ -68,6 +69,9 @@ export default function InternalModal(_a) {
             dismiss('keyboard');
         }
     };
+    // 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();
     return (React.createElement(Portal, { container: modalRoot },
         React.createElement(FormFieldContext.Provider, { value: {} },
             React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef }),
@@ -77,7 +81,9 @@ export default function InternalModal(_a) {
                             React.createElement("div", { className: styles.header },
                                 React.createElement(InternalHeader, { variant: "h2", __disableActionsWrapping: true, actions: React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick }) },
                                     React.createElement("span", { id: headerId, className: styles['header--text'] }, header))),
-                            React.createElement("div", { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) }, children),
-                            footer && React.createElement("div", { className: styles.footer }, footer))))))));
+                            React.createElement("div", { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) },
+                                children,
+                                React.createElement("div", { ref: stickySentinelRef })),
+                            footer && React.createElement("div", { className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer))))))));
 }
 //# sourceMappingURL=internal.js.map

package/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 { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport Portal from '../internal/components/portal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FormFieldContext } from '../internal/context/form-field-context';\n\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useInternalI18n } from '../internal/i18n/context';\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size' | 'closeAriaLabel'> & InternalBaseComponentProps;\n\nexport default function InternalModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  onDismiss,\n  modalRoot,\n  __internalRootRef = null,\n  ...rest\n}: InternalModalProps) {\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  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  // enable / disable body scroll\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n    } else {\n      enableBodyScrolling();\n    }\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  return (\n    <Portal container={modalRoot}>\n      <FormFieldContext.Provider value={{}}>\n        <div\n          {...baseProps}\n          className={clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh)}\n          role=\"dialog\"\n          aria-modal={true}\n          aria-labelledby={headerId}\n          onMouseDown={onOverlayMouseDown}\n          onClick={onOverlayClick}\n          ref={mergedRef}\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              tabIndex={-1}\n            >\n              <div className={styles.container}>\n                <div className={styles.header}>\n                  <InternalHeader\n                    variant=\"h2\"\n                    __disableActionsWrapping={true}\n                    actions={\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                    }\n                  >\n                    <span id={headerId} className={styles['header--text']}>\n                      {header}\n                    </span>\n                  </InternalHeader>\n                </div>\n                <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>\n                  {children}\n                </div>\n                {footer && <div className={styles.footer}>{footer}</div>}\n              </div>\n            </div>\n          </FocusLock>\n        </div>\n      </FormFieldContext.Provider>\n    </Portal>\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 { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport Portal from '../internal/components/portal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FormFieldContext } from '../internal/context/form-field-context';\n\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size' | 'closeAriaLabel'> & InternalBaseComponentProps;\n\nexport default function InternalModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  onDismiss,\n  modalRoot,\n  __internalRootRef = null,\n  ...rest\n}: InternalModalProps) {\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  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  // enable / disable body scroll\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n    } else {\n      enableBodyScrolling();\n    }\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  return (\n    <Portal container={modalRoot}>\n      <FormFieldContext.Provider value={{}}>\n        <div\n          {...baseProps}\n          className={clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh)}\n          role=\"dialog\"\n          aria-modal={true}\n          aria-labelledby={headerId}\n          onMouseDown={onOverlayMouseDown}\n          onClick={onOverlayClick}\n          ref={mergedRef}\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              tabIndex={-1}\n            >\n              <div className={styles.container}>\n                <div className={styles.header}>\n                  <InternalHeader\n                    variant=\"h2\"\n                    __disableActionsWrapping={true}\n                    actions={\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                    }\n                  >\n                    <span id={headerId} className={styles['header--text']}>\n                      {header}\n                    </span>\n                  </InternalHeader>\n                </div>\n                <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>\n                  {children}\n                  <div ref={stickySentinelRef} />\n                </div>\n                {footer && <div className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>{footer}</div>}\n              </div>\n            </div>\n          </FocusLock>\n        </div>\n      </FormFieldContext.Provider>\n    </Portal>\n  );\n}\n"]}

package/modal/styles.css.js

@@ -1,27 +1,28 @@
 
     import './styles.scoped.css';
     export default {
-  "dialog": "awsui_dialog_1d2i7_eh1gb_105",
-  "modal-slide-up": "awsui_modal-slide-up_1d2i7_eh1gb_1",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_eh1gb_1",
-  "refresh": "awsui_refresh_1d2i7_eh1gb_128",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_eh1gb_1",
-  "root": "awsui_root_1d2i7_eh1gb_161",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_eh1gb_1",
-  "hidden": "awsui_hidden_1d2i7_eh1gb_226",
-  "focus-lock": "awsui_focus-lock_1d2i7_eh1gb_230",
-  "small": "awsui_small_1d2i7_eh1gb_248",
-  "medium": "awsui_medium_1d2i7_eh1gb_251",
-  "large": "awsui_large_1d2i7_eh1gb_254",
-  "max": "awsui_max_1d2i7_eh1gb_257",
-  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_eh1gb_257",
-  "container": "awsui_container_1d2i7_eh1gb_262",
-  "content": "awsui_content_1d2i7_eh1gb_281",
-  "no-paddings": "awsui_no-paddings_1d2i7_eh1gb_284",
-  "header": "awsui_header_1d2i7_eh1gb_288",
-  "header--text": "awsui_header--text_1d2i7_eh1gb_295",
-  "footer": "awsui_footer_1d2i7_eh1gb_299",
-  "dismiss-control": "awsui_dismiss-control_1d2i7_eh1gb_309",
-  "modal-open": "awsui_modal-open_1d2i7_eh1gb_313"
+  "dialog": "awsui_dialog_1d2i7_1ij78_105",
+  "modal-slide-up": "awsui_modal-slide-up_1d2i7_1ij78_1",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_1ij78_1",
+  "refresh": "awsui_refresh_1d2i7_1ij78_128",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_1ij78_1",
+  "root": "awsui_root_1d2i7_1ij78_161",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_1ij78_1",
+  "hidden": "awsui_hidden_1d2i7_1ij78_226",
+  "focus-lock": "awsui_focus-lock_1d2i7_1ij78_230",
+  "small": "awsui_small_1d2i7_1ij78_248",
+  "medium": "awsui_medium_1d2i7_1ij78_251",
+  "large": "awsui_large_1d2i7_1ij78_254",
+  "max": "awsui_max_1d2i7_1ij78_257",
+  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_1ij78_257",
+  "container": "awsui_container_1d2i7_1ij78_262",
+  "content": "awsui_content_1d2i7_1ij78_281",
+  "no-paddings": "awsui_no-paddings_1d2i7_1ij78_284",
+  "header": "awsui_header_1d2i7_1ij78_288",
+  "header--text": "awsui_header--text_1d2i7_1ij78_295",
+  "footer": "awsui_footer_1d2i7_1ij78_299",
+  "footer--stuck": "awsui_footer--stuck_1d2i7_1ij78_306",
+  "dismiss-control": "awsui_dismiss-control_1d2i7_1ij78_315",
+  "modal-open": "awsui_modal-open_1d2i7_1ij78_319"
 };
   

package/modal/styles.scoped.css

@@ -94,7 +94,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_eh1gb_1 {
+@keyframes awsui_modal-slide-up_1d2i7_1ij78_1 {
   0% {
     transform: translate(0, 10px);
   }
@@ -102,12 +102,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     transform: translate(0, 0);
   }
 }
-.awsui_dialog_1d2i7_eh1gb_105:not(#\9) {
-  animation: awsui_modal-slide-up_1d2i7_eh1gb_1 var(--motion-duration-slow-0273ow, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_eh1gb_1 var(--motion-duration-slow-0273ow, 180ms) ease-out;
+.awsui_dialog_1d2i7_1ij78_105:not(#\9) {
+  animation: awsui_modal-slide-up_1d2i7_1ij78_1 var(--motion-duration-slow-0273ow, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_1ij78_1 var(--motion-duration-slow-0273ow, 180ms) ease-out;
   animation-delay: var(--motion-duration-fast-nk2ap0, 90ms);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1d2i7_eh1gb_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_1ij78_1 {
   from {
     opacity: 0;
   }
@@ -116,22 +116,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dialog_1d2i7_eh1gb_105:not(#\9) {
+  .awsui_dialog_1d2i7_1ij78_105:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dialog_1d2i7_eh1gb_105:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_eh1gb_105:not(#\9) {
+.awsui-motion-disabled .awsui_dialog_1d2i7_1ij78_105:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_1ij78_105:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_dialog_1d2i7_eh1gb_105.awsui_refresh_1d2i7_eh1gb_128:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_1d2i7_eh1gb_1, awsui_awsui-motion-fade-in-0_1d2i7_eh1gb_1;
+.awsui_dialog_1d2i7_1ij78_105.awsui_refresh_1d2i7_1ij78_128:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_1d2i7_1ij78_1, awsui_awsui-motion-fade-in-0_1d2i7_1ij78_1;
   animation-duration: var(--motion-duration-refresh-only-fast-addxjd, 115ms);
   animation-timing-function: var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1d2i7_eh1gb_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_1ij78_1 {
   from {
     opacity: 0;
   }
@@ -139,7 +139,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-scale-popup_1d2i7_eh1gb_1 {
+@keyframes awsui_awsui-motion-scale-popup_1d2i7_1ij78_1 {
   0% {
     transform: scale(0.95);
   }
@@ -148,21 +148,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dialog_1d2i7_eh1gb_105.awsui_refresh_1d2i7_eh1gb_128:not(#\9) {
+  .awsui_dialog_1d2i7_1ij78_105.awsui_refresh_1d2i7_1ij78_128:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dialog_1d2i7_eh1gb_105.awsui_refresh_1d2i7_eh1gb_128:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_eh1gb_105.awsui_refresh_1d2i7_eh1gb_128:not(#\9) {
+.awsui-motion-disabled .awsui_dialog_1d2i7_1ij78_105.awsui_refresh_1d2i7_1ij78_128:not(#\9), .awsui-mode-entering .awsui_dialog_1d2i7_1ij78_105.awsui_refresh_1d2i7_1ij78_128:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1d2i7_eh1gb_161:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_1d2i7_eh1gb_1 var(--motion-duration-extra-slow-8ks5rs, 270ms) ease-out;
+.awsui_root_1d2i7_1ij78_161:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_1d2i7_1ij78_1 var(--motion-duration-extra-slow-8ks5rs, 270ms) ease-out;
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in_1d2i7_eh1gb_1 {
+@keyframes awsui_awsui-motion-fade-in_1d2i7_1ij78_1 {
   from {
     opacity: 0.2;
   }
@@ -171,25 +171,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1d2i7_eh1gb_161:not(#\9) {
+  .awsui_root_1d2i7_1ij78_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1d2i7_eh1gb_161:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_eh1gb_161:not(#\9) {
+.awsui-motion-disabled .awsui_root_1d2i7_1ij78_161:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_1ij78_161:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1d2i7_eh1gb_161.awsui_refresh_1d2i7_eh1gb_128:not(#\9) {
+.awsui_root_1d2i7_1ij78_161.awsui_refresh_1d2i7_1ij78_128:not(#\9) {
   animation-duration: var(--motion-duration-refresh-only-fast-addxjd, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1d2i7_eh1gb_161.awsui_refresh_1d2i7_eh1gb_128:not(#\9) {
+  .awsui_root_1d2i7_1ij78_161.awsui_refresh_1d2i7_1ij78_128:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1d2i7_eh1gb_161.awsui_refresh_1d2i7_eh1gb_128:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_eh1gb_161.awsui_refresh_1d2i7_eh1gb_128:not(#\9) {
+.awsui-motion-disabled .awsui_root_1d2i7_1ij78_161.awsui_refresh_1d2i7_1ij78_128:not(#\9), .awsui-mode-entering .awsui_root_1d2i7_1ij78_161.awsui_refresh_1d2i7_1ij78_128:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -198,7 +198,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
 */
-.awsui_root_1d2i7_eh1gb_161:not(#\9) {
+.awsui_root_1d2i7_1ij78_161:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -249,11 +249,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: auto;
   cursor: pointer;
 }
-.awsui_root_1d2i7_eh1gb_161.awsui_hidden_1d2i7_eh1gb_226:not(#\9) {
+.awsui_root_1d2i7_1ij78_161.awsui_hidden_1d2i7_1ij78_226:not(#\9) {
   display: none;
 }
 
-.awsui_focus-lock_1d2i7_eh1gb_230:not(#\9) {
+.awsui_focus-lock_1d2i7_1ij78_230:not(#\9) {
   align-self: flex-start;
   margin: auto;
   padding: var(--space-s-hv8c1d, 12px) 0;
@@ -261,7 +261,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
 }
 
-.awsui_dialog_1d2i7_eh1gb_105:not(#\9) {
+.awsui_dialog_1d2i7_1ij78_105:not(#\9) {
   position: static;
   top: 0;
   transform: translate(0, 0);
@@ -271,21 +271,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 5000;
   pointer-events: all;
 }
-.awsui_dialog_1d2i7_eh1gb_105.awsui_small_1d2i7_eh1gb_248:not(#\9) {
+.awsui_dialog_1d2i7_1ij78_105.awsui_small_1d2i7_1ij78_248:not(#\9) {
   max-width: 320px;
 }
-.awsui_dialog_1d2i7_eh1gb_105.awsui_medium_1d2i7_eh1gb_251:not(#\9) {
+.awsui_dialog_1d2i7_1ij78_105.awsui_medium_1d2i7_1ij78_251:not(#\9) {
   max-width: 600px;
 }
-.awsui_dialog_1d2i7_eh1gb_105.awsui_large_1d2i7_eh1gb_254:not(#\9) {
+.awsui_dialog_1d2i7_1ij78_105.awsui_large_1d2i7_1ij78_254:not(#\9) {
   max-width: 820px;
 }
-.awsui_dialog_1d2i7_eh1gb_105.awsui_max_1d2i7_eh1gb_257.awsui_breakpoint-xs_1d2i7_eh1gb_257:not(#\9) {
+.awsui_dialog_1d2i7_1ij78_105.awsui_max_1d2i7_1ij78_257.awsui_breakpoint-xs_1d2i7_1ij78_257:not(#\9) {
   max-width: calc(100vw - (2 * 4 * 10px + var(--space-xxxl-bo9z7f, 40px)));
   margin: auto;
 }
 
-.awsui_container_1d2i7_eh1gb_262:not(#\9) {
+.awsui_container_1d2i7_1ij78_262:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -330,39 +330,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: var(--shadow-modal-3qhlqt, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
 }
 
-.awsui_content_1d2i7_eh1gb_281:not(#\9) {
+.awsui_content_1d2i7_1ij78_281:not(#\9) {
   padding: var(--space-container-content-top-fsd8nr, 0px) var(--space-modal-horizontal-ah0xld, 20px) var(--space-modal-content-bottom-cecclv, 16px);
 }
-.awsui_content_1d2i7_eh1gb_281.awsui_no-paddings_1d2i7_eh1gb_284:not(#\9) {
+.awsui_content_1d2i7_1ij78_281.awsui_no-paddings_1d2i7_1ij78_284:not(#\9) {
   padding: 0;
 }
 
-.awsui_header_1d2i7_eh1gb_288:not(#\9) {
+.awsui_header_1d2i7_1ij78_288:not(#\9) {
   padding: var(--space-s-hv8c1d, 12px) var(--space-modal-horizontal-ah0xld, 20px);
   background-color: var(--color-background-container-header-4flbq5, #ffffff);
   border-bottom: 1px solid var(--color-border-container-divider-4ade7z, transparent);
   border-radius: var(--border-radius-container-gh9ysk, 16px) var(--border-radius-container-gh9ysk, 16px) 0 0;
 }
 
-.awsui_header--text_1d2i7_eh1gb_295:not(#\9) {
+.awsui_header--text_1d2i7_1ij78_295:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_footer_1d2i7_eh1gb_299:not(#\9) {
+.awsui_footer_1d2i7_1ij78_299:not(#\9) {
   border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+  position: sticky;
+  bottom: 0;
+}
+.awsui_footer--stuck_1d2i7_1ij78_306:not(#\9) {
+  border-radius: 0 0 var(--border-radius-container-gh9ysk, 16px) var(--border-radius-container-gh9ysk, 16px);
 }
-.awsui_footer_1d2i7_eh1gb_299:not(#\9):after {
+.awsui_footer_1d2i7_1ij78_299:not(#\9):after {
   content: "";
   display: table;
   clear: both;
 }
 
-.awsui_dismiss-control_1d2i7_eh1gb_309:not(#\9) {
+.awsui_dismiss-control_1d2i7_1ij78_315:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_modal-open_1d2i7_eh1gb_313:not(#\9) {
+.awsui_modal-open_1d2i7_1ij78_319:not(#\9) {
   overflow: hidden;
   /*
    * When padding-right is added to account for scrollbar being turned

package/modal/styles.selectors.js

@@ -2,27 +2,28 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "dialog": "awsui_dialog_1d2i7_eh1gb_105",
-  "modal-slide-up": "awsui_modal-slide-up_1d2i7_eh1gb_1",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_eh1gb_1",
-  "refresh": "awsui_refresh_1d2i7_eh1gb_128",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_eh1gb_1",
-  "root": "awsui_root_1d2i7_eh1gb_161",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_eh1gb_1",
-  "hidden": "awsui_hidden_1d2i7_eh1gb_226",
-  "focus-lock": "awsui_focus-lock_1d2i7_eh1gb_230",
-  "small": "awsui_small_1d2i7_eh1gb_248",
-  "medium": "awsui_medium_1d2i7_eh1gb_251",
-  "large": "awsui_large_1d2i7_eh1gb_254",
-  "max": "awsui_max_1d2i7_eh1gb_257",
-  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_eh1gb_257",
-  "container": "awsui_container_1d2i7_eh1gb_262",
-  "content": "awsui_content_1d2i7_eh1gb_281",
-  "no-paddings": "awsui_no-paddings_1d2i7_eh1gb_284",
-  "header": "awsui_header_1d2i7_eh1gb_288",
-  "header--text": "awsui_header--text_1d2i7_eh1gb_295",
-  "footer": "awsui_footer_1d2i7_eh1gb_299",
-  "dismiss-control": "awsui_dismiss-control_1d2i7_eh1gb_309",
-  "modal-open": "awsui_modal-open_1d2i7_eh1gb_313"
+  "dialog": "awsui_dialog_1d2i7_1ij78_105",
+  "modal-slide-up": "awsui_modal-slide-up_1d2i7_1ij78_1",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1d2i7_1ij78_1",
+  "refresh": "awsui_refresh_1d2i7_1ij78_128",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_1d2i7_1ij78_1",
+  "root": "awsui_root_1d2i7_1ij78_161",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_1d2i7_1ij78_1",
+  "hidden": "awsui_hidden_1d2i7_1ij78_226",
+  "focus-lock": "awsui_focus-lock_1d2i7_1ij78_230",
+  "small": "awsui_small_1d2i7_1ij78_248",
+  "medium": "awsui_medium_1d2i7_1ij78_251",
+  "large": "awsui_large_1d2i7_1ij78_254",
+  "max": "awsui_max_1d2i7_1ij78_257",
+  "breakpoint-xs": "awsui_breakpoint-xs_1d2i7_1ij78_257",
+  "container": "awsui_container_1d2i7_1ij78_262",
+  "content": "awsui_content_1d2i7_1ij78_281",
+  "no-paddings": "awsui_no-paddings_1d2i7_1ij78_284",
+  "header": "awsui_header_1d2i7_1ij78_288",
+  "header--text": "awsui_header--text_1d2i7_1ij78_295",
+  "footer": "awsui_footer_1d2i7_1ij78_299",
+  "footer--stuck": "awsui_footer--stuck_1d2i7_1ij78_306",
+  "dismiss-control": "awsui_dismiss-control_1d2i7_1ij78_315",
+  "modal-open": "awsui_modal-open_1d2i7_1ij78_319"
 };
   

package/package.json

@@ -108,7 +108,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.237",
+  "version": "3.0.238",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/property-filter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/property-filter/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAY9E,OAAO,EAAE,mBAAmB,EAAiE,MAAM,cAAc,CAAC;AAkBlH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAa/B,QAAA,MAAM,cAAc,qGAoUnB,CAAC;AAGF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/property-filter/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAY9E,OAAO,EAAE,mBAAmB,EAAiE,MAAM,cAAc,CAAC;AAmBlH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAa/B,QAAA,MAAM,cAAc,qGAiUnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/property-filter/index.js

@@ -9,7 +9,7 @@ import { getBaseProps } from '../internal/base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { KeyCode } from '../internal/keycode';
 import SelectToggle from '../token-group/toggle';
-import { generateUniqueId } from '../internal/hooks/use-unique-id/index';
+import { generateUniqueId, useUniqueId } from '../internal/hooks/use-unique-id/index';
 import { fireNonCancelableEvent } from '../internal/events';
 import { TokenButton } from './token';
 import { getQueryActions, parseText, getAutosuggestOptions, getAllowedOperators, getExtendedOperator, } from './controller';
@@ -20,6 +20,7 @@ import PropertyFilterAutosuggest from './property-filter-autosuggest';
 import { PropertyEditor } from './property-editor';
 import { matchTokenValue } from './utils';
 import { useInternalI18n } from '../internal/i18n/context';
+import { SearchResults } from '../text-filter/search-results';
 const OPERATOR_I18N_MAPPING = {
     '=': 'equals',
     '!=': 'not_equals',
@@ -47,7 +48,7 @@ const PropertyFilter = React.forwardRef((_a, ref) => {
         }) });
     useImperativeHandle(ref, () => ({ focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }), []);
     const { tokens, operation } = query;
-    const showResults = (tokens === null || tokens === void 0 ? void 0 : tokens.length) && !disabled;
+    const showResults = !!(tokens === null || tokens === void 0 ? void 0 : tokens.length) && !disabled && !!countText;
     const { addToken, removeToken, setToken, setOperation, removeAllTokens } = getQueryActions(query, onChange, inputRef);
     const [filteringText, setFilteringText] = useState('');
     const parsedText = parseText(filteringText, filteringProperties, disableFreeTextFiltering);
@@ -152,6 +153,7 @@ const PropertyFilter = React.forwardRef((_a, ref) => {
     const controlId = useMemo(() => generateUniqueId(), []);
     const operatorForm = parsedText.step === 'property' &&
         ((_b = getExtendedOperator(filteringProperties, parsedText.property.key, parsedText.operator)) === null || _b === void 0 ? void 0 : _b.form);
+    const searchResultsId = useUniqueId('property-filter-search-results');
     return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
         React.createElement("div", { className: styles['search-field'] },
             customControl && React.createElement("div", { className: styles['custom-control'] }, customControl),
@@ -166,8 +168,8 @@ const PropertyFilter = React.forwardRef((_a, ref) => {
                         setFilteringText('');
                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventDropdown: true });
                         (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.close();
-                    } })), hideEnteredTextOption: disableFreeTextFiltering && parsedText.step !== 'property', clearAriaLabel: i18nStrings.clearAriaLabel })),
-            React.createElement("span", { "aria-live": "polite", "aria-atomic": "true", className: clsx(styles.results, showResults && styles['results-visible']) }, showResults ? countText : '')),
+                    } })), hideEnteredTextOption: disableFreeTextFiltering && parsedText.step !== 'property', clearAriaLabel: i18nStrings.clearAriaLabel, searchResultsId: showResults ? searchResultsId : undefined })),
+            showResults ? React.createElement(SearchResults, { id: searchResultsId }, countText) : null),
         tokens && tokens.length > 0 && (React.createElement("div", { className: styles.tokens },
             React.createElement(InternalSpaceBetween, { size: "xs", direction: "horizontal", id: controlId },
                 slicedTokens.map((token, index) => (React.createElement(TokenButton, { token: token, first: index === 0, operation: operation, key: index, removeToken: () => removeToken(index), setToken: (newToken) => setToken(index, newToken), setOperation: setOperation, filteringOptions: filteringOptions, filteringProperties: filteringProperties, asyncProps: asyncProps, onLoadItems: onLoadItems, i18nStrings: i18nStrings, asyncProperties: asyncProperties, hideOperations: hideOperations, customGroupsText: customGroupsText, disableFreeTextFiltering: disableFreeTextFiltering, disabled: disabled, expandToViewport: expandToViewport }))),