@react-md/core 6.2.1 → 6.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (345) hide show
  1. package/dist/_base.scss +1 -1
  2. package/dist/app-bar/styles.d.ts +0 -2
  3. package/dist/app-bar/styles.js.map +1 -1
  4. package/dist/autocomplete/types.d.ts +12 -0
  5. package/dist/autocomplete/types.js.map +1 -1
  6. package/dist/avatar/Avatar.d.ts +0 -10
  7. package/dist/avatar/Avatar.js.map +1 -1
  8. package/dist/avatar/styles.d.ts +10 -0
  9. package/dist/avatar/styles.js.map +1 -1
  10. package/dist/badge/Badge.d.ts +11 -0
  11. package/dist/badge/Badge.js.map +1 -1
  12. package/dist/badge/styles.d.ts +0 -8
  13. package/dist/badge/styles.js.map +1 -1
  14. package/dist/box/_box.scss +8 -8
  15. package/dist/box/styles.d.ts +9 -0
  16. package/dist/box/styles.js.map +1 -1
  17. package/dist/button/_button.scss +4 -0
  18. package/dist/button/styles.d.ts +5 -1
  19. package/dist/button/styles.js.map +1 -1
  20. package/dist/card/Card.d.ts +0 -7
  21. package/dist/card/Card.js.map +1 -1
  22. package/dist/card/styles.d.ts +6 -0
  23. package/dist/card/styles.js +8 -8
  24. package/dist/card/styles.js.map +1 -1
  25. package/dist/chip/Chip.d.ts +6 -13
  26. package/dist/chip/Chip.js.map +1 -1
  27. package/dist/chip/styles.d.ts +26 -1
  28. package/dist/chip/styles.js.map +1 -1
  29. package/dist/datetime/NativeDateField.d.ts +24 -0
  30. package/dist/datetime/NativeDateField.js +63 -0
  31. package/dist/datetime/NativeDateField.js.map +1 -0
  32. package/dist/datetime/NativeTimeField.d.ts +26 -0
  33. package/dist/datetime/NativeTimeField.js +63 -0
  34. package/dist/datetime/NativeTimeField.js.map +1 -0
  35. package/dist/datetime/useDateField.d.ts +120 -0
  36. package/dist/datetime/useDateField.js +35 -0
  37. package/dist/datetime/useDateField.js.map +1 -0
  38. package/dist/datetime/useTimeField.d.ts +124 -0
  39. package/dist/datetime/useTimeField.js +65 -0
  40. package/dist/datetime/useTimeField.js.map +1 -0
  41. package/dist/datetime/utils.d.ts +34 -0
  42. package/dist/datetime/utils.js +27 -0
  43. package/dist/datetime/utils.js.map +1 -0
  44. package/dist/dialog/styles.d.ts +5 -2
  45. package/dist/dialog/styles.js.map +1 -1
  46. package/dist/divider/styles.d.ts +1 -1
  47. package/dist/divider/styles.js.map +1 -1
  48. package/dist/draggable/utils.d.ts +3 -6
  49. package/dist/draggable/utils.js.map +1 -1
  50. package/dist/error-boundary/ErrorBoundary.js.map +1 -1
  51. package/dist/expansion-panel/ExpansionList.js +1 -1
  52. package/dist/expansion-panel/ExpansionList.js.map +1 -1
  53. package/dist/expansion-panel/useExpansionList.d.ts +2 -7
  54. package/dist/expansion-panel/useExpansionList.js.map +1 -1
  55. package/dist/files/validation.js.map +1 -1
  56. package/dist/form/FormMessage.js +3 -1
  57. package/dist/form/FormMessage.js.map +1 -1
  58. package/dist/form/FormMessageContainer.d.ts +2 -1
  59. package/dist/form/FormMessageContainer.js +3 -2
  60. package/dist/form/FormMessageContainer.js.map +1 -1
  61. package/dist/form/FormMessageCounter.d.ts +3 -2
  62. package/dist/form/FormMessageCounter.js +5 -2
  63. package/dist/form/FormMessageCounter.js.map +1 -1
  64. package/dist/form/InputToggle.js.map +1 -1
  65. package/dist/form/Label.d.ts +0 -10
  66. package/dist/form/Label.js.map +1 -1
  67. package/dist/form/Listbox.d.ts +3 -10
  68. package/dist/form/Listbox.js +8 -27
  69. package/dist/form/Listbox.js.map +1 -1
  70. package/dist/form/ListboxProvider.d.ts +17 -0
  71. package/dist/form/ListboxProvider.js +33 -1
  72. package/dist/form/ListboxProvider.js.map +1 -1
  73. package/dist/form/NativeSelect.js +1 -0
  74. package/dist/form/NativeSelect.js.map +1 -1
  75. package/dist/form/Slider.d.ts +4 -0
  76. package/dist/form/Slider.js.map +1 -1
  77. package/dist/form/Switch.js.map +1 -1
  78. package/dist/form/TextArea.js +1 -0
  79. package/dist/form/TextArea.js.map +1 -1
  80. package/dist/form/TextField.js +1 -0
  81. package/dist/form/TextField.js.map +1 -1
  82. package/dist/form/TextFieldContainer.d.ts +0 -13
  83. package/dist/form/TextFieldContainer.js.map +1 -1
  84. package/dist/form/_form-message.scss +13 -0
  85. package/dist/form/_select.scss +5 -1
  86. package/dist/form/_text-area.scss +2 -1
  87. package/dist/form/_text-field.scss +13 -3
  88. package/dist/form/formMessageContainerStyles.d.ts +7 -0
  89. package/dist/form/formMessageContainerStyles.js +4 -2
  90. package/dist/form/formMessageContainerStyles.js.map +1 -1
  91. package/dist/form/sliderUtils.d.ts +3 -7
  92. package/dist/form/sliderUtils.js.map +1 -1
  93. package/dist/form/types.d.ts +33 -0
  94. package/dist/form/types.js.map +1 -1
  95. package/dist/form/useCombobox.d.ts +6 -2
  96. package/dist/form/useCombobox.js +8 -9
  97. package/dist/form/useCombobox.js.map +1 -1
  98. package/dist/form/useFormReset.d.ts +4 -1
  99. package/dist/form/useFormReset.js +9 -4
  100. package/dist/form/useFormReset.js.map +1 -1
  101. package/dist/form/useNumberField.d.ts +5 -5
  102. package/dist/form/useNumberField.js +10 -2
  103. package/dist/form/useNumberField.js.map +1 -1
  104. package/dist/form/useSelectCombobox.js +2 -2
  105. package/dist/form/useSelectCombobox.js.map +1 -1
  106. package/dist/form/useTextField.d.ts +76 -59
  107. package/dist/form/useTextField.js +7 -1
  108. package/dist/form/useTextField.js.map +1 -1
  109. package/dist/interaction/types.d.ts +5 -1
  110. package/dist/interaction/types.js.map +1 -1
  111. package/dist/interaction/utils.d.ts +14 -0
  112. package/dist/interaction/utils.js +23 -12
  113. package/dist/interaction/utils.js.map +1 -1
  114. package/dist/link/Link.d.ts +0 -7
  115. package/dist/link/Link.js.map +1 -1
  116. package/dist/link/styles.d.ts +7 -0
  117. package/dist/link/styles.js.map +1 -1
  118. package/dist/list/List.d.ts +5 -20
  119. package/dist/list/List.js.map +1 -1
  120. package/dist/list/ListItem.d.ts +4 -38
  121. package/dist/list/ListItem.js.map +1 -1
  122. package/dist/list/listItemStyles.d.ts +24 -2
  123. package/dist/list/listItemStyles.js.map +1 -1
  124. package/dist/list/listStyles.d.ts +17 -2
  125. package/dist/list/listStyles.js.map +1 -1
  126. package/dist/menu/Menu.js.map +1 -1
  127. package/dist/menu/MenuBar.js +1 -1
  128. package/dist/menu/MenuBar.js.map +1 -1
  129. package/dist/menu/MenuItemTextField.d.ts +1 -2
  130. package/dist/menu/MenuItemTextField.js.map +1 -1
  131. package/dist/menu/MenuWidget.js +3 -2
  132. package/dist/menu/MenuWidget.js.map +1 -1
  133. package/dist/movement/constants.d.ts +10 -0
  134. package/dist/movement/constants.js +20 -4
  135. package/dist/movement/constants.js.map +1 -1
  136. package/dist/movement/types.d.ts +59 -10
  137. package/dist/movement/types.js.map +1 -1
  138. package/dist/movement/useKeyboardMovementProvider.d.ts +5 -1
  139. package/dist/movement/useKeyboardMovementProvider.js +171 -73
  140. package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
  141. package/dist/navigation/NavItem.d.ts +4 -1
  142. package/dist/navigation/NavItem.js.map +1 -1
  143. package/dist/navigation/navItemStyles.d.ts +7 -0
  144. package/dist/navigation/navItemStyles.js.map +1 -1
  145. package/dist/overlay/Overlay.d.ts +4 -23
  146. package/dist/overlay/Overlay.js.map +1 -1
  147. package/dist/overlay/styles.d.ts +26 -8
  148. package/dist/overlay/styles.js.map +1 -1
  149. package/dist/progress/LinearProgress.d.ts +4 -9
  150. package/dist/progress/LinearProgress.js.map +1 -1
  151. package/dist/progress/circularProgressStyles.d.ts +6 -0
  152. package/dist/progress/circularProgressStyles.js.map +1 -1
  153. package/dist/progress/linearProgressStyles.d.ts +20 -5
  154. package/dist/progress/linearProgressStyles.js.map +1 -1
  155. package/dist/progress/types.d.ts +0 -9
  156. package/dist/progress/types.js.map +1 -1
  157. package/dist/segmented-button/SegmentedButton.d.ts +7 -12
  158. package/dist/segmented-button/SegmentedButton.js.map +1 -1
  159. package/dist/segmented-button/segmentedButtonStyles.d.ts +26 -3
  160. package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
  161. package/dist/sheet/Sheet.d.ts +0 -12
  162. package/dist/sheet/Sheet.js.map +1 -1
  163. package/dist/sheet/styles.d.ts +12 -0
  164. package/dist/sheet/styles.js.map +1 -1
  165. package/dist/snackbar/Toast.d.ts +2 -13
  166. package/dist/snackbar/Toast.js.map +1 -1
  167. package/dist/snackbar/ToastManager.js.map +1 -1
  168. package/dist/snackbar/toastStyles.d.ts +17 -2
  169. package/dist/snackbar/toastStyles.js.map +1 -1
  170. package/dist/tabs/Tab.d.ts +2 -41
  171. package/dist/tabs/Tab.js.map +1 -1
  172. package/dist/tabs/tabStyles.d.ts +45 -4
  173. package/dist/tabs/tabStyles.js.map +1 -1
  174. package/dist/tabs/useTabList.js +1 -1
  175. package/dist/tabs/useTabList.js.map +1 -1
  176. package/dist/test-utils/drag.d.ts +6 -9
  177. package/dist/test-utils/mocks/IntersectionObserver.js.map +1 -1
  178. package/dist/test-utils/mocks/ResizeObserver.js.map +1 -1
  179. package/dist/test-utils/utils/createFileList.js.map +1 -1
  180. package/dist/theme/_theme.scss +0 -1
  181. package/dist/theme/getDerivedTheme.d.ts +0 -24
  182. package/dist/theme/getDerivedTheme.js.map +1 -1
  183. package/dist/theme/types.d.ts +25 -0
  184. package/dist/theme/types.js.map +1 -1
  185. package/dist/tooltip/Tooltip.d.ts +4 -32
  186. package/dist/tooltip/Tooltip.js.map +1 -1
  187. package/dist/tooltip/styles.d.ts +38 -1
  188. package/dist/tooltip/styles.js +1 -1
  189. package/dist/tooltip/styles.js.map +1 -1
  190. package/dist/transition/SkeletonPlaceholder.d.ts +0 -7
  191. package/dist/transition/SkeletonPlaceholder.js.map +1 -1
  192. package/dist/transition/Slide.js.map +1 -1
  193. package/dist/transition/skeletonPlaceholderUtils.d.ts +7 -0
  194. package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
  195. package/dist/transition/useCarousel.d.ts +2 -2
  196. package/dist/transition/useCarousel.js.map +1 -1
  197. package/dist/transition/useMaxWidthTransition.d.ts +14 -2
  198. package/dist/transition/useMaxWidthTransition.js.map +1 -1
  199. package/dist/transition/useSlideTransition.d.ts +5 -0
  200. package/dist/transition/useSlideTransition.js.map +1 -1
  201. package/dist/tree/Tree.d.ts +5 -9
  202. package/dist/tree/Tree.js +1 -1
  203. package/dist/tree/Tree.js.map +1 -1
  204. package/dist/tree/styles.d.ts +9 -1
  205. package/dist/tree/styles.js.map +1 -1
  206. package/dist/tree/useTreeMovement.d.ts +2 -1
  207. package/dist/tree/useTreeMovement.js +2 -1
  208. package/dist/tree/useTreeMovement.js.map +1 -1
  209. package/dist/types.d.ts +14 -0
  210. package/dist/types.js.map +1 -1
  211. package/dist/typography/Mark.d.ts +4 -1
  212. package/dist/typography/Mark.js.map +1 -1
  213. package/dist/typography/TextContainer.d.ts +0 -6
  214. package/dist/typography/TextContainer.js.map +1 -1
  215. package/dist/typography/markStyles.d.ts +5 -0
  216. package/dist/typography/markStyles.js.map +1 -1
  217. package/dist/typography/textContainerStyles.d.ts +6 -0
  218. package/dist/typography/textContainerStyles.js.map +1 -1
  219. package/dist/typography/typographyStyles.d.ts +9 -0
  220. package/dist/typography/typographyStyles.js.map +1 -1
  221. package/dist/useResizeObserver.js.map +1 -1
  222. package/dist/utils/getMiddleOfRange.d.ts +2 -3
  223. package/dist/utils/getMiddleOfRange.js.map +1 -1
  224. package/dist/utils/getPercentage.d.ts +2 -9
  225. package/dist/utils/getPercentage.js +1 -1
  226. package/dist/utils/getPercentage.js.map +1 -1
  227. package/dist/utils/getRangeSteps.d.ts +2 -3
  228. package/dist/utils/getRangeSteps.js +0 -3
  229. package/dist/utils/getRangeSteps.js.map +1 -1
  230. package/dist/utils/nearest.d.ts +2 -3
  231. package/dist/utils/nearest.js +0 -3
  232. package/dist/utils/nearest.js.map +1 -1
  233. package/dist/utils/trigonometry.d.ts +31 -0
  234. package/dist/utils/trigonometry.js +25 -0
  235. package/dist/utils/trigonometry.js.map +1 -0
  236. package/dist/window-splitter/WindowSplitter.d.ts +5 -19
  237. package/dist/window-splitter/WindowSplitter.js.map +1 -1
  238. package/dist/window-splitter/styles.d.ts +27 -3
  239. package/dist/window-splitter/styles.js.map +1 -1
  240. package/dist/window-splitter/useWindowSplitter.d.ts +1 -1
  241. package/dist/window-splitter/useWindowSplitter.js.map +1 -1
  242. package/package.json +8 -8
  243. package/src/app-bar/styles.ts +0 -2
  244. package/src/autocomplete/types.ts +17 -0
  245. package/src/avatar/Avatar.tsx +0 -11
  246. package/src/avatar/styles.ts +11 -0
  247. package/src/badge/Badge.tsx +12 -0
  248. package/src/badge/styles.ts +0 -9
  249. package/src/box/styles.ts +9 -0
  250. package/src/button/styles.ts +5 -1
  251. package/src/card/Card.tsx +0 -8
  252. package/src/card/styles.ts +15 -8
  253. package/src/chip/Chip.tsx +9 -15
  254. package/src/chip/styles.ts +29 -1
  255. package/src/datetime/NativeDateField.tsx +92 -0
  256. package/src/datetime/NativeTimeField.tsx +94 -0
  257. package/src/datetime/useDateField.ts +193 -0
  258. package/src/datetime/useTimeField.ts +233 -0
  259. package/src/datetime/utils.ts +48 -0
  260. package/src/dialog/styles.ts +5 -2
  261. package/src/divider/styles.ts +1 -1
  262. package/src/draggable/utils.ts +3 -6
  263. package/src/expansion-panel/ExpansionList.tsx +2 -1
  264. package/src/expansion-panel/useExpansionList.ts +6 -12
  265. package/src/form/FormMessage.tsx +4 -0
  266. package/src/form/FormMessageContainer.tsx +8 -4
  267. package/src/form/FormMessageCounter.tsx +17 -6
  268. package/src/form/InputToggle.tsx +2 -0
  269. package/src/form/Label.tsx +0 -11
  270. package/src/form/Listbox.tsx +18 -46
  271. package/src/form/ListboxProvider.ts +61 -1
  272. package/src/form/NativeSelect.tsx +1 -0
  273. package/src/form/Slider.tsx +6 -0
  274. package/src/form/Switch.tsx +2 -0
  275. package/src/form/TextArea.tsx +3 -0
  276. package/src/form/TextField.tsx +1 -0
  277. package/src/form/TextFieldContainer.tsx +0 -14
  278. package/src/form/formMessageContainerStyles.ts +10 -2
  279. package/src/form/sliderUtils.ts +3 -7
  280. package/src/form/types.ts +44 -0
  281. package/src/form/useCombobox.ts +15 -10
  282. package/src/form/useFormReset.ts +12 -5
  283. package/src/form/useNumberField.ts +17 -14
  284. package/src/form/useSelectCombobox.ts +2 -2
  285. package/src/form/useTextField.ts +102 -69
  286. package/src/interaction/types.ts +5 -1
  287. package/src/interaction/utils.ts +18 -20
  288. package/src/link/Link.tsx +0 -8
  289. package/src/link/styles.ts +8 -0
  290. package/src/list/List.tsx +7 -24
  291. package/src/list/ListItem.tsx +7 -43
  292. package/src/list/listItemStyles.ts +26 -2
  293. package/src/list/listStyles.ts +18 -2
  294. package/src/menu/Menu.tsx +2 -0
  295. package/src/menu/MenuBar.tsx +1 -1
  296. package/src/menu/MenuItemTextField.tsx +1 -3
  297. package/src/menu/MenuWidget.tsx +4 -2
  298. package/src/movement/constants.ts +26 -4
  299. package/src/movement/types.ts +84 -19
  300. package/src/movement/useKeyboardMovementProvider.ts +209 -95
  301. package/src/navigation/NavItem.tsx +6 -2
  302. package/src/navigation/navItemStyles.ts +8 -0
  303. package/src/overlay/Overlay.tsx +4 -26
  304. package/src/overlay/styles.ts +29 -10
  305. package/src/progress/LinearProgress.tsx +8 -10
  306. package/src/progress/circularProgressStyles.ts +7 -0
  307. package/src/progress/linearProgressStyles.ts +22 -5
  308. package/src/progress/types.ts +0 -10
  309. package/src/segmented-button/SegmentedButton.tsx +14 -15
  310. package/src/segmented-button/segmentedButtonStyles.ts +28 -3
  311. package/src/sheet/Sheet.tsx +0 -13
  312. package/src/sheet/styles.ts +13 -0
  313. package/src/snackbar/Toast.tsx +2 -15
  314. package/src/snackbar/toastStyles.ts +20 -2
  315. package/src/tabs/Tab.tsx +4 -49
  316. package/src/tabs/tabStyles.ts +52 -4
  317. package/src/tabs/useTabList.ts +1 -1
  318. package/src/test-utils/drag.ts +8 -12
  319. package/src/theme/getDerivedTheme.ts +0 -26
  320. package/src/theme/types.ts +26 -0
  321. package/src/tooltip/Tooltip.tsx +4 -36
  322. package/src/tooltip/styles.ts +43 -2
  323. package/src/transition/SkeletonPlaceholder.tsx +0 -8
  324. package/src/transition/Slide.tsx +2 -0
  325. package/src/transition/skeletonPlaceholderUtils.ts +8 -0
  326. package/src/transition/useCarousel.ts +2 -2
  327. package/src/transition/useMaxWidthTransition.ts +17 -2
  328. package/src/transition/useSlideTransition.ts +8 -0
  329. package/src/tree/Tree.tsx +6 -11
  330. package/src/tree/styles.ts +10 -1
  331. package/src/tree/useTreeMovement.ts +4 -0
  332. package/src/types.ts +16 -0
  333. package/src/typography/Mark.tsx +6 -2
  334. package/src/typography/TextContainer.tsx +0 -7
  335. package/src/typography/markStyles.ts +6 -0
  336. package/src/typography/textContainerStyles.ts +7 -0
  337. package/src/typography/typographyStyles.ts +10 -0
  338. package/src/utils/getMiddleOfRange.ts +2 -3
  339. package/src/utils/getPercentage.ts +3 -11
  340. package/src/utils/getRangeSteps.ts +3 -3
  341. package/src/utils/nearest.ts +3 -3
  342. package/src/utils/trigonometry.ts +46 -0
  343. package/src/window-splitter/WindowSplitter.tsx +9 -22
  344. package/src/window-splitter/styles.ts +31 -3
  345. package/src/window-splitter/useWindowSplitter.ts +3 -2
