@ringcentral/spring-base 1.11.1 → 1.12.0

package/chunks/index.js

@@ -0,0 +1,234 @@
+const LIVE_ANNOUNCER_ATTR = 'data-live-announcer';
+const visuallyHiddenStyleProperties = {
+    border: '0',
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'absolute',
+    width: '1px',
+    whiteSpace: 'nowrap',
+};
+const applyVisuallyHiddenStyles = (el) => {
+    Object.assign(el.style, visuallyHiddenStyleProperties);
+};
+
+class RepeatStringText {
+    last = {};
+    usedZwsp = {
+        assertive: false,
+        polite: false,
+    };
+    next(politeness, message) {
+        const useZwsp = this.last[politeness] === message ? !this.usedZwsp[politeness] : false;
+        this.last[politeness] = message;
+        this.usedZwsp[politeness] = useZwsp;
+        return useZwsp ? `\u200B${message}` : message;
+    }
+    reset(politeness) {
+        const channels = politeness
+            ? [politeness]
+            : ['assertive', 'polite'];
+        for (const channel of channels) {
+            this.last[channel] = undefined;
+            this.usedZwsp[channel] = false;
+        }
+    }
+}
+class LiveAnnouncer {
+    node = null;
+    assertiveLog = null;
+    politeLog = null;
+    doc;
+    repeatText = new RepeatStringText();
+    ready = false;
+    pending = [];
+    firstDelayTimerId = null;
+    constructor(doc) {
+        this.doc = doc;
+        if (typeof doc === 'undefined' || !doc.body) {
+            return;
+        }
+        this.node = doc.createElement('div');
+        this.node.setAttribute(LIVE_ANNOUNCER_ATTR, 'true');
+        applyVisuallyHiddenStyles(this.node);
+        this.assertiveLog = this.createLog('assertive');
+        this.node.appendChild(this.assertiveLog);
+        this.politeLog = this.createLog('polite');
+        this.node.appendChild(this.politeLog);
+        doc.body.prepend(this.node);
+    }
+    isAttached() {
+        return Boolean(this.node?.isConnected);
+    }
+    createLog(ariaLive) {
+        const node = this.doc.createElement('div');
+        node.setAttribute('role', 'log');
+        node.setAttribute('aria-live', ariaLive);
+        node.setAttribute('aria-relevant', 'additions');
+        return node;
+    }
+    destroy() {
+        this.cancelFirstDelay();
+        if (!this.node) {
+            return;
+        }
+        const parent = this.node.parentNode;
+        if (parent) {
+            parent.removeChild(this.node);
+        }
+        this.node = null;
+        this.assertiveLog = null;
+        this.politeLog = null;
+        this.repeatText.reset();
+    }
+    schedule(message, politeness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) {
+        if (this.ready || isTestAnnounceEnvironment()) {
+            this.announce(message, politeness, timeout);
+            return;
+        }
+        this.pending.push({ message, politeness, timeout });
+        if (this.firstDelayTimerId != null) {
+            return;
+        }
+        const win = this.doc.defaultView ?? globalThis;
+        this.firstDelayTimerId = win.setTimeout(() => {
+            this.firstDelayTimerId = null;
+            this.ready = true;
+            const queued = this.pending;
+            this.pending = [];
+            for (const item of queued) {
+                this.announce(item.message, item.politeness, item.timeout);
+            }
+        }, FIRST_ANNOUNCE_DELAY_MS);
+    }
+    announce(message, politeness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) {
+        if (!this.node) {
+            return;
+        }
+        const node = this.doc.createElement('div');
+        if (typeof message === 'object') {
+            node.setAttribute('role', 'img');
+            node.setAttribute('aria-labelledby', message['aria-labelledby']);
+        }
+        else {
+            node.textContent = this.repeatText.next(politeness, message);
+        }
+        if (politeness === 'assertive') {
+            this.assertiveLog?.appendChild(node);
+        }
+        else {
+            this.politeLog?.appendChild(node);
+        }
+        if (message !== '') {
+            const win = this.doc.defaultView ?? globalThis;
+            win.setTimeout(() => {
+                node.remove();
+            }, timeout);
+        }
+    }
+    clear(politeness) {
+        this.pending = politeness
+            ? this.pending.filter((item) => item.politeness !== politeness)
+            : [];
+        if (!this.node) {
+            return;
+        }
+        if ((!politeness || politeness === 'assertive') && this.assertiveLog) {
+            this.assertiveLog.innerHTML = '';
+            this.repeatText.reset('assertive');
+        }
+        if ((!politeness || politeness === 'polite') && this.politeLog) {
+            this.politeLog.innerHTML = '';
+            this.repeatText.reset('polite');
+        }
+    }
+    cancelFirstDelay() {
+        if (this.firstDelayTimerId != null) {
+            const win = this.doc.defaultView ?? globalThis;
+            win.clearTimeout(this.firstDelayTimerId);
+            this.firstDelayTimerId = null;
+        }
+        this.pending = [];
+    }
+}
+const LIVEREGION_TIMEOUT_DELAY = 7000;
+const FIRST_ANNOUNCE_DELAY_MS = 100;
+const announcersByDocument = new WeakMap();
+const getLiveAnnouncer = (doc) => {
+    return announcersByDocument.get(doc) ?? null;
+};
+const ensureLiveAnnouncer = (doc) => {
+    const existing = announcersByDocument.get(doc);
+    if (existing?.isAttached()) {
+        return existing;
+    }
+    existing?.destroy();
+    const announcer = new LiveAnnouncer(doc);
+    announcersByDocument.set(doc, announcer);
+    return announcer;
+};
+const clearLiveAnnouncerRegistry = (doc) => {
+    if (doc) {
+        const announcer = announcersByDocument.get(doc);
+        announcer?.destroy();
+        announcersByDocument.delete(doc);
+        return;
+    }
+};
+const isTestAnnounceEnvironment = () => {
+    const globalObj = globalThis;
+    if (typeof globalObj.IS_REACT_ACT_ENVIRONMENT === 'boolean') {
+        return globalObj.IS_REACT_ACT_ENVIRONMENT;
+    }
+    return typeof jest !== 'undefined';
+};
+
+const resolveDocument = (doc) => {
+    if (doc) {
+        return doc;
+    }
+    if (typeof document !== 'undefined') {
+        return document;
+    }
+    return undefined;
+};
+const resolveTimeoutAndDocument = (timeoutOrOptions) => {
+    if (typeof timeoutOrOptions === 'number') {
+        return { timeout: timeoutOrOptions };
+    }
+    if (timeoutOrOptions && typeof timeoutOrOptions === 'object') {
+        return {
+            timeout: timeoutOrOptions.timeout ?? LIVEREGION_TIMEOUT_DELAY,
+            document: timeoutOrOptions.document,
+        };
+    }
+    return { timeout: LIVEREGION_TIMEOUT_DELAY };
+};
+function announce(message, politeness = 'assertive', timeoutOrOptions) {
+    const { timeout, document: optionDocument } = resolveTimeoutAndDocument(timeoutOrOptions);
+    const doc = resolveDocument(optionDocument);
+    if (!doc?.body) {
+        return;
+    }
+    const liveAnnouncer = ensureLiveAnnouncer(doc);
+    liveAnnouncer.schedule(message, politeness, timeout);
+}
+function clearAnnouncer(politeness, doc) {
+    const target = resolveDocument(doc);
+    if (!target) {
+        return;
+    }
+    getLiveAnnouncer(target)?.clear(politeness);
+}
+function destroyAnnouncer(doc) {
+    const target = resolveDocument(doc);
+    if (!target) {
+        return;
+    }
+    clearLiveAnnouncerRegistry(target);
+}
+
+export { LIVEREGION_TIMEOUT_DELAY as L, announce as a, LIVE_ANNOUNCER_ATTR as b, clearAnnouncer as c, destroyAnnouncer as d, applyVisuallyHiddenStyles as e };

