@fluentui/react-tabster 9.0.0-rc.10 → 9.0.0-rc.13
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 +84 -1
- package/CHANGELOG.md +34 -2
- package/dist/index.d.ts +4 -2
- package/lib/focus/createCustomFocusIndicatorStyle.js +1 -1
- package/lib/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib/hooks/useFocusableGroup.js +1 -1
- package/lib/hooks/useFocusableGroup.js.map +1 -1
- package/lib/hooks/useKeyboardNavAttribute.js +4 -2
- package/lib/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib/hooks/useTabster.js +1 -1
- package/lib/hooks/useTabster.js.map +1 -1
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js +1 -1
- package/lib-commonjs/focus/createCustomFocusIndicatorStyle.js.map +1 -1
- package/lib-commonjs/hooks/useFocusableGroup.js +1 -1
- package/lib-commonjs/hooks/useFocusableGroup.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js +4 -2
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/lib-commonjs/hooks/useTabster.js +1 -1
- package/lib-commonjs/hooks/useTabster.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,90 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 31 May 2022 21:26:42 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.13",
|
|
7
|
+
"version": "9.0.0-rc.13",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-tabster",
|
|
13
|
+
"commit": "8880ed437b2f2db0fd10c5e74ceab3bd3639d650",
|
|
14
|
+
"comment": "Adds stories for focus indicator documentation"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"prerelease": [
|
|
18
|
+
{
|
|
19
|
+
"author": "olfedias@microsoft.com",
|
|
20
|
+
"package": "@fluentui/react-tabster",
|
|
21
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
22
|
+
"comment": "chore: Update Griffel to latest version"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
26
|
+
"package": "@fluentui/react-tabster",
|
|
27
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
|
|
28
|
+
"comment": "updates import to react-shared-components"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-tabster",
|
|
33
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
|
|
34
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-tabster",
|
|
39
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
40
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Thu, 26 May 2022 21:01:31 GMT",
|
|
47
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.12",
|
|
48
|
+
"version": "9.0.0-rc.12",
|
|
49
|
+
"comments": {
|
|
50
|
+
"prerelease": [
|
|
51
|
+
{
|
|
52
|
+
"author": "tristan.watanabe@gmail.com",
|
|
53
|
+
"package": "@fluentui/react-tabster",
|
|
54
|
+
"commit": "c089a26b502e3b2f34855a86e932156c9271e03a",
|
|
55
|
+
"comment": "Remove usage of focus-visible pseudo-class to conform to browser support matrix."
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"date": "Mon, 23 May 2022 18:56:49 GMT",
|
|
62
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.11",
|
|
63
|
+
"version": "9.0.0-rc.11",
|
|
64
|
+
"comments": {
|
|
65
|
+
"prerelease": [
|
|
66
|
+
{
|
|
67
|
+
"author": "seanmonahan@microsoft.com",
|
|
68
|
+
"package": "@fluentui/react-tabster",
|
|
69
|
+
"commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
|
|
70
|
+
"comment": "BREAKING: update string unions to use spinal-case"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"author": "beachball",
|
|
74
|
+
"package": "@fluentui/react-tabster",
|
|
75
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
|
|
76
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "beachball",
|
|
80
|
+
"package": "@fluentui/react-tabster",
|
|
81
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
|
|
82
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"date": "Mon, 23 May 2022 12:13:51 GMT",
|
|
6
89
|
"tag": "@fluentui/react-tabster_v9.0.0-rc.10",
|
|
7
90
|
"version": "9.0.0-rc.10",
|
|
8
91
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabster
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 31 May 2022 21:26:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.13)
|
|
8
|
+
|
|
9
|
+
Tue, 31 May 2022 21:26:42 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.12..@fluentui/react-tabster_v9.0.0-rc.13)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
15
|
+
- updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.12)
|
|
20
|
+
|
|
21
|
+
Thu, 26 May 2022 21:01:31 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.11..@fluentui/react-tabster_v9.0.0-rc.12)
|
|
23
|
+
|
|
24
|
+
### Changes
|
|
25
|
+
|
|
26
|
+
- Remove usage of focus-visible pseudo-class to conform to browser support matrix. ([PR #23255](https://github.com/microsoft/fluentui/pull/23255) by tristan.watanabe@gmail.com)
|
|
27
|
+
|
|
28
|
+
## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.11)
|
|
29
|
+
|
|
30
|
+
Mon, 23 May 2022 18:56:49 GMT
|
|
31
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.10..@fluentui/react-tabster_v9.0.0-rc.11)
|
|
32
|
+
|
|
33
|
+
### Changes
|
|
34
|
+
|
|
35
|
+
- BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
|
|
36
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
37
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
38
|
+
|
|
7
39
|
## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.10)
|
|
8
40
|
|
|
9
|
-
Mon, 23 May 2022 12:
|
|
41
|
+
Mon, 23 May 2022 12:13:51 GMT
|
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.9..@fluentui/react-tabster_v9.0.0-rc.10)
|
|
11
43
|
|
|
12
44
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -78,7 +78,7 @@ export declare interface UseFocusableGroupOptions {
|
|
|
78
78
|
/**
|
|
79
79
|
* Behavior for the Tab key.
|
|
80
80
|
*/
|
|
81
|
-
tabBehavior?: 'unlimited' | 'limited' | '
|
|
81
|
+
tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
/**
|
|
@@ -93,7 +93,9 @@ export declare const useFocusFinders: () => {
|
|
|
93
93
|
};
|
|
94
94
|
|
|
95
95
|
/**
|
|
96
|
-
*
|
|
96
|
+
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
|
|
97
|
+
* attribute to a referenced element to ensure keyboard navigation awareness
|
|
98
|
+
* synced to keyborg logic without having to cause a re-render on react tree.
|
|
97
99
|
*/
|
|
98
100
|
export declare function useKeyboardNavAttribute<E extends HTMLElement>(): RefObject<E>;
|
|
99
101
|
|
|
@@ -10,7 +10,7 @@ import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';
|
|
|
10
10
|
export const createCustomFocusIndicatorStyle = (style, {
|
|
11
11
|
selector = defaultOptions.selector
|
|
12
12
|
} = defaultOptions) => ({
|
|
13
|
-
':focus
|
|
13
|
+
':focus': {
|
|
14
14
|
outlineStyle: 'none'
|
|
15
15
|
},
|
|
16
16
|
[`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,EAAgC,cAAhC,QAAsD,aAAtD;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;AAAE,EAAA,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;AAClB,
|
|
1
|
+
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,EAAgC,cAAhC,QAAsD,aAAtD;AAOA;;;;;;AAMG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;AAAE,EAAA,QAAQ,GAAG,cAAc,CAAC;AAA5B,IAAiF,cAFpC,MAG3B;AAClB,YAAU;AACR,IAAA,YAAY,EAAE;AADN,GADQ;AAIlB,GAAC,GAAG,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n style: GriffelStyle,\n { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n ':focus': {\n outlineStyle: 'none',\n },\n [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AASA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,OAAD,IAAkE;AACjG,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,WAAW,CAAC,OAAD,CAAX;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAAD,CAA3B;AAKD,CAZM;;AAcP,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,OAAnC;;AACF,SAAK,
|
|
1
|
+
{"version":3,"sources":["hooks/useFocusableGroup.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,SAAnC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,UAAT,QAA2B,cAA3B;AASA;;;AAGG;;AACH,OAAO,MAAM,iBAAiB,GAAI,OAAD,IAAkE;AACjG,QAAM,OAAO,GAAG,UAAU,EAA1B;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,WAAW,CAAC,OAAD,CAAX;AACD;;AAED,SAAO,oBAAoB,CAAC;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAAD,CAA3B;AAKD,CAZM;;AAcP,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,OAAnC;;AACF,SAAK,oBAAL;AACE,aAAO,KAAK,CAAC,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n /**\n * Behavior for the Tab key.\n */\n tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\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?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n const tabster = useTabster();\n\n if (tabster) {\n getGroupper(tabster);\n }\n\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior),\n },\n });\n};\n\nconst getTabbability = (\n tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\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"],"sourceRoot":"../src/"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { createKeyborg } from 'keyborg';
|
|
2
2
|
import { useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';
|
|
4
|
-
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
4
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
|
|
7
|
+
* attribute to a referenced element to ensure keyboard navigation awareness
|
|
8
|
+
* synced to keyborg logic without having to cause a re-render on react tree.
|
|
7
9
|
*/
|
|
8
10
|
|
|
9
11
|
export function useKeyboardNavAttribute() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,oBAAvC;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,SAA9B;AACA,SAAS,SAAT,EAAoB,OAApB,EAA6B,MAA7B,QAA2C,OAA3C;AACA,SAAS,sBAAT,QAAuC,oBAAvC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA;;;;AAIG;;AACH,OAAM,SAAU,uBAAV,GAAiC;AACrC,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,QAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,IAAI,aAAa,CAAC,cAAc,CAAC,WAAhB,CAAtC,EAAqE,CAAC,cAAD,CAArE,CAAvB;AACA,QAAM,GAAG,GAAG,MAAM,CAAI,IAAJ,CAAlB;AACA,EAAA,SAAS,CAAC,MAAK;AACb,QAAI,OAAJ,EAAa;AACX,MAAA,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;AACA,YAAM,EAAE,GAAoB,IAAI,IAAG;AACjC,QAAA,mBAAmB,CAAC,GAAD,EAAM,sBAAN,EAA8B,IAA9B,CAAnB;AACD,OAFD;;AAGA,MAAA,OAAO,CAAC,SAAR,CAAkB,EAAlB;AACA,aAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;AACD;AACF,GATQ,EASN,CAAC,OAAD,CATM,CAAT;AAUA,SAAO,GAAP;AACD;;AAED,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;AAChG,MAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;AACvB;AACD;;AACD,MAAI,KAAJ,EAAW;AACT,IAAA,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;AACD,GAFD,MAEO;AACL,IAAA,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;AACD;AACF","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';\nimport type { KeyborgCallback } from 'keyborg/dist/Keyborg';\nimport type { RefObject } from 'react';\n\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<E extends HTMLElement>() {\n const { targetDocument } = useFluent();\n const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = useRef<E>(null);\n useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb: KeyborgCallback = 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}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\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"],"sourceRoot":"../src/"}
|
package/lib/hooks/useTabster.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
1
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
2
2
|
import { getCurrentTabster, createTabster } from 'tabster';
|
|
3
3
|
/**
|
|
4
4
|
* Tries to get a tabster instance on the current window or creates a new one
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":"AAAA,SAAS,
|
|
1
|
+
{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,iBAAT,EAA4B,aAA5B,QAAwE,SAAxE;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,UAAU,GAAG,MAAsC;;;AAC9D,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AAEA,QAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;AACA,QAAM,cAAc,GAAkC;AAAE,IAAA,QAAQ,EAAE,EAAZ;AAAgB,IAAA,UAAU,EAAE;AAA5B,GAAtD;;AAEA,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,IAAP;AACD,GAR6D,CAU9D;;;AACA,SAAO,CAAA,EAAA,GAAA,iBAAiB,CAAC,WAAD,CAAjB,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,aAAa,CAAC,WAAD,EAAc,cAAd,CAAtD;AACD,CAZM","sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getCurrentTabster, createTabster, Types as TabsterTypes } from 'tabster';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n const { targetDocument } = useFluent();\n\n const defaultView = targetDocument?.defaultView || undefined;\n const tabsterOptions: TabsterTypes.TabsterCoreProps = { autoRoot: {}, controlTab: false };\n\n if (!defaultView) {\n return null;\n }\n\n // TODO: worth memoizing once more tabster options are used\n return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -18,7 +18,7 @@ const constants_1 = /*#__PURE__*/require("./constants");
|
|
|
18
18
|
const createCustomFocusIndicatorStyle = (style, {
|
|
19
19
|
selector = constants_1.defaultOptions.selector
|
|
20
20
|
} = constants_1.defaultOptions) => ({
|
|
21
|
-
':focus
|
|
21
|
+
':focus': {
|
|
22
22
|
outlineStyle: 'none'
|
|
23
23
|
},
|
|
24
24
|
[`${constants_1.KEYBOARD_NAV_SELECTOR} :${selector}`]: style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;AAAE,EAAA,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;AAClB,
|
|
1
|
+
{"version":3,"sources":["focus/createCustomFocusIndicatorStyle.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAOA;;;;;;AAMG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C;AAAE,EAAA,QAAQ,GAAG,WAAA,CAAA,cAAA,CAAe;AAA5B,IAAiF,WAAA,CAAA,cAFpC,MAG3B;AAClB,YAAU;AACR,IAAA,YAAY,EAAE;AADN,GADQ;AAIlB,GAAC,GAAG,WAAA,CAAA,qBAAqB,KAAK,QAAQ,EAAtC,GAA2C;AAJzB,CAH2B,CAAxC;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { KEYBOARD_NAV_SELECTOR, defaultOptions } from './constants';\nimport type { GriffelStyle } from '@griffel/react';\n\nexport interface CreateCustomFocusIndicatorStyleOptions {\n selector?: 'focus' | 'focus-within';\n}\n\n/**\n * Creates a style for @see makeStyles that includes the necessary selectors for focus.\n * Should be used only when @see createFocusOutlineStyle does not fit requirements\n *\n * @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyes\n * @param options - Configure the style of the focus outline\n */\nexport const createCustomFocusIndicatorStyle = (\n style: GriffelStyle,\n { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,\n): GriffelStyle => ({\n ':focus': {\n outlineStyle: 'none',\n },\n [`${KEYBOARD_NAV_SELECTOR} :${selector}`]: style,\n});\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useFocusableGroup.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;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAkE;AACjG,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,WAAA,CAAY,OAAZ;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;AACF,SAAK,
|
|
1
|
+
{"version":3,"sources":["hooks/useFocusableGroup.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;AASA;;;AAGG;;;AACI,MAAM,iBAAiB,GAAI,OAAD,IAAkE;AACjG,QAAM,OAAO,GAAG,YAAA,CAAA,UAAA,EAAhB;;AAEA,MAAI,OAAJ,EAAa;AACX,IAAA,SAAA,CAAA,WAAA,CAAY,OAAZ;AACD;;AAED,SAAO,sBAAA,CAAA,oBAAA,CAAqB;AAC1B,IAAA,QAAQ,EAAE;AACR,MAAA,WAAW,EAAE,cAAc,CAAC,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,WAAV;AADnB;AADgB,GAArB,CAAP;AAKD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB;;AAcb,MAAM,cAAc,GAClB,WADqB,IAEoB;AACzC,UAAQ,WAAR;AACE,SAAK,WAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,SAAnC;;AACF,SAAK,SAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,OAAnC;;AACF,SAAK,oBAAL;AACE,aAAO,SAAA,CAAA,KAAA,CAAM,qBAAN,CAA4B,gBAAnC;;AACF;AACE,aAAO,SAAP;AARJ;AAUD,CAbD","sourcesContent":["import { Types, getGroupper } from 'tabster';\nimport { useTabsterAttributes } from './useTabsterAttributes';\nimport { useTabster } from './useTabster';\n\nexport interface UseFocusableGroupOptions {\n /**\n * Behavior for the Tab key.\n */\n tabBehavior?: 'unlimited' | 'limited' | 'limited-trap-focus';\n}\n\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?: UseFocusableGroupOptions): Types.TabsterDOMAttribute => {\n const tabster = useTabster();\n\n if (tabster) {\n getGroupper(tabster);\n }\n\n return useTabsterAttributes({\n groupper: {\n tabbability: getTabbability(options?.tabBehavior),\n },\n });\n};\n\nconst getTabbability = (\n tabBehavior?: UseFocusableGroupOptions['tabBehavior'],\n): Types.GroupperTabbability | undefined => {\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"],"sourceRoot":"../src/"}
|
|
@@ -13,14 +13,16 @@ const constants_1 = /*#__PURE__*/require("../focus/constants");
|
|
|
13
13
|
|
|
14
14
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* Instantiates [keyborg](https://github.com/microsoft/keyborg) and adds `data-keyboard-nav`
|
|
17
|
+
* attribute to a referenced element to ensure keyboard navigation awareness
|
|
18
|
+
* synced to keyborg logic without having to cause a re-render on react tree.
|
|
17
19
|
*/
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
function useKeyboardNavAttribute() {
|
|
21
23
|
const {
|
|
22
24
|
targetDocument
|
|
23
|
-
} = react_shared_contexts_1.
|
|
25
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
|
24
26
|
const keyborg = react_1.useMemo(() => targetDocument && keyborg_1.createKeyborg(targetDocument.defaultView), [targetDocument]);
|
|
25
27
|
const ref = react_1.useRef(null);
|
|
26
28
|
react_1.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA
|
|
1
|
+
{"version":3,"sources":["hooks/useKeyboardNavAttribute.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAIA;;;;AAIG;;;AACH,SAAgB,uBAAhB,GAAuC;AACrC,QAAM;AAAE,IAAA;AAAF,MAAqB,uBAAA,CAAA,kBAAA,EAA3B;AACA,QAAM,OAAO,GAAG,OAAA,CAAA,OAAA,CAAQ,MAAM,cAAc,IAAI,SAAA,CAAA,aAAA,CAAc,cAAc,CAAC,WAA7B,CAAhC,EAA4E,CAAC,cAAD,CAA5E,CAAhB;AACA,QAAM,GAAG,GAAG,OAAA,CAAA,MAAA,CAAU,IAAV,CAAZ;AACA,EAAA,OAAA,CAAA,SAAA,CAAU,MAAK;AACb,QAAI,OAAJ,EAAa;AACX,MAAA,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,OAAO,CAAC,wBAAR,EAA9B,CAAnB;;AACA,YAAM,EAAE,GAAoB,IAAI,IAAG;AACjC,QAAA,mBAAmB,CAAC,GAAD,EAAM,WAAA,CAAA,sBAAN,EAA8B,IAA9B,CAAnB;AACD,OAFD;;AAGA,MAAA,OAAO,CAAC,SAAR,CAAkB,EAAlB;AACA,aAAO,MAAM,OAAO,CAAC,WAAR,CAAoB,EAApB,CAAb;AACD;AACF,GATD,EASG,CAAC,OAAD,CATH;AAUA,SAAO,GAAP;AACD;;AAfD,OAAA,CAAA,uBAAA,GAAA,uBAAA;;AAiBA,SAAS,mBAAT,CAA6B,UAA7B,EAAiE,SAAjE,EAAoF,KAApF,EAAkG;AAChG,MAAI,CAAC,UAAU,CAAC,OAAhB,EAAyB;AACvB;AACD;;AACD,MAAI,KAAJ,EAAW;AACT,IAAA,UAAU,CAAC,OAAX,CAAmB,YAAnB,CAAgC,SAAhC,EAA2C,EAA3C;AACD,GAFD,MAEO;AACL,IAAA,UAAU,CAAC,OAAX,CAAmB,eAAnB,CAAmC,SAAnC;AACD;AACF","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';\nimport type { KeyborgCallback } from 'keyborg/dist/Keyborg';\nimport type { RefObject } from 'react';\n\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<E extends HTMLElement>() {\n const { targetDocument } = useFluent();\n const keyborg = useMemo(() => targetDocument && createKeyborg(targetDocument.defaultView!), [targetDocument]);\n const ref = useRef<E>(null);\n useEffect(() => {\n if (keyborg) {\n setBooleanAttribute(ref, KEYBOARD_NAV_ATTRIBUTE, keyborg.isNavigatingWithKeyboard());\n const cb: KeyborgCallback = 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}\n\nfunction setBooleanAttribute(elementRef: RefObject<HTMLElement>, attribute: string, value: boolean) {\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"],"sourceRoot":"../src/"}
|
|
@@ -22,7 +22,7 @@ const useTabster = () => {
|
|
|
22
22
|
|
|
23
23
|
const {
|
|
24
24
|
targetDocument
|
|
25
|
-
} = react_shared_contexts_1.
|
|
25
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
|
26
26
|
const defaultView = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) || undefined;
|
|
27
27
|
const tabsterOptions = {
|
|
28
28
|
autoRoot: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;;;AAC9D,QAAM;AAAE,IAAA;AAAF,MAAqB,uBAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["hooks/useTabster.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;AAEA;;;;;;AAMG;;;AACI,MAAM,UAAU,GAAG,MAAsC;;;AAC9D,QAAM;AAAE,IAAA;AAAF,MAAqB,uBAAA,CAAA,kBAAA,EAA3B;AAEA,QAAM,WAAW,GAAG,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,WAAhB,KAA+B,SAAnD;AACA,QAAM,cAAc,GAAkC;AAAE,IAAA,QAAQ,EAAE,EAAZ;AAAgB,IAAA,UAAU,EAAE;AAA5B,GAAtD;;AAEA,MAAI,CAAC,WAAL,EAAkB;AAChB,WAAO,IAAP;AACD,GAR6D,CAU9D;;;AACA,SAAO,CAAA,EAAA,GAAA,SAAA,CAAA,iBAAA,CAAkB,WAAlB,CAAA,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAkC,SAAA,CAAA,aAAA,CAAc,WAAd,EAA2B,cAA3B,CAAzC;AACD,CAZM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getCurrentTabster, createTabster, Types as TabsterTypes } from 'tabster';\n\n/**\n * Tries to get a tabster instance on the current window or creates a new one\n * Since Tabster is single instance only, feel free to call this hook to ensure Tabster exists if necessary\n *\n * @internal\n * @returns Tabster core instance\n */\nexport const useTabster = (): TabsterTypes.TabsterCore | null => {\n const { targetDocument } = useFluent();\n\n const defaultView = targetDocument?.defaultView || undefined;\n const tabsterOptions: TabsterTypes.TabsterCoreProps = { autoRoot: {}, controlTab: false };\n\n if (!defaultView) {\n return null;\n }\n\n // TODO: worth memoizing once more tabster options are used\n return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);\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.13",
|
|
4
4
|
"description": "Utilities for focus management and facade for tabster",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"@fluentui/scripts": "^1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@griffel/react": "1.0
|
|
34
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
|
35
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
36
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
33
|
+
"@griffel/react": "1.1.0",
|
|
34
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.10",
|
|
35
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
|
36
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
37
37
|
"keyborg": "^1.1.0",
|
|
38
38
|
"tabster": "^1.4.0",
|
|
39
39
|
"tslib": "^2.1.0"
|