@fluentui/react-tabster 9.5.7 → 9.6.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 +30 -0
- package/CHANGELOG.json +61 -1
- package/CHANGELOG.md +25 -2
- package/dist/index.d.ts +7 -3
- package/lib/focus/constants.js.map +1 -1
- package/lib/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib/focus/createFocusOutlineStyle.js +4 -5
- package/lib/focus/createFocusOutlineStyle.js.map +1 -1
- package/lib/focus/focusVisiblePolyfill.js +4 -9
- package/lib/focus/focusVisiblePolyfill.js.map +1 -1
- package/lib/focus/focusWithinPolyfill.js.map +1 -1
- package/lib/focus/index.js.map +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib/hooks/useFocusFinders.js +16 -10
- package/lib/hooks/useFocusFinders.js.map +1 -1
- package/lib/hooks/useFocusVisible.js +4 -4
- package/lib/hooks/useFocusVisible.js.map +1 -1
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useFocusableGroup.js.map +1 -1
- package/lib/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib/hooks/useModalAttributes.js.map +1 -1
- package/lib/hooks/useTabster.js.map +1 -1
- package/lib/hooks/useTabsterAttributes.js.map +1 -1
- 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 +66 -74
- 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 +70 -58
- package/lib-commonjs/hooks/useFocusFinders.js.map +1 -1
- package/lib-commonjs/hooks/useFocusVisible.js +25 -19
- 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 +8 -7
- package/lib-amd/focus/constants.js +0 -20
- package/lib-amd/focus/constants.js.map +0 -1
- package/lib-amd/focus/createCustomFocusIndicatorStyle.js +0 -27
- package/lib-amd/focus/createCustomFocusIndicatorStyle.js.map +0 -1
- package/lib-amd/focus/createFocusOutlineStyle.js +0 -36
- package/lib-amd/focus/createFocusOutlineStyle.js.map +0 -1
- package/lib-amd/focus/focusVisiblePolyfill.js +0 -82
- package/lib-amd/focus/focusVisiblePolyfill.js.map +0 -1
- package/lib-amd/focus/focusWithinPolyfill.js +0 -55
- package/lib-amd/focus/focusWithinPolyfill.js.map +0 -1
- package/lib-amd/focus/index.js +0 -9
- package/lib-amd/focus/index.js.map +0 -1
- package/lib-amd/hooks/index.js +0 -13
- package/lib-amd/hooks/index.js.map +0 -1
- package/lib-amd/hooks/useArrowNavigationGroup.js +0 -45
- package/lib-amd/hooks/useArrowNavigationGroup.js.map +0 -1
- package/lib-amd/hooks/useFocusFinders.js +0 -43
- package/lib-amd/hooks/useFocusFinders.js.map +0 -1
- package/lib-amd/hooks/useFocusVisible.js +0 -17
- package/lib-amd/hooks/useFocusVisible.js.map +0 -1
- package/lib-amd/hooks/useFocusWithin.js +0 -22
- package/lib-amd/hooks/useFocusWithin.js.map +0 -1
- package/lib-amd/hooks/useFocusableGroup.js +0 -34
- package/lib-amd/hooks/useFocusableGroup.js.map +0 -1
- package/lib-amd/hooks/useKeyboardNavAttribute.js +0 -39
- package/lib-amd/hooks/useKeyboardNavAttribute.js.map +0 -1
- package/lib-amd/hooks/useModalAttributes.js +0 -38
- package/lib-amd/hooks/useModalAttributes.js.map +0 -1
- package/lib-amd/hooks/useTabster.js +0 -32
- package/lib-amd/hooks/useTabster.js.map +0 -1
- package/lib-amd/hooks/useTabsterAttributes.js +0 -17
- package/lib-amd/hooks/useTabsterAttributes.js.map +0 -1
- package/lib-amd/index.js +0 -17
- package/lib-amd/index.js.map +0 -1
@@ -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 !== null && axis !== void 0 ? 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 !== null && axis !== void 0 ? 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,SAAS,IAAI,IAAIA,SAAS,KAAK,IAAIA,OAAO,UAAU;YACpFC;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"}
|
@@ -1,62 +1,74 @@
|
|
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
|
-
|
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)=>{
|
18
|
+
return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
|
19
|
+
container,
|
20
|
+
acceptCondition
|
21
|
+
})) || [];
|
22
|
+
}, [
|
23
|
+
tabster
|
24
|
+
]);
|
25
|
+
const findFirstFocusable = _react.useCallback((container)=>{
|
26
|
+
return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({
|
27
|
+
container
|
28
|
+
});
|
29
|
+
}, [
|
30
|
+
tabster
|
31
|
+
]);
|
32
|
+
const findLastFocusable = _react.useCallback((container)=>{
|
33
|
+
return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
|
34
|
+
container
|
35
|
+
});
|
36
|
+
}, [
|
37
|
+
tabster
|
38
|
+
]);
|
39
|
+
const findNextFocusable = _react.useCallback((currentElement, options = {})=>{
|
40
|
+
if (!tabster || !targetDocument) {
|
41
|
+
return null;
|
42
|
+
}
|
43
|
+
const { container =targetDocument.body } = options;
|
44
|
+
return tabster.focusable.findNext({
|
45
|
+
currentElement,
|
46
|
+
container
|
47
|
+
});
|
48
|
+
}, [
|
49
|
+
tabster,
|
50
|
+
targetDocument
|
51
|
+
]);
|
52
|
+
const findPrevFocusable = _react.useCallback((currentElement, options = {})=>{
|
53
|
+
if (!tabster || !targetDocument) {
|
54
|
+
return null;
|
55
|
+
}
|
56
|
+
const { container =targetDocument.body } = options;
|
57
|
+
return tabster.focusable.findPrev({
|
58
|
+
currentElement,
|
59
|
+
container
|
60
|
+
});
|
61
|
+
}, [
|
62
|
+
tabster,
|
63
|
+
targetDocument
|
64
|
+
]);
|
65
|
+
return {
|
66
|
+
findAllFocusable,
|
67
|
+
findFirstFocusable,
|
68
|
+
findLastFocusable,
|
69
|
+
findNextFocusable,
|
70
|
+
findPrevFocusable
|
71
|
+
};
|
72
|
+
}; //# sourceMappingURL=useFocusFinders.js.map
|
73
|
+
|
62
74
|
//# 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) => {\n return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({\n container,\n acceptCondition\n })) || [];\n }, [tabster]);\n const findFirstFocusable = React.useCallback(container => {\n return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findFirst({\n container\n });\n }, [tabster]);\n const findLastFocusable = React.useCallback(container => {\n return tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({\n container\n });\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,kBAAoB;QACzE,OAAO,AAACR,CAAAA,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,SAAS,CAACC,OAAO,CAAC;YAClFH;YACAC;QACF,EAAE,AAAD,KAAM,EAAE;IACX,GAAG;QAACR;KAAQ;IACZ,MAAMW,qBAAqBN,OAAMC,WAAW,CAACC,CAAAA,YAAa;QACxD,OAAOP,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,SAAS,CAACG,SAAS,CAAC;YACnFL;QACF,EAAE;IACJ,GAAG;QAACP;KAAQ;IACZ,MAAMa,oBAAoBR,OAAMC,WAAW,CAACC,CAAAA,YAAa;QACvD,OAAOP,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS,SAAS,CAACK,QAAQ,CAAC;YAClFP;QACF,EAAE;IACJ,GAAG;QAACP;KAAQ;IACZ,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,29 @@
|
|
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
|
10
|
-
function useFocusVisible() {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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");
|
13
|
+
function useFocusVisible(options = {}) {
|
14
|
+
const contentValue = (0, _reactSharedContexts.useFluent_unstable)();
|
15
|
+
const scopeRef = _react.useRef(null);
|
16
|
+
var _options_targetDocument;
|
17
|
+
const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;
|
18
|
+
_react.useEffect(()=>{
|
19
|
+
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) && scopeRef.current) {
|
20
|
+
return (0, _focusVisiblePolyfill.applyFocusVisiblePolyfill)(scopeRef.current, targetDocument.defaultView);
|
21
|
+
}
|
22
|
+
}, [
|
23
|
+
scopeRef,
|
24
|
+
targetDocument
|
25
|
+
]);
|
26
|
+
return scopeRef;
|
27
|
+
} //# sourceMappingURL=useFocusVisible.js.map
|
28
|
+
|
23
29
|
//# 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 var _options_targetDocument;\n const targetDocument = (_options_targetDocument = options.targetDocument) !== null && _options_targetDocument !== void 0 ? _options_targetDocument : contentValue.targetDocument;\n React.useEffect(() => {\n if ((targetDocument === null || targetDocument === void 0 ? void 0 : 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","_options_targetDocument","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,IAAIC;IACJ,MAAMC,iBAAiB,AAACD,CAAAA,0BAA0BN,QAAQO,cAAc,AAAD,MAAO,IAAI,IAAID,4BAA4B,KAAK,IAAIA,0BAA0BL,aAAaM,cAAc;IAChLH,OAAMI,SAAS,CAAC,IAAM;QACpB,IAAI,AAACD,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeE,WAAW,AAAD,KAAMN,SAASO,OAAO,EAAE;YACpH,OAAOC,IAAAA,+CAAyB,EAACR,SAASO,OAAO,EAAEH,eAAeE,WAAW;QAC/E,CAAC;IACH,GAAG;QAACN;QAAUI;KAAe;IAC7B,OAAOJ;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 === null || targetDocument === void 0 ? void 0 : 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 === null || targetDocument === void 0 ? void 0 : 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,IAAI,AAACL,CAAAA,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeM,WAAW,AAAD,KAAMJ,WAAWK,OAAO,EAAE;YACtH,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 === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQQ,WAAW;QACnG;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"}
|