@fluentui/react-button 9.0.0-rc.1 → 9.0.0-rc.5

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 (120) hide show
  1. package/CHANGELOG.json +154 -1
  2. package/CHANGELOG.md +47 -2
  3. package/dist/react-button.d.ts +16 -5
  4. package/lib/Button.js.map +1 -1
  5. package/lib/CompoundButton.js.map +1 -1
  6. package/lib/MenuButton.js.map +1 -1
  7. package/lib/SplitButton.js.map +1 -1
  8. package/lib/ToggleButton.js.map +1 -1
  9. package/lib/components/Button/Button.js.map +1 -1
  10. package/lib/components/Button/Button.types.js.map +1 -1
  11. package/lib/components/Button/index.d.ts +1 -1
  12. package/lib/components/Button/index.js +1 -1
  13. package/lib/components/Button/index.js.map +1 -1
  14. package/lib/components/Button/renderButton.js.map +1 -1
  15. package/lib/components/Button/useButton.js.map +1 -1
  16. package/lib/components/Button/useButtonStyles.d.ts +4 -2
  17. package/lib/components/Button/useButtonStyles.js +8 -3
  18. package/lib/components/Button/useButtonStyles.js.map +1 -1
  19. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  20. package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
  21. package/lib/components/CompoundButton/index.d.ts +1 -1
  22. package/lib/components/CompoundButton/index.js +1 -1
  23. package/lib/components/CompoundButton/index.js.map +1 -1
  24. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  25. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  26. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +4 -2
  27. package/lib/components/CompoundButton/useCompoundButtonStyles.js +30 -27
  28. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  29. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  30. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  31. package/lib/components/MenuButton/index.d.ts +1 -1
  32. package/lib/components/MenuButton/index.js +1 -1
  33. package/lib/components/MenuButton/index.js.map +1 -1
  34. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  35. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  36. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +4 -2
  37. package/lib/components/MenuButton/useMenuButtonStyles.js +12 -2
  38. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  39. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  40. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  41. package/lib/components/SplitButton/index.d.ts +1 -1
  42. package/lib/components/SplitButton/index.js +1 -1
  43. package/lib/components/SplitButton/index.js.map +1 -1
  44. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  45. package/lib/components/SplitButton/useSplitButton.js +16 -4
  46. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  47. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +4 -2
  48. package/lib/components/SplitButton/useSplitButtonStyles.js +30 -28
  49. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  50. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  51. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  52. package/lib/components/ToggleButton/index.d.ts +1 -1
  53. package/lib/components/ToggleButton/index.js +1 -1
  54. package/lib/components/ToggleButton/index.js.map +1 -1
  55. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  56. package/lib/components/ToggleButton/useToggleButton.js +6 -6
  57. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  58. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +4 -1
  59. package/lib/components/ToggleButton/useToggleButtonStyles.js +12 -2
  60. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  61. package/lib/index.js.map +1 -1
  62. package/lib-commonjs/Button.js.map +1 -1
  63. package/lib-commonjs/CompoundButton.js.map +1 -1
  64. package/lib-commonjs/MenuButton.js.map +1 -1
  65. package/lib-commonjs/SplitButton.js.map +1 -1
  66. package/lib-commonjs/ToggleButton.js.map +1 -1
  67. package/lib-commonjs/components/Button/Button.js.map +1 -1
  68. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  69. package/lib-commonjs/components/Button/index.d.ts +1 -1
  70. package/lib-commonjs/components/Button/index.js +7 -1
  71. package/lib-commonjs/components/Button/index.js.map +1 -1
  72. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  73. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  74. package/lib-commonjs/components/Button/useButtonStyles.d.ts +4 -2
  75. package/lib-commonjs/components/Button/useButtonStyles.js +9 -4
  76. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  77. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  78. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  79. package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
  80. package/lib-commonjs/components/CompoundButton/index.js +7 -1
  81. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  82. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  83. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  84. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +4 -2
  85. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +31 -28
  86. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  87. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  88. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  89. package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
  90. package/lib-commonjs/components/MenuButton/index.js +7 -1
  91. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  92. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  93. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  94. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +4 -2
  95. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +13 -3
  96. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  97. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  98. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  99. package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
  100. package/lib-commonjs/components/SplitButton/index.js +7 -1
  101. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  102. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  103. package/lib-commonjs/components/SplitButton/useSplitButton.js +15 -3
  104. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  105. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +4 -2
  106. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +31 -29
  107. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  108. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  109. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  110. package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
  111. package/lib-commonjs/components/ToggleButton/index.js +7 -1
  112. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  113. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  114. package/lib-commonjs/components/ToggleButton/useToggleButton.js +6 -6
  115. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  116. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +4 -1
  117. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +13 -3
  118. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  119. package/lib-commonjs/index.js.map +1 -1
  120. package/package.json +14 -6
