@fluentui/react-toolbar 9.1.41 → 9.1.44
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 +190 -1
- package/CHANGELOG.md +53 -2
- package/lib/components/Toolbar/useToolbar.js +3 -5
- package/lib/components/Toolbar/useToolbar.js.map +1 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js +2 -3
- package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js +2 -3
- package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbar.js +3 -5
- package/lib-commonjs/components/Toolbar/useToolbar.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js +2 -3
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js +2 -3
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,196 @@
|
|
|
2
2
|
"name": "@fluentui/react-toolbar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 26 Sep 2023 17:44:19 GMT",
|
|
6
|
+
"tag": "@fluentui/react-toolbar_v9.1.44",
|
|
7
|
+
"version": "9.1.44",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-toolbar",
|
|
13
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
|
|
14
|
+
"comment": "chore: trigger manual version bump after broken release"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-toolbar",
|
|
19
|
+
"comment": "Bump @fluentui/react-button to v9.3.43",
|
|
20
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-toolbar",
|
|
25
|
+
"comment": "Bump @fluentui/react-divider to v9.2.39",
|
|
26
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-toolbar",
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v9.1.14",
|
|
32
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-toolbar",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.5",
|
|
38
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-toolbar",
|
|
43
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
|
|
44
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-toolbar",
|
|
49
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.36",
|
|
50
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-toolbar",
|
|
55
|
+
"comment": "Bump @fluentui/react-radio to v9.1.44",
|
|
56
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-toolbar",
|
|
61
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.1",
|
|
62
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-toolbar",
|
|
67
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.1",
|
|
68
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"date": "Tue, 26 Sep 2023 15:31:42 GMT",
|
|
75
|
+
"tag": "@fluentui/react-toolbar_v9.1.43",
|
|
76
|
+
"version": "9.1.43",
|
|
77
|
+
"comments": {
|
|
78
|
+
"patch": [
|
|
79
|
+
{
|
|
80
|
+
"author": "martinhochel@microsoft.com",
|
|
81
|
+
"package": "@fluentui/react-toolbar",
|
|
82
|
+
"commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
|
|
83
|
+
"comment": "fix: bump swc core to mitigate transpilation memory leaks"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-toolbar",
|
|
88
|
+
"comment": "Bump @fluentui/react-button to v9.3.42",
|
|
89
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-toolbar",
|
|
94
|
+
"comment": "Bump @fluentui/react-divider to v9.2.38",
|
|
95
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-toolbar",
|
|
100
|
+
"comment": "Bump @fluentui/react-theme to v9.1.13",
|
|
101
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-toolbar",
|
|
106
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.4",
|
|
107
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-toolbar",
|
|
112
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
|
|
113
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"author": "beachball",
|
|
117
|
+
"package": "@fluentui/react-toolbar",
|
|
118
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.35",
|
|
119
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"author": "beachball",
|
|
123
|
+
"package": "@fluentui/react-toolbar",
|
|
124
|
+
"comment": "Bump @fluentui/react-radio to v9.1.43",
|
|
125
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"author": "beachball",
|
|
129
|
+
"package": "@fluentui/react-toolbar",
|
|
130
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.9.0",
|
|
131
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"author": "beachball",
|
|
135
|
+
"package": "@fluentui/react-toolbar",
|
|
136
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.0",
|
|
137
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
138
|
+
}
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"date": "Wed, 20 Sep 2023 17:47:45 GMT",
|
|
144
|
+
"tag": "@fluentui/react-toolbar_v9.1.42",
|
|
145
|
+
"version": "9.1.42",
|
|
146
|
+
"comments": {
|
|
147
|
+
"patch": [
|
|
148
|
+
{
|
|
149
|
+
"author": "martinhochel@microsoft.com",
|
|
150
|
+
"package": "@fluentui/react-toolbar",
|
|
151
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0",
|
|
152
|
+
"comment": "chore: trigger manual version bump after broken release"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"author": "beachball",
|
|
156
|
+
"package": "@fluentui/react-toolbar",
|
|
157
|
+
"comment": "Bump @fluentui/react-button to v9.3.41",
|
|
158
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"author": "beachball",
|
|
162
|
+
"package": "@fluentui/react-toolbar",
|
|
163
|
+
"comment": "Bump @fluentui/react-divider to v9.2.37",
|
|
164
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"author": "beachball",
|
|
168
|
+
"package": "@fluentui/react-toolbar",
|
|
169
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.10",
|
|
170
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"author": "beachball",
|
|
174
|
+
"package": "@fluentui/react-toolbar",
|
|
175
|
+
"comment": "Bump @fluentui/react-radio to v9.1.42",
|
|
176
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"author": "beachball",
|
|
180
|
+
"package": "@fluentui/react-toolbar",
|
|
181
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.8.1",
|
|
182
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"author": "beachball",
|
|
186
|
+
"package": "@fluentui/react-toolbar",
|
|
187
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.11",
|
|
188
|
+
"commit": "41d0ed0376ad79f1f5f5c4c7487515a1c6be35f0"
|
|
189
|
+
}
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"date": "Wed, 20 Sep 2023 14:59:53 GMT",
|
|
6
195
|
"tag": "@fluentui/react-toolbar_v9.1.41",
|
|
7
196
|
"version": "9.1.41",
|
|
8
197
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,63 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toolbar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 Sep 2023 17:44:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.44)
|
|
8
|
+
|
|
9
|
+
Tue, 26 Sep 2023 17:44:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.43..@fluentui/react-toolbar_v9.1.44)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-button to v9.3.43 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
16
|
+
- Bump @fluentui/react-divider to v9.2.39 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
19
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
20
|
+
- Bump @fluentui/react-context-selector to v9.1.36 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
21
|
+
- Bump @fluentui/react-radio to v9.1.44 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
22
|
+
- Bump @fluentui/react-shared-contexts to v9.9.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
23
|
+
- Bump @fluentui/react-tabster to v9.13.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.1.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.43)
|
|
26
|
+
|
|
27
|
+
Tue, 26 Sep 2023 15:31:42 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.42..@fluentui/react-toolbar_v9.1.43)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
|
|
33
|
+
- Bump @fluentui/react-button to v9.3.42 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
34
|
+
- Bump @fluentui/react-divider to v9.2.38 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
35
|
+
- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
36
|
+
- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
37
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
38
|
+
- Bump @fluentui/react-context-selector to v9.1.35 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
39
|
+
- Bump @fluentui/react-radio to v9.1.43 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
40
|
+
- Bump @fluentui/react-shared-contexts to v9.9.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
41
|
+
- Bump @fluentui/react-tabster to v9.13.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
42
|
+
|
|
43
|
+
## [9.1.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.42)
|
|
44
|
+
|
|
45
|
+
Wed, 20 Sep 2023 17:47:45 GMT
|
|
46
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.41..@fluentui/react-toolbar_v9.1.42)
|
|
47
|
+
|
|
48
|
+
### Patches
|
|
49
|
+
|
|
50
|
+
- chore: trigger manual version bump after broken release ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by martinhochel@microsoft.com)
|
|
51
|
+
- Bump @fluentui/react-button to v9.3.41 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
|
|
52
|
+
- Bump @fluentui/react-divider to v9.2.37 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
|
|
53
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.10 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
|
|
54
|
+
- Bump @fluentui/react-radio to v9.1.42 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
|
|
55
|
+
- Bump @fluentui/react-shared-contexts to v9.8.1 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
|
|
56
|
+
- Bump @fluentui/react-tabster to v9.12.11 ([PR #29197](https://github.com/microsoft/fluentui/pull/29197) by beachball)
|
|
57
|
+
|
|
7
58
|
## [9.1.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.41)
|
|
8
59
|
|
|
9
|
-
Wed, 20 Sep 2023 14:
|
|
60
|
+
Wed, 20 Sep 2023 14:59:53 GMT
|
|
10
61
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.40..@fluentui/react-toolbar_v9.1.41)
|
|
11
62
|
|
|
12
63
|
### Patches
|
|
@@ -44,8 +44,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
44
44
|
});
|
|
45
45
|
const handleToggleButton = useEventCallback((e, name, value, checked)=>{
|
|
46
46
|
if (name && value) {
|
|
47
|
-
|
|
48
|
-
const checkedItems = ((_checkedValues = checkedValues) === null || _checkedValues === void 0 ? void 0 : _checkedValues[name]) || [];
|
|
47
|
+
const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
|
|
49
48
|
const newCheckedItems = [
|
|
50
49
|
...checkedItems
|
|
51
50
|
];
|
|
@@ -54,7 +53,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
54
53
|
} else {
|
|
55
54
|
newCheckedItems.push(value);
|
|
56
55
|
}
|
|
57
|
-
|
|
56
|
+
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
58
57
|
name,
|
|
59
58
|
checkedItems: newCheckedItems
|
|
60
59
|
});
|
|
@@ -62,8 +61,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
62
61
|
});
|
|
63
62
|
const handleRadio = useEventCallback((e, name, value, checked)=>{
|
|
64
63
|
if (name && value) {
|
|
65
|
-
|
|
66
|
-
(_onCheckedValueChange = onCheckedValueChange) === null || _onCheckedValueChange === void 0 ? void 0 : _onCheckedValueChange(e, {
|
|
64
|
+
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
67
65
|
name,
|
|
68
66
|
checkedItems: [
|
|
69
67
|
value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(\n getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...(vertical && { 'aria-orientation': 'vertical' }),\n ...arrowNavigationProps,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"names":["React","useEventCallback","useControllableState","getNativeElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAEhH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,MAAMI,uBAAuBN,wBAAwB;QACnDO,UAAU;QACVC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,KAAKa,MAAM,CACfd,sBAAsB,OAAO;YAC3Be,MAAM;YACNV;YACA,GAAIE,YAAY;gBAAE,oBAAoB;YAAW,CAAC;YAClD,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCvB,iBAC1C,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;
|
|
1
|
+
{"version":3,"sources":["useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(\n getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...(vertical && { 'aria-orientation': 'vertical' }),\n ...arrowNavigationProps,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"names":["React","useEventCallback","useControllableState","getNativeElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAEhH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,MAAMI,uBAAuBN,wBAAwB;QACnDO,UAAU;QACVC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,KAAKa,MAAM,CACfd,sBAAsB,OAAO;YAC3Be,MAAM;YACNV;YACA,GAAIE,YAAY;gBAAE,oBAAoB;YAAW,CAAC;YAClD,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCvB,iBAC1C,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,0BAAAA,oCAAAA,aAAe,CAACM,KAAK,KAAI,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,cAA+BjC,iBACnC,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGb,YAAY;QACfU;QACAU;QACAd,eAAeA,0BAAAA,2BAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa;IAEA,MAAM,CAACf,eAAegB,iBAAiB,GAAGlC,qBAAqB;QAC7DiC,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCT,cAAc,CAAC;IACjB;IACA,MAAM,EAAEO,sBAAsBiB,4BAA4B,EAAE,GAAGH;IAC/D,MAAMd,uBAA6DpB,iBAAiB,CAACwB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QAC5G,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAO,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}
|
|
@@ -28,9 +28,8 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
|
|
|
28
28
|
value: props.value
|
|
29
29
|
};
|
|
30
30
|
const handleOnClick = useEventCallback((e)=>{
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
(_onClickOriginal = onClickOriginal) === null || _onClickOriginal === void 0 ? void 0 : _onClickOriginal(e);
|
|
31
|
+
handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
|
|
32
|
+
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
|
|
34
33
|
});
|
|
35
34
|
state.root['aria-pressed'] = undefined;
|
|
36
35
|
state.root.onClick = handleOnClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarRadioButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable(\n { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["React","useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","handleRadio","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","role","state","handleOnClick","e","root","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,UAAUN,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,IAAI,CAAC,cAA7BH,oDAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,KAAK;;IACvG,MAAMC,OAAOX,2BAA2BK,CAAAA,MAAOA,IAAIM,IAAI;IAEvD,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGX;IACrC,MAAMY,oBAAoBf,yBACxB;QAAEY;QAAML;QAASS,MAAM;QAAS,gBAAgBT;QAAS,GAAGJ,KAAK;IAAC,GAClEC;IAEF,MAAMa,QAAiC;QACrC,GAAGF,iBAAiB;QACpBN,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMO,gBAAgBnB,iBACpB,CAACoB;
|
|
1
|
+
{"version":3,"sources":["useToolbarRadioButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable(\n { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["React","useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","handleRadio","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","role","state","handleOnClick","e","root","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,UAAUN,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,IAAI,CAAC,cAA7BH,oDAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,KAAK;;IACvG,MAAMC,OAAOX,2BAA2BK,CAAAA,MAAOA,IAAIM,IAAI;IAEvD,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGX;IACrC,MAAMY,oBAAoBf,yBACxB;QAAEY;QAAML;QAASS,MAAM;QAAS,gBAAgBT;QAAS,GAAGJ,KAAK;IAAC,GAClEC;IAEF,MAAMa,QAAiC;QACrC,GAAGF,iBAAiB;QACpBN,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMO,gBAAgBnB,iBACpB,CAACoB;QACCd,wBAAAA,kCAAAA,YAAcc,GAAGF,MAAMR,IAAI,EAAEQ,MAAMN,KAAK,EAAEM,MAAMV,OAAO;QACvDO,4BAAAA,sCAAAA,gBAAkBK;IACpB;IAEFF,MAAMG,IAAI,CAAC,eAAe,GAAGC;IAC7BJ,MAAMG,IAAI,CAACP,OAAO,GAAGK;IACrB,OAAOD;AACT,EAAE"}
|
|
@@ -23,14 +23,13 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
|
|
|
23
23
|
value: props.value
|
|
24
24
|
};
|
|
25
25
|
const handleOnClick = (e)=>{
|
|
26
|
-
var _handleToggleButton, _onClickOriginal;
|
|
27
26
|
if (state.disabled) {
|
|
28
27
|
e.preventDefault();
|
|
29
28
|
e.stopPropagation();
|
|
30
29
|
return;
|
|
31
30
|
}
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
|
|
32
|
+
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
|
|
34
33
|
};
|
|
35
34
|
state.root.onClick = handleOnClick;
|
|
36
35
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","handleToggleButton","ctx","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAMC,qBAAqBJ,2BAA2BK,CAAAA,MAAOA,IAAID,kBAAkB;IACnF,MAAME,UAAUN,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,IAAI,CAAC,cAA7BH,oDAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGV;IACrC,MAAMW,oBAAoBd,yBAAyB;QAAEO;QAAS,GAAGJ,KAAK;IAAC,GAAGC;IAC1E,MAAMW,QAAkC;QACtC,GAAGD,iBAAiB;QACpBL,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMK,gBAAgB,CACpBC;
|
|
1
|
+
{"version":3,"sources":["useToolbarToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","handleToggleButton","ctx","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;CAKC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAMC,qBAAqBJ,2BAA2BK,CAAAA,MAAOA,IAAID,kBAAkB;IACnF,MAAME,UAAUN,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,IAAI,CAAC,cAA7BH,oDAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGV;IACrC,MAAMW,oBAAoBd,yBAAyB;QAAEO;QAAS,GAAGJ,KAAK;IAAC,GAAGC;IAC1E,MAAMW,QAAkC;QACtC,GAAGD,iBAAiB;QACpBL,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMK,gBAAgB,CACpBC;QAEA,IAAIF,MAAMG,QAAQ,EAAE;YAClBD,EAAEE,cAAc;YAChBF,EAAEG,eAAe;YACjB;QACF;QAEAf,+BAAAA,yCAAAA,mBAAqBY,GAAGF,MAAMN,IAAI,EAAEM,MAAMJ,KAAK,EAAEI,MAAMR,OAAO;QAC9DM,4BAAAA,sCAAAA,gBAAkBI;IACpB;IAEAF,MAAMM,IAAI,CAACT,OAAO,GAAGI;IACrB,OAAOD;AACT,EAAE"}
|
|
@@ -47,8 +47,7 @@ const useToolbar_unstable = (props, ref)=>{
|
|
|
47
47
|
});
|
|
48
48
|
const handleToggleButton = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
|
|
49
49
|
if (name && value) {
|
|
50
|
-
|
|
51
|
-
const checkedItems = ((_checkedValues = checkedValues) === null || _checkedValues === void 0 ? void 0 : _checkedValues[name]) || [];
|
|
50
|
+
const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
|
|
52
51
|
const newCheckedItems = [
|
|
53
52
|
...checkedItems
|
|
54
53
|
];
|
|
@@ -57,7 +56,7 @@ const useToolbar_unstable = (props, ref)=>{
|
|
|
57
56
|
} else {
|
|
58
57
|
newCheckedItems.push(value);
|
|
59
58
|
}
|
|
60
|
-
|
|
59
|
+
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
61
60
|
name,
|
|
62
61
|
checkedItems: newCheckedItems
|
|
63
62
|
});
|
|
@@ -65,8 +64,7 @@ const useToolbar_unstable = (props, ref)=>{
|
|
|
65
64
|
});
|
|
66
65
|
const handleRadio = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
|
|
67
66
|
if (name && value) {
|
|
68
|
-
|
|
69
|
-
(_onCheckedValueChange = onCheckedValueChange) === null || _onCheckedValueChange === void 0 ? void 0 : _onCheckedValueChange(e, {
|
|
67
|
+
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
70
68
|
name,
|
|
71
69
|
checkedItems: [
|
|
72
70
|
value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbar.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */ export const useToolbar_unstable = (props, ref)=>{\n const { size = 'medium', vertical = false } = props;\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both'\n });\n const initialState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div'\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...vertical && {\n 'aria-orientation': 'vertical'\n },\n ...arrowNavigationProps,\n ...props\n }), {\n elementType: 'div'\n })\n };\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange\n });\n const handleToggleButton = useEventCallback((e, name, value, checked)=>{\n if (name && value) {\n
|
|
1
|
+
{"version":3,"sources":["useToolbar.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */ export const useToolbar_unstable = (props, ref)=>{\n const { size = 'medium', vertical = false } = props;\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both'\n });\n const initialState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div'\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...vertical && {\n 'aria-orientation': 'vertical'\n },\n ...arrowNavigationProps,\n ...props\n }), {\n elementType: 'div'\n })\n };\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange\n });\n const handleToggleButton = useEventCallback((e, name, value, checked)=>{\n if (name && value) {\n const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n const newCheckedItems = [\n ...checkedItems\n ];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n }\n });\n const handleRadio = useEventCallback((e, name, value, checked)=>{\n if (name && value) {\n onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {\n name,\n checkedItems: [\n value\n ]\n });\n }\n });\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}\n };\n};\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */ const useToolbarSelectableState = (state)=>{\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {}\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange = useEventCallback((e, { name, checkedItems })=>{\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, {\n name,\n checkedItems\n });\n }\n setCheckedValues((s)=>{\n return s ? {\n ...s,\n [name]: checkedItems\n } : {\n [name]: checkedItems\n };\n });\n });\n return [\n checkedValues,\n onCheckedValueChange\n ];\n};\n"],"names":["useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","useArrowNavigationGroup","circular","axis","initialState","components","root","slot","always","getNativeElementProps","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","useEventCallback","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","useControllableState","defaultState","onCheckedValueChangeOriginal","s"],"mappings":";;;;+BAWiBA;;;eAAAA;;;;iEAXM;gCAC6D;8BAC5C;AAS7B,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAC9C,MAAMI,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,MAAM;IACV;IACA,MAAMC,eAAe;QACjBN;QACAC;QACA,sCAAsC;QACtCM,YAAY;YACR,iDAAiD;YACjDC,MAAM;QACV;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CC,MAAM;YACNb;YACA,GAAGE,YAAY;gBACX,oBAAoB;YACxB,CAAC;YACD,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACZ,IAAI;YACAe,aAAa;QACjB;IACJ;IACA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACpEF,eAAehB,MAAMgB,aAAa;QAClCG,sBAAsBnB,MAAMmB,oBAAoB;QAChDF,sBAAsBjB,MAAMiB,oBAAoB;IACpD;IACA,MAAMG,qBAAqBC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC,MAAMC,OAAOC;QACzD,IAAIF,QAAQC,OAAO;YACf,MAAME,eAAe,AAACV,CAAAA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,aAAa,CAACO,KAAK,AAAD,KAAM,EAAE;YAC9G,MAAMI,kBAAkB;mBACjBD;aACN;YACD,IAAID,SAAS;gBACTE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YAC3D,OAAO;gBACHG,gBAAgBG,IAAI,CAACN;YACzB;YACAP,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,GAAG;gBAChGC;gBACAG,cAAcC;YAClB;QACJ;IACJ;IACA,MAAMI,cAAcV,IAAAA,gCAAgB,EAAC,CAACC,GAAGC,MAAMC,OAAOC;QAClD,IAAIF,QAAQC,OAAO;YACfP,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,GAAG;gBAChGC;gBACAG,cAAc;oBACVF;iBACH;YACL;QACJ;IACJ;IACA,OAAO;QACH,GAAGhB,YAAY;QACfY;QACAW;QACAf,eAAeA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgB,CAAC;IACzF;AACJ;AACA;;;CAGC,GAAG,MAAME,4BAA4B,CAACc;IACnC,MAAM,CAAChB,eAAeiB,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DF,OAAOA,MAAMhB,aAAa;QAC1BmB,cAAcH,MAAMb,oBAAoB;QACxCX,cAAc,CAAC;IACnB;IACA,MAAM,EAAES,sBAAsBmB,4BAA4B,EAAE,GAAGJ;IAC/D,MAAMf,uBAAuBI,IAAAA,gCAAgB,EAAC,CAACC,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QACpE,IAAIU,8BAA8B;YAC9BA,6BAA6Bd,GAAG;gBAC5BC;gBACAG;YACJ;QACJ;QACAO,iBAAiB,CAACI;YACd,OAAOA,IAAI;gBACP,GAAGA,CAAC;gBACJ,CAACd,KAAK,EAAEG;YACZ,IAAI;gBACA,CAACH,KAAK,EAAEG;YACZ;QACJ;IACJ;IACA,OAAO;QACHV;QACAC;KACH;AACL"}
|
|
@@ -34,9 +34,8 @@ const useToolbarRadioButton_unstable = (props, ref)=>{
|
|
|
34
34
|
value: props.value
|
|
35
35
|
};
|
|
36
36
|
const handleOnClick = (0, _reactutilities.useEventCallback)((e)=>{
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
(_onClickOriginal = onClickOriginal) === null || _onClickOriginal === void 0 ? void 0 : _onClickOriginal(e);
|
|
37
|
+
handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
|
|
38
|
+
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
|
|
40
39
|
});
|
|
41
40
|
state.root['aria-pressed'] = undefined;
|
|
42
41
|
state.root.onClick = handleOnClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarRadioButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */ export const useToolbarRadioButton_unstable = (props, ref)=>{\n const handleRadio = useToolbarContext_unstable((ctx)=>ctx.handleRadio);\n const checked = useToolbarContext_unstable((ctx)=>{\n var _ctx_checkedValues_props_name;\n return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));\n });\n const size = useToolbarContext_unstable((ctx)=>ctx.size);\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({\n size,\n checked,\n role: 'radio',\n 'aria-checked': checked,\n ...props\n }, ref);\n const state = {\n ...toggleButtonState,\n name: props.name,\n value: props.value\n };\n const handleOnClick = useEventCallback((e)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarRadioButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */ export const useToolbarRadioButton_unstable = (props, ref)=>{\n const handleRadio = useToolbarContext_unstable((ctx)=>ctx.handleRadio);\n const checked = useToolbarContext_unstable((ctx)=>{\n var _ctx_checkedValues_props_name;\n return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));\n });\n const size = useToolbarContext_unstable((ctx)=>ctx.size);\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({\n size,\n checked,\n role: 'radio',\n 'aria-checked': checked,\n ...props\n }, ref);\n const state = {\n ...toggleButtonState,\n name: props.name,\n value: props.value\n };\n const handleOnClick = useEventCallback((e)=>{\n handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);\n onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);\n });\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["useToolbarRadioButton_unstable","props","ref","handleRadio","useToolbarContext_unstable","ctx","checked","_ctx_checkedValues_props_name","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","useToggleButton_unstable","role","state","handleOnClick","useEventCallback","e","root","undefined"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;gCACU;6BACQ;gCACE;AAMhC,MAAMA,iCAAiC,CAACC,OAAOC;IACtD,MAAMC,cAAcC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,WAAW;IACrE,MAAMG,UAAUF,IAAAA,0CAA0B,EAAC,CAACC;QACxC,IAAIE;QACJ,OAAO,CAAC,CAAE,CAAA,AAACA,CAAAA,gCAAgCF,IAAIG,aAAa,CAACP,MAAMQ,IAAI,CAAC,AAAD,MAAO,QAAQF,kCAAkC,KAAK,IAAI,KAAK,IAAIA,8BAA8BG,QAAQ,CAACT,MAAMU,KAAK,CAAA;IAChM;IACA,MAAMC,OAAOR,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIO,IAAI;IACvD,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGb;IACrC,MAAMc,oBAAoBC,IAAAA,qCAAwB,EAAC;QAC/CJ;QACAN;QACAW,MAAM;QACN,gBAAgBX;QAChB,GAAGL,KAAK;IACZ,GAAGC;IACH,MAAMgB,QAAQ;QACV,GAAGH,iBAAiB;QACpBN,MAAMR,MAAMQ,IAAI;QAChBE,OAAOV,MAAMU,KAAK;IACtB;IACA,MAAMQ,gBAAgBC,IAAAA,gCAAgB,EAAC,CAACC;QACpClB,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYkB,GAAGH,MAAMT,IAAI,EAAES,MAAMP,KAAK,EAAEO,MAAMZ,OAAO;QAC/GQ,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBO;IACtF;IACAH,MAAMI,IAAI,CAAC,eAAe,GAAGC;IAC7BL,MAAMI,IAAI,CAACT,OAAO,GAAGM;IACrB,OAAOD;AACX"}
|
|
@@ -29,14 +29,13 @@ const useToolbarToggleButton_unstable = (props, ref)=>{
|
|
|
29
29
|
value: props.value
|
|
30
30
|
};
|
|
31
31
|
const handleOnClick = (e)=>{
|
|
32
|
-
var _handleToggleButton, _onClickOriginal;
|
|
33
32
|
if (state.disabled) {
|
|
34
33
|
e.preventDefault();
|
|
35
34
|
e.stopPropagation();
|
|
36
35
|
return;
|
|
37
36
|
}
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
|
|
38
|
+
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
|
|
40
39
|
};
|
|
41
40
|
state.root.onClick = handleOnClick;
|
|
42
41
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarToggleButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */ export const useToolbarToggleButton_unstable = (props, ref)=>{\n const handleToggleButton = useToolbarContext_unstable((ctx)=>ctx.handleToggleButton);\n const checked = useToolbarContext_unstable((ctx)=>{\n var _ctx_checkedValues_props_name;\n return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));\n });\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({\n checked,\n ...props\n }, ref);\n const state = {\n ...toggleButtonState,\n name: props.name,\n value: props.value\n };\n const handleOnClick = (e)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarToggleButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */ export const useToolbarToggleButton_unstable = (props, ref)=>{\n const handleToggleButton = useToolbarContext_unstable((ctx)=>ctx.handleToggleButton);\n const checked = useToolbarContext_unstable((ctx)=>{\n var _ctx_checkedValues_props_name;\n return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));\n });\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({\n checked,\n ...props\n }, ref);\n const state = {\n ...toggleButtonState,\n name: props.name,\n value: props.value\n };\n const handleOnClick = (e)=>{\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);\n onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);\n };\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["useToolbarToggleButton_unstable","props","ref","handleToggleButton","useToolbarContext_unstable","ctx","checked","_ctx_checkedValues_props_name","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","useToggleButton_unstable","state","handleOnClick","e","disabled","preventDefault","stopPropagation","root"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;6BACkB;gCACE;AAMhC,MAAMA,kCAAkC,CAACC,OAAOC;IACvD,MAAMC,qBAAqBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIF,kBAAkB;IACnF,MAAMG,UAAUF,IAAAA,0CAA0B,EAAC,CAACC;QACxC,IAAIE;QACJ,OAAO,CAAC,CAAE,CAAA,AAACA,CAAAA,gCAAgCF,IAAIG,aAAa,CAACP,MAAMQ,IAAI,CAAC,AAAD,MAAO,QAAQF,kCAAkC,KAAK,IAAI,KAAK,IAAIA,8BAA8BG,QAAQ,CAACT,MAAMU,KAAK,CAAA;IAChM;IACA,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGZ;IACrC,MAAMa,oBAAoBC,IAAAA,qCAAwB,EAAC;QAC/CT;QACA,GAAGL,KAAK;IACZ,GAAGC;IACH,MAAMc,QAAQ;QACV,GAAGF,iBAAiB;QACpBL,MAAMR,MAAMQ,IAAI;QAChBE,OAAOV,MAAMU,KAAK;IACtB;IACA,MAAMM,gBAAgB,CAACC;QACnB,IAAIF,MAAMG,QAAQ,EAAE;YAChBD,EAAEE,cAAc;YAChBF,EAAEG,eAAe;YACjB;QACJ;QACAlB,uBAAuB,QAAQA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBe,GAAGF,MAAMP,IAAI,EAAEO,MAAML,KAAK,EAAEK,MAAMV,OAAO;QACpIO,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBK;IACtF;IACAF,MAAMM,IAAI,CAACV,OAAO,GAAGK;IACrB,OAAOD;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toolbar",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.44",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"@fluentui/scripts-tasks": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-button": "^9.3.
|
|
39
|
-
"@fluentui/react-divider": "^9.2.
|
|
40
|
-
"@fluentui/react-theme": "^9.1.
|
|
41
|
-
"@fluentui/react-utilities": "^9.13.
|
|
42
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
43
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
44
|
-
"@fluentui/react-radio": "^9.1.
|
|
45
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
46
|
-
"@fluentui/react-tabster": "^9.
|
|
38
|
+
"@fluentui/react-button": "^9.3.43",
|
|
39
|
+
"@fluentui/react-divider": "^9.2.39",
|
|
40
|
+
"@fluentui/react-theme": "^9.1.14",
|
|
41
|
+
"@fluentui/react-utilities": "^9.13.5",
|
|
42
|
+
"@fluentui/react-jsx-runtime": "^9.0.12",
|
|
43
|
+
"@fluentui/react-context-selector": "^9.1.36",
|
|
44
|
+
"@fluentui/react-radio": "^9.1.44",
|
|
45
|
+
"@fluentui/react-shared-contexts": "^9.9.1",
|
|
46
|
+
"@fluentui/react-tabster": "^9.13.1",
|
|
47
47
|
"@griffel/react": "^1.5.14",
|
|
48
48
|
"@swc/helpers": "^0.5.1"
|
|
49
49
|
},
|