@fluentui/react-tabster 9.18.0 → 9.19.1
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 +23 -3
- package/dist/index.d.ts +4 -0
- package/lib/focus/focusVisiblePolyfill.js +3 -1
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useKeyborg.js +19 -0
- package/lib/hooks/useKeyborg.js.map +1 -0
- package/lib/hooks/useOnKeyboardNavigationChange.js +2 -11
- package/lib/hooks/useOnKeyboardNavigationChange.js.map +1 -1
- package/lib/hooks/useSetKeyboardNavigation.js +11 -0
- package/lib/hooks/useSetKeyboardNavigation.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js +3 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/hooks/index.js +1 -0
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useKeyborg.js +26 -0
- package/lib-commonjs/hooks/useKeyborg.js.map +1 -0
- package/lib-commonjs/hooks/useOnKeyboardNavigationChange.js +2 -11
- package/lib-commonjs/hooks/useOnKeyboardNavigationChange.js.map +1 -1
- package/lib-commonjs/hooks/useSetKeyboardNavigation.js +21 -0
- package/lib-commonjs/hooks/useSetKeyboardNavigation.js.map +1 -0
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -1,18 +1,38 @@
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
2
2
|
|
3
|
-
This log was last generated on Tue,
|
3
|
+
This log was last generated on Tue, 20 Feb 2024 14:15:29 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.19.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.19.1)
|
8
|
+
|
9
|
+
Tue, 20 Feb 2024 14:15:29 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.19.0..@fluentui/react-tabster_v9.19.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- fix: focus-visible polyfill should only register in scope ([PR #30517](https://github.com/microsoft/fluentui/pull/30517) by lingfangao@hotmail.com)
|
15
|
+
- Active modal checks if an element outside of it is a virtual child of a modal before setting aria-hidden.' ([PR #30501](https://github.com/microsoft/fluentui/pull/30501) by marata@microsoft.com)
|
16
|
+
- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
17
|
+
|
18
|
+
## [9.19.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.19.0)
|
19
|
+
|
20
|
+
Tue, 06 Feb 2024 17:55:20 GMT
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.18.0..@fluentui/react-tabster_v9.19.0)
|
22
|
+
|
23
|
+
### Minor changes
|
24
|
+
|
25
|
+
- feat: useSetKeyboardNavigation hook ([PR #30316](https://github.com/microsoft/fluentui/pull/30316) by lingfangao@hotmail.com)
|
26
|
+
|
7
27
|
## [9.18.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.18.0)
|
8
28
|
|
9
|
-
Tue, 30 Jan 2024 23:
|
29
|
+
Tue, 30 Jan 2024 23:16:53 GMT
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.17.4..@fluentui/react-tabster_v9.18.0)
|
11
31
|
|
12
32
|
### Minor changes
|
13
33
|
|
14
34
|
- Optional ShadowDOM support. ([PR #30429](https://github.com/microsoft/fluentui/pull/30429) by marata@microsoft.com)
|
15
|
-
- Bump @fluentui/react-utilities to v9.18.0 ([PR #
|
35
|
+
- Bump @fluentui/react-utilities to v9.18.0 ([PR #29983](https://github.com/microsoft/fluentui/pull/29983) by beachball)
|
16
36
|
|
17
37
|
### Patches
|
18
38
|
|
package/dist/index.d.ts
CHANGED
@@ -280,6 +280,10 @@ export declare function useRestoreFocusSource(): TabsterTypes.TabsterDOMAttribut
|
|
280
280
|
*/
|
281
281
|
export declare function useRestoreFocusTarget(): TabsterTypes.TabsterDOMAttribute;
|
282
282
|
|
283
|
+
/**
|
284
|
+
*/
|
285
|
+
export declare function useSetKeyboardNavigation(): (isNavigatingWithKeyboard: boolean) => void;
|
286
|
+
|
283
287
|
/**
|
284
288
|
* @internal
|
285
289
|
* Hook that returns tabster attributes while ensuring tabster exists
|
@@ -48,7 +48,9 @@ import { FOCUS_VISIBLE_ATTR } from './constants';
|
|
48
48
|
scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
|
49
49
|
scope.addEventListener('focusout', blurListener);
|
50
50
|
scope.focusVisible = true;
|
51
|
-
|
51
|
+
if (scope.contains(targetWindow.document.activeElement)) {
|
52
|
+
registerElementIfNavigating(targetWindow.document.activeElement);
|
53
|
+
}
|
52
54
|
// Return disposer
|
53
55
|
return ()=>{
|
54
56
|
disposeCurrentElement();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /**\n * Current element with focus visible in state\n */\n current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n function registerElementIfNavigating(el: EventTarget | HTMLElement | null) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n disposeCurrentElement();\n const target = e.composedPath()[0];\n registerElementIfNavigating(target);\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n disposeCurrentElement();\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n registerElementIfNavigating(targetWindow.document.activeElement);\n\n // Return disposer\n return () => {\n disposeCurrentElement();\n\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n\n disposeKeyborg(keyborg);\n };\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"],"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","setAttribute","disposeCurrentElement","removeAttribute","subscribe","keyborgListener","e","target","composedPath","blurListener","relatedTarget","contains","addEventListener","focusVisible","document","activeElement","removeEventListener","parentElement"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,SAASC,kBAAkB,QAAQ,cAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,SAASM,4BAA4BC,EAAoC;QACvE,IAAIF,QAAQG,wBAAwB,MAAMf,cAAcc,KAAK;YAC3DJ,MAAMC,OAAO,GAAGG;YAChBA,GAAGE,YAAY,CAACZ,oBAAoB;QACtC;IACF;IAEA,SAASa;QACP,IAAIP,MAAMC,OAAO,EAAE;YACjBD,MAAMC,OAAO,CAACO,eAAe,CAACd;YAC9BM,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,iEAAiE;IACjEG,QAAQO,SAAS,CAACJ,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BE;QACF;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMG,kBAAkB,CAACC;QACvBJ;QACA,MAAMK,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCV,4BAA4BS;IAC9B;IAEA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAKzB,cAAcqB,EAAEI,aAAa,KAAK,CAACnB,MAAMoB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5FR;QACF;IACF;IAEAX,MAAMqB,gBAAgB,CAAC1B,iBAAiBmB;IACxCd,MAAMqB,gBAAgB,CAAC,YAAYH;IAClClB,MAA2CsB,YAAY,GAAG;
|
1
|
+
{"version":3,"sources":["focusVisiblePolyfill.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\n\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n\n/**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\ntype ListenerOverride = (evt: Event) => void;\n\ntype FocusVisibleState = {\n /**\n * Current element with focus visible in state\n */\n current: HTMLElement | undefined;\n};\n\ntype HTMLElementWithFocusVisibleScope = {\n focusVisible: boolean | undefined;\n} & HTMLElement;\n\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return () => undefined;\n }\n\n const state: FocusVisibleState = {\n current: undefined,\n };\n\n const keyborg = createKeyborg(targetWindow);\n\n function registerElementIfNavigating(el: EventTarget | HTMLElement | null) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\n }\n });\n\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e: KeyborgFocusInEvent) => {\n disposeCurrentElement();\n const target = e.composedPath()[0];\n registerElementIfNavigating(target);\n };\n\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget))) {\n disposeCurrentElement();\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n if (scope.contains(targetWindow.document.activeElement)) {\n registerElementIfNavigating(targetWindow.document.activeElement);\n }\n\n // Return disposer\n return () => {\n disposeCurrentElement();\n\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n\n disposeKeyborg(keyborg);\n };\n}\n\nfunction alreadyInScope(el: HTMLElement | null | undefined): boolean {\n if (!el) {\n return false;\n }\n\n if ((el as HTMLElementWithFocusVisibleScope).focusVisible) {\n return true;\n }\n\n return alreadyInScope(el?.parentElement);\n}\n"],"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","setAttribute","disposeCurrentElement","removeAttribute","subscribe","keyborgListener","e","target","composedPath","blurListener","relatedTarget","contains","addEventListener","focusVisible","document","activeElement","removeEventListener","parentElement"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AAE9F,SAASC,kBAAkB,QAAQ,cAAc;AAoBjD;;;;CAIC,GACD,OAAO,SAASC,0BAA0BC,KAAkB,EAAEC,YAAoB;IAChF,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf;IAEA,MAAMC,QAA2B;QAC/BC,SAASF;IACX;IAEA,MAAMG,UAAUV,cAAcK;IAE9B,SAASM,4BAA4BC,EAAoC;QACvE,IAAIF,QAAQG,wBAAwB,MAAMf,cAAcc,KAAK;YAC3DJ,MAAMC,OAAO,GAAGG;YAChBA,GAAGE,YAAY,CAACZ,oBAAoB;QACtC;IACF;IAEA,SAASa;QACP,IAAIP,MAAMC,OAAO,EAAE;YACjBD,MAAMC,OAAO,CAACO,eAAe,CAACd;YAC9BM,MAAMC,OAAO,GAAGF;QAClB;IACF;IAEA,iEAAiE;IACjEG,QAAQO,SAAS,CAACJ,CAAAA;QAChB,IAAI,CAACA,0BAA0B;YAC7BE;QACF;IACF;IAEA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMG,kBAAkB,CAACC;QACvBJ;QACA,MAAMK,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCV,4BAA4BS;IAC9B;IAEA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QACpB,IAAI,CAACA,EAAEI,aAAa,IAAKzB,cAAcqB,EAAEI,aAAa,KAAK,CAACnB,MAAMoB,QAAQ,CAACL,EAAEI,aAAa,GAAI;YAC5FR;QACF;IACF;IAEAX,MAAMqB,gBAAgB,CAAC1B,iBAAiBmB;IACxCd,MAAMqB,gBAAgB,CAAC,YAAYH;IAClClB,MAA2CsB,YAAY,GAAG;IAE3D,IAAItB,MAAMoB,QAAQ,CAACnB,aAAasB,QAAQ,CAACC,aAAa,GAAG;QACvDjB,4BAA4BN,aAAasB,QAAQ,CAACC,aAAa;IACjE;IAEA,kBAAkB;IAClB,OAAO;QACLb;QAEAX,MAAMyB,mBAAmB,CAAC9B,iBAAiBmB;QAC3Cd,MAAMyB,mBAAmB,CAAC,YAAYP;QACtC,OAAO,AAAClB,MAA2CsB,YAAY;QAE/DzB,eAAeS;IACjB;AACF;AAEA,SAASJ,eAAeM,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCc,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOpB,eAAeM,eAAAA,yBAAAA,GAAIkB,aAAa;AACzC"}
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useOnKeyboardNavigationChange';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC;AAChD,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB"}
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useOnKeyboardNavigationChange';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\nexport * from './useSetKeyboardNavigation';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC;AAChD,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,6BAA6B"}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { createKeyborg, disposeKeyborg } from 'keyborg';
|
3
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
4
|
+
/**
|
5
|
+
* @internal
|
6
|
+
* Instantiates [keyborg](https://github.com/microsoft/keyborg)
|
7
|
+
* @returns - keyborg instance
|
8
|
+
*/ export function useKeyborg() {
|
9
|
+
const { targetDocument } = useFluent();
|
10
|
+
const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [
|
11
|
+
targetDocument
|
12
|
+
]);
|
13
|
+
React.useEffect(()=>{
|
14
|
+
return ()=>keyborg && disposeKeyborg(keyborg);
|
15
|
+
}, [
|
16
|
+
keyborg
|
17
|
+
]);
|
18
|
+
return keyborg;
|
19
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useKeyborg.ts"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */\nexport function useKeyborg() {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n\n React.useEffect(() => {\n return () => keyborg && disposeKeyborg(keyborg);\n }, [keyborg]);\n\n return keyborg;\n}\n"],"names":["React","createKeyborg","disposeKeyborg","useFluent_unstable","useFluent","useKeyborg","targetDocument","keyborg","useMemo","defaultView","useEffect"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,cAAc,QAAQ,UAAU;AACxD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,UAAUP,MAAMQ,OAAO,CAAC,IAAMF,kBAAkBL,cAAcK,eAAeG,WAAW,GAAI;QAACH;KAAe;IAElHN,MAAMU,SAAS,CAAC;QACd,OAAO,IAAMH,WAAWL,eAAeK;IACzC,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT"}
|
@@ -1,17 +1,13 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { createKeyborg, disposeKeyborg } from 'keyborg';
|
3
|
-
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
4
2
|
import { useEventCallback } from '@fluentui/react-utilities';
|
3
|
+
import { useKeyborg } from './useKeyborg';
|
5
4
|
/**
|
6
5
|
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes
|
7
6
|
* in the keyboard navigation mode.
|
8
7
|
*
|
9
8
|
* @param callback - called every time the keyboard navigation state changes
|
10
9
|
*/ export function useOnKeyboardNavigationChange(callback) {
|
11
|
-
const
|
12
|
-
const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [
|
13
|
-
targetDocument
|
14
|
-
]);
|
10
|
+
const keyborg = useKeyborg();
|
15
11
|
const eventCallback = useEventCallback(callback);
|
16
12
|
React.useEffect(()=>{
|
17
13
|
if (keyborg) {
|
@@ -25,9 +21,4 @@ import { useEventCallback } from '@fluentui/react-utilities';
|
|
25
21
|
keyborg,
|
26
22
|
eventCallback
|
27
23
|
]);
|
28
|
-
React.useEffect(()=>{
|
29
|
-
return ()=>keyborg && disposeKeyborg(keyborg);
|
30
|
-
}, [
|
31
|
-
keyborg
|
32
|
-
]);
|
33
24
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useOnKeyboardNavigationChange.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
1
|
+
{"version":3,"sources":["useOnKeyboardNavigationChange.ts"],"sourcesContent":["import * as React from 'react';\nimport type { KeyborgCallback } from 'keyborg';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useKeyborg } from './useKeyborg';\n\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */\nexport function useOnKeyboardNavigationChange(callback: (isNavigatingWithKeyboard: boolean) => void) {\n const keyborg = useKeyborg();\n const eventCallback = useEventCallback(callback);\n React.useEffect(() => {\n if (keyborg) {\n const cb: KeyborgCallback = next => {\n eventCallback(next);\n };\n keyborg.subscribe(cb);\n return () => keyborg.unsubscribe(cb);\n }\n }, [keyborg, eventCallback]);\n}\n"],"names":["React","useEventCallback","useKeyborg","useOnKeyboardNavigationChange","callback","keyborg","eventCallback","useEffect","cb","next","subscribe","unsubscribe"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,UAAU,QAAQ,eAAe;AAE1C;;;;;CAKC,GACD,OAAO,SAASC,8BAA8BC,QAAqD;IACjG,MAAMC,UAAUH;IAChB,MAAMI,gBAAgBL,iBAAiBG;IACvCJ,MAAMO,SAAS,CAAC;QACd,IAAIF,SAAS;YACX,MAAMG,KAAsBC,CAAAA;gBAC1BH,cAAcG;YAChB;YACAJ,QAAQK,SAAS,CAACF;YAClB,OAAO,IAAMH,QAAQM,WAAW,CAACH;QACnC;IACF,GAAG;QAACH;QAASC;KAAc;AAC7B"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useKeyborg } from './useKeyborg';
|
3
|
+
/**
|
4
|
+
*/ export function useSetKeyboardNavigation() {
|
5
|
+
const keyborg = useKeyborg();
|
6
|
+
return React.useCallback((isNavigatingWithKeyboard)=>{
|
7
|
+
keyborg === null || keyborg === void 0 ? void 0 : keyborg.setVal(isNavigatingWithKeyboard);
|
8
|
+
}, [
|
9
|
+
keyborg
|
10
|
+
]);
|
11
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useSetKeyboardNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborg } from './useKeyborg';\n\n/**\n */\nexport function useSetKeyboardNavigation() {\n const keyborg = useKeyborg();\n\n return React.useCallback(\n (isNavigatingWithKeyboard: boolean) => {\n keyborg?.setVal(isNavigatingWithKeyboard);\n },\n [keyborg],\n );\n}\n"],"names":["React","useKeyborg","useSetKeyboardNavigation","keyborg","useCallback","isNavigatingWithKeyboard","setVal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,eAAe;AAE1C;CACC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF;IAEhB,OAAOD,MAAMI,WAAW,CACtB,CAACC;QACCF,oBAAAA,8BAAAA,QAASG,MAAM,CAACD;IAClB,GACA;QAACF;KAAQ;AAEb"}
|
package/lib/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';
|
1
|
+
export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange, useSetKeyboardNavigation } from './hooks/index';
|
2
2
|
export { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';
|
3
3
|
export { applyFocusVisiblePolyfill } from './focus/index';
|
4
4
|
import { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n useArrowNavigationGroup,\n useFocusableGroup,\n useFocusFinders,\n useFocusVisible,\n useFocusWithin,\n useKeyboardNavAttribute,\n useModalAttributes,\n useTabsterAttributes,\n useObservedElement,\n useFocusObserved,\n useMergedTabsterAttributes_unstable,\n useRestoreFocusSource,\n useRestoreFocusTarget,\n useUncontrolledFocus,\n useOnKeyboardNavigationChange,\n} from './hooks/index';\nexport type {\n UseArrowNavigationGroupOptions,\n UseFocusableGroupOptions,\n UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n CreateCustomFocusIndicatorStyleOptions,\n CreateFocusOutlineStyleOptions,\n FocusOutlineOffset,\n FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';\n\nexport type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n\n// @internal (undocumented)\nexport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","Types","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","KEYBORG_FOCUSIN"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n useArrowNavigationGroup,\n useFocusableGroup,\n useFocusFinders,\n useFocusVisible,\n useFocusWithin,\n useKeyboardNavAttribute,\n useModalAttributes,\n useTabsterAttributes,\n useObservedElement,\n useFocusObserved,\n useMergedTabsterAttributes_unstable,\n useRestoreFocusSource,\n useRestoreFocusTarget,\n useUncontrolledFocus,\n useOnKeyboardNavigationChange,\n useSetKeyboardNavigation,\n} from './hooks/index';\nexport type {\n UseArrowNavigationGroupOptions,\n UseFocusableGroupOptions,\n UseModalAttributesOptions,\n} from './hooks/index';\n\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\n\nexport type {\n CreateCustomFocusIndicatorStyleOptions,\n CreateFocusOutlineStyleOptions,\n FocusOutlineOffset,\n FocusOutlineStyleOptions,\n} from './focus/index';\n\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';\n\nexport type TabsterDOMAttribute = TabsterTypes.TabsterDOMAttribute;\n\nexport type { KeyborgFocusInEvent } from 'keyborg';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n\n// @internal (undocumented)\nexport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","useSetKeyboardNavigation","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","Types","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent","KEYBORG_FOCUSIN"],"mappings":"AAAA,SACEA,uBAAuB,EACvBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,uBAAuB,EACvBC,kBAAkB,EAClBC,oBAAoB,EACpBC,kBAAkB,EAClBC,gBAAgB,EAChBC,mCAAmC,EACnCC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,wBAAwB,QACnB,gBAAgB;AAOvB,SAASC,+BAA+B,EAAEC,uBAAuB,QAAQ,gBAAgB;AASzF,SAASC,yBAAyB,QAAQ,gBAAgB;AAC1D,SAASC,SAASC,YAAY,EAAEC,8BAA8B,EAAEC,2BAA2B,QAAQ,UAAU;AAK7G,SAASC,eAAe,QAAQ,UAAU;AAE1C,2BAA2B;AAC3B,SAASH,YAAY,EAAEC,8BAA8B,EAAEC,2BAA2B,GAAG"}
|
@@ -54,7 +54,9 @@ function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
54
54
|
scope.addEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
55
55
|
scope.addEventListener('focusout', blurListener);
|
56
56
|
scope.focusVisible = true;
|
57
|
-
|
57
|
+
if (scope.contains(targetWindow.document.activeElement)) {
|
58
|
+
registerElementIfNavigating(targetWindow.document.activeElement);
|
59
|
+
}
|
58
60
|
// Return disposer
|
59
61
|
return ()=>{
|
60
62
|
disposeCurrentElement();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["focusVisiblePolyfill.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */ export function applyFocusVisiblePolyfill(scope, targetWindow) {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return ()=>undefined;\n }\n const state = {\n current: undefined\n };\n const keyborg = createKeyborg(targetWindow);\n function registerElementIfNavigating(el) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe((isNavigatingWithKeyboard)=>{\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\n }\n });\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e)=>{\n disposeCurrentElement();\n const target = e.composedPath()[0];\n registerElementIfNavigating(target);\n };\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e)=>{\n if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {\n disposeCurrentElement();\n }\n };\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.addEventListener('focusout', blurListener);\n scope.focusVisible = true;\n registerElementIfNavigating(targetWindow.document.activeElement);\n // Return disposer\n return ()=>{\n disposeCurrentElement();\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.removeEventListener('focusout', blurListener);\n delete scope.focusVisible;\n disposeKeyborg(keyborg);\n };\n}\nfunction alreadyInScope(el) {\n if (!el) {\n return false;\n }\n if (el.focusVisible) {\n return true;\n }\n return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);\n}\n"],"names":["applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","isHTMLElement","setAttribute","FOCUS_VISIBLE_ATTR","disposeCurrentElement","removeAttribute","subscribe","keyborgListener","e","target","composedPath","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","document","activeElement","removeEventListener","disposeKeyborg","parentElement"],"mappings":";;;;+BAOoBA;;;eAAAA;;;gCAPU;yBACiC;2BAC5B;AAKxB,SAASA,0BAA0BC,KAAK,EAAEC,YAAY;IAC7D,IAAIC,eAAeF,QAAQ;QACvB,uDAAuD;QACvD,OAAO,IAAIG;IACf;IACA,MAAMC,QAAQ;QACVC,SAASF;IACb;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,SAASO,4BAA4BC,EAAE;QACnC,IAAIH,QAAQI,wBAAwB,MAAMC,IAAAA,6BAAa,EAACF,KAAK;YACzDL,MAAMC,OAAO,GAAGI;YAChBA,GAAGG,YAAY,CAACC,6BAAkB,EAAE;QACxC;IACJ;IACA,SAASC;QACL,IAAIV,MAAMC,OAAO,EAAE;YACfD,MAAMC,OAAO,CAACU,eAAe,CAACF,6BAAkB;YAChDT,MAAMC,OAAO,GAAGF;QACpB;IACJ;IACA,iEAAiE;IACjEG,QAAQU,SAAS,CAAC,CAACN;QACf,IAAI,CAACA,0BAA0B;YAC3BI;QACJ;IACJ;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMG,kBAAkB,CAACC;QACrBJ;QACA,MAAMK,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCZ,4BAA4BW;IAChC;IACA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QAClB,IAAI,CAACA,EAAEI,aAAa,IAAIX,IAAAA,6BAAa,EAACO,EAAEI,aAAa,KAAK,CAACtB,MAAMuB,QAAQ,CAACL,EAAEI,aAAa,GAAG;YACxFR;QACJ;IACJ;IACAd,MAAMwB,gBAAgB,CAACC,wBAAe,EAAER;IACxCjB,MAAMwB,gBAAgB,CAAC,YAAYH;IACnCrB,MAAM0B,YAAY,GAAG;
|
1
|
+
{"version":3,"sources":["focusVisiblePolyfill.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_VISIBLE_ATTR } from './constants';\n/**\n * @internal\n * @param scope - Applies the ponyfill to all DOM children\n * @param targetWindow - window\n */ export function applyFocusVisiblePolyfill(scope, targetWindow) {\n if (alreadyInScope(scope)) {\n // Focus visible polyfill already applied at this scope\n return ()=>undefined;\n }\n const state = {\n current: undefined\n };\n const keyborg = createKeyborg(targetWindow);\n function registerElementIfNavigating(el) {\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {\n state.current = el;\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n }\n }\n function disposeCurrentElement() {\n if (state.current) {\n state.current.removeAttribute(FOCUS_VISIBLE_ATTR);\n state.current = undefined;\n }\n }\n // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe((isNavigatingWithKeyboard)=>{\n if (!isNavigatingWithKeyboard) {\n disposeCurrentElement();\n }\n });\n // Keyborg's focusin event is delegated so it's only registered once on the window\n // and contains metadata about the focus event\n const keyborgListener = (e)=>{\n disposeCurrentElement();\n const target = e.composedPath()[0];\n registerElementIfNavigating(target);\n };\n // Make sure that when focus leaves the scope, the focus visible class is removed\n const blurListener = (e)=>{\n if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {\n disposeCurrentElement();\n }\n };\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.addEventListener('focusout', blurListener);\n scope.focusVisible = true;\n if (scope.contains(targetWindow.document.activeElement)) {\n registerElementIfNavigating(targetWindow.document.activeElement);\n }\n // Return disposer\n return ()=>{\n disposeCurrentElement();\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.removeEventListener('focusout', blurListener);\n delete scope.focusVisible;\n disposeKeyborg(keyborg);\n };\n}\nfunction alreadyInScope(el) {\n if (!el) {\n return false;\n }\n if (el.focusVisible) {\n return true;\n }\n return alreadyInScope(el === null || el === void 0 ? void 0 : el.parentElement);\n}\n"],"names":["applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","registerElementIfNavigating","el","isNavigatingWithKeyboard","isHTMLElement","setAttribute","FOCUS_VISIBLE_ATTR","disposeCurrentElement","removeAttribute","subscribe","keyborgListener","e","target","composedPath","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","document","activeElement","removeEventListener","disposeKeyborg","parentElement"],"mappings":";;;;+BAOoBA;;;eAAAA;;;gCAPU;yBACiC;2BAC5B;AAKxB,SAASA,0BAA0BC,KAAK,EAAEC,YAAY;IAC7D,IAAIC,eAAeF,QAAQ;QACvB,uDAAuD;QACvD,OAAO,IAAIG;IACf;IACA,MAAMC,QAAQ;QACVC,SAASF;IACb;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,SAASO,4BAA4BC,EAAE;QACnC,IAAIH,QAAQI,wBAAwB,MAAMC,IAAAA,6BAAa,EAACF,KAAK;YACzDL,MAAMC,OAAO,GAAGI;YAChBA,GAAGG,YAAY,CAACC,6BAAkB,EAAE;QACxC;IACJ;IACA,SAASC;QACL,IAAIV,MAAMC,OAAO,EAAE;YACfD,MAAMC,OAAO,CAACU,eAAe,CAACF,6BAAkB;YAChDT,MAAMC,OAAO,GAAGF;QACpB;IACJ;IACA,iEAAiE;IACjEG,QAAQU,SAAS,CAAC,CAACN;QACf,IAAI,CAACA,0BAA0B;YAC3BI;QACJ;IACJ;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMG,kBAAkB,CAACC;QACrBJ;QACA,MAAMK,SAASD,EAAEE,YAAY,EAAE,CAAC,EAAE;QAClCZ,4BAA4BW;IAChC;IACA,iFAAiF;IACjF,MAAME,eAAe,CAACH;QAClB,IAAI,CAACA,EAAEI,aAAa,IAAIX,IAAAA,6BAAa,EAACO,EAAEI,aAAa,KAAK,CAACtB,MAAMuB,QAAQ,CAACL,EAAEI,aAAa,GAAG;YACxFR;QACJ;IACJ;IACAd,MAAMwB,gBAAgB,CAACC,wBAAe,EAAER;IACxCjB,MAAMwB,gBAAgB,CAAC,YAAYH;IACnCrB,MAAM0B,YAAY,GAAG;IACrB,IAAI1B,MAAMuB,QAAQ,CAACtB,aAAa0B,QAAQ,CAACC,aAAa,GAAG;QACrDpB,4BAA4BP,aAAa0B,QAAQ,CAACC,aAAa;IACnE;IACA,kBAAkB;IAClB,OAAO;QACHd;QACAd,MAAM6B,mBAAmB,CAACJ,wBAAe,EAAER;QAC3CjB,MAAM6B,mBAAmB,CAAC,YAAYR;QACtC,OAAOrB,MAAM0B,YAAY;QACzBI,IAAAA,uBAAc,EAACxB;IACnB;AACJ;AACA,SAASJ,eAAeO,EAAE;IACtB,IAAI,CAACA,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGiB,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOxB,eAAeO,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGsB,aAAa;AAClF"}
|
@@ -17,3 +17,4 @@ _export_star._(require("./useMergeTabsterAttributes"), exports);
|
|
17
17
|
_export_star._(require("./useFocusObserved"), exports);
|
18
18
|
_export_star._(require("./useRestoreFocus"), exports);
|
19
19
|
_export_star._(require("./useUncontrolledFocus"), exports);
|
20
|
+
_export_star._(require("./useSetKeyboardNavigation"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useOnKeyboardNavigationChange';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './useArrowNavigationGroup';\nexport * from './useFocusableGroup';\nexport * from './useFocusFinders';\nexport * from './useFocusVisible';\nexport * from './useFocusWithin';\nexport * from './useKeyboardNavAttribute';\nexport * from './useOnKeyboardNavigationChange';\nexport * from './useModalAttributes';\nexport * from './useTabsterAttributes';\nexport * from './useObservedElement';\nexport * from './useMergeTabsterAttributes';\nexport * from './useFocusObserved';\nexport * from './useRestoreFocus';\nexport * from './useUncontrolledFocus';\nexport * from './useSetKeyboardNavigation';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useKeyborg", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return useKeyborg;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _keyborg = require("keyborg");
|
14
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
15
|
+
function useKeyborg() {
|
16
|
+
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
17
|
+
const keyborg = _react.useMemo(()=>targetDocument && (0, _keyborg.createKeyborg)(targetDocument.defaultView), [
|
18
|
+
targetDocument
|
19
|
+
]);
|
20
|
+
_react.useEffect(()=>{
|
21
|
+
return ()=>keyborg && (0, _keyborg.disposeKeyborg)(keyborg);
|
22
|
+
}, [
|
23
|
+
keyborg
|
24
|
+
]);
|
25
|
+
return keyborg;
|
26
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useKeyborg.js"],"sourcesContent":["import * as React from 'react';\nimport { createKeyborg, disposeKeyborg } from 'keyborg';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n/**\n * @internal\n * Instantiates [keyborg](https://github.com/microsoft/keyborg)\n * @returns - keyborg instance\n */ export function useKeyborg() {\n const { targetDocument } = useFluent();\n const keyborg = React.useMemo(()=>targetDocument && createKeyborg(targetDocument.defaultView), [\n targetDocument\n ]);\n React.useEffect(()=>{\n return ()=>keyborg && disposeKeyborg(keyborg);\n }, [\n keyborg\n ]);\n return keyborg;\n}\n"],"names":["useKeyborg","targetDocument","useFluent","keyborg","React","useMemo","createKeyborg","defaultView","useEffect","disposeKeyborg"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;yBACuB;qCACE;AAKrC,SAASA;IAChB,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,OAAMC,OAAO,CAAC,IAAIJ,kBAAkBK,IAAAA,sBAAa,EAACL,eAAeM,WAAW,GAAG;QAC3FN;KACH;IACDG,OAAMI,SAAS,CAAC;QACZ,OAAO,IAAIL,WAAWM,IAAAA,uBAAc,EAACN;IACzC,GAAG;QACCA;KACH;IACD,OAAOA;AACX"}
|
@@ -10,14 +10,10 @@ Object.defineProperty(exports, "useOnKeyboardNavigationChange", {
|
|
10
10
|
});
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
-
const _keyborg = require("keyborg");
|
14
|
-
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
15
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
14
|
+
const _useKeyborg = require("./useKeyborg");
|
16
15
|
function useOnKeyboardNavigationChange(callback) {
|
17
|
-
const
|
18
|
-
const keyborg = _react.useMemo(()=>targetDocument && (0, _keyborg.createKeyborg)(targetDocument.defaultView), [
|
19
|
-
targetDocument
|
20
|
-
]);
|
16
|
+
const keyborg = (0, _useKeyborg.useKeyborg)();
|
21
17
|
const eventCallback = (0, _reactutilities.useEventCallback)(callback);
|
22
18
|
_react.useEffect(()=>{
|
23
19
|
if (keyborg) {
|
@@ -31,9 +27,4 @@ function useOnKeyboardNavigationChange(callback) {
|
|
31
27
|
keyborg,
|
32
28
|
eventCallback
|
33
29
|
]);
|
34
|
-
_react.useEffect(()=>{
|
35
|
-
return ()=>keyborg && (0, _keyborg.disposeKeyborg)(keyborg);
|
36
|
-
}, [
|
37
|
-
keyborg
|
38
|
-
]);
|
39
30
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useOnKeyboardNavigationChange.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
1
|
+
{"version":3,"sources":["useOnKeyboardNavigationChange.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useKeyborg } from './useKeyborg';\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and subscribes to changes\n * in the keyboard navigation mode.\n *\n * @param callback - called every time the keyboard navigation state changes\n */ export function useOnKeyboardNavigationChange(callback) {\n const keyborg = useKeyborg();\n const eventCallback = useEventCallback(callback);\n React.useEffect(()=>{\n if (keyborg) {\n const cb = (next)=>{\n eventCallback(next);\n };\n keyborg.subscribe(cb);\n return ()=>keyborg.unsubscribe(cb);\n }\n }, [\n keyborg,\n eventCallback\n ]);\n}\n"],"names":["useOnKeyboardNavigationChange","callback","keyborg","useKeyborg","eventCallback","useEventCallback","React","useEffect","cb","next","subscribe","unsubscribe"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACU;4BACN;AAMhB,SAASA,8BAA8BC,QAAQ;IACtD,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,MAAMC,gBAAgBC,IAAAA,gCAAgB,EAACJ;IACvCK,OAAMC,SAAS,CAAC;QACZ,IAAIL,SAAS;YACT,MAAMM,KAAK,CAACC;gBACRL,cAAcK;YAClB;YACAP,QAAQQ,SAAS,CAACF;YAClB,OAAO,IAAIN,QAAQS,WAAW,CAACH;QACnC;IACJ,GAAG;QACCN;QACAE;KACH;AACL"}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useSetKeyboardNavigation", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return useSetKeyboardNavigation;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _useKeyborg = require("./useKeyborg");
|
14
|
+
function useSetKeyboardNavigation() {
|
15
|
+
const keyborg = (0, _useKeyborg.useKeyborg)();
|
16
|
+
return _react.useCallback((isNavigatingWithKeyboard)=>{
|
17
|
+
keyborg === null || keyborg === void 0 ? void 0 : keyborg.setVal(isNavigatingWithKeyboard);
|
18
|
+
}, [
|
19
|
+
keyborg
|
20
|
+
]);
|
21
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useSetKeyboardNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useKeyborg } from './useKeyborg';\n/**\n */ export function useSetKeyboardNavigation() {\n const keyborg = useKeyborg();\n return React.useCallback((isNavigatingWithKeyboard)=>{\n keyborg === null || keyborg === void 0 ? void 0 : keyborg.setVal(isNavigatingWithKeyboard);\n }, [\n keyborg\n ]);\n}\n"],"names":["useSetKeyboardNavigation","keyborg","useKeyborg","React","useCallback","isNavigatingWithKeyboard","setVal"],"mappings":";;;;+BAGoBA;;;eAAAA;;;;iEAHG;4BACI;AAEhB,SAASA;IAChB,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,OAAOC,OAAMC,WAAW,CAAC,CAACC;QACtBJ,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQK,MAAM,CAACD;IACrE,GAAG;QACCJ;KACH;AACL"}
|
package/lib-commonjs/index.js
CHANGED
@@ -54,6 +54,9 @@ _export(exports, {
|
|
54
54
|
useOnKeyboardNavigationChange: function() {
|
55
55
|
return _index.useOnKeyboardNavigationChange;
|
56
56
|
},
|
57
|
+
useSetKeyboardNavigation: function() {
|
58
|
+
return _index.useSetKeyboardNavigation;
|
59
|
+
},
|
57
60
|
createCustomFocusIndicatorStyle: function() {
|
58
61
|
return _index1.createCustomFocusIndicatorStyle;
|
59
62
|
},
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n// @internal (undocumented)\nexport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent"],"mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,mCAAmC;eAAnCA,0CAAmC;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { useArrowNavigationGroup, useFocusableGroup, useFocusFinders, useFocusVisible, useFocusWithin, useKeyboardNavAttribute, useModalAttributes, useTabsterAttributes, useObservedElement, useFocusObserved, useMergedTabsterAttributes_unstable, useRestoreFocusSource, useRestoreFocusTarget, useUncontrolledFocus, useOnKeyboardNavigationChange, useSetKeyboardNavigation } from './hooks/index';\nexport { createCustomFocusIndicatorStyle, createFocusOutlineStyle } from './focus/index';\nexport { applyFocusVisiblePolyfill } from './focus/index';\nimport { Types as TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from 'tabster';\nexport { KEYBORG_FOCUSIN } from 'keyborg';\n// @internal (undocumented)\nexport { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent };\n"],"names":["useArrowNavigationGroup","useFocusableGroup","useFocusFinders","useFocusVisible","useFocusWithin","useKeyboardNavAttribute","useModalAttributes","useTabsterAttributes","useObservedElement","useFocusObserved","useMergedTabsterAttributes_unstable","useRestoreFocusSource","useRestoreFocusTarget","useUncontrolledFocus","useOnKeyboardNavigationChange","useSetKeyboardNavigation","createCustomFocusIndicatorStyle","createFocusOutlineStyle","applyFocusVisiblePolyfill","KEYBORG_FOCUSIN","TabsterTypes","dispatchGroupperMoveFocusEvent","dispatchMoverMoveFocusEvent"],"mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,mCAAmC;eAAnCA,0CAAmC;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;IAAEC,wBAAwB;eAAxBA,+BAAwB;;IACvWC,+BAA+B;eAA/BA,uCAA+B;;IAAEC,uBAAuB;eAAvBA,+BAAuB;;IACxDC,yBAAyB;eAAzBA,iCAAyB;;IAEzBC,eAAe;eAAfA,wBAAe;;IAEfC,YAAY;eAAZA,cAAY;;IAAEC,8BAA8B;eAA9BA,uCAA8B;;IAAEC,2BAA2B;eAA3BA,oCAA2B;;;uBANsS;wBAC/S;yBAE0B;yBACnE"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tabster",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.19.1",
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,11 +33,11 @@
|
|
33
33
|
"dependencies": {
|
34
34
|
"@fluentui/react-shared-contexts": "^9.14.0",
|
35
35
|
"@fluentui/react-theme": "^9.1.16",
|
36
|
-
"@fluentui/react-utilities": "^9.18.
|
36
|
+
"@fluentui/react-utilities": "^9.18.1",
|
37
37
|
"@griffel/react": "^1.5.14",
|
38
38
|
"@swc/helpers": "^0.5.1",
|
39
39
|
"keyborg": "^2.5.0",
|
40
|
-
"tabster": "^6.0.
|
40
|
+
"tabster": "^6.0.1"
|
41
41
|
},
|
42
42
|
"peerDependencies": {
|
43
43
|
"@types/react": ">=16.14.0 <19.0.0",
|