@fluentui/react-toolbar 9.0.0-beta.4 → 9.0.0-beta.6

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.
Files changed (27) hide show
  1. package/CHANGELOG.json +154 -6
  2. package/CHANGELOG.md +38 -7
  3. package/dist/index.d.ts +36 -5
  4. package/lib/components/Toolbar/Toolbar.types.js.map +1 -1
  5. package/lib/components/Toolbar/ToolbarContext.js +10 -4
  6. package/lib/components/Toolbar/ToolbarContext.js.map +1 -1
  7. package/lib/components/Toolbar/useToolbar.js +39 -6
  8. package/lib/components/Toolbar/useToolbar.js.map +1 -1
  9. package/lib/components/Toolbar/useToolbarContextValues.js +4 -2
  10. package/lib/components/Toolbar/useToolbarContextValues.js.map +1 -1
  11. package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js +3 -9
  12. package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js.map +1 -1
  13. package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map +1 -1
  14. package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js +37 -0
  15. package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -0
  16. package/lib-commonjs/components/Toolbar/ToolbarContext.js +10 -4
  17. package/lib-commonjs/components/Toolbar/ToolbarContext.js.map +1 -1
  18. package/lib-commonjs/components/Toolbar/useToolbar.js +41 -7
  19. package/lib-commonjs/components/Toolbar/useToolbar.js.map +1 -1
  20. package/lib-commonjs/components/Toolbar/useToolbarContextValues.js +4 -2
  21. package/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map +1 -1
  22. package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.js +2 -8
  23. package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.js.map +1 -1
  24. package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js +48 -0
  25. package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -0
  26. package/package.json +13 -11
  27. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,155 @@
2
2
  "name": "@fluentui/react-toolbar",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 14 Jul 2022 21:18:41 GMT",