@@ -1,14 +1,37 @@
1
+ declare module "react" {
2
+ interface CSSProperties {
3
+ "--rmd-segmented-button-border-radius"?: string | number;
4
+ "--rmd-segmented-button-min-height"?: string | number;
5
+ "--rmd-segmented-button-min-width"?: string | number;
6
+ "--rmd-segmented-button-outline-width"?: string | number;
7
+ "--rmd-segmented-button-outline-color"?: string | number;
8
+ "--rmd-segmented-button-color"?: string | number;
9
+ "--rmd-segmented-button-selected-background-color"?: string | number;
10
+ "--rmd-segmented-button-selected-color"?: string | number;
11
+ }
12
+ }
1
13
  /**
2
- * @since 6.0.0
14
+ * @since 6.3.1
3
15
  */
4
- export interface SegmentedButtonClassNameOptions {
16
+ export interface BaseSegmentedButtonClassNameOptions {
5
17
  className?: string;
6
- /** @defaultValue `false` */
18
+ /**
19
+ * Set this to `true` to apply selected styles and an optional
20
+ * {@link selectedIcon}
21
+ *
22
+ * @defaultValue `false`
23
+ */
7
24
  selected?: boolean;
8
25
  /**
9
26
  * An optional className to apply when {@link selected} is `true`
10
27
  */
11
28
  selectedClassName?: string;
29
+ }
30
+ /**
31
+ * @since 6.0.0
32
+ * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions
33
+ */
34
+ export interface SegmentedButtonClassNameOptions extends BaseSegmentedButtonClassNameOptions {
12
35
  /** @internal */
13
36
  pressedClassName?: string;
14
37
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/segmented-button/segmentedButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-segmented-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n selected?: boolean;\n\n /**\n * An optional className to apply when {@link selected} is `true`\n */\n selectedClassName?: string;\n\n /** @internal */\n pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function segmentedButton(\n options: SegmentedButtonClassNameOptions = {}\n): string {\n const { className, selected, selectedClassName, pressedClassName } = options;\n\n return cnb(\n styles({ selected }),\n selected && selectedClassName,\n pressedClassName,\n cssUtils({ surface: true }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","segmentedButton","options","className","selected","selectedClassName","pressedClassName","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASE,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGJ;IAErE,OAAOL,IACLG,OAAO;QAAEI;IAAS,IAClBA,YAAYC,mBACZC,kBACAR,SAAS;QAAES,SAAS;IAAK,IACzBJ;AAEJ"}
1
+ {"version":3,"sources":["../../src/segmented-button/segmentedButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-segmented-button\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-segmented-button-border-radius\"?: string | number;\n \"--rmd-segmented-button-min-height\"?: string | number;\n \"--rmd-segmented-button-min-width\"?: string | number;\n \"--rmd-segmented-button-outline-width\"?: string | number;\n \"--rmd-segmented-button-outline-color\"?: string | number;\n \"--rmd-segmented-button-color\"?: string | number;\n \"--rmd-segmented-button-selected-background-color\"?: string | number;\n \"--rmd-segmented-button-selected-color\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseSegmentedButtonClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` to apply selected styles and an optional\n * {@link selectedIcon}\n *\n * @defaultValue `false`\n */\n selected?: boolean;\n\n /**\n * An optional className to apply when {@link selected} is `true`\n */\n selectedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions\n */\nexport interface SegmentedButtonClassNameOptions\n extends BaseSegmentedButtonClassNameOptions {\n /** @internal */\n pressedClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function segmentedButton(\n options: SegmentedButtonClassNameOptions = {}\n): string {\n const { className, selected, selectedClassName, pressedClassName } = options;\n\n return cnb(\n styles({ selected }),\n selected && selectedClassName,\n pressedClassName,\n cssUtils({ surface: true }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","segmentedButton","options","className","selected","selectedClassName","pressedClassName","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA6CnB;;CAEC,GACD,OAAO,SAASE,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGJ;IAErE,OAAOL,IACLG,OAAO;QAAEI;IAAS,IAClBA,YAAYC,mBACZC,kBACAR,SAAS;QAAES,SAAS;IAAK,IACzBJ;AAEJ"}
@@ -1,18 +1,6 @@
1
1
  import { type BaseDialogProps } from "../dialog/Dialog.js";
2
2
  import { type LabelRequiredForA11y } from "../types.js";
3
3
  import { type BaseSheetClassNameOptions } from "./styles.js";
4
- declare module "react" {
5
- interface CSSProperties {
6
- "--rmd-sheet-height"?: string | number;
7
- "--rmd-sheet-width"?: string | number;
8
- "--rmd-sheet-max-height"?: string | number;
9
- "--rmd-sheet-touch-width"?: string | number;
10
- "--rmd-sheet-touch-max-height"?: string | number;
11
- "--rmd-sheet-static-width"?: string | number;
12
- "--rmd-sheet-transform-offscreen"?: string | number;
13
- "--rmd-sheet-z-index"?: number;
14
- }
15
- }
16
4
  /**
17
5
  * @since 6.0.0
18
6
  */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { type BaseDialogProps, Dialog } from \"../dialog/Dialog.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n type BaseSheetClassNameOptions,\n DEFAULT_SHEET_CLASSNAMES,\n DEFAULT_SHEET_TIMEOUT,\n sheet,\n} from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-sheet-height\"?: string | number;\n \"--rmd-sheet-width\"?: string | number;\n \"--rmd-sheet-max-height\"?: string | number;\n \"--rmd-sheet-touch-width\"?: string | number;\n \"--rmd-sheet-touch-max-height\"?: string | number;\n \"--rmd-sheet-static-width\"?: string | number;\n \"--rmd-sheet-transform-offscreen\"?: string | number;\n \"--rmd-sheet-z-index\"?: number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\n/**\n * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`\n * and exports the `SheetDialogProps`.\n */\nexport interface BaseSheetProps\n extends SheetDialogProps,\n BaseSheetClassNameOptions {\n /**\n * @defaultValue `\"dialog\"`\n */\n role?: \"dialog\" | \"menu\" | \"none\";\n\n /**\n * @defaultValue `true`\n * @see {@link SheetDialogProps.exitedHidden}\n * @since 6.0.0\n */\n exitedHidden?: boolean;\n}\n\nexport type SheetProps = LabelRequiredForA11y<BaseSheetProps>;\n\n/**\n * **Client Component**\n *\n * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,\n * bottom, or left of the viewport.\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * const { toggled, disable, enable } = useToggle();\n *\n * return (\n * <>\n * <Button onClick={enable}>Show</Button>\n * <Sheet aria-label=\"Customization\" visible={toggled} onRequestClose={disable}>\n * Whatever Content\n * </Sheet>\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/sheet | Sheet Demos}\n */\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n function Sheet(props, ref) {\n const {\n role = \"dialog\",\n className,\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n timeout = DEFAULT_SHEET_TIMEOUT,\n classNames = DEFAULT_SHEET_CLASSNAMES,\n visible,\n temporary = true,\n exitedHidden = true,\n raised,\n children,\n ...remaining\n } = props;\n const { disableOverlay } = props;\n\n return (\n <Dialog\n {...remaining}\n ref={ref}\n role={role}\n type=\"custom\"\n timeout={timeout}\n classNames={classNames}\n visible={visible}\n temporary={temporary}\n exitedHidden={exitedHidden}\n className={sheet({\n raised: raised ?? !disableOverlay,\n position,\n horizontalSize,\n verticalSize,\n className,\n })}\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","Dialog","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","Sheet","props","ref","role","className","position","horizontalSize","verticalSize","timeout","classNames","visible","temporary","exitedHidden","raised","children","remaining","disableOverlay","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAA+BC,MAAM,QAAQ,sBAAsB;AAEnE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,cAAc;AA0CrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,sBAAQL,WACnB,SAASK,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,OAAO,QAAQ,EACfC,SAAS,EACTC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,UAAUV,qBAAqB,EAC/BW,aAAaZ,wBAAwB,EACrCa,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,MAAM,EACNC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IACJ,MAAM,EAAEe,cAAc,EAAE,GAAGf;IAE3B,qBACE,KAACL;QACE,GAAGmB,SAAS;QACbb,KAAKA;QACLC,MAAMA;QACNc,MAAK;QACLT,SAASA;QACTC,YAAYA;QACZC,SAASA;QACTC,WAAWA;QACXC,cAAcA;QACdR,WAAWL,MAAM;YACfc,QAAQA,UAAU,CAACG;YACnBX;YACAC;YACAC;YACAH;QACF;kBAECU;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { type BaseDialogProps, Dialog } from \"../dialog/Dialog.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n type BaseSheetClassNameOptions,\n DEFAULT_SHEET_CLASSNAMES,\n DEFAULT_SHEET_TIMEOUT,\n sheet,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\n/**\n * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`\n * and exports the `SheetDialogProps`.\n */\nexport interface BaseSheetProps\n extends SheetDialogProps,\n BaseSheetClassNameOptions {\n /**\n * @defaultValue `\"dialog\"`\n */\n role?: \"dialog\" | \"menu\" | \"none\";\n\n /**\n * @defaultValue `true`\n * @see {@link SheetDialogProps.exitedHidden}\n * @since 6.0.0\n */\n exitedHidden?: boolean;\n}\n\nexport type SheetProps = LabelRequiredForA11y<BaseSheetProps>;\n\n/**\n * **Client Component**\n *\n * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,\n * bottom, or left of the viewport.\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * const { toggled, disable, enable } = useToggle();\n *\n * return (\n * <>\n * <Button onClick={enable}>Show</Button>\n * <Sheet aria-label=\"Customization\" visible={toggled} onRequestClose={disable}>\n * Whatever Content\n * </Sheet>\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/sheet | Sheet Demos}\n */\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n function Sheet(props, ref) {\n const {\n role = \"dialog\",\n className,\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n timeout = DEFAULT_SHEET_TIMEOUT,\n classNames = DEFAULT_SHEET_CLASSNAMES,\n visible,\n temporary = true,\n exitedHidden = true,\n raised,\n children,\n ...remaining\n } = props;\n const { disableOverlay } = props;\n\n return (\n <Dialog\n {...remaining}\n ref={ref}\n role={role}\n type=\"custom\"\n timeout={timeout}\n classNames={classNames}\n visible={visible}\n temporary={temporary}\n exitedHidden={exitedHidden}\n className={sheet({\n raised: raised ?? !disableOverlay,\n position,\n horizontalSize,\n verticalSize,\n className,\n })}\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","Dialog","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","Sheet","props","ref","role","className","position","horizontalSize","verticalSize","timeout","classNames","visible","temporary","exitedHidden","raised","children","remaining","disableOverlay","type"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAA+BC,MAAM,QAAQ,sBAAsB;AAEnE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,cAAc;AA6BrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,MAAMC,sBAAQL,WACnB,SAASK,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,OAAO,QAAQ,EACfC,SAAS,EACTC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,UAAUV,qBAAqB,EAC/BW,aAAaZ,wBAAwB,EACrCa,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,MAAM,EACNC,QAAQ,EACR,GAAGC,WACJ,GAAGd;IACJ,MAAM,EAAEe,cAAc,EAAE,GAAGf;IAE3B,qBACE,KAACL;QACE,GAAGmB,SAAS;QACbb,KAAKA;QACLC,MAAMA;QACNc,MAAK;QACLT,SAASA;QACTC,YAAYA;QACZC,SAASA;QACTC,WAAWA;QACXC,cAAcA;QACdR,WAAWL,MAAM;YACfc,QAAQA,UAAU,CAACG;YACnBX;YACAC;YACAC;YACAH;QACF;kBAECU;;AAGP,GACA"}
@@ -1,3 +1,15 @@
1
+ declare module "react" {
2
+ interface CSSProperties {
3
+ "--rmd-sheet-height"?: string | number;
4
+ "--rmd-sheet-width"?: string | number;
5
+ "--rmd-sheet-max-height"?: string | number;
6
+ "--rmd-sheet-touch-width"?: string | number;
7
+ "--rmd-sheet-touch-max-height"?: string | number;
8
+ "--rmd-sheet-static-width"?: string | number;
9
+ "--rmd-sheet-transform-offscreen"?: string | number;
10
+ "--rmd-sheet-z-index"?: number;
11
+ }
12
+ }
1
13
  /**
2
14
  * @since 6.0.0 Uses `as const satisfies TransitionTimeout`
3
15
  */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type BaseDialogProps } from \"../dialog/Dialog.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\n/**\n * @since 6.0.0 Uses `as const satisfies TransitionTimeout`\n */\nexport const DEFAULT_SHEET_TIMEOUT = {\n enter: 200,\n exit: 150,\n} as const satisfies TransitionTimeout;\n\n/**\n * @since 6.0.0 Uses `as const satisfies CSSTransitionClassNames`\n */\nexport const DEFAULT_SHEET_CLASSNAMES = {\n appear: \"rmd-sheet--offscreen\",\n appearActive: \"rmd-sheet--enter rmd-sheet--visible\",\n enter: \"rmd-sheet--offscreen\",\n enterActive: \"rmd-sheet--enter rmd-sheet--visible\",\n exit: \"rmd-sheet--exit\",\n exitActive: \"rmd-sheet--offscreen\",\n exitDone: \"rmd-sheet--offscreen rmd-sheet--hidden\",\n} as const satisfies CSSTransitionClassNames;\n\nconst styles = bem(\"rmd-sheet\");\n\n/**\n * The location that the sheet should be located within the viewport.\n */\nexport type SheetPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n *\n * - `\"none\"` - the size is based on content, but is still limited to the\n * viewport width so that the horizontal scrolling will not occur within the\n * page. No limits added to sizing.\n * - `\"touch\"` - the `width` is set to be the entire viewport width minus a\n * touchable area and is normally recommended for mobile devices.\n * - `\"static\"` - the `width` is set to a static `16rem` and generally used for\n * landscape tablets and desktops.\n * - `\"media\"` - automatically switches between \"touch\" and \"static\" based on\n * css media queries. (this is the default)\n */\nexport type SheetHorizontalSize = \"none\" | \"media\" | \"touch\" | \"static\";\n\n/**\n * The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n *\n * - `\"none\"` - the size is based on content and is limited to the viewport\n * height\n * - `\"touch\"` - the size is based on content and is limited to the viewport\n * height minus a small touchable area\n * - `\"recommended\"` - the material design recommended sizing that forces a\n * `max-height` of 50vh and `min-height` of 3.5rem\n */\nexport type SheetVerticalSize = \"none\" | \"touch\" | \"recommended\";\n\n/** @since 6.0.0 */\nexport interface BaseSheetClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"left\"`\n */\n position?: SheetPosition;\n\n /**\n * @defaultValue `\"media\"`\n */\n horizontalSize?: SheetHorizontalSize;\n\n /**\n * @defaultValue `\"recommended\"`\n */\n verticalSize?: SheetVerticalSize;\n\n /**\n * Set this to `false` to remove the additional `z-index` and `box-shadow`\n * applied to the sheet. This should _normally_ be `false` if the\n * `disableOverlay` prop was enabled.\n *\n * @see {@link BaseDialogProps.disableOverlay}\n * @defaultValue `!disableOverlay`\n */\n raised?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n /**\n * Set this to `true` if the sheet is rendered, but not visible.\n *\n * This isn't actually used since it is hard coded in {@link DEFAULT_SHEET_CLASSNAMES}.\n *\n * @defaultValue `false`\n */\n offscreen?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n const {\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n offscreen = false,\n raised = true,\n className,\n } = options;\n const horizontal = position === \"left\" || position === \"right\";\n\n return cnb(\n styles({\n horizontal,\n vertical: !horizontal,\n raised,\n offscreen,\n [position]: true,\n \"media-width\": horizontal && horizontalSize === \"media\",\n \"touch-width\": horizontal && horizontalSize === \"touch\",\n \"static-width\": horizontal && horizontalSize === \"static\",\n \"viewport-height\": !horizontal && verticalSize === \"none\",\n \"touchable-height\": !horizontal && verticalSize === \"touch\",\n \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n }),\n className\n );\n}\n"],"names":["cnb","bem","DEFAULT_SHEET_TIMEOUT","enter","exit","DEFAULT_SHEET_CLASSNAMES","appear","appearActive","enterActive","exitActive","exitDone","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","raised","className","horizontal","vertical"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC;;CAEC,GACD,OAAO,MAAMC,wBAAwB;IACnCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;CAEC,GACD,OAAO,MAAMC,2BAA2B;IACtCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;IACZC,UAAU;AACZ,EAA6C;AAE7C,MAAMC,SAASV,IAAI;AAiFnB,iBAAiB,GACjB,OAAO,SAASW,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,SAAS,IAAI,EACbC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOd,IACLW,OAAO;QACLS;QACAC,UAAU,CAACD;QACXF;QACAD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}
1
+ {"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type BaseDialogProps } from \"../dialog/Dialog.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-sheet-height\"?: string | number;\n \"--rmd-sheet-width\"?: string | number;\n \"--rmd-sheet-max-height\"?: string | number;\n \"--rmd-sheet-touch-width\"?: string | number;\n \"--rmd-sheet-touch-max-height\"?: string | number;\n \"--rmd-sheet-static-width\"?: string | number;\n \"--rmd-sheet-transform-offscreen\"?: string | number;\n \"--rmd-sheet-z-index\"?: number;\n }\n}\n\n/**\n * @since 6.0.0 Uses `as const satisfies TransitionTimeout`\n */\nexport const DEFAULT_SHEET_TIMEOUT = {\n enter: 200,\n exit: 150,\n} as const satisfies TransitionTimeout;\n\n/**\n * @since 6.0.0 Uses `as const satisfies CSSTransitionClassNames`\n */\nexport const DEFAULT_SHEET_CLASSNAMES = {\n appear: \"rmd-sheet--offscreen\",\n appearActive: \"rmd-sheet--enter rmd-sheet--visible\",\n enter: \"rmd-sheet--offscreen\",\n enterActive: \"rmd-sheet--enter rmd-sheet--visible\",\n exit: \"rmd-sheet--exit\",\n exitActive: \"rmd-sheet--offscreen\",\n exitDone: \"rmd-sheet--offscreen rmd-sheet--hidden\",\n} as const satisfies CSSTransitionClassNames;\n\nconst styles = bem(\"rmd-sheet\");\n\n/**\n * The location that the sheet should be located within the viewport.\n */\nexport type SheetPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n *\n * - `\"none\"` - the size is based on content, but is still limited to the\n * viewport width so that the horizontal scrolling will not occur within the\n * page. No limits added to sizing.\n * - `\"touch\"` - the `width` is set to be the entire viewport width minus a\n * touchable area and is normally recommended for mobile devices.\n * - `\"static\"` - the `width` is set to a static `16rem` and generally used for\n * landscape tablets and desktops.\n * - `\"media\"` - automatically switches between \"touch\" and \"static\" based on\n * css media queries. (this is the default)\n */\nexport type SheetHorizontalSize = \"none\" | \"media\" | \"touch\" | \"static\";\n\n/**\n * The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n *\n * - `\"none\"` - the size is based on content and is limited to the viewport\n * height\n * - `\"touch\"` - the size is based on content and is limited to the viewport\n * height minus a small touchable area\n * - `\"recommended\"` - the material design recommended sizing that forces a\n * `max-height` of 50vh and `min-height` of 3.5rem\n */\nexport type SheetVerticalSize = \"none\" | \"touch\" | \"recommended\";\n\n/** @since 6.0.0 */\nexport interface BaseSheetClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"left\"`\n */\n position?: SheetPosition;\n\n /**\n * @defaultValue `\"media\"`\n */\n horizontalSize?: SheetHorizontalSize;\n\n /**\n * @defaultValue `\"recommended\"`\n */\n verticalSize?: SheetVerticalSize;\n\n /**\n * Set this to `false` to remove the additional `z-index` and `box-shadow`\n * applied to the sheet. This should _normally_ be `false` if the\n * `disableOverlay` prop was enabled.\n *\n * @see {@link BaseDialogProps.disableOverlay}\n * @defaultValue `!disableOverlay`\n */\n raised?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n /**\n * Set this to `true` if the sheet is rendered, but not visible.\n *\n * This isn't actually used since it is hard coded in {@link DEFAULT_SHEET_CLASSNAMES}.\n *\n * @defaultValue `false`\n */\n offscreen?: boolean;\n}\n\n/** @since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n const {\n position = \"left\",\n horizontalSize = \"media\",\n verticalSize = \"recommended\",\n offscreen = false,\n raised = true,\n className,\n } = options;\n const horizontal = position === \"left\" || position === \"right\";\n\n return cnb(\n styles({\n horizontal,\n vertical: !horizontal,\n raised,\n offscreen,\n [position]: true,\n \"media-width\": horizontal && horizontalSize === \"media\",\n \"touch-width\": horizontal && horizontalSize === \"touch\",\n \"static-width\": horizontal && horizontalSize === \"static\",\n \"viewport-height\": !horizontal && verticalSize === \"none\",\n \"touchable-height\": !horizontal && verticalSize === \"touch\",\n \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n }),\n className\n );\n}\n"],"names":["cnb","bem","DEFAULT_SHEET_TIMEOUT","enter","exit","DEFAULT_SHEET_CLASSNAMES","appear","appearActive","enterActive","exitActive","exitDone","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","raised","className","horizontal","vertical"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAASC,GAAG,QAAQ,kBAAkB;AAetC;;CAEC,GACD,OAAO,MAAMC,wBAAwB;IACnCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;CAEC,GACD,OAAO,MAAMC,2BAA2B;IACtCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;IACZC,UAAU;AACZ,EAA6C;AAE7C,MAAMC,SAASV,IAAI;AAiFnB,iBAAiB,GACjB,OAAO,SAASW,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,SAAS,IAAI,EACbC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOd,IACLW,OAAO;QACLS;QACAC,UAAU,CAACD;QACXF;QACAD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}
@@ -1,20 +1,13 @@
1
1
  import { type AriaRole, type HTMLAttributes, type ReactElement, type ReactNode } from "react";
2
2
  import { type ButtonProps } from "../button/Button.js";
3
- import { type BackgroundColor } from "../cssUtils.js";
4
3
  import { type CSSTransitionClassNames, type TransitionCallbacks, type TransitionTimeout } from "../transition/types.js";
5
4
  import { type PropsWithRef } from "../types.js";
6
5
  import { type ToastContentProps } from "./ToastContent.js";
7
- declare module "react" {
8
- interface CSSProperties {
9
- "--rmd-toast-color"?: string;
10
- "--rmd-toast-background-color"?: string;
11
- "--rmd-toast-offset"?: string | number;
12
- }
13
- }
6
+ import { type BaseToastClasNameOptions } from "./toastStyles.js";
14
7
  /**
15
8
  * @since 6.0.0
16
9
  */
17
- export interface ConfigurableToastProps extends HTMLAttributes<HTMLDivElement>, TransitionCallbacks {
10
+ export interface ConfigurableToastProps extends HTMLAttributes<HTMLDivElement>, BaseToastClasNameOptions, TransitionCallbacks {
18
11
  /**
19
12
  * Note: this default value will only be generated in the `Toast` component.
20
13
  *
@@ -27,10 +20,6 @@ export interface ConfigurableToastProps extends HTMLAttributes<HTMLDivElement>,
27
20
  * @defaultValue `visibleTime === null ? "alert" : "status"`
28
21
  */
29
22
  role?: AriaRole;
30
- /**
31
- * @defaultValue `"surface"`
32
- */
33
- theme?: BackgroundColor;
34
23
  /**
35
24
  * Set this to `true` to stack the content above the {@link action}. It is not
36
25
  * recommended to enable this prop if the {@link closeButton} is enabled.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-toast-color\"?: string;\n \"--rmd-toast-background-color\"?: string;\n \"--rmd-toast-offset\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends HTMLAttributes<HTMLDivElement>,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n */\n role?: AriaRole;\n\n /**\n * @defaultValue `\"surface\"`\n */\n theme?: BackgroundColor;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps>;\n\n /**\n * Set this to `true` if the `children` for the toast should no longer be\n * wrapped in an additional `<div>` that applies some toast layout styles.\n * This should normally only be used for custom `Toast` implementations.\n *\n * @see the `Snackbar`'s `renderToast` prop for an example.\n */\n disableToastContent?: boolean;\n\n /**\n * The toast's transition timeout for entering and exiting. This is **not**\n * how long the toast should remain visible.\n *\n * @defaultValue `SCALE_TIMEOUT`\n */\n timeout?: TransitionTimeout;\n\n /**\n * The toast's transition class names for entering and exiting.\n *\n * @defaultValue `SCALE_CLASSNAMES`\n */\n classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n paused?: boolean;\n visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const {\n id: propId,\n className,\n timeout,\n classNames,\n theme = \"surface\",\n action: propAction,\n actionButton: propActionButton,\n paused,\n visible,\n closeIcon: propCloseIcon,\n closeButtonProps,\n closeButton = !!closeButtonProps,\n contentProps,\n disableToastContent,\n stacked,\n multiline,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n children,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"toast\");\n\n let actionButton = propActionButton;\n if (propAction) {\n let overrides: ButtonProps = {};\n let buttonChildren: ReactNode;\n // have to use `any` to correctly filter out all react elements\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n buttonChildren = propAction;\n } else {\n ({ children: buttonChildren, ...overrides } = propAction);\n }\n\n actionButton = (\n <ToastActionButton\n theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n reordered={stacked && closeButton}\n {...overrides}\n >\n {buttonChildren}\n </ToastActionButton>\n );\n }\n\n let closeIcon = propCloseIcon;\n if (typeof closeButtonProps?.children !== \"undefined\") {\n closeIcon = closeButtonProps.children;\n }\n\n const action = !!actionButton;\n const reordered = stacked && action && closeButton;\n const { elementProps, rendered } = useScaleTransition({\n appear: true,\n nodeRef: ref,\n className: toast({\n className,\n theme,\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n }),\n timeout,\n classNames,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary: true,\n transitionIn: visible,\n exitedHidden: true,\n });\n\n // this might get rid of the weird popping-back-in for a split second\n // that sometimes happens on mobile firefox\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps} id={id}>\n <ToastContent\n action={action}\n stacked={stacked}\n multiline={multiline}\n closeButton={closeButton}\n disableWrapper={disableToastContent}\n {...contentProps}\n >\n {children}\n </ToastContent>\n {actionButton}\n {closeButton && (\n <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n {closeIcon}\n </ToastCloseButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,EACVC,cAAc,QACT,QAAQ;AASf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,KAAK,QAAQ,mBAAmB;AAqHzC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}
1
+ {"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { type BaseToastClasNameOptions, toast } from \"./toastStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends HTMLAttributes<HTMLDivElement>,\n BaseToastClasNameOptions,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n */\n role?: AriaRole;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps>;\n\n /**\n * Set this to `true` if the `children` for the toast should no longer be\n * wrapped in an additional `<div>` that applies some toast layout styles.\n * This should normally only be used for custom `Toast` implementations.\n *\n * @see the `Snackbar`'s `renderToast` prop for an example.\n */\n disableToastContent?: boolean;\n\n /**\n * The toast's transition timeout for entering and exiting. This is **not**\n * how long the toast should remain visible.\n *\n * @defaultValue `SCALE_TIMEOUT`\n */\n timeout?: TransitionTimeout;\n\n /**\n * The toast's transition class names for entering and exiting.\n *\n * @defaultValue `SCALE_CLASSNAMES`\n */\n classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n paused?: boolean;\n visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const {\n id: propId,\n className,\n timeout,\n classNames,\n theme = \"surface\",\n action: propAction,\n actionButton: propActionButton,\n paused,\n visible,\n closeIcon: propCloseIcon,\n closeButtonProps,\n closeButton = !!closeButtonProps,\n contentProps,\n disableToastContent,\n stacked,\n multiline,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n children,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"toast\");\n\n let actionButton = propActionButton;\n if (propAction) {\n let overrides: ButtonProps = {};\n let buttonChildren: ReactNode;\n // have to use `any` to correctly filter out all react elements\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n buttonChildren = propAction;\n } else {\n ({ children: buttonChildren, ...overrides } = propAction);\n }\n\n actionButton = (\n <ToastActionButton\n theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n reordered={stacked && closeButton}\n {...overrides}\n >\n {buttonChildren}\n </ToastActionButton>\n );\n }\n\n let closeIcon = propCloseIcon;\n if (typeof closeButtonProps?.children !== \"undefined\") {\n closeIcon = closeButtonProps.children;\n }\n\n const action = !!actionButton;\n const reordered = stacked && action && closeButton;\n const { elementProps, rendered } = useScaleTransition({\n appear: true,\n nodeRef: ref,\n className: toast({\n className,\n theme,\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n }),\n timeout,\n classNames,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary: true,\n transitionIn: visible,\n exitedHidden: true,\n });\n\n // this might get rid of the weird popping-back-in for a split second\n // that sometimes happens on mobile firefox\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps} id={id}>\n <ToastContent\n action={action}\n stacked={stacked}\n multiline={multiline}\n closeButton={closeButton}\n disableWrapper={disableToastContent}\n {...contentProps}\n >\n {children}\n </ToastContent>\n {actionButton}\n {closeButton && (\n <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n {closeIcon}\n </ToastCloseButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,EACVC,cAAc,QACT,QAAQ;AAQf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAAwCC,KAAK,QAAQ,mBAAmB;AAyGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/snackbar/ToastManager.ts"],"sourcesContent":["import { nanoid } from \"nanoid\";\n\nimport { type ConfigurableToastProps } from \"./Toast.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_TOAST_VISIBLE_TIME = 5000;\n\n/**\n * - `\"normal\"` - the toast will be added to the end of the queue\n * - `\"next\"` - the toast will be inserted next-in-line in the queue, waiting\n * for the current visible toast to exit before being shown. If the toast does\n * not support duplicates, the existing toast will be moved instead and merged\n * with the toast.\n * - `\"replace\"` - if there is a currently visible toast, it will start the\n * leave transition and display the newly added toast instead.\n * - `\"immediate\"` - the same behavior as `\"replace\"` except that if there was a\n * currently visible toast, the toast will be shown again once the `\"immediate\"`\n * toast is hidden.\n *\n * @since 6.0.0 Renamed from `MessagePriority` to `ToastPriority`\n */\nexport type ToastPriority = \"normal\" | \"next\" | \"replace\" | \"immediate\";\n\n/**\n * - `\"allow\"` - toasts with the same `toastId` can be added into the queue, but\n * the leave timeout behavior might not work if multiple toasts can be shown\n * at the same time.\n * - `\"restart\"` - (default) toasts that have the same `toastId` as a toast\n * being shown will restart the exit timeout and update the toast with any\n * differences in the toast. If the toast is not currently being shown, a new\n * toast will not be added.\n * - `\"update\"` - toasts that have the same `toastId` will just update the toast\n * with the latest content while maintaining any existing timeouts\n *\n * @since 6.0.0 Renamed from `DuplicateBehavior`\n */\nexport type ToastDuplicateBehavior = \"allow\" | \"restart\" | \"update\";\n\n/**\n * @since 6.0.0\n */\nexport interface ToastMeta {\n /**\n * This will be `true` if the exit timeout has been paused either by hovering\n * the toast or the page has become inactive through blur or minimizing.\n */\n paused: boolean;\n\n /**\n * This will be `true` when the toast should be visible and `false` during the\n * exit animation.\n */\n visible: boolean;\n\n /**\n * The current toast's id which can be used with the:\n * - {@link ToastManager.removeToast}\n * - {@link ToastManager.startRemoveTimeout}\n * - {@link ToastManager.pauseRemoveTimeout}\n * - {@link ToastManager.resumeRemoveTimeout}\n */\n toastId: string;\n priority: ToastPriority;\n duplicates: ToastDuplicateBehavior;\n visibleTime: number | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateToastOptions extends ConfigurableToastProps {\n /**\n * @defaultValue `nanoid()`\n */\n toastId?: string;\n\n /**\n * @see {@link ToastDuplicateBehavior}\n * @defaultValue `\"restart\"`\n */\n duplicates?: ToastDuplicateBehavior;\n\n /**\n * @see {@link ToastPriority}\n * @defaultValue `\"normal\"`\n */\n priority?: ToastPriority;\n\n /**\n * Set this to `null` to prevent the toast from automatically hiding,\n * otherwise set this to the number of milliseconds to remain visible.\n *\n * @see {@link DEFAULT_TOAST_VISIBLE_TIME}\n * @defaultValue `DEFAULT_TOAST_VISIBLE_TIME`\n */\n visibleTime?: number | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface QueuedToast extends ConfigurableToastProps, ToastMeta {}\n\n/**\n * @since 6.0.0\n */\nexport type ToastQueue = readonly Readonly<QueuedToast>[];\n\n/**\n * @since 6.0.0\n */\nexport type ToastCallback = (queue: ToastQueue) => void;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ToastVisibilityTimers {\n inactive: boolean;\n startTime: number;\n elapsedTime: number;\n exitTimeout?: number;\n}\n\n/**\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @see {@link ToastManagerProvider}\n * @since 6.0.0\n */\nexport class ToastManager {\n #queue: QueuedToast[];\n #timers: Map<string, ToastVisibilityTimers>;\n #listeners: ToastCallback[];\n\n constructor() {\n this.#queue = [];\n this.#timers = new Map();\n this.#listeners = [];\n\n // All of the class methods must be arrow functions to preserve the correct\n // `this` value. If they aren't arrow functions, I'd have to wrap each call\n // in an arrow function to work.\n //\n // i.e.\n // useSyncExternalStore(\n // (cb) => manager.subscribe(cb),\n // () => manager.getQueue(),\n // () => manager.getQueue(),\n // );\n }\n\n #emit = (): void => {\n // shallow clone to ensure react updates\n this.#queue = [...this.#queue];\n this.#listeners.forEach((callback) => {\n callback(this.#queue);\n });\n };\n\n #getToastIndex = (toastId: string | undefined): number => {\n if (!toastId) {\n return -1;\n }\n\n return this.#queue.findIndex((toast) => toast.toastId === toastId);\n };\n\n #getToast = (toastId: string | undefined): QueuedToast | undefined => {\n return this.#queue[this.#getToastIndex(toastId)];\n };\n\n /**\n * Starts the exit transition for the currently shown toast and adds the next\n * toast into the queue. This requires a manual call to `this.#emit()`\n * afterwards.\n */\n #addToastImmediately = (nextToast: QueuedToast): void => {\n const [current] = this.#queue;\n this.clearTimer(current.toastId);\n this.#queue[0] = {\n ...current,\n visible: false,\n };\n if (nextToast.priority === \"immediate\") {\n this.#queue.splice(1, 0, nextToast, current);\n } else {\n this.#queue.splice(1, 0, nextToast);\n }\n };\n\n /**\n * This calls `this.#emit()` if the toast was updated\n */\n #updateToast = (\n toastIdOrIndex: string | number,\n patch: Partial<QueuedToast>\n ): void => {\n const index =\n typeof toastIdOrIndex === \"number\"\n ? toastIdOrIndex\n : this.#getToastIndex(toastIdOrIndex);\n\n if (index === -1) {\n return;\n }\n\n this.#queue[index] = {\n ...this.#queue[index],\n ...patch,\n };\n this.#emit();\n };\n\n /**\n * This is just used to subscribe to changes in the {@link useToastQueue}.\n *\n * ```tsx\n * useSyncExternalStore(\n * toastManager.subscribe,\n * toastManager.getQueue,\n * toastManager.getQueue,\n * );\n * ```\n *\n * @internal\n */\n subscribe = (callback: ToastCallback): (() => void) => {\n this.#listeners.push(callback);\n\n return () => {\n this.#listeners = this.#listeners.filter((cb) => cb !== callback);\n };\n };\n\n /**\n * @see {@link subscribe}\n * @internal\n */\n getQueue = (): ToastQueue => {\n return this.#queue;\n };\n\n /**\n * Either adds the toast to the queue or updates an existing toast when using\n * an existing `toastId`.\n *\n * @example Adding toasts\n * ```tsx\n * // create a toast when the user is offline that will not disappear\n * addToast({ toastId: \"offline\", visibleTime: null });\n *\n * // add a new toast that displays `\"Toast\"` to the queue\n * addToast({ children: \"Toast!\" });\n *\n * // add an online toast notification. since these three use the same toast\n * // id, the hide timer will be reset each time\n * addToast({ toastId: \"online\" });\n * addToast({ toastId: \"online\" });\n * addToast({ toastId: \"online\" });\n *\n * // add a server error toast to the queue where the second one will be\n * // ignored\n * addToast({\n * toastId: \"ServerError\",\n * theme: \"error\",\n * duplicates: \"prevent\",\n * });\n * addToast({\n * toastId: \"ServerError\",\n * theme: \"error\",\n * duplicates: \"prevent\",\n * });\n *\n * // add a toast to the queue that has an action button that says \"Goodbye\"\n * addToast({\n * children: \"Hello, world!\",\n * action: \"Goodbye\",\n * });\n *\n * // add a toast to the queue that has an action button that says \"Goodbye\"\n * // and a custom click handler\n * addToast({\n * children: \"Hello, world!\",\n * action: {\n * onClick: () => {\n * logout();\n * },\n * children: \"Goodbye\",\n * },\n * });\n *\n * // add a toast to the queue that renders a react component in the content,\n * // a custom action button implementation (using `ToastActionButton`), and a\n * // close button\n * addToast({\n * children: <SomeCustomComponent />,\n * actionButton: <SomeCustomActionButton />,\n * closeButton: true,\n * });\n * ```\n */\n addToast = (toast: CreateToastOptions): void => {\n const {\n toastId = nanoid(),\n visibleTime = DEFAULT_TOAST_VISIBLE_TIME,\n role = visibleTime === null ? \"alert\" : \"status\",\n priority = \"normal\",\n duplicates = \"restart\",\n } = toast;\n\n const existingIndex = this.#getToastIndex(toast.toastId);\n if (existingIndex !== -1 && duplicates !== \"allow\") {\n const existingToast = this.#queue[existingIndex];\n const nextToast: QueuedToast = {\n ...existingToast,\n ...toast,\n };\n\n // reorder/move the existing toast to be the next item in the queue by:\n // - removing the toast from the queue\n // - inserting it into the next position with the updates\n if (priority === \"next\" && existingIndex > 1) {\n this.#queue.splice(existingIndex, 1);\n this.#queue.splice(1, 0, nextToast);\n this.#emit();\n return;\n }\n\n // only need to reorder the queue if it is not being shown\n if (\n (priority === \"replace\" || priority === \"immediate\") &&\n existingIndex !== 0\n ) {\n this.#queue.splice(existingIndex, 1);\n this.#addToastImmediately(nextToast);\n this.#emit();\n return;\n }\n\n const timers = this.#timers.get(toastId);\n if (existingToast.visible && duplicates === \"restart\" && timers) {\n this.#timers.set(toastId, { ...timers, elapsedTime: 0 });\n\n // wait for the next resume event instead. this _should_ only happen\n // when hovering a toast and another toast replaces it\n if (!nextToast.paused) {\n this.startRemoveTimeout(toastId);\n }\n }\n\n this.#updateToast(existingIndex, toast);\n return;\n }\n\n const nextToast: QueuedToast = {\n ...toast,\n role,\n paused: false,\n visible: true,\n toastId,\n priority,\n duplicates,\n visibleTime,\n };\n\n const queueSize = this.#queue.length;\n if (priority === \"next\" && queueSize > 1) {\n this.#queue.splice(1, 0, nextToast);\n } else if (\n (priority === \"replace\" || priority === \"immediate\") &&\n queueSize > 0\n ) {\n this.#addToastImmediately(nextToast);\n } else {\n this.#queue.push(nextToast);\n }\n\n this.#emit();\n };\n\n /**\n * Attempts to start the timeout for removing the toast when the `visibleTime`\n * is not null for a toast.\n *\n * @param toastId - The specific toastId to update\n */\n startRemoveTimeout = (toastId: string): void => {\n const toast = this.#getToast(toastId);\n if (!toast) {\n return;\n }\n\n const { visibleTime } = toast;\n if (visibleTime === null) {\n // Must manually be closed\n return;\n }\n\n const cached = this.#timers.get(toastId);\n const timers = (cached && { ...cached }) || {\n inactive: false,\n startTime: Date.now(),\n elapsedTime: 0,\n };\n window.clearTimeout(timers.exitTimeout);\n\n let duration = visibleTime;\n if (timers.elapsedTime) {\n duration -= timers.elapsedTime;\n }\n\n timers.inactive = false;\n timers.exitTimeout = window.setTimeout(() => {\n this.removeToast(toastId, true);\n }, duration);\n this.#timers.set(toastId, timers);\n };\n\n /**\n * Pauses the remove timeout for a specific toast normally with hover events\n * or the browser becoming inactive.\n *\n * @param toastId - The specific toastId to pause\n */\n pauseRemoveTimeout = (toastId: string): void => {\n const toast = this.#getToast(toastId);\n const cached = this.#timers.get(toastId);\n if (!toast || !cached || cached.inactive) {\n return;\n }\n\n window.clearTimeout(cached.exitTimeout);\n const timers = { ...cached };\n timers.inactive = true;\n timers.elapsedTime = Date.now() - timers.startTime + timers.elapsedTime;\n this.#timers.set(toastId, timers);\n this.#updateToast(toastId, { paused: true });\n };\n\n /**\n * Resumes the current remove timeout if it was paused by\n * {@link pauseRemoveTimeout}.\n *\n * @param toastId - The specific toastId to resume\n */\n resumeRemoveTimeout = (toastId: string): void => {\n const toastIndex = this.#getToastIndex(toastId);\n const timers = this.#timers.get(toastId);\n if (toastIndex === -1 || !timers?.startTime) {\n return;\n }\n\n timers.startTime = Date.now();\n this.#updateToast(toastIndex, { paused: false });\n this.startRemoveTimeout(toastId);\n };\n\n /**\n * Removes a toast by id from the queue without any exit animation.\n *\n * @param toastId - The specific {@link QueuedToast.toastId}\n * @param transition - Set this to `true` to remove the toast by the exit\n * transition instead of immediately.\n */\n removeToast = (toastId: string, transition: boolean): void => {\n const toastIndex = this.#getToastIndex(toastId);\n if (toastIndex === -1) {\n return;\n }\n\n if (transition) {\n this.clearTimer(toastId);\n this.#updateToast(toastIndex, { visible: false });\n return;\n }\n\n this.#queue.splice(toastIndex, 1);\n this.#emit();\n };\n\n /**\n * Clears any pending timers for the provided toast id. This should generally\n * be used in the `useEffect` cleanup effect for any custom toast renderer\n * implementations.\n *\n * @example\n * ```tsx\n * const { toastId } = toast;\n * const toastManager = useToastManager();\n *\n * useEffect(() => {\n * return () => {\n * toastManager.clearTimer(toastId):\n * }\n * }, [toastManager, toastId]);\n * ```\n */\n clearTimer = (toastId: string): void => {\n const timer = this.#timers.get(toastId);\n window.clearTimeout(timer?.exitTimeout);\n this.#timers.delete(toastId);\n };\n\n /**\n * Removes first toast from the queue without any exit animation. You most\n * likely want to use {@link removeToast} instead.\n */\n popToast = (): void => {\n this.#queue.pop();\n this.#emit();\n };\n\n /**\n * Removes all toasts from the queue. There will be no exit animation.\n *\n * @param disableEmit - Set this to `true` to disable emitting the empty queue.\n * Mostly used for tests.\n */\n clearToasts = (disableEmit = false): void => {\n this.#queue = [];\n this.#timers.forEach((meta) => {\n window.clearTimeout(meta.exitTimeout);\n });\n this.#timers.clear();\n if (!disableEmit) {\n this.#emit();\n }\n };\n}\n\n/**\n * The default toast manager for react-md apps that will allow toasts to be\n * added without setting up the {@link ToastManagerProvider}.\n *\n * @internal\n * @since 6.0.0\n */\nexport const toastManager = new ToastManager();\n\n/**\n * @see {@link ToastManager.addToast}\n * @since 6.0.0\n */\nexport const addToast: ToastManager[\"addToast\"] = (toast) => {\n toastManager.addToast(toast);\n};\n\n/**\n * @see {@link ToastManager.startRemoveTimeout}\n * @since 6.0.0\n */\nexport const startRemoveToastTimeout: ToastManager[\"startRemoveTimeout\"] = (\n toastId\n) => {\n toastManager.startRemoveTimeout(toastId);\n};\n\n/**\n * @see {@link ToastManager.popToast}\n * @since 6.0.0\n */\nexport const popToast: ToastManager[\"popToast\"] = () => {\n toastManager.popToast();\n};\n\n/**\n * @see {@link ToastManager.removeToast}\n * @since 6.0.0\n */\nexport const removeToast: ToastManager[\"removeToast\"] = (\n toastId,\n transition\n) => {\n toastManager.removeToast(toastId, transition);\n};\n\n/**\n * @see {@link ToastManager.clearToasts}\n * @since 6.0.0\n */\nexport const clearToasts = (): void => {\n toastManager.clearToasts();\n};\n"],"names":["nanoid","DEFAULT_TOAST_VISIBLE_TIME","ToastManager","constructor","forEach","callback","toastId","findIndex","toast","nextToast","current","clearTimer","visible","priority","splice","toastIdOrIndex","patch","index","subscribe","push","filter","cb","getQueue","addToast","visibleTime","role","duplicates","existingIndex","existingToast","timers","get","set","elapsedTime","paused","startRemoveTimeout","queueSize","length","cached","inactive","startTime","Date","now","window","clearTimeout","exitTimeout","duration","setTimeout","removeToast","pauseRemoveTimeout","resumeRemoveTimeout","toastIndex","transition","timer","delete","popToast","pop","clearToasts","disableEmit","meta","clear","Map","toastManager","startRemoveToastTimeout"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/snackbar/ToastManager.ts"],"sourcesContent":["import { nanoid } from \"nanoid\";\n\nimport { type ConfigurableToastProps } from \"./Toast.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_TOAST_VISIBLE_TIME = 5000;\n\n/**\n * - `\"normal\"` - the toast will be added to the end of the queue\n * - `\"next\"` - the toast will be inserted next-in-line in the queue, waiting\n * for the current visible toast to exit before being shown. If the toast does\n * not support duplicates, the existing toast will be moved instead and merged\n * with the toast.\n * - `\"replace\"` - if there is a currently visible toast, it will start the\n * leave transition and display the newly added toast instead.\n * - `\"immediate\"` - the same behavior as `\"replace\"` except that if there was a\n * currently visible toast, the toast will be shown again once the `\"immediate\"`\n * toast is hidden.\n *\n * @since 6.0.0 Renamed from `MessagePriority` to `ToastPriority`\n */\nexport type ToastPriority = \"normal\" | \"next\" | \"replace\" | \"immediate\";\n\n/**\n * - `\"allow\"` - toasts with the same `toastId` can be added into the queue, but\n * the leave timeout behavior might not work if multiple toasts can be shown\n * at the same time.\n * - `\"restart\"` - (default) toasts that have the same `toastId` as a toast\n * being shown will restart the exit timeout and update the toast with any\n * differences in the toast. If the toast is not currently being shown, a new\n * toast will not be added.\n * - `\"update\"` - toasts that have the same `toastId` will just update the toast\n * with the latest content while maintaining any existing timeouts\n *\n * @since 6.0.0 Renamed from `DuplicateBehavior`\n */\nexport type ToastDuplicateBehavior = \"allow\" | \"restart\" | \"update\";\n\n/**\n * @since 6.0.0\n */\nexport interface ToastMeta {\n /**\n * This will be `true` if the exit timeout has been paused either by hovering\n * the toast or the page has become inactive through blur or minimizing.\n */\n paused: boolean;\n\n /**\n * This will be `true` when the toast should be visible and `false` during the\n * exit animation.\n */\n visible: boolean;\n\n /**\n * The current toast's id which can be used with the:\n * - {@link ToastManager.removeToast}\n * - {@link ToastManager.startRemoveTimeout}\n * - {@link ToastManager.pauseRemoveTimeout}\n * - {@link ToastManager.resumeRemoveTimeout}\n */\n toastId: string;\n priority: ToastPriority;\n duplicates: ToastDuplicateBehavior;\n visibleTime: number | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CreateToastOptions extends ConfigurableToastProps {\n /**\n * @defaultValue `nanoid()`\n */\n toastId?: string;\n\n /**\n * @see {@link ToastDuplicateBehavior}\n * @defaultValue `\"restart\"`\n */\n duplicates?: ToastDuplicateBehavior;\n\n /**\n * @see {@link ToastPriority}\n * @defaultValue `\"normal\"`\n */\n priority?: ToastPriority;\n\n /**\n * Set this to `null` to prevent the toast from automatically hiding,\n * otherwise set this to the number of milliseconds to remain visible.\n *\n * @see {@link DEFAULT_TOAST_VISIBLE_TIME}\n * @defaultValue `DEFAULT_TOAST_VISIBLE_TIME`\n */\n visibleTime?: number | null;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface QueuedToast extends ConfigurableToastProps, ToastMeta {}\n\n/**\n * @since 6.0.0\n */\nexport type ToastQueue = readonly Readonly<QueuedToast>[];\n\n/**\n * @since 6.0.0\n */\nexport type ToastCallback = (queue: ToastQueue) => void;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface ToastVisibilityTimers {\n inactive: boolean;\n startTime: number;\n elapsedTime: number;\n exitTimeout?: number;\n}\n\n/**\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @see {@link ToastManagerProvider}\n * @since 6.0.0\n */\nexport class ToastManager {\n #queue: QueuedToast[];\n #timers: Map<string, ToastVisibilityTimers>;\n #listeners: ToastCallback[];\n\n constructor() {\n this.#queue = [];\n this.#timers = new Map();\n this.#listeners = [];\n\n // All of the class methods must be arrow functions to preserve the correct\n // `this` value. If they aren't arrow functions, I'd have to wrap each call\n // in an arrow function to work.\n //\n // i.e.\n // useSyncExternalStore(\n // (cb) => manager.subscribe(cb),\n // () => manager.getQueue(),\n // () => manager.getQueue(),\n // );\n }\n\n #emit = (): void => {\n // shallow clone to ensure react updates\n this.#queue = [...this.#queue];\n this.#listeners.forEach((callback) => {\n callback(this.#queue);\n });\n };\n\n #getToastIndex = (toastId: string | undefined): number => {\n if (!toastId) {\n return -1;\n }\n\n return this.#queue.findIndex((toast) => toast.toastId === toastId);\n };\n\n #getToast = (toastId: string | undefined): QueuedToast | undefined => {\n return this.#queue[this.#getToastIndex(toastId)];\n };\n\n /**\n * Starts the exit transition for the currently shown toast and adds the next\n * toast into the queue. This requires a manual call to `this.#emit()`\n * afterwards.\n */\n #addToastImmediately = (nextToast: QueuedToast): void => {\n const [current] = this.#queue;\n this.clearTimer(current.toastId);\n this.#queue[0] = {\n ...current,\n visible: false,\n };\n if (nextToast.priority === \"immediate\") {\n this.#queue.splice(1, 0, nextToast, current);\n } else {\n this.#queue.splice(1, 0, nextToast);\n }\n };\n\n /**\n * This calls `this.#emit()` if the toast was updated\n */\n #updateToast = (\n toastIdOrIndex: string | number,\n patch: Partial<QueuedToast>\n ): void => {\n const index =\n typeof toastIdOrIndex === \"number\"\n ? toastIdOrIndex\n : this.#getToastIndex(toastIdOrIndex);\n\n if (index === -1) {\n return;\n }\n\n this.#queue[index] = {\n ...this.#queue[index],\n ...patch,\n };\n this.#emit();\n };\n\n /**\n * This is just used to subscribe to changes in the {@link useToastQueue}.\n *\n * ```tsx\n * useSyncExternalStore(\n * toastManager.subscribe,\n * toastManager.getQueue,\n * toastManager.getQueue,\n * );\n * ```\n *\n * @internal\n */\n subscribe = (callback: ToastCallback): (() => void) => {\n this.#listeners.push(callback);\n\n return () => {\n this.#listeners = this.#listeners.filter((cb) => cb !== callback);\n };\n };\n\n /**\n * @see {@link subscribe}\n * @internal\n */\n getQueue = (): ToastQueue => {\n return this.#queue;\n };\n\n /**\n * Either adds the toast to the queue or updates an existing toast when using\n * an existing `toastId`.\n *\n * @example Adding toasts\n * ```tsx\n * // create a toast when the user is offline that will not disappear\n * addToast({ toastId: \"offline\", visibleTime: null });\n *\n * // add a new toast that displays `\"Toast\"` to the queue\n * addToast({ children: \"Toast!\" });\n *\n * // add an online toast notification. since these three use the same toast\n * // id, the hide timer will be reset each time\n * addToast({ toastId: \"online\" });\n * addToast({ toastId: \"online\" });\n * addToast({ toastId: \"online\" });\n *\n * // add a server error toast to the queue where the second one will be\n * // ignored\n * addToast({\n * toastId: \"ServerError\",\n * theme: \"error\",\n * duplicates: \"prevent\",\n * });\n * addToast({\n * toastId: \"ServerError\",\n * theme: \"error\",\n * duplicates: \"prevent\",\n * });\n *\n * // add a toast to the queue that has an action button that says \"Goodbye\"\n * addToast({\n * children: \"Hello, world!\",\n * action: \"Goodbye\",\n * });\n *\n * // add a toast to the queue that has an action button that says \"Goodbye\"\n * // and a custom click handler\n * addToast({\n * children: \"Hello, world!\",\n * action: {\n * onClick: () => {\n * logout();\n * },\n * children: \"Goodbye\",\n * },\n * });\n *\n * // add a toast to the queue that renders a react component in the content,\n * // a custom action button implementation (using `ToastActionButton`), and a\n * // close button\n * addToast({\n * children: <SomeCustomComponent />,\n * actionButton: <SomeCustomActionButton />,\n * closeButton: true,\n * });\n * ```\n */\n addToast = (toast: CreateToastOptions): void => {\n const {\n toastId = nanoid(),\n visibleTime = DEFAULT_TOAST_VISIBLE_TIME,\n role = visibleTime === null ? \"alert\" : \"status\",\n priority = \"normal\",\n duplicates = \"restart\",\n } = toast;\n\n const existingIndex = this.#getToastIndex(toast.toastId);\n if (existingIndex !== -1 && duplicates !== \"allow\") {\n const existingToast = this.#queue[existingIndex];\n const nextToast: QueuedToast = {\n ...existingToast,\n ...toast,\n };\n\n // reorder/move the existing toast to be the next item in the queue by:\n // - removing the toast from the queue\n // - inserting it into the next position with the updates\n if (priority === \"next\" && existingIndex > 1) {\n this.#queue.splice(existingIndex, 1);\n this.#queue.splice(1, 0, nextToast);\n this.#emit();\n return;\n }\n\n // only need to reorder the queue if it is not being shown\n if (\n (priority === \"replace\" || priority === \"immediate\") &&\n existingIndex !== 0\n ) {\n this.#queue.splice(existingIndex, 1);\n this.#addToastImmediately(nextToast);\n this.#emit();\n return;\n }\n\n const timers = this.#timers.get(toastId);\n if (existingToast.visible && duplicates === \"restart\" && timers) {\n this.#timers.set(toastId, { ...timers, elapsedTime: 0 });\n\n // wait for the next resume event instead. this _should_ only happen\n // when hovering a toast and another toast replaces it\n if (!nextToast.paused) {\n this.startRemoveTimeout(toastId);\n }\n }\n\n this.#updateToast(existingIndex, toast);\n return;\n }\n\n const nextToast: QueuedToast = {\n ...toast,\n role,\n paused: false,\n visible: true,\n toastId,\n priority,\n duplicates,\n visibleTime,\n };\n\n const queueSize = this.#queue.length;\n if (priority === \"next\" && queueSize > 1) {\n this.#queue.splice(1, 0, nextToast);\n } else if (\n (priority === \"replace\" || priority === \"immediate\") &&\n queueSize > 0\n ) {\n this.#addToastImmediately(nextToast);\n } else {\n this.#queue.push(nextToast);\n }\n\n this.#emit();\n };\n\n /**\n * Attempts to start the timeout for removing the toast when the `visibleTime`\n * is not null for a toast.\n *\n * @param toastId - The specific toastId to update\n */\n startRemoveTimeout = (toastId: string): void => {\n const toast = this.#getToast(toastId);\n if (!toast) {\n return;\n }\n\n const { visibleTime } = toast;\n if (visibleTime === null) {\n // Must manually be closed\n return;\n }\n\n const cached = this.#timers.get(toastId);\n const timers = (cached && { ...cached }) || {\n inactive: false,\n startTime: Date.now(),\n elapsedTime: 0,\n };\n window.clearTimeout(timers.exitTimeout);\n\n let duration = visibleTime;\n if (timers.elapsedTime) {\n duration -= timers.elapsedTime;\n }\n\n timers.inactive = false;\n timers.exitTimeout = window.setTimeout(() => {\n this.removeToast(toastId, true);\n }, duration);\n this.#timers.set(toastId, timers);\n };\n\n /**\n * Pauses the remove timeout for a specific toast normally with hover events\n * or the browser becoming inactive.\n *\n * @param toastId - The specific toastId to pause\n */\n pauseRemoveTimeout = (toastId: string): void => {\n const toast = this.#getToast(toastId);\n const cached = this.#timers.get(toastId);\n if (!toast || !cached || cached.inactive) {\n return;\n }\n\n window.clearTimeout(cached.exitTimeout);\n const timers = { ...cached };\n timers.inactive = true;\n timers.elapsedTime = Date.now() - timers.startTime + timers.elapsedTime;\n this.#timers.set(toastId, timers);\n this.#updateToast(toastId, { paused: true });\n };\n\n /**\n * Resumes the current remove timeout if it was paused by\n * {@link pauseRemoveTimeout}.\n *\n * @param toastId - The specific toastId to resume\n */\n resumeRemoveTimeout = (toastId: string): void => {\n const toastIndex = this.#getToastIndex(toastId);\n const timers = this.#timers.get(toastId);\n if (toastIndex === -1 || !timers?.startTime) {\n return;\n }\n\n timers.startTime = Date.now();\n this.#updateToast(toastIndex, { paused: false });\n this.startRemoveTimeout(toastId);\n };\n\n /**\n * Removes a toast by id from the queue without any exit animation.\n *\n * @param toastId - The specific {@link QueuedToast.toastId}\n * @param transition - Set this to `true` to remove the toast by the exit\n * transition instead of immediately.\n */\n removeToast = (toastId: string, transition: boolean): void => {\n const toastIndex = this.#getToastIndex(toastId);\n if (toastIndex === -1) {\n return;\n }\n\n if (transition) {\n this.clearTimer(toastId);\n this.#updateToast(toastIndex, { visible: false });\n return;\n }\n\n this.#queue.splice(toastIndex, 1);\n this.#emit();\n };\n\n /**\n * Clears any pending timers for the provided toast id. This should generally\n * be used in the `useEffect` cleanup effect for any custom toast renderer\n * implementations.\n *\n * @example\n * ```tsx\n * const { toastId } = toast;\n * const toastManager = useToastManager();\n *\n * useEffect(() => {\n * return () => {\n * toastManager.clearTimer(toastId):\n * }\n * }, [toastManager, toastId]);\n * ```\n */\n clearTimer = (toastId: string): void => {\n const timer = this.#timers.get(toastId);\n window.clearTimeout(timer?.exitTimeout);\n this.#timers.delete(toastId);\n };\n\n /**\n * Removes first toast from the queue without any exit animation. You most\n * likely want to use {@link removeToast} instead.\n */\n popToast = (): void => {\n this.#queue.pop();\n this.#emit();\n };\n\n /**\n * Removes all toasts from the queue. There will be no exit animation.\n *\n * @param disableEmit - Set this to `true` to disable emitting the empty queue.\n * Mostly used for tests.\n */\n clearToasts = (disableEmit = false): void => {\n this.#queue = [];\n this.#timers.forEach((meta) => {\n window.clearTimeout(meta.exitTimeout);\n });\n this.#timers.clear();\n if (!disableEmit) {\n this.#emit();\n }\n };\n}\n\n/**\n * The default toast manager for react-md apps that will allow toasts to be\n * added without setting up the {@link ToastManagerProvider}.\n *\n * @internal\n * @since 6.0.0\n */\nexport const toastManager = new ToastManager();\n\n/**\n * @see {@link ToastManager.addToast}\n * @since 6.0.0\n */\nexport const addToast: ToastManager[\"addToast\"] = (toast) => {\n toastManager.addToast(toast);\n};\n\n/**\n * @see {@link ToastManager.startRemoveTimeout}\n * @since 6.0.0\n */\nexport const startRemoveToastTimeout: ToastManager[\"startRemoveTimeout\"] = (\n toastId\n) => {\n toastManager.startRemoveTimeout(toastId);\n};\n\n/**\n * @see {@link ToastManager.popToast}\n * @since 6.0.0\n */\nexport const popToast: ToastManager[\"popToast\"] = () => {\n toastManager.popToast();\n};\n\n/**\n * @see {@link ToastManager.removeToast}\n * @since 6.0.0\n */\nexport const removeToast: ToastManager[\"removeToast\"] = (\n toastId,\n transition\n) => {\n toastManager.removeToast(toastId, transition);\n};\n\n/**\n * @see {@link ToastManager.clearToasts}\n * @since 6.0.0\n */\nexport const clearToasts = (): void => {\n toastManager.clearToasts();\n};\n"],"names":["nanoid","DEFAULT_TOAST_VISIBLE_TIME","ToastManager","forEach","callback","toastId","findIndex","toast","nextToast","current","clearTimer","visible","priority","splice","toastIdOrIndex","patch","index","subscribe","push","filter","cb","getQueue","addToast","visibleTime","role","duplicates","existingIndex","existingToast","timers","get","set","elapsedTime","paused","startRemoveTimeout","queueSize","length","cached","inactive","startTime","Date","now","window","clearTimeout","exitTimeout","duration","setTimeout","removeToast","pauseRemoveTimeout","resumeRemoveTimeout","toastIndex","transition","timer","delete","popToast","pop","clearToasts","disableEmit","meta","clear","Map","toastManager","startRemoveToastTimeout"],"mappings":"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"}
@@ -1,9 +1,24 @@
1
1
  import { type BackgroundColor } from "../cssUtils.js";
2
- /** @since 6.0.0 */
3
- export interface ToastClassNameOptions {
2
+ declare module "react" {
3
+ interface CSSProperties {
4
+ "--rmd-toast-color"?: string;
5
+ "--rmd-toast-background-color"?: string;
6
+ "--rmd-toast-offset"?: string | number;
7
+ }
8
+ }
9
+ /**
10
+ * @since 6.3.1
11
+ */
12
+ export interface BaseToastClasNameOptions {
4
13
  className?: string;
5
14
  /** @defaultValue `"surface"` */
6
15
  theme?: BackgroundColor;
16
+ }
17
+ /**
18
+ * @since 6.0.0
19
+ * @since 6.3.1 Extends BaseToastClasNameOptions
20
+ */
21
+ export interface ToastClassNameOptions extends BaseToastClasNameOptions {
7
22
  /** @defaultValue `false` */
8
23
  action?: boolean;
9
24
  /** @defaultValue `false` */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/snackbar/toastStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-toast\");\n\n/** @since 6.0.0 */\nexport interface ToastClassNameOptions {\n className?: string;\n /** @defaultValue `\"surface\"` */\n theme?: BackgroundColor;\n /** @defaultValue `false` */\n action?: boolean;\n /** @defaultValue `false` */\n paused?: boolean;\n /** @defaultValue `false` */\n stacked?: boolean;\n /** @defaultValue `false` */\n reordered?: boolean;\n /** @defaultValue `false` */\n closeButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function toast(options: ToastClassNameOptions = {}): string {\n const {\n className,\n theme = \"surface\",\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n } = options;\n\n return cnb(\n styles({\n x: closeButton,\n action,\n paused,\n \"small-gap\": closeButton && action,\n stacked,\n reordered: stacked && reordered,\n }),\n cssUtils({\n backgroundColor:\n theme !== \"surface\" && theme !== \"current-color\" ? theme : undefined,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","toast","options","className","theme","action","paused","stacked","reordered","closeButton","x","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAmBnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,WAAW,EACZ,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLU,GAAGD;QACHJ;QACAC;QACA,aAAaG,eAAeJ;QAC5BE;QACAC,WAAWD,WAAWC;IACxB,IACAV,SAAS;QACPa,iBACEP,UAAU,aAAaA,UAAU,kBAAkBA,QAAQQ;IAC/D,IACAT;AAEJ"}
1
+ {"version":3,"sources":["../../src/snackbar/toastStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type BackgroundColor, cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-toast\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-toast-color\"?: string;\n \"--rmd-toast-background-color\"?: string;\n \"--rmd-toast-offset\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseToastClasNameOptions {\n className?: string;\n\n /** @defaultValue `\"surface\"` */\n theme?: BackgroundColor;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseToastClasNameOptions\n */\nexport interface ToastClassNameOptions extends BaseToastClasNameOptions {\n /** @defaultValue `false` */\n action?: boolean;\n /** @defaultValue `false` */\n paused?: boolean;\n /** @defaultValue `false` */\n stacked?: boolean;\n /** @defaultValue `false` */\n reordered?: boolean;\n /** @defaultValue `false` */\n closeButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function toast(options: ToastClassNameOptions = {}): string {\n const {\n className,\n theme = \"surface\",\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n } = options;\n\n return cnb(\n styles({\n x: closeButton,\n action,\n paused,\n \"small-gap\": closeButton && action,\n stacked,\n reordered: stacked && reordered,\n }),\n cssUtils({\n backgroundColor:\n theme !== \"surface\" && theme !== \"current-color\" ? theme : undefined,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","toast","options","className","theme","action","paused","stacked","reordered","closeButton","x","backgroundColor","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA+BC,QAAQ,QAAQ,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAqCnB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,WAAW,EACZ,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLU,GAAGD;QACHJ;QACAC;QACA,aAAaG,eAAeJ;QAC5BE;QACAC,WAAWD,WAAWC;IACxB,IACAV,SAAS;QACPa,iBACEP,UAAU,aAAaA,UAAU,kBAAkBA,QAAQQ;IAC/D,IACAT;AAEJ"}
@@ -1,49 +1,17 @@
1
1
  import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
2
2
  import { type ComponentWithRippleProps } from "../interaction/types.js";
3
3
  import { type CustomLinkComponent } from "../link/Link.js";
4
- declare module "react" {
5
- interface CSSProperties {
6
- "--rmd-tab-color"?: string;
7
- "--rmd-tab-active-color"?: string;
8
- "--rmd-tab-inactive-color"?: string;
9
- "--rmd-tab-disabled-color"?: string;
10
- "--rmd-tab-size"?: string;
11
- "--rmd-tab-offset"?: string | number;
12
- "--rmd-tab-min-width"?: string;
13
- "--rmd-tab-max-width"?: string;
14
- "--rmd-tab-min-height"?: string;
15
- "--rmd-tab-stacked-height"?: string;
16
- "--rmd-tab-stacked-width"?: string;
17
- "--rmd-tab-padding"?: string | number;
18
- "--rmd-tab-stacked-padding"?: string | number;
19
- "--rmd-tab-indicator-background"?: string;
20
- }
21
- }
4
+ import { type BaseTabClassNameOptions } from "./tabStyles.js";
22
5
  /**
23
6
  * @since 6.0.0
24
7
  */
25
- export interface BaseTabProps extends ComponentWithRippleProps {
8
+ export interface BaseTabProps extends ComponentWithRippleProps, BaseTabClassNameOptions {
26
9
  /**
27
10
  * Set this to `true` if the tab is currently active.
28
11
  *
29
12
  * This is normally provided by the {@link useTabs} hook.
30
13
  */
31
14
  active: boolean;
32
- /**
33
- * Set this to `true` if the {@link TabListProps.disableTransition} prop has
34
- * also been set to `true` to disable an active indicator below the tab when
35
- * {@link active} is `true`.
36
- *
37
- * @defaultValue `false`
38
- */
39
- activeIndicator?: boolean;
40
- /**
41
- * Set this to `true` when rendering the tabs vertically and
42
- * {@link activeIndicator} has been enabled.
43
- *
44
- * @defaultValue !false
45
- */
46
- verticalActiveIndicator?: boolean;
47
15
  /**
48
16
  * An optional icon to render with the with the {@link children}. The default
49
17
  * behavior will render this icon before the children.
@@ -58,13 +26,6 @@ export interface BaseTabProps extends ComponentWithRippleProps {
58
26
  * @defaultValue `false`
59
27
  */
60
28
  iconAfter?: boolean;
61
- /**
62
- * Set this to `true` to render the {@link icon} and {@link children} stacked
63
- * instead of horizontally.
64
- *
65
- * @defaultValue `false`
66
- */
67
- stacked?: boolean;
68
29
  }
69
30
  /**
70
31
  * @since 6.0.0
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\nimport { tab } from \"./tabStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-tab-color\"?: string;\n \"--rmd-tab-active-color\"?: string;\n \"--rmd-tab-inactive-color\"?: string;\n \"--rmd-tab-disabled-color\"?: string;\n\n \"--rmd-tab-size\"?: string;\n \"--rmd-tab-offset\"?: string | number;\n \"--rmd-tab-min-width\"?: string;\n \"--rmd-tab-max-width\"?: string;\n \"--rmd-tab-min-height\"?: string;\n \"--rmd-tab-stacked-height\"?: string;\n \"--rmd-tab-stacked-width\"?: string;\n \"--rmd-tab-padding\"?: string | number;\n \"--rmd-tab-stacked-padding\"?: string | number;\n \"--rmd-tab-indicator-background\"?: string;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps extends ComponentWithRippleProps {\n /**\n * Set this to `true` if the tab is currently active.\n *\n * This is normally provided by the {@link useTabs} hook.\n */\n active: boolean;\n\n /**\n * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n * also been set to `true` to disable an active indicator below the tab when\n * {@link active} is `true`.\n *\n * @defaultValue `false`\n */\n activeIndicator?: boolean;\n\n /**\n * Set this to `true` when rendering the tabs vertically and\n * {@link activeIndicator} has been enabled.\n *\n * @defaultValue !false\n */\n verticalActiveIndicator?: boolean;\n\n /**\n * An optional icon to render with the with the {@link children}. The default\n * behavior will render this icon before the children.\n *\n * @see {@link iconAfter}\n * @see {@link stacked}\n */\n icon?: ReactNode;\n\n /**\n * Set this to `true` to render the {@link icon} after the {@link children}.\n *\n * @defaultValue `false`\n */\n iconAfter?: boolean;\n\n /**\n * Set this to `true` to render the {@link icon} and {@link children} stacked\n * instead of horizontally.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabButtonProps\n extends BaseTabProps,\n ButtonHTMLAttributes<HTMLButtonElement> {\n as?: \"button\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabLinkProps\n extends BaseTabProps,\n AnchorHTMLAttributes<HTMLAnchorElement> {\n as: CustomLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link useTabs}\n * @since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n const {\n id: propId,\n as: Component = \"button\",\n active,\n activeIndicator,\n verticalActiveIndicator,\n icon,\n iconAfter,\n stacked,\n className,\n children: propChildren,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disableRipple,\n ...remaining\n } = props as TabButtonProps;\n const { disabled } = props as TabButtonProps;\n\n const id = useEnsuredId(propId, \"tab\");\n const { activeDescendantId } = useKeyboardMovementContext();\n const { ripples, handlers } = useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n });\n\n const isLink = Component !== \"button\";\n const children = useHigherContrastChildren(propChildren);\n let buttonOnlyProps: Record<string, unknown> | undefined;\n if (!isLink) {\n buttonOnlyProps = { type: \"button\" };\n }\n\n return (\n <Component\n {...remaining}\n {...buttonOnlyProps}\n {...handlers}\n aria-selected={active}\n id={id}\n role=\"tab\"\n tabIndex={id === activeDescendantId ? 0 : -1}\n className={tab({\n className,\n active,\n isLink,\n stacked: !!icon && stacked,\n disabled,\n reversed: !!icon && iconAfter,\n activeIndicator,\n verticalActiveIndicator,\n })}\n >\n {icon}\n {children}\n {ripples}\n </Component>\n );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","disabled","activeDescendantId","ripples","handlers","mode","undefined","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAUA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAGlD,SAASC,GAAG,QAAQ,iBAAiB;AAoGrC;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM,EAAE2B,QAAQ,EAAE,GAAG3B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAE0B,kBAAkB,EAAE,GAAGhC;IAC/B,MAAM,EAAEiC,OAAO,EAAEC,QAAQ,EAAE,GAAGpC,sBAAsB;QAClDqC,MAAMN,gBAAgB,SAASO;QAC/BlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;IACF;IAEA,MAAMM,SAAS7B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIqB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC/B;QACE,GAAGsB,SAAS;QACZ,GAAGQ,eAAe;QAClB,GAAGJ,QAAQ;QACZM,iBAAe/B;QACfJ,IAAIA;QACJoC,MAAK;QACLC,UAAUrC,OAAO2B,qBAAqB,IAAI,CAAC;QAC3CjB,WAAWb,IAAI;YACba;YACAN;YACA4B;YACAvB,SAAS,CAAC,CAACF,QAAQE;YACnBiB;YACAY,UAAU,CAAC,CAAC/B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAiB;;;AAGP"}
1
+ {"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type BaseTabClassNameOptions, tab } from \"./tabStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps\n extends ComponentWithRippleProps,\n BaseTabClassNameOptions {\n /**\n * Set this to `true` if the tab is currently active.\n *\n * This is normally provided by the {@link useTabs} hook.\n */\n active: boolean;\n\n /**\n * An optional icon to render with the with the {@link children}. The default\n * behavior will render this icon before the children.\n *\n * @see {@link iconAfter}\n * @see {@link stacked}\n */\n icon?: ReactNode;\n\n /**\n * Set this to `true` to render the {@link icon} after the {@link children}.\n *\n * @defaultValue `false`\n */\n iconAfter?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabButtonProps\n extends BaseTabProps,\n ButtonHTMLAttributes<HTMLButtonElement> {\n as?: \"button\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabLinkProps\n extends BaseTabProps,\n AnchorHTMLAttributes<HTMLAnchorElement> {\n as: CustomLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link useTabs}\n * @since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n const {\n id: propId,\n as: Component = \"button\",\n active,\n activeIndicator,\n verticalActiveIndicator,\n icon,\n iconAfter,\n stacked,\n className,\n children: propChildren,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disableRipple,\n ...remaining\n } = props as TabButtonProps;\n const { disabled } = props as TabButtonProps;\n\n const id = useEnsuredId(propId, \"tab\");\n const { activeDescendantId } = useKeyboardMovementContext();\n const { ripples, handlers } = useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled,\n });\n\n const isLink = Component !== \"button\";\n const children = useHigherContrastChildren(propChildren);\n let buttonOnlyProps: Record<string, unknown> | undefined;\n if (!isLink) {\n buttonOnlyProps = { type: \"button\" };\n }\n\n return (\n <Component\n {...remaining}\n {...buttonOnlyProps}\n {...handlers}\n aria-selected={active}\n id={id}\n role=\"tab\"\n tabIndex={id === activeDescendantId ? 0 : -1}\n className={tab({\n className,\n active,\n isLink,\n stacked: !!icon && stacked,\n disabled,\n reversed: !!icon && iconAfter,\n activeIndicator,\n verticalActiveIndicator,\n })}\n >\n {icon}\n {children}\n {ripples}\n </Component>\n );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","disabled","activeDescendantId","ripples","handlers","mode","undefined","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAUA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAuCC,GAAG,QAAQ,iBAAiB;AAyDnE;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM,EAAE2B,QAAQ,EAAE,GAAG3B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAE0B,kBAAkB,EAAE,GAAGhC;IAC/B,MAAM,EAAEiC,OAAO,EAAEC,QAAQ,EAAE,GAAGpC,sBAAsB;QAClDqC,MAAMN,gBAAgB,SAASO;QAC/BlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;IACF;IAEA,MAAMM,SAAS7B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIqB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC/B;QACE,GAAGsB,SAAS;QACZ,GAAGQ,eAAe;QAClB,GAAGJ,QAAQ;QACZM,iBAAe/B;QACfJ,IAAIA;QACJoC,MAAK;QACLC,UAAUrC,OAAO2B,qBAAqB,IAAI,CAAC;QAC3CjB,WAAWb,IAAI;YACba;YACAN;YACA4B;YACAvB,SAAS,CAAC,CAACF,QAAQE;YACnBiB;YACAY,UAAU,CAAC,CAAC/B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAiB;;;AAGP"}
@@ -1,13 +1,54 @@
1
+ declare module "react" {
2
+ interface CSSProperties {
3
+ "--rmd-tab-color"?: string;
4
+ "--rmd-tab-active-color"?: string;
5
+ "--rmd-tab-inactive-color"?: string;
6
+ "--rmd-tab-disabled-color"?: string;
7
+ "--rmd-tab-indicator-background"?: string;
8
+ "--rmd-tab-min-height"?: string;
9
+ "--rmd-tab-min-width"?: string;
10
+ "--rmd-tab-max-width"?: string;
11
+ "--rmd-tab-stacked-height"?: string;
12
+ "--rmd-tab-stacked-width"?: string;
13
+ "--rmd-tab-padding"?: string | number;
14
+ "--rmd-tab-stacked-padding"?: string | number;
15
+ }
16
+ }
1
17
  /**
2
- * @since 6.0.0
18
+ * @since 6.3.1
3
19
  */
4
- export interface TabClassNameOptions {
20
+ export interface BaseTabClassNameOptions {
5
21
  className?: string;
6
- active?: boolean;
7
- isLink?: boolean;
22
+ /**
23
+ * Set this to `true` if the {@link TabListProps.disableTransition} prop has
24
+ * also been set to `true` to disable an active indicator below the tab when
25
+ * {@link active} is `true`.
26
+ *
27
+ * @defaultValue `false`
28
+ */
8
29
  activeIndicator?: boolean;
30
+ /**
31
+ * Set this to `true` when rendering the tabs vertically and
32
+ * {@link activeIndicator} has been enabled.
33
+ *
34
+ * @defaultValue !false
35
+ */
9
36
  verticalActiveIndicator?: boolean;
37
+ /**
38
+ * Set this to `true` to render the {@link icon} and {@link children} stacked
39
+ * instead of horizontally.
40
+ *
41
+ * @defaultValue `false`
42
+ */
10
43
  stacked?: boolean;
44
+ }
45
+ /**
46
+ * @since 6.0.0
47
+ * @since 6.3.1 Extends BaseTabClassNameOptions
48
+ */
49
+ export interface TabClassNameOptions extends BaseTabClassNameOptions {
50
+ active?: boolean;
51
+ isLink?: boolean;
11
52
  reversed?: boolean;
12
53
  disabled?: boolean;
13
54
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n className?: string;\n active?: boolean;\n isLink?: boolean;\n activeIndicator?: boolean;\n verticalActiveIndicator?: boolean;\n stacked?: boolean;\n reversed?: boolean;\n disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n const {\n className,\n active,\n isLink,\n stacked,\n reversed,\n disabled,\n activeIndicator,\n verticalActiveIndicator,\n } = options;\n\n return cnb(\n styles({\n active,\n reversed: reversed && !stacked,\n stacked,\n \"stacked-reversed\": stacked && reversed,\n disabled,\n }),\n active &&\n activeIndicator &&\n tabIndicator({ vertical: verticalActiveIndicator }),\n cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}
1
+ {"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\nconst styles = bem(\"rmd-tab\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-tab-color\"?: string;\n \"--rmd-tab-active-color\"?: string;\n \"--rmd-tab-inactive-color\"?: string;\n \"--rmd-tab-disabled-color\"?: string;\n \"--rmd-tab-indicator-background\"?: string;\n \"--rmd-tab-min-height\"?: string;\n \"--rmd-tab-min-width\"?: string;\n \"--rmd-tab-max-width\"?: string;\n \"--rmd-tab-stacked-height\"?: string;\n \"--rmd-tab-stacked-width\"?: string;\n \"--rmd-tab-padding\"?: string | number;\n \"--rmd-tab-stacked-padding\"?: string | number;\n }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseTabClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n * also been set to `true` to disable an active indicator below the tab when\n * {@link active} is `true`.\n *\n * @defaultValue `false`\n */\n activeIndicator?: boolean;\n\n /**\n * Set this to `true` when rendering the tabs vertically and\n * {@link activeIndicator} has been enabled.\n *\n * @defaultValue !false\n */\n verticalActiveIndicator?: boolean;\n\n /**\n * Set this to `true` to render the {@link icon} and {@link children} stacked\n * instead of horizontally.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseTabClassNameOptions\n */\nexport interface TabClassNameOptions extends BaseTabClassNameOptions {\n active?: boolean;\n isLink?: boolean;\n reversed?: boolean;\n disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n const {\n className,\n active,\n isLink,\n stacked,\n reversed,\n disabled,\n activeIndicator,\n verticalActiveIndicator,\n } = options;\n\n return cnb(\n styles({\n active,\n reversed: reversed && !stacked,\n stacked,\n \"stacked-reversed\": stacked && reversed,\n disabled,\n }),\n active &&\n activeIndicator &&\n tabIndicator({ vertical: verticalActiveIndicator }),\n cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,MAAMC,SAASF,IAAI;AA8DnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}
@@ -74,6 +74,7 @@ const noop = ()=>{
74
74
  const forwardRef = useRef(null);
75
75
  const backwardRef = useRef(null);
76
76
  const { movementProps, movementContext } = useKeyboardMovementProvider({
77
+ ref: tabListRef,
77
78
  onClick (event) {
78
79
  onClick(event);
79
80
  if (event.isPropagationStopped() || !(event.target instanceof Element)) {
@@ -125,7 +126,6 @@ const noop = ()=>{
125
126
  return {
126
127
  elementProps: {
127
128
  "aria-orientation": vertical ? "vertical" : "horizontal",
128
- ref: tabListRef,
129
129
  style: {
130
130
  ...style,
131
131
  ...disableTransition ? undefined : indicatorStyles