@fluentui/react-button 0.0.0-nightlyfc5cfdc52420220215.1 → 0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (195) hide show
  1. package/CHANGELOG.json +658 -16
  2. package/CHANGELOG.md +360 -181
  3. package/README.md +81 -19
  4. package/dist/{react-button.d.ts → index.d.ts} +44 -37
  5. package/{lib → dist}/tsdoc-metadata.json +0 -0
  6. package/lib/Button.js.map +1 -1
  7. package/lib/CompoundButton.js.map +1 -1
  8. package/lib/MenuButton.js.map +1 -1
  9. package/lib/SplitButton.js.map +1 -1
  10. package/lib/ToggleButton.js.map +1 -1
  11. package/lib/components/Button/Button.js.map +1 -1
  12. package/lib/components/Button/Button.types.js.map +1 -1
  13. package/lib/components/Button/index.js +1 -1
  14. package/lib/components/Button/index.js.map +1 -1
  15. package/lib/components/Button/renderButton.js.map +1 -1
  16. package/lib/components/Button/useButton.js +1 -3
  17. package/lib/components/Button/useButton.js.map +1 -1
  18. package/lib/components/Button/useButtonStyles.js +244 -115
  19. package/lib/components/Button/useButtonStyles.js.map +1 -1
  20. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  21. package/lib/components/CompoundButton/CompoundButton.types.js.map +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 +7 -2
  26. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  27. package/lib/components/CompoundButton/useCompoundButtonStyles.js +82 -55
  28. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  29. package/lib/components/MenuButton/MenuButton.js +2 -1
  30. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  31. package/lib/components/MenuButton/MenuButton.types.js.map +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.js +34 -14
  37. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  38. package/lib/components/SplitButton/SplitButton.js +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.js +1 -1
  42. package/lib/components/SplitButton/index.js.map +1 -1
  43. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  44. package/lib/components/SplitButton/useSplitButton.js +5 -6
  45. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  46. package/lib/components/SplitButton/useSplitButtonStyles.js +43 -34
  47. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  48. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  49. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  50. package/lib/components/ToggleButton/index.js +1 -1
  51. package/lib/components/ToggleButton/index.js.map +1 -1
  52. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  53. package/lib/components/ToggleButton/useToggleButton.js +3 -41
  54. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  55. package/lib/components/ToggleButton/useToggleButtonStyles.js +168 -61
  56. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  57. package/lib/index.js +6 -5
  58. package/lib/index.js.map +1 -1
  59. package/lib/utils/index.js +2 -0
  60. package/lib/utils/index.js.map +1 -0
  61. package/lib/utils/useToggleState.js +37 -0
  62. package/lib/utils/useToggleState.js.map +1 -0
  63. package/lib-commonjs/Button.js.map +1 -1
  64. package/lib-commonjs/CompoundButton.js.map +1 -1
  65. package/lib-commonjs/MenuButton.js.map +1 -1
  66. package/lib-commonjs/SplitButton.js.map +1 -1
  67. package/lib-commonjs/ToggleButton.js.map +1 -1
  68. package/lib-commonjs/components/Button/Button.js.map +1 -1
  69. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  70. package/lib-commonjs/components/Button/index.js +3 -3
  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 +1 -3
  74. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  75. package/lib-commonjs/components/Button/useButtonStyles.js +246 -116
  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.js +3 -3
  80. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  81. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  82. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +7 -2
  83. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  84. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +84 -57
  85. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  86. package/lib-commonjs/components/MenuButton/MenuButton.js +2 -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.js +3 -3
  90. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  91. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  92. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  93. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +36 -15
  94. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  95. package/lib-commonjs/components/SplitButton/SplitButton.js +1 -1
  96. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  97. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  98. package/lib-commonjs/components/SplitButton/index.js +3 -3
  99. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  100. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  101. package/lib-commonjs/components/SplitButton/useSplitButton.js +5 -6
  102. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  103. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +44 -35
  104. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  105. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  106. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  107. package/lib-commonjs/components/ToggleButton/index.js +3 -3
  108. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  109. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  110. package/lib-commonjs/components/ToggleButton/useToggleButton.js +3 -42
  111. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  112. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +173 -63
  113. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  114. package/lib-commonjs/index.js +169 -6
  115. package/lib-commonjs/index.js.map +1 -1
  116. package/lib-commonjs/utils/index.js +10 -0
  117. package/lib-commonjs/utils/index.js.map +1 -0
  118. package/lib-commonjs/utils/useToggleState.js +48 -0
  119. package/lib-commonjs/utils/useToggleState.js.map +1 -0
  120. package/package.json +21 -25
  121. package/dist/demo/index.html +0 -71
  122. package/dist/demo/react-dom.development.js +0 -21413
  123. package/dist/demo/react.development.js +0 -3155
  124. package/lib/Button.d.ts +0 -1
  125. package/lib/CompoundButton.d.ts +0 -1
  126. package/lib/MenuButton.d.ts +0 -1
  127. package/lib/SplitButton.d.ts +0 -1
  128. package/lib/ToggleButton.d.ts +0 -1
  129. package/lib/components/Button/Button.d.ts +0 -6
  130. package/lib/components/Button/Button.types.d.ts +0 -62
  131. package/lib/components/Button/index.d.ts +0 -5
  132. package/lib/components/Button/renderButton.d.ts +0 -5
  133. package/lib/components/Button/useButton.d.ts +0 -8
  134. package/lib/components/Button/useButtonStyles.d.ts +0 -3
  135. package/lib/components/CompoundButton/CompoundButton.d.ts +0 -6
  136. package/lib/components/CompoundButton/CompoundButton.types.d.ts +0 -14
  137. package/lib/components/CompoundButton/index.d.ts +0 -5
  138. package/lib/components/CompoundButton/renderCompoundButton.d.ts +0 -5
  139. package/lib/components/CompoundButton/useCompoundButton.d.ts +0 -8
  140. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +0 -3
  141. package/lib/components/MenuButton/MenuButton.d.ts +0 -6
  142. package/lib/components/MenuButton/MenuButton.types.d.ts +0 -10
  143. package/lib/components/MenuButton/index.d.ts +0 -5
  144. package/lib/components/MenuButton/renderMenuButton.d.ts +0 -5
  145. package/lib/components/MenuButton/useMenuButton.d.ts +0 -6
  146. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +0 -3
  147. package/lib/components/SplitButton/SplitButton.d.ts +0 -7
  148. package/lib/components/SplitButton/SplitButton.types.d.ts +0 -21
  149. package/lib/components/SplitButton/index.d.ts +0 -5
  150. package/lib/components/SplitButton/renderSplitButton.d.ts +0 -5
  151. package/lib/components/SplitButton/useSplitButton.d.ts +0 -8
  152. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +0 -3
  153. package/lib/components/ToggleButton/ToggleButton.d.ts +0 -6
  154. package/lib/components/ToggleButton/ToggleButton.types.d.ts +0 -20
  155. package/lib/components/ToggleButton/index.d.ts +0 -5
  156. package/lib/components/ToggleButton/renderToggleButton.d.ts +0 -1
  157. package/lib/components/ToggleButton/useToggleButton.d.ts +0 -9
  158. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +0 -3
  159. package/lib/index.d.ts +0 -5
  160. package/lib-commonjs/Button.d.ts +0 -1
  161. package/lib-commonjs/CompoundButton.d.ts +0 -1
  162. package/lib-commonjs/MenuButton.d.ts +0 -1
  163. package/lib-commonjs/SplitButton.d.ts +0 -1
  164. package/lib-commonjs/ToggleButton.d.ts +0 -1
  165. package/lib-commonjs/components/Button/Button.d.ts +0 -6
  166. package/lib-commonjs/components/Button/Button.types.d.ts +0 -62
  167. package/lib-commonjs/components/Button/index.d.ts +0 -5
  168. package/lib-commonjs/components/Button/renderButton.d.ts +0 -5
  169. package/lib-commonjs/components/Button/useButton.d.ts +0 -8
  170. package/lib-commonjs/components/Button/useButtonStyles.d.ts +0 -3
  171. package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +0 -6
  172. package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +0 -14
  173. package/lib-commonjs/components/CompoundButton/index.d.ts +0 -5
  174. package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +0 -5
  175. package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +0 -8
  176. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +0 -3
  177. package/lib-commonjs/components/MenuButton/MenuButton.d.ts +0 -6
  178. package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +0 -10
  179. package/lib-commonjs/components/MenuButton/index.d.ts +0 -5
  180. package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +0 -5
  181. package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +0 -6
  182. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +0 -3
  183. package/lib-commonjs/components/SplitButton/SplitButton.d.ts +0 -7
  184. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +0 -21
  185. package/lib-commonjs/components/SplitButton/index.d.ts +0 -5
  186. package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +0 -5
  187. package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +0 -8
  188. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +0 -3
  189. package/lib-commonjs/components/ToggleButton/ToggleButton.d.ts +0 -6
  190. package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +0 -20
  191. package/lib-commonjs/components/ToggleButton/index.d.ts +0 -5
  192. package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +0 -1
  193. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +0 -9
  194. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +0 -3
  195. package/lib-commonjs/index.d.ts +0 -5