5
+ "date": "Thu, 15 Sep 2022 09:45:02 GMT",
6
+ "tag": "@fluentui/react-toolbar_v9.0.0-beta.6",
7
+ "version": "9.0.0-beta.6",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-toolbar",
13
+ "commit": "a0cfab0e5f74e3a3bfa9c269fff574295042d7f2",
14
+ "comment": "chore: fix no-context-default-value lint violations"
15
+ },
16
+ {
17
+ "author": "olfedias@microsoft.com",
18
+ "package": "@fluentui/react-toolbar",
19
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
20
+ "comment": "chore: Update Griffel to latest version"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-toolbar",
25
+ "comment": "Bump @fluentui/react-button to v9.1.1",
26
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-toolbar",
31
+ "comment": "Bump @fluentui/react-divider to v9.0.5",
32
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-toolbar",
37
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
38
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-toolbar",
43
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
44
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-toolbar",
49
+ "comment": "Bump @fluentui/react-radio to v9.0.5",
50
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-toolbar",
55
+ "comment": "Bump @fluentui/react-tabster to v9.1.1",
56
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-toolbar",
61
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
62
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
63
+ }
64
+ ],
65
+ "none": [
66
+ {
67
+ "author": "chassunc@microsoft.com",
68
+ "package": "@fluentui/react-toolbar",
69
+ "commit": "bee2c5b4e2ced66d3897fe2ca7d255f17f5f865b",
70
+ "comment": "feat: add toolbar controlled state example for toggle buttons"
71
+ },
72
+ {
73
+ "author": "chassunc@microsoft.com",
74
+ "package": "@fluentui/react-toolbar",
75
+ "commit": "92a2649587483cef44c5ce186f05b0254e015e02",
76
+ "comment": "chore: add e2e tests for toolbar"
77
+ },
78
+ {
79
+ "author": "martinhochel@microsoft.com",
80
+ "package": "@fluentui/react-toolbar",
81
+ "commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
82
+ "comment": "chore: consume cypress.config from it's package boundary"
83
+ },
84
+ {
85
+ "author": "martinhochel@microsoft.com",
86
+ "package": "@fluentui/react-toolbar",
87
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
88
+ "comment": "chore: update package scaffold"
89
+ }
90
+ ]
91
+ }
92
+ },
93
+ {
94
+ "date": "Wed, 03 Aug 2022 16:04:08 GMT",
95
+ "tag": "@fluentui/react-toolbar_v9.0.0-beta.5",
96
+ "version": "9.0.0-beta.5",
97
+ "comments": {
98
+ "prerelease": [
99
+ {
100
+ "author": "miroslav.stastny@microsoft.com",
101
+ "package": "@fluentui/react-toolbar",
102
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
103
+ "comment": "chore: Bump Griffel dependencies"
104
+ },
105
+ {
106
+ "author": "beachball",
107
+ "package": "@fluentui/react-toolbar",
108
+ "comment": "Bump @fluentui/react-button to v9.1.0",
109
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
110
+ },
111
+ {
112
+ "author": "beachball",
113
+ "package": "@fluentui/react-toolbar",
114
+ "comment": "Bump @fluentui/react-divider to v9.0.4",
115
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
116
+ },
117
+ {
118
+ "author": "beachball",
119
+ "package": "@fluentui/react-toolbar",
120
+ "comment": "Bump @fluentui/react-radio to v9.0.4",
121
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
122
+ },
123
+ {
124
+ "author": "beachball",
125
+ "package": "@fluentui/react-toolbar",
126
+ "comment": "Bump @fluentui/react-tabster to v9.1.0",
127
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
128
+ },
129
+ {
130
+ "author": "beachball",
131
+ "package": "@fluentui/react-toolbar",
132
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
133
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
134
+ }
135
+ ],
136
+ "none": [
137
+ {
138
+ "author": "bernardo.sunderhus@gmail.com",
139
+ "package": "@fluentui/react-toolbar",
140
+ "commit": "d966ea3d9169f2e8d69f0d2a4daf86fe4ca328d6",
141
+ "comment": "disables eslint rule @fluentui/no-context-default-value for local component context"
142
+ },
143
+ {
144
+ "author": "popatudor@microsoft.com",
145
+ "package": "@fluentui/react-toolbar",
146
+ "commit": "2eb2198f78bbbbfecdd0eeb6a543ac52f11135ed",
147
+ "comment": "fix(docs): add description and unstable usage warning for Toolbar"
148
+ }
149
+ ]
150
+ }
151
+ },
152
+ {
153
+ "date": "Thu, 14 Jul 2022 21:21:06 GMT",
6
154
  "tag": "@fluentui/react-toolbar_v9.0.0-beta.4",
7
155
  "version": "9.0.0-beta.4",
8
156
  "comments": {
@@ -17,31 +165,31 @@
17
165
  "author": "beachball",
18
166
  "package": "@fluentui/react-toolbar",
19
167
  "comment": "Bump @fluentui/react-button to v9.0.3",
20
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
168
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
21
169
  },
22
170
  {
23
171
  "author": "beachball",
24
172
  "package": "@fluentui/react-toolbar",
25
173
  "comment": "Bump @fluentui/react-divider to v9.0.3",
26
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
174
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
27
175
  },
28
176
  {
29
177
  "author": "beachball",
30
178
  "package": "@fluentui/react-toolbar",
31
179
  "comment": "Bump @fluentui/react-utilities to v9.0.2",
32
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
180
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
33
181
  },
34
182
  {
35
183
  "author": "beachball",
36
184
  "package": "@fluentui/react-toolbar",
37
185
  "comment": "Bump @fluentui/react-radio to v9.0.3",
38
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
186
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
39
187
  },
40
188
  {
41
189
  "author": "beachball",
42
190
  "package": "@fluentui/react-toolbar",
43
191
  "comment": "Bump @fluentui/react-tabster to v9.0.3",
44
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
192
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
45
193
  }
46
194
  ]
47
195
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,53 @@
1
1
  # Change Log - @fluentui/react-toolbar
2
2
 
3
- This log was last generated on Thu, 14 Jul 2022 21:18:41 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 15 Sep 2022 09:45:02 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.6)
8
+
9
+ Thu, 15 Sep 2022 09:45:02 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.5..@fluentui/react-toolbar_v9.0.0-beta.6)
11
+
12
+ ### Changes
13
+
14
+ - chore: fix no-context-default-value lint violations ([PR #24276](https://github.com/microsoft/fluentui/pull/24276) by lingfangao@hotmail.com)
15
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
16
+ - Bump @fluentui/react-button to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
17
+ - Bump @fluentui/react-divider to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
18
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
19
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
20
+ - Bump @fluentui/react-radio to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
21
+ - Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
23
+
24
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.5)
25
+
26
+ Wed, 03 Aug 2022 16:04:08 GMT
27
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.4..@fluentui/react-toolbar_v9.0.0-beta.5)
28
+
29
+ ### Changes
30
+
31
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
32
+ - Bump @fluentui/react-button to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
33
+ - Bump @fluentui/react-divider to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
34
+ - Bump @fluentui/react-radio to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
35
+ - Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
36
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
37
+
7
38
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.4)
8
39
 
9
- Thu, 14 Jul 2022 21:18:41 GMT
40
+ Thu, 14 Jul 2022 21:21:06 GMT
10
41
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.3..@fluentui/react-toolbar_v9.0.0-beta.4)
11
42
 
12
43
  ### Changes
13
44
 
14
45
  - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
15
- - Bump @fluentui/react-button to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
16
- - Bump @fluentui/react-divider to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
17
- - Bump @fluentui/react-utilities to v9.0.2 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
18
- - Bump @fluentui/react-radio to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
19
- - Bump @fluentui/react-tabster to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
46
+ - Bump @fluentui/react-button to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
47
+ - Bump @fluentui/react-divider to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
48
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
49
+ - Bump @fluentui/react-radio to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
50
+ - Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
20
51
 
21
52
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.3)
22
53
 
package/dist/index.d.ts CHANGED
@@ -29,6 +29,8 @@ export declare type RadioGroupContextValues = {
29
29
  */
30
30
  export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSX.Element;
31
31
 
32
+ declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name?: string, value?: string, checked?: boolean) => void;
33
+
32
34
  /**
33
35
  * Toolbar component
34
36
  */
@@ -52,10 +54,19 @@ export declare type ToolbarButtonProps = ComponentProps<ButtonSlots> & Partial<P
52
54
  */
53
55
  export declare type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> & ButtonState;
54
56
 
57
+ declare type ToolbarCheckedValueChangeData = {
58
+ /** The items for this value that are checked */
59
+ checkedItems: string[];
60
+ /** The name of the value */
61
+ name: string;
62
+ };
63
+
64
+ declare type ToolbarCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
65
+
55
66
  export declare const toolbarClassNames: SlotClassNames<ToolbarSlots>;
56
67
 
57
- export declare type ToolbarContextValue = {
58
- size: ToolbarProps['size'];
68
+ export declare type ToolbarContextValue = Pick<ToolbarProps, 'size'> & {
69
+ handleToggleButton?: ToggableHandler;
59
70
  };
60
71
 
61
72
  export declare type ToolbarContextValues = {
@@ -87,6 +98,21 @@ export declare type ToolbarProps = ComponentProps<ToolbarSlots> & {
87
98
  * @default medium
88
99
  */
89
100
  size?: 'small' | 'medium';
101
+ /**
102
+ * Map of all checked values
103
+ */
104
+ checkedValues?: Record<string, string[]>;
105
+ /**
106
+ * Default values to be checked on mount
107
+ */
108
+ defaultCheckedValues?: Record<string, string[]>;
109
+ /**
110
+ * Callback when checked items change for value with a name
111
+ *
112
+ * @param event - React's original SyntheticEvent
113
+ * @param data - A data object with relevant information
114
+ */
115
+ onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
90
116
  };
91
117
 
92
118
  /**
@@ -131,7 +157,9 @@ export declare type ToolbarSlots = {
131
157
  /**
132
158
  * State used in rendering Toolbar
133
159
  */
134
- export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size'>>;
160
+ export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
161
+ handleToggleButton: ToggableHandler;
162
+ };
135
163
 
136
164
  /**
137
165
  * ToolbarToggleButton component
@@ -141,14 +169,17 @@ export declare const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButto
141
169
  /**
142
170
  * ToolbarToggleButton Props
143
171
  */
144
- export declare type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable'>> & {
172
+ export declare type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
145
173
  appearance?: 'primary' | 'subtle';
146
174
  };
147
175
 
148
176
  /**
149
177
  * State used in rendering ToolbarToggleButton
150
178
  */
151
- export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState;
179
+ export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & {
180
+ name?: string;
181
+ value?: string;
182
+ };
152
183
 
153
184
  /**
154
185
  * Create the state required to render Toolbar.
package/lib/components/Toolbar/Toolbar.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /**\n * Toolbar can have small or medium size\n *\n * @default medium\n */\n size?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size'>>;\n\nexport type ToolbarContextValue = {\n size: ToolbarProps['size'];\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n"]}
1
+ {"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /**\n * Toolbar can have small or medium size\n *\n * @default medium\n */\n size?: 'small' | 'medium';\n\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n Required<Pick<ToolbarProps, 'size' | 'checkedValues'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /*\n * Toggles the state of a ToggleButton item\n */\n handleToggleButton: ToggableHandler;\n };\n\nexport type ToolbarContextValue = Pick<ToolbarProps, 'size'> & {\n handleToggleButton?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton'> &\n Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name?: string,\n value?: string,\n checked?: boolean,\n) => void;\n"]}
package/lib/components/Toolbar/ToolbarContext.js CHANGED
@@ -1,6 +1,12 @@
1
1
  import * as React from 'react';
2
- export const ToolbarContext = /*#__PURE__*/React.createContext({
3
- size: 'medium'
4
- });
5
- export const useToolbarContext = () => React.useContext(ToolbarContext);
2
+ export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
3
+ const toolbarContextDefaultValue = {
4
+ size: 'medium',
5
+ handleToggleButton: () => null
6
+ };
7
+ export const useToolbarContext = () => {
8
+ var _a;
9
+
10
+ return (_a = React.useContext(ToolbarContext)) !== null && _a !== void 0 ? _a : toolbarContextDefaultValue;
11
+ };
6
12
  //# sourceMappingURL=ToolbarContext.js.map
package/lib/components/Toolbar/ToolbarContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/ToolbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAO,MAAM,cAAc,gBAAG,KAAK,CAAC,aAAN,CAAyC;EACrE,IAAI,EAAE;AAD+D,CAAzC,CAAvB;AAIP,OAAO,MAAM,iBAAiB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,cAAjB,CAAhC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = React.createContext<ToolbarContextValue>({\n size: 'medium',\n});\n\nexport const useToolbarContext = () => React.useContext(ToolbarContext);\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Toolbar/ToolbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAO,MAAM,cAAc,gBAAG,KAAK,CAAC,aAAN,CAC5B,SAD4B,CAAvB;AAIP,MAAM,0BAA0B,GAAG;EACjC,IAAI,EAAE,QAD2B;EAEjC,kBAAkB,EAAE,MAAM;AAFO,CAAnC;AAKA,OAAO,MAAM,iBAAiB,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,cAAjB,CAAA,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,EAAhC,GAAoC,0BAApC;AAA8D,CAA9F","sourcesContent":["import * as React from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = React.createContext<ToolbarContextValue | undefined>(\n undefined,\n) as React.Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n};\n\nexport const useToolbarContext = () => React.useContext(ToolbarContext) ?? toolbarContextDefaultValue;\n"],"sourceRoot":"../src/"}
package/lib/components/Toolbar/useToolbar.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { useEventCallback, useControllableState } from '@fluentui/react-utilities';
1
2
  import { getNativeElementProps } from '@fluentui/react-utilities';
2
3
  import { useArrowNavigationGroup } from '@fluentui/react-tabster';
3
4
  /**
@@ -11,14 +12,14 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
11
12
  */
12
13
 
13
14
  export const useToolbar_unstable = (props, ref) => {
15
+ const {
16
+ size = 'medium'
17
+ } = props;
14
18
  const arrowNavigationProps = useArrowNavigationGroup({
15
19
  circular: true,
16
20
  axis: 'horizontal'
17
21
  });
18
- const {
19
- size = 'medium'
20
- } = props;
21
- return {
22
+ const initialState = {
22
23
  size,
23
24
  // TODO add appropriate props/defaults
24
25
  components: {
@@ -28,11 +29,43 @@ export const useToolbar_unstable = (props, ref) => {
28
29
  // TODO add appropriate slots, for example:
29
30
  // mySlot: resolveShorthand(props.mySlot),
30
31
  root: getNativeElementProps('div', {
32
+ role: 'toolbar',
31
33
  ref,
32
34
  ...arrowNavigationProps,
33
35
  ...props
34
- }),
35
- ...props
36
+ })
37
+ };
38
+ const [checkedValues, setCheckedValues] = useControllableState({
39
+ state: initialState.checkedValues,
40
+ defaultState: initialState.defaultCheckedValues,
41
+ initialState: {}
42
+ });
43
+ const {
44
+ onCheckedValueChange
45
+ } = initialState;
46
+ const handleToggleButton = useEventCallback((e, name, value, checked) => {
47
+ if (name && value) {
48
+ const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
49
+ const newCheckedItems = [...checkedItems];
50
+
51
+ if (checked) {
52
+ newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
53
+ } else {
54
+ newCheckedItems.push(value);
55
+ }
56
+
57
+ onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
58
+ name,
59
+ checkedItems: newCheckedItems
60
+ });
61
+ setCheckedValues(s => ({ ...s,
62
+ [name]: newCheckedItems
63
+ }));
64
+ }
65
+ });
66
+ return { ...initialState,
67
+ handleToggleButton,
68
+ checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
36
69
  };
