@fluentui/react-tabster 9.26.8 → 9.26.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -2
- package/dist/index.d.ts +3 -3
- package/lib/hooks/useFocusVisible.js.map +1 -1
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib-commonjs/hooks/useFocusVisible.js.map +1 -1
- package/lib-commonjs/hooks/useFocusWithin.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Nov 2025 14:56:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.26.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.9)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Nov 2025 14:56:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.26.8..@fluentui/react-tabster_v9.26.9)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.26.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.26.8)
|
|
8
18
|
|
|
9
|
-
Fri, 31 Oct 2025 16:
|
|
19
|
+
Fri, 31 Oct 2025 16:22:06 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.26.7..@fluentui/react-tabster_v9.26.8)
|
|
11
21
|
|
|
12
22
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1443,7 +1443,7 @@ declare interface UseFocusObservedOptions {
|
|
|
1443
1443
|
timeout?: number;
|
|
1444
1444
|
}
|
|
1445
1445
|
|
|
1446
|
-
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
|
|
1446
|
+
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement | null>;
|
|
1447
1447
|
|
|
1448
1448
|
declare type UseFocusVisibleOptions = {
|
|
1449
1449
|
targetDocument?: Document;
|
|
@@ -1454,7 +1454,7 @@ declare type UseFocusVisibleOptions = {
|
|
|
1454
1454
|
* like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
|
|
1455
1455
|
* @returns ref to the element that uses `:focus-within` styles
|
|
1456
1456
|
*/
|
|
1457
|
-
export declare function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
|
|
1457
|
+
export declare function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement | null>;
|
|
1458
1458
|
|
|
1459
1459
|
/**
|
|
1460
1460
|
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and checks if the user is navigating with the keyboard.
|
|
@@ -1467,7 +1467,7 @@ export declare function useIsNavigatingWithKeyboard(): () => boolean;
|
|
|
1467
1467
|
* attribute to a referenced element to ensure keyboard navigation awareness
|
|
1468
1468
|
* synced to keyborg logic without having to cause a re-render on react tree.
|
|
1469
1469
|
*/
|
|
1470
|
-
export declare function useKeyboardNavAttribute<E extends HTMLElement>(): React_2.RefObject<E>;
|
|
1470
|
+
export declare function useKeyboardNavAttribute<E extends HTMLElement>(): React_2.RefObject<E | null>;
|
|
1471
1471
|
|
|
1472
1472
|
/**
|
|
1473
1473
|
* Merges a collection of tabster attributes.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(\n options: UseFocusVisibleOptions = {},\n): React.RefObject<TElement> {\n const contextValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW;QAEjBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(\n options: UseFocusVisibleOptions = {},\n): React.RefObject<TElement | null> {\n const contextValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contextValue","scopeRef","useRef","targetDocument","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,yBAAyB,QAAQ,gCAAgC;AAM1E,OAAO,SAASC,gBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAMC,eAAeJ;IACrB,MAAMK,WAAWP,MAAMQ,MAAM,CAAW;QAEjBH;IAAvB,MAAMI,iBAAiBJ,CAAAA,0BAAAA,QAAQI,cAAc,cAAtBJ,qCAAAA,0BAA0BC,aAAaG,cAAc;IAE5ET,MAAMU,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIJ,SAASK,OAAO,EAAE;YACnD,OAAOT,0BAA0BI,SAASK,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACJ;QAAUE;KAAe;IAE7B,OAAOF;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React.RefObject<TElement> {\n const { targetDocument } = useFluent();\n const elementRef = React.useRef<TElement>(null);\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n\n return elementRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,+BAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW;IAE1CP,MAAMQ,SAAS,CAAC;QACd,IAAIH,CAAAA,2BAAAA,qCAAAA,eAAgBI,WAAW,KAAIH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF;IACF,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React.RefObject<TElement | null> {\n const { targetDocument } = useFluent();\n const elementRef = React.useRef<TElement>(null);\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n\n return elementRef;\n}\n"],"names":["React","useFluent_unstable","useFluent","applyFocusWithinPolyfill","useFocusWithin","targetDocument","elementRef","useRef","useEffect","defaultView","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,wBAAwB,QAAQ,+BAA+B;AAExE;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;IAC3B,MAAMI,aAAaN,MAAMO,MAAM,CAAW;IAE1CP,MAAMQ,SAAS,CAAC;QACd,IAAIH,CAAAA,2BAAAA,qCAAAA,eAAgBI,WAAW,KAAIH,WAAWI,OAAO,EAAE;YACrD,OAAOP,yBAAyBG,WAAWI,OAAO,EAAEL,eAAeI,WAAW;QAChF;IACF,GAAG;QAACH;QAAYD;KAAe;IAE/B,OAAOC;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createKeyborg } from 'keyborg';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>(): React.RefObject<E> {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = React.useRef<E>(null);\n React.useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb: KeyborgCallback = next => {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n };\n keyborg.subscribe(cb);\n return () => keyborg.unsubscribe(cb);\n }\n }, [keyborg]);\n return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement>, attribute: string, value: boolean) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, '');\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n"],"names":["React","createKeyborg","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","useMemo","defaultView","ref","useRef","useEffect","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAGlF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,MAAMQ,OAAO,CAAC,IAAMF,kBAAkBL,cAAcK,eAAeG,WAAW,GAAI;QAACH;KAAe;IAClH,MAAMI,MAAMV,MAAMW,MAAM,CAAI;IAC5BX,MAAMY,SAAS,CAAC;QACd,IAAIL,SAAS;YACXM,oBAAoBH,KAAKR,wBAAwBK,QAAQO,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA;gBAC1BH,oBAAoBH,KAAKR,wBAAwBc;YACnD;YACAT,QAAQU,SAAS,CAACF;YAClB,OAAO,IAAMR,QAAQW,WAAW,CAACH;QACnC;IACF,GAAG;QAACR;KAAQ;
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createKeyborg } from 'keyborg';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>(): React.RefObject<E | null> {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = React.useRef<E>(null);\n React.useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb: KeyborgCallback = next => {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n };\n keyborg.subscribe(cb);\n return () => keyborg.unsubscribe(cb);\n }\n }, [keyborg]);\n\n return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement | null>, attribute: string, value: boolean) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, '');\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n"],"names":["React","createKeyborg","KEYBOARD_NAV_ATTRIBUTE","useFluent_unstable","useFluent","useKeyboardNavAttribute","targetDocument","keyborg","useMemo","defaultView","ref","useRef","useEffect","setBooleanAttribute","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAGlF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,MAAMQ,OAAO,CAAC,IAAMF,kBAAkBL,cAAcK,eAAeG,WAAW,GAAI;QAACH;KAAe;IAClH,MAAMI,MAAMV,MAAMW,MAAM,CAAI;IAC5BX,MAAMY,SAAS,CAAC;QACd,IAAIL,SAAS;YACXM,oBAAoBH,KAAKR,wBAAwBK,QAAQO,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA;gBAC1BH,oBAAoBH,KAAKR,wBAAwBc;YACnD;YACAT,QAAQU,SAAS,CAACF;YAClB,OAAO,IAAMR,QAAQW,WAAW,CAACH;QACnC;IACF,GAAG;QAACR;KAAQ;IAEZ,OAAOG;AACT;AAEA,SAASG,oBAAoBM,UAA+C,EAAEC,SAAiB,EAAEC,KAAc;IAC7G,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF;IACA,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(\n options: UseFocusVisibleOptions = {},\n): React.RefObject<TElement> {\n const contextValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"names":["useFocusVisible","options","contextValue","useFluent","scopeRef","React","useRef","targetDocument","useEffect","defaultView","current","applyFocusVisiblePolyfill"],"mappings":"AAAA;;;;;+BAWgBA;;;eAAAA;;;;iEATO;qCACyB;sCAEN;AAMnC,SAASA,gBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAW;QAEjBL;IAAvB,MAAMM,iBAAiBN,CAAAA,0BAAAA,QAAQM,cAAc,cAAtBN,qCAAAA,0BAA0BC,aAAaK,cAAc;IAE5EF,OAAMG,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIL,SAASM,OAAO,EAAE;YACnD,OAAOC,IAAAA,+CAAyB,EAACP,SAASM,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACL;QAAUG;KAAe;IAE7B,OAAOH;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusVisible.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';\n\ntype UseFocusVisibleOptions = {\n targetDocument?: Document;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(\n options: UseFocusVisibleOptions = {},\n): React.RefObject<TElement | null> {\n const contextValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contextValue.targetDocument;\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n\n return scopeRef;\n}\n"],"names":["useFocusVisible","options","contextValue","useFluent","scopeRef","React","useRef","targetDocument","useEffect","defaultView","current","applyFocusVisiblePolyfill"],"mappings":"AAAA;;;;;+BAWgBA;;;eAAAA;;;;iEATO;qCACyB;sCAEN;AAMnC,SAASA,gBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAW;QAEjBL;IAAvB,MAAMM,iBAAiBN,CAAAA,0BAAAA,QAAQM,cAAc,cAAtBN,qCAAAA,0BAA0BC,aAAaK,cAAc;IAE5EF,OAAMG,SAAS,CAAC;QACd,IAAID,CAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,KAAIL,SAASM,OAAO,EAAE;YACnD,OAAOC,IAAAA,+CAAyB,EAACP,SAASM,OAAO,EAAEH,eAAeE,WAAW;QAC/E;IACF,GAAG;QAACL;QAAUG;KAAe;IAE7B,OAAOH;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React.RefObject<TElement> {\n const { targetDocument } = useFluent();\n const elementRef = React.useRef<TElement>(null);\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n\n return elementRef;\n}\n"],"names":["useFocusWithin","targetDocument","useFluent","elementRef","React","useRef","useEffect","defaultView","current","applyFocusWithinPolyfill"],"mappings":"AAAA;;;;;+BAWgBA;;;eAAAA;;;;iEATO;qCACyB;qCACP;AAOlC,SAASA;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,aAAaC,OAAMC,MAAM,CAAW;IAE1CD,OAAME,SAAS,CAAC;QACd,IAAIL,CAAAA,2BAAAA,qCAAAA,eAAgBM,WAAW,KAAIJ,WAAWK,OAAO,EAAE;YACrD,OAAOC,IAAAA,6CAAwB,EAACN,WAAWK,OAAO,EAAEP,eAAeM,WAAW;QAChF;IACF,GAAG;QAACJ;QAAYF;KAAe;IAE/B,OAAOE;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFocusWithin.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { applyFocusWithinPolyfill } from '../focus/focusWithinPolyfill';\n\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function useFocusWithin<TElement extends HTMLElement = HTMLElement>(): React.RefObject<TElement | null> {\n const { targetDocument } = useFluent();\n const elementRef = React.useRef<TElement>(null);\n\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n\n return elementRef;\n}\n"],"names":["useFocusWithin","targetDocument","useFluent","elementRef","React","useRef","useEffect","defaultView","current","applyFocusWithinPolyfill"],"mappings":"AAAA;;;;;+BAWgBA;;;eAAAA;;;;iEATO;qCACyB;qCACP;AAOlC,SAASA;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,aAAaC,OAAMC,MAAM,CAAW;IAE1CD,OAAME,SAAS,CAAC;QACd,IAAIL,CAAAA,2BAAAA,qCAAAA,eAAgBM,WAAW,KAAIJ,WAAWK,OAAO,EAAE;YACrD,OAAOC,IAAAA,6CAAwB,EAACN,WAAWK,OAAO,EAAEP,eAAeM,WAAW;QAChF;IACF,GAAG;QAACJ;QAAYF;KAAe;IAE/B,OAAOE;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createKeyborg } from 'keyborg';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>(): React.RefObject<E> {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = React.useRef<E>(null);\n React.useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb: KeyborgCallback = next => {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n };\n keyborg.subscribe(cb);\n return () => keyborg.unsubscribe(cb);\n }\n }, [keyborg]);\n return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement>, attribute: string, value: boolean) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, '');\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n"],"names":["useKeyboardNavAttribute","targetDocument","useFluent","keyborg","React","useMemo","createKeyborg","defaultView","ref","useRef","useEffect","setBooleanAttribute","KEYBOARD_NAV_ATTRIBUTE","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA;;;;;+BAagBA;;;eAAAA;;;;iEAXO;yBACO;2BACS;qCACS;AAQzC,SAASA;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,OAAMC,OAAO,CAAC,IAAMJ,kBAAkBK,IAAAA,sBAAa,EAACL,eAAeM,WAAW,GAAI;QAACN;KAAe;IAClH,MAAMO,MAAMJ,OAAMK,MAAM,CAAI;IAC5BL,OAAMM,SAAS,CAAC;QACd,IAAIP,SAAS;YACXQ,oBAAoBH,KAAKI,iCAAsB,EAAET,QAAQU,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA;gBAC1BJ,oBAAoBH,KAAKI,iCAAsB,EAAEG;YACnD;YACAZ,QAAQa,SAAS,CAACF;YAClB,OAAO,IAAMX,QAAQc,WAAW,CAACH;QACnC;IACF,GAAG;QAACX;KAAQ;
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useKeyboardNavAttribute.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createKeyborg } from 'keyborg';\nimport { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { KeyborgCallback } from 'keyborg';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute<E extends HTMLElement>(): React.RefObject<E | null> {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = React.useRef<E>(null);\n React.useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb: KeyborgCallback = next => {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n };\n keyborg.subscribe(cb);\n return () => keyborg.unsubscribe(cb);\n }\n }, [keyborg]);\n\n return ref;\n}\n\nfunction setBooleanAttribute(elementRef: React.RefObject<HTMLElement | null>, attribute: string, value: boolean) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, '');\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n"],"names":["useKeyboardNavAttribute","targetDocument","useFluent","keyborg","React","useMemo","createKeyborg","defaultView","ref","useRef","useEffect","setBooleanAttribute","KEYBOARD_NAV_ATTRIBUTE","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":"AAAA;;;;;+BAagBA;;;eAAAA;;;;iEAXO;yBACO;2BACS;qCACS;AAQzC,SAASA;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,OAAMC,OAAO,CAAC,IAAMJ,kBAAkBK,IAAAA,sBAAa,EAACL,eAAeM,WAAW,GAAI;QAACN;KAAe;IAClH,MAAMO,MAAMJ,OAAMK,MAAM,CAAI;IAC5BL,OAAMM,SAAS,CAAC;QACd,IAAIP,SAAS;YACXQ,oBAAoBH,KAAKI,iCAAsB,EAAET,QAAQU,wBAAwB;YACjF,MAAMC,KAAsBC,CAAAA;gBAC1BJ,oBAAoBH,KAAKI,iCAAsB,EAAEG;YACnD;YACAZ,QAAQa,SAAS,CAACF;YAClB,OAAO,IAAMX,QAAQc,WAAW,CAACH;QACnC;IACF,GAAG;QAACX;KAAQ;IAEZ,OAAOK;AACT;AAEA,SAASG,oBAAoBO,UAA+C,EAAEC,SAAiB,EAAEC,KAAc;IAC7G,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF;IACA,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "9.26.
|
|
3
|
+
"version": "9.26.9",
|
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@fluentui/react-shared-contexts": "^9.25.2",
|
|
21
21
|
"@fluentui/react-theme": "^9.2.0",
|
|
22
|
-
"@fluentui/react-utilities": "^9.25.
|
|
22
|
+
"@fluentui/react-utilities": "^9.25.3",
|
|
23
23
|
"@griffel/react": "^1.5.22",
|
|
24
24
|
"@swc/helpers": "^0.5.1",
|
|
25
25
|
"keyborg": "^2.6.0",
|