@fluentui/react-tabster 0.0.0-nightly-20230315-0421.1 → 0.0.0-nightly-20230317-0436.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 +59 -9
- package/CHANGELOG.md +27 -7
- package/dist/index.d.ts +7 -3
- package/lib/focus/focusVisiblePolyfill.js +4 -9
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/hooks/useFocusVisible.js +4 -4
- package/lib/hooks/useFocusVisible.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js +6 -11
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/hooks/useFocusVisible.js +4 -4
- package/lib-commonjs/hooks/useFocusVisible.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-tabster_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 17 Mar 2023 04:44:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v0.0.0-nightly-20230317-0436.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230317-0436.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,70 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-tabster",
|
|
19
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-0436.1",
|
|
20
|
+
"commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-tabster",
|
|
25
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230317-0436.1",
|
|
26
|
+
"commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-tabster",
|
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-0436.1",
|
|
32
|
+
"commit": "83781b613de20e14968f5f85d52f6836ee4c899f"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Thu, 16 Mar 2023 14:36:58 GMT",
|
|
39
|
+
"tag": "@fluentui/react-tabster_v9.6.0",
|
|
40
|
+
"version": "9.6.0",
|
|
41
|
+
"comments": {
|
|
42
|
+
"minor": [
|
|
43
|
+
{
|
|
44
|
+
"author": "olfedias@microsoft.com",
|
|
45
|
+
"package": "@fluentui/react-tabster",
|
|
46
|
+
"commit": "fe1014bbcd770a7b38a3a9a09595e93297c2da26",
|
|
47
|
+
"comment": "feat: add options to useFocusVisible() hook"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-tabster",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.1",
|
|
53
|
+
"commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Wed, 15 Mar 2023 10:19:52 GMT",
|
|
60
|
+
"tag": "@fluentui/react-tabster_v9.5.7",
|
|
61
|
+
"version": "9.5.7",
|
|
62
|
+
"comments": {
|
|
63
|
+
"none": [
|
|
64
|
+
{
|
|
65
|
+
"author": "tigeroakes@microsoft.com",
|
|
66
|
+
"package": "@fluentui/react-tabster",
|
|
67
|
+
"commit": "5b6822abdd478455086630785d35d464ca68a1cc",
|
|
68
|
+
"comment": "Add JSDoc for tabster focus indicator selector"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"patch": [
|
|
72
|
+
{
|
|
73
|
+
"author": "beachball",
|
|
74
|
+
"package": "@fluentui/react-tabster",
|
|
75
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.1",
|
|
76
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "beachball",
|
|
80
|
+
"package": "@fluentui/react-tabster",
|
|
81
|
+
"comment": "Bump @fluentui/react-theme to v9.1.6",
|
|
82
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
33
83
|
}
|
|
34
84
|
]
|
|
35
85
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 17 Mar 2023 04:44:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230317-0436.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20230317-0436.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.
|
|
9
|
+
Fri, 17 Mar 2023 04:44:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.6.0..@fluentui/react-tabster_v0.0.0-nightly-20230317-0436.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
|
|
16
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230317-0436.1 ([commit](https://github.com/microsoft/fluentui/commit/83781b613de20e14968f5f85d52f6836ee4c899f) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.6.0)
|
|
20
|
+
|
|
21
|
+
Thu, 16 Mar 2023 14:36:58 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.7..@fluentui/react-tabster_v9.6.0)
|
|
23
|
+
|
|
24
|
+
### Minor changes
|
|
25
|
+
|
|
26
|
+
- feat: add options to useFocusVisible() hook ([PR #27198](https://github.com/microsoft/fluentui/pull/27198) by olfedias@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
|
|
28
|
+
|
|
29
|
+
## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.7)
|
|
30
|
+
|
|
31
|
+
Wed, 15 Mar 2023 10:19:52 GMT
|
|
32
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.6..@fluentui/react-tabster_v9.5.7)
|
|
33
|
+
|
|
34
|
+
### Patches
|
|
35
|
+
|
|
36
|
+
- Bump @fluentui/react-shared-contexts to v9.3.1 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
37
|
+
- Bump @fluentui/react-theme to v9.1.6 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
18
38
|
|
|
19
39
|
## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.6)
|
|
20
40
|
|
package/dist/index.d.ts
CHANGED
|
@@ -7,9 +7,9 @@ import { Types } from 'tabster';
|
|
|
7
7
|
/**
|
|
8
8
|
* @internal
|
|
9
9
|
* @param scope - Applies the ponyfill to all DOM children
|
|
10
|
-
* @param
|
|
10
|
+
* @param targetWindow - window
|
|
11
11
|
*/
|
|
12
|
-
export declare function applyFocusVisiblePolyfill(scope: HTMLElement,
|
|
12
|
+
export declare function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Creates a style for @see makeStyles that includes the necessary selectors for focus.
|
|
@@ -123,7 +123,11 @@ export declare const useFocusFinders: () => {
|
|
|
123
123
|
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
|
124
124
|
};
|
|
125
125
|
|
|
126
|
-
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
|
|
126
|
+
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options?: UseFocusVisibleOptions): React_2.RefObject<TElement>;
|
|
127
|
+
|
|
128
|
+
declare type UseFocusVisibleOptions = {
|
|
129
|
+
targetDocument?: HTMLDocument;
|
|
130
|
+
};
|
|
127
131
|
|
|
128
132
|
/**
|
|
129
133
|
* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
1
2
|
import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
|
|
2
3
|
import { FOCUS_VISIBLE_ATTR } from './constants';
|
|
3
4
|
/**
|
|
4
5
|
* @internal
|
|
5
6
|
* @param scope - Applies the ponyfill to all DOM children
|
|
6
|
-
* @param
|
|
7
|
+
* @param targetWindow - window
|
|
7
8
|
*/
|
|
8
|
-
export function applyFocusVisiblePolyfill(scope,
|
|
9
|
+
export function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
9
10
|
if (alreadyInScope(scope)) {
|
|
10
11
|
// Focus visible polyfill already applied at this scope
|
|
11
12
|
return () => undefined;
|
|
@@ -13,7 +14,7 @@ export function applyFocusVisiblePolyfill(scope, win) {
|
|
|
13
14
|
const state = {
|
|
14
15
|
current: undefined
|
|
15
16
|
};
|
|
16
|
-
const keyborg = createKeyborg(
|
|
17
|
+
const keyborg = createKeyborg(targetWindow);
|
|
17
18
|
// When navigation mode changes remove the focus-visible selector
|
|
18
19
|
keyborg.subscribe(isNavigatingWithKeyboard => {
|
|
19
20
|
if (!isNavigatingWithKeyboard && state.current) {
|
|
@@ -60,12 +61,6 @@ function applyFocusVisibleClass(el) {
|
|
|
60
61
|
function removeFocusVisibleClass(el) {
|
|
61
62
|
el.removeAttribute(FOCUS_VISIBLE_ATTR);
|
|
62
63
|
}
|
|
63
|
-
function isHTMLElement(target) {
|
|
64
|
-
if (!target) {
|
|
65
|
-
return false;
|
|
66
|
-
}
|
|
67
|
-
return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
|
|
68
|
-
}
|
|
69
64
|
function alreadyInScope(el) {
|
|
70
65
|
if (!el) {
|
|
71
66
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","
|
|
1
|
+
{"version":3,"names":["isHTMLElement","KEYBORG_FOCUSIN","createKeyborg","disposeKeyborg","FOCUS_VISIBLE_ATTR","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","focusVisible","removeEventListener","el","setAttribute","removeAttribute","parentElement"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/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 && state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\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 if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n // Griffel can't create chained global styles so use the parent element for now\n state.current = e.target;\n applyFocusVisibleClass(state.current);\n }\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 if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n // Return disposer\n return () => {\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\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"],"mappings":"AAAA,SAASA,aAAa,QAAQ,2BAA2B;AACzD,SAASC,eAAe,EAAuBC,aAAa,EAAEC,cAAc,QAAQ,SAAS;AAE7F,SAASC,kBAAkB,QAAQ,aAAa;AAoBhD;;;;;AAKA,OAAM,SAAUC,yBAAyBA,CAACC,KAAkB,EAAEC,YAAoB;EAChF,IAAIC,cAAc,CAACF,KAAK,CAAC,EAAE;IACzB;IACA,OAAO,MAAMG,SAAS;;EAGxB,MAAMC,KAAK,GAAsB;IAC/BC,OAAO,EAAEF;GACV;EAED,MAAMG,OAAO,GAAGV,aAAa,CAACK,YAAY,CAAC;EAE3C;EACAK,OAAO,CAACC,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,IAAIJ,KAAK,CAACC,OAAO,EAAE;MAC9CI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;EAE7B,CAAC,CAAC;EAEF;EACA;EACA,MAAMO,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIP,KAAK,CAACC,OAAO,EAAE;MACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;IAG3B,IAAIG,OAAO,CAACE,wBAAwB,EAAE,IAAId,aAAa,CAACiB,CAAC,CAACC,MAAM,CAAC,IAAID,CAAC,CAACC,MAAM,EAAE;MAC7E;MACAR,KAAK,CAACC,OAAO,GAAGM,CAAC,CAACC,MAAM;MACxBC,sBAAsB,CAACT,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMS,YAAY,GAAIH,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACI,aAAa,IAAKrB,aAAa,CAACiB,CAAC,CAACI,aAAa,CAAC,IAAI,CAACf,KAAK,CAACgB,QAAQ,CAACL,CAAC,CAACI,aAAa,CAAE,EAAE;MAC5F,IAAIX,KAAK,CAACC,OAAO,EAAE;QACjBI,uBAAuB,CAACL,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACiB,gBAAgB,CAACtB,eAAe,EAAEe,eAAmC,CAAC;EAC5EV,KAAK,CAACiB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/Cd,KAA0C,CAACkB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVlB,KAAK,CAACmB,mBAAmB,CAACxB,eAAe,EAAEe,eAAmC,CAAC;IAC/EV,KAAK,CAACmB,mBAAmB,CAAC,UAAU,EAAEL,YAAY,CAAC;IACnD,OAAQd,KAA0C,CAACkB,YAAY;IAC/DrB,cAAc,CAACS,OAAO,CAAC;EACzB,CAAC;AACH;AAEA,SAASO,sBAAsBA,CAACO,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAACvB,kBAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASW,uBAAuBA,CAACW,EAAe;EAC9CA,EAAE,CAACE,eAAe,CAACxB,kBAAkB,CAAC;AACxC;AAEA,SAASI,cAAcA,CAACkB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACF,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOhB,cAAc,CAACkB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEG,aAAa,CAAC;AAC1C"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { applyFocusVisiblePolyfill } from '../focus/focusVisiblePolyfill';
|
|
4
|
-
export function useFocusVisible() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
} = useFluent();
|
|
4
|
+
export function useFocusVisible(options = {}) {
|
|
5
|
+
var _a;
|
|
6
|
+
const contentValue = useFluent();
|
|
8
7
|
const scopeRef = React.useRef(null);
|
|
8
|
+
const targetDocument = (_a = options.targetDocument) !== null && _a !== void 0 ? _a : contentValue.targetDocument;
|
|
9
9
|
React.useEffect(() => {
|
|
10
10
|
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
|
|
11
11
|
return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","
|
|
1
|
+
{"version":3,"names":["React","useFluent_unstable","useFluent","applyFocusVisiblePolyfill","useFocusVisible","options","contentValue","scopeRef","useRef","targetDocument","_a","useEffect","defaultView","current"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"sourcesContent":["import * 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?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n const contentValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contentValue.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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF,SAASC,yBAAyB,QAAQ,+BAA+B;AAMzE,OAAM,SAAUC,eAAeA,CAA6CC,OAAA,GAAkC,EAAE;;EAC9G,MAAMC,YAAY,GAAGJ,SAAS,EAAE;EAChC,MAAMK,QAAQ,GAAGP,KAAK,CAACQ,MAAM,CAAW,IAAI,CAAC;EAE7C,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAL,OAAO,CAACI,cAAc,cAAAC,EAAA,cAAAA,EAAA,GAAIJ,YAAY,CAACG,cAAc;EAE5ET,KAAK,CAACW,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW,KAAIL,QAAQ,CAACM,OAAO,EAAE;MACnD,OAAOV,yBAAyB,CAACI,QAAQ,CAACM,OAAO,EAAEJ,cAAc,CAACG,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACL,QAAQ,EAAEE,cAAc,CAAC,CAAC;EAE9B,OAAOF,QAAQ;AACjB"}
|
|
@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.applyFocusVisiblePolyfill = void 0;
|
|
7
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
7
8
|
const keyborg_1 = /*#__PURE__*/require("keyborg");
|
|
8
9
|
const constants_1 = /*#__PURE__*/require("./constants");
|
|
9
10
|
/**
|
|
10
11
|
* @internal
|
|
11
12
|
* @param scope - Applies the ponyfill to all DOM children
|
|
12
|
-
* @param
|
|
13
|
+
* @param targetWindow - window
|
|
13
14
|
*/
|
|
14
|
-
function applyFocusVisiblePolyfill(scope,
|
|
15
|
+
function applyFocusVisiblePolyfill(scope, targetWindow) {
|
|
15
16
|
if (alreadyInScope(scope)) {
|
|
16
17
|
// Focus visible polyfill already applied at this scope
|
|
17
18
|
return () => undefined;
|
|
@@ -19,7 +20,7 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
19
20
|
const state = {
|
|
20
21
|
current: undefined
|
|
21
22
|
};
|
|
22
|
-
const keyborg = keyborg_1.createKeyborg(
|
|
23
|
+
const keyborg = keyborg_1.createKeyborg(targetWindow);
|
|
23
24
|
// When navigation mode changes remove the focus-visible selector
|
|
24
25
|
keyborg.subscribe(isNavigatingWithKeyboard => {
|
|
25
26
|
if (!isNavigatingWithKeyboard && state.current) {
|
|
@@ -34,7 +35,7 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
34
35
|
removeFocusVisibleClass(state.current);
|
|
35
36
|
state.current = undefined;
|
|
36
37
|
}
|
|
37
|
-
if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {
|
|
38
|
+
if (keyborg.isNavigatingWithKeyboard() && react_utilities_1.isHTMLElement(e.target) && e.target) {
|
|
38
39
|
// Griffel can't create chained global styles so use the parent element for now
|
|
39
40
|
state.current = e.target;
|
|
40
41
|
applyFocusVisibleClass(state.current);
|
|
@@ -42,7 +43,7 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
42
43
|
};
|
|
43
44
|
// Make sure that when focus leaves the scope, the focus visible class is removed
|
|
44
45
|
const blurListener = e => {
|
|
45
|
-
if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
|
46
|
+
if (!e.relatedTarget || react_utilities_1.isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
|
46
47
|
if (state.current) {
|
|
47
48
|
removeFocusVisibleClass(state.current);
|
|
48
49
|
state.current = undefined;
|
|
@@ -67,12 +68,6 @@ function applyFocusVisibleClass(el) {
|
|
|
67
68
|
function removeFocusVisibleClass(el) {
|
|
68
69
|
el.removeAttribute(constants_1.FOCUS_VISIBLE_ATTR);
|
|
69
70
|
}
|
|
70
|
-
function isHTMLElement(target) {
|
|
71
|
-
if (!target) {
|
|
72
|
-
return false;
|
|
73
|
-
}
|
|
74
|
-
return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);
|
|
75
|
-
}
|
|
76
71
|
function alreadyInScope(el) {
|
|
77
72
|
if (!el) {
|
|
78
73
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["react_utilities_1","require","keyborg_1","constants_1","applyFocusVisiblePolyfill","scope","targetWindow","alreadyInScope","undefined","state","current","keyborg","createKeyborg","subscribe","isNavigatingWithKeyboard","removeFocusVisibleClass","keyborgListener","e","isHTMLElement","target","applyFocusVisibleClass","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","focusVisible","removeEventListener","disposeKeyborg","exports","el","setAttribute","FOCUS_VISIBLE_ATTR","removeAttribute","parentElement"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/focus/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 && state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\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 if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n\n if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target) && e.target) {\n // Griffel can't create chained global styles so use the parent element for now\n state.current = e.target;\n applyFocusVisibleClass(state.current);\n }\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 if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n }\n };\n\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.addEventListener('focusout', blurListener);\n (scope as HTMLElementWithFocusVisibleScope).focusVisible = true;\n\n // Return disposer\n return () => {\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n scope.removeEventListener('focusout', blurListener);\n delete (scope as HTMLElementWithFocusVisibleScope).focusVisible;\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusVisibleClass(el: HTMLElement) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, '');\n}\n\nfunction removeFocusVisibleClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\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"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,SAAA,gBAAAD,OAAA;AAEA,MAAAE,WAAA,gBAAAF,OAAA;AAoBA;;;;;AAKA,SAAgBG,yBAAyBA,CAACC,KAAkB,EAAEC,YAAoB;EAChF,IAAIC,cAAc,CAACF,KAAK,CAAC,EAAE;IACzB;IACA,OAAO,MAAMG,SAAS;;EAGxB,MAAMC,KAAK,GAAsB;IAC/BC,OAAO,EAAEF;GACV;EAED,MAAMG,OAAO,GAAGT,SAAA,CAAAU,aAAa,CAACN,YAAY,CAAC;EAE3C;EACAK,OAAO,CAACE,SAAS,CAACC,wBAAwB,IAAG;IAC3C,IAAI,CAACA,wBAAwB,IAAIL,KAAK,CAACC,OAAO,EAAE;MAC9CK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;EAE7B,CAAC,CAAC;EAEF;EACA;EACA,MAAMQ,eAAe,GAAIC,CAAsB,IAAI;IACjD,IAAIR,KAAK,CAACC,OAAO,EAAE;MACjBK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;MACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;IAG3B,IAAIG,OAAO,CAACG,wBAAwB,EAAE,IAAId,iBAAA,CAAAkB,aAAa,CAACD,CAAC,CAACE,MAAM,CAAC,IAAIF,CAAC,CAACE,MAAM,EAAE;MAC7E;MACAV,KAAK,CAACC,OAAO,GAAGO,CAAC,CAACE,MAAM;MACxBC,sBAAsB,CAACX,KAAK,CAACC,OAAO,CAAC;;EAEzC,CAAC;EAED;EACA,MAAMW,YAAY,GAAIJ,CAAa,IAAI;IACrC,IAAI,CAACA,CAAC,CAACK,aAAa,IAAKtB,iBAAA,CAAAkB,aAAa,CAACD,CAAC,CAACK,aAAa,CAAC,IAAI,CAACjB,KAAK,CAACkB,QAAQ,CAACN,CAAC,CAACK,aAAa,CAAE,EAAE;MAC5F,IAAIb,KAAK,CAACC,OAAO,EAAE;QACjBK,uBAAuB,CAACN,KAAK,CAACC,OAAO,CAAC;QACtCD,KAAK,CAACC,OAAO,GAAGF,SAAS;;;EAG/B,CAAC;EAEDH,KAAK,CAACmB,gBAAgB,CAACtB,SAAA,CAAAuB,eAAe,EAAET,eAAmC,CAAC;EAC5EX,KAAK,CAACmB,gBAAgB,CAAC,UAAU,EAAEH,YAAY,CAAC;EAC/ChB,KAA0C,CAACqB,YAAY,GAAG,IAAI;EAE/D;EACA,OAAO,MAAK;IACVrB,KAAK,CAACsB,mBAAmB,CAACzB,SAAA,CAAAuB,eAAe,EAAET,eAAmC,CAAC;IAC/EX,KAAK,CAACsB,mBAAmB,CAAC,UAAU,EAAEN,YAAY,CAAC;IACnD,OAAQhB,KAA0C,CAACqB,YAAY;IAC/DxB,SAAA,CAAA0B,cAAc,CAACjB,OAAO,CAAC;EACzB,CAAC;AACH;AAxDAkB,OAAA,CAAAzB,yBAAA,GAAAA,yBAAA;AA0DA,SAASgB,sBAAsBA,CAACU,EAAe;EAC7CA,EAAE,CAACC,YAAY,CAAC5B,WAAA,CAAA6B,kBAAkB,EAAE,EAAE,CAAC;AACzC;AAEA,SAASjB,uBAAuBA,CAACe,EAAe;EAC9CA,EAAE,CAACG,eAAe,CAAC9B,WAAA,CAAA6B,kBAAkB,CAAC;AACxC;AAEA,SAASzB,cAAcA,CAACuB,EAAkC;EACxD,IAAI,CAACA,EAAE,EAAE;IACP,OAAO,KAAK;;EAGd,IAAKA,EAAuC,CAACJ,YAAY,EAAE;IACzD,OAAO,IAAI;;EAGb,OAAOnB,cAAc,CAACuB,EAAE,aAAFA,EAAE,uBAAFA,EAAE,CAAEI,aAAa,CAAC;AAC1C"}
|
|
@@ -7,11 +7,11 @@ exports.useFocusVisible = void 0;
|
|
|
7
7
|
const React = /*#__PURE__*/require("react");
|
|
8
8
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
9
9
|
const focusVisiblePolyfill_1 = /*#__PURE__*/require("../focus/focusVisiblePolyfill");
|
|
10
|
-
function useFocusVisible() {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
|
10
|
+
function useFocusVisible(options = {}) {
|
|
11
|
+
var _a;
|
|
12
|
+
const contentValue = react_shared_contexts_1.useFluent_unstable();
|
|
14
13
|
const scopeRef = React.useRef(null);
|
|
14
|
+
const targetDocument = (_a = options.targetDocument) !== null && _a !== void 0 ? _a : contentValue.targetDocument;
|
|
15
15
|
React.useEffect(() => {
|
|
16
16
|
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
|
|
17
17
|
return focusVisiblePolyfill_1.applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","require","react_shared_contexts_1","focusVisiblePolyfill_1","useFocusVisible","
|
|
1
|
+
{"version":3,"names":["React","require","react_shared_contexts_1","focusVisiblePolyfill_1","useFocusVisible","options","contentValue","useFluent_unstable","scopeRef","useRef","targetDocument","_a","useEffect","defaultView","current","applyFocusVisiblePolyfill","exports"],"sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusVisible.ts"],"sourcesContent":["import * 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?: HTMLDocument;\n};\n\nexport function useFocusVisible<TElement extends HTMLElement = HTMLElement>(options: UseFocusVisibleOptions = {}) {\n const contentValue = useFluent();\n const scopeRef = React.useRef<TElement>(null);\n\n const targetDocument = options.targetDocument ?? contentValue.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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AAEA,MAAAE,sBAAA,gBAAAF,OAAA;AAMA,SAAgBG,eAAeA,CAA6CC,OAAA,GAAkC,EAAE;;EAC9G,MAAMC,YAAY,GAAGJ,uBAAA,CAAAK,kBAAS,EAAE;EAChC,MAAMC,QAAQ,GAAGR,KAAK,CAACS,MAAM,CAAW,IAAI,CAAC;EAE7C,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAN,OAAO,CAACK,cAAc,cAAAC,EAAA,cAAAA,EAAA,GAAIL,YAAY,CAACI,cAAc;EAE5EV,KAAK,CAACY,SAAS,CAAC,MAAK;IACnB,IAAI,CAAAF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW,KAAIL,QAAQ,CAACM,OAAO,EAAE;MACnD,OAAOX,sBAAA,CAAAY,yBAAyB,CAACP,QAAQ,CAACM,OAAO,EAAEJ,cAAc,CAACG,WAAW,CAAC;;EAElF,CAAC,EAAE,CAACL,QAAQ,EAAEE,cAAc,CAAC,CAAC;EAE9B,OAAOF,QAAQ;AACjB;AAbAQ,OAAA,CAAAZ,eAAA,GAAAA,eAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230317-0436.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",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@griffel/react": "^1.5.2",
|
|
34
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230317-0436.1",
|
|
35
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230317-0436.1",
|
|
36
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230317-0436.1",
|
|
37
37
|
"keyborg": "^2.0.0",
|
|
38
38
|
"tabster": "^4.1.1",
|
|
39
39
|
"tslib": "^2.1.0"
|