37
70
  };
38
71
  //# sourceMappingURL=useToolbar.js.map
package/lib/components/Toolbar/useToolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAD,CAApD;EAKA,MAAM;IAAE,IAAI,GAAG;EAAT,IAAsB,KAA5B;EAEA,OAAO;IACL,IADK;IAGL;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJP;IAQL;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG,oBAF8B;MAGjC,GAAG;IAH8B,CAAR,CAVtB;IAeL,GAAG;EAfE,CAAP;AAiBD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToolbarProps, ToolbarState } 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 arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'horizontal',\n });\n\n const { size = 'medium' } = props;\n\n return {\n size,\n\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: getNativeElementProps('div', {\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n ...props,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,EAA2B,oBAA3B,QAAuD,2BAAvD;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG;EAAT,IAAsB,KAA5B;EAEA,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAD,CAApD;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAAR;EAVmB,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,CAAC;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAAD,CAA9D;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,gBAAgB,CAC1D,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyD,CAA5D;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } 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' } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'horizontal',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n\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: getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n };\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n checkedValues: checkedValues ?? {},\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Toolbar/useToolbarContextValues.js CHANGED
@@ -1,10 +1,12 @@
1
1
  export function useToolbarContextValues_unstable(state) {
2
2
  const {
3
- size
3
+ size,
4
+ handleToggleButton
4
5
  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
5
6
 
6
7
  const toolbar = {
7
- size
8
+ size,
9
+ handleToggleButton
8
10
  };
9
11
  return {
10
12
  toolbar
package/lib/components/Toolbar/useToolbarContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,gCAAV,CAA2C,KAA3C,EAA8D;EAClE,MAAM;IAAE;EAAF,IAAW,KAAjB,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC;EADmC,CAArC;EAIA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,gCAAV,CAA2C,KAA3C,EAA8D;EAClE,MAAM;IAAE,IAAF;IAAQ;EAAR,IAA+B,KAArC,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC;EAFmC,CAArC;EAKA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n handleToggleButton,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js CHANGED
@@ -1,18 +1,12 @@
1
1
  import * as React from 'react';
2
- import { renderToggleButton_unstable, useToggleButtonStyles_unstable, useToggleButton_unstable } from '@fluentui/react-button';
3
- import { useToolbarContext } from '../Toolbar/ToolbarContext';
2
+ import { renderToggleButton_unstable, useToggleButtonStyles_unstable } from '@fluentui/react-button';
3
+ import { useToolbarToggleButton_unstable } from './useToolbarToggleButton';
4
4
  /**
5
5
  * ToolbarToggleButton component
6
6
  */
7
7
 
8
8
  export const ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
9
- const {
10
- size
11
- } = useToolbarContext();
12
- const state = useToggleButton_unstable({
13
- size,
14
- ...props
15
- }, ref);
9
+ const state = useToolbarToggleButton_unstable(props, ref);
16
10
  useToggleButtonStyles_unstable(state);
17
11
  return renderToggleButton_unstable(state);
18
12
  });
package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SACE,2BADF,EAEE,8BAFF,EAGE,wBAHF,QAIO,wBAJP;AAKA,SAAS,iBAAT,QAAkC,2BAAlC;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM;IAAE;EAAF,IAAW,iBAAiB,EAAlC;EAEA,MAAM,KAAK,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAD,EAAqB,GAArB,CAAtC;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CAPiF,CAA3E;AASP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n renderToggleButton_unstable,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from '@fluentui/react-button';\nimport { useToolbarContext } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const { size } = useToolbarContext();\n\n const state = useToggleButton_unstable({ size, ...props }, ref);\n\n useToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,EAAsC,8BAAtC,QAA4E,wBAA5E;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable, useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable'>> & {\n appearance?: 'primary' | 'subtle';\n };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState;\n"]}
1
+ {"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle';\n };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> & {\n name?: string;\n value?: string;\n };\n"]}
package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js ADDED
@@ -0,0 +1,37 @@
1
+ import { useToggleButton_unstable } from '@fluentui/react-button';
2
+ import { useToolbarContext } from '../Toolbar/ToolbarContext';
3
+ /**
4
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
5
+ * processed state.
6
+ * @param props - User provided props to the ToggleButton component.
7
+ * @param ref - User provided ref to be passed to the ToggleButton component.
8
+ */
9
+
10
+ export const useToolbarToggleButton_unstable = (props, ref) => {
11
+ const {
12
+ handleToggleButton,
13
+ size
14
+ } = useToolbarContext();
15
+ const {
16
+ onClick: onClickOriginal
17
+ } = props;
18
+ const state = useToggleButton_unstable({
19
+ size,
20
+ ...props
21
+ }, ref);
22
+
23
+ const handleOnClick = e => {
24
+ if (state.disabled) {
25
+ e.preventDefault();
26
+ e.stopPropagation();
27
+ return;
28
+ }
29
+
30
+ handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
31
+ onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
32
+ };
33
+
34
+ state.root.onClick = handleOnClick;
35
+ return state;
36
+ };
37
+ //# sourceMappingURL=useToolbarToggleButton.js.map
package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,iBAAT,QAAkC,2BAAlC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM;IAAE,kBAAF;IAAsB;EAAtB,IAA+B,iBAAiB,EAAtD;EACA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,KAAK,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAD,EAAqB,GAArB,CAAtC;;EAEA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAvBM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext } 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, size } = useToolbarContext();\n const { onClick: onClickOriginal } = props;\n const state = useToggleButton_unstable({ size, ...props }, ref) as ToolbarToggleButtonState;\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"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Toolbar/ToolbarContext.js CHANGED
@@ -7,11 +7,17 @@ exports.useToolbarContext = exports.ToolbarContext = void 0;
7
7
 
