@fluentui/react-tabster 9.4.2 → 9.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +38 -2
- package/CHANGELOG.md +22 -3
- package/dist/index.d.ts +8 -2
- package/lib/hooks/useArrowNavigationGroup.js +6 -3
- package/lib/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib/hooks/useFocusFinders.js +28 -8
- package/lib/hooks/useFocusFinders.js.map +1 -1
- package/lib-amd/hooks/useArrowNavigationGroup.js +4 -1
- package/lib-amd/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib-amd/hooks/useFocusFinders.js +14 -5
- package/lib-amd/hooks/useFocusFinders.js.map +1 -1
- package/lib-commonjs/hooks/useArrowNavigationGroup.js +6 -3
- package/lib-commonjs/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib-commonjs/hooks/useFocusFinders.js +28 -8
- package/lib-commonjs/hooks/useFocusFinders.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,43 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 10 Feb 2023 08:46:47 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v9.5.1",
|
|
7
|
+
"version": "9.5.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-tabster",
|
|
13
|
+
"comment": "Bump @fluentui/react-utilities to v9.5.2",
|
|
14
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 07 Feb 2023 14:13:07 GMT",
|
|
21
|
+
"tag": "@fluentui/react-tabster_v9.5.0",
|
|
22
|
+
"version": "9.5.0",
|
|
23
|
+
"comments": {
|
|
24
|
+
"minor": [
|
|
25
|
+
{
|
|
26
|
+
"author": "yuanboxue@microsoft.com",
|
|
27
|
+
"package": "@fluentui/react-tabster",
|
|
28
|
+
"commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66",
|
|
29
|
+
"comment": "feat: add `unstable_hasDefault` option in `useArrowNavigationGroup` that specifies the arrow navigation group has default focusable item"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "lingfangao@hotmail.com",
|
|
33
|
+
"package": "@fluentui/react-tabster",
|
|
34
|
+
"commit": "7b7f2cc005b44155e78b9aad071085e1f8db7030",
|
|
35
|
+
"comment": "feat: Bump keyborg to 2.0.0 and tabster to 4.0.1"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Tue, 31 Jan 2023 19:53:58 GMT",
|
|
6
42
|
"tag": "@fluentui/react-tabster_v9.4.2",
|
|
7
43
|
"version": "9.4.2",
|
|
8
44
|
"comments": {
|
|
@@ -11,7 +47,7 @@
|
|
|
11
47
|
"author": "beachball",
|
|
12
48
|
"package": "@fluentui/react-tabster",
|
|
13
49
|
"comment": "Bump @fluentui/react-utilities to v9.5.1",
|
|
14
|
-
"commit": "
|
|
50
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
15
51
|
}
|
|
16
52
|
]
|
|
17
53
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 10 Feb 2023 08:46:47 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.1)
|
|
8
|
+
|
|
9
|
+
Fri, 10 Feb 2023 08:46:47 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.5.0..@fluentui/react-tabster_v9.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.5.0)
|
|
17
|
+
|
|
18
|
+
Tue, 07 Feb 2023 14:13:07 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.4.2..@fluentui/react-tabster_v9.5.0)
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- feat: add `unstable_hasDefault` option in `useArrowNavigationGroup` that specifies the arrow navigation group has default focusable item ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by yuanboxue@microsoft.com)
|
|
24
|
+
- feat: Bump keyborg to 2.0.0 and tabster to 4.0.1 ([PR #26584](https://github.com/microsoft/fluentui/pull/26584) by lingfangao@hotmail.com)
|
|
25
|
+
|
|
7
26
|
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.4.2)
|
|
8
27
|
|
|
9
|
-
Tue, 31 Jan 2023 19:
|
|
28
|
+
Tue, 31 Jan 2023 19:53:58 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.4.1..@fluentui/react-tabster_v9.4.2)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
13
32
|
|
|
14
|
-
- Bump @fluentui/react-utilities to v9.5.1 ([PR #
|
|
33
|
+
- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
15
34
|
|
|
16
35
|
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.4.1)
|
|
17
36
|
|
package/dist/index.d.ts
CHANGED
|
@@ -86,6 +86,12 @@ export declare interface UseArrowNavigationGroupOptions {
|
|
|
86
86
|
* Tabster should ignore default handling of keydown events
|
|
87
87
|
*/
|
|
88
88
|
ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];
|
|
89
|
+
/**
|
|
90
|
+
* The default focusable item in the group will be an element with Focusable.isDefault property.
|
|
91
|
+
* Note that there is no way in \@fluentui/react-tabster to set default focusable element,
|
|
92
|
+
* and this option is currently for internal testing purposes only.
|
|
93
|
+
*/
|
|
94
|
+
unstable_hasDefault?: boolean;
|
|
89
95
|
}
|
|
90
96
|
|
|
91
97
|
/**
|
|
@@ -108,8 +114,8 @@ export declare const useFocusFinders: () => {
|
|
|
108
114
|
findAllFocusable: (container: HTMLElement, acceptCondition?: ((el: HTMLElement) => boolean) | undefined) => HTMLElement[];
|
|
109
115
|
findFirstFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
|
|
110
116
|
findLastFocusable: (container: HTMLElement) => HTMLElement | null | undefined;
|
|
111
|
-
findNextFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps
|
|
112
|
-
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Types.FindNextProps
|
|
117
|
+
findNextFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
|
118
|
+
findPrevFocusable: (currentElement: HTMLElement, options?: Pick<Partial<Types.FindNextProps>, 'container'>) => HTMLElement | null | undefined;
|
|
113
119
|
};
|
|
114
120
|
|
|
115
121
|
export declare function useFocusVisible<TElement extends HTMLElement = HTMLElement>(): React_2.RefObject<TElement>;
|
|
@@ -11,7 +11,9 @@ export const useArrowNavigationGroup = (options = {}) => {
|
|
|
11
11
|
axis,
|
|
12
12
|
memorizeCurrent,
|
|
13
13
|
tabbable,
|
|
14
|
-
ignoreDefaultKeydown
|
|
14
|
+
ignoreDefaultKeydown,
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
16
|
+
unstable_hasDefault
|
|
15
17
|
} = options;
|
|
16
18
|
const tabster = useTabster();
|
|
17
19
|
if (tabster) {
|
|
@@ -21,8 +23,9 @@ export const useArrowNavigationGroup = (options = {}) => {
|
|
|
21
23
|
mover: {
|
|
22
24
|
cyclic: !!circular,
|
|
23
25
|
direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
|
|
24
|
-
memorizeCurrent
|
|
25
|
-
tabbable
|
|
26
|
+
memorizeCurrent,
|
|
27
|
+
tabbable,
|
|
28
|
+
hasDefault: unstable_hasDefault
|
|
26
29
|
},
|
|
27
30
|
...(ignoreDefaultKeydown && {
|
|
28
31
|
focusable: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,SAAS;AACzC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,SAAS;AACzC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,UAAU,QAAQ,cAAc;AAkCzC;;;;AAIA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,UAA0C,EAAE,KAA+B;EACjH,MAAM;IACJC,QAAQ;IACRC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,oBAAoB;IACpB;IACAC;EAAmB,CACpB,GAAGN,OAAO;EACX,MAAMO,OAAO,GAAGT,UAAU,EAAE;EAE5B,IAAIS,OAAO,EAAE;IACXX,QAAQ,CAACW,OAAO,CAAC;;EAGnB,OAAOV,oBAAoB,CAAC;IAC1BW,KAAK,EAAE;MACLC,MAAM,EAAE,CAAC,CAACR,QAAQ;MAClBS,SAAS,EAAEC,oBAAoB,CAACT,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,UAAU,CAAC;MACnDC,eAAe;MACfC,QAAQ;MACRQ,UAAU,EAAEN;KACb;IACD,IAAID,oBAAoB,IAAI;MAC1BQ,SAAS,EAAE;QACTC,aAAa,EAAET;;KAElB;GACF,CAAC;AACJ,CAAC;AAED,SAASM,oBAAoB,CAACT,IAA4C;EACxE,QAAQA,IAAI;IACV,KAAK,YAAY;MACf,OAAOP,KAAK,CAACoB,eAAe,CAACC,UAAU;IACzC,KAAK,MAAM;MACT,OAAOrB,KAAK,CAACoB,eAAe,CAACE,IAAI;IACnC,KAAK,MAAM;MACT,OAAOtB,KAAK,CAACoB,eAAe,CAACG,IAAI;IAEnC,KAAK,UAAU;IACf;MACE,OAAOvB,KAAK,CAACoB,eAAe,CAACI,QAAQ;EAAC;AAE5C","names":["Types","getMover","useTabsterAttributes","useTabster","useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","MoverDirections","Horizontal","Grid","Both","Vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /**\n * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n */\n axis?: 'vertical' | 'horizontal' | 'grid' | 'both';\n /**\n * Focus will cycle to the first/last elements of the group without stopping\n */\n circular?: boolean;\n /**\n * Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n */\n memorizeCurrent?: boolean;\n /**\n * Allow tabbing within the arrow navigation group items.\n */\n tabbable?: boolean;\n /**\n * Tabster should ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /**\n * The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\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: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\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\n if (tabster) {\n getMover(tabster);\n }\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};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\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\n case 'vertical':\n default:\n return Types.MoverDirections.Vertical;\n }\n}\n"]}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
2
3
|
import { useTabster } from './useTabster';
|
|
3
4
|
/**
|
|
4
5
|
* Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
|
|
5
6
|
*/
|
|
6
7
|
export const useFocusFinders = () => {
|
|
7
8
|
const tabster = useTabster();
|
|
9
|
+
const {
|
|
10
|
+
targetDocument
|
|
11
|
+
} = useFluent();
|
|
8
12
|
// Narrow props for now and let need dictate additional props in the future
|
|
9
13
|
const findAllFocusable = React.useCallback((container, acceptCondition) => (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
|
|
10
14
|
container,
|
|
@@ -16,14 +20,30 @@ export const useFocusFinders = () => {
|
|
|
16
20
|
const findLastFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
|
|
17
21
|
container
|
|
18
22
|
}), [tabster]);
|
|
19
|
-
const findNextFocusable = React.useCallback((currentElement, options = {}) =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
const findNextFocusable = React.useCallback((currentElement, options = {}) => {
|
|
24
|
+
if (!tabster || !targetDocument) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
const {
|
|
28
|
+
container = targetDocument.body
|
|
29
|
+
} = options;
|
|
30
|
+
return tabster.focusable.findNext({
|
|
31
|
+
currentElement,
|
|
32
|
+
container
|
|
33
|
+
});
|
|
34
|
+
}, [tabster, targetDocument]);
|
|
35
|
+
const findPrevFocusable = React.useCallback((currentElement, options = {}) => {
|
|
36
|
+
if (!tabster || !targetDocument) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
const {
|
|
40
|
+
container = targetDocument.body
|
|
41
|
+
} = options;
|
|
42
|
+
return tabster.focusable.findPrev({
|
|
43
|
+
currentElement,
|
|
44
|
+
container
|
|
45
|
+
});
|
|
46
|
+
}, [tabster, targetDocument]);
|
|
27
47
|
return {
|
|
28
48
|
findAllFocusable,
|
|
29
49
|
findFirstFocusable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;AAGA,OAAO,MAAMC,eAAe,GAAG,MAAK;EAClC,MAAMC,OAAO,GAAGF,UAAU,EAAE;
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AACjF,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;AAGA,OAAO,MAAMC,eAAe,GAAG,MAAK;EAClC,MAAMC,OAAO,GAAGF,UAAU,EAAE;EAC5B,MAAM;IAAEG;EAAc,CAAE,GAAGJ,SAAS,EAAE;EAEtC;EACA,MAAMK,gBAAgB,GAAGP,KAAK,CAACQ,WAAW,CACxC,CAACC,SAAsB,EAAEC,eAA8C,KACrE,QAAO,aAAPL,OAAO,uBAAPA,OAAO,CAAEM,SAAS,CAACC,OAAO,CAAC;IAAEH,SAAS;IAAEC;EAAe,CAAE,CAAC,KAAI,EAAE,EAClE,CAACL,OAAO,CAAC,CACV;EAED,MAAMQ,kBAAkB,GAAGb,KAAK,CAACQ,WAAW,CACzCC,SAAsB,IAAKJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,SAAS,CAACG,SAAS,CAAC;IAAEL;EAAS,CAAE,CAAC,EACvE,CAACJ,OAAO,CAAC,CACV;EAED,MAAMU,iBAAiB,GAAGf,KAAK,CAACQ,WAAW,CAAEC,SAAsB,IAAKJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,SAAS,CAACK,QAAQ,CAAC;IAAEP;EAAS,CAAE,CAAC,EAAE,CAClHJ,OAAO,CACR,CAAC;EAEF,MAAMY,iBAAiB,GAAGjB,KAAK,CAACQ,WAAW,CACzC,CAACU,cAA2B,EAAEC,UAAkE,EAAE,KAAI;IACpG,IAAI,CAACd,OAAO,IAAI,CAACC,cAAc,EAAE;MAC/B,OAAO,IAAI;;IAGb,MAAM;MAAEG,SAAS,GAAGH,cAAc,CAACc;IAAI,CAAE,GAAGD,OAAO;IAEnD,OAAOd,OAAO,CAACM,SAAS,CAACU,QAAQ,CAAC;MAAEH,cAAc;MAAET;IAAS,CAAE,CAAC;EAClE,CAAC,EACD,CAACJ,OAAO,EAAEC,cAAc,CAAC,CAC1B;EAED,MAAMgB,iBAAiB,GAAGtB,KAAK,CAACQ,WAAW,CACzC,CAACU,cAA2B,EAAEC,UAAkE,EAAE,KAAI;IACpG,IAAI,CAACd,OAAO,IAAI,CAACC,cAAc,EAAE;MAC/B,OAAO,IAAI;;IAGb,MAAM;MAAEG,SAAS,GAAGH,cAAc,CAACc;IAAI,CAAE,GAAGD,OAAO;IAEnD,OAAOd,OAAO,CAACM,SAAS,CAACY,QAAQ,CAAC;MAAEL,cAAc;MAAET;IAAS,CAAE,CAAC;EAClE,CAAC,EACD,CAACJ,OAAO,EAAEC,cAAc,CAAC,CAC1B;EAED,OAAO;IACLC,gBAAgB;IAChBM,kBAAkB;IAClBE,iBAAiB;IACjBE,iBAAiB;IACjBK;GACD;AACH,CAAC","names":["React","useFluent_unstable","useFluent","useTabster","useFocusFinders","tabster","targetDocument","findAllFocusable","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\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 { targetDocument } = useFluent();\n\n // Narrow props for now and let need dictate additional props in the future\n const findAllFocusable = React.useCallback(\n (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n tabster?.focusable.findAll({ container, acceptCondition }) || [],\n [tabster],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n [tabster],\n );\n\n const findLastFocusable = React.useCallback((container: HTMLElement) => tabster?.focusable.findLast({ container }), [\n tabster,\n ]);\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabster.focusable.findNext({ currentElement, container });\n },\n [tabster, targetDocument],\n );\n\n const findPrevFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabster.focusable.findPrev({ currentElement, container });\n },\n [tabster, targetDocument],\n );\n\n return {\n findAllFocusable,\n findFirstFocusable,\n findLastFocusable,\n findNextFocusable,\n findPrevFocusable,\n };\n};\n"]}
|
|
@@ -8,7 +8,9 @@ define(["require", "exports", "tslib", "tabster", "./useTabsterAttributes", "./u
|
|
|
8
8
|
*/
|
|
9
9
|
var useArrowNavigationGroup = function (options) {
|
|
10
10
|
if (options === void 0) { options = {}; }
|
|
11
|
-
var circular = options.circular, axis = options.axis, memorizeCurrent = options.memorizeCurrent, tabbable = options.tabbable, ignoreDefaultKeydown = options.ignoreDefaultKeydown
|
|
11
|
+
var circular = options.circular, axis = options.axis, memorizeCurrent = options.memorizeCurrent, tabbable = options.tabbable, ignoreDefaultKeydown = options.ignoreDefaultKeydown,
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
13
|
+
unstable_hasDefault = options.unstable_hasDefault;
|
|
12
14
|
var tabster = useTabster_1.useTabster();
|
|
13
15
|
if (tabster) {
|
|
14
16
|
tabster_1.getMover(tabster);
|
|
@@ -18,6 +20,7 @@ define(["require", "exports", "tslib", "tabster", "./useTabsterAttributes", "./u
|
|
|
18
20
|
direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
|
|
19
21
|
memorizeCurrent: memorizeCurrent,
|
|
20
22
|
tabbable: tabbable,
|
|
23
|
+
hasDefault: unstable_hasDefault,
|
|
21
24
|
} }, (ignoreDefaultKeydown && {
|
|
22
25
|
focusable: {
|
|
23
26
|
ignoreKeydown: ignoreDefaultKeydown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useArrowNavigationGroup.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useArrowNavigationGroup.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;IAoCA;;;OAGG;IACI,IAAM,uBAAuB,GAAG,UAAC,OAA4C;QAA5C,wBAAA,EAAA,YAA4C;QAEhF,IAAA,QAAQ,GAON,OAAO,SAPD,EACR,IAAI,GAMF,OAAO,KANL,EACJ,eAAe,GAKb,OAAO,gBALM,EACf,QAAQ,GAIN,OAAO,SAJD,EACR,oBAAoB,GAGlB,OAAO,qBAHW;QACpB,gEAAgE;QAChE,mBAAmB,GACjB,OAAO,oBADU,CACT;QACZ,IAAM,OAAO,GAAG,uBAAU,EAAE,CAAC;QAE7B,IAAI,OAAO,EAAE;YACX,kBAAQ,CAAC,OAAO,CAAC,CAAC;SACnB;QAED,OAAO,2CAAoB,oBACzB,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC,CAAC,QAAQ;gBAClB,SAAS,EAAE,oBAAoB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC;gBACnD,eAAe,iBAAA;gBACf,QAAQ,UAAA;gBACR,UAAU,EAAE,mBAAmB;aAChC,IACE,CAAC,oBAAoB,IAAI;YAC1B,SAAS,EAAE;gBACT,aAAa,EAAE,oBAAoB;aACpC;SACF,CAAC,EACF,CAAC;IACL,CAAC,CAAC;IA9BW,QAAA,uBAAuB,2BA8BlC;IAEF,SAAS,oBAAoB,CAAC,IAA4C;QACxE,QAAQ,IAAI,EAAE;YACZ,KAAK,YAAY;gBACf,OAAO,eAAK,CAAC,eAAe,CAAC,UAAU,CAAC;YAC1C,KAAK,MAAM;gBACT,OAAO,eAAK,CAAC,eAAe,CAAC,IAAI,CAAC;YACpC,KAAK,MAAM;gBACT,OAAO,eAAK,CAAC,eAAe,CAAC,IAAI,CAAC;YAEpC,KAAK,UAAU,CAAC;YAChB;gBACE,OAAO,eAAK,CAAC,eAAe,CAAC,QAAQ,CAAC;SACzC;IACH,CAAC","sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /**\n * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n */\n axis?: 'vertical' | 'horizontal' | 'grid' | 'both';\n /**\n * Focus will cycle to the first/last elements of the group without stopping\n */\n circular?: boolean;\n /**\n * Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n */\n memorizeCurrent?: boolean;\n /**\n * Allow tabbing within the arrow navigation group items.\n */\n tabbable?: boolean;\n /**\n * Tabster should ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /**\n * The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\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: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\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\n if (tabster) {\n getMover(tabster);\n }\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};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\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\n case 'vertical':\n default:\n return Types.MoverDirections.Vertical;\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "
|
|
1
|
+
define(["require", "exports", "react", "@fluentui/react-shared-contexts", "./useTabster"], function (require, exports, React, react_shared_contexts_1, useTabster_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.useFocusFinders = void 0;
|
|
@@ -7,6 +7,7 @@ define(["require", "exports", "tslib", "react", "./useTabster"], function (requi
|
|
|
7
7
|
*/
|
|
8
8
|
var useFocusFinders = function () {
|
|
9
9
|
var tabster = useTabster_1.useTabster();
|
|
10
|
+
var targetDocument = react_shared_contexts_1.useFluent_unstable().targetDocument;
|
|
10
11
|
// Narrow props for now and let need dictate additional props in the future
|
|
11
12
|
var findAllFocusable = React.useCallback(function (container, acceptCondition) {
|
|
12
13
|
return (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({ container: container, acceptCondition: acceptCondition })) || [];
|
|
@@ -17,12 +18,20 @@ define(["require", "exports", "tslib", "react", "./useTabster"], function (requi
|
|
|
17
18
|
]);
|
|
18
19
|
var findNextFocusable = React.useCallback(function (currentElement, options) {
|
|
19
20
|
if (options === void 0) { options = {}; }
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
if (!tabster || !targetDocument) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
var _a = options.container, container = _a === void 0 ? targetDocument.body : _a;
|
|
25
|
+
return tabster.focusable.findNext({ currentElement: currentElement, container: container });
|
|
26
|
+
}, [tabster, targetDocument]);
|
|
22
27
|
var findPrevFocusable = React.useCallback(function (currentElement, options) {
|
|
23
28
|
if (options === void 0) { options = {}; }
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
if (!tabster || !targetDocument) {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
var _a = options.container, container = _a === void 0 ? targetDocument.body : _a;
|
|
33
|
+
return tabster.focusable.findPrev({ currentElement: currentElement, container: container });
|
|
34
|
+
}, [tabster, targetDocument]);
|
|
26
35
|
return {
|
|
27
36
|
findAllFocusable: findAllFocusable,
|
|
28
37
|
findFirstFocusable: findFirstFocusable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusFinders.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useFocusFinders.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-tabster/src/hooks/useFocusFinders.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,eAAe,GAAG;QAC7B,IAAM,OAAO,GAAG,uBAAU,EAAE,CAAC;QACrB,IAAA,cAAc,GAAK,0CAAS,EAAE,eAAhB,CAAiB;QAEvC,2EAA2E;QAC3E,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,UAAC,SAAsB,EAAE,eAA8C;YACrE,OAAA,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,OAAO,CAAC,EAAE,SAAS,WAAA,EAAE,eAAe,iBAAA,EAAE,CAAC,KAAI,EAAE;QAAhE,CAAgE,EAClE,CAAC,OAAO,CAAC,CACV,CAAC;QAEF,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,UAAC,SAAsB,IAAK,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,SAAS,CAAC,EAAE,SAAS,WAAA,EAAE,CAAC,EAA3C,CAA2C,EACvE,CAAC,OAAO,CAAC,CACV,CAAC;QAEF,IAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,SAAsB,IAAK,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,SAAS,WAAA,EAAE,CAAC,EAA1C,CAA0C,EAAE;YAClH,OAAO;SACR,CAAC,CAAC;QAEH,IAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,UAAC,cAA2B,EAAE,OAAoE;YAApE,wBAAA,EAAA,YAAoE;YAChG,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,EAAE;gBAC/B,OAAO,IAAI,CAAC;aACb;YAEO,IAAA,KAAoC,OAAO,UAAZ,EAA/B,SAAS,mBAAG,cAAc,CAAC,IAAI,KAAA,CAAa;YAEpD,OAAO,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC;QACnE,CAAC,EACD,CAAC,OAAO,EAAE,cAAc,CAAC,CAC1B,CAAC;QAEF,IAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,UAAC,cAA2B,EAAE,OAAoE;YAApE,wBAAA,EAAA,YAAoE;YAChG,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,EAAE;gBAC/B,OAAO,IAAI,CAAC;aACb;YAEO,IAAA,KAAoC,OAAO,UAAZ,EAA/B,SAAS,mBAAG,cAAc,CAAC,IAAI,KAAA,CAAa;YAEpD,OAAO,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC;QACnE,CAAC,EACD,CAAC,OAAO,EAAE,cAAc,CAAC,CAC1B,CAAC;QAEF,OAAO;YACL,gBAAgB,kBAAA;YAChB,kBAAkB,oBAAA;YAClB,iBAAiB,mBAAA;YACjB,iBAAiB,mBAAA;YACjB,iBAAiB,mBAAA;SAClB,CAAC;IACJ,CAAC,CAAC;IArDW,QAAA,eAAe,mBAqD1B","sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\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 { targetDocument } = useFluent();\n\n // Narrow props for now and let need dictate additional props in the future\n const findAllFocusable = React.useCallback(\n (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n tabster?.focusable.findAll({ container, acceptCondition }) || [],\n [tabster],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n [tabster],\n );\n\n const findLastFocusable = React.useCallback((container: HTMLElement) => tabster?.focusable.findLast({ container }), [\n tabster,\n ]);\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabster.focusable.findNext({ currentElement, container });\n },\n [tabster, targetDocument],\n );\n\n const findPrevFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabster.focusable.findPrev({ currentElement, container });\n },\n [tabster, targetDocument],\n );\n\n return {\n findAllFocusable,\n findFirstFocusable,\n findLastFocusable,\n findNextFocusable,\n findPrevFocusable,\n };\n};\n"]}
|
|
@@ -17,7 +17,9 @@ const useArrowNavigationGroup = (options = {}) => {
|
|
|
17
17
|
axis,
|
|
18
18
|
memorizeCurrent,
|
|
19
19
|
tabbable,
|
|
20
|
-
ignoreDefaultKeydown
|
|
20
|
+
ignoreDefaultKeydown,
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
22
|
+
unstable_hasDefault
|
|
21
23
|
} = options;
|
|
22
24
|
const tabster = useTabster_1.useTabster();
|
|
23
25
|
if (tabster) {
|
|
@@ -27,8 +29,9 @@ const useArrowNavigationGroup = (options = {}) => {
|
|
|
27
29
|
mover: {
|
|
28
30
|
cyclic: !!circular,
|
|
29
31
|
direction: axisToMoverDirection(axis !== null && axis !== void 0 ? axis : 'vertical'),
|
|
30
|
-
memorizeCurrent
|
|
31
|
-
tabbable
|
|
32
|
+
memorizeCurrent,
|
|
33
|
+
tabbable,
|
|
34
|
+
hasDefault: unstable_hasDefault
|
|
32
35
|
},
|
|
33
36
|
...(ignoreDefaultKeydown && {
|
|
34
37
|
focusable: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAkCA;;;;AAIO,MAAMA,uBAAuB,GAAG,CAACC,UAA0C,EAAE,KAA+B;EACjH,MAAM;IACJC,QAAQ;IACRC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,oBAAoB;IACpB;IACAC;EAAmB,CACpB,GAAGN,OAAO;EACX,MAAMO,OAAO,GAAGC,uBAAU,EAAE;EAE5B,IAAID,OAAO,EAAE;IACXE,kBAAQ,CAACF,OAAO,CAAC;;EAGnB,OAAOG,2CAAoB,CAAC;IAC1BC,KAAK,EAAE;MACLC,MAAM,EAAE,CAAC,CAACX,QAAQ;MAClBY,SAAS,EAAEC,oBAAoB,CAACZ,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,UAAU,CAAC;MACnDC,eAAe;MACfC,QAAQ;MACRW,UAAU,EAAET;KACb;IACD,IAAID,oBAAoB,IAAI;MAC1BW,SAAS,EAAE;QACTC,aAAa,EAAEZ;;KAElB;GACF,CAAC;AACJ,CAAC;AA9BYa,+BAAuB;AAgCpC,SAASJ,oBAAoB,CAACZ,IAA4C;EACxE,QAAQA,IAAI;IACV,KAAK,YAAY;MACf,OAAOO,eAAK,CAACU,eAAe,CAACC,UAAU;IACzC,KAAK,MAAM;MACT,OAAOX,eAAK,CAACU,eAAe,CAACE,IAAI;IACnC,KAAK,MAAM;MACT,OAAOZ,eAAK,CAACU,eAAe,CAACG,IAAI;IAEnC,KAAK,UAAU;IACf;MACE,OAAOb,eAAK,CAACU,eAAe,CAACI,QAAQ;EAAC;AAE5C","names":["useArrowNavigationGroup","options","circular","axis","memorizeCurrent","tabbable","ignoreDefaultKeydown","unstable_hasDefault","tabster","useTabster_1","tabster_1","useTabsterAttributes_1","mover","cyclic","direction","axisToMoverDirection","hasDefault","focusable","ignoreKeydown","exports","MoverDirections","Horizontal","Grid","Both","Vertical"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useArrowNavigationGroup.ts"],"sourcesContent":["import { Types, getMover } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseArrowNavigationGroupOptions {\n /**\n * Focus will navigate vertically, horizontally or in both directions (grid), defaults to horizontally\n * @defaultValue vertical\n */\n axis?: 'vertical' | 'horizontal' | 'grid' | 'both';\n /**\n * Focus will cycle to the first/last elements of the group without stopping\n */\n circular?: boolean;\n /**\n * Last focused element in the group will be remembered and focused (if still\n * available) when tabbing from outside of the group\n */\n memorizeCurrent?: boolean;\n /**\n * Allow tabbing within the arrow navigation group items.\n */\n tabbable?: boolean;\n /**\n * Tabster should ignore default handling of keydown events\n */\n ignoreDefaultKeydown?: Types.FocusableProps['ignoreKeydown'];\n /**\n * The default focusable item in the group will be an element with Focusable.isDefault property.\n * Note that there is no way in \\@fluentui/react-tabster to set default focusable element,\n * and this option is currently for internal testing purposes only.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault?: boolean;\n}\n\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: UseArrowNavigationGroupOptions = {}): Types.TabsterDOMAttribute => {\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\n if (tabster) {\n getMover(tabster);\n }\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};\n\nfunction axisToMoverDirection(axis: UseArrowNavigationGroupOptions['axis']): Types.MoverDirection {\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\n case 'vertical':\n default:\n return Types.MoverDirections.Vertical;\n }\n}\n"]}
|
|
@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useFocusFinders = void 0;
|
|
7
7
|
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
8
9
|
const useTabster_1 = /*#__PURE__*/require("./useTabster");
|
|
9
10
|
/**
|
|
10
11
|
* Returns a set of helper functions that will traverse focusable elements in the context of a root DOM element
|
|
11
12
|
*/
|
|
12
13
|
const useFocusFinders = () => {
|
|
13
14
|
const tabster = useTabster_1.useTabster();
|
|
15
|
+
const {
|
|
16
|
+
targetDocument
|
|
17
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
|
14
18
|
// Narrow props for now and let need dictate additional props in the future
|
|
15
19
|
const findAllFocusable = React.useCallback((container, acceptCondition) => (tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findAll({
|
|
16
20
|
container,
|
|
@@ -22,14 +26,30 @@ const useFocusFinders = () => {
|
|
|
22
26
|
const findLastFocusable = React.useCallback(container => tabster === null || tabster === void 0 ? void 0 : tabster.focusable.findLast({
|
|
23
27
|
container
|
|
24
28
|
}), [tabster]);
|
|
25
|
-
const findNextFocusable = React.useCallback((currentElement, options = {}) =>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
const findNextFocusable = React.useCallback((currentElement, options = {}) => {
|
|
30
|
+
if (!tabster || !targetDocument) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
const {
|
|
34
|
+
container = targetDocument.body
|
|
35
|
+
} = options;
|
|
36
|
+
return tabster.focusable.findNext({
|
|
37
|
+
currentElement,
|
|
38
|
+
container
|
|
39
|
+
});
|
|
40
|
+
}, [tabster, targetDocument]);
|
|
41
|
+
const findPrevFocusable = React.useCallback((currentElement, options = {}) => {
|
|
42
|
+
if (!tabster || !targetDocument) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
const {
|
|
46
|
+
container = targetDocument.body
|
|
47
|
+
} = options;
|
|
48
|
+
return tabster.focusable.findPrev({
|
|
49
|
+
currentElement,
|
|
50
|
+
container
|
|
51
|
+
});
|
|
52
|
+
}, [tabster, targetDocument]);
|
|
33
53
|
return {
|
|
34
54
|
findAllFocusable,
|
|
35
55
|
findFirstFocusable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAEA;;;AAGO,MAAMA,eAAe,GAAG,MAAK;EAClC,MAAMC,OAAO,GAAGC,uBAAU,EAAE;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AAEA;;;AAGO,MAAMA,eAAe,GAAG,MAAK;EAClC,MAAMC,OAAO,GAAGC,uBAAU,EAAE;EAC5B,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAS,EAAE;EAEtC;EACA,MAAMC,gBAAgB,GAAGC,KAAK,CAACC,WAAW,CACxC,CAACC,SAAsB,EAAEC,eAA8C,KACrE,QAAO,aAAPR,OAAO,uBAAPA,OAAO,CAAES,SAAS,CAACC,OAAO,CAAC;IAAEH,SAAS;IAAEC;EAAe,CAAE,CAAC,KAAI,EAAE,EAClE,CAACR,OAAO,CAAC,CACV;EAED,MAAMW,kBAAkB,GAAGN,KAAK,CAACC,WAAW,CACzCC,SAAsB,IAAKP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,SAAS,CAACG,SAAS,CAAC;IAAEL;EAAS,CAAE,CAAC,EACvE,CAACP,OAAO,CAAC,CACV;EAED,MAAMa,iBAAiB,GAAGR,KAAK,CAACC,WAAW,CAAEC,SAAsB,IAAKP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,SAAS,CAACK,QAAQ,CAAC;IAAEP;EAAS,CAAE,CAAC,EAAE,CAClHP,OAAO,CACR,CAAC;EAEF,MAAMe,iBAAiB,GAAGV,KAAK,CAACC,WAAW,CACzC,CAACU,cAA2B,EAAEC,UAAkE,EAAE,KAAI;IACpG,IAAI,CAACjB,OAAO,IAAI,CAACE,cAAc,EAAE;MAC/B,OAAO,IAAI;;IAGb,MAAM;MAAEK,SAAS,GAAGL,cAAc,CAACgB;IAAI,CAAE,GAAGD,OAAO;IAEnD,OAAOjB,OAAO,CAACS,SAAS,CAACU,QAAQ,CAAC;MAAEH,cAAc;MAAET;IAAS,CAAE,CAAC;EAClE,CAAC,EACD,CAACP,OAAO,EAAEE,cAAc,CAAC,CAC1B;EAED,MAAMkB,iBAAiB,GAAGf,KAAK,CAACC,WAAW,CACzC,CAACU,cAA2B,EAAEC,UAAkE,EAAE,KAAI;IACpG,IAAI,CAACjB,OAAO,IAAI,CAACE,cAAc,EAAE;MAC/B,OAAO,IAAI;;IAGb,MAAM;MAAEK,SAAS,GAAGL,cAAc,CAACgB;IAAI,CAAE,GAAGD,OAAO;IAEnD,OAAOjB,OAAO,CAACS,SAAS,CAACY,QAAQ,CAAC;MAAEL,cAAc;MAAET;IAAS,CAAE,CAAC;EAClE,CAAC,EACD,CAACP,OAAO,EAAEE,cAAc,CAAC,CAC1B;EAED,OAAO;IACLE,gBAAgB;IAChBO,kBAAkB;IAClBE,iBAAiB;IACjBE,iBAAiB;IACjBK;GACD;AACH,CAAC;AArDYE,uBAAe","names":["useFocusFinders","tabster","useTabster_1","targetDocument","react_shared_contexts_1","findAllFocusable","React","useCallback","container","acceptCondition","focusable","findAll","findFirstFocusable","findFirst","findLastFocusable","findLast","findNextFocusable","currentElement","options","body","findNext","findPrevFocusable","findPrev","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-tabster/src/hooks/useFocusFinders.ts"],"sourcesContent":["import * as React from 'react';\nimport { Types as TabsterTypes } from 'tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTabster } from './useTabster';\n\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 { targetDocument } = useFluent();\n\n // Narrow props for now and let need dictate additional props in the future\n const findAllFocusable = React.useCallback(\n (container: HTMLElement, acceptCondition?: (el: HTMLElement) => boolean) =>\n tabster?.focusable.findAll({ container, acceptCondition }) || [],\n [tabster],\n );\n\n const findFirstFocusable = React.useCallback(\n (container: HTMLElement) => tabster?.focusable.findFirst({ container }),\n [tabster],\n );\n\n const findLastFocusable = React.useCallback((container: HTMLElement) => tabster?.focusable.findLast({ container }), [\n tabster,\n ]);\n\n const findNextFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabster.focusable.findNext({ currentElement, container });\n },\n [tabster, targetDocument],\n );\n\n const findPrevFocusable = React.useCallback(\n (currentElement: HTMLElement, options: Pick<Partial<TabsterTypes.FindNextProps>, 'container'> = {}) => {\n if (!tabster || !targetDocument) {\n return null;\n }\n\n const { container = targetDocument.body } = options;\n\n return tabster.focusable.findPrev({ currentElement, container });\n },\n [tabster, targetDocument],\n );\n\n return {\n findAllFocusable,\n findFirstFocusable,\n findLastFocusable,\n findNextFocusable,\n findPrevFocusable,\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"@griffel/react": "^1.5.2",
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.2.0",
|
|
35
35
|
"@fluentui/react-theme": "^9.1.5",
|
|
36
|
-
"@fluentui/react-utilities": "^9.5.
|
|
37
|
-
"keyborg": "^
|
|
38
|
-
"tabster": "^
|
|
36
|
+
"@fluentui/react-utilities": "^9.5.2",
|
|
37
|
+
"keyborg": "^2.0.0",
|
|
38
|
+
"tabster": "^4.1.1",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|