@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

Sign up to get free protection for your applications and to get access to all the features.
Files changed (418) hide show
  1. package/CHANGELOG.json +3258 -1
  2. package/CHANGELOG.md +1247 -2
  3. package/README.md +19 -108
  4. package/dist/demo/index.html +71 -0
  5. package/dist/demo/react-dom.development.js +21413 -0
  6. package/dist/demo/react.development.js +3155 -0
  7. package/dist/react-button.d.ts +130 -355
  8. package/lib/Button.js.map +1 -1
  9. package/lib/CompoundButton.js.map +1 -1
  10. package/lib/MenuButton.js.map +1 -1
  11. package/lib/SplitButton.js.map +1 -1
  12. package/lib/ToggleButton.js.map +1 -1
  13. package/lib/common/isConformant.d.ts +4 -2
  14. package/lib/common/isConformant.js +9 -5
  15. package/lib/common/isConformant.js.map +1 -1
  16. package/lib/components/Button/Button.d.ts +4 -5
  17. package/lib/components/Button/Button.js +8 -9
  18. package/lib/components/Button/Button.js.map +1 -1
  19. package/lib/components/Button/Button.types.d.ts +46 -114
  20. package/lib/components/Button/Button.types.js +1 -0
  21. package/lib/components/Button/Button.types.js.map +1 -1
  22. package/lib/components/Button/index.d.ts +3 -3
  23. package/lib/components/Button/index.js +4 -3
  24. package/lib/components/Button/index.js.map +1 -1
  25. package/lib/components/Button/renderButton.d.ts +2 -2
  26. package/lib/components/Button/renderButton.js +10 -10
  27. package/lib/components/Button/renderButton.js.map +1 -1
  28. package/lib/components/Button/useButton.d.ts +5 -10
  29. package/lib/components/Button/useButton.js +49 -24
  30. package/lib/components/Button/useButton.js.map +1 -1
  31. package/lib/components/Button/useButtonStyles.d.ts +10 -0
  32. package/lib/components/Button/useButtonStyles.js +354 -0
  33. package/lib/components/Button/useButtonStyles.js.map +1 -0
  34. package/lib/components/CompoundButton/CompoundButton.d.ts +4 -5
  35. package/lib/components/CompoundButton/CompoundButton.js +8 -11
  36. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  37. package/lib/components/CompoundButton/CompoundButton.types.d.ts +8 -27
  38. package/lib/components/CompoundButton/CompoundButton.types.js +1 -0
  39. package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
  40. package/lib/components/CompoundButton/index.d.ts +2 -1
  41. package/lib/components/CompoundButton/index.js +3 -1
  42. package/lib/components/CompoundButton/index.js.map +1 -1
  43. package/lib/components/CompoundButton/renderCompoundButton.d.ts +2 -2
  44. package/lib/components/CompoundButton/renderCompoundButton.js +10 -12
  45. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  46. package/lib/components/CompoundButton/useCompoundButton.d.ts +5 -10
  47. package/lib/components/CompoundButton/useCompoundButton.js +25 -28
  48. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  49. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -0
  50. package/lib/components/CompoundButton/useCompoundButtonStyles.js +164 -0
  51. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -0
  52. package/lib/components/MenuButton/MenuButton.d.ts +4 -5
  53. package/lib/components/MenuButton/MenuButton.js +8 -21
  54. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  55. package/lib/components/MenuButton/MenuButton.types.d.ts +7 -50
  56. package/lib/components/MenuButton/MenuButton.types.js +1 -0
  57. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  58. package/lib/components/MenuButton/index.d.ts +2 -3
  59. package/lib/components/MenuButton/index.js +3 -3
  60. package/lib/components/MenuButton/index.js.map +1 -1
  61. package/lib/components/MenuButton/renderMenuButton.d.ts +2 -4
  62. package/lib/components/MenuButton/renderMenuButton.js +10 -14
  63. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  64. package/lib/components/MenuButton/useMenuButton.d.ts +3 -7
  65. package/lib/components/MenuButton/useMenuButton.js +28 -22
  66. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  67. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +2 -0
  68. package/lib/components/MenuButton/useMenuButtonStyles.js +34 -0
  69. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -0
  70. package/lib/components/SplitButton/SplitButton.d.ts +5 -5
  71. package/lib/components/SplitButton/SplitButton.js +9 -22
  72. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  73. package/lib/components/SplitButton/SplitButton.types.d.ts +12 -28
  74. package/lib/components/SplitButton/SplitButton.types.js +1 -0
  75. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  76. package/lib/components/SplitButton/index.d.ts +3 -2
  77. package/lib/components/SplitButton/index.js +3 -1
  78. package/lib/components/SplitButton/index.js.map +1 -1
  79. package/lib/components/SplitButton/renderSplitButton.d.ts +2 -4
  80. package/lib/components/SplitButton/renderSplitButton.js +8 -10
  81. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  82. package/lib/components/SplitButton/useSplitButton.d.ts +5 -7
  83. package/lib/components/SplitButton/useSplitButton.js +69 -47
  84. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  85. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +2 -0
  86. package/lib/components/SplitButton/useSplitButtonStyles.js +77 -0
  87. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -0
  88. package/lib/components/ToggleButton/ToggleButton.d.ts +4 -5
  89. package/lib/components/ToggleButton/ToggleButton.js +8 -11
  90. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  91. package/lib/components/ToggleButton/ToggleButton.types.d.ts +11 -17
  92. package/lib/components/ToggleButton/ToggleButton.types.js +1 -0
  93. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  94. package/lib/components/ToggleButton/index.d.ts +3 -3
  95. package/lib/components/ToggleButton/index.js +4 -3
  96. package/lib/components/ToggleButton/index.js.map +1 -1
  97. package/lib/components/ToggleButton/renderToggleButton.d.ts +1 -0
  98. package/lib/components/ToggleButton/renderToggleButton.js +2 -0
  99. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -0
  100. package/lib/components/ToggleButton/useToggleButton.d.ts +8 -5
  101. package/lib/components/ToggleButton/useToggleButton.js +47 -5
  102. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  103. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -0
  104. package/lib/components/ToggleButton/useToggleButtonStyles.js +190 -0
  105. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -0
  106. package/lib/index.d.ts +0 -1
  107. package/lib/index.js +0 -1
  108. package/lib/index.js.map +1 -1
  109. package/lib/tsdoc-metadata.json +1 -1
  110. package/lib-commonjs/Button.js +7 -2
  111. package/lib-commonjs/Button.js.map +1 -1
  112. package/lib-commonjs/CompoundButton.js +7 -2
  113. package/lib-commonjs/CompoundButton.js.map +1 -1
  114. package/lib-commonjs/MenuButton.js +7 -2
  115. package/lib-commonjs/MenuButton.js.map +1 -1
  116. package/lib-commonjs/SplitButton.js +7 -2
  117. package/lib-commonjs/SplitButton.js.map +1 -1
  118. package/lib-commonjs/ToggleButton.js +7 -2
  119. package/lib-commonjs/ToggleButton.js.map +1 -1
  120. package/lib-commonjs/common/isConformant.d.ts +4 -2
  121. package/lib-commonjs/common/isConformant.js +19 -7
  122. package/lib-commonjs/common/isConformant.js.map +1 -1
  123. package/lib-commonjs/components/Button/Button.d.ts +4 -5
  124. package/lib-commonjs/components/Button/Button.js +20 -12
  125. package/lib-commonjs/components/Button/Button.js.map +1 -1
  126. package/lib-commonjs/components/Button/Button.types.d.ts +46 -114
  127. package/lib-commonjs/components/Button/Button.types.js +4 -1
  128. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  129. package/lib-commonjs/components/Button/index.d.ts +3 -3
  130. package/lib-commonjs/components/Button/index.js +23 -5
  131. package/lib-commonjs/components/Button/index.js.map +1 -1
  132. package/lib-commonjs/components/Button/renderButton.d.ts +2 -2
  133. package/lib-commonjs/components/Button/renderButton.js +24 -14
  134. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  135. package/lib-commonjs/components/Button/useButton.d.ts +5 -10
  136. package/lib-commonjs/components/Button/useButton.js +59 -25
  137. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  138. package/lib-commonjs/components/Button/useButtonStyles.d.ts +10 -0
  139. package/lib-commonjs/components/Button/useButtonStyles.js +365 -0
  140. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -0
  141. package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +4 -5
  142. package/lib-commonjs/components/CompoundButton/CompoundButton.js +20 -14
  143. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  144. package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +8 -27
  145. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js +4 -1
  146. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  147. package/lib-commonjs/components/CompoundButton/index.d.ts +2 -1
  148. package/lib-commonjs/components/CompoundButton/index.js +22 -3
  149. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  150. package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +2 -2
  151. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +24 -16
  152. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  153. package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +5 -10
  154. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +35 -28
  155. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  156. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -0
  157. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +175 -0
  158. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -0
  159. package/lib-commonjs/components/MenuButton/MenuButton.d.ts +4 -5
  160. package/lib-commonjs/components/MenuButton/MenuButton.js +20 -24
  161. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  162. package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +7 -50
  163. package/lib-commonjs/components/MenuButton/MenuButton.types.js +4 -1
  164. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  165. package/lib-commonjs/components/MenuButton/index.d.ts +2 -3
  166. package/lib-commonjs/components/MenuButton/index.js +22 -5
  167. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  168. package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +2 -4
  169. package/lib-commonjs/components/MenuButton/renderMenuButton.js +24 -18
  170. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  171. package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +3 -7
  172. package/lib-commonjs/components/MenuButton/useMenuButton.js +41 -23
  173. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  174. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +2 -0
  175. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +44 -0
  176. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -0
  177. package/lib-commonjs/components/SplitButton/SplitButton.d.ts +5 -5
  178. package/lib-commonjs/components/SplitButton/SplitButton.js +21 -25
  179. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  180. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +12 -28
  181. package/lib-commonjs/components/SplitButton/SplitButton.types.js +4 -1
  182. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  183. package/lib-commonjs/components/SplitButton/index.d.ts +3 -2
  184. package/lib-commonjs/components/SplitButton/index.js +22 -3
  185. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  186. package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +2 -4
  187. package/lib-commonjs/components/SplitButton/renderSplitButton.js +22 -14
  188. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  189. package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +5 -7
  190. package/lib-commonjs/components/SplitButton/useSplitButton.js +81 -48
  191. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  192. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +2 -0
  193. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +88 -0
  194. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -0
  195. package/lib-commonjs/components/ToggleButton/ToggleButton.d.ts +4 -5
  196. package/lib-commonjs/components/ToggleButton/ToggleButton.js +20 -14
  197. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  198. package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +11 -17
  199. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js +4 -1
  200. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  201. package/lib-commonjs/components/ToggleButton/index.d.ts +3 -3
  202. package/lib-commonjs/components/ToggleButton/index.js +23 -5
  203. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  204. package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -0
  205. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +16 -0
  206. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -0
  207. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +8 -5
  208. package/lib-commonjs/components/ToggleButton/useToggleButton.js +60 -7
  209. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  210. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -0
  211. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +200 -0
  212. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -0
  213. package/lib-commonjs/index.d.ts +0 -1
  214. package/lib-commonjs/index.js +11 -3
  215. package/lib-commonjs/index.js.map +1 -1
  216. package/package.json +37 -35
  217. package/config/api-extractor.json +0 -3
  218. package/config/pre-copy.json +0 -9
  219. package/config/tests.js +0 -11
  220. package/etc/react-button.api.md +0 -335
  221. package/just.config.ts +0 -3
  222. package/lib/components/Button/useButtonClasses.d.ts +0 -29
  223. package/lib/components/Button/useButtonClasses.js +0 -417
  224. package/lib/components/Button/useButtonClasses.js.map +0 -1
  225. package/lib/components/Button/useButtonState.d.ts +0 -6
  226. package/lib/components/Button/useButtonState.js +0 -28
  227. package/lib/components/Button/useButtonState.js.map +0 -1
  228. package/lib/components/CompoundButton/useCompoundButtonClasses.d.ts +0 -4
  229. package/lib/components/CompoundButton/useCompoundButtonClasses.js +0 -180
  230. package/lib/components/CompoundButton/useCompoundButtonClasses.js.map +0 -1
  231. package/lib/components/MenuButton/useExpanded.d.ts +0 -18
  232. package/lib/components/MenuButton/useExpanded.js +0 -61
  233. package/lib/components/MenuButton/useExpanded.js.map +0 -1
  234. package/lib/components/MenuButton/useMenuButtonClasses.d.ts +0 -3
  235. package/lib/components/MenuButton/useMenuButtonClasses.js +0 -78
  236. package/lib/components/MenuButton/useMenuButtonClasses.js.map +0 -1
  237. package/lib/components/MenuButton/useMenuButtonState.d.ts +0 -2
  238. package/lib/components/MenuButton/useMenuButtonState.js +0 -9
  239. package/lib/components/MenuButton/useMenuButtonState.js.map +0 -1
  240. package/lib/components/SplitButton/useSplitButtonClasses.d.ts +0 -3
  241. package/lib/components/SplitButton/useSplitButtonClasses.js +0 -123
  242. package/lib/components/SplitButton/useSplitButtonClasses.js.map +0 -1
  243. package/lib/components/ToggleButton/useChecked.d.ts +0 -14
  244. package/lib/components/ToggleButton/useChecked.js +0 -25
  245. package/lib/components/ToggleButton/useChecked.js.map +0 -1
  246. package/lib/components/ToggleButton/useToggleButtonClasses.d.ts +0 -3
  247. package/lib/components/ToggleButton/useToggleButtonClasses.js +0 -130
  248. package/lib/components/ToggleButton/useToggleButtonClasses.js.map +0 -1
  249. package/lib/utils/tempTypes.d.ts +0 -33
  250. package/lib/utils/tempTypes.js +0 -4
  251. package/lib/utils/tempTypes.js.map +0 -1
  252. package/lib/version.d.ts +0 -1
  253. package/lib/version.js +0 -5
  254. package/lib/version.js.map +0 -1
  255. package/lib-amd/Button.d.ts +0 -1
  256. package/lib-amd/Button.js +0 -6
  257. package/lib-amd/Button.js.map +0 -1
  258. package/lib-amd/CompoundButton.d.ts +0 -1
  259. package/lib-amd/CompoundButton.js +0 -6
  260. package/lib-amd/CompoundButton.js.map +0 -1
  261. package/lib-amd/MenuButton.d.ts +0 -1
  262. package/lib-amd/MenuButton.js +0 -6
  263. package/lib-amd/MenuButton.js.map +0 -1
  264. package/lib-amd/SplitButton.d.ts +0 -1
  265. package/lib-amd/SplitButton.js +0 -6
  266. package/lib-amd/SplitButton.js.map +0 -1
  267. package/lib-amd/ToggleButton.d.ts +0 -1
  268. package/lib-amd/ToggleButton.js +0 -6
  269. package/lib-amd/ToggleButton.js.map +0 -1
  270. package/lib-amd/common/isConformant.d.ts +0 -2
  271. package/lib-amd/common/isConformant.js +0 -13
  272. package/lib-amd/common/isConformant.js.map +0 -1
  273. package/lib-amd/components/Button/Button.d.ts +0 -7
  274. package/lib-amd/components/Button/Button.js +0 -16
  275. package/lib-amd/components/Button/Button.js.map +0 -1
  276. package/lib-amd/components/Button/Button.types.d.ts +0 -130
  277. package/lib-amd/components/Button/Button.types.js +0 -5
  278. package/lib-amd/components/Button/Button.types.js.map +0 -1
  279. package/lib-amd/components/Button/index.d.ts +0 -5
  280. package/lib-amd/components/Button/index.js +0 -9
  281. package/lib-amd/components/Button/index.js.map +0 -1
  282. package/lib-amd/components/Button/renderButton.d.ts +0 -5
  283. package/lib-amd/components/Button/renderButton.js +0 -17
  284. package/lib-amd/components/Button/renderButton.js.map +0 -1
  285. package/lib-amd/components/Button/useButton.d.ts +0 -13
  286. package/lib-amd/components/Button/useButton.js +0 -28
  287. package/lib-amd/components/Button/useButton.js.map +0 -1
  288. package/lib-amd/components/Button/useButtonClasses.d.ts +0 -29
  289. package/lib-amd/components/Button/useButtonClasses.js +0 -417
  290. package/lib-amd/components/Button/useButtonClasses.js.map +0 -1
  291. package/lib-amd/components/Button/useButtonState.d.ts +0 -6
  292. package/lib-amd/components/Button/useButtonState.js +0 -32
  293. package/lib-amd/components/Button/useButtonState.js.map +0 -1
  294. package/lib-amd/components/CompoundButton/CompoundButton.d.ts +0 -7
  295. package/lib-amd/components/CompoundButton/CompoundButton.js +0 -17
  296. package/lib-amd/components/CompoundButton/CompoundButton.js.map +0 -1
  297. package/lib-amd/components/CompoundButton/CompoundButton.types.d.ts +0 -33
  298. package/lib-amd/components/CompoundButton/CompoundButton.types.js +0 -5
  299. package/lib-amd/components/CompoundButton/CompoundButton.types.js.map +0 -1
  300. package/lib-amd/components/CompoundButton/index.d.ts +0 -4
  301. package/lib-amd/components/CompoundButton/index.js +0 -8
  302. package/lib-amd/components/CompoundButton/index.js.map +0 -1
  303. package/lib-amd/components/CompoundButton/renderCompoundButton.d.ts +0 -5
  304. package/lib-amd/components/CompoundButton/renderCompoundButton.js +0 -19
  305. package/lib-amd/components/CompoundButton/renderCompoundButton.js.map +0 -1
  306. package/lib-amd/components/CompoundButton/useCompoundButton.d.ts +0 -13
  307. package/lib-amd/components/CompoundButton/useCompoundButton.js +0 -32
  308. package/lib-amd/components/CompoundButton/useCompoundButton.js.map +0 -1
  309. package/lib-amd/components/CompoundButton/useCompoundButtonClasses.d.ts +0 -4
  310. package/lib-amd/components/CompoundButton/useCompoundButtonClasses.js +0 -182
  311. package/lib-amd/components/CompoundButton/useCompoundButtonClasses.js.map +0 -1
  312. package/lib-amd/components/MenuButton/MenuButton.d.ts +0 -7
  313. package/lib-amd/components/MenuButton/MenuButton.js +0 -26
  314. package/lib-amd/components/MenuButton/MenuButton.js.map +0 -1
  315. package/lib-amd/components/MenuButton/MenuButton.types.d.ts +0 -54
  316. package/lib-amd/components/MenuButton/MenuButton.types.js +0 -5
  317. package/lib-amd/components/MenuButton/MenuButton.types.js.map +0 -1
  318. package/lib-amd/components/MenuButton/index.d.ts +0 -6
  319. package/lib-amd/components/MenuButton/index.js +0 -10
  320. package/lib-amd/components/MenuButton/index.js.map +0 -1
  321. package/lib-amd/components/MenuButton/renderMenuButton.d.ts +0 -7
  322. package/lib-amd/components/MenuButton/renderMenuButton.js +0 -21
  323. package/lib-amd/components/MenuButton/renderMenuButton.js.map +0 -1
  324. package/lib-amd/components/MenuButton/useExpanded.d.ts +0 -18
  325. package/lib-amd/components/MenuButton/useExpanded.js +0 -62
  326. package/lib-amd/components/MenuButton/useExpanded.js.map +0 -1
  327. package/lib-amd/components/MenuButton/useMenuButton.d.ts +0 -10
  328. package/lib-amd/components/MenuButton/useMenuButton.js +0 -27
  329. package/lib-amd/components/MenuButton/useMenuButton.js.map +0 -1
  330. package/lib-amd/components/MenuButton/useMenuButtonClasses.d.ts +0 -3
  331. package/lib-amd/components/MenuButton/useMenuButtonClasses.js +0 -81
  332. package/lib-amd/components/MenuButton/useMenuButtonClasses.js.map +0 -1
  333. package/lib-amd/components/MenuButton/useMenuButtonState.d.ts +0 -2
  334. package/lib-amd/components/MenuButton/useMenuButtonState.js +0 -11
  335. package/lib-amd/components/MenuButton/useMenuButtonState.js.map +0 -1
  336. package/lib-amd/components/SplitButton/SplitButton.d.ts +0 -7
  337. package/lib-amd/components/SplitButton/SplitButton.js +0 -26
  338. package/lib-amd/components/SplitButton/SplitButton.js.map +0 -1
  339. package/lib-amd/components/SplitButton/SplitButton.types.d.ts +0 -35
  340. package/lib-amd/components/SplitButton/SplitButton.types.js +0 -5
  341. package/lib-amd/components/SplitButton/SplitButton.types.js.map +0 -1
  342. package/lib-amd/components/SplitButton/index.d.ts +0 -4
  343. package/lib-amd/components/SplitButton/index.js +0 -8
  344. package/lib-amd/components/SplitButton/index.js.map +0 -1
  345. package/lib-amd/components/SplitButton/renderSplitButton.d.ts +0 -7
  346. package/lib-amd/components/SplitButton/renderSplitButton.js +0 -17
  347. package/lib-amd/components/SplitButton/renderSplitButton.js.map +0 -1
  348. package/lib-amd/components/SplitButton/useSplitButton.d.ts +0 -10
  349. package/lib-amd/components/SplitButton/useSplitButton.js +0 -50
  350. package/lib-amd/components/SplitButton/useSplitButton.js.map +0 -1
  351. package/lib-amd/components/SplitButton/useSplitButtonClasses.d.ts +0 -3
  352. package/lib-amd/components/SplitButton/useSplitButtonClasses.js +0 -123
  353. package/lib-amd/components/SplitButton/useSplitButtonClasses.js.map +0 -1
  354. package/lib-amd/components/ToggleButton/ToggleButton.d.ts +0 -7
  355. package/lib-amd/components/ToggleButton/ToggleButton.js +0 -17
  356. package/lib-amd/components/ToggleButton/ToggleButton.js.map +0 -1
  357. package/lib-amd/components/ToggleButton/ToggleButton.types.d.ts +0 -25
  358. package/lib-amd/components/ToggleButton/ToggleButton.types.js +0 -5
  359. package/lib-amd/components/ToggleButton/ToggleButton.types.js.map +0 -1
  360. package/lib-amd/components/ToggleButton/index.d.ts +0 -5
  361. package/lib-amd/components/ToggleButton/index.js +0 -9
  362. package/lib-amd/components/ToggleButton/index.js.map +0 -1
  363. package/lib-amd/components/ToggleButton/useChecked.d.ts +0 -14
  364. package/lib-amd/components/ToggleButton/useChecked.js +0 -27
  365. package/lib-amd/components/ToggleButton/useChecked.js.map +0 -1
  366. package/lib-amd/components/ToggleButton/useToggleButton.d.ts +0 -6
  367. package/lib-amd/components/ToggleButton/useToggleButton.js +0 -10
  368. package/lib-amd/components/ToggleButton/useToggleButton.js.map +0 -1
  369. package/lib-amd/components/ToggleButton/useToggleButtonClasses.d.ts +0 -3
  370. package/lib-amd/components/ToggleButton/useToggleButtonClasses.js +0 -132
  371. package/lib-amd/components/ToggleButton/useToggleButtonClasses.js.map +0 -1
  372. package/lib-amd/index.d.ts +0 -6
  373. package/lib-amd/index.js +0 -10
  374. package/lib-amd/index.js.map +0 -1
  375. package/lib-amd/utils/tempTypes.d.ts +0 -33
  376. package/lib-amd/utils/tempTypes.js +0 -8
  377. package/lib-amd/utils/tempTypes.js.map +0 -1
  378. package/lib-amd/version.d.ts +0 -1
  379. package/lib-amd/version.js +0 -6
  380. package/lib-amd/version.js.map +0 -1
  381. package/lib-commonjs/components/Button/useButtonClasses.d.ts +0 -29
  382. package/lib-commonjs/components/Button/useButtonClasses.js +0 -419
  383. package/lib-commonjs/components/Button/useButtonClasses.js.map +0 -1
  384. package/lib-commonjs/components/Button/useButtonState.d.ts +0 -6
  385. package/lib-commonjs/components/Button/useButtonState.js +0 -30
  386. package/lib-commonjs/components/Button/useButtonState.js.map +0 -1
  387. package/lib-commonjs/components/CompoundButton/useCompoundButtonClasses.d.ts +0 -4
  388. package/lib-commonjs/components/CompoundButton/useCompoundButtonClasses.js +0 -182
  389. package/lib-commonjs/components/CompoundButton/useCompoundButtonClasses.js.map +0 -1
  390. package/lib-commonjs/components/MenuButton/useExpanded.d.ts +0 -18
  391. package/lib-commonjs/components/MenuButton/useExpanded.js +0 -63
  392. package/lib-commonjs/components/MenuButton/useExpanded.js.map +0 -1
  393. package/lib-commonjs/components/MenuButton/useMenuButtonClasses.d.ts +0 -3
  394. package/lib-commonjs/components/MenuButton/useMenuButtonClasses.js +0 -80
  395. package/lib-commonjs/components/MenuButton/useMenuButtonClasses.js.map +0 -1
  396. package/lib-commonjs/components/MenuButton/useMenuButtonState.d.ts +0 -2
  397. package/lib-commonjs/components/MenuButton/useMenuButtonState.js +0 -11
  398. package/lib-commonjs/components/MenuButton/useMenuButtonState.js.map +0 -1
  399. package/lib-commonjs/components/SplitButton/useSplitButtonClasses.d.ts +0 -3
  400. package/lib-commonjs/components/SplitButton/useSplitButtonClasses.js +0 -125
  401. package/lib-commonjs/components/SplitButton/useSplitButtonClasses.js.map +0 -1
  402. package/lib-commonjs/components/ToggleButton/useChecked.d.ts +0 -14
  403. package/lib-commonjs/components/ToggleButton/useChecked.js +0 -27
  404. package/lib-commonjs/components/ToggleButton/useChecked.js.map +0 -1
  405. package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.d.ts +0 -3
  406. package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.js +0 -132
  407. package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.js.map +0 -1
  408. package/lib-commonjs/utils/tempTypes.d.ts +0 -33
  409. package/lib-commonjs/utils/tempTypes.js +0 -6
  410. package/lib-commonjs/utils/tempTypes.js.map +0 -1
  411. package/lib-commonjs/version.d.ts +0 -1
  412. package/lib-commonjs/version.js +0 -7
  413. package/lib-commonjs/version.js.map +0 -1
  414. package/src/components/Button/Button.types.ts +0 -166
  415. package/src/components/CompoundButton/CompoundButton.types.ts +0 -37
  416. package/src/components/MenuButton/MenuButton.types.ts +0 -63
  417. package/src/components/SplitButton/SplitButton.types.ts +0 -41
  418. package/src/components/ToggleButton/ToggleButton.types.ts +0 -29