8
8
  const React = /*#__PURE__*/require("react");
9
9
 
10
- exports.ToolbarContext = /*#__PURE__*/React.createContext({
11
- size: 'medium'
12
- });
10
+ exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
11
+ const toolbarContextDefaultValue = {
12
+ size: 'medium',
13
+ handleToggleButton: () => null
14
+ };
15
+
16
+ const useToolbarContext = () => {
17
+ var _a;
13
18
 
14
- const useToolbarContext = () => React.useContext(exports.ToolbarContext);
19
+ return (_a = React.useContext(exports.ToolbarContext)) !== null && _a !== void 0 ? _a : toolbarContextDefaultValue;
20
+ };
15
21
 
16
22
  exports.useToolbarContext = useToolbarContext;
17
23
  //# sourceMappingURL=ToolbarContext.js.map
package/lib-commonjs/components/Toolbar/ToolbarContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/ToolbarContext.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,aAAN,CAAyC;EACrE,IAAI,EAAE;AAD+D,CAAzC,CAAjB;;AAIN,MAAM,iBAAiB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,OAAA,CAAA,cAAjB,CAAhC;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = React.createContext<ToolbarContextValue>({\n size: 'medium',\n});\n\nexport const useToolbarContext = () => React.useContext(ToolbarContext);\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Toolbar/ToolbarContext.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,aAAN,CAC5B,SAD4B,CAAjB;AAIb,MAAM,0BAA0B,GAAG;EACjC,IAAI,EAAE,QAD2B;EAEjC,kBAAkB,EAAE,MAAM;AAFO,CAAnC;;AAKO,MAAM,iBAAiB,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,OAAA,CAAA,cAAjB,CAAA,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,EAAhC,GAAoC,0BAApC;AAA8D,CAA9F;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = React.createContext<ToolbarContextValue | undefined>(\n undefined,\n) as React.Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n};\n\nexport const useToolbarContext = () => React.useContext(ToolbarContext) ?? toolbarContextDefaultValue;\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Toolbar/useToolbar.js CHANGED
@@ -7,6 +7,8 @@ exports.useToolbar_unstable = void 0;
7
7
 
8
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
 
