@fluentui/react-tabster 9.0.0-rc.6 → 9.0.0-rc.7
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 +27 -4
- package/CHANGELOG.md +14 -5
- package/README.md +4 -11
- package/dist/react-tabster.d.ts +4 -0
- package/lib/hooks/useArrowNavigationGroup.d.ts +4 -0
- package/lib/hooks/useArrowNavigationGroup.js +2 -1
- package/lib/hooks/useArrowNavigationGroup.js.map +1 -1
- package/lib-commonjs/hooks/useArrowNavigationGroup.d.ts +4 -0
- package/lib-commonjs/hooks/useArrowNavigationGroup.js +2 -1
- package/lib-commonjs/hooks/useArrowNavigationGroup.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,30 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 25 Apr 2022 09:31:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.7",
|
|
7
|
+
"version": "9.0.0-rc.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "marata@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-tabster",
|
|
13
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d",
|
|
14
|
+
"comment": "Adjusting accordion keyboard navigation."
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"none": [
|
|
18
|
+
{
|
|
19
|
+
"author": "martinhochel@microsoft.com",
|
|
20
|
+
"package": "@fluentui/react-tabster",
|
|
21
|
+
"commit": "31e8b97573aeba761d14b937378bb95d578c4c90",
|
|
22
|
+
"comment": "docs(react-tabster): remove old info about provider"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"date": "Tue, 19 Apr 2022 19:16:59 GMT",
|
|
6
29
|
"tag": "@fluentui/react-tabster_v9.0.0-rc.6",
|
|
7
30
|
"version": "9.0.0-rc.6",
|
|
8
31
|
"comments": {
|
|
@@ -41,19 +64,19 @@
|
|
|
41
64
|
"author": "beachball",
|
|
42
65
|
"package": "@fluentui/react-tabster",
|
|
43
66
|
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
44
|
-
"commit": "
|
|
67
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
45
68
|
},
|
|
46
69
|
{
|
|
47
70
|
"author": "beachball",
|
|
48
71
|
"package": "@fluentui/react-tabster",
|
|
49
72
|
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
50
|
-
"commit": "
|
|
73
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
51
74
|
},
|
|
52
75
|
{
|
|
53
76
|
"author": "beachball",
|
|
54
77
|
"package": "@fluentui/react-tabster",
|
|
55
78
|
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
56
|
-
"commit": "
|
|
79
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
57
80
|
}
|
|
58
81
|
],
|
|
59
82
|
"none": [
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 25 Apr 2022 09:31:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.7)
|
|
8
|
+
|
|
9
|
+
Mon, 25 Apr 2022 09:31:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.6..@fluentui/react-tabster_v9.0.0-rc.7)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Adjusting accordion keyboard navigation. ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by marata@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.6)
|
|
8
17
|
|
|
9
|
-
Tue, 19 Apr 2022 19:
|
|
18
|
+
Tue, 19 Apr 2022 19:16:59 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.5..@fluentui/react-tabster_v9.0.0-rc.6)
|
|
11
20
|
|
|
12
21
|
### Changes
|
|
@@ -16,9 +25,9 @@ Tue, 19 Apr 2022 19:14:09 GMT
|
|
|
16
25
|
- fix styles in getFocusOutlineStyles() ([PR #22070](https://github.com/microsoft/fluentui/pull/22070) by olfedias@microsoft.com)
|
|
17
26
|
- feat(react-tabster): Add grid navigation ([PR #22085](https://github.com/microsoft/fluentui/pull/22085) by jukapsia@microsoft.com)
|
|
18
27
|
- Upgrading tabster to latest version. ([PR #22492](https://github.com/microsoft/fluentui/pull/22492) by Humberto.Morimoto@microsoft.com)
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #
|
|
20
|
-
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #
|
|
21
|
-
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
29
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
22
31
|
|
|
23
32
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.5)
|
|
24
33
|
|
package/README.md
CHANGED
|
@@ -4,15 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
Library for focus management that leverages [tabster](https://github.com/microsoft/tabster).
|
|
6
6
|
|
|
7
|
-
The provider needs to be wrapped around your application:
|
|
8
|
-
|
|
9
|
-
```tsx
|
|
10
|
-
<TabsterProvider>{children}</TabsterProvider>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
7
|
The API currently only supports declarative data-\* attributes that are returned using the exported react hooks:
|
|
14
8
|
|
|
15
9
|
```tsx
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
12
|
+
|
|
16
13
|
const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;
|
|
17
14
|
|
|
18
15
|
const ArrowNavigationExample: React.FC = ({ children }) => {
|
|
@@ -31,10 +28,6 @@ const ArrowNavigationExample: React.FC = ({ children }) => {
|
|
|
31
28
|
};
|
|
32
29
|
|
|
33
30
|
const App: React.FC = () => {
|
|
34
|
-
return
|
|
35
|
-
<TabsterProvider>
|
|
36
|
-
<ArrowNavigationExample />
|
|
37
|
-
</TabsterProvider>
|
|
38
|
-
);
|
|
31
|
+
return <ArrowNavigationExample />;
|
|
39
32
|
};
|
|
40
33
|
```
|
package/dist/react-tabster.d.ts
CHANGED
|
@@ -60,6 +60,10 @@ export declare interface UseArrowNavigationGroupOptions {
|
|
|
60
60
|
* available) when tabbing from outside of the group
|
|
61
61
|
*/
|
|
62
62
|
memorizeCurrent?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Allow tabbing within the arrow navigation group items.
|
|
65
|
+
*/
|
|
66
|
+
tabbable?: boolean;
|
|
63
67
|
}
|
|
64
68
|
|
|
65
69
|
/**
|
|
@@ -14,6 +14,10 @@ export interface UseArrowNavigationGroupOptions {
|
|
|
14
14
|
* available) when tabbing from outside of the group
|
|
15
15
|
*/
|
|
16
16
|
memorizeCurrent?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Allow tabbing within the arrow navigation group items.
|
|
19
|
+
*/
|
|
20
|
+
tabbable?: boolean;
|
|
17
21
|
}
|
|
18
22
|
/**
|
|
19
23
|
* A hook that returns the necessary tabster attributes to support arrow key navigation
|
|
@@ -19,7 +19,8 @@ export const useArrowNavigationGroup = options => {
|
|
|
19
19
|
mover: {
|
|
20
20
|
cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
|
|
21
21
|
direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
|
|
22
|
-
memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
|
|
22
|
+
memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
|
|
23
|
+
tabbable: options === null || options === void 0 ? void 0 : options.tabbable
|
|
23
24
|
}
|
|
24
25
|
});
|
|
25
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;
|
|
1
|
+
{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,QAAhB,QAAgC,SAAhC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AAuBA;;;AAGG;;AACH,OAAO,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;AAC7G,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,QAAQ,CAAC,OAAD,CAAR;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAHrB;AAIL,MAAA,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAJd;AADmB,GAAD,CAA3B;AAQD,CAfM;;AAiBP,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,UAA7B;;AACF,SAAK,MAAL;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,IAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,KAAK,CAAC,eAAN,CAAsB,QAA7B;AARJ;AAUD","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';\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\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 tabster = useTabster();\n\n if (tabster) {\n getMover(tabster);\n }\n\n return useTabsterAttributes({\n mover: {\n cyclic: !!options?.circular,\n direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n memorizeCurrent: options?.memorizeCurrent,\n tabbable: options?.tabbable,\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\n case 'vertical':\n default:\n return Types.MoverDirections.Vertical;\n }\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -14,6 +14,10 @@ export interface UseArrowNavigationGroupOptions {
|
|
|
14
14
|
* available) when tabbing from outside of the group
|
|
15
15
|
*/
|
|
16
16
|
memorizeCurrent?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Allow tabbing within the arrow navigation group items.
|
|
19
|
+
*/
|
|
20
|
+
tabbable?: boolean;
|
|
17
21
|
}
|
|
18
22
|
/**
|
|
19
23
|
* A hook that returns the necessary tabster attributes to support arrow key navigation
|
|
@@ -29,7 +29,8 @@ const useArrowNavigationGroup = options => {
|
|
|
29
29
|
mover: {
|
|
30
30
|
cyclic: !!(options === null || options === void 0 ? void 0 : options.circular),
|
|
31
31
|
direction: axisToMoverDirection((_a = options === null || options === void 0 ? void 0 : options.axis) !== null && _a !== void 0 ? _a : 'vertical'),
|
|
32
|
-
memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent
|
|
32
|
+
memorizeCurrent: options === null || options === void 0 ? void 0 : options.memorizeCurrent,
|
|
33
|
+
tabbable: options === null || options === void 0 ? void 0 : options.tabbable
|
|
33
34
|
}
|
|
34
35
|
});
|
|
35
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;
|
|
1
|
+
{"version":3,"sources":["hooks/useArrowNavigationGroup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAuBA;;;AAGG;;;AACI,MAAM,uBAAuB,GAAI,OAAD,IAAwE;;;AAC7G,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,QAAA,CAAS,OAAT;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,KAAK,EAAE;AACL,MAAA,MAAM,EAAE,CAAC,EAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,QAAV,CADJ;AAEL,MAAA,SAAS,EAAE,oBAAoB,CAAC,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,IAAT,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,UAAlB,CAF1B;AAGL,MAAA,eAAe,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAHrB;AAIL,MAAA,QAAQ,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE;AAJd;AADmB,GAArB,CAAP;AAQD,CAfM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB;;AAiBb,SAAS,oBAAT,CAA8B,IAA9B,EAA0E;AACxE,UAAQ,IAAR;AACE,SAAK,YAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,UAA7B;;AACF,SAAK,MAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,IAA7B;;AAEF,SAAK,UAAL;AACA;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,eAAN,CAAsB,QAA7B;AARJ;AAUD","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';\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\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 tabster = useTabster();\n\n if (tabster) {\n getMover(tabster);\n }\n\n return useTabsterAttributes({\n mover: {\n cyclic: !!options?.circular,\n direction: axisToMoverDirection(options?.axis ?? 'vertical'),\n memorizeCurrent: options?.memorizeCurrent,\n tabbable: options?.tabbable,\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\n case 'vertical':\n default:\n return Types.MoverDirections.Vertical;\n }\n}\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.7",
|
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
36
36
|
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
37
37
|
"keyborg": "^1.1.0",
|
|
38
|
-
"tabster": "^1.3.
|
|
38
|
+
"tabster": "^1.3.3",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|