@@ -1,182 +0,0 @@
1
- "use strict";
2
- var _a;
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- var react_theme_provider_1 = require("@fluentui/react-theme-provider");
5
- var useButtonClasses_1 = require("../Button/useButtonClasses");
6
- var GlobalClassNames = {
7
- root: 'ms-CompoundButton',
8
- contentContainer: 'ms-CompoundButton-contentContainer',
9
- secondaryContent: 'ms-CompoundButton-secondaryContent',
10
- };
11
- exports.useClasses = react_theme_provider_1.makeVariantClasses({
12
- name: 'CompoundButton',
13
- prefix: '--button',
14
- styles: {
15
- root: [
16
- GlobalClassNames.root,
17
- {
18
- alignItems: 'flex-start',
19
- },
20
- ],
21
- contentContainer: [
22
- GlobalClassNames.contentContainer,
23
- {
24
- display: 'flex',
25
- flexDirection: 'column',
26
- textAlign: 'left',
27
- },
28
- ],
29
- secondaryContent: [
30
- GlobalClassNames.secondaryContent,
31
- (_a = {
32
- color: 'var(--button-secondaryContentColor, var(--button-contentColor))',
33
- fontSize: 'var(--button-secondaryContentFontSize)',
34
- fontWeight: 'var(--button-secondaryContentFontWeight)',
35
- lineHeight: '100%',
36
- marginTop: 'var(--button-secondaryContentGap)',
37
- '@media (forced-colors: active)': {
38
- color: 'var(--button-highContrast-secondaryContentColor)',
39
- }
40
- },
41
- _a["." + GlobalClassNames.root + ":hover &"] = {
42
- color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',
43
- '@media (forced-colors: active)': {
44
- color: 'var(--button-highContrast-hovered-secondaryContentColor, ' +
45
- 'var(--button-highContrast-secondaryContentColor))',
46
- },
47
- },
48
- _a["." + GlobalClassNames.root + ":active &"] = {
49
- color: 'var(--button-pressed-secondaryContentColor, ' +
50
- 'var(--button-hovered-secondaryContentColor, ' +
51
- 'var(--button-secondaryContentColor)))',
52
- '@media (forced-colors: active)': {
53
- color: 'var(--button-highContrast-pressed-secondaryContentColor, ' +
54
- 'var(--button-highContrast-hovered-secondaryContentColor, ' +
55
- 'var(--button-highContrast-secondaryContentColor)))',
56
- },
57
- },
58
- _a["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = {
59
- color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',
60
- '@media (forced-colors: active)': {
61
- color: 'var(--button-highContrast-disabled-secondaryContentColor, ' +
62
- 'var(--button-highContrast-secondaryContentColor))',
63
- },
64
- },
65
- _a),
66
- ],
67
- },
68
- variants: function (theme) {
69
- var _a, _b;
70
- var fonts = theme.fonts, palette = theme.palette, semanticColors = theme.semanticColors;
71
- return {
72
- root: {
73
- height: 'auto',
74
- maxWidth: '280px',
75
- minWidth: '72px',
76
- paddingBottom: '16px',
77
- paddingLeft: '12px',
78
- paddingRight: '12px',
79
- paddingTop: '16px',
80
- iconSize: '28px',
81
- secondaryContentColor: palette.neutralSecondary,
82
- secondaryContentGap: '4px',
83
- secondaryContentFontSize: (_a = fonts) === null || _a === void 0 ? void 0 : _a.small.fontSize,
84
- secondaryContentFontWeight: 'normal',
85
- hovered: {
86
- secondaryContentColor: palette.neutralDark,
87
- },
88
- pressed: {
89
- secondaryContentColor: semanticColors.buttonTextPressed,
90
- },
91
- disabled: {
92
- secondaryContentColor: semanticColors.buttonTextDisabled,
93
- },
94
- highContrast: {
95
- secondaryContentColor: 'WindowText',
96
- hovered: {
97
- secondaryContentColor: 'Highlight',
98
- },
99
- pressed: {
100
- secondaryContentColor: 'WindowText',
101
- },
102
- disabled: {
103
- secondaryContentColor: 'GrayText',
104
- },
105
- },
106
- },
107
- block: {
108
- maxWidth: '100%',
109
- },
110
- iconOnly: {
111
- minHeight: 'var(--button-size-regular)',
112
- width: 'var(--button-minHeight)',
113
- minWidth: '0',
114
- paddingBottom: '0',
115
- paddingTop: '0',
116
- paddingLeft: '0',
117
- paddingRight: '0',
118
- },
119
- primary: {
120
- secondaryContentColor: 'var(--color-brand-secondaryContentColor)',
121
- focused: {
122
- secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',
123
- },
124
- hovered: {
125
- secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',
126
- },
127
- pressed: {
128
- secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',
129
- },
130
- highContrast: {
131
- secondaryContentColor: 'Window',
132
- hovered: {
133
- secondaryContentColor: 'Window',
134
- },
135
- pressed: {
136
- secondaryContentColor: 'Window',
137
- },
138
- disabled: {
139
- secondaryContentColor: 'GrayText',
140
- },
141
- },
142
- },
143
- ghost: {
144
- secondaryContentColor: palette.neutralSecondary,
145
- disabled: {
146
- secondaryContentColor: palette.neutralTertiary,
147
- },
148
- focused: {
149
- secondaryContentColor: palette.neutralSecondary,
150
- },
151
- hovered: {
152
- secondaryContentColor: palette.neutralDark,
153
- },
154
- pressed: {
155
- secondaryContentColor: palette.black,
156
- },
157
- highContrast: {
158
- secondaryContentColor: 'WindowText',
159
- hovered: {
160
- secondaryContentColor: 'Highlight',
161
- },
162
- pressed: {
163
- secondaryContentColor: 'Highlight',
164
- },
165
- disabled: {
166
- secondaryContentColor: 'GrayText',
167
- },
168
- },
169
- },
170
- transparent: {
171
- hovered: {
172
- secondaryContentColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
173
- },
174
- },
175
- };
176
- },
177
- });
178
- exports.useCompoundButtonClasses = function (state) {
179
- useButtonClasses_1.useButtonClasses(state);
180
- exports.useClasses(state);
181
- };
182
- //# sourceMappingURL=useCompoundButtonClasses.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCompoundButtonClasses.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { CompoundButtonState, CompoundButtonVariants } from './CompoundButton.types';\nimport { useButtonClasses } from '../Button/useButtonClasses';\n\nconst GlobalClassNames = {\n root: 'ms-CompoundButton',\n contentContainer: 'ms-CompoundButton-contentContainer',\n secondaryContent: 'ms-CompoundButton-secondaryContent',\n};\n\nexport const useClasses = makeVariantClasses<CompoundButtonState, CompoundButtonVariants>({\n name: 'CompoundButton',\n prefix: '--button',\n styles: {\n root: [\n GlobalClassNames.root,\n {\n alignItems: 'flex-start',\n },\n ],\n\n contentContainer: [\n GlobalClassNames.contentContainer,\n {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n ],\n\n secondaryContent: [\n GlobalClassNames.secondaryContent,\n {\n color: 'var(--button-secondaryContentColor, var(--button-contentColor))',\n fontSize: 'var(--button-secondaryContentFontSize)',\n fontWeight: 'var(--button-secondaryContentFontWeight)',\n lineHeight: '100%',\n marginTop: 'var(--button-secondaryContentGap)',\n\n '@media (forced-colors: active)': {\n color: 'var(--button-highContrast-secondaryContentColor)',\n },\n\n [`.${GlobalClassNames.root}:hover &`]: {\n color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',\n\n '@media (forced-colors: active)': {\n color:\n 'var(--button-highContrast-hovered-secondaryContentColor, ' +\n 'var(--button-highContrast-secondaryContentColor))',\n },\n },\n\n [`.${GlobalClassNames.root}:active &`]: {\n color:\n 'var(--button-pressed-secondaryContentColor, ' +\n 'var(--button-hovered-secondaryContentColor, ' +\n 'var(--button-secondaryContentColor)))',\n\n '@media (forced-colors: active)': {\n color:\n 'var(--button-highContrast-pressed-secondaryContentColor, ' +\n 'var(--button-highContrast-hovered-secondaryContentColor, ' +\n 'var(--button-highContrast-secondaryContentColor)))',\n },\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',\n\n '@media (forced-colors: active)': {\n color:\n 'var(--button-highContrast-disabled-secondaryContentColor, ' +\n 'var(--button-highContrast-secondaryContentColor))',\n },\n },\n },\n ],\n },\n\n variants: (theme: Theme): CompoundButtonVariants => {\n const { fonts, palette, semanticColors } = theme;\n\n return {\n root: {\n height: 'auto',\n maxWidth: '280px',\n minWidth: '72px',\n paddingBottom: '16px',\n paddingLeft: '12px',\n paddingRight: '12px',\n paddingTop: '16px',\n iconSize: '28px',\n secondaryContentColor: palette.neutralSecondary,\n secondaryContentGap: '4px',\n secondaryContentFontSize: fonts?.small.fontSize as string,\n secondaryContentFontWeight: 'normal',\n\n hovered: {\n secondaryContentColor: palette.neutralDark,\n },\n\n pressed: {\n secondaryContentColor: semanticColors.buttonTextPressed,\n },\n\n disabled: {\n secondaryContentColor: semanticColors.buttonTextDisabled,\n },\n\n highContrast: {\n secondaryContentColor: 'WindowText',\n hovered: {\n secondaryContentColor: 'Highlight',\n },\n pressed: {\n secondaryContentColor: 'WindowText',\n },\n disabled: {\n secondaryContentColor: 'GrayText',\n },\n },\n },\n\n block: {\n maxWidth: '100%',\n },\n\n iconOnly: {\n minHeight: 'var(--button-size-regular)',\n width: 'var(--button-minHeight)',\n minWidth: '0',\n paddingBottom: '0',\n paddingTop: '0',\n paddingLeft: '0',\n paddingRight: '0',\n },\n\n primary: {\n secondaryContentColor: 'var(--color-brand-secondaryContentColor)',\n\n focused: {\n secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',\n },\n\n hovered: {\n secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',\n },\n\n pressed: {\n secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',\n },\n\n highContrast: {\n secondaryContentColor: 'Window',\n hovered: {\n secondaryContentColor: 'Window',\n },\n pressed: {\n secondaryContentColor: 'Window',\n },\n disabled: {\n secondaryContentColor: 'GrayText',\n },\n },\n },\n\n ghost: {\n secondaryContentColor: palette.neutralSecondary,\n disabled: {\n secondaryContentColor: palette.neutralTertiary,\n },\n focused: {\n secondaryContentColor: palette.neutralSecondary,\n },\n hovered: {\n secondaryContentColor: palette.neutralDark,\n },\n pressed: {\n secondaryContentColor: palette.black,\n },\n\n highContrast: {\n secondaryContentColor: 'WindowText',\n hovered: {\n secondaryContentColor: 'Highlight',\n },\n pressed: {\n secondaryContentColor: 'Highlight',\n },\n disabled: {\n secondaryContentColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n hovered: {\n secondaryContentColor: palette?.themePrimary,\n },\n },\n };\n },\n});\n\nexport const useCompoundButtonClasses = (state: CompoundButtonState) => {\n useButtonClasses(state);\n useClasses(state);\n};\n"]}
@@ -1,18 +0,0 @@
1
- import * as React from 'react';
2
- import { MenuButtonState, MinimalMenuProps } from './MenuButton.types';
3
- export declare type ExpandedState = {
4
- ref?: React.Ref<unknown>;
5
- expanded?: boolean;
6
- defaultExpanded?: boolean;
7
- onClick?: (ev: React.MouseEvent) => void;
8
- onMenuDismiss?: () => void;
9
- onKeyDown?: (ev: React.KeyboardEvent) => void;
10
- 'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];
11
- 'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];
12
- menu?: MenuButtonState['menu'];
13
- };
14
- export declare const useMenuContext: () => MinimalMenuProps;
15
- /**
16
- * @param draftState - mutable state object to update to add expanded behavior.
17
- */
18
- export declare const useExpanded: <TDraftState extends ExpandedState>(draftState: TDraftState) => void;
@@ -1,63 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var React = require("react");
4
- var react_hooks_1 = require("@fluentui/react-hooks");
5
- var keyboard_key_1 = require("@fluentui/keyboard-key");
6
- var MenuContext = React.createContext({});
7
- exports.useMenuContext = function () {
8
- return React.useContext(MenuContext);
9
- };
10
- /**
11
- * @param draftState - mutable state object to update to add expanded behavior.
12
- */
13
- exports.useExpanded = function (draftState) {
14
- var expanded = draftState.expanded, defaultExpanded = draftState.defaultExpanded, onClick = draftState.onClick, onMenuDismiss = draftState.onMenuDismiss, onKeyDown = draftState.onKeyDown;
15
- var _a = react_hooks_1.useControllableValue(expanded, defaultExpanded), expandedValue = _a[0], setExpandedValue = _a[1];
16
- var rootRef = React.useRef();
17
- // Set up a ref to be used for the menu target.
18
- draftState.ref = react_hooks_1.useMergedRefs(draftState.ref, rootRef);
19
- // Set true value.
20
- draftState.expanded = expandedValue;
21
- // When the root is clicked, toggle menu.
22
- draftState.onClick = React.useCallback(function (ev) {
23
- if (onClick) {
24
- onClick(ev);
25
- if (ev.defaultPrevented) {
26
- return;
27
- }
28
- }
29
- setExpandedValue(!expandedValue);
30
- }, [onClick, expandedValue, setExpandedValue]);
31
- // When alt/meta down arrow is pressed, expand.
32
- draftState.onKeyDown = React.useCallback(function (ev) {
33
- if (onKeyDown) {
34
- onKeyDown(ev);
35
- if (ev.defaultPrevented) {
36
- return;
37
- }
38
- }
39
- if ((ev.altKey || ev.metaKey) && keyboard_key_1.getCode(ev) === keyboard_key_1.ArrowDownKey) {
40
- setExpandedValue(true);
41
- ev.stopPropagation();
42
- ev.preventDefault();
43
- }
44
- }, [onKeyDown, setExpandedValue]);
45
- var onDismiss = React.useCallback(function () {
46
- var _a;
47
- (_a = onMenuDismiss) === null || _a === void 0 ? void 0 : _a();
48
- setExpandedValue(false);
49
- // TODO: should we re-focus the root?
50
- }, [onMenuDismiss, setExpandedValue]);
51
- var menuProps = {
52
- hidden: !expandedValue,
53
- onDismiss: onDismiss,
54
- target: rootRef,
55
- };
56
- // Assign extra props to the menu slot.
57
- draftState.menu = {
58
- children: draftState.menu ? (typeof draftState.menu.children === 'function' ? (draftState.menu.children(menuProps)) : (React.createElement(MenuContext.Provider, { value: menuProps }, draftState.menu.children))) : null,
59
- };
60
- draftState['aria-expanded'] = expandedValue;
61
- draftState['aria-haspopup'] = true;
62
- };
63
- //# sourceMappingURL=useExpanded.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useExpanded.js","sourceRoot":"../src/","sources":["components/MenuButton/useExpanded.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,qDAA4E;AAC5E,uDAA+D;AAgB/D,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAC;AACjD,QAAA,cAAc,GAAG;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF;;GAEG;AACU,QAAA,WAAW,GAAG,UAAoC,UAAuB;IAC5E,IAAA,8BAAQ,EAAE,4CAAe,EAAE,4BAAO,EAAE,wCAAa,EAAE,gCAAS,CAAgB;IAC9E,IAAA,kEAAmF,EAAlF,qBAAa,EAAE,wBAAmE,CAAC;IAC1F,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAA2B,CAAC;IAExD,+CAA+C;IAC/C,UAAU,CAAC,GAAG,GAAG,2BAAa,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAExD,kBAAkB;IAClB,UAAU,CAAC,QAAQ,GAAG,aAAa,CAAC;IAEpC,yCAAyC;IACzC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAuC;QACtC,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,OAAO,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAC3C,CAAC;IAEF,+CAA+C;IAC/C,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,CACtC,UAAC,EAAuB;QACtB,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,EAAE,CAAC,CAAC;YAEd,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,IAAI,CAAC,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,sBAAO,CAAC,EAAE,CAAC,KAAK,2BAAY,EAAE;YAC7D,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;IACH,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,CAAC;IAEF,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;;QAClC,MAAA,aAAa,4CAAK;QAElB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAExB,qCAAqC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEtC,IAAM,SAAS,GAAqB;QAClC,MAAM,EAAE,CAAC,aAAa;QACtB,SAAS,WAAA;QACT,MAAM,EAAE,OAAO;KAChB,CAAC;IAEF,uCAAuC;IACvC,UAAU,CAAC,IAAI,GAAG;QAChB,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,OAAO,UAAU,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAC/C,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACpC,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAwB,CAC1F,CACF,CAAC,CAAC,CAAC,IAAI;KACT,CAAC;IAEF,UAAU,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC;IAC5C,UAAU,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useMergedRefs } from '@fluentui/react-hooks';\nimport { getCode, ArrowDownKey } from '@fluentui/keyboard-key';\nimport { MenuButtonState, MinimalMenuProps } from './MenuButton.types';\n\nexport type ExpandedState = {\n ref?: React.Ref<unknown>;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onClick?: (ev: React.MouseEvent) => void;\n onMenuDismiss?: () => void;\n onKeyDown?: (ev: React.KeyboardEvent) => void;\n 'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];\n 'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];\n\n menu?: MenuButtonState['menu'];\n};\n\nconst MenuContext = React.createContext<MinimalMenuProps>({});\nexport const useMenuContext = () => {\n return React.useContext(MenuContext);\n};\n\n/**\n * @param draftState - mutable state object to update to add expanded behavior.\n */\nexport const useExpanded = <TDraftState extends ExpandedState>(draftState: TDraftState) => {\n const { expanded, defaultExpanded, onClick, onMenuDismiss, onKeyDown } = draftState;\n const [expandedValue, setExpandedValue] = useControllableValue(expanded, defaultExpanded);\n const rootRef = React.useRef<HTMLElement | undefined>();\n\n // Set up a ref to be used for the menu target.\n draftState.ref = useMergedRefs(draftState.ref, rootRef);\n\n // Set true value.\n draftState.expanded = expandedValue;\n\n // When the root is clicked, toggle menu.\n draftState.onClick = React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement>) => {\n if (onClick) {\n onClick(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n setExpandedValue(!expandedValue);\n },\n [onClick, expandedValue, setExpandedValue],\n );\n\n // When alt/meta down arrow is pressed, expand.\n draftState.onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n if ((ev.altKey || ev.metaKey) && getCode(ev) === ArrowDownKey) {\n setExpandedValue(true);\n ev.stopPropagation();\n ev.preventDefault();\n }\n },\n [onKeyDown, setExpandedValue],\n );\n\n const onDismiss = React.useCallback(() => {\n onMenuDismiss?.();\n\n setExpandedValue(false);\n\n // TODO: should we re-focus the root?\n }, [onMenuDismiss, setExpandedValue]);\n\n const menuProps: MinimalMenuProps = {\n hidden: !expandedValue,\n onDismiss,\n target: rootRef,\n };\n\n // Assign extra props to the menu slot.\n draftState.menu = {\n children: draftState.menu ? (\n typeof draftState.menu.children === 'function' ? (\n draftState.menu.children(menuProps)\n ) : (\n <MenuContext.Provider value={menuProps}>{draftState.menu.children}</MenuContext.Provider>\n )\n ) : null,\n };\n\n draftState['aria-expanded'] = expandedValue;\n draftState['aria-haspopup'] = true;\n};\n"]}
@@ -1,3 +0,0 @@
1
- import { Theme } from '@fluentui/react-theme-provider';
2
- import { MenuButtonState } from './MenuButton.types';
3
- export declare const useMenuButtonClasses: (state: MenuButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
@@ -1,80 +0,0 @@
1
- "use strict";
2
- var _a, _b;
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- var react_theme_provider_1 = require("@fluentui/react-theme-provider");
5
- var GlobalClassNames = {
6
- root: 'ms-Button-root',
7
- menuIcon: 'ms-Button-menuIcon',
8
- _disabled: 'ms-Button--disabled',
9
- _iconOnly: 'ms-Button--iconOnly',
10
- _ghost: 'ms-Button--ghost',
11
- _expanded: 'ms-Button--expanded',
12
- };
13
- exports.useMenuButtonClasses = react_theme_provider_1.makeVariantClasses({
14
- name: 'MenuButton',
15
- prefix: '--button',
16
- styles: {
17
- root: [
18
- GlobalClassNames.root,
19
- (_a = {
20
- // This seems like a bad selector.
21
- '& > .ms-Button-menuIcon + *': {
22
- marginLeft: 0,
23
- },
24
- '& .ms-layer': {
25
- position: 'absolute',
26
- }
27
- },
28
- _a["&:hover ." + GlobalClassNames.menuIcon] = {
29
- color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))',
30
- },
31
- _a["&:active ." + GlobalClassNames.menuIcon] = {
32
- color: 'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))',
33
- },
34
- _a),
35
- ],
36
- menuIcon: [
37
- GlobalClassNames.menuIcon,
38
- (_b = {
39
- color: 'var(--button-menuIconColor)',
40
- fontSize: 'var(--button-menuIconSize)'
41
- },
42
- _b["." + GlobalClassNames._disabled + " &"] = {
43
- color: 'var(--button-disabled-menuIconColor)',
44
- },
45
- _b),
46
- ],
47
- _disabled: [GlobalClassNames._disabled],
48
- _iconOnly: [
49
- GlobalClassNames._iconOnly,
50
- {
51
- '& > .ms-Button-icon + *': {
52
- marginLeft: 0,
53
- },
54
- },
55
- ],
56
- },
57
- variants: function (theme) {
58
- var _a, _b, _c, _d;
59
- var palette = theme.palette;
60
- return {
61
- root: {
62
- menuIconSize: '12px',
63
- menuIconColor: 'var(--body-menuIconColor)',
64
- },
65
- ghost: {
66
- menuIconColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralSecondary,
67
- hovered: {
68
- menuIconColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
69
- },
70
- pressed: {
71
- menuIconColor: (_c = palette) === null || _c === void 0 ? void 0 : _c.black,
72
- },
73
- },
74
- transparent: {
75
- menuIconColor: (_d = palette) === null || _d === void 0 ? void 0 : _d.neutralSecondary,
76
- },
77
- };
78
- },
79
- });
80
- //# sourceMappingURL=useMenuButtonClasses.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMenuButtonClasses.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonClasses.ts"],"names":[],"mappings":";;;AAAA,uEAA2E;AAG3E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,gBAAgB;IACtB,QAAQ,EAAE,oBAAoB;IAC9B,SAAS,EAAE,qBAAqB;IAChC,SAAS,EAAE,qBAAqB;IAChC,MAAM,EAAE,kBAAkB;IAC1B,SAAS,EAAE,qBAAqB;CACjC,CAAC;AAEW,QAAA,oBAAoB,GAAG,yCAAkB,CAAsC;IAC1F,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,gBAAgB,CAAC,IAAI;;oBAEnB,kCAAkC;oBAClC,6BAA6B,EAAE;wBAC7B,UAAU,EAAE,CAAC;qBACd;oBAED,aAAa,EAAE;wBACb,QAAQ,EAAE,UAAU;qBACrB;;gBAED,GAAC,cAAY,gBAAgB,CAAC,QAAU,IAAG;oBACzC,KAAK,EAAE,kEAAkE;iBAC1E;gBAED,GAAC,eAAa,gBAAgB,CAAC,QAAU,IAAG;oBAC1C,KAAK,EACH,uGAAuG;iBAC1G;;SAEJ;QAED,QAAQ,EAAE;YACR,gBAAgB,CAAC,QAAQ;;oBAEvB,KAAK,EAAE,6BAA6B;oBACpC,QAAQ,EAAE,4BAA4B;;gBAEtC,GAAC,MAAI,gBAAgB,CAAC,SAAS,OAAI,IAAG;oBACpC,KAAK,EAAE,sCAAsC;iBAC9C;;SAEJ;QAED,SAAS,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC;QAEvC,SAAS,EAAE;YACT,gBAAgB,CAAC,SAAS;YAC1B;gBACE,yBAAyB,EAAE;oBACzB,UAAU,EAAE,CAAC;iBACd;aACF;SACF;KACF;IAED,QAAQ,EAAE,UAAC,KAAY;;QACb,IAAA,uBAAO,CAAW;QAE1B,OAAO;YACL,IAAI,EAAE;gBACJ,YAAY,EAAE,MAAM;gBACpB,aAAa,EAAE,2BAA2B;aAC3C;YAED,KAAK,EAAE;gBACL,aAAa,QAAE,OAAO,0CAAE,gBAAgB;gBACxC,OAAO,EAAE;oBACP,aAAa,QAAE,OAAO,0CAAE,YAAY;iBACrC;gBACD,OAAO,EAAE;oBACP,aAAa,QAAE,OAAO,0CAAE,KAAK;iBAC9B;aACF;YAED,WAAW,EAAE;gBACX,aAAa,QAAE,OAAO,0CAAE,gBAAgB;aACzC;SACF,CAAC;IACJ,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { MenuButtonState, MenuButtonVariants } from './MenuButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-Button-root',\n menuIcon: 'ms-Button-menuIcon',\n _disabled: 'ms-Button--disabled',\n _iconOnly: 'ms-Button--iconOnly',\n _ghost: 'ms-Button--ghost',\n _expanded: 'ms-Button--expanded',\n};\n\nexport const useMenuButtonClasses = makeVariantClasses<MenuButtonState, MenuButtonVariants>({\n name: 'MenuButton',\n prefix: '--button',\n styles: {\n root: [\n GlobalClassNames.root,\n {\n // This seems like a bad selector.\n '& > .ms-Button-menuIcon + *': {\n marginLeft: 0,\n },\n\n '& .ms-layer': {\n position: 'absolute',\n },\n\n [`&:hover .${GlobalClassNames.menuIcon}`]: {\n color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))',\n },\n\n [`&:active .${GlobalClassNames.menuIcon}`]: {\n color:\n 'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))',\n },\n },\n ],\n\n menuIcon: [\n GlobalClassNames.menuIcon,\n {\n color: 'var(--button-menuIconColor)',\n fontSize: 'var(--button-menuIconSize)',\n\n [`.${GlobalClassNames._disabled} &`]: {\n color: 'var(--button-disabled-menuIconColor)',\n },\n },\n ],\n\n _disabled: [GlobalClassNames._disabled],\n\n _iconOnly: [\n GlobalClassNames._iconOnly,\n {\n '& > .ms-Button-icon + *': {\n marginLeft: 0,\n },\n },\n ],\n },\n\n variants: (theme: Theme): MenuButtonVariants => {\n const { palette } = theme;\n\n return {\n root: {\n menuIconSize: '12px',\n menuIconColor: 'var(--body-menuIconColor)',\n },\n\n ghost: {\n menuIconColor: palette?.neutralSecondary,\n hovered: {\n menuIconColor: palette?.themePrimary,\n },\n pressed: {\n menuIconColor: palette?.black,\n },\n },\n\n transparent: {\n menuIconColor: palette?.neutralSecondary,\n },\n };\n },\n});\n"]}
@@ -1,2 +0,0 @@
1
- import { MenuButtonState } from './MenuButton.types';
2
- export declare const useMenuButtonState: (state: MenuButtonState) => void;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var useButtonState_1 = require("../Button/useButtonState");
4
- var useExpanded_1 = require("./useExpanded");
5
- exports.useMenuButtonState = function (state) {
6
- // It behaves like a button.
7
- useButtonState_1.useButtonState(state);
8
- // It can be expanded.
9
- useExpanded_1.useExpanded(state);
10
- };
11
- //# sourceMappingURL=useMenuButtonState.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMenuButtonState.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonState.ts"],"names":[],"mappings":";;AACA,2DAA0D;AAC1D,6CAA4C;AAE/B,QAAA,kBAAkB,GAAG,UAAC,KAAsB;IACvD,4BAA4B;IAC5B,+BAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,sBAAsB;IACtB,yBAAW,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { MenuButtonState } from './MenuButton.types';\nimport { useButtonState } from '../Button/useButtonState';\nimport { useExpanded } from './useExpanded';\n\nexport const useMenuButtonState = (state: MenuButtonState) => {\n // It behaves like a button.\n useButtonState(state);\n\n // It can be expanded.\n useExpanded(state);\n};\n"]}
@@ -1,3 +0,0 @@
1
- import { Theme } from '@fluentui/react-theme-provider';
2
- import { SplitButtonState } from './SplitButton.types';
3
- export declare const useSplitButtonClasses: (state: SplitButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
@@ -1,125 +0,0 @@
1
- "use strict";
2
- var _a, _b, _c, _d;
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- var tslib_1 = require("tslib");
5
- var react_theme_provider_1 = require("@fluentui/react-theme-provider");
6
- var style_utilities_1 = require("@fluentui/style-utilities");
7
- var index_1 = require("../Button/index");
8
- var GlobalClassNames = {
9
- root: 'ms-SplitButton',
10
- button: 'ms-SplitButton-button',
11
- menuButton: 'ms-SplitButton-menuButton',
12
- };
13
- var menuButtonWidth = '32px';
14
- exports.useSplitButtonClasses = react_theme_provider_1.makeVariantClasses({
15
- name: 'SplitButton',
16
- prefix: '--button',
17
- styles: {
18
- root: [
19
- GlobalClassNames.root,
20
- {
21
- display: 'inline-flex',
22
- justifyContent: 'stretch',
23
- position: 'relative',
24
- // Forward the menuIconSize to a variable which can be consumed by the child menu button.
25
- '--button-splitMenuIconSize': 'var(--button-menuIconSize)',
26
- },
27
- ],
28
- button: [
29
- GlobalClassNames.button,
30
- {
31
- '--button-borderRightWidth': 0,
32
- '--button-borderTopRightRadius': 0,
33
- '--button-borderBottomRightRadius': 0,
34
- },
35
- ],
36
- menuButton: [
37
- GlobalClassNames.menuButton,
38
- (_a = {},
39
- // Scope the override to a child component, increase specificity.
40
- _a["." + GlobalClassNames.root + " &"] = {
41
- width: menuButtonWidth,
42
- minWidth: menuButtonWidth,
43
- '--button-borderLeftWidth': 0,
44
- '--button-borderTopLeftRadius': 0,
45
- '--button-borderBottomLeftRadius': 0,
46
- '--button-iconColor': 'var(--button-menuIconColor)',
47
- '--button-iconSize': 'var(--button-splitMenuIconSize)',
48
- },
49
- _a),
50
- ],
51
- divider: (_b = {
52
- width: 'var(--button-dividerThickness)',
53
- backgroundColor: 'var(--button-dividerColor)',
54
- position: 'absolute',
55
- right: menuButtonWidth,
56
- top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',
57
- bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'
58
- },
59
- _b[style_utilities_1.EdgeChromiumHighContrastSelector] = {
60
- backgroundColor: 'var(--button-highContrast-dividerColor)',
61
- },
62
- _b["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = (_c = {
63
- backgroundColor: 'var(--button-disabled-dividerColor)'
64
- },
65
- _c[style_utilities_1.EdgeChromiumHighContrastSelector] = {
66
- backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',
67
- },
68
- _c),
69
- _b),
70
- _block: (_d = {
71
- width: '100%',
72
- maxWidth: '100%'
73
- },
74
- _d["." + GlobalClassNames.button] = {
75
- flexGrow: 1,
76
- maxWidth: '100%',
77
- },
78
- _d["." + GlobalClassNames.menuButton] = {
79
- width: menuButtonWidth,
80
- },
81
- _d),
82
- },
83
- variants: function (theme) {
84
- var _a;
85
- var palette = theme.palette, semanticColors = theme.semanticColors;
86
- return tslib_1.__assign({ root: {
87
- size: {
88
- smallest: '24px',
89
- smaller: '24px',
90
- small: '24px',
91
- regular: '32px',
92
- large: '40px',
93
- larger: '48px',
94
- largest: '64px',
95
- },
96
- dividerThickness: '1px',
97
- dividerColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralTertiaryAlt,
98
- disabled: {
99
- dividerColor: semanticColors.disabledText,
100
- },
101
- menuIconColor: 'var(--body-menuIconColor)',
102
- menuIconSize: '12px',
103
- highContrast: {
104
- dividerColor: 'WindowText',
105
- disabled: {
106
- dividerColor: 'GrayText',
107
- },
108
- },
109
- }, primary: {
110
- dividerColor: palette.white,
111
- disabled: {
112
- dividerColor: semanticColors.disabledText,
113
- },
114
- highContrast: {
115
- dividerColor: 'Window',
116
- disabled: {
117
- dividerColor: 'GrayText',
118
- },
119
- },
120
- }, transparent: {
121
- menuIconColor: palette.neutralSecondary,
122
- } }, index_1.ButtonSizeVariants);
123
- },
124
- });
125
- //# sourceMappingURL=useSplitButtonClasses.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-SplitButton',\n button: 'ms-SplitButton-button',\n menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n name: 'SplitButton',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n\n // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n },\n ],\n\n button: [\n GlobalClassNames.button,\n {\n '--button-borderRightWidth': 0,\n '--button-borderTopRightRadius': 0,\n '--button-borderBottomRightRadius': 0,\n },\n ],\n\n menuButton: [\n GlobalClassNames.menuButton,\n {\n // Scope the override to a child component, increase specificity.\n [`.${GlobalClassNames.root} &`]: {\n width: menuButtonWidth,\n minWidth: menuButtonWidth,\n '--button-borderLeftWidth': 0,\n '--button-borderTopLeftRadius': 0,\n '--button-borderBottomLeftRadius': 0,\n '--button-iconColor': 'var(--button-menuIconColor)',\n '--button-iconSize': 'var(--button-splitMenuIconSize)',\n },\n },\n ],\n\n divider: {\n width: 'var(--button-dividerThickness)',\n backgroundColor: 'var(--button-dividerColor)',\n position: 'absolute',\n right: menuButtonWidth,\n top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-dividerColor)',\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n backgroundColor: 'var(--button-disabled-dividerColor)',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n },\n },\n },\n\n _block: {\n width: '100%',\n maxWidth: '100%',\n\n [`.${GlobalClassNames.button}`]: {\n flexGrow: 1,\n maxWidth: '100%',\n },\n\n [`.${GlobalClassNames.menuButton}`]: {\n width: menuButtonWidth,\n },\n },\n },\n variants: (theme: Theme): SplitButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n dividerThickness: '1px',\n dividerColor: palette?.neutralTertiaryAlt,\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n menuIconColor: 'var(--body-menuIconColor)',\n menuIconSize: '12px',\n\n highContrast: {\n dividerColor: 'WindowText',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n primary: {\n dividerColor: palette.white,\n\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n\n highContrast: {\n dividerColor: 'Window',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n menuIconColor: palette.neutralSecondary,\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- export interface CheckedState {
3
- checked?: boolean;
4
- defaultChecked?: boolean;
5
- onClick?: React.DOMAttributes<HTMLElement>['onClick'];
6
- role?: string;
7
- 'aria-checked'?: React.AriaAttributes['aria-pressed'];
8
- 'aria-pressed'?: React.AriaAttributes['aria-pressed'];
9
- }
10
- /**
11
- * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
12
- * @param draftState - state to read and augment.
13
- */
14
- export declare const useChecked: <TDraftState extends CheckedState>(draftState: TDraftState) => void;
@@ -1,27 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var React = require("react");
4
- var react_hooks_1 = require("@fluentui/react-hooks");
5
- /**
6
- * The useToggle hook processes adds the correct toggled state and acccessibility as needed.
7
- * @param draftState - state to read and augment.
8
- */
9
- exports.useChecked = function (draftState) {
10
- var onClick = draftState.onClick, checked = draftState.checked, defaultChecked = draftState.defaultChecked, role = draftState.role;
11
- var _a = react_hooks_1.useControllableValue(checked, defaultChecked), checkedValue = _a[0], setCheckedValue = _a[1];
12
- // Ensure the state is the correct controlled/uncontrolled value.
13
- draftState.checked = checkedValue;
14
- // Ensure the right aria value is set to represent the checked state.
15
- var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
16
- draftState[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedValue;
17
- draftState.onClick = React.useCallback(function (ev) {
18
- if (onClick) {
19
- onClick(ev);
20
- if (ev.defaultPrevented) {
21
- return;
22
- }
23
- }
24
- setCheckedValue(!checkedValue);
25
- }, [checkedValue, setCheckedValue, onClick]);
26
- };
27
- //# sourceMappingURL=useChecked.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useChecked.js","sourceRoot":"../src/","sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,qDAA6D;AAY7D;;;GAGG;AACU,QAAA,UAAU,GAAG,UAAmC,UAAuB;IAC1E,IAAA,4BAAO,EAAE,4BAAO,EAAE,0CAAc,EAAE,sBAAI,CAAgB;IACxD,IAAA,gEAA+E,EAA9E,oBAAY,EAAE,uBAAgE,CAAC;IAEtF,iEAAiE;IACjE,UAAU,CAAC,OAAO,GAAG,YAAY,CAAC;IAElC,qEAAqE;IACrE,IAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,UAAU,CAAC;IAE9E,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC;IAEhF,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAmD;QAClD,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CACzC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-hooks';\n\nexport interface CheckedState {\n checked?: boolean;\n defaultChecked?: boolean;\n onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n role?: string;\n 'aria-checked'?: React.AriaAttributes['aria-pressed'];\n 'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param draftState - state to read and augment.\n */\nexport const useChecked = <TDraftState extends CheckedState>(draftState: TDraftState) => {\n const { onClick, checked, defaultChecked, role } = draftState;\n const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n // Ensure the state is the correct controlled/uncontrolled value.\n draftState.checked = checkedValue;\n\n // Ensure the right aria value is set to represent the checked state.\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n draftState[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedValue;\n\n draftState.onClick = React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n onClick(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n setCheckedValue(!checkedValue);\n },\n [checkedValue, setCheckedValue, onClick],\n );\n};\n"]}
@@ -1,3 +0,0 @@
1
- import { Theme } from '@fluentui/react-theme-provider';
2
- import { ToggleButtonState } from './ToggleButton.types';
3
- export declare const useToggleButtonClasses: (state: ToggleButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;