10
+ const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
11
+
10
12
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
13
  /**
12
14
  * Create the state required to render Toolbar.
@@ -20,14 +22,14 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
20
22
 
21
23
 
22
24
  const useToolbar_unstable = (props, ref) => {
25
+ const {
26
+ size = 'medium'
27
+ } = props;
23
28
  const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
24
29
  circular: true,
25
30
  axis: 'horizontal'
26
31
  });
27
- const {
28
- size = 'medium'
29
- } = props;
30
- return {
32
+ const initialState = {
31
33
  size,
32
34
  // TODO add appropriate props/defaults
33
35
  components: {
@@ -36,12 +38,44 @@ const useToolbar_unstable = (props, ref) => {
36
38
  },
37
39
  // TODO add appropriate slots, for example:
38
40
  // mySlot: resolveShorthand(props.mySlot),
39
- root: react_utilities_1.getNativeElementProps('div', {
41
+ root: react_utilities_2.getNativeElementProps('div', {
42
+ role: 'toolbar',
40
43
  ref,
41
44
  ...arrowNavigationProps,
42
45
  ...props
43
- }),
44
- ...props
46
+ })
47
+ };
48
+ const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
49
+ state: initialState.checkedValues,
50
+ defaultState: initialState.defaultCheckedValues,
51
+ initialState: {}
52
+ });
53
+ const {
54
+ onCheckedValueChange
55
+ } = initialState;
56
+ const handleToggleButton = react_utilities_1.useEventCallback((e, name, value, checked) => {
57
+ if (name && value) {
58
+ const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
59
+ const newCheckedItems = [...checkedItems];
60
+
61
+ if (checked) {
62
+ newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
63
+ } else {
64
+ newCheckedItems.push(value);
65
+ }
66
+
67
+ onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
68
+ name,
69
+ checkedItems: newCheckedItems
70
+ });
71
+ setCheckedValues(s => ({ ...s,
72
+ [name]: newCheckedItems
73
+ }));
74
+ }
75
+ });
76
+ return { ...initialState,
77
+ handleToggleButton,
78
+ checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
45
79
  };
46
80
  };
47
81
 
package/lib-commonjs/components/Toolbar/useToolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM;IAAE,IAAI,GAAG;EAAT,IAAsB,KAA5B;EAEA,OAAO;IACL,IADK;IAGL;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJP;IAQL;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG,oBAF8B;MAGjC,GAAG;IAH8B,CAA7B,CAVD;IAeL,GAAG;EAfE,CAAP;AAiBD,CAzBM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToolbarProps, ToolbarState } 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 arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'horizontal',\n });\n\n const { size = 'medium' } = props;\n\n return {\n size,\n\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: getNativeElementProps('div', {\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n ...props,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG;EAAT,IAAsB,KAA5B;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyC,CAA5C;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } 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' } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'horizontal',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n\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: getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n };\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n checkedValues: checkedValues ?? {},\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Toolbar/useToolbarContextValues.js CHANGED
@@ -7,11 +7,13 @@ exports.useToolbarContextValues_unstable = void 0;
7
7
 
8
8
  function useToolbarContextValues_unstable(state) {
9
9
  const {
10
- size
10
+ size,
11
+ handleToggleButton
11
12
  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
12
13
 
13
14
  const toolbar = {
14
- size
15
+ size,
16
+ handleToggleButton
15
17
  };
16
18
  return {
17
19
  toolbar
package/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE;EAAF,IAAW,KAAjB,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC;EADmC,CAArC;EAIA,OAAO;IAAE;EAAF,CAAP;AACD;;AARD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ;EAAR,IAA+B,KAArC,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC;EAFmC,CAArC;EAKA,OAAO;IAAE;EAAF,CAAP;AACD;;AATD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n handleToggleButton,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.js CHANGED
@@ -9,20 +9,14 @@ const React = /*#__PURE__*/require("react");
9
9
 
10
10
  const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
11
11
 
12
- const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
12
+ const useToolbarToggleButton_1 = /*#__PURE__*/require("./useToolbarToggleButton");
13
13
  /**
14
14
  * ToolbarToggleButton component
15
15
  */
16
16
 
17
17
 
18
18
  exports.ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
19
- const {
20
- size
21
- } = ToolbarContext_1.useToolbarContext();
22
- const state = react_button_1.useToggleButton_unstable({
23
- size,
24
- ...props
25
- }, ref);
19
+ const state = useToolbarToggleButton_1.useToolbarToggleButton_unstable(props, ref);
26
20
  react_button_1.useToggleButtonStyles_unstable(state);
27
21
  return react_button_1.renderToggleButton_unstable(state);
