@fluentui/react-button 9.0.0-rc.4 → 9.0.0-rc.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. package/CHANGELOG.json +200 -1
  2. package/CHANGELOG.md +50 -2
  3. package/dist/react-button.d.ts +38 -8
  4. package/lib/components/Button/Button.types.d.ts +3 -1
  5. package/lib/components/Button/Button.types.js.map +1 -1
  6. package/lib/components/Button/index.d.ts +1 -1
  7. package/lib/components/Button/index.js +3 -1
  8. package/lib/components/Button/index.js.map +1 -1
  9. package/lib/components/Button/useButton.js +1 -0
  10. package/lib/components/Button/useButton.js.map +1 -1
  11. package/lib/components/Button/useButtonStyles.d.ts +7 -2
  12. package/lib/components/Button/useButtonStyles.js +110 -59
  13. package/lib/components/Button/useButtonStyles.js.map +1 -1
  14. package/lib/components/CompoundButton/CompoundButton.d.ts +1 -1
  15. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  16. package/lib/components/CompoundButton/index.d.ts +1 -1
  17. package/lib/components/CompoundButton/index.js +3 -1
  18. package/lib/components/CompoundButton/index.js.map +1 -1
  19. package/lib/components/CompoundButton/useCompoundButton.js +7 -2
  20. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  21. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +7 -2
  22. package/lib/components/CompoundButton/useCompoundButtonStyles.js +43 -28
  23. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  24. package/lib/components/MenuButton/index.d.ts +1 -1
  25. package/lib/components/MenuButton/index.js +3 -1
  26. package/lib/components/MenuButton/index.js.map +1 -1
  27. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +7 -2
  28. package/lib/components/MenuButton/useMenuButtonStyles.js +16 -3
  29. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  30. package/lib/components/SplitButton/SplitButton.types.d.ts +1 -1
  31. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  32. package/lib/components/SplitButton/index.d.ts +1 -1
  33. package/lib/components/SplitButton/index.js +3 -1
  34. package/lib/components/SplitButton/index.js.map +1 -1
  35. package/lib/components/SplitButton/useSplitButton.js +1 -0
  36. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  37. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +7 -2
  38. package/lib/components/SplitButton/useSplitButtonStyles.js +38 -27
  39. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  40. package/lib/components/ToggleButton/index.d.ts +1 -1
  41. package/lib/components/ToggleButton/index.js +3 -1
  42. package/lib/components/ToggleButton/index.js.map +1 -1
  43. package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
  44. package/lib/components/ToggleButton/useToggleButton.js +3 -41
  45. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  46. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +9 -1
  47. package/lib/components/ToggleButton/useToggleButtonStyles.js +83 -60
  48. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  49. package/lib/index.d.ts +11 -5
  50. package/lib/index.js +11 -5
  51. package/lib/index.js.map +1 -1
  52. package/lib/utils/index.d.ts +1 -0
  53. package/lib/utils/index.js +2 -0
  54. package/lib/utils/index.js.map +1 -0
  55. package/lib/utils/useToggleState.d.ts +3 -0
  56. package/lib/utils/useToggleState.js +37 -0
  57. package/lib/utils/useToggleState.js.map +1 -0
  58. package/lib-commonjs/components/Button/Button.types.d.ts +3 -1
  59. package/lib-commonjs/components/Button/index.d.ts +1 -1
  60. package/lib-commonjs/components/Button/index.js +9 -1
  61. package/lib-commonjs/components/Button/index.js.map +1 -1
  62. package/lib-commonjs/components/Button/useButton.js +1 -0
  63. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  64. package/lib-commonjs/components/Button/useButtonStyles.d.ts +7 -2
  65. package/lib-commonjs/components/Button/useButtonStyles.js +112 -60
  66. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  67. package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +1 -1
  68. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  69. package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
  70. package/lib-commonjs/components/CompoundButton/index.js +9 -1
  71. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  72. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +7 -2
  73. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  74. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +7 -2
  75. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +44 -29
  76. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  77. package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
  78. package/lib-commonjs/components/MenuButton/index.js +9 -1
  79. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  80. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +7 -2
  81. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +17 -4
  82. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  83. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +1 -1
  84. package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
  85. package/lib-commonjs/components/SplitButton/index.js +9 -1
  86. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  87. package/lib-commonjs/components/SplitButton/useSplitButton.js +1 -0
  88. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  89. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +7 -2
  90. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +39 -28
  91. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  92. package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
  93. package/lib-commonjs/components/ToggleButton/index.js +9 -1
  94. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  95. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
  96. package/lib-commonjs/components/ToggleButton/useToggleButton.js +3 -42
  97. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  98. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +9 -1
  99. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +87 -62
  100. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  101. package/lib-commonjs/index.d.ts +11 -5
  102. package/lib-commonjs/index.js +204 -6
  103. package/lib-commonjs/index.js.map +1 -1
  104. package/lib-commonjs/utils/index.d.ts +1 -0
  105. package/lib-commonjs/utils/index.js +10 -0
  106. package/lib-commonjs/utils/index.js.map +1 -0
  107. package/lib-commonjs/utils/useToggleState.d.ts +3 -0
  108. package/lib-commonjs/utils/useToggleState.js +48 -0
  109. package/lib-commonjs/utils/useToggleState.js.map +1 -0
  110. package/package.json +17 -20
  111. package/dist/demo/index.html +0 -71
  112. package/dist/demo/react-dom.development.js +0 -21413
  113. package/dist/demo/react.development.js +0 -3155
