@fluentui/react-tabster 9.13.6 → 9.14.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.json +45 -1
- package/CHANGELOG.md +25 -2
- package/lib/focus/focusVisiblePolyfill.js +19 -22
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/hooks/useTabster.js +3 -2
- package/lib/hooks/useTabster.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js +19 -22
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/hooks/useTabster.js +2 -1
- package/lib-commonjs/hooks/useTabster.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,51 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 23 Oct 2023 09:48:55 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v9.14.1",
|
|
7
|
+
"version": "9.14.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-tabster",
|
|
13
|
+
"commit": "0c71d4a05d9ce16cca3fdddda4854e265b227ff5",
|
|
14
|
+
"comment": "fix: focus visible polyfill should be initialised/disposed correctly"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 18 Oct 2023 17:54:06 GMT",
|
|
21
|
+
"tag": "@fluentui/react-tabster_v9.14.0",
|
|
22
|
+
"version": "9.14.0",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "lingfangao@hotmail.com",
|
|
27
|
+
"package": "@fluentui/react-tabster",
|
|
28
|
+
"commit": "335cad5169597b51398b75eb44dc40003c29830b",
|
|
29
|
+
"comment": "chore: bump keyborg to 2.1.0"
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"minor": [
|
|
33
|
+
{
|
|
34
|
+
"author": "lingfangao@hotmail.com",
|
|
35
|
+
"package": "@fluentui/react-tabster",
|
|
36
|
+
"commit": "aa6771ed95c5af78f413b3c20068867f032cf4c4",
|
|
37
|
+
"comment": "feat: bump to tabster 4.8.0 in order to support support virtual parents"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"author": "beachball",
|
|
41
|
+
"package": "@fluentui/react-tabster",
|
|
42
|
+
"comment": "Bump @fluentui/react-utilities to v9.15.1",
|
|
43
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"date": "Wed, 11 Oct 2023 13:54:26 GMT",
|
|
6
50
|
"tag": "@fluentui/react-tabster_v9.13.6",
|
|
7
51
|
"version": "9.13.6",
|
|
8
52
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 Oct 2023 09:48:55 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.14.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.14.1)
|
|
8
|
+
|
|
9
|
+
Mon, 23 Oct 2023 09:48:55 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.14.0..@fluentui/react-tabster_v9.14.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: focus visible polyfill should be initialised/disposed correctly ([PR #29564](https://github.com/microsoft/fluentui/pull/29564) by lingfangao@hotmail.com)
|
|
15
|
+
|
|
16
|
+
## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.14.0)
|
|
17
|
+
|
|
18
|
+
Wed, 18 Oct 2023 17:54:06 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.13.6..@fluentui/react-tabster_v9.14.0)
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- feat: bump to tabster 4.8.0 in order to support support virtual parents ([PR #29549](https://github.com/microsoft/fluentui/pull/29549) by lingfangao@hotmail.com)
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.15.1 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- chore: bump keyborg to 2.1.0 ([PR #29520](https://github.com/microsoft/fluentui/pull/29520) by lingfangao@hotmail.com)
|
|
29
|
+
|
|
7
30
|
## [9.13.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.13.6)
|
|
8
31
|
|
|
9
|
-
Wed, 11 Oct 2023 13:
|
|
32
|
+
Wed, 11 Oct 2023 13:54:26 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.13.5..@fluentui/react-tabster_v9.13.6)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
@@ -14,52 +14,49 @@ import { FOCUS_VISIBLE_ATTR } from './constants';
|
|
|
14
14
|
current: undefined
|
|
15
15
|
};
|
|
16
16
|
const keyborg = createKeyborg(targetWindow);
|
|
17
|
+
function registerElementIfNavigating(el) {
|
|
18
|
+
if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(el)) {
|
|
19
|
+
state.current = el;
|
|
20
|
+
el.setAttribute(FOCUS_VISIBLE_ATTR, '');
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function disposeCurrentElement() {
|
|
24
|
+
if (state.current) {
|
|
25
|
+
state.current.removeAttribute(FOCUS_VISIBLE_ATTR);
|
|
26
|
+
state.current = undefined;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
17
29
|
// When navigation mode changes remove the focus-visible selector
|
|
18
30
|
keyborg.subscribe((isNavigatingWithKeyboard)=>{
|
|
19
|
-
if (!isNavigatingWithKeyboard
|
|
20
|
-
|
|
21
|
-
state.current = undefined;
|
|
31
|
+
if (!isNavigatingWithKeyboard) {
|
|
32
|
+
disposeCurrentElement();
|
|
22
33
|
}
|
|
23
34
|
});
|
|
24
35
|
// Keyborg's focusin event is delegated so it's only registered once on the window
|
|
25
36
|
// and contains metadata about the focus event
|
|
26
37
|
const keyborgListener = (e)=>{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
state.current = undefined;
|
|
30
|
-
}
|
|
31
|
-
if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
|
|
32
|
-
// Griffel can't create chained global styles so use the parent element for now
|
|
33
|
-
state.current = e.target;
|
|
34
|
-
applyFocusVisibleClass(state.current);
|
|
35
|
-
}
|
|
38
|
+
disposeCurrentElement();
|
|
39
|
+
registerElementIfNavigating(e.target);
|
|
36
40
|
};
|
|
37
41
|
// Make sure that when focus leaves the scope, the focus visible class is removed
|
|
38
42
|
const blurListener = (e)=>{
|
|
39
43
|
if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
|
40
|
-
|
|
41
|
-
removeFocusVisibleClass(state.current);
|
|
42
|
-
state.current = undefined;
|
|
43
|
-
}
|
|
44
|
+
disposeCurrentElement();
|
|
44
45
|
}
|
|
45
46
|
};
|
|
46
47
|
scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);
|
|
47
48
|
scope.addEventListener('focusout', blurListener);
|
|
48
49
|
scope.focusVisible = true;
|
|
50
|
+
registerElementIfNavigating(targetWindow.document.activeElement);
|
|
49
51
|
// Return disposer
|
|
50
52
|
return ()=>{
|
|
53
|
+
disposeCurrentElement();
|
|
51
54
|
scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);
|
|
52
55
|
scope.removeEventListener('focusout', blurListener);
|
|
53
56
|
delete scope.focusVisible;
|
|
54
57
|
disposeKeyborg(keyborg);
|
|
55
58
|
};
|
|
56
59
|
}
|
|
57
|
-
function applyFocusVisibleClass(el) {
|
|
58
|
-
el.setAttribute(FOCUS_VISIBLE_ATTR, '');
|
|
59
|
-
}
|
|
60
|
-
function removeFocusVisibleClass(el) {
|
|
61
|
-
el.removeAttribute(FOCUS_VISIBLE_ATTR);
|
|
62
|
-
}
|
|
63
60
|
function alreadyInScope(el) {
|
|
64
61
|
if (!el) {
|
|
65
62
|
return false;
|
|
@@ -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 // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard
|
|
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 registerElementIfNavigating(e.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","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;QACAJ,4BAA4BQ,EAAEC,MAAM;IACtC;IAEA,iFAAiF;IACjF,MAAMC,eAAe,CAACF;QACpB,IAAI,CAACA,EAAEG,aAAa,IAAKxB,cAAcqB,EAAEG,aAAa,KAAK,CAAClB,MAAMmB,QAAQ,CAACJ,EAAEG,aAAa,GAAI;YAC5FP;QACF;IACF;IAEAX,MAAMoB,gBAAgB,CAACzB,iBAAiBmB;IACxCd,MAAMoB,gBAAgB,CAAC,YAAYH;IAClCjB,MAA2CqB,YAAY,GAAG;IAE3Dd,4BAA4BN,aAAaqB,QAAQ,CAACC,aAAa;IAE/D,kBAAkB;IAClB,OAAO;QACLZ;QAEAX,MAAMwB,mBAAmB,CAAC7B,iBAAiBmB;QAC3Cd,MAAMwB,mBAAmB,CAAC,YAAYP;QACtC,OAAO,AAACjB,MAA2CqB,YAAY;QAE/DxB,eAAeS;IACjB;AACF;AAEA,SAASJ,eAAeM,EAAkC;IACxD,IAAI,CAACA,IAAI;QACP,OAAO;IACT;IAEA,IAAI,AAACA,GAAwCa,YAAY,EAAE;QACzD,OAAO;IACT;IAEA,OAAOnB,eAAeM,eAAAA,yBAAAA,GAAIiB,aAAa;AACzC"}
|
package/lib/hooks/useTabster.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { createTabster, disposeTabster } from 'tabster';
|
|
4
|
-
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
|
+
import { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';
|
|
5
5
|
/**
|
|
6
6
|
* Tries to get a tabster instance on the current window or creates a new one
|
|
7
7
|
* Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary
|
|
@@ -17,7 +17,8 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
|
17
17
|
}
|
|
18
18
|
return createTabster(defaultView, {
|
|
19
19
|
autoRoot: {},
|
|
20
|
-
controlTab: false
|
|
20
|
+
controlTab: false,
|
|
21
|
+
getParent
|
|
21
22
|
});
|
|
22
23
|
}, [
|
|
23
24
|
defaultView
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n const { targetDocument } = useFluent();\n\n const defaultView = targetDocument?.defaultView || undefined;\n const tabster = React.useMemo(() => {\n if (!defaultView) {\n return null;\n }\n\n return createTabster(defaultView, { autoRoot: {}, controlTab: false });\n }, [defaultView]);\n\n useIsomorphicLayoutEffect(() => {\n return () => {\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [tabster]);\n\n return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["useTabster.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster, Types as TabsterTypes } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n const { targetDocument } = useFluent();\n\n const defaultView = targetDocument?.defaultView || undefined;\n const tabster = React.useMemo(() => {\n if (!defaultView) {\n return null;\n }\n\n return createTabster(defaultView, { autoRoot: {}, controlTab: false, getParent });\n }, [defaultView]);\n\n useIsomorphicLayoutEffect(() => {\n return () => {\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [tabster]);\n\n return tabster;\n};\n"],"names":["React","useFluent_unstable","useFluent","createTabster","disposeTabster","useIsomorphicLayoutEffect","getParent","useTabster","targetDocument","defaultView","undefined","tabster","useMemo","autoRoot","controlTab"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,EAAEC,cAAc,QAA+B,UAAU;AAC/E,SAASC,yBAAyB,EAAEC,SAAS,QAAQ,4BAA4B;AAEjF;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;IACxB,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAE3B,MAAMO,cAAcD,CAAAA,2BAAAA,qCAAAA,eAAgBC,WAAW,KAAIC;IACnD,MAAMC,UAAUX,MAAMY,OAAO,CAAC;QAC5B,IAAI,CAACH,aAAa;YAChB,OAAO;QACT;QAEA,OAAON,cAAcM,aAAa;YAAEI,UAAU,CAAC;YAAGC,YAAY;YAAOR;QAAU;IACjF,GAAG;QAACG;KAAY;IAEhBJ,0BAA0B;QACxB,OAAO;YACL,IAAIM,SAAS;gBACXP,eAAeO;YACjB;QACF;IACF,GAAG;QAACA;KAAQ;IAEZ,OAAOA;AACT,EAAE"}
|
|
@@ -20,52 +20,49 @@ function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
|
20
20
|
current: undefined
|
|
21
21
|
};
|
|
22
22
|
const keyborg = (0, _keyborg.createKeyborg)(targetWindow);
|
|
23
|
+
function registerElementIfNavigating(el) {
|
|
24
|
+
if (keyborg.isNavigatingWithKeyboard() && (0, _reactutilities.isHTMLElement)(el)) {
|
|
25
|
+
state.current = el;
|
|
26
|
+
el.setAttribute(_constants.FOCUS_VISIBLE_ATTR, '');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function disposeCurrentElement() {
|
|
30
|
+
if (state.current) {
|
|
31
|
+
state.current.removeAttribute(_constants.FOCUS_VISIBLE_ATTR);
|
|
32
|
+
state.current = undefined;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
23
35
|
// When navigation mode changes remove the focus-visible selector
|
|
24
36
|
keyborg.subscribe((isNavigatingWithKeyboard)=>{
|
|
25
|
-
if (!isNavigatingWithKeyboard
|
|
26
|
-
|
|
27
|
-
state.current = undefined;
|
|
37
|
+
if (!isNavigatingWithKeyboard) {
|
|
38
|
+
disposeCurrentElement();
|
|
28
39
|
}
|
|
29
40
|
});
|
|
30
41
|
// Keyborg's focusin event is delegated so it's only registered once on the window
|
|
31
42
|
// and contains metadata about the focus event
|
|
32
43
|
const keyborgListener = (e)=>{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
state.current = undefined;
|
|
36
|
-
}
|
|
37
|
-
if (keyborg.isNavigatingWithKeyboard() && (0, _reactutilities.isHTMLElement)(e.target) && e.target) {
|
|
38
|
-
// Griffel can't create chained global styles so use the parent element for now
|
|
39
|
-
state.current = e.target;
|
|
40
|
-
applyFocusVisibleClass(state.current);
|
|
41
|
-
}
|
|
44
|
+
disposeCurrentElement();
|
|
45
|
+
registerElementIfNavigating(e.target);
|
|
42
46
|
};
|
|
43
47
|
// Make sure that when focus leaves the scope, the focus visible class is removed
|
|
44
48
|
const blurListener = (e)=>{
|
|
45
49
|
if (!e.relatedTarget || (0, _reactutilities.isHTMLElement)(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
|
46
|
-
|
|
47
|
-
removeFocusVisibleClass(state.current);
|
|
48
|
-
state.current = undefined;
|
|
49
|
-
}
|
|
50
|
+
disposeCurrentElement();
|
|
50
51
|
}
|
|
51
52
|
};
|
|
52
53
|
scope.addEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
|
53
54
|
scope.addEventListener('focusout', blurListener);
|
|
54
55
|
scope.focusVisible = true;
|
|
56
|
+
registerElementIfNavigating(targetWindow.document.activeElement);
|
|
55
57
|
// Return disposer
|
|
56
58
|
return ()=>{
|
|
59
|
+
disposeCurrentElement();
|
|
57
60
|
scope.removeEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
|
58
61
|
scope.removeEventListener('focusout', blurListener);
|
|
59
62
|
delete scope.focusVisible;
|
|
60
63
|
(0, _keyborg.disposeKeyborg)(keyborg);
|
|
61
64
|
};
|
|
62
65
|
}
|
|
63
|
-
function applyFocusVisibleClass(el) {
|
|
64
|
-
el.setAttribute(_constants.FOCUS_VISIBLE_ATTR, '');
|
|
65
|
-
}
|
|
66
|
-
function removeFocusVisibleClass(el) {
|
|
67
|
-
el.removeAttribute(_constants.FOCUS_VISIBLE_ATTR);
|
|
68
|
-
}
|
|
69
66
|
function alreadyInScope(el) {
|
|
70
67
|
if (!el) {
|
|
71
68
|
return false;
|
|
@@ -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 // When navigation mode changes remove the focus-visible selector\n keyborg.subscribe((isNavigatingWithKeyboard)=>{\n if (!isNavigatingWithKeyboard
|
|
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 registerElementIfNavigating(e.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","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;QACAN,4BAA4BU,EAAEC,MAAM;IACxC;IACA,iFAAiF;IACjF,MAAMC,eAAe,CAACF;QAClB,IAAI,CAACA,EAAEG,aAAa,IAAIV,IAAAA,6BAAa,EAACO,EAAEG,aAAa,KAAK,CAACrB,MAAMsB,QAAQ,CAACJ,EAAEG,aAAa,GAAG;YACxFP;QACJ;IACJ;IACAd,MAAMuB,gBAAgB,CAACC,wBAAe,EAAEP;IACxCjB,MAAMuB,gBAAgB,CAAC,YAAYH;IACnCpB,MAAMyB,YAAY,GAAG;IACrBjB,4BAA4BP,aAAayB,QAAQ,CAACC,aAAa;IAC/D,kBAAkB;IAClB,OAAO;QACHb;QACAd,MAAM4B,mBAAmB,CAACJ,wBAAe,EAAEP;QAC3CjB,MAAM4B,mBAAmB,CAAC,YAAYR;QACtC,OAAOpB,MAAMyB,YAAY;QACzBI,IAAAA,uBAAc,EAACvB;IACnB;AACJ;AACA,SAASJ,eAAeO,EAAE;IACtB,IAAI,CAACA,IAAI;QACL,OAAO;IACX;IACA,IAAIA,GAAGgB,YAAY,EAAE;QACjB,OAAO;IACX;IACA,OAAOvB,eAAeO,OAAO,QAAQA,OAAO,KAAK,IAAI,KAAK,IAAIA,GAAGqB,aAAa;AAClF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */ export const useTabster = ()=>{\n const { targetDocument } = useFluent();\n const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;\n const tabster = React.useMemo(()=>{\n if (!defaultView) {\n return null;\n }\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false\n });\n }, [\n defaultView\n ]);\n useIsomorphicLayoutEffect(()=>{\n return ()=>{\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [\n tabster\n ]);\n return tabster;\n};\n"],"names":["useTabster","targetDocument","useFluent","defaultView","undefined","tabster","React","useMemo","createTabster","autoRoot","controlTab","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;qCACyB;yBACF;
|
|
1
|
+
{"version":3,"sources":["useTabster.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { createTabster, disposeTabster } from 'tabster';\nimport { useIsomorphicLayoutEffect, getParent } from '@fluentui/react-utilities';\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */ export const useTabster = ()=>{\n const { targetDocument } = useFluent();\n const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;\n const tabster = React.useMemo(()=>{\n if (!defaultView) {\n return null;\n }\n return createTabster(defaultView, {\n autoRoot: {},\n controlTab: false,\n getParent\n });\n }, [\n defaultView\n ]);\n useIsomorphicLayoutEffect(()=>{\n return ()=>{\n if (tabster) {\n disposeTabster(tabster);\n }\n };\n }, [\n tabster\n ]);\n return tabster;\n};\n"],"names":["useTabster","targetDocument","useFluent","defaultView","undefined","tabster","React","useMemo","createTabster","autoRoot","controlTab","getParent","useIsomorphicLayoutEffect","disposeTabster"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;qCACyB;yBACF;gCACO;AAO1C,MAAMA,aAAa;IAC1B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,cAAc,AAACF,CAAAA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMC;IACpH,MAAMC,UAAUC,OAAMC,OAAO,CAAC;QAC1B,IAAI,CAACJ,aAAa;YACd,OAAO;QACX;QACA,OAAOK,IAAAA,sBAAa,EAACL,aAAa;YAC9BM,UAAU,CAAC;YACXC,YAAY;YACZC,WAAAA,yBAAS;QACb;IACJ,GAAG;QACCR;KACH;IACDS,IAAAA,yCAAyB,EAAC;QACtB,OAAO;YACH,IAAIP,SAAS;gBACTQ,IAAAA,uBAAc,EAACR;YACnB;QACJ;IACJ,GAAG;QACCA;KACH;IACD,OAAOA;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.14.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.10.0",
|
|
35
35
|
"@fluentui/react-theme": "^9.1.14",
|
|
36
|
-
"@fluentui/react-utilities": "^9.15.
|
|
36
|
+
"@fluentui/react-utilities": "^9.15.1",
|
|
37
37
|
"@griffel/react": "^1.5.14",
|
|
38
38
|
"@swc/helpers": "^0.5.1",
|
|
39
|
-
"keyborg": "^2.
|
|
40
|
-
"tabster": "^4.
|
|
39
|
+
"keyborg": "^2.1.0",
|
|
40
|
+
"tabster": "^4.8.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@types/react": ">=16.14.0 <19.0.0",
|