@@ -9,8 +9,7 @@ import { MenuButton } from '../MenuButton/MenuButton';
9
9
 
10
10
  export const useSplitButton_unstable = (props, ref) => {
11
11
  const {
12
- appearance,
13
- block = false,
12
+ appearance = 'secondary',
14
13
  children,
15
14
  disabled = false,
16
15
  disabledFocusable = false,
@@ -31,12 +30,12 @@ export const useSplitButton_unstable = (props, ref) => {
31
30
  menuIcon,
32
31
  shape,
33
32
  size
34
- }
33
+ },
34
+ required: true
35
35
  });
36
36
  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
37
37
  defaultProps: {
38
38
  appearance,
39
- block,
40
39
  children,
41
40
  disabled,
42
41
  disabledFocusable,
@@ -45,7 +44,8 @@ export const useSplitButton_unstable = (props, ref) => {
45
44
  id: baseId + '__primaryActionButton',
46
45
  shape,
47
46
  size
48
- }
47
+ },
48
+ required: true
49
49
  }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
50
50
  // by the user.
51
51
 
@@ -56,7 +56,6 @@ export const useSplitButton_unstable = (props, ref) => {
56
56
  return {
57
57
  // Props passed at the top-level
58
58
  appearance,
59
- block,
60
59
  disabled,
61
60
  disabledFocusable,
62
61
  iconPosition,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY;AADyC,GAAb,CAA5C;AAWA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY;AAD2D,GAAtB,CAArD,CA7BoB,CA4CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,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,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA/EM","sourceRoot":""}
1
+ {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;EACpB,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,QAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,UAPI;IAQJ,QARI;IASJ,mBATI;IAUJ,KAAK,GAAG,SAVJ;IAWJ,IAAI,GAAG;EAXH,IAYF,KAZJ;EAcA,MAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;EAEA,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;IACvD,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,iBAHY;MAIZ,QAJY;MAKZ,KALY;MAMZ;IANY,CADyC;IASvD,QAAQ,EAAE;EAT6C,CAAb,CAA5C;EAYA,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;IACzE,YAAY,EAAE;MACZ,UADY;MAEZ,QAFY;MAGZ,QAHY;MAIZ,iBAJY;MAKZ,IALY;MAMZ,YANY;MAOZ,EAAE,EAAE,MAAM,GAAG,uBAPD;MAQZ,KARY;MASZ;IATY,CAD2D;IAYzE,QAAQ,EAAE;EAZ+D,CAAtB,CAArD,CA7BoB,CA4CpB;EACA;;EACA,IACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;IACA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;EACD;;EAED,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,UAAU,EAAE,UAFF;MAGV,mBAAmB,EAAE;IAHX,CAVP;IAgBL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MAAE,GAAF;MAAO,GAAG;IAAV,CAAR,CAhBtB;IAiBL,UAAU,EAAE,mBAjBP;IAkBL,mBAAmB,EAAE;EAlBhB,CAAP;AAoBD,CA9EM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1,26 +1,26 @@
1
1
  import { __styles, mergeClasses } from '@griffel/react';
2
2
  import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
3
  import { tokens } from '@fluentui/react-theme';
4
- export const splitButtonClassName = 'fui-SplitButton';
5
- const SplitButtonClassNames = {
6
- primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
7
- menuButton: `${splitButtonClassName}-menuButton`
4
+ export const splitButtonClassNames = {
5
+ root: 'fui-SplitButton',
6
+ menuButton: 'fui-SplitButton__menuButton',
7
+ primaryActionButton: 'fui-SplitButton__primaryActionButton'
8
8
  };
9
9
 
10
10
  const useFocusStyles = /*#__PURE__*/__styles({
11
11
  "primaryActionButton": {
12
- "B486eqv": "f2hkw1w",
12
+ "Brovlpu": "ftqa4ok",
13
13
  "Bmrpcm6": ["fub8a6s", "f1g41uvt"],
14
14
  "B8j0l6": ["f58hr3h", "f1u1mnrj"]
15
15
  },
16
16
  "menuButton": {
17
- "B486eqv": "f2hkw1w",
17
+ "Brovlpu": "ftqa4ok",
18
18
  "Bviepcv": ["fy9hclh", "f549e1y"],
19
19
  "Beswxhl": ["f1g41uvt", "fub8a6s"],
20
20
  "Ekyhi": ["f1u1mnrj", "f58hr3h"]
21
21
  }
22
22
  }, {
23
- "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
23
+ "f": [".ftqa4ok:focus{outline-style:none;}"],
24
24
  "d": ["[data-keyboard-nav] .fub8a6s:focus{border-top-right-radius:0;}", "[data-keyboard-nav] .f1g41uvt:focus{border-top-left-radius:0;}", "[data-keyboard-nav] .f58hr3h:focus{border-bottom-right-radius:0;}", "[data-keyboard-nav] .f1u1mnrj:focus{border-bottom-left-radius:0;}", "[data-keyboard-nav] .fy9hclh:focus{border-left-width:0;}", "[data-keyboard-nav] .f549e1y:focus{border-right-width:0;}"]
25
25
  });
26
26
 
@@ -30,43 +30,53 @@ const useRootStyles = /*#__PURE__*/__styles({
30
30
  "Brf1p80": "fsxf2b5",
31
31
  "qhf8xq": "f10pi13n",
32
32
  "ha4doy": "fmrv4ls",
33
- "mfjwoh": ["fwj9yvy", "f1lzjiju"],
34
- "ibxugx": ["f1a35zaw", "f1l6wyf7"],
35
- "Bqvcgfq": ["f104opbk", "f147sopj"],
36
- "Baxitl6": ["fxs6g7p", "f1moly3t"],
37
- "zkjfwm": ["f1m1y7kk", "ff82swa"]
38
- },
39
- "block": {
40
- "a9b677": "fly5x3f"
33
+ "kn2xc0": ["f14uur2j", "fc1btbj"],
34
+ "Bs76p8a": ["fye5tvs", "fc597qq"],
35
+ "cuxpm9": ["f1e8brtx", "fr36rk3"],
36
+ "Biffepf": ["fxp12j1", "f1m6nt2y"],
37
+ "Defnvf": ["fr7y8no", "f1dn0c6m"],
38
+ "z0pv9t": "f1hvqvul"
41
39
  },
42
40
  "outline": {},
43
41
  "primary": {
44
- "Bt6mj9": ["fptrtw7", "f51449u"],
45
- "xhdd7j": ["f1n4yg8a", "fbebbjo"],
46
- "Jxu9b0": ["fnmoi2n", "f1l3povx"]
42
+ "B1l9wao": ["f12j1tfo", "f1ufkr8r"],
43
+ "lcnrd8": ["f17lyyco", "f151o42i"],
44
+ "Brbpp8k": ["f1nb07eg", "fg8a8qi"]
47
45
  },
46
+ "secondary": {},
48
47
  "subtle": {
49
- "Bt6mj9": ["fh2ci0", "f1us00qf"],
50
- "xhdd7j": ["fj8butq", "fkv8iz"],
51
- "Jxu9b0": ["fjmcta", "fm99moz"]
48
+ "B1l9wao": ["f1ysqkm5", "f10nbrj"],
49
+ "lcnrd8": ["fn44ryq", "fwhhltr"],
50
+ "Brbpp8k": ["fg8lp5p", "f1p6hj0a"]
52
51
  },
53
52
  "transparent": {
54
- "Bt6mj9": ["fh2ci0", "f1us00qf"],
55
- "xhdd7j": ["fj8butq", "fkv8iz"],
56
- "Jxu9b0": ["fjmcta", "fm99moz"]
53
+ "B1l9wao": ["f1ysqkm5", "f10nbrj"],
54
+ "lcnrd8": ["fn44ryq", "fwhhltr"],
55
+ "Brbpp8k": ["fg8lp5p", "f1p6hj0a"]
57
56
  },
58
57
  "circular": {},
59
58
  "rounded": {},
60
59
  "square": {},
61
60
  "disabled": {
62
- "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
63
- "xhdd7j": ["f3cl9o2", "f12vilfs"],
64
- "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
61
+ "B1l9wao": ["f10xrnr8", "f15nylwb"],
62
+ "lcnrd8": ["f11fwhjz", "f18vtcsx"],
63
+ "Brbpp8k": ["f31btwb", "fzgm9gq"]
64
+ },
65
+ "disabledHighContrast": {
66
+ "Bcsxniv": ["fj2q5vi", "f13tct40"],
67
+ "tl7e51": ["fb2mzc7", "f179dhpp"],
68
+ "mba178": ["f1ma39qa", "f1nzpdru"]
65
69
  }
66
70
  }, {
67
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
68
- "h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
69
- "a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
71
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".f12j1tfo .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ufkr8r .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1ysqkm5 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f10nbrj .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
72
+ "h": [".f17lyyco:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f151o42i:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1nb07eg:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fg8a8qi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fg8lp5p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1p6hj0a:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
73
+ "m": [["@media (forced-colors: active){.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
74
+ "m": "(forced-colors: active)"
75
+ }], ["@media (forced-colors: active){.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
76
+ "m": "(forced-colors: active)"
77
+ }], ["@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", {
78
+ "m": "(forced-colors: active)"
79
+ }]]
70
80
  });
71
81
 
72
82
  export const useSplitButtonStyles_unstable = state => {
@@ -74,18 +84,17 @@ export const useSplitButtonStyles_unstable = state => {
74
84
  const focusStyles = useFocusStyles();
75
85
  const {
76
86
  appearance,
77
- block,
78
87
  disabled,
79
88
  disabledFocusable
80
89
  } = state;
81
- state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
90
+ state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
82
91
 
83
92
  if (state.menuButton) {
84
- state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
93
+ state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
85
94
  }
86
95
 
87
96
  if (state.primaryActionButton) {
88
- state.primaryActionButton.className = mergeClasses(SplitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
97
+ state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
89
98
  }
90
99
 
91
100
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,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,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourceRoot":""}
1
+ {"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,UAAU,EAAE,6BAFyD;EAGrE,mBAAmB,EAAE;AAHgD,CAAhE;;AAMP,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;;AA8HA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB;EAAxB,IAA8C,KAApD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;EAKD;;EAED,IAAI,KAAK,CAAC,mBAAV,EAA+B;IAC7B,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;EAKD;;EAED,OAAO,KAAP;AACD,CAhCM","sourcesContent":["import { 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 { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
1
+ {"version":3,"sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleButton.types.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"]}
@@ -2,5 +2,5 @@ export * from './ToggleButton';
2
2
  export * from './ToggleButton.types';
3
3
  export * from './renderToggleButton';
4
4
  export * from './useToggleButton';
5
- export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
5
+ export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}
@@ -1,5 +1,4 @@
1
- import { useControllableState } from '@fluentui/react-utilities';
2
- import * as React from 'react';
1
+ import { useToggleState } from '../../utils/useToggleState';
3
2
  import { useButton_unstable } from '../Button/useButton';
4
3
  /**
5
4
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
@@ -8,45 +7,8 @@ import { useButton_unstable } from '../Button/useButton';
8
7
  * @param ref - User provided ref to be passed to the ToggleButton component.
9
8
  */
10
9
 
11
- export const useToggleButton_unstable = ({
12
- checked,
13
- defaultChecked,
14
- ...props
15
- }, ref) => {
16
- const {
17
- disabled,
18
- disabledFocusable
19
- } = props;
10
+ export const useToggleButton_unstable = (props, ref) => {
20
11
  const buttonState = useButton_unstable(props, ref);
21
- const {
22
- role,
23
- onClick
24
- } = buttonState.root;
25
- const [checkedValue, setCheckedValue] = useControllableState({
26
- state: checked,
27
- defaultState: defaultChecked,
28
- initialState: false
29
- });
30
- const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
31
- return { // Button state
32
- ...buttonState,
33
- // State calculated from a set of props
34
- checked: checkedValue,
35
- // Slots definition
36
- root: { ...buttonState.root,
37
- [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !disabled && !disabledFocusable && checkedValue,
38
- onClick: React.useCallback(ev => {
39
- if (onClick) {
40
- onClick(ev);
41
-
42
- if (ev.defaultPrevented) {
43
- return;
44
- }
45
- }
46
-
47
- setCheckedValue(!checkedValue);
48
- }, [checkedValue, setCheckedValue, onClick])
49
- }
50
- };
12
+ return useToggleState(props, buttonState);
51
13
  };
52
14
  //# sourceMappingURL=useToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;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,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,CAAC,QAAD,IAAa,CAAC,iBAAd,IAAmC,YAFvF;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,OAAJ,EAAa;AACX,UAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,QAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,OAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourceRoot":""}
1
+ {"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,OAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}