package/lib/components/ToggleButton/useToggleButtonStyles.js CHANGED
@@ -1,37 +1,58 @@
1
- import { shorthands, mergeClasses, __styles } from '@griffel/react';
1
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
2
2
  import { tokens } from '@fluentui/react-theme';
3
+ import { shorthands, mergeClasses, __styles } from '@griffel/react';
3
4
  import { useButtonStyles_unstable } from '../Button/useButtonStyles';
4
- export const toggleButtonClassName = 'fui-ToggleButton';
5
+ export const toggleButtonClassNames = {
6
+ root: 'fui-ToggleButton',
7
+ icon: 'fui-ToggleButton__icon'
8
+ };
9
+ /**
10
+ * @deprecated Use `toggleButtonClassName.root` instead.
11
+ */
5
12
 
6
- const useCheckedStyles = /*#__PURE__*/__styles({
13
+ export const toggleButtonClassName = toggleButtonClassNames.root;
14
+ export const useCheckedStyles = /*#__PURE__*/__styles({
7
15
  "base": {
8
16
  "De3pzq": "f1nfm20t",
9
17
  "g2u3we": "fj3muxo",
10
18
  "h3c5rm": ["f1akhkt", "f1lxtadh"],
11
19
  "B9xav0g": "f1aperda",
12
20
  "zhjwy3": ["f1lxtadh", "f1akhkt"],
13
- "sj55zd": "f19n0e5",
21
+ "sj55zd": "f14nttnl",
14
22
  "B4j52fo": "f192inf7",
15
23
  "Bekrc4i": ["f5tn483", "f1ojsxk5"],
16
24
  "Bn0qgzm": "f1vxd6vx",
17
25
  "ibv6hh": ["f1ojsxk5", "f5tn483"],
26
+ "D0sxk3": "fxoiby5",
27
+ "t6yez3": "f15q0o9g",
18
28
  "Jwef8y": "f1knas48",
19
29
  "Bgoe8wy": "fvcxoqz",
20
30
  "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
21
31
  "oetu4i": "f1xlaoq0",
22
32
  "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
23
- "Bi91k9c": "fax3udt",
24
- "ecr2s2": "fb40n2d",
25
- "B6oc9vd": "fvs00aa",
26
- "ak43y8": ["f1assf6x", "f4ruux4"],
27
- "wmxk5l": "fumykes",
28
- "B50zh58": ["f4ruux4", "f1assf6x"],
29
- "lj723h": "f1r2dosr"
33
+ "Bi91k9c": "feu1g3u",
34
+ "iro3zm": "f141de4g",
35
+ "b661bw": "f11v6sdu",
36
+ "Bk6r4ia": ["f9yn8i4", "f1ajwf28"],
37
+ "B9zn80p": "f1uwu36w",
38
+ "Bpld233": ["f1ajwf28", "f9yn8i4"],
39
+ "B2d53fq": "f9olfzr"
40
+ },
41
+ "highContrast": {
42
+ "Bjwas2f": "f132fbg1",
43
+ "Bn1d65q": ["f1ene5x0", "fzbc999"],
44
+ "Bxeuatn": "f6jgcol",
45
+ "n51gp8": ["fzbc999", "f1ene5x0"],
46
+ "Bbusuzp": "f1isslxv",
47
+ "G867l3": "fr7nen4",
48
+ "gdbnj": ["f10aq6ld", "fq8rgo9"],
49
+ "mxns5l": "f1md2qq2",
50
+ "o3nasb": ["fq8rgo9", "f10aq6ld"]
30
51
  },
31
52
  "outline": {
32
53
  "De3pzq": "f1q9pm1r",
33
54
  "Jwef8y": "fjxutwb",
34
- "ecr2s2": "fophhak"
55
+ "iro3zm": "fwiml72"
35
56
  },
36
57
  "primary": {
37
58
  "De3pzq": "f8w4g0q",
@@ -46,12 +67,12 @@ const useCheckedStyles = /*#__PURE__*/__styles({
46
67
  "oetu4i": "f1ukrpxl",
47
68
  "gg5e9n": ["fecsdlb", "fr80ssc"],
48
69
  "Bi91k9c": "f1rq72xc",
49
- "ecr2s2": "fsp1bjw",
50
- "B6oc9vd": "ff472gp",
51
- "ak43y8": ["f4yyc7m", "ft2aflc"],
52
- "wmxk5l": "fggejwh",
53
- "B50zh58": ["ft2aflc", "f4yyc7m"],
54
- "lj723h": "f18otbis"
70
+ "iro3zm": "fnp9lpt",
71
+ "b661bw": "f1h0usnq",
72
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
73
+ "B9zn80p": "f16h9ulv",
74
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
75
+ "B2d53fq": "f1d6v5y2"
55
76
  },
56
77
  "subtle": {
57
78
  "De3pzq": "fq5gl1p",
@@ -66,12 +87,12 @@ const useCheckedStyles = /*#__PURE__*/__styles({
66
87
  "oetu4i": "f1ukrpxl",
67
88
  "gg5e9n": ["fecsdlb", "fr80ssc"],
68
89
  "Bi91k9c": "f139oj5f",
69
- "ecr2s2": "f1wfn5kd",
70
- "B6oc9vd": "ff472gp",
71
- "ak43y8": ["f4yyc7m", "ft2aflc"],
72
- "wmxk5l": "fggejwh",
73
- "B50zh58": ["ft2aflc", "f4yyc7m"],
74
- "lj723h": "f19au66r"
90
+ "iro3zm": "fsv2rcd",
91
+ "b661bw": "f1h0usnq",
92
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
93
+ "B9zn80p": "f16h9ulv",
94
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
95
+ "B2d53fq": "f1fg1p5m"
75
96
  },
76
97
  "transparent": {
77
98
  "De3pzq": "f1q9pm1r",
@@ -86,20 +107,19 @@ const useCheckedStyles = /*#__PURE__*/__styles({
86
107
  "oetu4i": "f1ukrpxl",
87
108
  "gg5e9n": ["fecsdlb", "fr80ssc"],
88
109
  "Bi91k9c": "f139oj5f",
89
- "ecr2s2": "fophhak",
90
- "B6oc9vd": "ff472gp",
91
- "ak43y8": ["f4yyc7m", "ft2aflc"],
92
- "wmxk5l": "fggejwh",
93
- "B50zh58": ["ft2aflc", "f4yyc7m"],
94
- "lj723h": "f19au66r"
110
+ "iro3zm": "fwiml72",
111
+ "b661bw": "f1h0usnq",
112
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
113
+ "B9zn80p": "f16h9ulv",
114
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
115
+ "B2d53fq": "f1fg1p5m"
95
116
  }
96
117
  }, {
97
- "d": [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
98
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
99
- "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
118
+ "d": [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
119
+ "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
120
+ "t": ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", "@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", "@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.fzbc999{border-left-color:Highlight;}.f1ene5x0{border-right-color:Highlight;}}", "@media (forced-colors: active){.f1isslxv{color:Highlight;}}", "@media (forced-colors: active){.fr7nen4:focus{border-top-color:Highlight;}}", "@media (forced-colors: active){.f10aq6ld:focus{border-right-color:Highlight;}.fq8rgo9:focus{border-left-color:Highlight;}}", "@media (forced-colors: active){.f1md2qq2:focus{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.fq8rgo9:focus{border-left-color:Highlight;}.f10aq6ld:focus{border-right-color:Highlight;}}"]
100
121
  });
101
-
102
- const useDisabledStyles = /*#__PURE__*/__styles({
122
+ export const useDisabledStyles = /*#__PURE__*/__styles({
103
123
  "base": {
104
124
  "De3pzq": "f1bg9a2p",
105
125
  "g2u3we": "f1jj8ep1",
@@ -113,12 +133,12 @@ const useDisabledStyles = /*#__PURE__*/__styles({
113
133
  "oetu4i": "f1jnshp0",
114
134
  "gg5e9n": ["f18rmfxp", "f1gwvigk"],
115
135
  "Bi91k9c": "fvgxktp",
116
- "ecr2s2": "f1ryyzvn",
117
- "B6oc9vd": "fdi4vxw",
118
- "ak43y8": ["f4ryxzl", "fkdgpbx"],
119
- "wmxk5l": "fcmhn06",
120
- "B50zh58": ["fkdgpbx", "f4ryxzl"],
121
- "lj723h": "f19wldhg"
136
+ "iro3zm": "f1t6o4dc",
137
+ "b661bw": "f10ztigi",
138
+ "Bk6r4ia": ["f1ft5sdu", "f1gzf82w"],
139
+ "B9zn80p": "f12zbtn2",
140
+ "Bpld233": ["f1gzf82w", "f1ft5sdu"],
141
+ "B2d53fq": "fcvwxyo"
122
142
  },
123
143
  "outline": {},
124
144
  "primary": {
@@ -130,10 +150,10 @@ const useDisabledStyles = /*#__PURE__*/__styles({
130
150
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
131
151
  "oetu4i": "f1ukrpxl",
132
152
  "gg5e9n": ["fecsdlb", "fr80ssc"],
133
- "B6oc9vd": "ff472gp",
134
- "ak43y8": ["f4yyc7m", "ft2aflc"],
135
- "wmxk5l": "fggejwh",
136
- "B50zh58": ["ft2aflc", "f4yyc7m"]
153
+ "b661bw": "f1h0usnq",
154
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
155
+ "B9zn80p": "f16h9ulv",
156
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
137
157
  },
138
158
  "subtle": {
139
159
  "De3pzq": "f3rmtva",
@@ -146,11 +166,11 @@ const useDisabledStyles = /*#__PURE__*/__styles({
146
166
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
147
167
  "oetu4i": "f1ukrpxl",
148
168
  "gg5e9n": ["fecsdlb", "fr80ssc"],
149
- "ecr2s2": "f1rot6hk",
150
- "B6oc9vd": "ff472gp",
151
- "ak43y8": ["f4yyc7m", "ft2aflc"],
152
- "wmxk5l": "fggejwh",
153
- "B50zh58": ["ft2aflc", "f4yyc7m"]
169
+ "iro3zm": "fvaszet",
170
+ "b661bw": "f1h0usnq",
171
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
172
+ "B9zn80p": "f16h9ulv",
173
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
154
174
  },
155
175
  "transparent": {
156
176
  "De3pzq": "f3rmtva",
@@ -163,18 +183,16 @@ const useDisabledStyles = /*#__PURE__*/__styles({
163
183
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
164
184
  "oetu4i": "f1ukrpxl",
165
185
  "gg5e9n": ["fecsdlb", "fr80ssc"],
166
- "ecr2s2": "f1rot6hk",
167
- "B6oc9vd": "ff472gp",
168
- "ak43y8": ["f4yyc7m", "ft2aflc"],
169
- "wmxk5l": "fggejwh",
170
- "B50zh58": ["ft2aflc", "f4yyc7m"]
186
+ "iro3zm": "fvaszet",
187
+ "b661bw": "f1h0usnq",
188
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
189
+ "B9zn80p": "f16h9ulv",
190
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
171
191
  }
172
192
  }, {
173
193
  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f3rmtva{background-color:transparent;}"],
174
- "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}"],
175
- "a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
194
+ "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}", ".fvaszet:hover:active{background-color:transparent;}"]
176
195
  });
177
-
178
196
  export const useToggleButtonStyles_unstable = state => {
179
197
  const checkedStyles = useCheckedStyles();
180
198
  const disabledStyles = useDisabledStyles();
@@ -184,10 +202,15 @@ export const useToggleButtonStyles_unstable = state => {
184
202
  disabled,
185
203
  disabledFocusable
186
204
  } = state;
187
- state.root.className = mergeClasses(toggleButtonClassName, // Checked styles
188
- checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
205
+ state.root.className = mergeClasses(toggleButtonClassNames.root, // Checked styles
206
+ checked && checkedStyles.base, checked && checkedStyles.highContrast, appearance && checked && checkedStyles[appearance], // Disabled styles
189
207
  (disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
190
208
  state.root.className);
209
+
210
+ if (state.icon) {
211
+ state.icon.className = mergeClasses(toggleButtonClassNames.icon, state.icon.className);
212
+ }
213
+
191
214
  useButtonStyles_unstable(state);
192
215
  return state;
193
216
  };
package/lib/components/ToggleButton/useToggleButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAiEA,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAxBM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassName = 'fui-ToggleButton';\n\nconst useCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\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.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\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.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\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\nconst useDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\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\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const checkedStyles = useCheckedStyles();\n const disabledStyles = useDisabledStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassName,\n\n // Checked styles\n checked && checkedStyles.base,\n appearance && checked && checkedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && disabledStyles.base,\n appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAKA,OAAO,MAAM,sBAAsB,GAAgC;AACjE,EAAA,IAAI,EAAE,kBAD2D;AAEjE,EAAA,IAAI,EAAE;AAF2D,CAA5D;AAKP;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,sBAAsB,CAAC,IAArD;AAEP,OAAO,MAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;AA0GP,OAAO,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;AAiEP,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,sBAAsB,CAAC,IADU,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,OAAO,IAAI,aAAa,CAAC,YALQ,EAMjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CANL,EAQjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IATjB,EAUjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAV9B,EAYjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAbsB,CAAnC;;AAgBA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAnC;AACD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CA7BM","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\n/**\n * @deprecated Use `toggleButtonClassName.root` instead.\n */\nexport const toggleButtonClassName = toggleButtonClassNames.root;\n\nexport const useCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n\n ':focus': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\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 ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nexport const useDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover: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 ':hover: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 ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const checkedStyles = useCheckedStyles();\n const disabledStyles = useDisabledStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && checkedStyles.base,\n checked && checkedStyles.highContrast,\n appearance && checked && checkedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && disabledStyles.base,\n appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.d.ts CHANGED
@@ -1,5 +1,11 @@
1
- export * from './Button';
2
- export * from './CompoundButton';
3
- export * from './MenuButton';
4
- export * from './SplitButton';
5
- export * from './ToggleButton';
1
+ export { Button, buttonClassName, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, } from './Button';
2
+ export type { ButtonProps, ButtonSlots, ButtonState } from './Button';
3
+ export { CompoundButton, compoundButtonClassName, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable, } from './CompoundButton';
4
+ export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';
5
+ export { MenuButton, menuButtonClassName, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable, } from './MenuButton';
6
+ export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';
7
+ export { SplitButton, renderSplitButton_unstable, splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable, } from './SplitButton';
8
+ export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';
9
+ export { ToggleButton, renderToggleButton_unstable, toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, } from './ToggleButton';
10
+ export type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';
11
+ export { useToggleState } from './utils/index';
package/lib/index.js CHANGED
@@ -1,6 +1,12 @@
1
- export * from './Button';
2
- export * from './CompoundButton';
3
- export * from './MenuButton';
4
- export * from './SplitButton';
5
- export * from './ToggleButton';
1
+ export { Button, // eslint-disable-next-line deprecation/deprecation
2
+ buttonClassName, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
3
+ export { CompoundButton, // eslint-disable-next-line deprecation/deprecation
4
+ compoundButtonClassName, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
5
+ export { MenuButton, // eslint-disable-next-line deprecation/deprecation
6
+ menuButtonClassName, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
7
+ export { SplitButton, renderSplitButton_unstable, // eslint-disable-next-line deprecation/deprecation
8
+ splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
9
+ export { ToggleButton, renderToggleButton_unstable, // eslint-disable-next-line deprecation/deprecation
10
+ toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
11
+ export { useToggleState } from './utils/index';
6
12
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"]}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE;AACA,eAHF,EAIE,gBAJF,EAKE,qBALF,EAME,wBANF,EAOE,kBAPF,QAQO,UARP;AAUA,SACE,cADF,EAEE;AACA,uBAHF,EAIE,wBAJF,EAKE,6BALF,EAME,gCANF,EAOE,0BAPF,QAQO,kBARP;AAUA,SACE,UADF,EAEE;AACA,mBAHF,EAIE,oBAJF,EAKE,yBALF,EAME,4BANF,EAOE,sBAPF,QAQO,cARP;AAUA,SACE,WADF,EAEE,0BAFF,EAGE;AACA,oBAJF,EAKE,qBALF,EAME,6BANF,EAOE,uBAPF,QAQO,eARP;AAUA,SACE,YADF,EAEE,2BAFF,EAGE;AACA,qBAJF,EAKE,sBALF,EAME,8BANF,EAOE,wBAPF,QAQO,gBARP;AAWA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n Button,\n // eslint-disable-next-line deprecation/deprecation\n buttonClassName,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n // eslint-disable-next-line deprecation/deprecation\n compoundButtonClassName,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n // eslint-disable-next-line deprecation/deprecation\n menuButtonClassName,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n // eslint-disable-next-line deprecation/deprecation\n splitButtonClassName,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n // eslint-disable-next-line deprecation/deprecation\n toggleButtonClassName,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}
package/lib/utils/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './useToggleState';
package/lib/utils/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './useToggleState';
2
+ //# sourceMappingURL=index.js.map
package/lib/utils/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}
package/lib/utils/useToggleState.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ButtonState } from '../Button';
2
+ import type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';
3
+ export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
package/lib/utils/useToggleState.js ADDED
@@ -0,0 +1,37 @@
1
+ import * as React from 'react';
2
+ import { useControllableState, useMergedEventCallbacks } from '@fluentui/react-utilities';
3
+ export function useToggleState(props, state) {
4
+ const {
5
+ checked,
6
+ defaultChecked,
7
+ disabled,
8
+ disabledFocusable
9
+ } = props;
10
+ const {
11
+ onClick,
12
+ role
13
+ } = state.root;
14
+ const [checkedValue, setCheckedValue] = useControllableState({
15
+ state: checked,
16
+ defaultState: defaultChecked,
17
+ initialState: false
18
+ });
19
+ const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
20
+ const onToggleClick = React.useCallback(ev => {
21
+ if (!disabled && !disabledFocusable) {
22
+ if (ev.defaultPrevented) {
23
+ return;
24
+ }
25
+
26
+ setCheckedValue(!checkedValue);
27
+ }
28
+ }, [checkedValue, disabled, disabledFocusable, setCheckedValue]);
29
+ return { ...state,
30
+ checked: checkedValue,
31
+ root: { ...state.root,
32
+ [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
33
+ onClick: useMergedEventCallbacks(onClick, onToggleClick)
34
+ }
35
+ };
36
+ }
37
+ //# sourceMappingURL=useToggleState.js.map
package/lib/utils/useToggleState.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,uBAA/B,QAA8D,2BAA9D;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;AAC9C,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,cAAX;AAA2B,IAAA,QAA3B;AAAqC,IAAA;AAArC,MAA2D,KAAjE;AACA,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA;AAAX,MAAoB,KAAK,CAAC,IAAhC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,QAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;AACH,QAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;AACnC,UAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;;AAED,MAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD;AACF,GATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;AAaA,SAAO,EACL,GAAG,KADE;AAGL,IAAA,OAAO,EAAE,YAHJ;AAKL,IAAA,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;AAGJ,MAAA,OAAO,EAAE,uBAAuB,CAC9B,OAD8B,EAE9B,aAF8B;AAH5B;AALD,GAAP;AAcD","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useMergedEventCallbacks(\n onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>,\n onToggleClick,\n ),\n },\n } as TToggleButtonState;\n}\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Button/Button.types.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare type ButtonSlots = {
4
4
  /**
5
5
  * Root of the component that renders as either a `<button>` tag or an `<a>` tag.
6
6
  */
7
- root: Slot<ARIAButtonSlotProps>;
7
+ root: NonNullable<Slot<ARIAButtonSlotProps>>;
8
8
  /**
9
9
  * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
10
10
  */
@@ -22,6 +22,8 @@ export declare type ButtonCommons = {
22
22
  /**
23
23
  * A button can fill the width of its container.
24
24
  * @default false
25
+ *
26
+ * @deprecated - Use style overrides instead.
25
27
  */
26
28
  block: boolean;
27
29
  /**
package/lib-commonjs/components/Button/index.d.ts CHANGED
@@ -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';
package/lib-commonjs/components/Button/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useButtonStyles_unstable = exports.buttonClassName = void 0;
6
+ exports.useButtonStyles_unstable = exports.buttonClassNames = exports.buttonClassName = void 0;
7
7
 
8
8
  const tslib_1 = /*#__PURE__*/require("tslib");
9
9
 
@@ -14,6 +14,8 @@ tslib_1.__exportStar(require("./renderButton"), exports);
14
14
  tslib_1.__exportStar(require("./useButton"), exports);
15
15
 
16
16
  var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
17
+ /* eslint-disable-next-line deprecation/deprecation */
18
+
17
19
 
18
20
  Object.defineProperty(exports, "buttonClassName", {
19
21
  enumerable: true,
@@ -21,6 +23,12 @@ Object.defineProperty(exports, "buttonClassName", {
21
23
  return useButtonStyles_1.buttonClassName;
22
24
  }
23
25
  });
26
+ Object.defineProperty(exports, "buttonClassNames", {
27
+ enumerable: true,
28
+ get: function () {
29
+ return useButtonStyles_1.buttonClassNames;
30
+ }
31
+ });
24
32
  Object.defineProperty(exports, "useButtonStyles_unstable", {
25
33
  enumerable: true,
26
34
  get: function () {
package/lib-commonjs/components/Button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","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, useButtonStyles_unstable } from './useButtonStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AACE;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","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 {\n /* eslint-disable-next-line deprecation/deprecation */\n buttonClassName,\n buttonClassNames,\n useButtonStyles_unstable,\n} from './useButtonStyles';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Button/useButton.js CHANGED
@@ -19,6 +19,7 @@ const useButton_unstable = (props, ref) => {
19
19
  const {
20
20
  appearance,
21
21
  as,
22
+ // eslint-disable-next-line deprecation/deprecation
22
23
  block = false,
23
24
  disabled = false,
24
25
  disabledFocusable = false,
package/lib-commonjs/components/Button/useButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,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,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;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,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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
+ {"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ;AACA,IAAA,KAAK,GAAG,KAJJ;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,KAAK,GAAG,SATJ;AAUJ,IAAA,IAAI,GAAG;AAVH,MAWF,KAXJ;AAYA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;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,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAlDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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 // eslint-disable-next-line deprecation/deprecation\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/"}
package/lib-commonjs/components/Button/useButtonStyles.d.ts CHANGED
@@ -1,3 +1,8 @@
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
+ /**
5
+ * @deprecated Use `buttonClassNames.root` instead.
6
+ */
7
+ export declare const buttonClassName: string;
3
8
  export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;