@fluentui/react-tabster 0.0.0-nightly-20220520-0418.1 → 0.0.0-nightly-20220531-0421.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 +86 -9
- package/CHANGELOG.md +38 -7
- 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 +3 -1
- package/lib/hooks/useKeyboardNavAttribute.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 +3 -1
- package/lib-commonjs/hooks/useKeyboardNavAttribute.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,80 @@
|
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-tabster_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 31 May 2022 04:31:19 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tabster_v0.0.0-nightly-20220531-0421.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220531-0421.1",
|
|
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": "beachball",
|
|
26
|
+
"package": "@fluentui/react-tabster",
|
|
27
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220531-0421.1",
|
|
28
|
+
"commit": "387c27574bf67b9a6eabd24706d59253c3f66487"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Thu, 26 May 2022 21:01:31 GMT",
|
|
35
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.12",
|
|
36
|
+
"version": "9.0.0-rc.12",
|
|
37
|
+
"comments": {
|
|
38
|
+
"prerelease": [
|
|
39
|
+
{
|
|
40
|
+
"author": "tristan.watanabe@gmail.com",
|
|
41
|
+
"package": "@fluentui/react-tabster",
|
|
42
|
+
"commit": "c089a26b502e3b2f34855a86e932156c9271e03a",
|
|
43
|
+
"comment": "Remove usage of focus-visible pseudo-class to conform to browser support matrix."
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"date": "Mon, 23 May 2022 18:56:49 GMT",
|
|
50
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.11",
|
|
51
|
+
"version": "9.0.0-rc.11",
|
|
52
|
+
"comments": {
|
|
53
|
+
"prerelease": [
|
|
54
|
+
{
|
|
55
|
+
"author": "seanmonahan@microsoft.com",
|
|
56
|
+
"package": "@fluentui/react-tabster",
|
|
57
|
+
"commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
|
|
58
|
+
"comment": "BREAKING: update string unions to use spinal-case"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "beachball",
|
|
62
|
+
"package": "@fluentui/react-tabster",
|
|
63
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
|
|
64
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "beachball",
|
|
68
|
+
"package": "@fluentui/react-tabster",
|
|
69
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
|
|
70
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"date": "Mon, 23 May 2022 12:13:51 GMT",
|
|
77
|
+
"tag": "@fluentui/react-tabster_v9.0.0-rc.10",
|
|
78
|
+
"version": "9.0.0-rc.10",
|
|
8
79
|
"comments": {
|
|
9
80
|
"prerelease": [
|
|
10
81
|
{
|
|
@@ -13,6 +84,12 @@
|
|
|
13
84
|
"commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
|
|
14
85
|
"comment": "chore: Update Griffel to latest version"
|
|
15
86
|
},
|
|
87
|
+
{
|
|
88
|
+
"author": "seanmonahan@microsoft.com",
|
|
89
|
+
"package": "@fluentui/react-tabster",
|
|
90
|
+
"commit": "9bdcf7a94d2a89e77533e2ec850ba247fa6ba68d",
|
|
91
|
+
"comment": "Update tabster dependency from ^1.3.3 to ^1.4.0"
|
|
92
|
+
},
|
|
16
93
|
{
|
|
17
94
|
"author": "olfedias@microsoft.com",
|
|
18
95
|
"package": "@fluentui/react-tabster",
|
|
@@ -28,20 +105,20 @@
|
|
|
28
105
|
{
|
|
29
106
|
"author": "beachball",
|
|
30
107
|
"package": "@fluentui/react-tabster",
|
|
31
|
-
"comment": "Bump @fluentui/react-shared-contexts to
|
|
32
|
-
"commit": "
|
|
108
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.8",
|
|
109
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
33
110
|
},
|
|
34
111
|
{
|
|
35
112
|
"author": "beachball",
|
|
36
113
|
"package": "@fluentui/react-tabster",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to
|
|
38
|
-
"commit": "
|
|
114
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
|
|
115
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
39
116
|
},
|
|
40
117
|
{
|
|
41
118
|
"author": "beachball",
|
|
42
119
|
"package": "@fluentui/react-tabster",
|
|
43
|
-
"comment": "Bump @fluentui/react-utilities to
|
|
44
|
-
"commit": "
|
|
120
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
|
|
121
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
45
122
|
}
|
|
46
123
|
]
|
|
47
124
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,53 @@
|
|
|
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 04:31:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220531-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v0.0.0-nightly-20220531-0421.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.
|
|
9
|
+
Tue, 31 May 2022 04:31:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.12..@fluentui/react-tabster_v0.0.0-nightly-20220531-0421.1)
|
|
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
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220531-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/387c27574bf67b9a6eabd24706d59253c3f66487) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.12)
|
|
18
|
+
|
|
19
|
+
Thu, 26 May 2022 21:01:31 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.11..@fluentui/react-tabster_v9.0.0-rc.12)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- 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)
|
|
25
|
+
|
|
26
|
+
## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.11)
|
|
27
|
+
|
|
28
|
+
Mon, 23 May 2022 18:56:49 GMT
|
|
29
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabster_v9.0.0-rc.10..@fluentui/react-tabster_v9.0.0-rc.11)
|
|
30
|
+
|
|
31
|
+
### Changes
|
|
32
|
+
|
|
33
|
+
- BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
|
|
34
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
35
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
36
|
+
|
|
37
|
+
## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.10)
|
|
38
|
+
|
|
39
|
+
Mon, 23 May 2022 12:13:51 GMT
|
|
40
|
+
[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
41
|
|
|
12
42
|
### Changes
|
|
13
43
|
|
|
14
44
|
- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
|
|
45
|
+
- Update tabster dependency from ^1.3.3 to ^1.4.0 ([PR #23109](https://github.com/microsoft/fluentui/pull/23109) by seanmonahan@microsoft.com)
|
|
15
46
|
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
16
47
|
- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to
|
|
18
|
-
- Bump @fluentui/react-theme to
|
|
19
|
-
- Bump @fluentui/react-utilities to
|
|
48
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
49
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
50
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
20
51
|
|
|
21
52
|
## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabster_v9.0.0-rc.9)
|
|
22
53
|
|
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/"}
|
|
@@ -3,7 +3,9 @@ import { useEffect, useMemo, useRef } from 'react';
|
|
|
3
3
|
import { KEYBOARD_NAV_ATTRIBUTE } from '../focus/constants';
|
|
4
4
|
import { 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,SAAT,QAA0B,iCAA1B;AAIA;;
|
|
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,SAAT,QAA0B,iCAA1B;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 } 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/"}
|
|
@@ -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,7 +13,9 @@ 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
|
|
|
@@ -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,SAAA,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 } 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabster",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220531-0421.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",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"@fluentui/scripts": "^1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@griffel/react": "1.0
|
|
34
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
33
|
+
"@griffel/react": "1.1.0",
|
|
34
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20220531-0421.1",
|
|
35
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220531-0421.0",
|
|
36
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220531-0421.0",
|
|
37
37
|
"keyborg": "^1.1.0",
|
|
38
|
-
"tabster": "^1.
|
|
38
|
+
"tabster": "^1.4.0",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|