@fluentui/react-tabster 0.0.0-nightly-20230317-0436.1 → 0.0.0-nightly-20230317-1454.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/.swcrc +39 -0
- package/CHANGELOG.json +9 -9
- package/CHANGELOG.md +7 -7
- package/lib/focus/constants.js +4 -4
- package/lib/focus/constants.js.map +1 -1
- package/lib/focus/createCustomFocusIndicatorStyle.js +7 -7
- package/lib/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib/focus/createFocusOutlineStyle.js +14 -15
- package/lib/focus/createFocusOutlineStyle.js.map +1 -1
- package/lib/focus/focusVisiblePolyfill.js +7 -7
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/focus/focusWithinPolyfill.js +6 -6
- package/lib/focus/focusWithinPolyfill.js.map +1 -1
- package/lib/focus/index.js +4 -4
- package/lib/focus/index.js.map +1 -1
- package/lib/hooks/index.js +8 -8
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useArrowNavigationGroup.js +8 -8
- package/lib/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib/hooks/useFocusFinders.js +7 -7
- package/lib/hooks/useFocusFinders.js.map +1 -1
- package/lib/hooks/useFocusVisible.js +5 -6
- package/lib/hooks/useFocusVisible.js.map +1 -1
- package/lib/hooks/useFocusWithin.js +4 -4
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useFocusableGroup.js +7 -7
- package/lib/hooks/useFocusableGroup.js.map +1 -1
- package/lib/hooks/useKeyboardNavAttribute.js +5 -5
- package/lib/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib/hooks/useModalAttributes.js +5 -5
- package/lib/hooks/useModalAttributes.js.map +1 -1
- package/lib/hooks/useTabster.js +5 -5
- package/lib/hooks/useTabster.js.map +1 -1
- package/lib/hooks/useTabsterAttributes.js +2 -2
- package/lib/hooks/useTabsterAttributes.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/focus/constants.js +23 -17
- package/lib-commonjs/focus/constants.js.map +1 -1
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js +23 -31
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib-commonjs/focus/createFocusOutlineStyle.js +42 -57
- package/lib-commonjs/focus/createFocusOutlineStyle.js.map +1 -1
- package/lib-commonjs/focus/focusVisiblePolyfill.js +65 -68
- package/lib-commonjs/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib-commonjs/focus/focusWithinPolyfill.js +44 -47
- package/lib-commonjs/focus/focusWithinPolyfill.js.map +1 -1
- package/lib-commonjs/focus/index.js +8 -7
- package/lib-commonjs/focus/index.js.map +1 -1
- package/lib-commonjs/hooks/index.js +12 -11
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useArrowNavigationGroup.js +42 -51
- package/lib-commonjs/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib-commonjs/hooks/useFocusFinders.js +64 -58
- package/lib-commonjs/hooks/useFocusFinders.js.map +1 -1
- package/lib-commonjs/hooks/useFocusVisible.js +23 -18
- package/lib-commonjs/hooks/useFocusVisible.js.map +1 -1
- package/lib-commonjs/hooks/useFocusWithin.js +22 -23
- package/lib-commonjs/hooks/useFocusWithin.js.map +1 -1
- package/lib-commonjs/hooks/useFocusableGroup.js +30 -32
- package/lib-commonjs/hooks/useFocusableGroup.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js +37 -38
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib-commonjs/hooks/useModalAttributes.js +35 -44
- package/lib-commonjs/hooks/useModalAttributes.js.map +1 -1
- package/lib-commonjs/hooks/useTabster.js +36 -38
- package/lib-commonjs/hooks/useTabster.js.map +1 -1
- package/lib-commonjs/hooks/useTabsterAttributes.js +14 -16
- package/lib-commonjs/hooks/useTabsterAttributes.js.map +1 -1
- package/lib-commonjs/index.js +25 -73
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
@@ -1,80 +1,77 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "applyFocusVisiblePolyfill", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>applyFocusVisiblePolyfill
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const constants_1 = /*#__PURE__*/require("./constants");
|
10
|
-
/**
|
11
|
-
* @internal
|
12
|
-
* @param scope - Applies the ponyfill to all DOM children
|
13
|
-
* @param targetWindow - window
|
14
|
-
*/
|
9
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
10
|
+
const _keyborg = require("keyborg");
|
11
|
+
const _constants = require("./constants");
|
15
12
|
function applyFocusVisiblePolyfill(scope, targetWindow) {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
}
|
20
|
-
const state = {
|
21
|
-
current: undefined
|
22
|
-
};
|
23
|
-
const keyborg = keyborg_1.createKeyborg(targetWindow);
|
24
|
-
// When navigation mode changes remove the focus-visible selector
|
25
|
-
keyborg.subscribe(isNavigatingWithKeyboard => {
|
26
|
-
if (!isNavigatingWithKeyboard && state.current) {
|
27
|
-
removeFocusVisibleClass(state.current);
|
28
|
-
state.current = undefined;
|
29
|
-
}
|
30
|
-
});
|
31
|
-
// Keyborg's focusin event is delegated so it's only registered once on the window
|
32
|
-
// and contains metadata about the focus event
|
33
|
-
const keyborgListener = e => {
|
34
|
-
if (state.current) {
|
35
|
-
removeFocusVisibleClass(state.current);
|
36
|
-
state.current = undefined;
|
37
|
-
}
|
38
|
-
if (keyborg.isNavigatingWithKeyboard() && react_utilities_1.isHTMLElement(e.target) && e.target) {
|
39
|
-
// Griffel can't create chained global styles so use the parent element for now
|
40
|
-
state.current = e.target;
|
41
|
-
applyFocusVisibleClass(state.current);
|
42
|
-
}
|
43
|
-
};
|
44
|
-
// Make sure that when focus leaves the scope, the focus visible class is removed
|
45
|
-
const blurListener = e => {
|
46
|
-
if (!e.relatedTarget || react_utilities_1.isHTMLElement(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
47
|
-
if (state.current) {
|
48
|
-
removeFocusVisibleClass(state.current);
|
49
|
-
state.current = undefined;
|
50
|
-
}
|
13
|
+
if (alreadyInScope(scope)) {
|
14
|
+
// Focus visible polyfill already applied at this scope
|
15
|
+
return ()=>undefined;
|
51
16
|
}
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
17
|
+
const state = {
|
18
|
+
current: undefined
|
19
|
+
};
|
20
|
+
const keyborg = (0, _keyborg.createKeyborg)(targetWindow);
|
21
|
+
// When navigation mode changes remove the focus-visible selector
|
22
|
+
keyborg.subscribe((isNavigatingWithKeyboard)=>{
|
23
|
+
if (!isNavigatingWithKeyboard && state.current) {
|
24
|
+
removeFocusVisibleClass(state.current);
|
25
|
+
state.current = undefined;
|
26
|
+
}
|
27
|
+
});
|
28
|
+
// Keyborg's focusin event is delegated so it's only registered once on the window
|
29
|
+
// and contains metadata about the focus event
|
30
|
+
const keyborgListener = (e)=>{
|
31
|
+
if (state.current) {
|
32
|
+
removeFocusVisibleClass(state.current);
|
33
|
+
state.current = undefined;
|
34
|
+
}
|
35
|
+
if (keyborg.isNavigatingWithKeyboard() && (0, _reactUtilities.isHTMLElement)(e.target) && e.target) {
|
36
|
+
// Griffel can't create chained global styles so use the parent element for now
|
37
|
+
state.current = e.target;
|
38
|
+
applyFocusVisibleClass(state.current);
|
39
|
+
}
|
40
|
+
};
|
41
|
+
// Make sure that when focus leaves the scope, the focus visible class is removed
|
42
|
+
const blurListener = (e)=>{
|
43
|
+
if (!e.relatedTarget || (0, _reactUtilities.isHTMLElement)(e.relatedTarget) && !scope.contains(e.relatedTarget)) {
|
44
|
+
if (state.current) {
|
45
|
+
removeFocusVisibleClass(state.current);
|
46
|
+
state.current = undefined;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
};
|
50
|
+
scope.addEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
51
|
+
scope.addEventListener("focusout", blurListener);
|
52
|
+
scope.focusVisible = true;
|
53
|
+
// Return disposer
|
54
|
+
return ()=>{
|
55
|
+
scope.removeEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
56
|
+
scope.removeEventListener("focusout", blurListener);
|
57
|
+
delete scope.focusVisible;
|
58
|
+
(0, _keyborg.disposeKeyborg)(keyborg);
|
59
|
+
};
|
63
60
|
}
|
64
|
-
exports.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
|
65
61
|
function applyFocusVisibleClass(el) {
|
66
|
-
|
62
|
+
el.setAttribute(_constants.FOCUS_VISIBLE_ATTR, "");
|
67
63
|
}
|
68
64
|
function removeFocusVisibleClass(el) {
|
69
|
-
|
65
|
+
el.removeAttribute(_constants.FOCUS_VISIBLE_ATTR);
|
70
66
|
}
|
71
67
|
function alreadyInScope(el) {
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
}
|
68
|
+
if (!el) {
|
69
|
+
return false;
|
70
|
+
}
|
71
|
+
if (el.focusVisible) {
|
72
|
+
return true;
|
73
|
+
}
|
74
|
+
return alreadyInScope(el?.parentElement);
|
75
|
+
} //# sourceMappingURL=focusVisiblePolyfill.js.map
|
76
|
+
|
80
77
|
//# sourceMappingURL=focusVisiblePolyfill.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/focus/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 */\nexport 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 && state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\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 if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\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 // 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 if (state.current) {\n removeFocusVisibleClass(state.current);\n state.current = undefined;\n }\n }\n };\n scope.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.addEventListener(\"focusout\", blurListener);\n scope.focusVisible = true;\n // Return disposer\n return () => {\n scope.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n scope.removeEventListener(\"focusout\", blurListener);\n delete scope.focusVisible;\n disposeKeyborg(keyborg);\n };\n}\nfunction applyFocusVisibleClass(el) {\n el.setAttribute(FOCUS_VISIBLE_ATTR, \"\");\n}\nfunction removeFocusVisibleClass(el) {\n el.removeAttribute(FOCUS_VISIBLE_ATTR);\n}\nfunction alreadyInScope(el) {\n if (!el) {\n return false;\n }\n if (el.focusVisible) {\n return true;\n }\n return alreadyInScope(el?.parentElement);\n}\n//# sourceMappingURL=focusVisiblePolyfill.js.map"],"names":["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","el","setAttribute","FOCUS_VISIBLE_ATTR","removeAttribute","parentElement"],"mappings":";;;;+BAQgBA;;aAAAA;;gCARc;yBACiC;2BAC5B;AAM5B,SAASA,0BAA0BC,KAAK,EAAEC,YAAY,EAAE;IAC7D,IAAIC,eAAeF,QAAQ;QACzB,uDAAuD;QACvD,OAAO,IAAMG;IACf,CAAC;IACD,MAAMC,QAAQ;QACZC,SAASF;IACX;IACA,MAAMG,UAAUC,IAAAA,sBAAa,EAACN;IAC9B,iEAAiE;IACjEK,QAAQE,SAAS,CAACC,CAAAA,2BAA4B;QAC5C,IAAI,CAACA,4BAA4BL,MAAMC,OAAO,EAAE;YAC9CK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB,CAAC;IACH;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMQ,kBAAkBC,CAAAA,IAAK;QAC3B,IAAIR,MAAMC,OAAO,EAAE;YACjBK,wBAAwBN,MAAMC,OAAO;YACrCD,MAAMC,OAAO,GAAGF;QAClB,CAAC;QACD,IAAIG,QAAQG,wBAAwB,MAAMI,IAAAA,6BAAa,EAACD,EAAEE,MAAM,KAAKF,EAAEE,MAAM,EAAE;YAC7E,+EAA+E;YAC/EV,MAAMC,OAAO,GAAGO,EAAEE,MAAM;YACxBC,uBAAuBX,MAAMC,OAAO;QACtC,CAAC;IACH;IACA,iFAAiF;IACjF,MAAMW,eAAeJ,CAAAA,IAAK;QACxB,IAAI,CAACA,EAAEK,aAAa,IAAIJ,IAAAA,6BAAa,EAACD,EAAEK,aAAa,KAAK,CAACjB,MAAMkB,QAAQ,CAACN,EAAEK,aAAa,GAAG;YAC1F,IAAIb,MAAMC,OAAO,EAAE;gBACjBK,wBAAwBN,MAAMC,OAAO;gBACrCD,MAAMC,OAAO,GAAGF;YAClB,CAAC;QACH,CAAC;IACH;IACAH,MAAMmB,gBAAgB,CAACC,wBAAe,EAAET;IACxCX,MAAMmB,gBAAgB,CAAC,YAAYH;IACnChB,MAAMqB,YAAY,GAAG,IAAI;IACzB,kBAAkB;IAClB,OAAO,IAAM;QACXrB,MAAMsB,mBAAmB,CAACF,wBAAe,EAAET;QAC3CX,MAAMsB,mBAAmB,CAAC,YAAYN;QACtC,OAAOhB,MAAMqB,YAAY;QACzBE,IAAAA,uBAAc,EAACjB;IACjB;AACF;AACA,SAASS,uBAAuBS,EAAE,EAAE;IAClCA,GAAGC,YAAY,CAACC,6BAAkB,EAAE;AACtC;AACA,SAAShB,wBAAwBc,EAAE,EAAE;IACnCA,GAAGG,eAAe,CAACD,6BAAkB;AACvC;AACA,SAASxB,eAAesB,EAAE,EAAE;IAC1B,IAAI,CAACA,IAAI;QACP,OAAO,KAAK;IACd,CAAC;IACD,IAAIA,GAAGH,YAAY,EAAE;QACnB,OAAO,IAAI;IACb,CAAC;IACD,OAAOnB,eAAesB,IAAII;AAC5B,EACA,gDAAgD"}
|
@@ -1,58 +1,55 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "applyFocusWithinPolyfill", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>applyFocusWithinPolyfill
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const constants_1 = /*#__PURE__*/require("./constants");
|
9
|
-
/**
|
10
|
-
* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
|
11
|
-
* like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
|
12
|
-
* @returns ref to the element that uses `:focus-within` styles
|
13
|
-
*/
|
9
|
+
const _keyborg = require("keyborg");
|
10
|
+
const _constants = require("./constants");
|
14
11
|
function applyFocusWithinPolyfill(element, win) {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
12
|
+
const keyborg = (0, _keyborg.createKeyborg)(win);
|
13
|
+
// When navigation mode changes to mouse, remove the focus-within selector
|
14
|
+
keyborg.subscribe((isNavigatingWithKeyboard)=>{
|
15
|
+
if (!isNavigatingWithKeyboard) {
|
16
|
+
removeFocusWithinClass(element);
|
17
|
+
}
|
18
|
+
});
|
19
|
+
// Keyborg's focusin event is delegated so it's only registered once on the window
|
20
|
+
// and contains metadata about the focus event
|
21
|
+
const keyborgListener = (e)=>{
|
22
|
+
if (keyborg.isNavigatingWithKeyboard() && isHTMLElement(e.target)) {
|
23
|
+
// Griffel can't create chained global styles so use the parent element for now
|
24
|
+
applyFocusWithinClass(element);
|
25
|
+
}
|
26
|
+
};
|
27
|
+
// Make sure that when focus leaves the scope, the focus within class is removed
|
28
|
+
const blurListener = (e)=>{
|
29
|
+
if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget)) {
|
30
|
+
removeFocusWithinClass(element);
|
31
|
+
}
|
32
|
+
};
|
33
|
+
element.addEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
34
|
+
element.addEventListener("focusout", blurListener);
|
35
|
+
// Return disposer
|
36
|
+
return ()=>{
|
37
|
+
element.removeEventListener(_keyborg.KEYBORG_FOCUSIN, keyborgListener);
|
38
|
+
element.removeEventListener("focusout", blurListener);
|
39
|
+
(0, _keyborg.disposeKeyborg)(keyborg);
|
40
|
+
};
|
44
41
|
}
|
45
|
-
exports.applyFocusWithinPolyfill = applyFocusWithinPolyfill;
|
46
42
|
function applyFocusWithinClass(el) {
|
47
|
-
|
43
|
+
el.setAttribute(_constants.FOCUS_WITHIN_ATTR, "");
|
48
44
|
}
|
49
45
|
function removeFocusWithinClass(el) {
|
50
|
-
|
46
|
+
el.removeAttribute(_constants.FOCUS_WITHIN_ATTR);
|
51
47
|
}
|
52
48
|
function isHTMLElement(target) {
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
}
|
49
|
+
if (!target) {
|
50
|
+
return false;
|
51
|
+
}
|
52
|
+
return Boolean(target && typeof target === "object" && "classList" in target && "contains" in target);
|
53
|
+
} //# sourceMappingURL=focusWithinPolyfill.js.map
|
54
|
+
|
58
55
|
//# sourceMappingURL=focusWithinPolyfill.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/focus/focusWithinPolyfill.js"],"sourcesContent":["import { KEYBORG_FOCUSIN, createKeyborg, disposeKeyborg } from \"keyborg\";\nimport { FOCUS_WITHIN_ATTR } from \"./constants\";\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, win) {\n const keyborg = createKeyborg(win);\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 // 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 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 // Make sure that when focus leaves the scope, the focus within class is removed\n const blurListener = e => {\n if (!e.relatedTarget || isHTMLElement(e.relatedTarget) && !element.contains(e.relatedTarget)) {\n removeFocusWithinClass(element);\n }\n };\n element.addEventListener(KEYBORG_FOCUSIN, keyborgListener);\n element.addEventListener(\"focusout\", blurListener);\n // Return disposer\n return () => {\n element.removeEventListener(KEYBORG_FOCUSIN, keyborgListener);\n element.removeEventListener(\"focusout\", blurListener);\n disposeKeyborg(keyborg);\n };\n}\nfunction applyFocusWithinClass(el) {\n el.setAttribute(FOCUS_WITHIN_ATTR, \"\");\n}\nfunction removeFocusWithinClass(el) {\n el.removeAttribute(FOCUS_WITHIN_ATTR);\n}\nfunction isHTMLElement(target) {\n if (!target) {\n return false;\n }\n return Boolean(target && typeof target === \"object\" && \"classList\" in target && \"contains\" in target);\n}\n//# sourceMappingURL=focusWithinPolyfill.js.map"],"names":["applyFocusWithinPolyfill","element","win","keyborg","createKeyborg","subscribe","isNavigatingWithKeyboard","removeFocusWithinClass","keyborgListener","e","isHTMLElement","target","applyFocusWithinClass","blurListener","relatedTarget","contains","addEventListener","KEYBORG_FOCUSIN","removeEventListener","disposeKeyborg","el","setAttribute","FOCUS_WITHIN_ATTR","removeAttribute","Boolean"],"mappings":";;;;+BAOgBA;;aAAAA;;yBAP+C;2BAC7B;AAM3B,SAASA,yBAAyBC,OAAO,EAAEC,GAAG,EAAE;IACrD,MAAMC,UAAUC,IAAAA,sBAAa,EAACF;IAC9B,0EAA0E;IAC1EC,QAAQE,SAAS,CAACC,CAAAA,2BAA4B;QAC5C,IAAI,CAACA,0BAA0B;YAC7BC,uBAAuBN;QACzB,CAAC;IACH;IACA,kFAAkF;IAClF,8CAA8C;IAC9C,MAAMO,kBAAkBC,CAAAA,IAAK;QAC3B,IAAIN,QAAQG,wBAAwB,MAAMI,cAAcD,EAAEE,MAAM,GAAG;YACjE,+EAA+E;YAC/EC,sBAAsBX;QACxB,CAAC;IACH;IACA,gFAAgF;IAChF,MAAMY,eAAeJ,CAAAA,IAAK;QACxB,IAAI,CAACA,EAAEK,aAAa,IAAIJ,cAAcD,EAAEK,aAAa,KAAK,CAACb,QAAQc,QAAQ,CAACN,EAAEK,aAAa,GAAG;YAC5FP,uBAAuBN;QACzB,CAAC;IACH;IACAA,QAAQe,gBAAgB,CAACC,wBAAe,EAAET;IAC1CP,QAAQe,gBAAgB,CAAC,YAAYH;IACrC,kBAAkB;IAClB,OAAO,IAAM;QACXZ,QAAQiB,mBAAmB,CAACD,wBAAe,EAAET;QAC7CP,QAAQiB,mBAAmB,CAAC,YAAYL;QACxCM,IAAAA,uBAAc,EAAChB;IACjB;AACF;AACA,SAASS,sBAAsBQ,EAAE,EAAE;IACjCA,GAAGC,YAAY,CAACC,4BAAiB,EAAE;AACrC;AACA,SAASf,uBAAuBa,EAAE,EAAE;IAClCA,GAAGG,eAAe,CAACD,4BAAiB;AACtC;AACA,SAASZ,cAAcC,MAAM,EAAE;IAC7B,IAAI,CAACA,QAAQ;QACX,OAAO,KAAK;IACd,CAAC;IACD,OAAOa,QAAQb,UAAU,OAAOA,WAAW,YAAY,eAAeA,UAAU,cAAcA;AAChG,EACA,+CAA+C"}
|
@@ -1,11 +1,12 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./createCustomFocusIndicatorStyle"), exports);
|
7
|
+
_exportStar(require("./createFocusOutlineStyle"), exports);
|
8
|
+
_exportStar(require("./focusVisiblePolyfill"), exports);
|
9
|
+
_exportStar(require("./focusWithinPolyfill"), exports);
|
10
|
+
//# sourceMappingURL=index.js.map
|
11
|
+
|
11
12
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/focus/index.js"],"sourcesContent":["export * from \"./createCustomFocusIndicatorStyle\";\nexport * from \"./createFocusOutlineStyle\";\nexport * from \"./focusVisiblePolyfill\";\nexport * from \"./focusWithinPolyfill\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
@@ -1,15 +1,16 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./useArrowNavigationGroup"), exports);
|
7
|
+
_exportStar(require("./useFocusableGroup"), exports);
|
8
|
+
_exportStar(require("./useFocusFinders"), exports);
|
9
|
+
_exportStar(require("./useFocusVisible"), exports);
|
10
|
+
_exportStar(require("./useFocusWithin"), exports);
|
11
|
+
_exportStar(require("./useKeyboardNavAttribute"), exports);
|
12
|
+
_exportStar(require("./useModalAttributes"), exports);
|
13
|
+
_exportStar(require("./useTabsterAttributes"), exports);
|
14
|
+
//# sourceMappingURL=index.js.map
|
15
|
+
|
15
16
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/index.js"],"sourcesContent":["export * from \"./useArrowNavigationGroup\";\nexport * from \"./useFocusableGroup\";\nexport * from \"./useFocusFinders\";\nexport * from \"./useFocusVisible\";\nexport * from \"./useFocusWithin\";\nexport * from \"./useKeyboardNavAttribute\";\nexport * from \"./useModalAttributes\";\nexport * from \"./useTabsterAttributes\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
@@ -1,57 +1,48 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useArrowNavigationGroup", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useArrowNavigationGroup
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
cyclic: !!circular,
|
31
|
-
direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
|
32
|
-
memorizeCurrent,
|
33
|
-
tabbable,
|
34
|
-
hasDefault: unstable_hasDefault
|
35
|
-
},
|
36
|
-
...(ignoreDefaultKeydown && {
|
37
|
-
focusable: {
|
38
|
-
ignoreKeydown: ignoreDefaultKeydown
|
39
|
-
}
|
40
|
-
})
|
41
|
-
});
|
9
|
+
const _tabster = require("tabster");
|
10
|
+
const _useTabsterAttributes = require("./useTabsterAttributes");
|
11
|
+
const _useTabster = require("./useTabster");
|
12
|
+
const useArrowNavigationGroup = (options = {})=>{
|
13
|
+
const { circular , axis , memorizeCurrent , tabbable , ignoreDefaultKeydown , // eslint-disable-next-line @typescript-eslint/naming-convention
|
14
|
+
unstable_hasDefault } = options;
|
15
|
+
const tabster = (0, _useTabster.useTabster)();
|
16
|
+
if (tabster) {
|
17
|
+
(0, _tabster.getMover)(tabster);
|
18
|
+
}
|
19
|
+
return (0, _useTabsterAttributes.useTabsterAttributes)({
|
20
|
+
mover: {
|
21
|
+
cyclic: !!circular,
|
22
|
+
direction: axisToMoverDirection(axis ?? "vertical"),
|
23
|
+
memorizeCurrent,
|
24
|
+
tabbable,
|
25
|
+
hasDefault: unstable_hasDefault
|
26
|
+
},
|
27
|
+
...ignoreDefaultKeydown && {
|
28
|
+
focusable: {
|
29
|
+
ignoreKeydown: ignoreDefaultKeydown
|
30
|
+
}
|
31
|
+
}
|
32
|
+
});
|
42
33
|
};
|
43
|
-
exports.useArrowNavigationGroup = useArrowNavigationGroup;
|
44
34
|
function axisToMoverDirection(axis) {
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
}
|
35
|
+
switch(axis){
|
36
|
+
case "horizontal":
|
37
|
+
return _tabster.Types.MoverDirections.Horizontal;
|
38
|
+
case "grid":
|
39
|
+
return _tabster.Types.MoverDirections.Grid;
|
40
|
+
case "both":
|
41
|
+
return _tabster.Types.MoverDirections.Both;
|
42
|
+
case "vertical":
|
43
|
+
default:
|
44
|
+
return _tabster.Types.MoverDirections.Vertical;
|
45
|
+
}
|
46
|
+
} //# sourceMappingURL=useArrowNavigationGroup.js.map
|
47
|
+
|
57
48
|
//# sourceMappingURL=useArrowNavigationGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useArrowNavigationGroup.js"],"sourcesContent":["import { Types, getMover } from \"tabster\";\nimport { useTabsterAttributes } from \"./useTabsterAttributes\";\nimport { useTabster } from \"./useTabster\";\n/**\n * A hook that returns the necessary tabster attributes to support arrow key navigation\n * @param options - Options to configure keyboard navigation\n */\nexport const useArrowNavigationGroup = (options = {}) => {\n const {\n circular,\n axis,\n memorizeCurrent,\n tabbable,\n ignoreDefaultKeydown,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault\n } = options;\n const tabster = useTabster();\n if (tabster) {\n getMover(tabster);\n }\n return useTabsterAttributes({\n mover: {\n cyclic: !!circular,\n direction: axisToMoverDirection(axis ?? \"vertical\"),\n memorizeCurrent,\n tabbable,\n hasDefault: unstable_hasDefault\n },\n ...(ignoreDefaultKeydown && {\n focusable: {\n ignoreKeydown: ignoreDefaultKeydown\n }\n })\n });\n};\nfunction axisToMoverDirection(axis) {\n switch (axis) {\n case \"horizontal\":\n return Types.MoverDirections.Horizontal;\n case \"grid\":\n return Types.MoverDirections.Grid;\n case \"both\":\n return Types.MoverDirections.Both;\n case \"vertical\":\n default:\n return Types.MoverDirections.Vertical;\n }\n}\n//# sourceMappingURL=useArrowNavigationGroup.js.map"],"names":["useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","useTabster","getMover","useTabsterAttributes","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","Types","MoverDirections","Horizontal","Grid","Both","Vertical"],"mappings":";;;;+BAOaA;;aAAAA;;yBAPmB;sCACK;4BACV;AAKpB,MAAMA,0BAA0B,CAACC,UAAU,CAAC,CAAC,GAAK;IACvD,MAAM,EACJC,SAAQ,EACRC,KAAI,EACJC,gBAAe,EACfC,SAAQ,EACRC,qBAAoB,EACpB,gEAAgE;IAChEC,oBAAmB,EACpB,GAAGN;IACJ,MAAMO,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACXE,IAAAA,iBAAQ,EAACF;IACX,CAAC;IACD,OAAOG,IAAAA,0CAAoB,EAAC;QAC1BC,OAAO;YACLC,QAAQ,CAAC,CAACX;YACVY,WAAWC,qBAAqBZ,QAAQ;YACxCC;YACAC;YACAW,YAAYT;QACd;QACA,GAAID,wBAAwB;YAC1BW,WAAW;gBACTC,eAAeZ;YACjB;QACF,CAAC;IACH;AACF;AACA,SAASS,qBAAqBZ,IAAI,EAAE;IAClC,OAAQA;QACN,KAAK;YACH,OAAOgB,cAAK,CAACC,eAAe,CAACC,UAAU;QACzC,KAAK;YACH,OAAOF,cAAK,CAACC,eAAe,CAACE,IAAI;QACnC,KAAK;YACH,OAAOH,cAAK,CAACC,eAAe,CAACG,IAAI;QACnC,KAAK;QACL;YACE,OAAOJ,cAAK,CAACC,eAAe,CAACI,QAAQ;IACzC;AACF,EACA,mDAAmD"}
|