@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,62 +1,68 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useFocusFinders", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useFocusFinders
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
container
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
}
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
12
|
+
const _useTabster = require("./useTabster");
|
13
|
+
const useFocusFinders = ()=>{
|
14
|
+
const tabster = (0, _useTabster.useTabster)();
|
15
|
+
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
16
|
+
// Narrow props for now and let need dictate additional props in the future
|
17
|
+
const findAllFocusable = _react.useCallback((container, acceptCondition)=>tabster?.focusable.findAll({
|
18
|
+
container,
|
19
|
+
acceptCondition
|
20
|
+
}) || [], [
|
21
|
+
tabster
|
22
|
+
]);
|
23
|
+
const findFirstFocusable = _react.useCallback((container)=>tabster?.focusable.findFirst({
|
24
|
+
container
|
25
|
+
}), [
|
26
|
+
tabster
|
27
|
+
]);
|
28
|
+
const findLastFocusable = _react.useCallback((container)=>tabster?.focusable.findLast({
|
29
|
+
container
|
30
|
+
}), [
|
31
|
+
tabster
|
32
|
+
]);
|
33
|
+
const findNextFocusable = _react.useCallback((currentElement, options = {})=>{
|
34
|
+
if (!tabster || !targetDocument) {
|
35
|
+
return null;
|
36
|
+
}
|
37
|
+
const { container =targetDocument.body } = options;
|
38
|
+
return tabster.focusable.findNext({
|
39
|
+
currentElement,
|
40
|
+
container
|
41
|
+
});
|
42
|
+
}, [
|
43
|
+
tabster,
|
44
|
+
targetDocument
|
45
|
+
]);
|
46
|
+
const findPrevFocusable = _react.useCallback((currentElement, options = {})=>{
|
47
|
+
if (!tabster || !targetDocument) {
|
48
|
+
return null;
|
49
|
+
}
|
50
|
+
const { container =targetDocument.body } = options;
|
51
|
+
return tabster.focusable.findPrev({
|
52
|
+
currentElement,
|
53
|
+
container
|
54
|
+
});
|
55
|
+
}, [
|
56
|
+
tabster,
|
57
|
+
targetDocument
|
58
|
+
]);
|
59
|
+
return {
|
60
|
+
findAllFocusable,
|
61
|
+
findFirstFocusable,
|
62
|
+
findLastFocusable,
|
63
|
+
findNextFocusable,
|
64
|
+
findPrevFocusable
|
65
|
+
};
|
66
|
+
}; //# sourceMappingURL=useFocusFinders.js.map
|
67
|
+
|
62
68
|
//# sourceMappingURL=useFocusFinders.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFocusFinders.js"],"sourcesContent":["import * as React from \"react\";\nimport { useFluent_unstable as useFluent } from \"@fluentui/react-shared-contexts\";\nimport { useTabster } from \"./useTabster\";\n/**\n * Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element\n */\nexport const useFocusFinders = () => {\n const tabster = useTabster();\n const {\n targetDocument\n } = useFluent();\n // Narrow props for now and let need dictate additional props in the future\n const findAllFocusable = React.useCallback((container, acceptCondition) => tabster?.focusable.findAll({\n container,\n acceptCondition\n }) || [], [tabster]);\n const findFirstFocusable = React.useCallback(container => tabster?.focusable.findFirst({\n container\n }), [tabster]);\n const findLastFocusable = React.useCallback(container => tabster?.focusable.findLast({\n container\n }), [tabster]);\n const findNextFocusable = React.useCallback((currentElement, options = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n const {\n container = targetDocument.body\n } = options;\n return tabster.focusable.findNext({\n currentElement,\n container\n });\n }, [tabster, targetDocument]);\n const findPrevFocusable = React.useCallback((currentElement, options = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n const {\n container = targetDocument.body\n } = options;\n return tabster.focusable.findPrev({\n currentElement,\n container\n });\n }, [tabster, targetDocument]);\n return {\n findAllFocusable,\n findFirstFocusable,\n findLastFocusable,\n findNextFocusable,\n findPrevFocusable\n };\n};\n//# sourceMappingURL=useFocusFinders.js.map"],"names":["useFocusFinders","tabster","useTabster","targetDocument","useFluent","findAllFocusable","React","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;qCACyB;4BACrB;AAIpB,MAAMA,kBAAkB,IAAM;IACnC,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAS;IACb,2EAA2E;IAC3E,MAAMC,mBAAmBC,OAAMC,WAAW,CAAC,CAACC,WAAWC,kBAAoBR,SAASS,UAAUC,OAAO,CAAC;YACpGH;YACAC;QACF,MAAM,EAAE,EAAE;QAACR;KAAQ;IACnB,MAAMW,qBAAqBN,OAAMC,WAAW,CAACC,CAAAA,YAAaP,SAASS,UAAUG,SAAS,CAAC;YACrFL;QACF,IAAI;QAACP;KAAQ;IACb,MAAMa,oBAAoBR,OAAMC,WAAW,CAACC,CAAAA,YAAaP,SAASS,UAAUK,QAAQ,CAAC;YACnFP;QACF,IAAI;QAACP;KAAQ;IACb,MAAMe,oBAAoBV,OAAMC,WAAW,CAAC,CAACU,gBAAgBC,UAAU,CAAC,CAAC,GAAK;QAC5E,IAAI,CAACjB,WAAW,CAACE,gBAAgB;YAC/B,OAAO,IAAI;QACb,CAAC;QACD,MAAM,EACJK,WAAYL,eAAegB,IAAI,CAAA,EAChC,GAAGD;QACJ,OAAOjB,QAAQS,SAAS,CAACU,QAAQ,CAAC;YAChCH;YACAT;QACF;IACF,GAAG;QAACP;QAASE;KAAe;IAC5B,MAAMkB,oBAAoBf,OAAMC,WAAW,CAAC,CAACU,gBAAgBC,UAAU,CAAC,CAAC,GAAK;QAC5E,IAAI,CAACjB,WAAW,CAACE,gBAAgB;YAC/B,OAAO,IAAI;QACb,CAAC;QACD,MAAM,EACJK,WAAYL,eAAegB,IAAI,CAAA,EAChC,GAAGD;QACJ,OAAOjB,QAAQS,SAAS,CAACY,QAAQ,CAAC;YAChCL;YACAT;QACF;IACF,GAAG;QAACP;QAASE;KAAe;IAC5B,OAAO;QACLE;QACAO;QACAE;QACAE;QACAK;IACF;AACF,GACA,2CAA2C"}
|
@@ -1,23 +1,28 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useFocusVisible", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useFocusVisible
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
12
|
+
const _focusVisiblePolyfill = require("../focus/focusVisiblePolyfill");
|
10
13
|
function useFocusVisible(options = {}) {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
14
|
+
const contentValue = (0, _reactSharedContexts.useFluent_unstable)();
|
15
|
+
const scopeRef = _react.useRef(null);
|
16
|
+
const targetDocument = options.targetDocument ?? contentValue.targetDocument;
|
17
|
+
_react.useEffect(()=>{
|
18
|
+
if (targetDocument?.defaultView && scopeRef.current) {
|
19
|
+
return (0, _focusVisiblePolyfill.applyFocusVisiblePolyfill)(scopeRef.current, targetDocument.defaultView);
|
20
|
+
}
|
21
|
+
}, [
|
22
|
+
scopeRef,
|
23
|
+
targetDocument
|
24
|
+
]);
|
25
|
+
return scopeRef;
|
26
|
+
} //# sourceMappingURL=useFocusVisible.js.map
|
27
|
+
|
23
28
|
//# sourceMappingURL=useFocusVisible.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFocusVisible.js"],"sourcesContent":["import * as React from \"react\";\nimport { useFluent_unstable as useFluent } from \"@fluentui/react-shared-contexts\";\nimport { applyFocusVisiblePolyfill } from \"../focus/focusVisiblePolyfill\";\nexport function useFocusVisible(options = {}) {\n const contentValue = useFluent();\n const scopeRef = React.useRef(null);\n const targetDocument = options.targetDocument ?? contentValue.targetDocument;\n React.useEffect(() => {\n if (targetDocument?.defaultView && scopeRef.current) {\n return applyFocusVisiblePolyfill(scopeRef.current, targetDocument.defaultView);\n }\n }, [scopeRef, targetDocument]);\n return scopeRef;\n}\n//# sourceMappingURL=useFocusVisible.js.map"],"names":["useFocusVisible","options","contentValue","useFluent","scopeRef","React","useRef","targetDocument","useEffect","defaultView","current","applyFocusVisiblePolyfill"],"mappings":";;;;+BAGgBA;;aAAAA;;;6DAHO;qCACyB;sCACN;AACnC,SAASA,gBAAgBC,UAAU,CAAC,CAAC,EAAE;IAC5C,MAAMC,eAAeC,IAAAA,uCAAS;IAC9B,MAAMC,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAMC,iBAAiBN,QAAQM,cAAc,IAAIL,aAAaK,cAAc;IAC5EF,OAAMG,SAAS,CAAC,IAAM;QACpB,IAAID,gBAAgBE,eAAeL,SAASM,OAAO,EAAE;YACnD,OAAOC,IAAAA,+CAAyB,EAACP,SAASM,OAAO,EAAEH,eAAeE,WAAW;QAC/E,CAAC;IACH,GAAG;QAACL;QAAUG;KAAe;IAC7B,OAAOH;AACT,EACA,2CAA2C"}
|
@@ -1,28 +1,27 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useFocusWithin", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useFocusWithin
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
/**
|
11
|
-
* A ponyfill that allows `:focus-within` to support visibility based on keyboard/mouse navigation
|
12
|
-
* like `:focus-visible` https://github.com/WICG/focus-visible/issues/151
|
13
|
-
* @returns ref to the element that uses `:focus-within` styles
|
14
|
-
*/
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
12
|
+
const _focusWithinPolyfill = require("../focus/focusWithinPolyfill");
|
15
13
|
function useFocusWithin() {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
14
|
+
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
15
|
+
const elementRef = _react.useRef(null);
|
16
|
+
_react.useEffect(()=>{
|
17
|
+
if (targetDocument?.defaultView && elementRef.current) {
|
18
|
+
return (0, _focusWithinPolyfill.applyFocusWithinPolyfill)(elementRef.current, targetDocument.defaultView);
|
19
|
+
}
|
20
|
+
}, [
|
21
|
+
elementRef,
|
22
|
+
targetDocument
|
23
|
+
]);
|
24
|
+
return elementRef;
|
25
|
+
} //# sourceMappingURL=useFocusWithin.js.map
|
26
|
+
|
28
27
|
//# sourceMappingURL=useFocusWithin.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFocusWithin.js"],"sourcesContent":["import * as React from \"react\";\nimport { useFluent_unstable as useFluent } from \"@fluentui/react-shared-contexts\";\nimport { applyFocusWithinPolyfill } from \"../focus/focusWithinPolyfill\";\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 useFocusWithin() {\n const {\n targetDocument\n } = useFluent();\n const elementRef = React.useRef(null);\n React.useEffect(() => {\n if (targetDocument?.defaultView && elementRef.current) {\n return applyFocusWithinPolyfill(elementRef.current, targetDocument.defaultView);\n }\n }, [elementRef, targetDocument]);\n return elementRef;\n}\n//# sourceMappingURL=useFocusWithin.js.map"],"names":["useFocusWithin","targetDocument","useFluent","elementRef","React","useRef","useEffect","defaultView","current","applyFocusWithinPolyfill"],"mappings":";;;;+BAQgBA;;aAAAA;;;6DARO;qCACyB;qCACP;AAMlC,SAASA,iBAAiB;IAC/B,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAS;IACb,MAAMC,aAAaC,OAAMC,MAAM,CAAC,IAAI;IACpCD,OAAME,SAAS,CAAC,IAAM;QACpB,IAAIL,gBAAgBM,eAAeJ,WAAWK,OAAO,EAAE;YACrD,OAAOC,IAAAA,6CAAwB,EAACN,WAAWK,OAAO,EAAEP,eAAeM,WAAW;QAChF,CAAC;IACH,GAAG;QAACJ;QAAYF;KAAe;IAC/B,OAAOE;AACT,EACA,0CAA0C"}
|
@@ -1,38 +1,36 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useFocusableGroup", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useFocusableGroup
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
*/
|
14
|
-
const useFocusableGroup = options => {
|
15
|
-
const tabster = useTabster_1.useTabster();
|
16
|
-
if (tabster) {
|
17
|
-
tabster_1.getGroupper(tabster);
|
18
|
-
}
|
19
|
-
return useTabsterAttributes_1.useTabsterAttributes({
|
20
|
-
groupper: {
|
21
|
-
tabbability: getTabbability(options === null || options === void 0 ? void 0 : options.tabBehavior)
|
9
|
+
const _tabster = require("tabster");
|
10
|
+
const _useTabsterAttributes = require("./useTabsterAttributes");
|
11
|
+
const _useTabster = require("./useTabster");
|
12
|
+
const useFocusableGroup = (options)=>{
|
13
|
+
const tabster = (0, _useTabster.useTabster)();
|
14
|
+
if (tabster) {
|
15
|
+
(0, _tabster.getGroupper)(tabster);
|
22
16
|
}
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
case 'unlimited':
|
29
|
-
return tabster_1.Types.GroupperTabbabilities.Unlimited;
|
30
|
-
case 'limited':
|
31
|
-
return tabster_1.Types.GroupperTabbabilities.Limited;
|
32
|
-
case 'limited-trap-focus':
|
33
|
-
return tabster_1.Types.GroupperTabbabilities.LimitedTrapFocus;
|
34
|
-
default:
|
35
|
-
return undefined;
|
36
|
-
}
|
17
|
+
return (0, _useTabsterAttributes.useTabsterAttributes)({
|
18
|
+
groupper: {
|
19
|
+
tabbability: getTabbability(options?.tabBehavior)
|
20
|
+
}
|
21
|
+
});
|
37
22
|
};
|
23
|
+
const getTabbability = (tabBehavior)=>{
|
24
|
+
switch(tabBehavior){
|
25
|
+
case "unlimited":
|
26
|
+
return _tabster.Types.GroupperTabbabilities.Unlimited;
|
27
|
+
case "limited":
|
28
|
+
return _tabster.Types.GroupperTabbabilities.Limited;
|
29
|
+
case "limited-trap-focus":
|
30
|
+
return _tabster.Types.GroupperTabbabilities.LimitedTrapFocus;
|
31
|
+
default:
|
32
|
+
return undefined;
|
33
|
+
}
|
34
|
+
}; //# sourceMappingURL=useFocusableGroup.js.map
|
35
|
+
|
38
36
|
//# sourceMappingURL=useFocusableGroup.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFocusableGroup.js"],"sourcesContent":["import { Types, getGroupper } from \"tabster\";\nimport { useTabsterAttributes } from \"./useTabsterAttributes\";\nimport { useTabster } from \"./useTabster\";\n/**\n * A hook that returns the necessary tabster attributes to support groupping.\n * @param options - Options to configure keyboard navigation\n */\nexport const useFocusableGroup = options => {\n const tabster = useTabster();\n if (tabster) {\n getGroupper(tabster);\n }\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior)\n }\n });\n};\nconst getTabbability = tabBehavior => {\n switch (tabBehavior) {\n case \"unlimited\":\n return Types.GroupperTabbabilities.Unlimited;\n case \"limited\":\n return Types.GroupperTabbabilities.Limited;\n case \"limited-trap-focus\":\n return Types.GroupperTabbabilities.LimitedTrapFocus;\n default:\n return undefined;\n }\n};\n//# sourceMappingURL=useFocusableGroup.js.map"],"names":["useFocusableGroup","options","tabster","useTabster","getGroupper","useTabsterAttributes","groupper","tabbability","getTabbability","tabBehavior","Types","GroupperTabbabilities","Unlimited","Limited","LimitedTrapFocus","undefined"],"mappings":";;;;+BAOaA;;aAAAA;;yBAPsB;sCACE;4BACV;AAKpB,MAAMA,oBAAoBC,CAAAA,UAAW;IAC1C,MAAMC,UAAUC,IAAAA,sBAAU;IAC1B,IAAID,SAAS;QACXE,IAAAA,oBAAW,EAACF;IACd,CAAC;IACD,OAAOG,IAAAA,0CAAoB,EAAC;QAC1BC,UAAU;YACRC,aAAaC,eAAeP,SAASQ;QACvC;IACF;AACF;AACA,MAAMD,iBAAiBC,CAAAA,cAAe;IACpC,OAAQA;QACN,KAAK;YACH,OAAOC,cAAK,CAACC,qBAAqB,CAACC,SAAS;QAC9C,KAAK;YACH,OAAOF,cAAK,CAACC,qBAAqB,CAACE,OAAO;QAC5C,KAAK;YACH,OAAOH,cAAK,CAACC,qBAAqB,CAACG,gBAAgB;QACrD;YACE,OAAOC;IACX;AACF,GACA,6CAA6C"}
|
@@ -1,45 +1,44 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useKeyboardNavAttribute", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useKeyboardNavAttribute
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
11
|
-
/**
|
12
|
-
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
|
13
|
-
* attribute to a referenced element to ensure keyboard navigation awareness
|
14
|
-
* synced to keyborg logic without having to cause a re-render on react tree.
|
15
|
-
*/
|
9
|
+
const _keyborg = require("keyborg");
|
10
|
+
const _react = require("react");
|
11
|
+
const _constants = require("../focus/constants");
|
12
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
16
13
|
function useKeyboardNavAttribute() {
|
17
|
-
|
18
|
-
targetDocument
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
14
|
+
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
15
|
+
const keyborg = (0, _react.useMemo)(()=>targetDocument && (0, _keyborg.createKeyborg)(targetDocument.defaultView), [
|
16
|
+
targetDocument
|
17
|
+
]);
|
18
|
+
const ref = (0, _react.useRef)(null);
|
19
|
+
(0, _react.useEffect)(()=>{
|
20
|
+
if (keyborg) {
|
21
|
+
setBooleanAttribute(ref, _constants.KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());
|
22
|
+
const cb = (next)=>{
|
23
|
+
setBooleanAttribute(ref, _constants.KEYBOARD_NAV_ATTRIBUTE, next);
|
24
|
+
};
|
25
|
+
keyborg.subscribe(cb);
|
26
|
+
return ()=>keyborg.unsubscribe(cb);
|
27
|
+
}
|
28
|
+
}, [
|
29
|
+
keyborg
|
30
|
+
]);
|
31
|
+
return ref;
|
33
32
|
}
|
34
|
-
exports.useKeyboardNavAttribute = useKeyboardNavAttribute;
|
35
33
|
function setBooleanAttribute(elementRef, attribute, value) {
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
}
|
34
|
+
if (!elementRef.current) {
|
35
|
+
return;
|
36
|
+
}
|
37
|
+
if (value) {
|
38
|
+
elementRef.current.setAttribute(attribute, "");
|
39
|
+
} else {
|
40
|
+
elementRef.current.removeAttribute(attribute);
|
41
|
+
}
|
42
|
+
} //# sourceMappingURL=useKeyboardNavAttribute.js.map
|
43
|
+
|
45
44
|
//# sourceMappingURL=useKeyboardNavAttribute.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useKeyboardNavAttribute.js"],"sourcesContent":["import { createKeyborg } from \"keyborg\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { KEYBOARD_NAV_ATTRIBUTE } from \"../focus/constants\";\nimport { useFluent_unstable as useFluent } from \"@fluentui/react-shared-contexts\";\n/**\n * Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`\n * attribute to a referenced element to ensure keyboard navigation awareness\n * synced to keyborg logic without having to cause a re-render on react tree.\n */\nexport function useKeyboardNavAttribute() {\n const {\n targetDocument\n } = useFluent();\n const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView), [targetDocument]);\n const ref = useRef(null);\n useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb = next => {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, next);\n };\n keyborg.subscribe(cb);\n return () => keyborg.unsubscribe(cb);\n }\n }, [keyborg]);\n return ref;\n}\nfunction setBooleanAttribute(elementRef, attribute, value) {\n if (!elementRef.current) {\n return;\n }\n if (value) {\n elementRef.current.setAttribute(attribute, \"\");\n } else {\n elementRef.current.removeAttribute(attribute);\n }\n}\n//# sourceMappingURL=useKeyboardNavAttribute.js.map"],"names":["useKeyboardNavAttribute","targetDocument","useFluent","keyborg","useMemo","createKeyborg","defaultView","ref","useRef","useEffect","setBooleanAttribute","KEYBOARD_NAV_ATTRIBUTE","isNavigatingWithKeyboard","cb","next","subscribe","unsubscribe","elementRef","attribute","value","current","setAttribute","removeAttribute"],"mappings":";;;;+BASgBA;;aAAAA;;yBATc;uBACa;2BACJ;qCACS;AAMzC,SAASA,0BAA0B;IACxC,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAS;IACb,MAAMC,UAAUC,IAAAA,cAAO,EAAC,IAAMH,kBAAkBI,IAAAA,sBAAa,EAACJ,eAAeK,WAAW,GAAG;QAACL;KAAe;IAC3G,MAAMM,MAAMC,IAAAA,aAAM,EAAC,IAAI;IACvBC,IAAAA,gBAAS,EAAC,IAAM;QACd,IAAIN,SAAS;YACXO,oBAAoBH,KAAKI,iCAAsB,EAAER,QAAQS,wBAAwB;YACjF,MAAMC,KAAKC,CAAAA,OAAQ;gBACjBJ,oBAAoBH,KAAKI,iCAAsB,EAAEG;YACnD;YACAX,QAAQY,SAAS,CAACF;YAClB,OAAO,IAAMV,QAAQa,WAAW,CAACH;QACnC,CAAC;IACH,GAAG;QAACV;KAAQ;IACZ,OAAOI;AACT;AACA,SAASG,oBAAoBO,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAE;IACzD,IAAI,CAACF,WAAWG,OAAO,EAAE;QACvB;IACF,CAAC;IACD,IAAID,OAAO;QACTF,WAAWG,OAAO,CAACC,YAAY,CAACH,WAAW;IAC7C,OAAO;QACLD,WAAWG,OAAO,CAACE,eAAe,CAACJ;IACrC,CAAC;AACH,EACA,mDAAmD"}
|
@@ -1,49 +1,40 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useModalAttributes", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useModalAttributes
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
*/
|
18
|
-
const useModalAttributes = (options = {}) => {
|
19
|
-
const {
|
20
|
-
trapFocus,
|
21
|
-
alwaysFocusable,
|
22
|
-
legacyTrapFocus
|
23
|
-
} = options;
|
24
|
-
const tabster = useTabster_1.useTabster();
|
25
|
-
// Initializes the modalizer and deloser APIs
|
26
|
-
if (tabster) {
|
27
|
-
tabster_1.getModalizer(tabster);
|
28
|
-
tabster_1.getDeloser(tabster);
|
29
|
-
}
|
30
|
-
const id = react_utilities_1.useId('modal-', options.id);
|
31
|
-
const modalAttributes = useTabsterAttributes_1.useTabsterAttributes({
|
32
|
-
deloser: {},
|
33
|
-
modalizer: {
|
34
|
-
id,
|
35
|
-
isOthersAccessible: !trapFocus,
|
36
|
-
isAlwaysAccessible: alwaysFocusable,
|
37
|
-
isTrapped: legacyTrapFocus && trapFocus
|
9
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
10
|
+
const _useTabsterAttributes = require("./useTabsterAttributes");
|
11
|
+
const _tabster = require("tabster");
|
12
|
+
const _useTabster = require("./useTabster");
|
13
|
+
const useModalAttributes = (options = {})=>{
|
14
|
+
const { trapFocus , alwaysFocusable , legacyTrapFocus } = options;
|
15
|
+
const tabster = (0, _useTabster.useTabster)();
|
16
|
+
// Initializes the modalizer and deloser APIs
|
17
|
+
if (tabster) {
|
18
|
+
(0, _tabster.getModalizer)(tabster);
|
19
|
+
(0, _tabster.getDeloser)(tabster);
|
38
20
|
}
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
}
|
48
|
-
|
21
|
+
const id = (0, _reactUtilities.useId)("modal-", options.id);
|
22
|
+
const modalAttributes = (0, _useTabsterAttributes.useTabsterAttributes)({
|
23
|
+
deloser: {},
|
24
|
+
modalizer: {
|
25
|
+
id,
|
26
|
+
isOthersAccessible: !trapFocus,
|
27
|
+
isAlwaysAccessible: alwaysFocusable,
|
28
|
+
isTrapped: legacyTrapFocus && trapFocus
|
29
|
+
}
|
30
|
+
});
|
31
|
+
const triggerAttributes = (0, _useTabsterAttributes.useTabsterAttributes)({
|
32
|
+
deloser: {}
|
33
|
+
});
|
34
|
+
return {
|
35
|
+
modalAttributes,
|
36
|
+
triggerAttributes
|
37
|
+
};
|
38
|
+
}; //# sourceMappingURL=useModalAttributes.js.map
|
39
|
+
|
49
40
|
//# sourceMappingURL=useModalAttributes.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useModalAttributes.js"],"sourcesContent":["import { useId } from \"@fluentui/react-utilities\";\nimport { useTabsterAttributes } from \"./useTabsterAttributes\";\nimport { getDeloser, getModalizer } from \"tabster\";\nimport { useTabster } from \"./useTabster\";\n/**\n * Applies modal dialog behaviour through DOM attributes\n * Modal element will focus trap and hide other content on the page\n * The trigger element will be focused if focus is lost after the modal element is removed\n *\n * @returns DOM attributes to apply to the modal element and its trigger\n */\nexport const useModalAttributes = (options = {}) => {\n const {\n trapFocus,\n alwaysFocusable,\n legacyTrapFocus\n } = options;\n const tabster = useTabster();\n // Initializes the modalizer and deloser APIs\n if (tabster) {\n getModalizer(tabster);\n getDeloser(tabster);\n }\n const id = useId(\"modal-\", options.id);\n const modalAttributes = useTabsterAttributes({\n deloser: {},\n modalizer: {\n id,\n isOthersAccessible: !trapFocus,\n isAlwaysAccessible: alwaysFocusable,\n isTrapped: legacyTrapFocus && trapFocus\n }\n });\n const triggerAttributes = useTabsterAttributes({\n deloser: {}\n });\n return {\n modalAttributes,\n triggerAttributes\n };\n};\n//# sourceMappingURL=useModalAttributes.js.map"],"names":["useModalAttributes","options","trapFocus","alwaysFocusable","legacyTrapFocus","tabster","useTabster","getModalizer","getDeloser","id","useId","modalAttributes","useTabsterAttributes","deloser","modalizer","isOthersAccessible","isAlwaysAccessible","isTrapped","triggerAttributes"],"mappings":";;;;+BAWaA;;aAAAA;;gCAXS;sCACe;yBACI;4BACd;AAQpB,MAAMA,qBAAqB,CAACC,UAAU,CAAC,CAAC,GAAK;IAClD,MAAM,EACJC,UAAS,EACTC,gBAAe,EACfC,gBAAe,EAChB,GAAGH;IACJ,MAAMI,UAAUC,IAAAA,sBAAU;IAC1B,6CAA6C;IAC7C,IAAID,SAAS;QACXE,IAAAA,qBAAY,EAACF;QACbG,IAAAA,mBAAU,EAACH;IACb,CAAC;IACD,MAAMI,KAAKC,IAAAA,qBAAK,EAAC,UAAUT,QAAQQ,EAAE;IACrC,MAAME,kBAAkBC,IAAAA,0CAAoB,EAAC;QAC3CC,SAAS,CAAC;QACVC,WAAW;YACTL;YACAM,oBAAoB,CAACb;YACrBc,oBAAoBb;YACpBc,WAAWb,mBAAmBF;QAChC;IACF;IACA,MAAMgB,oBAAoBN,IAAAA,0CAAoB,EAAC;QAC7CC,SAAS,CAAC;IACZ;IACA,OAAO;QACLF;QACAO;IACF;AACF,GACA,8CAA8C"}
|