package/CHANGELOG.json CHANGED
@@ -2,7 +2,160 @@
2
2
  "name": "@fluentui/react-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 10 Feb 2022 08:44:59 GMT",
5
+ "date": "Fri, 04 Mar 2022 05:15:48 GMT",
6
+ "tag": "@fluentui/react-button_v9.0.0-rc.5",
7
+ "version": "9.0.0-rc.5",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "dzearing@microsoft.com",
12
+ "package": "@fluentui/react-button",
13
+ "commit": "f2f1c0ea948cc3517eeb442c05433eb0918def29",
14
+ "comment": "Adding explicit export maps on all consumer packages for FUIR 8 and 9."
15
+ },
16
+ {
17
+ "author": "Humberto.Morimoto@microsoft.com",
18
+ "package": "@fluentui/react-button",
19
+ "commit": "e951d80afa1d6220e76d7a6c23d75ae417be2b9c",
20
+ "comment": "Button: Exporting classNames of individual slots."
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-button",
25
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.0-rc.4",
26
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-button",
31
+ "comment": "Bump @fluentui/react-aria to v9.0.0-rc.5",
32
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-button",
37
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.5",
38
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-button",
43
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
44
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-button",
49
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
50
+ "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Tue, 01 Mar 2022 02:17:35 GMT",
57
+ "tag": "@fluentui/react-button_v9.0.0-rc.4",
58
+ "version": "9.0.0-rc.4",
59
+ "comments": {
60
+ "prerelease": [
61
+ {
62
+ "author": "olfedias@microsoft.com",
63
+ "package": "@fluentui/react-button",
64
+ "commit": "084d7408855f3e52b67cbca172da1acef9dcb98f",
65
+ "comment": "fix: Add react-theme as dependency"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-button",
70
+ "comment": "Bump @fluentui/react-aria to v9.0.0-rc.4",
71
+ "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-button",
76
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.4",
77
+ "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
78
+ },
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui/react-button",
82
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
83
+ "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
84
+ }
85
+ ]
86
+ }
87
+ },
88
+ {
89
+ "date": "Fri, 18 Feb 2022 13:35:28 GMT",
90
+ "tag": "@fluentui/react-button_v9.0.0-rc.3",
91
+ "version": "9.0.0-rc.3",
92
+ "comments": {
93
+ "prerelease": [
94
+ {
95
+ "author": "Humberto.Morimoto@microsoft.com",
96
+ "package": "@fluentui/react-button",
97
+ "commit": "0b7d30b6ecb6f20d2ac4d4edbfb327a8f8f915a0",
98
+ "comment": "SplitButton: Fixing issue where menuIcon prop was not being respected."
99
+ },
100
+ {
101
+ "author": "Humberto.Morimoto@microsoft.com",
102
+ "package": "@fluentui/react-button",
103
+ "commit": "d45ba4664643f36cce5674b1d05645feae0e09a5",
104
+ "comment": "Button: Updating stories to fix a11y issues."
105
+ },
106
+ {
107
+ "author": "Humberto.Morimoto@microsoft.com",
108
+ "package": "@fluentui/react-button",
109
+ "commit": "ca590a438b12b85d32fdf8b592ada3b0e7b2314c",
110
+ "comment": "SplitButton: Fixing screen reader access issues."
111
+ },
112
+ {
113
+ "author": "lingfangao@hotmail.com",
114
+ "package": "@fluentui/react-button",
115
+ "commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
116
+ "comment": "fix: Source maps contain original source code"
117
+ },
118
+ {
119
+ "author": "Humberto.Morimoto@microsoft.com",
120
+ "package": "@fluentui/react-button",
121
+ "commit": "c7718355f464d9d3e7ec4c0ef0f39dac3d196014",
122
+ "comment": "Button: Adding tests and fixing issues in SplitButton and ToggleButton."
123
+ },
124
+ {
125
+ "author": "beachball",
126
+ "package": "@fluentui/react-button",
127
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.0-rc.3",
128
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
129
+ },
130
+ {
131
+ "author": "beachball",
132
+ "package": "@fluentui/react-button",
133
+ "comment": "Bump @fluentui/react-aria to v9.0.0-rc.3",
134
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
135
+ },
136
+ {
137
+ "author": "beachball",
138
+ "package": "@fluentui/react-button",
139
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.3",
140
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
141
+ },
142
+ {
143
+ "author": "beachball",
144
+ "package": "@fluentui/react-button",
145
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
146
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
147
+ },
148
+ {
149
+ "author": "beachball",
150
+ "package": "@fluentui/react-button",
151
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3",
152
+ "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
153
+ }
154
+ ]
155
+ }
156
+ },
157
+ {
158
+ "date": "Thu, 10 Feb 2022 08:51:46 GMT",
6
159
  "tag": "@fluentui/react-button_v9.0.0-rc.1",
7
160
  "version": "9.0.0-rc.1",
8
161
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,57 @@
1
1
  # Change Log - @fluentui/react-button
2
2
 
3
- This log was last generated on Thu, 10 Feb 2022 08:44:59 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 04 Mar 2022 05:15:48 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.5)
8
+
9
+ Fri, 04 Mar 2022 05:15:48 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.4..@fluentui/react-button_v9.0.0-rc.5)
11
+
12
+ ### Changes
13
+
14
+ - Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
15
+ - Button: Exporting classNames of individual slots. ([PR #20977](https://github.com/microsoft/fluentui/pull/20977) by Humberto.Morimoto@microsoft.com)
16
+ - Bump @fluentui/keyboard-keys to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
17
+ - Bump @fluentui/react-aria to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
19
+ - Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
20
+ - Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
21
+
22
+ ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.4)
23
+
24
+ Tue, 01 Mar 2022 02:17:35 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.3..@fluentui/react-button_v9.0.0-rc.4)
26
+
27
+ ### Changes
28
+
29
+ - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
30
+ - Bump @fluentui/react-aria to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
31
+ - Bump @fluentui/react-tabster to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
32
+ - Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
33
+
34
+ ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.3)
35
+
36
+ Fri, 18 Feb 2022 13:35:28 GMT
37
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.1..@fluentui/react-button_v9.0.0-rc.3)
38
+
39
+ ### Changes
40
+
41
+ - SplitButton: Fixing issue where menuIcon prop was not being respected. ([PR #21683](https://github.com/microsoft/fluentui/pull/21683) by Humberto.Morimoto@microsoft.com)
42
+ - Button: Updating stories to fix a11y issues. ([PR #21679](https://github.com/microsoft/fluentui/pull/21679) by Humberto.Morimoto@microsoft.com)
43
+ - SplitButton: Fixing screen reader access issues. ([PR #21703](https://github.com/microsoft/fluentui/pull/21703) by Humberto.Morimoto@microsoft.com)
44
+ - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
45
+ - Button: Adding tests and fixing issues in SplitButton and ToggleButton. ([PR #21719](https://github.com/microsoft/fluentui/pull/21719) by Humberto.Morimoto@microsoft.com)
46
+ - Bump @fluentui/keyboard-keys to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
47
+ - Bump @fluentui/react-aria to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
48
+ - Bump @fluentui/react-tabster to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
49
+ - Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
50
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
51
+
7
52
  ## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.1)
8
53
 
9
- Thu, 10 Feb 2022 08:44:59 GMT
54
+ Thu, 10 Feb 2022 08:51:46 GMT
10
55
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-beta.5..@fluentui/react-button_v9.0.0-rc.1)
11
56
 
12
57
  ### Changes
@@ -4,13 +4,16 @@ import type { ComponentState } from '@fluentui/react-utilities';
4
4
  import { ForwardRefComponent } from '@fluentui/react-utilities';
5
5
  import * as React_2 from 'react';
6
6
  import type { Slot } from '@fluentui/react-utilities';
7
+ import type { SlotClassNames } from '@fluentui/react-utilities';
7
8
 
8
9
  /**
9
10
  * Buttons give people a way to trigger an action.
10
11
  */
11
12
  export declare const Button: ForwardRefComponent<ButtonProps>;
12
13
 
13
- export declare const buttonClassName = "fui-Button";
14
+ export declare const buttonClassName: string;
15
+
16
+ export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
14
17
 
15
18
  declare type ButtonCommons = {
16
19
  /**
@@ -81,7 +84,9 @@ export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons &
81
84
  */
82
85
  export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
83
86
 
84
- export declare const compoundButtonClassName = "fui-CompoundButton";
87
+ export declare const compoundButtonClassName: string;
88
+
89
+ export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
85
90
 
86
91
  export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;
87
92
 
@@ -103,7 +108,9 @@ export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> &
103
108
  */
104
109
  export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
105
110
 
106
- export declare const menuButtonClassName = "fui-MenuButton";
111
+ export declare const menuButtonClassName: string;
112
+
113
+ export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
107
114
 
108
115
  export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
109
116
 
@@ -144,7 +151,9 @@ export declare const renderSplitButton_unstable: (state: SplitButtonState) => JS
144
151
  */
145
152
  export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
146
153
 
147
- export declare const splitButtonClassName = "fui-SplitButton";
154
+ export declare const splitButtonClassName: string;
155
+
156
+ export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
148
157
 
149
158
  export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
150
159
 
@@ -170,7 +179,9 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
170
179
  */
171
180
  export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
172
181
 
173
- export declare const toggleButtonClassName = "fui-ToggleButton";
182
+ export declare const toggleButtonClassName: string;
183
+
184
+ export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
174
185
 
175
186
  declare type ToggleButtonCommons = {
176
187
  /**
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"../src/","sources":["Button.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Button/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"CompoundButton.js","sourceRoot":"","sources":["../src/CompoundButton.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
1
+ {"version":3,"file":"CompoundButton.js","sourceRoot":"../src/","sources":["CompoundButton.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/CompoundButton/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../src/MenuButton.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
1
+ {"version":3,"file":"MenuButton.js","sourceRoot":"../src/","sources":["MenuButton.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/MenuButton/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../src/SplitButton.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}
1
+ {"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["SplitButton.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SplitButton/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../src/ToggleButton.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC"}
1
+ {"version":3,"file":"ToggleButton.js","sourceRoot":"../src/","sources":["ToggleButton.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/ToggleButton/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B,CALsF,CAMtF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}
1
+ {"version":3,"sources":["components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B,CALsF,CAMtF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n const state = useButton_unstable(props, ref);\n\n useButtonStyles_unstable(state);\n\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /**\n * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n */\n root: Slot<ARIAButtonSlotProps>;\n\n /**\n * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n */\n icon?: Slot<'span'>;\n};\n\nexport type ButtonCommons = {\n /**\n * A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n */\n appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';\n\n /**\n * A button can fill the width of its container.\n * @default false\n */\n block: boolean;\n\n /**\n * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n * @default false\n */\n disabledFocusable: boolean;\n\n /**\n * A button can show that it cannot be interacted with.\n * @default false\n */\n disabled: boolean;\n\n /**\n * A button can format its icon to appear before or after its content.\n * @default 'before'\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A button can be rounded, circular, or square.\n * @default 'rounded'\n */\n shape: 'rounded' | 'circular' | 'square';\n\n /**\n * A button supports different sizes.\n * @default 'medium'\n */\n size: 'small' | 'medium' | 'large';\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n ButtonCommons & {\n /**\n * A button can contain only an icon.\n * @default false\n */\n iconOnly: boolean;\n };\n"]}
@@ -2,4 +2,4 @@ export * from './Button';
2
2
  export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
3
3
  export * from './renderButton';
4
4
  export * from './useButton';
5
- export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
5
+ export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
@@ -1,5 +1,5 @@
1
1
  export * from './Button';
2
2
  export * from './renderButton';
3
3
  export * from './useButton';
4
- export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
4
+ export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
5
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n const { slots, slotProps } = getSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,KAAK,GAAG,SARJ;AASJ,IAAA,IAAI,GAAG;AATH,MAUF,KAVJ;AAWA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,KAAK,GAAG,SARJ;AASJ,IAAA,IAAI,GAAG;AATH,MAUF,KAVJ;AAWA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const {\n appearance,\n as,\n block = false,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as || 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1,3 +1,5 @@
1
- import type { ButtonState } from './Button.types';
2
- export declare const buttonClassName = "fui-Button";
1
+ import type { SlotClassNames } from '@fluentui/react-utilities';
2
+ import type { ButtonSlots, ButtonState } from './Button.types';
3
+ export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
4
+ export declare const buttonClassName: string;
3
5
  export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
@@ -1,7 +1,12 @@
1
1
  import { shorthands, __styles, mergeClasses } from '@griffel/react';
2
2
  import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
3
  import { tokens } from '@fluentui/react-theme';
4
- export const buttonClassName = 'fui-Button';
4
+ export const buttonClassNames = {
5
+ root: 'fui-Button',
6
+ icon: 'fui-Button__icon'
7
+ }; // TODO temporary export to pass conformance test.
8
+
9
+ export const buttonClassName = buttonClassNames.root;
5
10
 
6
11
  const useRootStyles = /*#__PURE__*/__styles({
7
12
  "base": {
@@ -402,7 +407,7 @@ export const useButtonStyles_unstable = state => {
402
407
  shape,
403
408
  size
404
409
  } = state;
405
- state.root.className = mergeClasses(buttonClassName, // Root styles
410
+ state.root.className = mergeClasses(buttonClassNames.root, // Root styles
406
411
  rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
407
412
  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
408
413
  rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
@@ -410,7 +415,7 @@ export const useButtonStyles_unstable = state => {
410
415
  state.root.className);
411
416
 
412
417
  if (state.icon) {
413
- state.icon.className = mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
418
+ state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
414
419
  }
415
420
 
416
421
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
1
+ {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\n// TODO temporary export to pass conformance test.\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, block, disabled, disabledFocusable, iconOnly, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,SAAO,6BAA6B,CAAC,KAAD,CAApC,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}
1
+ {"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,SAAO,6BAA6B,CAAC,KAAD,CAApC,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"CompoundButton.types.js","sourceRoot":"","sources":["../../../src/components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /**\n * Second line of text that describes the action this button takes.\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"]}
@@ -2,4 +2,4 @@ export * from './CompoundButton';
2
2
  export * from './CompoundButton.types';
3
3
  export * from './renderCompoundButton';
4
4
  export * from './useCompoundButton';
5
- export { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
5
+ export { compoundButtonClassName, compoundButtonClassNames, useCompoundButtonStyles_unstable, } from './useCompoundButtonStyles';
@@ -2,5 +2,5 @@ export * from './CompoundButton';
2
2
  export * from './CompoundButton.types';
3
3
  export * from './renderCompoundButton';
4
4
  export * from './useCompoundButton';
5
- export { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
5
+ export { compoundButtonClassName, compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"sources":["components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAd;AACA,cAAc,wBAAd;AACA,cAAc,wBAAd;AACA,cAAc,qBAAd;AACA,SACE,uBADF,EAEE,wBAFF,EAGE,gCAHF,QAIO,2BAJP","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport {\n compoundButtonClassName,\n compoundButtonClassNames,\n useCompoundButtonStyles_unstable,\n} from './useCompoundButtonStyles';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAR7C,CADF;AAYD,CAhBM","sourceRoot":""}
1
+ {"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,iBAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAR7C,CADF;AAYD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,kBAAT,QAAmC,iBAAnC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;AACvB,SAAO,EACL;AACA,OAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAFhB;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CAX7B;AAYL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAZ7B,GAAP;AAcD,CAlBM","sourceRoot":""}
1
+ {"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,kBAAT,QAAmC,iBAAnC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;AACvB,SAAO,EACL;AACA,OAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAFhB;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CAX7B;AAYL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAZ7B,GAAP;AAcD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\nimport { useButton_unstable } from '../Button/index';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n return {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1,3 +1,5 @@
1
- import type { CompoundButtonState } from './CompoundButton.types';
2
- export declare const compoundButtonClassName = "fui-CompoundButton";
1
+ import type { SlotClassNames } from '@fluentui/react-utilities';
2
+ import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';
3
+ export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
4
+ export declare const compoundButtonClassName: string;
3
5
  export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;