@cloudscape-design/components 3.0.798 → 3.0.800

package/internal/components/live-region/controller.js

@@ -0,0 +1,77 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import styles from './styles.css.js';
+/**
+ * The controller that manages a single live region container. It has a timer
+ * to make sure announcements are throttled correctly. It can also make sure
+ * that a message is announced again even if it matches the previous content
+ * of the live region.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ */
+export class LiveRegionController {
+    constructor(politeness, delay = LiveRegionController.defaultDelay) {
+        this.politeness = politeness;
+        this.delay = delay;
+        this._addedTerminalPeriod = false;
+        this._nextAnnouncement = '';
+        this._element = document.createElement('div');
+        this._element.className = styles.announcer;
+        this._element.setAttribute('aria-live', this.politeness);
+        this._element.setAttribute('aria-atomic', 'true');
+        this._element.setAttribute('data-awsui-live-announcer', 'true');
+        document.body.appendChild(this._element);
+    }
+    /**
+     * Reset the state of the controller and clear any active announcements.
+     */
+    destroy() {
+        var _a;
+        (_a = this._element) === null || _a === void 0 ? void 0 : _a.remove();
+        if (this._timeoutId !== undefined) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = undefined;
+        }
+    }
+    announce({ message, forceReannounce = false }) {
+        if (!message) {
+            return;
+        }
+        this._nextAnnouncement = message.trim();
+        if (this.delay === 0 || forceReannounce) {
+            // If the delay is 0, just skip the timeout shenanigans and update the
+            // element synchronously. Great for tests.
+            return this._updateElement(forceReannounce);
+        }
+        if (this._timeoutId === undefined) {
+            this._timeoutId = setTimeout(() => this._updateElement(false), this.delay * 1000);
+        }
+    }
+    _updateElement(forceReannounce) {
+        if (this._nextAnnouncement !== this._lastAnnouncement) {
+            // The aria-atomic does not work properly in Voice Over, causing
+            // certain parts of the content to be ignored. To fix that,
+            // we assign the source text content as a single node.
+            this._element.textContent = this._nextAnnouncement;
+            this._addedTerminalPeriod = false;
+        }
+        else if (forceReannounce) {
+            // A (generally) safe way of forcing re-announcements is toggling the
+            // terminal period. If we only keep adding periods, it's going to be
+            // eventually interpreted as an ellipsis.
+            this._element.textContent = this._nextAnnouncement + (this._addedTerminalPeriod ? '' : '.');
+            this._addedTerminalPeriod = !this._addedTerminalPeriod;
+        }
+        // Track the announced text for deduplication.
+        this._lastAnnouncement = this._nextAnnouncement;
+        // Reset the state for the next announcement.
+        this._timeoutId = undefined;
+    }
+}
+/**
+ * The default delay for announcements when no delay is explicitly provided.
+ * During internal unit testing, you can import this and explicitly set it to
+ * 0 to make the live region update the DOM without waiting for a timer.
+ */
+LiveRegionController.defaultDelay = 2;
+//# sourceMappingURL=controller.js.map

package/internal/components/live-region/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/controller.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;;GAOG;AACH,MAAM,OAAO,oBAAoB;IAc/B,YACkB,UAAkC,EAClC,QAAQ,oBAAoB,CAAC,YAAY;QADzC,eAAU,GAAV,UAAU,CAAwB;QAClC,UAAK,GAAL,KAAK,CAAoC;QALnD,yBAAoB,GAAG,KAAK,CAAC;QAC7B,sBAAiB,GAAG,EAAE,CAAC;QAM7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC;QAChE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,OAAO;;QACL,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;SAC7B;IACH,CAAC;IAED,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,GAAG,KAAK,EAAmE;QAC5G,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;QAExC,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,eAAe,EAAE;YACvC,sEAAsE;YACtE,0CAA0C;YAC1C,OAAO,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;SACnF;IACH,CAAC;IAEO,cAAc,CAAC,eAAwB;QAC7C,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,iBAAiB,EAAE;YACrD,gEAAgE;YAChE,2DAA2D;YAC3D,sDAAsD;YACtD,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACnC;aAAM,IAAI,eAAe,EAAE;YAC1B,qEAAqE;YACrE,oEAAoE;YACpE,yCAAyC;YACzC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5F,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC;SACxD;QAED,8CAA8C;QAC9C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAEhD,6CAA6C;QAC7C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;;AA1ED;;;;GAIG;AACW,iCAAY,GAAG,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport styles from './styles.css.js';\n\n/**\n * The controller that manages a single live region container. It has a timer\n * to make sure announcements are throttled correctly. It can also make sure\n * that a message is announced again even if it matches the previous content\n * of the live region.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n */\nexport class LiveRegionController {\n  /**\n   * The default delay for announcements when no delay is explicitly provided.\n   * During internal unit testing, you can import this and explicitly set it to\n   * 0 to make the live region update the DOM without waiting for a timer.\n   */\n  public static defaultDelay = 2;\n\n  private _element: HTMLElement;\n  private _timeoutId: number | undefined;\n  private _lastAnnouncement: string | undefined;\n  private _addedTerminalPeriod = false;\n  private _nextAnnouncement = '';\n\n  constructor(\n    public readonly politeness: 'polite' | 'assertive',\n    public readonly delay = LiveRegionController.defaultDelay\n  ) {\n    this._element = document.createElement('div');\n    this._element.className = styles.announcer;\n    this._element.setAttribute('aria-live', this.politeness);\n    this._element.setAttribute('aria-atomic', 'true');\n    this._element.setAttribute('data-awsui-live-announcer', 'true');\n    document.body.appendChild(this._element);\n  }\n\n  /**\n   * Reset the state of the controller and clear any active announcements.\n   */\n  destroy() {\n    this._element?.remove();\n    if (this._timeoutId !== undefined) {\n      clearTimeout(this._timeoutId);\n      this._timeoutId = undefined;\n    }\n  }\n\n  announce({ message, forceReannounce = false }: { message?: string; delay?: number; forceReannounce?: boolean }) {\n    if (!message) {\n      return;\n    }\n\n    this._nextAnnouncement = message.trim();\n\n    if (this.delay === 0 || forceReannounce) {\n      // If the delay is 0, just skip the timeout shenanigans and update the\n      // element synchronously. Great for tests.\n      return this._updateElement(forceReannounce);\n    }\n\n    if (this._timeoutId === undefined) {\n      this._timeoutId = setTimeout(() => this._updateElement(false), this.delay * 1000);\n    }\n  }\n\n  private _updateElement(forceReannounce: boolean) {\n    if (this._nextAnnouncement !== this._lastAnnouncement) {\n      // The aria-atomic does not work properly in Voice Over, causing\n      // certain parts of the content to be ignored. To fix that,\n      // we assign the source text content as a single node.\n      this._element.textContent = this._nextAnnouncement;\n      this._addedTerminalPeriod = false;\n    } else if (forceReannounce) {\n      // A (generally) safe way of forcing re-announcements is toggling the\n      // terminal period. If we only keep adding periods, it's going to be\n      // eventually interpreted as an ellipsis.\n      this._element.textContent = this._nextAnnouncement + (this._addedTerminalPeriod ? '' : '.');\n      this._addedTerminalPeriod = !this._addedTerminalPeriod;\n    }\n\n    // Track the announced text for deduplication.\n    this._lastAnnouncement = this._nextAnnouncement;\n\n    // Reset the state for the next announcement.\n    this._timeoutId = undefined;\n  }\n}\n"]}

package/internal/components/live-region/index.d.ts

@@ -1,65 +1,6 @@
-import React from 'react';
-import { ScreenreaderOnlyProps } from '../screenreader-only';
-export interface LiveRegionProps extends ScreenreaderOnlyProps {
-    assertive?: boolean;
-    delay?: number;
-    visible?: boolean;
-    tagName?: 'span' | 'div';
-    id?: string;
-    /**
-     * Use a list of strings and/or existing DOM elements for building the
-     * announcement text. This avoids rendering separate content just for this
-     * LiveRegion.
-     *
-     * If this property is set, the `children` will be ignored.
-     */
-    source?: Array<string | React.RefObject<HTMLElement> | undefined>;
-}
-/**
- * The live region is hidden in the layout, but visible for screen readers.
- * It's purpose it to announce changes e.g. when custom navigation logic is used.
- *
- * The way live region works differently in different browsers and screen readers and
- * it is recommended to manually test every new implementation.
- *
- * If you notice there are different words being merged together,
- * check if there are text nodes not being wrapped in elements, like:
- * ```
- * <LiveRegion>
- *   {title}
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * To fix, wrap "title" in an element:
- * ```
- * <LiveRegion>
- *   <span>{title}</span>
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * Or create a single text node if possible:
- * ```
- * <LiveRegion>
- *   {`${title} ${details}`}
- * </LiveRegion>
- * ```
- *
- * The live region is always atomic, because non-atomic regions can be treated by screen readers
- * differently and produce unexpected results. To imitate non-atomic announcements simply use
- * multiple live regions:
- * ```
- * <>
- *   <LiveRegion>{title}</LiveRegion>
- *   <LiveRegion><Details /></LiveRegion>
- * </>
- * ```
- *
- * If you place interactive content inside the LiveRegion, the content will still be
- * interactive (e.g. as a tab stop). Consider using the `source` property instead.
- */
-declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
-export default _default;
-declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, id, source, ...restProps }: LiveRegionProps): JSX.Element;
+/// <reference types="react" />
+import { LiveRegionProps } from './interfaces';
+export { LiveRegionProps };
+declare function LiveRegion({ assertive, hidden, tagName, ...restProps }: LiveRegionProps): JSX.Element;
+export default LiveRegion;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/live-region/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CACnE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAClB,SAAiB,EACjB,KAAU,EACV,OAAe,EACf,OAAO,EAAE,OAAgB,EACzB,QAAQ,EACR,EAAE,EACF,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,eAqFjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,MAAc,EAAE,OAAe,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAcxG;AAID,eAAe,UAAU,CAAC"}

package/internal/components/live-region/index.js

@@ -1,128 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { __rest } from "tslib";
-/* eslint-disable @cloudscape-design/prefer-live-region */
-import React, { memo, useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import ScreenreaderOnly from '../screenreader-only';
-import styles from './styles.css.js';
-/**
- * The live region is hidden in the layout, but visible for screen readers.
- * It's purpose it to announce changes e.g. when custom navigation logic is used.
- *
- * The way live region works differently in different browsers and screen readers and
- * it is recommended to manually test every new implementation.
- *
- * If you notice there are different words being merged together,
- * check if there are text nodes not being wrapped in elements, like:
- * ```
- * <LiveRegion>
- *   {title}
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * To fix, wrap "title" in an element:
- * ```
- * <LiveRegion>
- *   <span>{title}</span>
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * Or create a single text node if possible:
- * ```
- * <LiveRegion>
- *   {`${title} ${details}`}
- * </LiveRegion>
- * ```
- *
- * The live region is always atomic, because non-atomic regions can be treated by screen readers
- * differently and produce unexpected results. To imitate non-atomic announcements simply use
- * multiple live regions:
- * ```
- * <>
- *   <LiveRegion>{title}</LiveRegion>
- *   <LiveRegion><Details /></LiveRegion>
- * </>
- * ```
- *
- * If you place interactive content inside the LiveRegion, the content will still be
- * interactive (e.g. as a tab stop). Consider using the `source` property instead.
- */
-export default memo(LiveRegion);
+import React from 'react';
+// import useBaseComponent from '../../hooks/use-base-component';
+import { applyDisplayName } from '../../utils/apply-display-name';
+import InternalLiveRegion from './internal';
 function LiveRegion(_a) {
-    var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children, id, source } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children", "id", "source"]);
-    const sourceRef = useRef(null);
-    const targetRef = useRef(null);
-    /*
-      When React state changes, React often produces too many DOM updates, causing NVDA to
-      issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).
-  
-      The code below imitates a debouncing, scheduling a callback every time new React state
-      update is detected. When a callback resolves, it copies content from a muted element
-      to the live region, which is recognized by screen readers as an update.
-  
-      If the use case requires no announcement to be ignored, use delay = 0, but ensure it
-      does not impact the performance. If it does, prefer using a string as children prop.
-    */
-    useEffect(() => {
-        function getSourceContent() {
-            if (source) {
-                return source
-                    .map(item => {
-                    if (!item) {
-                        return undefined;
-                    }
-                    if (typeof item === 'string') {
-                        return item;
-                    }
-                    if (item.current) {
-                        return extractInnerText(item.current);
-                    }
-                })
-                    .filter(Boolean)
-                    .join(' ');
-            }
-            if (sourceRef.current) {
-                return extractInnerText(sourceRef.current);
-            }
-        }
-        function updateLiveRegion() {
-            const sourceContent = getSourceContent();
-            if (targetRef.current && sourceContent) {
-                const targetContent = extractInnerText(targetRef.current);
-                if (targetContent !== sourceContent) {
-                    // The aria-atomic does not work properly in Voice Over, causing
-                    // certain parts of the content to be ignored. To fix that,
-                    // we assign the source text content as a single node.
-                    targetRef.current.innerText = sourceContent;
-                }
-            }
-        }
-        let timeoutId;
-        if (delay) {
-            timeoutId = setTimeout(updateLiveRegion, delay);
-        }
-        else {
-            updateLiveRegion();
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    });
-    return (React.createElement(React.Fragment, null,
-        visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id, className: styles.source }, children)),
-        React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
-            !visible && !source && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true", className: styles.source }, children)),
-            React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
-}
-// This only extracts text content from the node including all its children which is enough for now.
-// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
-// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
-function extractInnerText(node) {
-    return (node.innerText || '').replace(/\s+/g, ' ').trim();
+    var { assertive = false, hidden = false, tagName = 'div' } = _a, restProps = __rest(_a, ["assertive", "hidden", "tagName"]);
+    // TODO: Switch this out when moving this component out of internal
+    // const baseComponentProps = useBaseComponent('LiveRegion');
+    const baseComponentProps = { __internalRootRef: React.useRef() };
+    return (React.createElement(InternalLiveRegion, Object.assign({ assertive: assertive, hidden: hidden, tagName: tagName }, baseComponentProps, restProps)));
 }
+applyDisplayName(LiveRegion, 'LiveRegion');
+export default LiveRegion;
 //# sourceMappingURL=index.js.map

package/internal/components/live-region/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport React, { memo, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\n\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  id?: string;\n  /**\n   * Use a list of strings and/or existing DOM elements for building the\n   * announcement text. This avoids rendering separate content just for this\n   * LiveRegion.\n   *\n   * If this property is set, the `children` will be ignored.\n   */\n  source?: Array<string | React.RefObject<HTMLElement> | undefined>;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * ```\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * To fix, wrap \"title\" in an element:\n * ```\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * Or create a single text node if possible:\n * ```\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n * ```\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * ```\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n * ```\n *\n * If you place interactive content inside the LiveRegion, the content will still be\n * interactive (e.g. as a tab stop). Consider using the `source` property instead.\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  source,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function getSourceContent() {\n      if (source) {\n        return source\n          .map(item => {\n            if (!item) {\n              return undefined;\n            }\n            if (typeof item === 'string') {\n              return item;\n            }\n            if (item.current) {\n              return extractInnerText(item.current);\n            }\n          })\n          .filter(Boolean)\n          .join(' ');\n      }\n\n      if (sourceRef.current) {\n        return extractInnerText(sourceRef.current);\n      }\n    }\n    function updateLiveRegion() {\n      const sourceContent = getSourceContent();\n\n      if (targetRef.current && sourceContent) {\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && !source && (\n        <TagName ref={sourceRef} id={id} className={styles.source}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && !source && (\n          <TagName ref={sourceRef} aria-hidden=\"true\" className={styles.source}>\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,iEAAiE;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,SAAS,UAAU,CAAC,EAAqF;QAArF,EAAE,SAAS,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,OAAiC,EAA5B,SAAS,cAAlE,kCAAoE,CAAF;IACpF,mEAAmE;IACnE,6DAA6D;IAC7D,MAAM,kBAAkB,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;IAEjE,OAAO,CACL,oBAAC,kBAAkB,kBACjB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IACZ,kBAAkB,EAClB,SAAS,EACb,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAE3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\n// import useBaseComponent from '../../hooks/use-base-component';\nimport { applyDisplayName } from '../../utils/apply-display-name';\nimport { LiveRegionProps } from './interfaces';\nimport InternalLiveRegion from './internal';\n\nexport { LiveRegionProps };\n\nfunction LiveRegion({ assertive = false, hidden = false, tagName = 'div', ...restProps }: LiveRegionProps) {\n  // TODO: Switch this out when moving this component out of internal\n  // const baseComponentProps = useBaseComponent('LiveRegion');\n  const baseComponentProps = { __internalRootRef: React.useRef() };\n\n  return (\n    <InternalLiveRegion\n      assertive={assertive}\n      hidden={hidden}\n      tagName={tagName}\n      {...baseComponentProps}\n      {...restProps}\n    />\n  );\n}\n\napplyDisplayName(LiveRegion, 'LiveRegion');\n\nexport default LiveRegion;\n"]}

package/internal/components/live-region/interfaces.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../../base-component';
+export interface LiveRegionProps extends BaseComponentProps {
+    /**
+     * The string for the aria-live announcement text. When this content
+     * changes, the text will be re-announced to assistive technologies. If this
+     * property is provided, it will be used for the live announcement instead of
+     * the `children` slot.
+     */
+    message?: string;
+    /**
+     * Whether the announcements should be made using assertive aria-live.
+     * Assertive announcements interrupt the user's action, so they should only
+     * be used when absolutely necessary.
+     */
+    assertive?: boolean;
+    /**
+     * The tag name to use for the wrapper around the `children` slot.
+     */
+    tagName?: LiveRegionProps.TagName;
+    /**
+     * Defines whether to visually hide the contents of the `children` slot.
+     */
+    hidden?: boolean;
+    /**
+     * Use the rendered content as the source for the announcement text.
+     * Prefer `message` if announcement text can be provided as a string.
+     */
+    children?: React.ReactNode;
+}
+export declare namespace LiveRegionProps {
+    type TagName = 'span' | 'div';
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/components/live-region/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAElC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACtC"}

package/internal/components/live-region/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/components/live-region/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\n\nexport interface LiveRegionProps extends BaseComponentProps {\n  /**\n   * The string for the aria-live announcement text. When this content\n   * changes, the text will be re-announced to assistive technologies. If this\n   * property is provided, it will be used for the live announcement instead of\n   * the `children` slot.\n   */\n  message?: string;\n\n  /**\n   * Whether the announcements should be made using assertive aria-live.\n   * Assertive announcements interrupt the user's action, so they should only\n   * be used when absolutely necessary.\n   */\n  assertive?: boolean;\n\n  /**\n   * The tag name to use for the wrapper around the `children` slot.\n   */\n  tagName?: LiveRegionProps.TagName;\n\n  /**\n   * Defines whether to visually hide the contents of the `children` slot.\n   */\n  hidden?: boolean;\n\n  /**\n   * Use the rendered content as the source for the announcement text.\n   * Prefer `message` if announcement text can be provided as a string.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace LiveRegionProps {\n  export type TagName = 'span' | 'div';\n}\n"]}

package/internal/components/live-region/internal.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { InternalBaseComponentProps } from '../../hooks/use-base-component';
+import { LiveRegionProps } from './interfaces';
+export interface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {
+    /**
+     * The delay between each announcement from this live region. You should
+     * leave this set to the default unless this live region is commonly
+     * interrupted by other actions (like text entry in text filtering).
+     */
+    delay?: number;
+    /**
+     * Use a list of strings and/or refs to existing elements for building the
+     * announcement text. If this property is set, `children` and `message` will
+     * be ignored.
+     */
+    sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;
+}
+export interface InternalLiveRegionRef {
+    /**
+     * Force the live region to announce the message, even if it's the same as
+     * the previously announced message.
+     *
+     * This is useful when making status updates after a change (e.g. filtering)
+     * where the new message might be the same as the old one, but the announcement
+     * also serves to tell screen reader users that the action was performed.
+     */
+    reannounce(): void;
+}
+declare const _default: React.ForwardRefExoticComponent<InternalLiveRegionProps & React.RefAttributes<InternalLiveRegionRef>>;
+export default _default;
+//# sourceMappingURL=internal.d.ts.map

package/internal/components/live-region/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAItE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAG5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI/C,MAAM,WAAW,uBAAwB,SAAQ,0BAA0B,EAAE,eAAe;IAC1F;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAED,wBAsEG"}

package/internal/components/live-region/internal.js

@@ -0,0 +1,80 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __rest } from "tslib";
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../../base-component';
+import { useMergeRefs } from '../../hooks/use-merge-refs';
+import { LiveRegionController } from './controller';
+import styles from './styles.css.js';
+export default React.forwardRef(function InternalLiveRegion(_a, ref) {
+    var { assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, message, children, __internalRootRef, className } = _a, restProps = __rest(_a, ["assertive", "hidden", "tagName", "delay", "sources", "message", "children", "__internalRootRef", "className"]);
+    const baseProps = getBaseProps(restProps);
+    const childrenRef = useRef(null);
+    const mergedRef = useMergeRefs(childrenRef, __internalRootRef);
+    useEffect(() => {
+        // We have to do this because `inert` isn't properly supported until
+        // React 19 and this seems much more maintainable than version detection.
+        // `inert` is better than `hidden` because it also blocks pointer and
+        // focus events as well as hiding the contents from screen readers.
+        // https://github.com/facebook/react/issues/17157
+        if (childrenRef.current) {
+            childrenRef.current.inert = hidden;
+        }
+    }, [hidden]);
+    // Initialize the live region controller inside an effect. We have to do this
+    // because the controller depends on DOM elements, which aren't available on the
+    // server.
+    const liveRegionControllerRef = useRef();
+    useEffect(() => {
+        const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite');
+        liveRegionControllerRef.current = liveRegionController;
+        return () => {
+            liveRegionController.destroy();
+            liveRegionControllerRef.current = undefined;
+        };
+    }, [assertive]);
+    const getContent = () => {
+        return sources
+            ? getSourceContent(sources)
+            : message
+                ? message
+                : childrenRef.current
+                    ? extractTextContent(childrenRef.current)
+                    : undefined;
+    };
+    // Call the controller on every render. The controller will deduplicate the
+    // message against the previous announcement internally.
+    useEffect(() => {
+        var _a;
+        (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message: getContent(), delay });
+    });
+    useImperativeHandle(ref, () => ({
+        reannounce() {
+            var _a;
+            (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message: getContent(), delay, forceReannounce: true });
+        },
+    }));
+    return (React.createElement(TagName, Object.assign({ ref: mergedRef }, baseProps, { className: clsx(styles.root, className), hidden: hidden }), children));
+});
+function extractTextContent(node) {
+    // We use the text content of the node as the announcement text.
+    // This only extracts text content from the node including all its children which is enough for now.
+    // To make it more powerful, it is possible to create a more sophisticated extractor with respect to
+    // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
+    return (node.textContent || '').replace(/\s+/g, ' ').trim();
+}
+function getSourceContent(source) {
+    return source
+        .map(item => {
+        if (!item || typeof item === 'string') {
+            return item;
+        }
+        if (item.current) {
+            return extractTextContent(item.current);
+        }
+    })
+        .filter(Boolean)
+        .join(' ');
+}
+//# sourceMappingURL=internal.js.map

package/internal/components/live-region/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/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\n\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../../base-component';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { LiveRegionController } from './controller';\nimport { LiveRegionProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {\n  /**\n   * The delay between each announcement from this live region. You should\n   * leave this set to the default unless this live region is commonly\n   * interrupted by other actions (like text entry in text filtering).\n   */\n  delay?: number;\n\n  /**\n   * Use a list of strings and/or refs to existing elements for building the\n   * announcement text. If this property is set, `children` and `message` will\n   * be ignored.\n   */\n  sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;\n}\n\nexport interface InternalLiveRegionRef {\n  /**\n   * Force the live region to announce the message, even if it's the same as\n   * the previously announced message.\n   *\n   * This is useful when making status updates after a change (e.g. filtering)\n   * where the new message might be the same as the old one, but the announcement\n   * also serves to tell screen reader users that the action was performed.\n   */\n  reannounce(): void;\n}\n\nexport default React.forwardRef(function InternalLiveRegion(\n  {\n    assertive = false,\n    hidden = false,\n    tagName: TagName = 'div',\n    delay,\n    sources,\n    message,\n    children,\n    __internalRootRef,\n    className,\n    ...restProps\n  }: InternalLiveRegionProps,\n  ref: React.Ref<InternalLiveRegionRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const childrenRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(childrenRef, __internalRootRef);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (childrenRef.current) {\n      childrenRef.current.inert = hidden;\n    }\n  }, [hidden]);\n\n  // Initialize the live region controller inside an effect. We have to do this\n  // because the controller depends on DOM elements, which aren't available on the\n  // server.\n  const liveRegionControllerRef = useRef<LiveRegionController | undefined>();\n  useEffect(() => {\n    const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite');\n    liveRegionControllerRef.current = liveRegionController;\n    return () => {\n      liveRegionController.destroy();\n      liveRegionControllerRef.current = undefined;\n    };\n  }, [assertive]);\n\n  const getContent = () => {\n    return sources\n      ? getSourceContent(sources)\n      : message\n        ? message\n        : childrenRef.current\n          ? extractTextContent(childrenRef.current)\n          : undefined;\n  };\n\n  // Call the controller on every render. The controller will deduplicate the\n  // message against the previous announcement internally.\n  useEffect(() => {\n    liveRegionControllerRef.current?.announce({ message: getContent(), delay });\n  });\n\n  useImperativeHandle(ref, () => ({\n    reannounce() {\n      liveRegionControllerRef.current?.announce({ message: getContent(), delay, forceReannounce: true });\n    },\n  }));\n\n  return (\n    <TagName ref={mergedRef} {...baseProps} className={clsx(styles.root, className)} hidden={hidden}>\n      {children}\n    </TagName>\n  );\n});\n\nfunction extractTextContent(node: HTMLElement): string {\n  // We use the text content of the node as the announcement text.\n  // This only extracts text content from the node including all its children which is enough for now.\n  // To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n  // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\n  return (node.textContent || '').replace(/\\s+/g, ' ').trim();\n}\n\nfunction getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {\n  return source\n    .map(item => {\n      if (!item || typeof item === 'string') {\n        return item;\n      }\n      if (item.current) {\n        return extractTextContent(item.current);\n      }\n    })\n    .filter(Boolean)\n    .join(' ');\n}\n"]}

package/internal/components/live-region/styles.css.js

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_3bgfn_64bxr_5",
-  "source": "awsui_source_3bgfn_64bxr_9"
+  "root": "awsui_root_3bgfn_di2un_141",
+  "announcer": "awsui_announcer_3bgfn_di2un_149"
 };