package/chunks/twMerge.js

@@ -7,12 +7,16 @@ import { extendTailwindMerge } from 'tailwind-merge';
 const ownerWindow = unstable_ownerWindow;
 
 const ARIA_HIDDEN = 'aria-hidden';
-const REF_COUNT_MAP = '__SUI_ARIA_HIDE_OUTSIDE_REF_COUNT_MAP__';
-const getRefCountMap = (window) => {
-    if (!window[REF_COUNT_MAP]) {
-        window[REF_COUNT_MAP] = new WeakMap();
+const TOP_LAYER_ATTR = 'data-sui-top-layer';
+const alwaysVisibleSelector = `[data-live-announcer="true"], [${TOP_LAYER_ATTR}]`;
+const ARIA_HIDDEN_REF_COUNT_MAP = '__SUI_ARIA_HIDE_OUTSIDE_REF_COUNT_MAP__';
+const INERT_REF_COUNT_MAP = '__SUI_ARIA_HIDE_OUTSIDE_INERT_REF_COUNT_MAP__';
+const getRefCountMap = (window, mechanism) => {
+    const key = mechanism === 'inert' ? INERT_REF_COUNT_MAP : ARIA_HIDDEN_REF_COUNT_MAP;
+    if (!window[key]) {
+        window[key] = new WeakMap();
     }
-    return window[REF_COUNT_MAP];
+    return window[key];
 };
 const OBSERVER_STACK = '__SUI_ARIA_HIDE_OUTSIDE_OBSERVER_STACK__';
 const getObserverStack = (window) => {
@@ -21,109 +25,332 @@ const getObserverStack = (window) => {
     }
     return window[OBSERVER_STACK];
 };
-const isHTMLOrSVGElement = (node) => {
-    return 'dataset' in node;
-};
 const isElement = (node) => {
-    return node.nodeType === Node.ELEMENT_NODE;
+    return (typeof node === 'object' &&
+        node != null &&
+        'nodeType' in node &&
+        node.nodeType === 1);
+};
+const isAlwaysVisibleNode = (node) => {
+    return (node.getAttribute('data-live-announcer') === 'true' ||
+        node.hasAttribute(TOP_LAYER_ATTR));
 };
-const ariaHideOutside = (targets, root = document.body) => {
-    const currentWindow = ownerWindow(root);
+const createAriaHideOutsideController = (targets, options = {}) => {
+    const isLegacyRoot = isElement(options);
+    const configuredRoot = isLegacyRoot
+        ? options
+        : options.root;
+    const currentWindow = ownerWindow(configuredRoot ?? targets[0]);
     if (!currentWindow) {
-        return () => { };
+        return {
+            addTarget: () => { },
+            removeTarget: () => { },
+            dispose: () => { },
+        };
     }
+    const root = configuredRoot ?? currentWindow.document.body;
+    const shouldUseInert = !isLegacyRoot &&
+        options.shouldUseInert &&
+        'inert' in currentWindow.HTMLElement.prototype;
     const visibleNodes = new Set(targets);
+    const targetNodes = new Set(targets);
+    const automaticVisibleNodes = new Set();
     const hiddenNodes = new Set();
-    const refCountMap = getRefCountMap(currentWindow);
-    const observerStack = getObserverStack(currentWindow);
-    const walker = currentWindow.document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-        acceptNode(node) {
-            if (isHTMLOrSVGElement(node) &&
-                node.dataset['liveAnnouncer'] === 'true') {
-                visibleNodes.add(node);
+    const targetPaths = new Map();
+    const getTargetPath = (target) => {
+        const path = [];
+        let node = target;
+        while (node && root.contains(node)) {
+            path.push(node);
+            if (node === root) {
+                break;
             }
-            if (visibleNodes.has(node) ||
-                (node.parentElement &&
-                    hiddenNodes.has(node.parentElement) &&
-                    node.parentElement.getAttribute('role') !== 'row')) {
-                return NodeFilter.FILTER_REJECT;
-            }
-            if (targets.some((target) => node.contains(target))) {
-                return NodeFilter.FILTER_SKIP;
-            }
-            return NodeFilter.FILTER_ACCEPT;
-        },
-    });
+            node = node.parentElement;
+        }
+        return path;
+    };
+    for (const target of targets) {
+        targetPaths.set(target, getTargetPath(target));
+    }
+    const observerStack = getObserverStack(currentWindow);
+    const getHideMechanism = (node) => shouldUseInert && node instanceof currentWindow.HTMLElement
+        ? 'inert'
+        : 'aria-hidden';
+    const getHidden = (node, mechanism) => mechanism === 'inert'
+        ? node.inert
+        : node.getAttribute(ARIA_HIDDEN) === 'true';
+    const setHidden = (node, mechanism, hidden) => {
+        if (mechanism === 'inert') {
+            node.inert = hidden;
+        }
+        else if (hidden) {
+            node.setAttribute(ARIA_HIDDEN, 'true');
+        }
+        else {
+            node.removeAttribute(ARIA_HIDDEN);
+        }
+    };
+    const restoreHiddenNode = (node) => {
+        if (!hiddenNodes.delete(node)) {
+            return;
+        }
+        const mechanism = getHideMechanism(node);
+        const refCountMap = getRefCountMap(currentWindow, mechanism);
+        const count = refCountMap.get(node);
+        if (typeof count !== 'number') {
+            return;
+        }
+        if (count === 1) {
+            setHidden(node, mechanism, false);
+            refCountMap.delete(node);
+        }
+        else {
+            refCountMap.set(node, count - 1);
+        }
+    };
     const hide = (node) => {
+        if (hiddenNodes.has(node)) {
+            return;
+        }
+        const mechanism = getHideMechanism(node);
+        const refCountMap = getRefCountMap(currentWindow, mechanism);
         const refCount = refCountMap.get(node) ?? 0;
-        if (node.getAttribute(ARIA_HIDDEN) === 'true' && refCount === 0) {
+        if (getHidden(node, mechanism) && refCount === 0) {
             return;
         }
         if (refCount === 0) {
-            node.setAttribute(ARIA_HIDDEN, 'true');
+            setHidden(node, mechanism, true);
         }
         hiddenNodes.add(node);
         refCountMap.set(node, refCount + 1);
     };
+    const addAlwaysVisibleNode = (node) => {
+        automaticVisibleNodes.add(node);
+        visibleNodes.add(node);
+    };
+    const addAlwaysVisibleNodes = (node) => {
+        if (isAlwaysVisibleNode(node)) {
+            addAlwaysVisibleNode(node);
+        }
+        for (const alwaysVisibleNode of node.querySelectorAll(alwaysVisibleSelector)) {
+            addAlwaysVisibleNode(alwaysVisibleNode);
+        }
+    };
+    const removeDisconnectedAlwaysVisibleNodes = (node) => {
+        for (const alwaysVisibleNode of automaticVisibleNodes) {
+            if (!node.contains(alwaysVisibleNode) ||
+                root.contains(alwaysVisibleNode)) {
+                continue;
+            }
+            automaticVisibleNodes.delete(alwaysVisibleNode);
+            if (!targetNodes.has(alwaysVisibleNode)) {
+                visibleNodes.delete(alwaysVisibleNode);
+            }
+        }
+    };
+    const containsNode = (nodes, node) => {
+        for (const candidate of nodes) {
+            if (candidate.contains(node)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const containsVisibleNode = (node, nodes) => {
+        for (const visibleNode of nodes) {
+            if (node.contains(visibleNode)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const isCoveredByHiddenNode = (node) => {
+        let ancestor = node.parentElement;
+        while (ancestor && root.contains(ancestor)) {
+            if (hiddenNodes.has(ancestor)) {
+                return !(ancestor === node.parentElement &&
+                    ancestor.getAttribute('role') === 'row');
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return false;
+    };
+    const shouldAdoptHiddenNode = (node) => {
+        return (root.contains(node) &&
+            !hiddenNodes.has(node) &&
+            !containsNode(visibleNodes, node) &&
+            !containsVisibleNode(node, visibleNodes) &&
+            !isCoveredByHiddenNode(node));
+    };
+    const acceptNode = (node) => {
+        if (visibleNodes.has(node) ||
+            (node.parentElement &&
+                hiddenNodes.has(node.parentElement) &&
+                node.parentElement.getAttribute('role') !== 'row')) {
+            return currentWindow.NodeFilter.FILTER_REJECT;
+        }
+        if (containsVisibleNode(node, visibleNodes)) {
+            return currentWindow.NodeFilter.FILTER_SKIP;
+        }
+        return currentWindow.NodeFilter.FILTER_ACCEPT;
+    };
+    const walk = (walkRoot, includeRoot) => {
+        addAlwaysVisibleNodes(walkRoot);
+        const rootFilter = acceptNode(walkRoot);
+        if (includeRoot && rootFilter === currentWindow.NodeFilter.FILTER_ACCEPT) {
+            hide(walkRoot);
+        }
+        if (rootFilter === currentWindow.NodeFilter.FILTER_REJECT) {
+            return;
+        }
+        const walker = currentWindow.document.createTreeWalker(walkRoot, currentWindow.NodeFilter.SHOW_ELEMENT, { acceptNode });
+        let node = walker.nextNode();
+        while (node != null) {
+            hide(node);
+            node = walker.nextNode();
+        }
+    };
+    const addTarget = (target) => {
+        if (!root.contains(target)) {
+            return;
+        }
+        targetNodes.add(target);
+        visibleNodes.add(target);
+        const path = getTargetPath(target);
+        const restoredAncestorIndexes = [];
+        for (let index = 0; index < path.length; index++) {
+            if (index > 0 && hiddenNodes.has(path[index])) {
+                restoredAncestorIndexes.push(index);
+            }
+            restoreHiddenNode(path[index]);
+        }
+        targetPaths.set(target, path);
+        for (const index of restoredAncestorIndexes) {
+            const ancestor = path[index];
+            const pathChild = path[index - 1];
+            for (const child of ancestor.children) {
+                if (child !== pathChild) {
+                    walk(child, true);
+                }
+            }
+        }
+    };
+    const removeTarget = (target) => {
+        if (!targetNodes.delete(target)) {
+            return;
+        }
+        if (!automaticVisibleNodes.has(target)) {
+            visibleNodes.delete(target);
+        }
+        const targetPath = targetPaths.get(target);
+        targetPaths.delete(target);
+        const connectedAncestor = targetPath?.find((node) => root.contains(node));
+        if (!connectedAncestor) {
+            return;
+        }
+        let walkRoot = connectedAncestor;
+        while (walkRoot.parentElement &&
+            walkRoot.parentElement !== root &&
+            !containsVisibleNode(walkRoot.parentElement, visibleNodes)) {
+            walkRoot = walkRoot.parentElement;
+        }
+        walk(walkRoot, true);
+    };
     if (observerStack.length) {
         observerStack[observerStack.length - 1].disconnect();
     }
-    let node = walker.nextNode();
-    while (node != null) {
-        hide(node);
-        node = walker.nextNode();
-    }
-    const observer = new currentWindow.MutationObserver((changes) => {
+    walk(root, false);
+    const processChanges = (changes) => {
         for (const change of changes) {
-            if (change.type !== 'childList' || change.addedNodes.length === 0) {
+            if (change.type !== 'childList') {
                 continue;
             }
-            if (![...visibleNodes, ...hiddenNodes].some((node) => node.contains(change.target))) {
+            for (const node of change.removedNodes) {
+                if (isElement(node)) {
+                    removeDisconnectedAlwaysVisibleNodes(node);
+                }
+            }
+            if (!change.target.isConnected || change.addedNodes.length === 0) {
+                continue;
+            }
+            if (!containsNode(visibleNodes, change.target) &&
+                !containsNode(hiddenNodes, change.target)) {
                 for (const node of change.addedNodes) {
-                    if (isHTMLOrSVGElement(node) &&
-                        node.dataset['liveAnnouncer'] === 'true') {
-                        visibleNodes.add(node);
-                    }
-                    else if (isElement(node)) {
-                        hide(node);
+                    if (isElement(node) && root.contains(node)) {
+                        walk(node, true);
                     }
                 }
             }
         }
-    });
+    };
+    const observer = new currentWindow.MutationObserver(processChanges);
     observer.observe(root, { childList: true, subtree: true });
     const observerWrapper = {
         observe() {
             observer.observe(root, { childList: true, subtree: true });
         },
+        resume(releasedHiddenNodes, releasedAlwaysVisibleNodes) {
+            for (const node of releasedAlwaysVisibleNodes) {
+                if (root.contains(node)) {
+                    addAlwaysVisibleNode(node);
+                }
+            }
+            for (const node of releasedHiddenNodes) {
+                if (shouldAdoptHiddenNode(node)) {
+                    hide(node);
+                }
+            }
+            observerWrapper.observe();
+        },
         disconnect() {
             observer.disconnect();
         },
     };
     observerStack.push(observerWrapper);
-    return () => {
-        observer.disconnect();
-        for (const node of hiddenNodes) {
-            const count = refCountMap.get(node);
-            if (count === 1) {
-                node.removeAttribute(ARIA_HIDDEN);
-                refCountMap.delete(node);
-            }
-            else if (typeof count === 'number') {
-                refCountMap.set(node, count - 1);
-            }
+    let isCleanedUp = false;
+    const dispose = () => {
+        if (isCleanedUp) {
+            return;
         }
+        isCleanedUp = true;
+        const pendingChanges = observer.takeRecords();
+        observer.disconnect();
+        processChanges(pendingChanges);
         if (observerWrapper === observerStack[observerStack.length - 1]) {
             observerStack.pop();
-            if (observerStack.length) {
-                observerStack[observerStack.length - 1].observe();
+            const previousObserver = observerStack[observerStack.length - 1];
+            if (previousObserver?.resume) {
+                previousObserver.resume(hiddenNodes, automaticVisibleNodes);
+            }
+            else {
+                previousObserver?.observe();
             }
         }
         else {
             observerStack.splice(observerStack.indexOf(observerWrapper), 1);
         }
+        for (const node of [...hiddenNodes]) {
+            restoreHiddenNode(node);
+        }
+        targetPaths.clear();
+        targetNodes.clear();
+        automaticVisibleNodes.clear();
+    };
+    return {
+        addTarget: (target) => {
+            if (!isCleanedUp) {
+                addTarget(target);
+            }
+        },
+        removeTarget: (target) => {
+            if (!isCleanedUp) {
+                removeTarget(target);
+            }
+        },
+        dispose,
     };
 };
+const ariaHideOutside = (targets, options = {}) => createAriaHideOutsideController(targets, options).dispose;
 
 const combineProps = (baseProps, newProps, coverPropKeys) => innerCombineProps({
     baseProps,
@@ -273,4 +500,4 @@ const twMerge = extendTailwindMerge({
     },
 });
 
-export { ariaHideOutside as a, combineClasses as b, combineProps as c, getRefElement as g, isRef as i, logInDev as l, ownerWindow as o, twMerge as t };
+export { ariaHideOutside as a, combineClasses as b, combineProps as c, createAriaHideOutsideController as d, getRefElement as g, isRef as i, logInDev as l, ownerWindow as o, twMerge as t };

package/hooks.js

@@ -1,11 +1,12 @@
 import { unstable_useEventCallback, unstable_ownerDocument, unstable_Timeout, unstable_useForkRef } from '@mui/utils';
 export { unstable_useControlled as useControlled } from '@mui/utils';
 import * as React from 'react';
-import { useState, useRef, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
 import { useWindowContext, useResponsiveContext, getMatchDetail } from './contexts.js';
+import { b as LIVE_ANNOUNCER_ATTR, e as applyVisuallyHiddenStyles, a as announce } from './chunks/index.js';
 import uniqueId from 'lodash/uniqueId';
 import { useButton as useButton$1 } from '@mui/base/useButton';
-import { c as combineProps, a as ariaHideOutside, g as getRefElement, l as logInDev, o as ownerWindow } from './chunks/twMerge.js';
+import { c as combineProps, d as createAriaHideOutsideController, g as getRefElement, l as logInDev, o as ownerWindow } from './chunks/twMerge.js';
 import './config.js';
 import 'lodash/omit';
 import 'lodash/pick';
@@ -128,7 +129,7 @@ function useResultRef(cb) {
 }
 
 const DEFAULT_PREFIX = 'spring-id-';
-function useId(id, prefixMode) {
+function useLegacyId(id, prefixMode) {
     const { current: resultId } = useResultRef(() => {
         if (id) {
             if (prefixMode) {
@@ -140,27 +141,40 @@ function useId(id, prefixMode) {
     });
     return resultId;
 }
+const reactUseId = React__default.useId;
+function useReactId(id, prefixMode) {
+    const reactId = reactUseId();
+    if (id) {
+        return prefixMode ? `${id}-${reactId}` : id;
+    }
+    return `${DEFAULT_PREFIX}${reactId}`;
+}
+const useId = reactUseId ? useReactId : useLegacyId;
 
-const visuallyHiddenStyles = `
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`;
-const useAnnouncer = (id) => {
+const isUseAnnouncerOptions = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+function useAnnouncer(idOrOptions, maybeOptions) {
+    const id = typeof idOrOptions === 'string' ? idOrOptions : undefined;
+    const options = isUseAnnouncerOptions(idOrOptions)
+        ? idOrOptions
+        : maybeOptions;
+    const politeness = options?.politeness ?? 'assertive';
     const _id = useId(id ? `rc-announcer-${id}` : 'rc-announcer', !id);
     const { document: targetDocument, externalWindow, globalThis: contextGlobal, } = useWindowContext();
     const win = externalWindow ?? contextGlobal;
     const ref = useRef(null);
     const lastMessageRef = useRef();
     const pendingTimerRef = useRef(null);
+    const pendingRemovalRef = useRef(null);
     const clearPendingTimer = useCallback(() => {
         pendingTimerRef.current?.();
         pendingTimerRef.current = null;
     }, []);
+    const clearPendingRemoval = useCallback(() => {
+        pendingRemovalRef.current?.();
+        pendingRemovalRef.current = null;
+    }, []);
     useEffect(() => {
         const currentDocument = targetDocument ??
             (typeof contextGlobal.document !== 'undefined'
@@ -169,18 +183,30 @@ const useAnnouncer = (id) => {
         if (!currentDocument?.body) {
             return undefined;
         }
-        const el = currentDocument.createElement('div');
-        ref.current = el;
-        el.id = _id;
-        el.setAttribute('aria-live', 'assertive');
-        el.setAttribute('aria-atomic', 'true');
-        el.setAttribute('aria-hidden', 'false');
-        el.setAttribute('data-live-announcer', 'true');
-        el.setAttribute('style', visuallyHiddenStyles);
-        currentDocument.body.appendChild(el);
+        const currentEl = ref.current;
+        const canReuseCurrentEl = currentEl?.ownerDocument === currentDocument &&
+            currentEl.id === _id &&
+            currentDocument.body.contains(currentEl);
+        const el = canReuseCurrentEl
+            ? currentEl
+            : currentDocument.createElement('div');
+        if (canReuseCurrentEl) {
+            clearPendingRemoval();
+            el.setAttribute('aria-live', politeness);
+        }
+        else {
+            ref.current = el;
+            el.id = _id;
+            el.setAttribute('aria-live', politeness);
+            el.setAttribute('aria-atomic', 'true');
+            el.setAttribute('aria-hidden', 'false');
+            el.setAttribute(LIVE_ANNOUNCER_ATTR, 'true');
+            applyVisuallyHiddenStyles(el);
+            currentDocument.body.appendChild(el);
+        }
         return () => {
             clearPendingTimer();
-            win.setTimeout(() => {
+            const timerId = win.setTimeout(() => {
                 const body = currentDocument.body;
                 if (body.contains(el)) {
                     body.removeChild(el);
@@ -188,9 +214,24 @@ const useAnnouncer = (id) => {
                 if (el === ref.current) {
                     ref.current = null;
                 }
+                if (pendingRemovalRef.current === cancelRemoval) {
+                    pendingRemovalRef.current = null;
+                }
             });
+            const cancelRemoval = () => {
+                win.clearTimeout(timerId);
+            };
+            pendingRemovalRef.current = cancelRemoval;
         };
-    }, [_id, targetDocument, contextGlobal, win, clearPendingTimer]);
+    }, [
+        _id,
+        politeness,
+        targetDocument,
+        contextGlobal,
+        win,
+        clearPendingTimer,
+        clearPendingRemoval,
+    ]);
     return useCallback((message) => {
         const el = ref.current;
         if (!el)
@@ -221,7 +262,20 @@ const useAnnouncer = (id) => {
         };
         pendingTimerRef.current = cancelTimer;
     }, [clearPendingTimer, win]);
-};
+}
+
+function useGlobalAnnouncer() {
+    const { document: targetDocument } = useWindowContext();
+    return useCallback((message, politeness = 'assertive', timeoutOrOptions) => {
+        const timeout = typeof timeoutOrOptions === 'number'
+            ? timeoutOrOptions
+            : timeoutOrOptions?.timeout;
+        announce(message, politeness, {
+            timeout,
+            document: targetDocument,
+        });
+    }, [targetDocument]);
+}
 
 function useButton(parameters) {
     const muiButtonResult = useButton$1(parameters);
@@ -241,18 +295,42 @@ function useButton(parameters) {
 }
 
 const useAriaHideOutside = (props = {}) => {
-    const { enable = true } = props;
-    const { externalWindow, document } = useWindowContext();
+    const { enable = true, shouldUseInert = false } = props;
+    const { document } = useWindowContext();
     const ariaHideOutsideRef = useRef(null);
-    useEffect(() => {
+    const branchNodesRef = useRef(new Set());
+    const controllerRef = useRef();
+    const setAriaHideOutsideTarget = useCallback((node, isActive) => {
+        if (isActive) {
+            branchNodesRef.current.add(node);
+            controllerRef.current?.addTarget(node);
+        }
+        else {
+            branchNodesRef.current.delete(node);
+            controllerRef.current?.removeTarget(node);
+        }
+    }, []);
+    useLayoutEffect(() => {
         if (enable && ariaHideOutsideRef.current) {
-            return ariaHideOutside([ariaHideOutsideRef.current], document?.body);
+            const controller = createAriaHideOutsideController([ariaHideOutsideRef.current, ...branchNodesRef.current], {
+                root: document?.body,
+                shouldUseInert,
+            });
+            controllerRef.current = controller;
+            return () => {
+                if (controllerRef.current === controller) {
+                    controllerRef.current = undefined;
+                }
+                controller.dispose();
+            };
         }
+        controllerRef.current = undefined;
         return undefined;
-    }, [enable, externalWindow, document?.body]);
+    }, [enable, shouldUseInert, document?.body]);
     return {
         ariaHideOutsideRef: ariaHideOutsideRef,
         ariaHideEnabled: enable,
+        setAriaHideOutsideTarget,
     };
 };
 
@@ -263,9 +341,9 @@ const useAudio = (init) => {
         return audio;
     });
     useEffect(() => {
+        const audio = audioRef.current;
         return () => {
-            audioRef.current.srcObject = null;
-            audioRef.current = null;
+            audio.srcObject = null;
         };
     }, []);
     return audioRef.current;
@@ -1099,13 +1177,14 @@ const useKeyboardMoveFocus = ({ infinite, options = [], focusedIndexRef, onFocus
 };
 
 const MOVE_ATTR_KEY = 'data-move-focused';
+const MOVE_INDEX_ATTR_KEY = 'data-move-index';
 const useOnlyOneFocusable = ({ focusedIndexRef, containerRef, }) => {
-    const moveFocusedId = useId(MOVE_ATTR_KEY, true);
-    const getIndexElm = (toIndex) => containerRef.current?.querySelector(`[${moveFocusedId}="${toIndex}"]`);
+    const moveFocusedId = useId();
+    const getIndexElm = (toIndex) => containerRef.current?.querySelector(`[${MOVE_ATTR_KEY}="${moveFocusedId}"][${MOVE_INDEX_ATTR_KEY}="${toIndex}"]`);
     const setIndexTabIndex = (toIndex) => {
         const toElm = getIndexElm(toIndex);
         if (toElm) {
-            const prevElm = containerRef.current?.querySelector(`[${moveFocusedId}][tabindex="0"]`);
+            const prevElm = containerRef.current?.querySelector(`[${MOVE_ATTR_KEY}="${moveFocusedId}"][tabindex="0"]`);
             prevElm?.setAttribute('tabindex', '-1');
             toElm.setAttribute('tabindex', '0');
         }
@@ -1120,13 +1199,14 @@ const useOnlyOneFocusable = ({ focusedIndexRef, containerRef, }) => {
         setIndexTabIndex,
         getItemProps: (index, options) => {
             return combineProps({
-                [moveFocusedId]: index,
+                [MOVE_ATTR_KEY]: moveFocusedId,
+                [MOVE_INDEX_ATTR_KEY]: String(index),
                 tabIndex: index === focusedIndexRef.current ? 0 : -1,
                 onFocus: () => {
                     focusedIndexRef.current = index;
                     setIndexTabIndex(index);
                 },
-            }, options);
+            }, options ?? {});
         },
     };
 };
@@ -1942,4 +2022,4 @@ const useVirtuosoExternalWindow = () => {
     return undefined;
 };
 
-export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, useVirtuosoExternalWindow, visuallyHiddenStyles };
+export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalAnnouncer, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, useVirtuosoExternalWindow };

package/index.js

@@ -1,7 +1,8 @@
 export { configure, rcConfiguration } from './config.js';
 export { RcResponsiveContext, WindowContext, breakpointList, getMatchDetail, useResponsiveContext, useWindowContext } from './contexts.js';
-export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, useVirtuosoExternalWindow, visuallyHiddenStyles } from './hooks.js';
+export { createGlobalListener, globalListenerEventMap, isElmEqualOrContain, isTouchEvent, moveIndexInTwoDimension, teardown, useA11yKeyEvent, useActive, useAnnouncer, useAriaHideOutside, useAudio, useBodyScrollLock, useButton, useChange, useClickAway, useDebounce, useDepsChange, useEventCallback, useEventListener, useEver, useFocusVisible, useFontLoaded, useForceUpdate, useForkRef, useGlobalAnnouncer, useGlobalListener, useHiddenTabindex, useHover, useHoverDirty, useId, useImgLoaded, useInterval, useIsFocusVisible, useKeyDownOnce, useKeyboardMoveFocus, useLongPress, useMountState, useOnLayoutReRender, useOnReRender, useOnlyOneFocusable, useOverflow, usePrevious, useRefState, useResizeObserver, useResponsiveMatch, useResultRef, useRetry, useSleep, useTabOut, useTestRunnerDetection, useThrottle, useTimeout, useTouchMouseEvent, useVirtuosoExternalWindow } from './hooks.js';
 export { unstable_ownerDocument as ownerDocument, unstable_useControlled as useControlled } from '@mui/utils';
+export { L as LIVEREGION_TIMEOUT_DELAY, a as announce, c as clearAnnouncer, d as destroyAnnouncer } from './chunks/index.js';
 export { a11yKeyboard, capitalize, checkDefaultPrevented, checkElementName, clearWindowSelection, getSelectionPosition, getTitle, globalStateClasses, isDeleteKeyboardEvent, isSuiElement, isUrl, isWebKit154, omit, outerSize, pick, preloadImg, removeClassName, runKeyHandler, setSelectionPosition, useClasses } from './utils.js';
 export { a as ariaHideOutside, b as combineClasses, c as combineProps, g as getRefElement, i as isRef, l as logInDev, o as ownerWindow, t as twMerge } from './chunks/twMerge.js';
 import 'react';

package/liveAnnouncer.js

@@ -0,0 +1 @@
+export { L as LIVEREGION_TIMEOUT_DELAY, a as announce, c as clearAnnouncer, d as destroyAnnouncer } from './chunks/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-base",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "author": "RingCentral",
   "description": "Core utilities, hooks, and foundational functionality for Spring UI components, providing essential building blocks for React applications",
   "main": "./index.js",
@@ -16,9 +16,9 @@
     "type-fest": "^2.12.2"
   },
   "peerDependencies": {
-    "@types/react": ">=17.0.3",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "@types/react": "^17.0.3 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "sideEffects": false,
   "license": "MIT",

package/src/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useA11yKeyEvent';
 export * from './useActive';
 export * from './useAnnouncer';
+export * from './useGlobalAnnouncer';
 export * from './useButton';
 export * from './useAriaHideOutside';
 export * from './useAudio';

package/src/hooks/useAnnouncer/useAnnouncer.d.ts

@@ -1,2 +1,5 @@
-export declare const visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
-export declare const useAnnouncer: (id?: string) => (message?: string) => void;
+import type { AnnouncerPoliteness } from '../../liveAnnouncer';
+export type UseAnnouncerOptions = {
+    politeness?: AnnouncerPoliteness;
+};
+export declare function useAnnouncer(idOrOptions?: string | UseAnnouncerOptions, maybeOptions?: UseAnnouncerOptions): (message?: string) => void;

package/src/hooks/useAriaHideOutside/useAriaHideOutside.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 export type UseAriaHideOutsideProps = {
     enable?: boolean;
+    shouldUseInert?: boolean;
 };
 export declare const useAriaHideOutside: (props?: UseAriaHideOutsideProps) => {
     ariaHideOutsideRef: import("react").RefObject<HTMLElement>;
     ariaHideEnabled: boolean;
+    setAriaHideOutsideTarget: (node: HTMLElement, isActive: boolean) => void;
 };

package/src/hooks/useGlobalAnnouncer/index.d.ts

@@ -0,0 +1 @@
+export * from './useGlobalAnnouncer';

package/src/hooks/useGlobalAnnouncer/useGlobalAnnouncer.d.ts

@@ -0,0 +1,5 @@
+import type { AnnounceMessage, AnnouncerPoliteness } from '../../liveAnnouncer/types';
+export type GlobalAnnounceOptions = {
+    timeout?: number;
+};
+export declare function useGlobalAnnouncer(): (message: AnnounceMessage, politeness?: AnnouncerPoliteness, timeoutOrOptions?: number | GlobalAnnounceOptions) => void;

package/src/hooks/useId/useId.d.ts

@@ -1 +1,3 @@
-export declare function useId(id?: string, prefixMode?: boolean): string;
+declare function useReactId(id?: string, prefixMode?: boolean): string;
+export declare const useId: typeof useReactId;
+export {};

package/src/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.d.ts

@@ -10,7 +10,7 @@ export type UseKeyboardMoveFocusParams<T> = {
     endSearchDebounceTime?: number;
 } & Pick<MoveIndexInTwoDimensionalOptions, 'infinite'>;
 export declare const useKeyboardMoveFocus: <T>({ infinite, options, focusedIndexRef, onFocusedIndexChange, getOptionDisabled, getOptionSearchText, columns, endSearchDebounceTime, }: UseKeyboardMoveFocusParams<T>) => {
-    getPrevFocusableOption: (index?: number, isInfinite?: any) => number;
-    getNextFocusableOption: (index?: number, isInfinite?: any) => number;
+    getPrevFocusableOption: (index?: number, isInfinite?: boolean) => number;
+    getNextFocusableOption: (index?: number, isInfinite?: boolean) => number;
     onKeyFocusedIndexHandle: (event: React.KeyboardEvent<any>) => void;
 };

package/src/hooks/useKeyboardMoveFocus/useOnlyOneFocusable.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
+import type { HTMLDataAttribute } from '../../typings';
 export type UseOnlyOneFocusableParams = {
     focusedIndexRef: React.MutableRefObject<number>;
     containerRef: React.RefObject<HTMLElement>;
 };
+type MoveFocusedItemProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & HTMLDataAttribute;
 export declare const useOnlyOneFocusable: ({ focusedIndexRef, containerRef, }: UseOnlyOneFocusableParams) => {
     moveFocusedId: string;
     focusIndex: (toIndex: number) => void;
     setIndexTabIndex: (toIndex: number) => void;
-    getItemProps: (index: number, options?: Omit<React.HTMLAttributes<HTMLElement>, 'children'>) => Omit<import("react").HTMLAttributes<HTMLElement>, "children">;
+    getItemProps: (index: number, options?: Omit<React.HTMLAttributes<HTMLElement>, 'children'>) => NonNullable<MoveFocusedItemProps>;
 };
+export {};

package/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from './config';
 export * from './contexts';
 export * from './hooks';
+export * from './liveAnnouncer';
 export * from './typings';
 export * from './utils';

package/src/liveAnnouncer/LiveAnnouncer.d.ts

@@ -0,0 +1,25 @@
+import type { AnnounceMessage, AnnouncerPoliteness } from './types';
+export declare class LiveAnnouncer {
+    node: HTMLElement | null;
+    assertiveLog: HTMLElement | null;
+    politeLog: HTMLElement | null;
+    private readonly doc;
+    private readonly repeatText;
+    private ready;
+    private pending;
+    private firstDelayTimerId;
+    constructor(doc: Document);
+    isAttached(): boolean;
+    createLog(ariaLive: AnnouncerPoliteness): HTMLElement;
+    destroy(): void;
+    schedule(message: AnnounceMessage, politeness?: AnnouncerPoliteness, timeout?: number): void;
+    announce(message: AnnounceMessage, politeness?: AnnouncerPoliteness, timeout?: number): void;
+    clear(politeness?: AnnouncerPoliteness): void;
+    private cancelFirstDelay;
+}
+export declare const LIVEREGION_TIMEOUT_DELAY = 7000;
+export declare const FIRST_ANNOUNCE_DELAY_MS = 100;
+export declare const getLiveAnnouncer: (doc: Document) => LiveAnnouncer | null;
+export declare const ensureLiveAnnouncer: (doc: Document) => LiveAnnouncer;
+export declare const clearLiveAnnouncerRegistry: (doc?: Document) => void;
+export declare const isTestAnnounceEnvironment: () => boolean;

package/src/liveAnnouncer/announce.d.ts

@@ -0,0 +1,4 @@
+import type { AnnounceMessage, AnnounceOptions, AnnouncerPoliteness } from './types';
+export declare function announce(message: AnnounceMessage, politeness?: AnnouncerPoliteness, timeoutOrOptions?: number | AnnounceOptions): void;
+export declare function clearAnnouncer(politeness?: AnnouncerPoliteness, doc?: Document): void;
+export declare function destroyAnnouncer(doc?: Document): void;

package/src/liveAnnouncer/index.d.ts

@@ -0,0 +1,3 @@
+export type { AnnounceMessage, AnnounceOptions, AnnouncerPoliteness, } from './types';
+export { announce, clearAnnouncer, destroyAnnouncer } from './announce';
+export { LIVEREGION_TIMEOUT_DELAY } from './LiveAnnouncer';

package/src/liveAnnouncer/types.d.ts

@@ -0,0 +1,8 @@
+export type AnnouncerPoliteness = 'assertive' | 'polite';
+export type AnnounceMessage = string | {
+    'aria-labelledby': string;
+};
+export type AnnounceOptions = {
+    timeout?: number;
+    document?: Document;
+};

package/src/liveAnnouncer/visuallyHidden.d.ts

@@ -0,0 +1,3 @@
+export declare const LIVE_ANNOUNCER_ATTR = "data-live-announcer";
+export declare const visuallyHiddenStyleProperties: Partial<CSSStyleDeclaration>;
+export declare const applyVisuallyHiddenStyles: (el: HTMLElement) => void;

package/src/utils/ariaHideOutside.d.ts

@@ -1 +1,11 @@
-export declare const ariaHideOutside: (targets: Element[], root?: HTMLElement) => () => void;
+export type AriaHideOutsideController = {
+    addTarget: (target: Element) => void;
+    removeTarget: (target: Element) => void;
+    dispose: () => void;
+};
+export type AriaHideOutsideOptions = {
+    root?: Element;
+    shouldUseInert?: boolean;
+};
+export declare const createAriaHideOutsideController: (targets: Element[], options?: AriaHideOutsideOptions | Element) => AriaHideOutsideController;
+export declare const ariaHideOutside: (targets: Element[], options?: AriaHideOutsideOptions | Element) => () => void;

package/src/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './a11yKeyboardCode';
-export * from './ariaHideOutside';
+export { ariaHideOutside } from './ariaHideOutside';
+export type { AriaHideOutsideOptions } from './ariaHideOutside';
 export * from './capitalize';
 export * from './checkDefaultPrevented';
 export * from './checkElementName';