28
22
  });
package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAKA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM;IAAE;EAAF,IAAW,gBAAA,CAAA,iBAAA,EAAjB;EAEA,MAAM,KAAK,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAzB,EAA6C,GAA7C,CAAd;EAEA,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAPiF,CAArE;AASb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n renderToggleButton_unstable,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from '@fluentui/react-button';\nimport { useToolbarContext } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const { size } = useToolbarContext();\n\n const state = useToggleButton_unstable({ size, ...props }, ref);\n\n useToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable, useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js ADDED
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useToolbarToggleButton_unstable = void 0;
7
+
8
+ const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
9
+
10
+ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
11
+ /**
12
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
13
+ * processed state.
14
+ * @param props - User provided props to the ToggleButton component.
15
+ * @param ref - User provided ref to be passed to the ToggleButton component.
16
+ */
17
+
18
+
19
+ const useToolbarToggleButton_unstable = (props, ref) => {
20
+ const {
21
+ handleToggleButton,
22
+ size
23
+ } = ToolbarContext_1.useToolbarContext();
24
+ const {
25
+ onClick: onClickOriginal
26
+ } = props;
27
+ const state = react_button_1.useToggleButton_unstable({
28
+ size,
29
+ ...props
30
+ }, ref);
31
+
32
+ const handleOnClick = e => {
33
+ if (state.disabled) {
34
+ e.preventDefault();
35
+ e.stopPropagation();
36
+ return;
37
+ }
38
+
39
+ handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
40
+ onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
41
+ };
42
+
43
+ state.root.onClick = handleOnClick;
44
+ return state;
45
+ };
46
+
47
+ exports.useToolbarToggleButton_unstable = useToolbarToggleButton_unstable;
48
+ //# sourceMappingURL=useToolbarToggleButton.js.map
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM;IAAE,kBAAF;IAAsB;EAAtB,IAA+B,gBAAA,CAAA,iBAAA,EAArC;EACA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAzB,EAA6C,GAA7C,CAAd;;EAEA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAvBM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext } 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, size } = useToolbarContext();\n const { onClick: onClickOriginal } = props;\n const state = useToggleButton_unstable({ size, ...props }, ref) as ToolbarToggleButtonState;\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"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-toolbar",
3
- "version": "9.0.0-beta.4",
3
+ "version": "9.0.0-beta.6",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -15,29 +15,31 @@
15
15
  "build": "just-scripts build",
16
16
  "clean": "just-scripts clean",
17
17
  "code-style": "just-scripts code-style",
18
+ "e2e": "yarn cypress run --component",
19
+ "e2e:local": "yarn cypress open --component",
18
20
  "just": "just-scripts",
19
21
  "lint": "just-scripts lint",
20
22
  "start": "yarn storybook",
21
23
  "test": "jest --passWithNoTests",
22
24
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-toolbar/src && yarn docs",
24
- "storybook": "node ../../../scripts/storybook/runner",
25
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-toolbar/src && yarn docs",
26
+ "storybook": "start-storybook",
25
27
  "type-check": "tsc -b tsconfig.json"
26
28
  },
27
29
  "devDependencies": {
28
30
  "@fluentui/eslint-plugin": "*",
29
31
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
32
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.13",
31
33
  "@fluentui/scripts": "^1.0.0"
32
34
  },
33
35
  "dependencies": {
34
- "@fluentui/react-button": "^9.0.3",
35
- "@fluentui/react-divider": "^9.0.3",
36
- "@fluentui/react-theme": "^9.0.0",
37
- "@fluentui/react-utilities": "^9.0.2",
38
- "@fluentui/react-radio": "^9.0.3",
39
- "@fluentui/react-tabster": "^9.0.3",
40
- "@griffel/react": "^1.2.0",
36
+ "@fluentui/react-button": "^9.1.1",
37
+ "@fluentui/react-divider": "^9.0.5",
38
+ "@fluentui/react-theme": "^9.1.0",
39
+ "@fluentui/react-utilities": "^9.1.0",
40
+ "@fluentui/react-radio": "^9.0.5",
41
+ "@fluentui/react-tabster": "^9.1.1",
42
+ "@griffel/react": "^1.3.0",
41
43
  "tslib": "^2.1.0"
42
44
  },
43
45
  "peerDependencies": {
package/dist/tsdoc-metadata.json DELETED
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }