@fluentui/react-tabster 9.1.1 → 9.1.2
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 +16 -1
- package/CHANGELOG.md +11 -2
- package/lib/focus/constants.js +10 -2
- package/lib/focus/constants.js.map +1 -1
- package/lib/focus/createCustomFocusIndicatorStyle.js +3 -3
- package/lib/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib/focus/focusVisiblePolyfill.js +3 -3
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/focus/focusWithinPolyfill.js +3 -3
- package/lib/focus/focusWithinPolyfill.js.map +1 -1
- package/lib-commonjs/focus/constants.js +11 -3
- package/lib-commonjs/focus/constants.js.map +1 -1
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js +2 -2
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js +2 -2
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/focus/focusWithinPolyfill.js +2 -2
- package/lib-commonjs/focus/focusWithinPolyfill.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 03 Oct 2022 22:22:52 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v9.1.2",
|
|
7
|
+
"version": "9.1.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-tabster",
|
|
13
|
+
"commit": "5129090c2dedbaf91b8441898788413992c556e3",
|
|
14
|
+
"comment": "fix: focus outline selectors are data attributes"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 15 Sep 2022 09:49:31 GMT",
|
|
6
21
|
"tag": "@fluentui/react-tabster_v9.1.1",
|
|
7
22
|
"version": "9.1.1",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 03 Oct 2022 22:22:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.2)
|
|
8
|
+
|
|
9
|
+
Mon, 03 Oct 2022 22:22:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.1..@fluentui/react-tabster_v9.1.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: focus outline selectors are data attributes ([PR #24994](https://github.com/microsoft/fluentui/pull/24994) by lingfangao@hotmail.com)
|
|
15
|
+
|
|
7
16
|
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.1.1)
|
|
8
17
|
|
|
9
|
-
Thu, 15 Sep 2022 09:
|
|
18
|
+
Thu, 15 Sep 2022 09:49:31 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.1.0..@fluentui/react-tabster_v9.1.1)
|
|
11
20
|
|
|
12
21
|
### Patches
|
package/lib/focus/constants.js
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
|
|
2
2
|
export const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])`;
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
|
|
8
|
+
/**
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
export const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
|
|
5
13
|
export const defaultOptions = {
|
|
6
14
|
style: {},
|
|
7
15
|
selector: 'focus'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;
|
|
1
|
+
{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,qBAAqB,GAAG,YAAY,sBAAsB,IAAhE;AAEP;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,wBAA3B;AAEP;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,wBAA1B;AACP,OAAO,MAAM,cAAc,GAAG;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAvB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';\nexport const defaultOptions = {\n style: {},\n selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';
|
|
2
2
|
/**
|
|
3
3
|
* Creates a style for @see makeStyles that includes the necessary selectors for focus.
|
|
4
4
|
* Should be used only when @see createFocusOutlineStyle does not fit requirements
|
|
@@ -17,10 +17,10 @@ export const createCustomFocusIndicatorStyle = (style, {
|
|
|
17
17
|
outlineStyle: 'none'
|
|
18
18
|
},
|
|
19
19
|
...(selector === 'focus' && {
|
|
20
|
-
[
|
|
20
|
+
[`&[${FOCUS_VISIBLE_ATTR}]`]: style
|
|
21
21
|
}),
|
|
22
22
|
...(selector === 'focus-within' && {
|
|
23
|
-
[
|
|
23
|
+
[`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style
|
|
24
24
|
})
|
|
25
25
|
});
|
|
26
26
|
//# sourceMappingURL=createCustomFocusIndicatorStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,
|
|
1
|
+
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,EAAyB,kBAAzB,EAA6C,iBAA7C,QAAsE,aAAtE;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,kBAAkB,GAAxB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,CAH2B,CAAxC","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n style: GriffelStyle,\n { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n ':focus': {\n outlineStyle: 'none',\n },\n ':focus-visible': {\n outlineStyle: 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
|
|
2
|
-
import {
|
|
2
|
+
import { FOCUS_VISIBLE_ATTR } from './constants';
|
|
3
3
|
/**
|
|
4
4
|
* @internal
|
|
5
5
|
* @param scope - Applies the ponyfill to all DOM children
|
|
@@ -61,11 +61,11 @@ export function applyFocusVisiblePolyfill(scope, win) {
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
function applyFocusVisibleClass(el) {
|
|
64
|
-
el.
|
|
64
|
+
el.setAttribute(FOCUS_VISIBLE_ATTR, '');
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
function removeFocusVisibleClass(el) {
|
|
68
|
-
el.
|
|
68
|
+
el.removeAttribute(FOCUS_VISIBLE_ATTR);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
function isHTMLElement(target) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,EAA+C,aAA/C,EAA8D,cAA9D,QAAoF,SAApF;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,EAA+C,aAA/C,EAA8D,cAA9D,QAAoF,SAApF;AACA,SAAS,kBAAT,QAAmC,aAAnC;AAoBA;;;;AAIG;;AACH,OAAM,SAAU,yBAAV,CAAoC,KAApC,EAAwD,GAAxD,EAAmE;EACvE,IAAI,cAAc,CAAC,KAAD,CAAlB,EAA2B;IACzB;IACA,OAAO,MAAM,SAAb;EACD;;EAED,MAAM,KAAK,GAAsB;IAC/B,OAAO,EAAE;EADsB,CAAjC;EAIA,MAAM,OAAO,GAAG,aAAa,CAAC,GAAD,CAA7B,CAVuE,CAYvE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAD,IAA6B,KAAK,CAAC,OAAvC,EAAgD;MAC9C,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;MACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;IACD;EACF,CALD,EAbuE,CAoBvE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,KAAK,CAAC,OAAV,EAAmB;MACjB,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;MACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;IACD;;IAED,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAnD,IAAiE,CAAC,CAAC,MAAvE,EAA+E;MAC7E;MACA,KAAK,CAAC,OAAN,GAAgB,CAAC,CAAC,MAAlB;MACA,sBAAsB,CAAC,KAAK,CAAC,OAAP,CAAtB;IACD;EACF,CAXD,CAtBuE,CAmCvE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,KAAK,CAAC,QAAN,CAAe,CAAC,CAAC,aAAjB,CAA5D,EAA8F;MAC5F,IAAI,KAAK,CAAC,OAAV,EAAmB;QACjB,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;QACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;MACD;IACF;EACF,CAPD;;EASA,KAAK,CAAC,gBAAN,CAAuB,eAAvB,EAAwC,eAAxC;EACA,KAAK,CAAC,gBAAN,CAAuB,UAAvB,EAAmC,YAAnC;EACC,KAA0C,CAAC,YAA3C,GAA0D,IAA1D,CA/CsE,CAiDvE;;EACA,OAAO,MAAK;IACV,KAAK,CAAC,mBAAN,CAA0B,eAA1B,EAA2C,eAA3C;IACA,KAAK,CAAC,mBAAN,CAA0B,UAA1B,EAAsC,YAAtC;IACA,OAAQ,KAA0C,CAAC,YAAnD;IACA,cAAc,CAAC,OAAD,CAAd;EACD,CALD;AAMD;;AAED,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,YAAH,CAAgB,kBAAhB,EAAoC,EAApC;AACD;;AAED,SAAS,uBAAT,CAAiC,EAAjC,EAAgD;EAC9C,EAAE,CAAC,eAAH,CAAmB,kBAAnB;AACD;;AAED,SAAS,aAAT,CAAuB,MAAvB,EAAiD;EAC/C,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,KAAP;EACD;;EACD,OAAO,OAAO,CAAC,MAAM,IAAI,OAAO,MAAP,KAAkB,QAA5B,IAAwC,eAAe,MAAvD,IAAiE,cAAc,MAAhF,CAAd;AACD;;AAED,SAAS,cAAT,CAAwB,EAAxB,EAA0D;EACxD,IAAI,CAAC,EAAL,EAAS;IACP,OAAO,KAAP;EACD;;EAED,IAAK,EAAuC,CAAC,YAA7C,EAA2D;IACzD,OAAO,IAAP;EACD;;EAED,OAAO,cAAc,CAAC,EAAE,KAAA,IAAF,IAAA,EAAE,KAAA,KAAA,CAAF,GAAE,KAAA,CAAF,GAAA,EAAE,CAAE,aAAL,CAArB;AACD","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\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 win - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, win: 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(win);\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 isHTMLElement(target: EventTarget | null): target is HTMLElement {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\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"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from 'keyborg';
|
|
2
|
-
import {
|
|
2
|
+
import { FOCUS_WITHIN_ATTR } from './constants';
|
|
3
3
|
/**
|
|
4
4
|
* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
|
|
5
5
|
* like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
|
|
@@ -41,11 +41,11 @@ export function applyFocusWithinPolyfill(element, win) {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
function applyFocusWithinClass(el) {
|
|
44
|
-
el.
|
|
44
|
+
el.setAttribute(FOCUS_WITHIN_ATTR, '');
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
function removeFocusWithinClass(el) {
|
|
48
|
-
el.
|
|
48
|
+
el.removeAttribute(FOCUS_WITHIN_ATTR);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
function isHTMLElement(target) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/focusWithinPolyfill.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,EAA+C,aAA/C,EAA8D,cAA9D,QAAoF,SAApF;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["focus/focusWithinPolyfill.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,EAA+C,aAA/C,EAA8D,cAA9D,QAAoF,SAApF;AACA,SAAS,iBAAT,QAAkC,aAAlC;AASA;;;;AAIG;;AACH,OAAM,SAAU,wBAAV,CAAmC,OAAnC,EAAyD,GAAzD,EAAoE;EACxE,MAAM,OAAO,GAAG,aAAa,CAAC,GAAD,CAA7B,CADwE,CAGxE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAL,EAA+B;MAC7B,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD,EAJwE,CAUxE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAvD,EAAmE;MACjE;MACA,qBAAqB,CAAC,OAAD,CAArB;IACD;EACF,CALD,CAZwE,CAmBxE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,OAAO,CAAC,QAAR,CAAiB,CAAC,CAAC,aAAnB,CAA5D,EAAgG;MAC9F,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD;;EAMA,OAAO,CAAC,gBAAR,CAAyB,eAAzB,EAA0C,eAA1C;EACA,OAAO,CAAC,gBAAR,CAAyB,UAAzB,EAAqC,YAArC,EA3BwE,CA6BxE;;EACA,OAAO,MAAK;IACV,OAAO,CAAC,mBAAR,CAA4B,eAA5B,EAA6C,eAA7C;IACA,OAAO,CAAC,mBAAR,CAA4B,UAA5B,EAAwC,YAAxC;IACA,cAAc,CAAC,OAAD,CAAd;EACD,CAJD;AAKD;;AAED,SAAS,qBAAT,CAA+B,EAA/B,EAA8C;EAC5C,EAAE,CAAC,YAAH,CAAgB,iBAAhB,EAAmC,EAAnC;AACD;;AAED,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,eAAH,CAAmB,iBAAnB;AACD;;AAED,SAAS,aAAT,CAAuB,MAAvB,EAAiD;EAC/C,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,KAAP;EACD;;EACD,OAAO,OAAO,CAAC,MAAM,IAAI,OAAO,MAAP,KAAkB,QAA5B,IAAwC,eAAe,MAAvD,IAAiE,cAAc,MAAhF,CAAd;AACD","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_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\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n const keyborg = createKeyborg(win);\n\n // When navigation mode changes to mouse, remove the focus-within selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n removeFocusWithinClass(element);\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 (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n // Griffel can't create chained global styles so use the parent element for now\n applyFocusWithinClass(element);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus within class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n removeFocusWithinClass(element);\n }\n };\n\n element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.addEventListener('focusout', blurListener);\n\n // Return disposer\n return () => {\n element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.removeEventListener('focusout', blurListener);\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -3,11 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.defaultOptions = exports.
|
|
6
|
+
exports.defaultOptions = exports.FOCUS_WITHIN_ATTR = exports.FOCUS_VISIBLE_ATTR = exports.KEYBOARD_NAV_SELECTOR = exports.KEYBOARD_NAV_ATTRIBUTE = void 0;
|
|
7
7
|
exports.KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav';
|
|
8
8
|
exports.KEYBOARD_NAV_SELECTOR = `:global([${exports.KEYBOARD_NAV_ATTRIBUTE}])`;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
exports.FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
|
|
14
|
+
/**
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
exports.FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
|
|
11
19
|
exports.defaultOptions = {
|
|
12
20
|
style: {},
|
|
13
21
|
selector: 'focus'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;
|
|
1
|
+
{"version":3,"sources":["focus/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,qBAAA,GAAwB,YAAY,OAAA,CAAA,sBAAsB,IAA1D;AAEb;;AAEG;;AACU,OAAA,CAAA,kBAAA,GAAqB,wBAArB;AAEb;;AAEG;;AACU,OAAA,CAAA,iBAAA,GAAoB,wBAApB;AACA,OAAA,CAAA,cAAA,GAAiB;EAC5B,KAAK,EAAE,EADqB;EAE5B,QAAQ,EAAE;AAFkB,CAAjB","sourcesContent":["export const KEYBOARD_NAV_ATTRIBUTE = 'data-keyboard-nav' as const;\nexport const KEYBOARD_NAV_SELECTOR = `:global([${KEYBOARD_NAV_ATTRIBUTE}])` as const;\n\n/**\n * @internal\n */\nexport const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\n/**\n * @internal\n */\nexport const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';\nexport const defaultOptions = {\n style: {},\n selector: 'focus',\n} as const;\n"],"sourceRoot":"../src/"}
|
|
@@ -25,10 +25,10 @@ const createCustomFocusIndicatorStyle = (style, {
|
|
|
25
25
|
outlineStyle: 'none'
|
|
26
26
|
},
|
|
27
27
|
...(selector === 'focus' && {
|
|
28
|
-
[
|
|
28
|
+
[`&[${constants_1.FOCUS_VISIBLE_ATTR}]`]: style
|
|
29
29
|
}),
|
|
30
30
|
...(selector === 'focus-within' && {
|
|
31
|
-
[
|
|
31
|
+
[`&[${constants_1.FOCUS_WITHIN_ATTR}]:${selector}`]: style
|
|
32
32
|
})
|
|
33
33
|
});
|
|
34
34
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,WAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;EAAE,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;EAClB,UAAU;IACR,YAAY,EAAE;EADN,CADQ;EAIlB,kBAAkB;IAChB,YAAY,EAAE;EADE,CAJA;EAQlB,IAAI,QAAQ,KAAK,OAAb,IAAwB;IAC1B,CAAC,KAAK,WAAA,CAAA,kBAAkB,GAAxB,GAA8B;EADJ,CAA5B,CARkB;EAWlB,IAAI,QAAQ,KAAK,cAAb,IAA+B;IACjC,CAAC,KAAK,WAAA,CAAA,iBAAiB,KAAK,QAAQ,EAApC,GAAyC;EADR,CAAnC;AAXkB,CAH2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n style: GriffelStyle,\n { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n ':focus': {\n outlineStyle: 'none',\n },\n ':focus-visible': {\n outlineStyle: 'none',\n },\n\n ...(selector === 'focus' && {\n [`&[${FOCUS_VISIBLE_ATTR}]`]: style,\n }),\n ...(selector === 'focus-within' && {\n [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style,\n }),\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -72,11 +72,11 @@ function applyFocusVisiblePolyfill(scope, win) {
|
|
|
72
72
|
exports.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
|
|
73
73
|
|
|
74
74
|
function applyFocusVisibleClass(el) {
|
|
75
|
-
el.
|
|
75
|
+
el.setAttribute(constants_1.FOCUS_VISIBLE_ATTR, '');
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
function removeFocusVisibleClass(el) {
|
|
79
|
-
el.
|
|
79
|
+
el.removeAttribute(constants_1.FOCUS_VISIBLE_ATTR);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
function isHTMLElement(target) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAoBA;;;;AAIG;;;AACH,SAAgB,yBAAhB,CAA0C,KAA1C,EAA8D,GAA9D,EAAyE;EACvE,IAAI,cAAc,CAAC,KAAD,CAAlB,EAA2B;IACzB;IACA,OAAO,MAAM,SAAb;EACD;;EAED,MAAM,KAAK,GAAsB;IAC/B,OAAO,EAAE;EADsB,CAAjC;EAIA,MAAM,OAAO,GAAG,SAAA,CAAA,aAAA,CAAc,GAAd,CAAhB,CAVuE,CAYvE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAD,IAA6B,KAAK,CAAC,OAAvC,EAAgD;MAC9C,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;MACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;IACD;EACF,CALD,EAbuE,CAoBvE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,KAAK,CAAC,OAAV,EAAmB;MACjB,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;MACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;IACD;;IAED,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAnD,IAAiE,CAAC,CAAC,MAAvE,EAA+E;MAC7E;MACA,KAAK,CAAC,OAAN,GAAgB,CAAC,CAAC,MAAlB;MACA,sBAAsB,CAAC,KAAK,CAAC,OAAP,CAAtB;IACD;EACF,CAXD,CAtBuE,CAmCvE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,KAAK,CAAC,QAAN,CAAe,CAAC,CAAC,aAAjB,CAA5D,EAA8F;MAC5F,IAAI,KAAK,CAAC,OAAV,EAAmB;QACjB,uBAAuB,CAAC,KAAK,CAAC,OAAP,CAAvB;QACA,KAAK,CAAC,OAAN,GAAgB,SAAhB;MACD;IACF;EACF,CAPD;;EASA,KAAK,CAAC,gBAAN,CAAuB,SAAA,CAAA,eAAvB,EAAwC,eAAxC;EACA,KAAK,CAAC,gBAAN,CAAuB,UAAvB,EAAmC,YAAnC;EACC,KAA0C,CAAC,YAA3C,GAA0D,IAA1D,CA/CsE,CAiDvE;;EACA,OAAO,MAAK;IACV,KAAK,CAAC,mBAAN,CAA0B,SAAA,CAAA,eAA1B,EAA2C,eAA3C;IACA,KAAK,CAAC,mBAAN,CAA0B,UAA1B,EAAsC,YAAtC;IACA,OAAQ,KAA0C,CAAC,YAAnD;IACA,SAAA,CAAA,cAAA,CAAe,OAAf;EACD,CALD;AAMD;;AAxDD,OAAA,CAAA,yBAAA,GAAA,yBAAA;;AA0DA,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,
|
|
1
|
+
{"version":3,"sources":["focus/focusVisiblePolyfill.ts"],"names":[],"mappings":"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","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\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 win - window\n */\nexport function applyFocusVisiblePolyfill(scope: HTMLElement, win: 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(win);\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 isHTMLElement(target: EventTarget | null): target is HTMLElement {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\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"],"sourceRoot":"../src/"}
|
|
@@ -52,11 +52,11 @@ function applyFocusWithinPolyfill(element, win) {
|
|
|
52
52
|
exports.applyFocusWithinPolyfill = applyFocusWithinPolyfill;
|
|
53
53
|
|
|
54
54
|
function applyFocusWithinClass(el) {
|
|
55
|
-
el.
|
|
55
|
+
el.setAttribute(constants_1.FOCUS_WITHIN_ATTR, '');
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
function removeFocusWithinClass(el) {
|
|
59
|
-
el.
|
|
59
|
+
el.removeAttribute(constants_1.FOCUS_WITHIN_ATTR);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
function isHTMLElement(target) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/focusWithinPolyfill.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AASA;;;;AAIG;;;AACH,SAAgB,wBAAhB,CAAyC,OAAzC,EAA+D,GAA/D,EAA0E;EACxE,MAAM,OAAO,GAAG,SAAA,CAAA,aAAA,CAAc,GAAd,CAAhB,CADwE,CAGxE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAL,EAA+B;MAC7B,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD,EAJwE,CAUxE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAvD,EAAmE;MACjE;MACA,qBAAqB,CAAC,OAAD,CAArB;IACD;EACF,CALD,CAZwE,CAmBxE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,OAAO,CAAC,QAAR,CAAiB,CAAC,CAAC,aAAnB,CAA5D,EAAgG;MAC9F,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD;;EAMA,OAAO,CAAC,gBAAR,CAAyB,SAAA,CAAA,eAAzB,EAA0C,eAA1C;EACA,OAAO,CAAC,gBAAR,CAAyB,UAAzB,EAAqC,YAArC,EA3BwE,CA6BxE;;EACA,OAAO,MAAK;IACV,OAAO,CAAC,mBAAR,CAA4B,SAAA,CAAA,eAA5B,EAA6C,eAA7C;IACA,OAAO,CAAC,mBAAR,CAA4B,UAA5B,EAAwC,YAAxC;IACA,SAAA,CAAA,cAAA,CAAe,OAAf;EACD,CAJD;AAKD;;AAnCD,OAAA,CAAA,wBAAA,GAAA,wBAAA;;AAqCA,SAAS,qBAAT,CAA+B,EAA/B,EAA8C;EAC5C,EAAE,CAAC,
|
|
1
|
+
{"version":3,"sources":["focus/focusWithinPolyfill.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AASA;;;;AAIG;;;AACH,SAAgB,wBAAhB,CAAyC,OAAzC,EAA+D,GAA/D,EAA0E;EACxE,MAAM,OAAO,GAAG,SAAA,CAAA,aAAA,CAAc,GAAd,CAAhB,CADwE,CAGxE;;EACA,OAAO,CAAC,SAAR,CAAkB,wBAAwB,IAAG;IAC3C,IAAI,CAAC,wBAAL,EAA+B;MAC7B,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD,EAJwE,CAUxE;EACA;;EACA,MAAM,eAAe,GAAI,CAAD,IAA2B;IACjD,IAAI,OAAO,CAAC,wBAAR,MAAsC,aAAa,CAAC,CAAC,CAAC,MAAH,CAAvD,EAAmE;MACjE;MACA,qBAAqB,CAAC,OAAD,CAArB;IACD;EACF,CALD,CAZwE,CAmBxE;;;EACA,MAAM,YAAY,GAAI,CAAD,IAAkB;IACrC,IAAI,CAAC,CAAC,CAAC,aAAH,IAAqB,aAAa,CAAC,CAAC,CAAC,aAAH,CAAb,IAAkC,CAAC,OAAO,CAAC,QAAR,CAAiB,CAAC,CAAC,aAAnB,CAA5D,EAAgG;MAC9F,sBAAsB,CAAC,OAAD,CAAtB;IACD;EACF,CAJD;;EAMA,OAAO,CAAC,gBAAR,CAAyB,SAAA,CAAA,eAAzB,EAA0C,eAA1C;EACA,OAAO,CAAC,gBAAR,CAAyB,UAAzB,EAAqC,YAArC,EA3BwE,CA6BxE;;EACA,OAAO,MAAK;IACV,OAAO,CAAC,mBAAR,CAA4B,SAAA,CAAA,eAA5B,EAA6C,eAA7C;IACA,OAAO,CAAC,mBAAR,CAA4B,UAA5B,EAAwC,YAAxC;IACA,SAAA,CAAA,cAAA,CAAe,OAAf;EACD,CAJD;AAKD;;AAnCD,OAAA,CAAA,wBAAA,GAAA,wBAAA;;AAqCA,SAAS,qBAAT,CAA+B,EAA/B,EAA8C;EAC5C,EAAE,CAAC,YAAH,CAAgB,WAAA,CAAA,iBAAhB,EAAmC,EAAnC;AACD;;AAED,SAAS,sBAAT,CAAgC,EAAhC,EAA+C;EAC7C,EAAE,CAAC,eAAH,CAAmB,WAAA,CAAA,iBAAnB;AACD;;AAED,SAAS,aAAT,CAAuB,MAAvB,EAAiD;EAC/C,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,KAAP;EACD;;EACD,OAAO,OAAO,CAAC,MAAM,IAAI,OAAO,MAAP,KAAkB,QAA5B,IAAwC,eAAe,MAAvD,IAAiE,cAAc,MAAhF,CAAd;AACD","sourcesContent":["import { KEYBORG_FOCUSIN, KeyborgFocusInEvent, createKeyborg, disposeKeyborg } from 'keyborg';\nimport { FOCUS_WITHIN_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\n/**\n * A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation\n * like `:focus-visible` https://github.com/WICG/focus-visible/issues/151\n * @returns ref to the element that uses `:focus-within` styles\n */\nexport function applyFocusWithinPolyfill(element: HTMLElement, win: Window): () => void {\n const keyborg = createKeyborg(win);\n\n // When navigation mode changes to mouse, remove the focus-within selector\n keyborg.subscribe(isNavigatingWithKeyboard => {\n if (!isNavigatingWithKeyboard) {\n removeFocusWithinClass(element);\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 (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {\n // Griffel can't create chained global styles so use the parent element for now\n applyFocusWithinClass(element);\n }\n };\n\n // Make sure that when focus leaves the scope, the focus within class is removed\n const blurListener = (e: FocusEvent) => {\n if (!e.relatedTarget || (isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget))) {\n removeFocusWithinClass(element);\n }\n };\n\n element.addEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.addEventListener('focusout', blurListener);\n\n // Return disposer\n return () => {\n element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener as ListenerOverride);\n element.removeEventListener('focusout', blurListener);\n disposeKeyborg(keyborg);\n };\n}\n\nfunction applyFocusWithinClass(el: HTMLElement) {\n el.setAttribute(FOCUS_WITHIN_ATTR, '');\n}\n\nfunction removeFocusWithinClass(el: HTMLElement) {\n el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\n\nfunction isHTMLElement(target: EventTarget | null): target is HTMLElement {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === 'object' && 'classList' in target && 'contains' in target);\n}\n"],"sourceRoot":"../src/"}
|