@fluentui/react-aria 9.7.3 → 9.8.1

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-aria
 
-This log was last generated on Thu, 18 Jan 2024 14:19:09 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Jan 2024 23:12:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.8.1)
+
+Tue, 30 Jan 2024 23:12:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.8.0..@fluentui/react-aria_v9.8.1)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.18.0 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
+- Bump @fluentui/react-utilities to v9.18.0 ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by beachball)
+
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.8.0)
+
+Tue, 23 Jan 2024 15:10:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.7.3..@fluentui/react-aria_v9.8.0)
+
+### Minor changes
+
+- feat: add AriaLiveAnnouncer component ([PR #30345](https://github.com/microsoft/fluentui/pull/30345) by olfedias@microsoft.com)
+- Bump @fluentui/react-tabster to v9.17.4 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+
+### Patches
+
+- chore: import UnionToIntersection from react-utilities instead of redeclaring it locally ([PR #30317](https://github.com/microsoft/fluentui/pull/30317) by bernardo.sunderhus@gmail.com)
+
 ## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.7.3)
 
-Thu, 18 Jan 2024 14:19:09 GMT 
+Thu, 18 Jan 2024 14:25:03 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.7.2..@fluentui/react-aria_v9.7.3)
 
 ### Patches

package/dist/index.d.ts

@@ -1,7 +1,9 @@
+import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
 import type { Slot } from '@fluentui/react-utilities';
+import type { UnionToIntersection } from '@fluentui/react-utilities';
 
 /**
  * Applied to the active descendant when the user is navigating with keyboard
@@ -69,6 +71,28 @@ export declare type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' |
 
 export declare type ARIAButtonType = 'button' | 'a' | 'div';
 
+declare type AriaLiveAnnounceFn = AnnounceContextValue['announce'];
+
+/**
+ * A sample implementation of a component that manages aria live announcements.
+ */
+export declare const AriaLiveAnnouncer: React_2.FC<AriaLiveAnnouncerProps>;
+
+declare type AriaLiveAnnouncerContextValues = {
+    announce: {
+        announce: AriaLiveAnnounceFn;
+    };
+};
+
+export declare type AriaLiveAnnouncerProps = {
+    children?: React_2.ReactNode;
+};
+
+export declare type AriaLiveAnnouncerState = {
+    announce: AriaLiveAnnounceFn;
+    children?: React_2.ReactNode;
+};
+
 declare interface IteratorOptions {
     /**
      * When passive, the active descendant is changed
@@ -77,7 +101,7 @@ declare interface IteratorOptions {
     passive?: boolean;
 }
 
-declare type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
+export declare const renderAriaLiveAnnouncer_unstable: (state: AriaLiveAnnouncerState, contextValues: AriaLiveAnnouncerContextValues) => JSX.Element;
 
 export declare function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(options: ActiveDescendantOptions): UseActiveDescendantReturn<TActiveParentElement, TListboxElement>;
 
@@ -138,4 +162,8 @@ export declare function useARIAButtonProps<Type extends ARIAButtonType, Props ex
  */
 export declare const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps>;
 
+export declare const useAriaLiveAnnouncer_unstable: (props: AriaLiveAnnouncerProps) => AriaLiveAnnouncerState;
+
+export declare function useAriaLiveAnnouncerContextValues_unstable(state: AriaLiveAnnouncerState): AriaLiveAnnouncerContextValues;
+
 export { }

package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';
+import { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';
+import { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';
+/**
+ * A sample implementation of a component that manages aria live announcements.
+ */ export const AriaLiveAnnouncer = (props)=>{
+    const state = useAriaLiveAnnouncer_unstable(props);
+    const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);
+    return renderAriaLiveAnnouncer_unstable(state, contextValues);
+};
+AriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';

package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AriaLiveAnnouncer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { AriaLiveAnnouncerProps } from './AriaLiveAnnouncer.types';\nimport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n\n/**\n * A sample implementation of a component that manages aria live announcements.\n */\nexport const AriaLiveAnnouncer: React.FC<AriaLiveAnnouncerProps> = props => {\n  const state = useAriaLiveAnnouncer_unstable(props);\n  const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);\n\n  return renderAriaLiveAnnouncer_unstable(state, contextValues);\n};\n\nAriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';\n"],"names":["React","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable","AriaLiveAnnouncer","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0CAA0C,QAAQ,sCAAsC;AAEjG;;CAEC,GACD,OAAO,MAAMC,oBAAsDC,CAAAA;IACjE,MAAMC,QAAQJ,8BAA8BG;IAC5C,MAAME,gBAAgBJ,2CAA2CG;IAEjE,OAAOL,iCAAiCK,OAAOC;AACjD,EAAE;AAEFH,kBAAkBI,WAAW,GAAG"}

package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AriaLiveAnnouncer.types.ts"],"sourcesContent":["import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nexport type AriaLiveAnnounceFn = AnnounceContextValue['announce'];\n\nexport type AriaLiveMessage = {\n  message: string;\n\n  createdAt: number;\n\n  priority: number;\n  batchId?: string;\n};\n\nexport type AriaLiveAnnouncerProps = {\n  children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerState = {\n  announce: AriaLiveAnnounceFn;\n  children?: React.ReactNode;\n};\n\nexport type AriaLiveAnnouncerContextValues = {\n  announce: { announce: AriaLiveAnnounceFn };\n};\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/AriaLiveAnnouncer/index.js

@@ -0,0 +1,4 @@
+export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';
+export { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';
+export { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';
+export { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';

package/lib/AriaLiveAnnouncer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\nexport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n"],"names":["AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0CAA0C,QAAQ,sCAAsC"}

package/lib/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { AnnounceProvider } from '@fluentui/react-shared-contexts';
+export const renderAriaLiveAnnouncer_unstable = (state, contextValues)=>{
+    return /*#__PURE__*/ _jsx(AnnounceProvider, {
+        value: contextValues.announce,
+        children: state.children
+    });
+};

package/lib/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAriaLiveAnnouncer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { AnnounceProvider } from '@fluentui/react-shared-contexts';\n\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport const renderAriaLiveAnnouncer_unstable = (\n  state: AriaLiveAnnouncerState,\n  contextValues: AriaLiveAnnouncerContextValues,\n) => {\n  return <AnnounceProvider value={contextValues.announce}>{state.children}</AnnounceProvider>;\n};\n"],"names":["AnnounceProvider","renderAriaLiveAnnouncer_unstable","state","contextValues","value","announce","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,gBAAgB,QAAQ,kCAAkC;AAInE,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,qBAAO,KAACH;QAAiBI,OAAOD,cAAcE,QAAQ;kBAAGH,MAAMI,QAAQ;;AACzE,EAAE"}

package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncer.js

@@ -0,0 +1,124 @@
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';
+import * as React from 'react';
+/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
+const VISUALLY_HIDDEN_STYLES = {
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    height: '1px',
+    margin: '-1px',
+    width: '1px',
+    position: 'absolute',
+    overflow: 'hidden',
+    textWrap: 'nowrap'
+};
+export const useAriaLiveAnnouncer_unstable = (props)=>{
+    const { targetDocument } = useFluent();
+    const timeoutRef = React.useRef(undefined);
+    const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();
+    const elementRef = React.useRef(null);
+    const order = React.useRef(0);
+    // investigate alert implementation later
+    // const [alertList, setAlertList] = React.useState<string[]>([]);
+    const batchMessages = React.useRef([]);
+    const [messageQueue] = React.useState(()=>createPriorityQueue((a, b)=>{
+            if (a.priority !== b.priority) {
+                return b.priority - a.priority;
+            }
+            return a.createdAt - b.createdAt;
+        }));
+    const queueMessage = React.useCallback(()=>{
+        if (timeoutRef.current || !elementRef.current) {
+            return;
+        }
+        const runCycle = ()=>{
+            if (!elementRef.current) {
+                return;
+            }
+            if (targetDocument && messageQueue.peek()) {
+                // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes
+                // consistently
+                // if this is fixed, we can set textContent to the string directly
+                const wrappingEl = targetDocument.createElement('span');
+                wrappingEl.innerText = messageQueue.all().filter((msg)=>msg.message.trim().length > 0).reduce((prevText, currMsg)=>prevText + currMsg.message + '. ', '');
+                elementRef.current.innerText = '';
+                elementRef.current.appendChild(wrappingEl);
+                messageQueue.clear();
+                batchMessages.current = [];
+                // begin new cycle to clear (or update) messages
+                timeoutRef.current = setAnnounceTimeout(()=>{
+                    runCycle();
+                }, MESSAGE_DURATION);
+            } else {
+                elementRef.current.textContent = '';
+                clearAnnounceTimeout();
+                timeoutRef.current = undefined;
+            }
+        };
+        runCycle();
+    }, [
+        clearAnnounceTimeout,
+        messageQueue,
+        setAnnounceTimeout,
+        targetDocument
+    ]);
+    const announce = React.useMemo(()=>(message, options = {})=>{
+            const { alert = false, priority = 0, batchId } = options;
+            // check if message is an alert
+            if (alert) {
+            // TODO: alert implementation
+            // setAlertList([...alertList, message]);
+            }
+            const liveMessage = {
+                message,
+                createdAt: order.current++,
+                priority,
+                batchId
+            };
+            // check if batchId exists
+            if (batchId) {
+                // update associated msg if it does
+                const batchMessage = batchMessages.current.find((msg)=>msg.batchId === batchId);
+                if (batchMessage) {
+                    // replace existing message in queue
+                    messageQueue.remove(batchMessage.message);
+                    // update list of existing batchIds w/ most recent message
+                    batchMessage.message = liveMessage;
+                } else {
+                    // update list of existing batchIds, add new if doesn't already exist
+                    batchMessages.current = [
+                        ...batchMessages.current,
+                        {
+                            batchId,
+                            message: liveMessage
+                        }
+                    ];
+                }
+            }
+            // add new message
+            messageQueue.enqueue(liveMessage);
+            queueMessage();
+        }, [
+        messageQueue,
+        queueMessage
+    ]);
+    React.useEffect(()=>{
+        if (!targetDocument) {
+            return;
+        }
+        const element = targetDocument.createElement('div');
+        element.setAttribute('aria-live', 'assertive');
+        Object.assign(element.style, VISUALLY_HIDDEN_STYLES);
+        targetDocument.body.append(element);
+        elementRef.current = element;
+        return ()=>{
+            element.remove();
+            elementRef.current = null;
+        };
+    }, [
+        targetDocument
+    ]);
+    return {
+        announce,
+        children: props.children
+    };
+};

package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAriaLiveAnnouncer.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n  AriaLiveAnnounceFn,\n  AriaLiveAnnouncerState,\n  AriaLiveAnnouncerProps,\n  AriaLiveMessage,\n} from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n  clip: 'rect(0px, 0px, 0px, 0px)',\n  height: '1px',\n  margin: '-1px',\n  width: '1px',\n  position: 'absolute',\n  overflow: 'hidden',\n  textWrap: 'nowrap',\n};\n\nexport const useAriaLiveAnnouncer_unstable = (props: AriaLiveAnnouncerProps): AriaLiveAnnouncerState => {\n  const { targetDocument } = useFluent();\n\n  const timeoutRef = React.useRef<number | undefined>(undefined);\n  const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  const order = React.useRef(0);\n\n  // investigate alert implementation later\n  // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n  const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n  const [messageQueue] = React.useState(() =>\n    createPriorityQueue<AriaLiveMessage>((a, b) => {\n      if (a.priority !== b.priority) {\n        return b.priority - a.priority;\n      }\n\n      return a.createdAt - b.createdAt;\n    }),\n  );\n\n  const queueMessage = React.useCallback(() => {\n    if (timeoutRef.current || !elementRef.current) {\n      return;\n    }\n\n    const runCycle = () => {\n      if (!elementRef.current) {\n        return;\n      }\n\n      if (targetDocument && messageQueue.peek()) {\n        // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n        // consistently\n        // if this is fixed, we can set textContent to the string directly\n\n        const wrappingEl = targetDocument.createElement('span');\n\n        wrappingEl.innerText = messageQueue\n          .all()\n          .filter(msg => msg.message.trim().length > 0)\n          .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n        elementRef.current.innerText = '';\n        elementRef.current.appendChild(wrappingEl);\n\n        messageQueue.clear();\n        batchMessages.current = [];\n\n        // begin new cycle to clear (or update) messages\n        timeoutRef.current = setAnnounceTimeout(() => {\n          runCycle();\n        }, MESSAGE_DURATION);\n      } else {\n        elementRef.current.textContent = '';\n        clearAnnounceTimeout();\n\n        timeoutRef.current = undefined;\n      }\n    };\n\n    runCycle();\n  }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n  const announce: AriaLiveAnnounceFn = React.useMemo(\n    () =>\n      (message, options = {}) => {\n        const { alert = false, priority = 0, batchId } = options;\n\n        // check if message is an alert\n        if (alert) {\n          // TODO: alert implementation\n          // setAlertList([...alertList, message]);\n        }\n\n        const liveMessage: AriaLiveMessage = {\n          message,\n          createdAt: order.current++,\n          priority,\n          batchId,\n        };\n\n        // check if batchId exists\n        if (batchId) {\n          // update associated msg if it does\n          const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n          if (batchMessage) {\n            // replace existing message in queue\n            messageQueue.remove(batchMessage.message);\n\n            // update list of existing batchIds w/ most recent message\n            batchMessage.message = liveMessage;\n          } else {\n            // update list of existing batchIds, add new if doesn't already exist\n            batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n          }\n        }\n\n        // add new message\n        messageQueue.enqueue(liveMessage);\n        queueMessage();\n      },\n    [messageQueue, queueMessage],\n  );\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    const element = targetDocument.createElement('div');\n    element.setAttribute('aria-live', 'assertive');\n\n    Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n    targetDocument.body.append(element);\n\n    elementRef.current = element;\n\n    return () => {\n      element.remove();\n      elementRef.current = null;\n    };\n  }, [targetDocument]);\n\n  return {\n    announce,\n    children: props.children,\n  };\n};\n"],"names":["useFluent_unstable","useFluent","createPriorityQueue","useTimeout","React","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","useAriaLiveAnnouncer_unstable","props","targetDocument","timeoutRef","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","elementRef","order","batchMessages","messageQueue","useState","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","useMemo","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","assign","style","body","append","children"],"mappings":"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"}

package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export function useAriaLiveAnnouncerContextValues_unstable(state) {
+    const { announce } = state;
+    return React.useMemo(()=>({
+            announce: {
+                announce
+            }
+        }), [
+        announce
+    ]);
+}

package/lib/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAriaLiveAnnouncerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AriaLiveAnnouncerContextValues, AriaLiveAnnouncerState } from './AriaLiveAnnouncer.types';\n\nexport function useAriaLiveAnnouncerContextValues_unstable(\n  state: AriaLiveAnnouncerState,\n): AriaLiveAnnouncerContextValues {\n  const { announce } = state;\n\n  return React.useMemo(() => ({ announce: { announce } }), [announce]);\n}\n"],"names":["React","useAriaLiveAnnouncerContextValues_unstable","state","announce","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,2CACdC,KAA6B;IAE7B,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,OAAOF,MAAMI,OAAO,CAAC,IAAO,CAAA;YAAED,UAAU;gBAAEA;YAAS;QAAE,CAAA,GAAI;QAACA;KAAS;AACrE"}

package/lib/button/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\ntype UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;\n\nexport type ARIAButtonType = 'button' | 'a' | 'div';\n\nexport type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> =\n  | HTMLButtonElement\n  | (AlternateAs extends 'a' ? HTMLAnchorElement : never)\n  | (AlternateAs extends 'div' ? HTMLDivElement : never);\n\n/**\n * @internal\n */\nexport type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<\n  ARIAButtonElement<AlternateAs>\n>;\n\n/**\n * Props expected by `useARIAButtonProps` hooks\n */\nexport type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<\n  JSX.IntrinsicElements[Type]\n> & {\n  disabled?: boolean;\n  /**\n   * When set, allows the button to be focusable even when it has been disabled.\n   * This is used in scenarios where it is important to keep a consistent tab order\n   * for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n};\n\nexport type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<\n  Slot<'button', AlternateAs>\n> &\n  Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;\n\n/**\n * Props that will be modified internally by `useARIAButtonProps` by each case.\n * This typing is to ensure a well specified return value for `useARIAbButtonProps`\n */\nexport type ARIAButtonAlteredProps<Type extends ARIAButtonType> =\n  | (Type extends 'button'\n      ? Pick<\n          JSX.IntrinsicElements['button'],\n          'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n        >\n      : never)\n  | (Type extends 'a'\n      ? Pick<\n          JSX.IntrinsicElements['a'],\n          'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n        >\n      : never)\n  | (Type extends 'div'\n      ? Pick<JSX.IntrinsicElements['div'], 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'>\n      : never);\n\n/**\n * Merge of props provided by the user and props provided internally.\n */\nexport type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props &\n  UnionToIntersection<ARIAButtonAlteredProps<Type>>;\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["import type { ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ARIAButtonType = 'button' | 'a' | 'div';\n\nexport type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> =\n  | HTMLButtonElement\n  | (AlternateAs extends 'a' ? HTMLAnchorElement : never)\n  | (AlternateAs extends 'div' ? HTMLDivElement : never);\n\n/**\n * @internal\n */\nexport type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<\n  ARIAButtonElement<AlternateAs>\n>;\n\n/**\n * Props expected by `useARIAButtonProps` hooks\n */\nexport type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<\n  JSX.IntrinsicElements[Type]\n> & {\n  disabled?: boolean;\n  /**\n   * When set, allows the button to be focusable even when it has been disabled.\n   * This is used in scenarios where it is important to keep a consistent tab order\n   * for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n};\n\nexport type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<\n  Slot<'button', AlternateAs>\n> &\n  Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;\n\n/**\n * Props that will be modified internally by `useARIAButtonProps` by each case.\n * This typing is to ensure a well specified return value for `useARIAbButtonProps`\n */\nexport type ARIAButtonAlteredProps<Type extends ARIAButtonType> =\n  | (Type extends 'button'\n      ? Pick<\n          JSX.IntrinsicElements['button'],\n          'onClick' | 'onKeyDown' | 'onKeyUp' | 'disabled' | 'aria-disabled' | 'tabIndex'\n        >\n      : never)\n  | (Type extends 'a'\n      ? Pick<\n          JSX.IntrinsicElements['a'],\n          'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role' | 'href'\n        >\n      : never)\n  | (Type extends 'div'\n      ? Pick<JSX.IntrinsicElements['div'], 'onClick' | 'onKeyDown' | 'onKeyUp' | 'aria-disabled' | 'tabIndex' | 'role'>\n      : never);\n\n/**\n * Merge of props provided by the user and props provided internally.\n */\nexport type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props &\n  UnionToIntersection<ARIAButtonAlteredProps<Type>>;\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/index.js

@@ -1,3 +1,4 @@
 export { // eslint-disable-next-line deprecation/deprecation
 useARIAButtonShorthand, useARIAButtonProps } from './button/index';
 export { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';
+export { AriaLiveAnnouncer, renderAriaLiveAnnouncer_unstable, useAriaLiveAnnouncer_unstable, useAriaLiveAnnouncerContextValues_unstable } from './AriaLiveAnnouncer/index';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  // eslint-disable-next-line deprecation/deprecation\n  useARIAButtonShorthand,\n  useARIAButtonProps,\n} from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\nexport type { ActiveDescendantImperativeRef, ActiveDescendantOptions } from './activedescendant';\nexport type {\n  ARIAButtonSlotProps,\n  ARIAButtonProps,\n  ARIAButtonResultProps,\n  ARIAButtonType,\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonAlteredProps,\n} from './button/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SAASC,mBAAmB,EAAEC,uCAAuC,QAAQ,qBAAqB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  // eslint-disable-next-line deprecation/deprecation\n  useARIAButtonShorthand,\n  useARIAButtonProps,\n} from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\nexport type { ActiveDescendantImperativeRef, ActiveDescendantOptions } from './activedescendant';\nexport type {\n  ARIAButtonSlotProps,\n  ARIAButtonProps,\n  ARIAButtonResultProps,\n  ARIAButtonType,\n  ARIAButtonElement,\n  ARIAButtonElementIntersection,\n  ARIAButtonAlteredProps,\n} from './button/index';\n\nexport {\n  AriaLiveAnnouncer,\n  renderAriaLiveAnnouncer_unstable,\n  useAriaLiveAnnouncer_unstable,\n  useAriaLiveAnnouncerContextValues_unstable,\n} from './AriaLiveAnnouncer/index';\nexport type { AriaLiveAnnouncerProps, AriaLiveAnnouncerState } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":"AAAA,SACE,mDAAmD;AACnDA,sBAAsB,EACtBC,kBAAkB,QACb,iBAAiB;AACxB,SAASC,mBAAmB,EAAEC,uCAAuC,QAAQ,qBAAqB;AAYlG,SACEC,iBAAiB,EACjBC,gCAAgC,EAChCC,6BAA6B,EAC7BC,0CAA0C,QACrC,4BAA4B"}

package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AriaLiveAnnouncer", {
+    enumerable: true,
+    get: function() {
+        return AriaLiveAnnouncer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderAriaLiveAnnouncer = require("./renderAriaLiveAnnouncer");
+const _useAriaLiveAnnouncer = require("./useAriaLiveAnnouncer");
+const _useAriaLiveAnnouncerContextValues = require("./useAriaLiveAnnouncerContextValues");
+const AriaLiveAnnouncer = (props)=>{
+    const state = (0, _useAriaLiveAnnouncer.useAriaLiveAnnouncer_unstable)(props);
+    const contextValues = (0, _useAriaLiveAnnouncerContextValues.useAriaLiveAnnouncerContextValues_unstable)(state);
+    return (0, _renderAriaLiveAnnouncer.renderAriaLiveAnnouncer_unstable)(state, contextValues);
+};
+AriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';

package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AriaLiveAnnouncer.js"],"sourcesContent":["import * as React from 'react';\nimport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n/**\n * A sample implementation of a component that manages aria live announcements.\n */ export const AriaLiveAnnouncer = (props)=>{\n    const state = useAriaLiveAnnouncer_unstable(props);\n    const contextValues = useAriaLiveAnnouncerContextValues_unstable(state);\n    return renderAriaLiveAnnouncer_unstable(state, contextValues);\n};\nAriaLiveAnnouncer.displayName = 'AriaLiveAnnouncer';\n"],"names":["AriaLiveAnnouncer","props","state","useAriaLiveAnnouncer_unstable","contextValues","useAriaLiveAnnouncerContextValues_unstable","renderAriaLiveAnnouncer_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;yCAC0B;sCACH;mDACa;AAGhD,MAAMA,oBAAoB,CAACC;IAClC,MAAMC,QAAQC,IAAAA,mDAA6B,EAACF;IAC5C,MAAMG,gBAAgBC,IAAAA,6EAA0C,EAACH;IACjE,OAAOI,IAAAA,yDAAgC,EAACJ,OAAOE;AACnD;AACAJ,kBAAkBO,WAAW,GAAG"}

package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/AriaLiveAnnouncer/AriaLiveAnnouncer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AriaLiveAnnouncer.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}

package/lib-commonjs/AriaLiveAnnouncer/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AriaLiveAnnouncer: function() {
+        return _AriaLiveAnnouncer.AriaLiveAnnouncer;
+    },
+    renderAriaLiveAnnouncer_unstable: function() {
+        return _renderAriaLiveAnnouncer.renderAriaLiveAnnouncer_unstable;
+    },
+    useAriaLiveAnnouncer_unstable: function() {
+        return _useAriaLiveAnnouncer.useAriaLiveAnnouncer_unstable;
+    },
+    useAriaLiveAnnouncerContextValues_unstable: function() {
+        return _useAriaLiveAnnouncerContextValues.useAriaLiveAnnouncerContextValues_unstable;
+    }
+});
+const _AriaLiveAnnouncer = require("./AriaLiveAnnouncer");
+const _renderAriaLiveAnnouncer = require("./renderAriaLiveAnnouncer");
+const _useAriaLiveAnnouncer = require("./useAriaLiveAnnouncer");
+const _useAriaLiveAnnouncerContextValues = require("./useAriaLiveAnnouncerContextValues");

package/lib-commonjs/AriaLiveAnnouncer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export { AriaLiveAnnouncer } from './AriaLiveAnnouncer';\nexport { renderAriaLiveAnnouncer_unstable } from './renderAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncer_unstable } from './useAriaLiveAnnouncer';\nexport { useAriaLiveAnnouncerContextValues_unstable } from './useAriaLiveAnnouncerContextValues';\n"],"names":["AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":";;;;;;;;;;;IAASA,iBAAiB;eAAjBA,oCAAiB;;IACjBC,gCAAgC;eAAhCA,yDAAgC;;IAChCC,6BAA6B;eAA7BA,mDAA6B;;IAC7BC,0CAA0C;eAA1CA,6EAA0C;;;mCAHjB;yCACe;sCACH;mDACa"}

package/lib-commonjs/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderAriaLiveAnnouncer_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderAriaLiveAnnouncer_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const renderAriaLiveAnnouncer_unstable = (state, contextValues)=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.AnnounceProvider, {
+        value: contextValues.announce,
+        children: state.children
+    });
+};

package/lib-commonjs/AriaLiveAnnouncer/renderAriaLiveAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAriaLiveAnnouncer.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { AnnounceProvider } from '@fluentui/react-shared-contexts';\nexport const renderAriaLiveAnnouncer_unstable = (state, contextValues)=>{\n    return /*#__PURE__*/ _jsx(AnnounceProvider, {\n        value: contextValues.announce,\n        children: state.children\n    });\n};\n"],"names":["renderAriaLiveAnnouncer_unstable","state","contextValues","_jsx","AnnounceProvider","value","announce","children"],"mappings":";;;;+BAEaA;;;eAAAA;;;4BAFiB;qCACG;AAC1B,MAAMA,mCAAmC,CAACC,OAAOC;IACpD,OAAO,WAAW,GAAGC,IAAAA,eAAI,EAACC,qCAAgB,EAAE;QACxCC,OAAOH,cAAcI,QAAQ;QAC7BC,UAAUN,MAAMM,QAAQ;IAC5B;AACJ"}

package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncer.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAriaLiveAnnouncer_unstable", {
+    enumerable: true,
+    get: function() {
+        return useAriaLiveAnnouncer_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
+const VISUALLY_HIDDEN_STYLES = {
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    height: '1px',
+    margin: '-1px',
+    width: '1px',
+    position: 'absolute',
+    overflow: 'hidden',
+    textWrap: 'nowrap'
+};
+const useAriaLiveAnnouncer_unstable = (props)=>{
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const timeoutRef = _react.useRef(undefined);
+    const [setAnnounceTimeout, clearAnnounceTimeout] = (0, _reactutilities.useTimeout)();
+    const elementRef = _react.useRef(null);
+    const order = _react.useRef(0);
+    // investigate alert implementation later
+    // const [alertList, setAlertList] = React.useState<string[]>([]);
+    const batchMessages = _react.useRef([]);
+    const [messageQueue] = _react.useState(()=>(0, _reactutilities.createPriorityQueue)((a, b)=>{
+            if (a.priority !== b.priority) {
+                return b.priority - a.priority;
+            }
+            return a.createdAt - b.createdAt;
+        }));
+    const queueMessage = _react.useCallback(()=>{
+        if (timeoutRef.current || !elementRef.current) {
+            return;
+        }
+        const runCycle = ()=>{
+            if (!elementRef.current) {
+                return;
+            }
+            if (targetDocument && messageQueue.peek()) {
+                // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes
+                // consistently
+                // if this is fixed, we can set textContent to the string directly
+                const wrappingEl = targetDocument.createElement('span');
+                wrappingEl.innerText = messageQueue.all().filter((msg)=>msg.message.trim().length > 0).reduce((prevText, currMsg)=>prevText + currMsg.message + '. ', '');
+                elementRef.current.innerText = '';
+                elementRef.current.appendChild(wrappingEl);
+                messageQueue.clear();
+                batchMessages.current = [];
+                // begin new cycle to clear (or update) messages
+                timeoutRef.current = setAnnounceTimeout(()=>{
+                    runCycle();
+                }, MESSAGE_DURATION);
+            } else {
+                elementRef.current.textContent = '';
+                clearAnnounceTimeout();
+                timeoutRef.current = undefined;
+            }
+        };
+        runCycle();
+    }, [
+        clearAnnounceTimeout,
+        messageQueue,
+        setAnnounceTimeout,
+        targetDocument
+    ]);
+    const announce = _react.useMemo(()=>(message, options = {})=>{
+            const { alert = false, priority = 0, batchId } = options;
+            // check if message is an alert
+            if (alert) {
+            // TODO: alert implementation
+            // setAlertList([...alertList, message]);
+            }
+            const liveMessage = {
+                message,
+                createdAt: order.current++,
+                priority,
+                batchId
+            };
+            // check if batchId exists
+            if (batchId) {
+                // update associated msg if it does
+                const batchMessage = batchMessages.current.find((msg)=>msg.batchId === batchId);
+                if (batchMessage) {
+                    // replace existing message in queue
+                    messageQueue.remove(batchMessage.message);
+                    // update list of existing batchIds w/ most recent message
+                    batchMessage.message = liveMessage;
+                } else {
+                    // update list of existing batchIds, add new if doesn't already exist
+                    batchMessages.current = [
+                        ...batchMessages.current,
+                        {
+                            batchId,
+                            message: liveMessage
+                        }
+                    ];
+                }
+            }
+            // add new message
+            messageQueue.enqueue(liveMessage);
+            queueMessage();
+        }, [
+        messageQueue,
+        queueMessage
+    ]);
+    _react.useEffect(()=>{
+        if (!targetDocument) {
+            return;
+        }
+        const element = targetDocument.createElement('div');
+        element.setAttribute('aria-live', 'assertive');
+        Object.assign(element.style, VISUALLY_HIDDEN_STYLES);
+        targetDocument.body.append(element);
+        elementRef.current = element;
+        return ()=>{
+            element.remove();
+            elementRef.current = null;
+        };
+    }, [
+        targetDocument
+    ]);
+    return {
+        announce,
+        children: props.children
+    };
+};

package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAriaLiveAnnouncer.js"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;\nconst VISUALLY_HIDDEN_STYLES = {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    width: '1px',\n    position: 'absolute',\n    overflow: 'hidden',\n    textWrap: 'nowrap'\n};\nexport const useAriaLiveAnnouncer_unstable = (props)=>{\n    const { targetDocument } = useFluent();\n    const timeoutRef = React.useRef(undefined);\n    const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n    const elementRef = React.useRef(null);\n    const order = React.useRef(0);\n    // investigate alert implementation later\n    // const [alertList, setAlertList] = React.useState<string[]>([]);\n    const batchMessages = React.useRef([]);\n    const [messageQueue] = React.useState(()=>createPriorityQueue((a, b)=>{\n            if (a.priority !== b.priority) {\n                return b.priority - a.priority;\n            }\n            return a.createdAt - b.createdAt;\n        }));\n    const queueMessage = React.useCallback(()=>{\n        if (timeoutRef.current || !elementRef.current) {\n            return;\n        }\n        const runCycle = ()=>{\n            if (!elementRef.current) {\n                return;\n            }\n            if (targetDocument && messageQueue.peek()) {\n                // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n                // consistently\n                // if this is fixed, we can set textContent to the string directly\n                const wrappingEl = targetDocument.createElement('span');\n                wrappingEl.innerText = messageQueue.all().filter((msg)=>msg.message.trim().length > 0).reduce((prevText, currMsg)=>prevText + currMsg.message + '. ', '');\n                elementRef.current.innerText = '';\n                elementRef.current.appendChild(wrappingEl);\n                messageQueue.clear();\n                batchMessages.current = [];\n                // begin new cycle to clear (or update) messages\n                timeoutRef.current = setAnnounceTimeout(()=>{\n                    runCycle();\n                }, MESSAGE_DURATION);\n            } else {\n                elementRef.current.textContent = '';\n                clearAnnounceTimeout();\n                timeoutRef.current = undefined;\n            }\n        };\n        runCycle();\n    }, [\n        clearAnnounceTimeout,\n        messageQueue,\n        setAnnounceTimeout,\n        targetDocument\n    ]);\n    const announce = React.useMemo(()=>(message, options = {})=>{\n            const { alert = false, priority = 0, batchId } = options;\n            // check if message is an alert\n            if (alert) {\n            // TODO: alert implementation\n            // setAlertList([...alertList, message]);\n            }\n            const liveMessage = {\n                message,\n                createdAt: order.current++,\n                priority,\n                batchId\n            };\n            // check if batchId exists\n            if (batchId) {\n                // update associated msg if it does\n                const batchMessage = batchMessages.current.find((msg)=>msg.batchId === batchId);\n                if (batchMessage) {\n                    // replace existing message in queue\n                    messageQueue.remove(batchMessage.message);\n                    // update list of existing batchIds w/ most recent message\n                    batchMessage.message = liveMessage;\n                } else {\n                    // update list of existing batchIds, add new if doesn't already exist\n                    batchMessages.current = [\n                        ...batchMessages.current,\n                        {\n                            batchId,\n                            message: liveMessage\n                        }\n                    ];\n                }\n            }\n            // add new message\n            messageQueue.enqueue(liveMessage);\n            queueMessage();\n        }, [\n        messageQueue,\n        queueMessage\n    ]);\n    React.useEffect(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        const element = targetDocument.createElement('div');\n        element.setAttribute('aria-live', 'assertive');\n        Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n        targetDocument.body.append(element);\n        elementRef.current = element;\n        return ()=>{\n            element.remove();\n            elementRef.current = null;\n        };\n    }, [\n        targetDocument\n    ]);\n    return {\n        announce,\n        children: props.children\n    };\n};\n"],"names":["useAriaLiveAnnouncer_unstable","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","props","targetDocument","useFluent","timeoutRef","React","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","useTimeout","elementRef","order","batchMessages","messageQueue","useState","createPriorityQueue","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","useMemo","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","assign","style","body","append","children"],"mappings":"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"}

package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAriaLiveAnnouncerContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useAriaLiveAnnouncerContextValues_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+function useAriaLiveAnnouncerContextValues_unstable(state) {
+    const { announce } = state;
+    return _react.useMemo(()=>({
+            announce: {
+                announce
+            }
+        }), [
+        announce
+    ]);
+}

package/lib-commonjs/AriaLiveAnnouncer/useAriaLiveAnnouncerContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAriaLiveAnnouncerContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useAriaLiveAnnouncerContextValues_unstable(state) {\n    const { announce } = state;\n    return React.useMemo(()=>({\n            announce: {\n                announce\n            }\n        }), [\n        announce\n    ]);\n}\n"],"names":["useAriaLiveAnnouncerContextValues_unstable","state","announce","React","useMemo"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,2CAA2CC,KAAK;IAC5D,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,OAAOE,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBF,UAAU;gBACNA;YACJ;QACJ,CAAA,GAAI;QACJA;KACH;AACL"}

package/lib-commonjs/index.js

@@ -20,7 +20,20 @@ _export(exports, {
     },
     ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE: function() {
         return _activedescendant.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE;
+    },
+    AriaLiveAnnouncer: function() {
+        return _index1.AriaLiveAnnouncer;
+    },
+    renderAriaLiveAnnouncer_unstable: function() {
+        return _index1.renderAriaLiveAnnouncer_unstable;
+    },
+    useAriaLiveAnnouncer_unstable: function() {
+        return _index1.useAriaLiveAnnouncer_unstable;
+    },
+    useAriaLiveAnnouncerContextValues_unstable: function() {
+        return _index1.useAriaLiveAnnouncerContextValues_unstable;
     }
 });
 const _index = require("./button/index");
 const _activedescendant = require("./activedescendant");
+const _index1 = require("./AriaLiveAnnouncer/index");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { // eslint-disable-next-line deprecation/deprecation\nuseARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;IAAEC,uCAAuC;eAAvCA,yDAAuC;;;uBADnB;kCAC2B"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { // eslint-disable-next-line deprecation/deprecation\nuseARIAButtonShorthand, useARIAButtonProps } from './button/index';\nexport { useActiveDescendant, ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from './activedescendant';\nexport { AriaLiveAnnouncer, renderAriaLiveAnnouncer_unstable, useAriaLiveAnnouncer_unstable, useAriaLiveAnnouncerContextValues_unstable } from './AriaLiveAnnouncer/index';\n"],"names":["useARIAButtonShorthand","useARIAButtonProps","useActiveDescendant","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","AriaLiveAnnouncer","renderAriaLiveAnnouncer_unstable","useAriaLiveAnnouncer_unstable","useAriaLiveAnnouncerContextValues_unstable"],"mappings":";;;;;;;;;;;IACAA,sBAAsB;eAAtBA,6BAAsB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjCC,mBAAmB;eAAnBA,qCAAmB;;IAAEC,uCAAuC;eAAvCA,yDAAuC;;IAC5DC,iBAAiB;eAAjBA,yBAAiB;;IAAEC,gCAAgC;eAAhCA,wCAAgC;;IAAEC,6BAA6B;eAA7BA,qCAA6B;;IAAEC,0CAA0C;eAA1CA,kDAA0C;;;uBAFrF;kCAC2B;wBACkE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-aria",
-  "version": "9.7.3",
+  "version": "9.8.1",
   "description": "React helper to ensure ARIA",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
     "@fluentui/react-shared-contexts": "^9.14.0",
-    "@fluentui/react-tabster": "^9.17.3",
-    "@fluentui/react-utilities": "^9.16.1",
+    "@fluentui/react-tabster": "^9.18.0",
+    "@fluentui/react-utilities": "^9.18.0",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {