@react-md/core 6.3.4 → 6.4.0

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 (450) hide show
  1. package/dist/CoreProviders.d.ts +1 -0
  2. package/dist/CoreProviders.js.map +1 -1
  3. package/dist/_base.scss +3 -0
  4. package/dist/_core.scss +1 -0
  5. package/dist/_utils.scss +15 -7
  6. package/dist/app-bar/AppBar.js.map +1 -1
  7. package/dist/app-bar/AppBarTitle.js.map +1 -1
  8. package/dist/autocomplete/AutocompleteListboxChildren.js.map +1 -1
  9. package/dist/autocomplete/types.js.map +1 -1
  10. package/dist/autocomplete/utils.js.map +1 -1
  11. package/dist/avatar/Avatar.js.map +1 -1
  12. package/dist/button/Button.js.map +1 -1
  13. package/dist/button/FloatingActionButton.js.map +1 -1
  14. package/dist/card/Card.js.map +1 -1
  15. package/dist/card/CardContent.js.map +1 -1
  16. package/dist/card/ClickableCard.js.map +1 -1
  17. package/dist/chip/Chip.js.map +1 -1
  18. package/dist/datetime/NativeDateField.js.map +1 -1
  19. package/dist/datetime/NativeTimeField.js.map +1 -1
  20. package/dist/datetime/useDateField.js.map +1 -1
  21. package/dist/datetime/useTimeField.js.map +1 -1
  22. package/dist/dialog/Dialog.js.map +1 -1
  23. package/dist/dialog/DialogContainer.js.map +1 -1
  24. package/dist/dialog/DialogContent.js.map +1 -1
  25. package/dist/dialog/DialogFooter.js.map +1 -1
  26. package/dist/divider/Divider.js.map +1 -1
  27. package/dist/draggable/useDraggable.js.map +1 -1
  28. package/dist/draggable/utils.js.map +1 -1
  29. package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
  30. package/dist/files/FileInput.js.map +1 -1
  31. package/dist/files/useFileUpload.js.map +1 -1
  32. package/dist/files/validation.js.map +1 -1
  33. package/dist/focus/useFocusContainer.js.map +1 -1
  34. package/dist/form/Fieldset.d.ts +19 -0
  35. package/dist/form/Fieldset.js +22 -2
  36. package/dist/form/Fieldset.js.map +1 -1
  37. package/dist/form/FormMessageContainer.js.map +1 -1
  38. package/dist/form/FormMessageCounter.js.map +1 -1
  39. package/dist/form/InputToggle.js.map +1 -1
  40. package/dist/form/Legend.d.ts +27 -5
  41. package/dist/form/Legend.js +39 -6
  42. package/dist/form/Legend.js.map +1 -1
  43. package/dist/form/Listbox.js.map +1 -1
  44. package/dist/form/ListboxProvider.js.map +1 -1
  45. package/dist/form/NativeSelect.js.map +1 -1
  46. package/dist/form/Password.js.map +1 -1
  47. package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
  48. package/dist/form/Select.js.map +1 -1
  49. package/dist/form/Slider.js.map +1 -1
  50. package/dist/form/SliderContainer.js.map +1 -1
  51. package/dist/form/SliderThumb.js.map +1 -1
  52. package/dist/form/SliderTrack.js.map +1 -1
  53. package/dist/form/SliderValueMarks.js.map +1 -1
  54. package/dist/form/Switch.js.map +1 -1
  55. package/dist/form/TextArea.js.map +1 -1
  56. package/dist/form/TextField.js.map +1 -1
  57. package/dist/form/TextFieldContainer.js.map +1 -1
  58. package/dist/form/_fieldset.scss +7 -0
  59. package/dist/form/_legend.scss +68 -0
  60. package/dist/form/_text-field.scss +39 -4
  61. package/dist/form/fieldsetStyles.d.ts +6 -1
  62. package/dist/form/fieldsetStyles.js +3 -2
  63. package/dist/form/fieldsetStyles.js.map +1 -1
  64. package/dist/form/inputToggleStyles.js.map +1 -1
  65. package/dist/form/labelStyles.d.ts +1 -1
  66. package/dist/form/labelStyles.js +1 -1
  67. package/dist/form/labelStyles.js.map +1 -1
  68. package/dist/form/legendStyles.d.ts +83 -0
  69. package/dist/form/legendStyles.js +25 -0
  70. package/dist/form/legendStyles.js.map +1 -0
  71. package/dist/form/selectUtils.js.map +1 -1
  72. package/dist/form/textFieldContainerStyles.js.map +1 -1
  73. package/dist/form/types.d.ts +28 -6
  74. package/dist/form/types.js.map +1 -1
  75. package/dist/form/useCheckboxGroup.js.map +1 -1
  76. package/dist/form/useCombobox.js.map +1 -1
  77. package/dist/form/useNumberField.js +16 -19
  78. package/dist/form/useNumberField.js.map +1 -1
  79. package/dist/form/useRangeSlider.js.map +1 -1
  80. package/dist/form/useSlider.js.map +1 -1
  81. package/dist/form/useTextField.js.map +1 -1
  82. package/dist/hoverMode/useHoverMode.js.map +1 -1
  83. package/dist/icon/FontIcon.js.map +1 -1
  84. package/dist/icon/IconRotator.js.map +1 -1
  85. package/dist/icon/MaterialIcon.js.map +1 -1
  86. package/dist/icon/MaterialSymbol.js.map +1 -1
  87. package/dist/icon/SVGIcon.js.map +1 -1
  88. package/dist/icon/config.d.ts +0 -1
  89. package/dist/icon/config.js +10 -7
  90. package/dist/icon/config.js.map +1 -1
  91. package/dist/icon/materialConfig.js.map +1 -1
  92. package/dist/icon/styles.js.map +1 -1
  93. package/dist/interaction/UserInteractionModeProvider.js +6 -4
  94. package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
  95. package/dist/interaction/types.js.map +1 -1
  96. package/dist/interaction/useElementInteraction.js.map +1 -1
  97. package/dist/layout/LayoutAppBar.d.ts +6 -6
  98. package/dist/layout/LayoutAppBar.js +6 -6
  99. package/dist/layout/LayoutAppBar.js.map +1 -1
  100. package/dist/layout/LayoutNav.js.map +1 -1
  101. package/dist/layout/LayoutWindowSplitter.js.map +1 -1
  102. package/dist/layout/Main.js.map +1 -1
  103. package/dist/layout/useExpandableLayout.js +43 -0
  104. package/dist/layout/useExpandableLayout.js.map +1 -1
  105. package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
  106. package/dist/layout/useLayoutTree.js.map +1 -1
  107. package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
  108. package/dist/layout/useResizableLayout.js.map +1 -1
  109. package/dist/link/Link.js.map +1 -1
  110. package/dist/link/SkipToMainContent.js +19 -21
  111. package/dist/link/SkipToMainContent.js.map +1 -1
  112. package/dist/list/List.js.map +1 -1
  113. package/dist/list/ListItem.js.map +1 -1
  114. package/dist/list/ListItemAddon.js.map +1 -1
  115. package/dist/list/ListItemLink.js.map +1 -1
  116. package/dist/list/ListSubheader.js.map +1 -1
  117. package/dist/list/getListItemHeight.js.map +1 -1
  118. package/dist/list/listItemStyles.js.map +1 -1
  119. package/dist/list/types.js.map +1 -1
  120. package/dist/media-queries/AppSizeProvider.d.ts +2 -0
  121. package/dist/media-queries/AppSizeProvider.js +3 -2
  122. package/dist/media-queries/AppSizeProvider.js.map +1 -1
  123. package/dist/media-queries/appSize.d.ts +3 -0
  124. package/dist/media-queries/appSize.js +3 -1
  125. package/dist/media-queries/appSize.js.map +1 -1
  126. package/dist/media-queries/config.d.ts +11 -0
  127. package/dist/media-queries/config.js +26 -0
  128. package/dist/media-queries/config.js.map +1 -0
  129. package/dist/menu/DropdownMenu.js.map +1 -1
  130. package/dist/menu/Menu.js.map +1 -1
  131. package/dist/menu/MenuItemButton.js.map +1 -1
  132. package/dist/menu/MenuItemFileInput.js.map +1 -1
  133. package/dist/menu/MenuItemInputToggle.js.map +1 -1
  134. package/dist/menu/MenuItemSeparator.js.map +1 -1
  135. package/dist/menu/MenuVisibilityProvider.js.map +1 -1
  136. package/dist/menu/MenuWidget.js.map +1 -1
  137. package/dist/menu/useContextMenu.js.map +1 -1
  138. package/dist/movement/types.d.ts +28 -3
  139. package/dist/movement/types.js.map +1 -1
  140. package/dist/movement/useKeyboardMovementProvider.js +96 -47
  141. package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
  142. package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
  143. package/dist/navigation/NavItem.js.map +1 -1
  144. package/dist/navigation/NavItemButton.js.map +1 -1
  145. package/dist/navigation/NavItemLink.js.map +1 -1
  146. package/dist/navigation/getTableOfContentsHeadings.js.map +1 -1
  147. package/dist/navigation/types.js.map +1 -1
  148. package/dist/overlay/Overlay.js.map +1 -1
  149. package/dist/positioning/createHorizontalPosition.js.map +1 -1
  150. package/dist/positioning/createVerticalPosition.js.map +1 -1
  151. package/dist/positioning/useFixedPositioning.js.map +1 -1
  152. package/dist/progress/CircularProgress.js.map +1 -1
  153. package/dist/progress/LinearProgress.js.map +1 -1
  154. package/dist/progress/linearProgressStyles.js.map +1 -1
  155. package/dist/responsive-item/ResponsiveItem.js.map +1 -1
  156. package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
  157. package/dist/searching/caseInsensitive.js.map +1 -1
  158. package/dist/segmented-button/SegmentedButton.js.map +1 -1
  159. package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
  160. package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
  161. package/dist/sheet/Sheet.js.map +1 -1
  162. package/dist/snackbar/Toast.js.map +1 -1
  163. package/dist/spinbutton/SpinButton.d.ts +16 -0
  164. package/dist/spinbutton/SpinButton.js +55 -0
  165. package/dist/spinbutton/SpinButton.js.map +1 -0
  166. package/dist/spinbutton/SpinButtonGroupProvider.d.ts +17 -0
  167. package/dist/spinbutton/SpinButtonGroupProvider.js +19 -0
  168. package/dist/spinbutton/SpinButtonGroupProvider.js.map +1 -0
  169. package/dist/spinbutton/defaults.d.ts +9 -0
  170. package/dist/spinbutton/defaults.js +25 -0
  171. package/dist/spinbutton/defaults.js.map +1 -0
  172. package/dist/spinbutton/types.d.ts +324 -0
  173. package/dist/spinbutton/types.js +5 -0
  174. package/dist/spinbutton/types.js.map +1 -0
  175. package/dist/spinbutton/useSpinButton.d.ts +5 -0
  176. package/dist/spinbutton/useSpinButton.js +260 -0
  177. package/dist/spinbutton/useSpinButton.js.map +1 -0
  178. package/dist/spinbutton/useSpinButtonGroupProvider.d.ts +27 -0
  179. package/dist/spinbutton/useSpinButtonGroupProvider.js +49 -0
  180. package/dist/spinbutton/useSpinButtonGroupProvider.js.map +1 -0
  181. package/dist/spinbutton/utils/deselectNode.d.ts +5 -0
  182. package/dist/spinbutton/utils/deselectNode.js +17 -0
  183. package/dist/spinbutton/utils/deselectNode.js.map +1 -0
  184. package/dist/spinbutton/utils/resolveInputEvent.d.ts +30 -0
  185. package/dist/spinbutton/utils/resolveInputEvent.js +53 -0
  186. package/dist/spinbutton/utils/resolveInputEvent.js.map +1 -0
  187. package/dist/spinbutton/utils/selectNode.d.ts +5 -0
  188. package/dist/spinbutton/utils/selectNode.js +15 -0
  189. package/dist/spinbutton/utils/selectNode.js.map +1 -0
  190. package/dist/table/StickyTableSection.js.map +1 -1
  191. package/dist/table/Table.js.map +1 -1
  192. package/dist/table/TableBody.js.map +1 -1
  193. package/dist/table/TableCellContent.js.map +1 -1
  194. package/dist/table/TableCheckbox.js.map +1 -1
  195. package/dist/table/TableFooter.js.map +1 -1
  196. package/dist/table/TableHeader.js.map +1 -1
  197. package/dist/table/TableRadio.js.map +1 -1
  198. package/dist/table/TableRow.js.map +1 -1
  199. package/dist/table/useStickyTableSection.js.map +1 -1
  200. package/dist/tabs/SimpleTabPanel.js.map +1 -1
  201. package/dist/tabs/SimpleTabPanels.js.map +1 -1
  202. package/dist/tabs/Tab.js.map +1 -1
  203. package/dist/tabs/TabList.js.map +1 -1
  204. package/dist/tabs/TabListScrollButton.js.map +1 -1
  205. package/dist/tabs/useMaxTabPanelHeight.js.map +1 -1
  206. package/dist/test-utils/data-testid.js.map +1 -1
  207. package/dist/test-utils/mocks/match-media.js +5 -5
  208. package/dist/test-utils/mocks/match-media.js.map +1 -1
  209. package/dist/test-utils/vitest/timers.d.ts +1 -1
  210. package/dist/test-utils/vitest/timers.js +1 -1
  211. package/dist/test-utils/vitest/timers.js.map +1 -1
  212. package/dist/tooltip/Tooltip.js.map +1 -1
  213. package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
  214. package/dist/tooltip/useTooltip.js.map +1 -1
  215. package/dist/transition/CSSTransition.js.map +1 -1
  216. package/dist/transition/Collapse.js.map +1 -1
  217. package/dist/transition/CrossFade.js.map +1 -1
  218. package/dist/transition/ScaleTransition.js.map +1 -1
  219. package/dist/transition/SkeletonPlaceholder.js.map +1 -1
  220. package/dist/transition/Slide.js.map +1 -1
  221. package/dist/transition/SlideContainer.js.map +1 -1
  222. package/dist/transition/types.js.map +1 -1
  223. package/dist/transition/useCollapseTransition.js.map +1 -1
  224. package/dist/transition/useCrossFadeTransition.js.map +1 -1
  225. package/dist/transition/useMaxWidthTransition.js.map +1 -1
  226. package/dist/transition/useScaleTransition.js.map +1 -1
  227. package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
  228. package/dist/tree/Tree.js.map +1 -1
  229. package/dist/tree/TreeItem.js.map +1 -1
  230. package/dist/tree/TreeProvider.js.map +1 -1
  231. package/dist/tree/styles.js.map +1 -1
  232. package/dist/tree/types.js.map +1 -1
  233. package/dist/tree/useTreeMovement.js.map +1 -1
  234. package/dist/typography/HighlightTextMark.js.map +1 -1
  235. package/dist/typography/Mark.js.map +1 -1
  236. package/dist/typography/TextContainer.js.map +1 -1
  237. package/dist/typography/Typography.js.map +1 -1
  238. package/dist/typography/_typography.scss +0 -1
  239. package/dist/useElementSize.js.map +1 -1
  240. package/dist/useIntersectionObserver.js.map +1 -1
  241. package/dist/useMutationObserver.js.map +1 -1
  242. package/dist/useWindowSize.js.map +1 -1
  243. package/dist/utils/getNumberOfDigits.d.ts +7 -0
  244. package/dist/utils/getNumberOfDigits.js +11 -0
  245. package/dist/utils/getNumberOfDigits.js.map +1 -0
  246. package/dist/utils/nearest.js +2 -1
  247. package/dist/utils/nearest.js.map +1 -1
  248. package/dist/utils/useDevEffect.d.ts +7 -0
  249. package/dist/utils/useDevEffect.js +8 -0
  250. package/dist/utils/useDevEffect.js.map +1 -0
  251. package/dist/window-splitter/WindowSplitter.js +3 -2
  252. package/dist/window-splitter/WindowSplitter.js.map +1 -1
  253. package/dist/window-splitter/_window-splitter.scss +60 -12
  254. package/dist/window-splitter/styles.d.ts +9 -0
  255. package/dist/window-splitter/styles.js +3 -2
  256. package/dist/window-splitter/styles.js.map +1 -1
  257. package/dist/window-splitter/useWindowSplitter.js.map +1 -1
  258. package/package.json +37 -29
  259. package/src/CoreProviders.tsx +1 -0
  260. package/src/app-bar/AppBar.tsx +1 -2
  261. package/src/app-bar/AppBarTitle.tsx +1 -2
  262. package/src/autocomplete/AutocompleteListboxChildren.tsx +3 -1
  263. package/src/autocomplete/types.ts +24 -19
  264. package/src/autocomplete/utils.ts +9 -6
  265. package/src/avatar/Avatar.tsx +2 -1
  266. package/src/button/Button.tsx +2 -1
  267. package/src/button/FloatingActionButton.tsx +2 -1
  268. package/src/card/Card.tsx +2 -1
  269. package/src/card/CardContent.tsx +1 -2
  270. package/src/card/ClickableCard.tsx +1 -2
  271. package/src/chip/Chip.tsx +2 -1
  272. package/src/datetime/NativeDateField.tsx +2 -1
  273. package/src/datetime/NativeTimeField.tsx +2 -1
  274. package/src/datetime/useDateField.ts +13 -8
  275. package/src/datetime/useTimeField.ts +13 -8
  276. package/src/dialog/Dialog.tsx +2 -1
  277. package/src/dialog/DialogContainer.tsx +1 -2
  278. package/src/dialog/DialogContent.tsx +1 -2
  279. package/src/dialog/DialogFooter.tsx +1 -2
  280. package/src/divider/Divider.tsx +1 -2
  281. package/src/draggable/useDraggable.ts +4 -4
  282. package/src/draggable/utils.ts +4 -2
  283. package/src/expansion-panel/ExpansionPanelHeader.tsx +1 -2
  284. package/src/files/FileInput.tsx +2 -1
  285. package/src/files/useFileUpload.ts +6 -6
  286. package/src/files/validation.ts +1 -2
  287. package/src/focus/useFocusContainer.ts +4 -4
  288. package/src/form/Fieldset.tsx +25 -3
  289. package/src/form/FormMessageContainer.tsx +1 -2
  290. package/src/form/FormMessageCounter.tsx +1 -2
  291. package/src/form/InputToggle.tsx +3 -3
  292. package/src/form/Legend.tsx +55 -10
  293. package/src/form/Listbox.tsx +1 -2
  294. package/src/form/ListboxProvider.ts +3 -2
  295. package/src/form/NativeSelect.tsx +2 -1
  296. package/src/form/Password.tsx +4 -2
  297. package/src/form/ResizingTextAreaWrapper.tsx +1 -2
  298. package/src/form/Select.tsx +2 -1
  299. package/src/form/Slider.tsx +2 -1
  300. package/src/form/SliderContainer.tsx +1 -2
  301. package/src/form/SliderThumb.tsx +6 -3
  302. package/src/form/SliderTrack.tsx +2 -1
  303. package/src/form/SliderValueMarks.tsx +1 -2
  304. package/src/form/Switch.tsx +2 -1
  305. package/src/form/TextArea.tsx +1 -2
  306. package/src/form/TextField.tsx +2 -1
  307. package/src/form/TextFieldContainer.tsx +1 -2
  308. package/src/form/fieldsetStyles.ts +18 -3
  309. package/src/form/inputToggleStyles.ts +4 -2
  310. package/src/form/labelStyles.ts +1 -1
  311. package/src/form/legendStyles.ts +132 -0
  312. package/src/form/selectUtils.ts +3 -2
  313. package/src/form/textFieldContainerStyles.ts +1 -2
  314. package/src/form/types.ts +35 -17
  315. package/src/form/useCheckboxGroup.ts +3 -2
  316. package/src/form/useCombobox.ts +8 -3
  317. package/src/form/useNumberField.ts +36 -35
  318. package/src/form/useRangeSlider.ts +1 -2
  319. package/src/form/useSlider.ts +1 -2
  320. package/src/form/useTextField.ts +8 -3
  321. package/src/hoverMode/useHoverMode.ts +4 -8
  322. package/src/icon/FontIcon.tsx +1 -2
  323. package/src/icon/IconRotator.tsx +1 -2
  324. package/src/icon/MaterialIcon.tsx +2 -1
  325. package/src/icon/MaterialSymbol.tsx +2 -1
  326. package/src/icon/SVGIcon.tsx +1 -2
  327. package/src/icon/config.tsx +10 -7
  328. package/src/icon/materialConfig.ts +1 -2
  329. package/src/icon/styles.ts +1 -2
  330. package/src/interaction/UserInteractionModeProvider.tsx +9 -4
  331. package/src/interaction/types.ts +1 -2
  332. package/src/interaction/useElementInteraction.tsx +3 -2
  333. package/src/layout/LayoutAppBar.tsx +6 -6
  334. package/src/layout/LayoutNav.tsx +2 -1
  335. package/src/layout/LayoutWindowSplitter.tsx +2 -1
  336. package/src/layout/Main.tsx +1 -2
  337. package/src/layout/useExpandableLayout.ts +63 -5
  338. package/src/layout/useHorizontalLayoutTransition.ts +1 -2
  339. package/src/layout/useLayoutTree.ts +2 -2
  340. package/src/layout/useLayoutWindowSplitter.ts +6 -6
  341. package/src/layout/useResizableLayout.ts +3 -6
  342. package/src/link/Link.tsx +1 -2
  343. package/src/link/SkipToMainContent.tsx +20 -23
  344. package/src/list/List.tsx +1 -2
  345. package/src/list/ListItem.tsx +2 -1
  346. package/src/list/ListItemAddon.tsx +2 -1
  347. package/src/list/ListItemLink.tsx +2 -1
  348. package/src/list/ListSubheader.tsx +1 -2
  349. package/src/list/getListItemHeight.ts +8 -9
  350. package/src/list/listItemStyles.ts +1 -2
  351. package/src/list/types.ts +1 -2
  352. package/src/media-queries/AppSizeProvider.tsx +8 -10
  353. package/src/media-queries/appSize.ts +3 -0
  354. package/src/media-queries/config.ts +41 -0
  355. package/src/menu/DropdownMenu.tsx +4 -5
  356. package/src/menu/Menu.tsx +2 -1
  357. package/src/menu/MenuItemButton.tsx +1 -2
  358. package/src/menu/MenuItemFileInput.tsx +2 -1
  359. package/src/menu/MenuItemInputToggle.tsx +3 -3
  360. package/src/menu/MenuItemSeparator.tsx +2 -1
  361. package/src/menu/MenuVisibilityProvider.tsx +4 -2
  362. package/src/menu/MenuWidget.tsx +1 -2
  363. package/src/menu/useContextMenu.ts +4 -2
  364. package/src/movement/types.ts +52 -13
  365. package/src/movement/useKeyboardMovementProvider.ts +77 -38
  366. package/src/navigation/CollapsibleNavGroup.tsx +1 -2
  367. package/src/navigation/NavItem.tsx +1 -2
  368. package/src/navigation/NavItemButton.tsx +2 -1
  369. package/src/navigation/NavItemLink.tsx +2 -1
  370. package/src/navigation/getTableOfContentsHeadings.ts +1 -2
  371. package/src/navigation/types.ts +1 -2
  372. package/src/overlay/Overlay.tsx +2 -1
  373. package/src/positioning/createHorizontalPosition.ts +10 -12
  374. package/src/positioning/createVerticalPosition.ts +10 -11
  375. package/src/positioning/useFixedPositioning.ts +6 -3
  376. package/src/progress/CircularProgress.tsx +2 -1
  377. package/src/progress/LinearProgress.tsx +2 -1
  378. package/src/progress/linearProgressStyles.ts +1 -2
  379. package/src/responsive-item/ResponsiveItem.tsx +1 -2
  380. package/src/responsive-item/ResponsiveItemOverlay.tsx +2 -1
  381. package/src/searching/caseInsensitive.ts +2 -4
  382. package/src/segmented-button/SegmentedButton.tsx +2 -1
  383. package/src/segmented-button/SegmentedButtonContainer.tsx +2 -1
  384. package/src/segmented-button/segmentedButtonStyles.ts +1 -2
  385. package/src/sheet/Sheet.tsx +1 -2
  386. package/src/snackbar/Toast.tsx +2 -1
  387. package/src/spinbutton/SpinButton.tsx +98 -0
  388. package/src/spinbutton/SpinButtonGroupProvider.tsx +32 -0
  389. package/src/spinbutton/defaults.ts +45 -0
  390. package/src/spinbutton/types.ts +413 -0
  391. package/src/spinbutton/useSpinButton.ts +311 -0
  392. package/src/spinbutton/useSpinButtonGroupProvider.ts +104 -0
  393. package/src/spinbutton/utils/deselectNode.ts +17 -0
  394. package/src/spinbutton/utils/resolveInputEvent.ts +112 -0
  395. package/src/spinbutton/utils/selectNode.ts +15 -0
  396. package/src/table/StickyTableSection.tsx +2 -1
  397. package/src/table/Table.tsx +1 -2
  398. package/src/table/TableBody.tsx +2 -1
  399. package/src/table/TableCellContent.tsx +1 -2
  400. package/src/table/TableCheckbox.tsx +1 -2
  401. package/src/table/TableFooter.tsx +1 -2
  402. package/src/table/TableHeader.tsx +1 -2
  403. package/src/table/TableRadio.tsx +1 -2
  404. package/src/table/TableRow.tsx +1 -2
  405. package/src/table/useStickyTableSection.tsx +1 -2
  406. package/src/tabs/SimpleTabPanel.tsx +2 -1
  407. package/src/tabs/SimpleTabPanels.tsx +2 -1
  408. package/src/tabs/Tab.tsx +3 -6
  409. package/src/tabs/TabList.tsx +2 -1
  410. package/src/tabs/TabListScrollButton.tsx +1 -2
  411. package/src/tabs/useMaxTabPanelHeight.ts +7 -4
  412. package/src/test-utils/data-testid.ts +1 -2
  413. package/src/test-utils/mocks/match-media.ts +5 -10
  414. package/src/test-utils/vitest/timers.ts +1 -1
  415. package/src/tooltip/Tooltip.tsx +2 -1
  416. package/src/tooltip/TooltipHoverModeProvider.tsx +1 -2
  417. package/src/tooltip/useTooltip.ts +9 -5
  418. package/src/transition/CSSTransition.tsx +2 -1
  419. package/src/transition/Collapse.tsx +4 -2
  420. package/src/transition/CrossFade.tsx +2 -1
  421. package/src/transition/ScaleTransition.tsx +2 -1
  422. package/src/transition/SkeletonPlaceholder.tsx +1 -2
  423. package/src/transition/Slide.tsx +2 -1
  424. package/src/transition/SlideContainer.tsx +1 -2
  425. package/src/transition/types.ts +15 -16
  426. package/src/transition/useCollapseTransition.ts +6 -5
  427. package/src/transition/useCrossFadeTransition.ts +3 -2
  428. package/src/transition/useMaxWidthTransition.ts +1 -2
  429. package/src/transition/useScaleTransition.ts +3 -2
  430. package/src/transition/useSkeletonPlaceholder.ts +1 -2
  431. package/src/tree/Tree.tsx +2 -1
  432. package/src/tree/TreeItem.tsx +2 -1
  433. package/src/tree/TreeProvider.tsx +4 -4
  434. package/src/tree/styles.ts +1 -2
  435. package/src/tree/types.ts +1 -2
  436. package/src/tree/useTreeMovement.ts +1 -2
  437. package/src/typography/HighlightTextMark.tsx +1 -2
  438. package/src/typography/Mark.tsx +1 -2
  439. package/src/typography/TextContainer.tsx +1 -2
  440. package/src/typography/Typography.tsx +1 -2
  441. package/src/useElementSize.ts +7 -4
  442. package/src/useIntersectionObserver.ts +3 -2
  443. package/src/useMutationObserver.ts +3 -2
  444. package/src/useWindowSize.ts +4 -2
  445. package/src/utils/getNumberOfDigits.ts +18 -0
  446. package/src/utils/nearest.ts +2 -1
  447. package/src/utils/useDevEffect.ts +9 -0
  448. package/src/window-splitter/WindowSplitter.tsx +5 -2
  449. package/src/window-splitter/styles.ts +13 -2
  450. package/src/window-splitter/useWindowSplitter.ts +3 -1
@@ -19,6 +19,7 @@ export interface ReactMDCoreConfiguration {
19
19
  /**
20
20
  * @defaultValue `DEFAULT_APP_SIZE_QUERIES`
21
21
  * @see {@link DEFAULT_APP_SIZE_QUERIES}
22
+ * @deprecated Update the `MEDIA_QUERY_CONFIG` instead
22
23
  */
23
24
  appSizeQueries?: Readonly<AppSizeQueries>;
24
25
  /** @see {@link PortalContainerProvider} */
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n type AppSize,\n type AppSizeQueries,\n DEFAULT_APP_SIZE,\n DEFAULT_APP_SIZE_QUERIES,\n} from \"./media-queries/appSize.js\";\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport {\n type PortalContainer,\n PortalContainerProvider,\n} from \"./portal/PortalContainerProvider.js\";\nimport { type Snackbar } from \"./snackbar/Snackbar.js\";\nimport { type LocalStorageColorSchemeProvider } from \"./theme/LocalStorageColorSchemeProvider.js\";\nimport { type ThemeProvider } from \"./theme/ThemeProvider.js\";\nimport { type useColorSchemeProvider } from \"./theme/useColorSchemeProvider.js\";\nimport { type TooltipHoverModeProvider } from \"./tooltip/TooltipHoverModeProvider.js\";\nimport { type WritingDirectionProvider } from \"./typography/WritingDirectionProvider.js\";\n\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/** @since 6.0.0 */\nexport interface ReactMDCoreConfiguration {\n /**\n * Set this to `true` if you are using SSR. This will update some hook\n * behavior so that you will not have mismatched initial state between server\n * and client and correctly rehydrate after initial render.\n *\n * @defaultValue `false`\n */\n ssr?: boolean;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE`\n * @see {@link DEFAULT_APP_SIZE}\n */\n ssrAppSize?: Readonly<AppSize>;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE_QUERIES`\n * @see {@link DEFAULT_APP_SIZE_QUERIES}\n */\n appSizeQueries?: Readonly<AppSizeQueries>;\n\n /** @see {@link PortalContainerProvider} */\n portalContainer?: PortalContainer;\n}\n\n/** @since 6.0.0 */\nexport interface CoreProvidersProps extends ReactMDCoreConfiguration {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a convenience wrapper for initializing providers for react-md. This\n * includes configuration for:\n *\n * - {@link SsrProvider}\n * - {@link PortalContainerProvider}\n * - {@link AppSizeProvider}\n * - {@link UserInteractionModeProvider}\n *\n * This does not include every provider within `react-md` to help decrease the\n * bundle size for unused features. Here are some other providers that might be\n * useful to initialize near the root of your app:\n *\n * - {@link MenuConfigurationProvider} - If you want to render menus as sheets\n * on phones or other configuration.\n * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If\n * you want to allow the user to select a light, dark, or system theme\n * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and\n * rtl languages\n * - {@link ThemeProvider} - If you allow the user to dynamically configure the\n * `react-md` theme\n * - {@link TooltipHoverModeProvider} - If you want tooltips to appear\n * immediately for a time after another tooltip has become visible. You can\n * also configure the global visible delay.\n * - {@link Snackbar} - This isn't a provider but this is how you can display\n * alerts in your app\n *\n * @see {@link https://react-md.dev/components/core-providers | CoreProviders Demos}\n * @since 6.0.0\n */\nexport function CoreProviders(props: CoreProvidersProps): ReactElement {\n const {\n ssr = false,\n ssrAppSize = DEFAULT_APP_SIZE,\n appSizeQueries = DEFAULT_APP_SIZE_QUERIES,\n portalContainer,\n children,\n } = props;\n return (\n <SsrProvider ssr={ssr}>\n <PortalContainerProvider container={portalContainer}>\n <UserInteractionModeProvider>\n <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>\n {children}\n </AppSizeProvider>\n </UserInteractionModeProvider>\n </PortalContainerProvider>\n </SsrProvider>\n );\n}\n"],"names":["SsrProvider","UserInteractionModeProvider","AppSizeProvider","DEFAULT_APP_SIZE","DEFAULT_APP_SIZE_QUERIES","PortalContainerProvider","CoreProviders","props","ssr","ssrAppSize","appSizeQueries","portalContainer","children","container","ssrSize"],"mappings":"AAAA;;AAIA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SAGEC,gBAAgB,EAChBC,wBAAwB,QACnB,6BAA6B;AAGpC,SAEEC,uBAAuB,QAClB,sCAAsC;AA0C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,KAAK,EACXC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,wBAAwB,EACzCO,eAAe,EACfC,QAAQ,EACT,GAAGL;IACJ,qBACE,KAACP;QAAYQ,KAAKA;kBAChB,cAAA,KAACH;YAAwBQ,WAAWF;sBAClC,cAAA,KAACV;0BACC,cAAA,KAACC;oBAAiB,GAAGQ,cAAc;oBAAEI,SAASL;8BAC3CG;;;;;AAMb"}
1
+ {"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n type AppSize,\n type AppSizeQueries,\n DEFAULT_APP_SIZE,\n DEFAULT_APP_SIZE_QUERIES,\n} from \"./media-queries/appSize.js\";\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport {\n type PortalContainer,\n PortalContainerProvider,\n} from \"./portal/PortalContainerProvider.js\";\nimport { type Snackbar } from \"./snackbar/Snackbar.js\";\nimport { type LocalStorageColorSchemeProvider } from \"./theme/LocalStorageColorSchemeProvider.js\";\nimport { type ThemeProvider } from \"./theme/ThemeProvider.js\";\nimport { type useColorSchemeProvider } from \"./theme/useColorSchemeProvider.js\";\nimport { type TooltipHoverModeProvider } from \"./tooltip/TooltipHoverModeProvider.js\";\nimport { type WritingDirectionProvider } from \"./typography/WritingDirectionProvider.js\";\n\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/** @since 6.0.0 */\nexport interface ReactMDCoreConfiguration {\n /**\n * Set this to `true` if you are using SSR. This will update some hook\n * behavior so that you will not have mismatched initial state between server\n * and client and correctly rehydrate after initial render.\n *\n * @defaultValue `false`\n */\n ssr?: boolean;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE`\n * @see {@link DEFAULT_APP_SIZE}\n */\n ssrAppSize?: Readonly<AppSize>;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE_QUERIES`\n * @see {@link DEFAULT_APP_SIZE_QUERIES}\n * @deprecated Update the `MEDIA_QUERY_CONFIG` instead\n */\n appSizeQueries?: Readonly<AppSizeQueries>;\n\n /** @see {@link PortalContainerProvider} */\n portalContainer?: PortalContainer;\n}\n\n/** @since 6.0.0 */\nexport interface CoreProvidersProps extends ReactMDCoreConfiguration {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a convenience wrapper for initializing providers for react-md. This\n * includes configuration for:\n *\n * - {@link SsrProvider}\n * - {@link PortalContainerProvider}\n * - {@link AppSizeProvider}\n * - {@link UserInteractionModeProvider}\n *\n * This does not include every provider within `react-md` to help decrease the\n * bundle size for unused features. Here are some other providers that might be\n * useful to initialize near the root of your app:\n *\n * - {@link MenuConfigurationProvider} - If you want to render menus as sheets\n * on phones or other configuration.\n * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If\n * you want to allow the user to select a light, dark, or system theme\n * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and\n * rtl languages\n * - {@link ThemeProvider} - If you allow the user to dynamically configure the\n * `react-md` theme\n * - {@link TooltipHoverModeProvider} - If you want tooltips to appear\n * immediately for a time after another tooltip has become visible. You can\n * also configure the global visible delay.\n * - {@link Snackbar} - This isn't a provider but this is how you can display\n * alerts in your app\n *\n * @see {@link https://react-md.dev/components/core-providers | CoreProviders Demos}\n * @since 6.0.0\n */\nexport function CoreProviders(props: CoreProvidersProps): ReactElement {\n const {\n ssr = false,\n ssrAppSize = DEFAULT_APP_SIZE,\n appSizeQueries = DEFAULT_APP_SIZE_QUERIES,\n portalContainer,\n children,\n } = props;\n return (\n <SsrProvider ssr={ssr}>\n <PortalContainerProvider container={portalContainer}>\n <UserInteractionModeProvider>\n <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>\n {children}\n </AppSizeProvider>\n </UserInteractionModeProvider>\n </PortalContainerProvider>\n </SsrProvider>\n );\n}\n"],"names":["SsrProvider","UserInteractionModeProvider","AppSizeProvider","DEFAULT_APP_SIZE","DEFAULT_APP_SIZE_QUERIES","PortalContainerProvider","CoreProviders","props","ssr","ssrAppSize","appSizeQueries","portalContainer","children","container","ssrSize"],"mappings":"AAAA;;AAIA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SAGEC,gBAAgB,EAChBC,wBAAwB,QACnB,6BAA6B;AAGpC,SAEEC,uBAAuB,QAClB,sCAAsC;AA2C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,KAAK,EACXC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,wBAAwB,EACzCO,eAAe,EACfC,QAAQ,EACT,GAAGL;IACJ,qBACE,KAACP;QAAYQ,KAAKA;kBAChB,cAAA,KAACH;YAAwBQ,WAAWF;sBAClC,cAAA,KAACV;0BACC,cAAA,KAACC;oBAAiB,GAAGQ,cAAc;oBAAEI,SAASL;8BAC3CG;;;;;AAMb"}
package/dist/_base.scss CHANGED
@@ -37,6 +37,7 @@
37
37
  @use "window-splitter/window-splitter";
38
38
  @use "form/base" as form-base;
39
39
  @use "form/label";
40
+ @use "form/legend";
40
41
  @use "form/fieldset";
41
42
  @use "form/form-message";
42
43
  @use "form/input-toggle";
@@ -88,6 +89,7 @@ $_layer-order: (
88
89
  form-message,
89
90
  fieldset,
90
91
  label,
92
+ legend,
91
93
  text-field,
92
94
  text-area,
93
95
  select,
@@ -484,6 +486,7 @@ $_layer-order: (
484
486
  @include interaction.styles($disable-layer);
485
487
  @include label.styles($disable-layer);
486
488
  @include layout.styles($disable-layer);
489
+ @include legend.styles($disable-layer);
487
490
  @include link.styles($disable-layer);
488
491
  @include list.styles($disable-layer);
489
492
  @include menu.styles($disable-layer);
package/dist/_core.scss CHANGED
@@ -39,6 +39,7 @@
39
39
  @forward "expansion-panel/expansion-panel" as expansion-panel-*;
40
40
  @forward "form/base";
41
41
  @forward "form/label" as label-*;
42
+ @forward "form/legend" as legend-*;
42
43
  @forward "form/fieldset" as fieldset-*;
43
44
  @forward "form/form-message" as form-message-*;
44
45
  @forward "form/input-toggle" as input-toggle-*;
package/dist/_utils.scss CHANGED
@@ -89,30 +89,38 @@ $_swappable-properties: text-align;
89
89
  /// Internal validation function to ensure the user overrides variables with
90
90
  /// accepted values.
91
91
  ///
92
- /// @param {List|Map} list-or-map - The list or map to validate against
92
+ /// @since 6.4.0 Added support for strings so that single item lists can be used.
93
+ /// @param {List|Map|String} options - The list or map of available options.
94
+ /// This can also be a single item list.
93
95
  /// @param {String|Number} key-or-value - Either the map key or list value to
94
96
  /// check if exists
95
97
  /// @param {String} error-message - The additional error message to display
96
98
  /// @returns {any} the value from the list or map
97
- @function validate($list-or-map, $key-or-value, $error-message) {
98
- $type: meta.type-of($list-or-map);
99
+ @function validate($options, $key-or-value, $error-message) {
100
+ $options: if(
101
+ meta.type-of($options) == string,
102
+ list.append((), $options),
103
+ $options
104
+ );
105
+
106
+ $type: meta.type-of($options);
99
107
  $is-map: $type == map;
100
108
  $is-list: $type == list;
101
109
 
102
110
  @if $disable-validation {
103
- @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
111
+ @return if($is-list, $key-or-value, map.get($options, $key-or-value));
104
112
  }
105
113
 
106
114
  @if not $is-map and not $is-list {
107
- @error 'Unable to validate anything except for lists and maps at this time. Received: #{$list-or-map}.';
115
+ @error "Unable to validate anything except for lists and maps at this time. Received: '#{$options}'.";
108
116
  }
109
117
 
110
- $choices: if($is-map, map.keys($list-or-map), $list-or-map);
118
+ $choices: if($is-map, map.keys($options), $options);
111
119
  @if not list.index($choices, $key-or-value) {
112
120
  @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
113
121
  }
114
122
 
115
- @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
123
+ @return if($is-list, $key-or-value, map.get($options, $key-or-value));
116
124
  }
117
125
 
118
126
  /// Used to get a custom property variable name.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import {\n type ElementType,\n type HTMLAttributes,\n type Ref,\n forwardRef,\n} from \"react\";\n\nimport { type AppBarClassNameOptions, appBar } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n HTMLAttributes<HTMLDivElement> & {\n ref?: Ref<HTMLDivElement>;\n className: string;\n }\n>;\n\n/**\n * @since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * @since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * @since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * @since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n extends HTMLAttributes<HTMLDivElement>,\n AppBarClassNameOptions {\n /** @defaultValue `fixed ? \"header\" : \"div\"` */\n as?: CustomAppBarComponent;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n * <AppBarTitle>My Main Title</AppBarTitle>\n * <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n function AppBar(props, ref) {\n const {\n className,\n theme,\n stacked,\n height,\n align,\n grid,\n gridName,\n justify,\n reversed,\n gridColumns,\n disableWrap,\n disablePadding,\n position,\n pagePosition,\n surfaceColor,\n scrollbarOffset,\n disableElevation,\n as: Component = position ? \"header\" : \"div\",\n children,\n ...remaining\n } = props;\n\n return (\n <Component\n {...remaining}\n className={appBar({\n className,\n theme,\n position,\n pagePosition,\n disableElevation,\n scrollbarOffset,\n height,\n grid,\n gridName,\n gridColumns,\n align,\n stacked,\n justify,\n reversed,\n surfaceColor,\n disableWrap,\n disablePadding,\n })}\n ref={ref}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["forwardRef","appBar","AppBar","props","ref","className","theme","stacked","height","align","grid","gridName","justify","reversed","gridColumns","disableWrap","disablePadding","position","pagePosition","surfaceColor","scrollbarOffset","disableElevation","as","Component","children","remaining"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAsCC,MAAM,QAAQ,cAAc;AA4BlE;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBC,IAAIC,YAAYN,WAAW,WAAW,KAAK,EAC3CO,QAAQ,EACR,GAAGC,WACJ,GAAGtB;IAEJ,qBACE,KAACoB;QACE,GAAGE,SAAS;QACbpB,WAAWJ,OAAO;YAChBI;YACAC;YACAW;YACAC;YACAG;YACAD;YACAZ;YACAE;YACAC;YACAG;YACAL;YACAF;YACAK;YACAC;YACAM;YACAJ;YACAC;QACF;QACAZ,KAAKA;kBAEJoB;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import {\n type ElementType,\n type HTMLAttributes,\n type Ref,\n forwardRef,\n} from \"react\";\n\nimport { type AppBarClassNameOptions, appBar } from \"./styles.js\";\n\n/** @since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n HTMLAttributes<HTMLDivElement> & {\n ref?: Ref<HTMLDivElement>;\n className: string;\n }\n>;\n\n/**\n * @since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * @since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * @since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * @since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {\n /** @defaultValue `fixed ? \"header\" : \"div\"` */\n as?: CustomAppBarComponent;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n * <AppBarTitle>My Main Title</AppBarTitle>\n * <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n function AppBar(props, ref) {\n const {\n className,\n theme,\n stacked,\n height,\n align,\n grid,\n gridName,\n justify,\n reversed,\n gridColumns,\n disableWrap,\n disablePadding,\n position,\n pagePosition,\n surfaceColor,\n scrollbarOffset,\n disableElevation,\n as: Component = position ? \"header\" : \"div\",\n children,\n ...remaining\n } = props;\n\n return (\n <Component\n {...remaining}\n className={appBar({\n className,\n theme,\n position,\n pagePosition,\n disableElevation,\n scrollbarOffset,\n height,\n grid,\n gridName,\n gridColumns,\n align,\n stacked,\n justify,\n reversed,\n surfaceColor,\n disableWrap,\n disablePadding,\n })}\n ref={ref}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["forwardRef","appBar","AppBar","props","ref","className","theme","stacked","height","align","grid","gridName","justify","reversed","gridColumns","disableWrap","disablePadding","position","pagePosition","surfaceColor","scrollbarOffset","disableElevation","as","Component","children","remaining"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAAsCC,MAAM,QAAQ,cAAc;AA2BlE;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,uBAASF,WACpB,SAASE,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,gBAAgB,EAChBC,IAAIC,YAAYN,WAAW,WAAW,KAAK,EAC3CO,QAAQ,EACR,GAAGC,WACJ,GAAGtB;IAEJ,qBACE,KAACoB;QACE,GAAGE,SAAS;QACbpB,WAAWJ,OAAO;YAChBI;YACAC;YACAW;YACAC;YACAG;YACAD;YACAZ;YACAE;YACAC;YACAG;YACAL;YACAF;YACAK;YACAC;YACAM;YACAJ;YACAC;QACF;QACAZ,KAAKA;kBAEJoB;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { type AppBarTitleClassNameOptions, appBarTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n extends TypographyProps,\n AppBarTitleClassNameOptions {\n /** @defaultValue `\"headline-6\"` */\n type?: TypographyType;\n\n /**\n * @defaultValue `\"ellipsis\"`\n */\n textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <AppBarTitle keyline=\"nav\">\n * Offset as if there was a nav button to the left\n * </AppBarTitle>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n function AppBarTitle(props, ref) {\n const {\n type = \"headline-6\",\n keyline = \"small\",\n children,\n className,\n textOverflow = \"ellipsis\",\n ...remaining\n } = props;\n return (\n <Typography\n {...remaining}\n ref={ref}\n type={type}\n className={appBarTitle({\n keyline,\n className,\n })}\n textOverflow={textOverflow}\n >\n {children}\n </Typography>\n );\n }\n);\n"],"names":["forwardRef","Typography","appBarTitle","AppBarTitle","props","ref","type","keyline","children","className","textOverflow","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAGnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAA2CC,WAAW,QAAQ,cAAc;AAqB5E;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBC,UAAU,OAAO,EACjBC,QAAQ,EACRC,SAAS,EACTC,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGP;IACJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLC,MAAMA;QACNG,WAAWP,YAAY;YACrBK;YACAE;QACF;QACAC,cAAcA;kBAEbF;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { type AppBarTitleClassNameOptions, appBarTitle } from \"./styles.js\";\n\n/**\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport interface AppBarTitleProps\n extends TypographyProps, AppBarTitleClassNameOptions {\n /** @defaultValue `\"headline-6\"` */\n type?: TypographyType;\n\n /**\n * @defaultValue `\"ellipsis\"`\n */\n textOverflow?: TextOverflow;\n}\n\n/**\n * @example Updating the Keyline\n * ```tsx\n * import { AppBar } from \"@react-md/core/app-bar/AppBar\";\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <AppBarTitle keyline=\"nav\">\n * Offset as if there was a nav button to the left\n * </AppBarTitle>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @since 6.0.0 The `keyline` prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n * @since 6.0.0 The `noWrap` prop was removed in favor of the `textOverflow`\n * prop inherited through the base `Typography` component. The `textOverflow`\n * will default to `\"ellipsis\"` which is new as well.\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n function AppBarTitle(props, ref) {\n const {\n type = \"headline-6\",\n keyline = \"small\",\n children,\n className,\n textOverflow = \"ellipsis\",\n ...remaining\n } = props;\n return (\n <Typography\n {...remaining}\n ref={ref}\n type={type}\n className={appBarTitle({\n keyline,\n className,\n })}\n textOverflow={textOverflow}\n >\n {children}\n </Typography>\n );\n }\n);\n"],"names":["forwardRef","Typography","appBarTitle","AppBarTitle","props","ref","type","keyline","children","className","textOverflow","remaining"],"mappings":";AAAA,SAASA,UAAU,QAAQ,QAAQ;AAGnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAA2CC,WAAW,QAAQ,cAAc;AAoB5E;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,MAAMC,4BAAcH,WACzB,SAASG,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBC,UAAU,OAAO,EACjBC,QAAQ,EACRC,SAAS,EACTC,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGP;IACJ,qBACE,KAACH;QACE,GAAGU,SAAS;QACbN,KAAKA;QACLC,MAAMA;QACNG,WAAWP,YAAY;YACrBK;YACAE;QACF;QACAC,cAAcA;kBAEbF;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useListboxContext } from \"../form/ListboxProvider.js\";\nimport { Option } from \"../form/Option.js\";\nimport {\n type AutocompleteGetOptionLabel,\n type AutocompleteGetOptionProps,\n type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface AutocompleteListboxChildrenProps<\n Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionProps<Option>>,\n Required<AutocompleteGetOptionLabel<Option>> {\n query: string;\n options: readonly Option[];\n children: ReactNode;\n noOptionsChildren: ReactNode;\n}\n\n/**\n * NOTE: This was moved to a second component to improve performance so\n * that the availableOptions aren't looped until the listbox is visible\n *\n * @since 6.0.0\n * @internal\n */\nexport function AutocompleteListboxChildren<Option extends AutocompleteOption>(\n props: AutocompleteListboxChildrenProps<Option>\n): ReactElement {\n const {\n children,\n query,\n options: availableOptions,\n noOptionsChildren,\n getOptionLabel,\n getOptionProps,\n } = props;\n const { isOptionSelected } = useListboxContext();\n\n return (\n <>\n {children}\n {!availableOptions.length && noOptionsChildren}\n {availableOptions.map((option, index) => {\n const label = getOptionLabel(option);\n const optionProps = getOptionProps({\n index,\n query,\n option,\n selected: isOptionSelected(option),\n extractor: getOptionLabel,\n });\n\n return (\n <Option key={label} value={option} {...optionProps}>\n {optionProps?.children ?? label}\n </Option>\n );\n })}\n </>\n );\n}\n"],"names":["useListboxContext","Option","AutocompleteListboxChildren","props","children","query","options","availableOptions","noOptionsChildren","getOptionLabel","getOptionProps","isOptionSelected","length","map","option","index","label","optionProps","selected","extractor","value"],"mappings":"AAAA;;AAIA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAqB3C;;;;;;CAMC,GACD,OAAO,SAASC,4BACdC,KAA+C;IAE/C,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACf,GAAGP;IACJ,MAAM,EAAEQ,gBAAgB,EAAE,GAAGX;IAE7B,qBACE;;YACGI;YACA,CAACG,iBAAiBK,MAAM,IAAIJ;YAC5BD,iBAAiBM,GAAG,CAAC,CAACC,QAAQC;gBAC7B,MAAMC,QAAQP,eAAeK;gBAC7B,MAAMG,cAAcP,eAAe;oBACjCK;oBACAV;oBACAS;oBACAI,UAAUP,iBAAiBG;oBAC3BK,WAAWV;gBACb;gBAEA,qBACE,KAACR;oBAAmBmB,OAAON;oBAAS,GAAGG,WAAW;8BAC/CA,aAAab,YAAYY;mBADfA;YAIjB;;;AAGN"}
1
+ {"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useListboxContext } from \"../form/ListboxProvider.js\";\nimport { Option } from \"../form/Option.js\";\nimport {\n type AutocompleteGetOptionLabel,\n type AutocompleteGetOptionProps,\n type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface AutocompleteListboxChildrenProps<\n Option extends AutocompleteOption,\n>\n extends\n Required<AutocompleteGetOptionProps<Option>>,\n Required<AutocompleteGetOptionLabel<Option>> {\n query: string;\n options: readonly Option[];\n children: ReactNode;\n noOptionsChildren: ReactNode;\n}\n\n/**\n * NOTE: This was moved to a second component to improve performance so\n * that the availableOptions aren't looped until the listbox is visible\n *\n * @since 6.0.0\n * @internal\n */\nexport function AutocompleteListboxChildren<Option extends AutocompleteOption>(\n props: AutocompleteListboxChildrenProps<Option>\n): ReactElement {\n const {\n children,\n query,\n options: availableOptions,\n noOptionsChildren,\n getOptionLabel,\n getOptionProps,\n } = props;\n const { isOptionSelected } = useListboxContext();\n\n return (\n <>\n {children}\n {!availableOptions.length && noOptionsChildren}\n {availableOptions.map((option, index) => {\n const label = getOptionLabel(option);\n const optionProps = getOptionProps({\n index,\n query,\n option,\n selected: isOptionSelected(option),\n extractor: getOptionLabel,\n });\n\n return (\n <Option key={label} value={option} {...optionProps}>\n {optionProps?.children ?? label}\n </Option>\n );\n })}\n </>\n );\n}\n"],"names":["useListboxContext","Option","AutocompleteListboxChildren","props","children","query","options","availableOptions","noOptionsChildren","getOptionLabel","getOptionProps","isOptionSelected","length","map","option","index","label","optionProps","selected","extractor","value"],"mappings":"AAAA;;AAIA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAuB3C;;;;;;CAMC,GACD,OAAO,SAASC,4BACdC,KAA+C;IAE/C,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACf,GAAGP;IACJ,MAAM,EAAEQ,gBAAgB,EAAE,GAAGX;IAE7B,qBACE;;YACGI;YACA,CAACG,iBAAiBK,MAAM,IAAIJ;YAC5BD,iBAAiBM,GAAG,CAAC,CAACC,QAAQC;gBAC7B,MAAMC,QAAQP,eAAeK;gBAC7B,MAAMG,cAAcP,eAAe;oBACjCK;oBACAV;oBACAS;oBACAI,UAAUP,iBAAiBG;oBAC3BK,WAAWV;gBACb;gBAEA,qBACE,KAACR;oBAAmBmB,OAAON;oBAAS,GAAGG,WAAW;8BAC/CA,aAAab,YAAYY;mBADfA;YAIjB;;;AAGN"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n type AriaAttributes,\n type ChangeEventHandler,\n type Dispatch,\n type FocusEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n type OptionProps,\n type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n type ComboboxMenuProps,\n type ComboboxVisibilityOptions,\n type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n type EditableComboboxImplementation,\n type EditableComboboxOptions,\n type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n type AutomaticTextExtraction,\n type PropsWithRef,\n type TextExtractor,\n type UseStateInitializer,\n} from \"../types.js\";\n\n// NOTE: The augmentation appears in this file since both\n// the `Autocomplete` and `autocompleteStyles` import this\n// file. The augmentation only works if a type definition\n// exists in the compiled `*.d.ts`\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-autocomplete-clear-button-size\"?: string;\n \"--rmd-autocomplete-dropdown-button-size\"?: string;\n \"--rmd-autocomplete-circular-progress-size\"?: string;\n \"--rmd-autocomplete-inline-gap\"?: string;\n \"--rmd-autocomplete-inline-min-width\"?: string;\n \"--rmd-autocomplete-addon-gap\"?: string;\n \"--rmd-autocomplete-gap-count\"?: string;\n \"--rmd-autocomplete-addon-spacing\"?: string;\n }\n}\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.\n */\nexport type AutocompleteLabeledOption = AutomaticTextExtraction;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteOption = AutomaticTextExtraction | object;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n Required<BaseSearchOptions<Option>>,\n \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n Option extends AutocompleteOption,\n> {\n index: number;\n query: string;\n option: Option;\n selected: boolean;\n extractor: TextExtractor<Option>;\n}\n\n/**\n * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n Option extends AutocompleteOption,\n> = (\n options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\n /**\n * This can be used to add additional props to each option.\n *\n * @example Simple Example\n * ```tsx\n * getOptionProps={({ option }) => {\n * return {\n * disabled: option === \"\",\n * className: cnb(option === \"a\" && styles.blue),\n * leftAddon: option === value && <CheckIcon />,\n * };\n * }}\n * ```\n *\n * @see {@link AutocompleteGetOptionPropsOptions}\n * @see {@link AutocompleteGetOptionPropsCallback}\n * @since 6.0.0\n */\n getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\n /**\n * If the list of options contain an object that doesn't have a\n * `label: string`, this prop must be provided to extract a string to display\n * in the text field once selected.\n *\n * @example No Getter Required\n * ```tsx\n * const options1 = ['a', 'b', 'c', 'd'];\n * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n *\n * <Autocomplete options={options1} />\n * <Autocomplete options={options2} />\n * ```\n *\n * @example Getter Required\n * ```tsx\n * const options = [\n * {\n * name: \"Alaska\",\n * abbr: \"AK\",\n * },\n * {\n * name: \"Arizona\",\n * abbr: \"AZ\",\n * }\n * ];\n *\n * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n * ```\n *\n * @defaultValue `defaultAutocompleteExtractor`\n * @since 6.0.0\n */\n getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n value: T;\n setValue: Dispatch<T>;\n defaultValue?: never;\n onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n value?: never;\n setValue?: never;\n defaultValue?: UseStateInitializer<T>;\n\n /**\n * This prop should be used when some action should occur whenever the value\n * changes, but is not required to be stored in state. For all other cases, it\n * is recommended to control the `value` instead of using this prop.\n *\n * @defaultValue `() => {}`\n */\n onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n | AutocompleteControlledValue<T>\n | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n query: string;\n setQuery: Dispatch<string>;\n defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n query?: never;\n setQuery?: never;\n defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n | AutocompleteControlledQuery\n | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"selected\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n Option extends AutocompleteOption,\n> {\n query?: string;\n setQuery?: Dispatch<string>;\n defaultQuery?: UseStateInitializer<string>;\n value?: Option | null | readonly Option[];\n setValue?: Dispatch<Option | null | readonly Option[]>;\n defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutomaticTextExtraction}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n Option extends AutocompleteOption,\n> = Option extends AutomaticTextExtraction\n ? AutocompleteGetOptionLabel<Option>\n : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<Option extends AutocompleteOption>\n extends AutocompleteGetOptionLabel<Option> {\n /**\n * The list of options that can be shown within the autocomplete and filtered\n * based on the current query.\n */\n options: readonly Option[];\n\n /**\n * The function that filters the {@link options} based on the current query\n * and defaults to a case insensitive search that starts with the query.\n *\n * @example Case Insensitive Anywhere\n * ```tsx\n * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n *\n * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n * ```\n *\n * @example Fuzzy Filtering\n * ```tsx\n * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n *\n * <Autocomplete {...props} filter={fuzzySearch} />\n * ```\n *\n * @example Async Searching\n * ```tsx\n * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n * import { useState } from \"react\";\n *\n * interface State {\n * loading: boolean;\n * options: readonly string[];\n * }\n *\n * function Example() {\n * const [state, setState] = useState<State>({\n * loading: false,\n * options: [],\n * });\n *\n * const search = useDebouncedFunction(async (query: string) => {\n * setState(prev => ({ ...prev, loading: true }));\n *\n * const options = await someAsyncTask(query);\n * setState({ loading: false, options })\n * });\n *\n * return (\n * <Autocomplete\n * {...props}\n * // Setting `type=\"search\"` automatically updates the `filter` prop to\n * // be `noopAutocompleteFilter`\n * type=\"search\"\n * options={options}\n * onChange={(event) => search(event.currentTarget.value)}\n * />\n * );\n * }\n * ```\n *\n * @defaultValue `defaultAutocompleteFilter`\n */\n filter?: AutocompleteFilterFunction<Option>;\n\n /**\n * Set this to `true` to update the filtering behavior to also remove the\n * selected value from the available options. This is mostly for the\n * multiselect behavior.\n *\n * @defaultValue `false`\n */\n filterSelected?: boolean;\n\n /**\n * Set this to `true` to allow any value to be typed into the autocomplete\n * instead of enforcing an empty string or one of the option labels.\n *\n * @defaultValue `filter === noopAutocompleteFilter`\n */\n allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n Option extends AutocompleteOption,\n> extends AutocompleteFilteringOptions<Option>,\n AutocompleteGetOptionProps<Option>,\n OptionSelectedIconProps {\n /**\n * Set this to `true` when using a multiselect autocomplete to update each\n * option to use checkboxes to show the selection state.\n *\n * @defaultValue `false`\n */\n checkboxes?: boolean;\n\n /**\n * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n * @defaultValue `!checkboxes`\n */\n disableSelectedIcon?: boolean;\n\n /**\n * @see {@link AutocompleteUpdateQueryOnSelect}\n * @defaultValue `multiselect ? \"clear\" : \"selected\"`\n */\n updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n /**\n * Set this to `true` to prevent the listbox from closing when an option is\n * selected.\n *\n * @defaultValue `checkboxes`\n */\n disableCloseOnSelect?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxOptions<ComboboxEl, PopupEl>,\n AutocompleteFilterAndListboxOptions<Option> {\n onBlur?: FocusEventHandler<ComboboxEl>;\n onChange?: ChangeEventHandler<ComboboxEl>;\n\n /**\n * This is a convenience prop for the `onEntering`/`onEntered` transition\n * callbacks that will ensure it is only called once even if the transitions\n * are disabled. A great use-case for this function is to fetch data once the\n * menu is opened.\n */\n onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n AutocompleteOptionLabelExtractor<Option> &\n AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n value: string;\n onBlur: FocusEventHandler<ComboboxEl>;\n onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n T extends AutocompleteOption = AutocompleteOption,\n PopupEl extends HTMLElement = HTMLElement,\n> extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">,\n OptionSelectedIconProps {\n value: T | null | readonly T[];\n setValue: Dispatch<T>;\n onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n extends ConfigurableComboboxMenuProps,\n OptionSelectedIconProps {\n id?: string;\n}\n\n/**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n * - the input has a value and:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n /** @defaultValue `\"Clear\"` */\n \"aria-label\"?: string;\n\n /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n id?: string;\n\n /** {@inheritDoc ClearButtonVisibility} */\n visibility?: ClearButtonVisibility;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps\n extends ConfigurableAutocompleteClearButtonProps {\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps\n extends ButtonProps {\n /** @defaultValue `AutocompleteProps.listboxLabel` */\n \"aria-label\"?: string;\n /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n \"aria-labelledby\"?: string;\n\n /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n id?: string;\n\n /** @defaultValue `getIcon(\"dropdown\")` */\n icon?: ReactNode;\n iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps\n extends ConfigurableAutocompleteDropdownButtonProps {\n \"aria-controls\": string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps\n extends CircularProgressProps {\n /** @defaultValue `\"Loading\"` */\n \"aria-label\"?: string;\n\n /** @defaultValue `\"current-color\"` */\n theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n /**\n * @defaultValue `typeof children === \"string\" ? \\`Remove \"${children}\"\\` : undefined`\n */\n \"aria-description\"?: string;\n\n /** @defaultValue `getIcon(\"remove\")` */\n removeIcon?: ReactNode;\n children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends EditableComboboxImplementation<ComboboxEl, PopupEl>,\n Required<AutocompleteGetOptionProps<Option>>,\n Required<AutocompleteGetOptionLabel<Option>> {\n query: string;\n setQuery: Dispatch<string>;\n comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n /**\n * This is a convenience prop to determine if the autocomplete supports\n * multiselect.\n */\n multiselect: boolean;\n\n /**\n * This is the current list of options that will be filtered based on the\n * current `query`. This should normally be rendered in the\n * `AutocompleteListboxChildren` component\n */\n availableOptions: readonly Option[];\n\n /**\n * Generates the props required for the `Listbox` component and should\n * normally be provided any menu props that might override the default display\n * settings.\n */\n getListboxProps: (\n overrides?: ConfigurableAutocompleteListboxProps\n ) => AutocompleteListboxProps<Option, PopupEl>;\n\n /**\n * Generates the props required for the `AutocompleteClearButton`.\n */\n getClearButtonProps: (\n overrides?: ConfigurableAutocompleteClearButtonProps\n ) => AutocompleteClearButtonProps;\n\n /**\n * Generates the props required for the `AutocompleteDropdownButton`.\n */\n getDropdownButtonProps: (\n overrides?: ConfigurableAutocompleteDropdownButtonProps\n ) => AutocompleteDropdownButtonProps;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n value: Option | null;\n setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n value: readonly Option[];\n setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n value: Option | null | readonly Option[];\n setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n extends Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n AutocompleteFilterAndListboxOptions<Option>,\n ComboboxVisibilityOptions {\n inputRef?: Ref<HTMLInputElement>;\n\n /**\n * An `aria-label` to pass to the `Listbox` component that describes the list\n * of {@link options}. Either this or the {@link listboxLabelledBy} are\n * required for accessibility.\n */\n listboxLabel?: string;\n\n /**\n * An `aria-labelledby` to pass to the `Listbox` component that describes the\n * list of {@link options}. Either this or the {@link listboxLabel} are\n * required for accessibility.\n */\n listboxLabelledBy?: string;\n\n /**\n * Any additional props that should be passed to the `Listbox` component.\n */\n listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;\n\n /**\n * This can be used to add any custom styling, change the icon, change the\n * label, etc for the dropdown button.\n *\n * @example Simple Example\n * ```tsx\n * dropdownButtonProps={{\n * \"aria-label\": \"Open\",\n * className: styles.dropdownButton,\n * icon: <MyCustomDropdownIcon />,\n * }}\n * ```\n */\n dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n /**\n * Set this to `true` to remove the {@link DropdownButton} from being rendered\n * after the input element.\n *\n * @defaultValue `false`\n */\n disableDropdownButton?: boolean;\n\n /**\n * Set this to `true` to disable a `<CircularProgress />` after the input and\n * before the `<DropdownButton />`.\n *\n * @defaultValue `false`\n */\n loading?: boolean;\n\n /**\n * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n */\n loadingProps?: AutocompleteCircularProgressProps;\n\n /**\n * This will do nothing if {@link disableClearButton} is `true`.\n */\n clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;\n\n /**\n * Set to `true` to hide the clear button that appears when hovering an\n * `Autocomplete` that has a value. The user will still be able to clear the\n * value quickly using the `Escape` key.\n *\n * @defaultValue `false`\n */\n disableClearButton?: boolean;\n\n /**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n * - the input has a value and:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n *\n * @defaultValue `\"query\"`\n */\n clearButtonVisibility?: ClearButtonVisibility;\n\n /**\n * This is a convenience prop for the `onEntering`/`onEntered` transition\n * callbacks that will ensure it is only called once even if the transitions\n * are disabled. A great use-case for this function is to fetch data once the\n * menu is opened.\n */\n onOpen?: () => void;\n\n /**\n * The children to display when there are no {@link options} due to the\n * current text box value.\n *\n * @defaultValue `<ListSubheader>No options</ListSubheader`\n */\n noOptionsChildren?: ReactNode;\n\n /**\n * Set this to `true` when using a multiselect autocomplete to prevent the\n * selected values from being rendered inline with the input. This is useful\n * when the selected values should be shown in a different part of the UI\n * instead.\n *\n * @defaultValue `false`\n */\n disableInlineChips?: boolean;\n\n /**\n * This can be used to add additional props to each inline chip for multiselect\n * autocompletes.\n *\n * @example Simple Example\n * ```tsx\n * getChipProps={({ option, index }) => {\n * return {\n * disabled: index < 3,\n * className: cnb(option === \"a\" && styles.blue)<\n * };\n * }}\n * ```\n */\n getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n | { listboxLabel: string }\n | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n AutocompleteOptionLabelExtractor<Option> &\n AutocompleteQuery &\n AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n AutocompleteQueryAndExtractorProps<Option> &\n AutocompleteValue<Option | null> & {\n checkboxes?: never;\n getChipProps?: never;\n disableInlineChips?: never;\n };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n AutocompleteQueryAndExtractorProps<Option> &\n AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n AutocompleteBaseProps<Option> &\n AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AAo2BA;;CAEC,GACD,WAEoD"}
1
+ {"version":3,"sources":["../../src/autocomplete/types.ts"],"sourcesContent":["import {\n type AriaAttributes,\n type ChangeEventHandler,\n type Dispatch,\n type FocusEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type ChipProps } from \"../chip/Chip.js\";\nimport {\n type OptionProps,\n type OptionSelectedIconProps,\n} from \"../form/Option.js\";\nimport { type TextFieldProps } from \"../form/TextField.js\";\nimport {\n type ComboboxMenuProps,\n type ComboboxVisibilityOptions,\n type ConfigurableComboboxMenuProps,\n} from \"../form/useCombobox.js\";\nimport {\n type EditableComboboxImplementation,\n type EditableComboboxOptions,\n type EditableComboboxWidgetProps,\n} from \"../form/useEditableCombobox.js\";\nimport { type EditableHTMLElement } from \"../form/utils.js\";\nimport { type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { type CircularProgressProps } from \"../progress/CircularProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type BaseSearchOptions } from \"../searching/types.js\";\nimport {\n type AutomaticTextExtraction,\n type PropsWithRef,\n type TextExtractor,\n type UseStateInitializer,\n} from \"../types.js\";\n\n// NOTE: The augmentation appears in this file since both\n// the `Autocomplete` and `autocompleteStyles` import this\n// file. The augmentation only works if a type definition\n// exists in the compiled `*.d.ts`\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-autocomplete-clear-button-size\"?: string;\n \"--rmd-autocomplete-dropdown-button-size\"?: string;\n \"--rmd-autocomplete-circular-progress-size\"?: string;\n \"--rmd-autocomplete-inline-gap\"?: string;\n \"--rmd-autocomplete-inline-min-width\"?: string;\n \"--rmd-autocomplete-addon-gap\"?: string;\n \"--rmd-autocomplete-gap-count\"?: string;\n \"--rmd-autocomplete-addon-spacing\"?: string;\n }\n}\n\n/**\n * If a autocomplete value is one of these types, no additional code is required\n * to display a label in the input/chip for the autocomplete once the value has\n * been selected.\n *\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.0.0\n * @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.\n */\nexport type AutocompleteLabeledOption = AutomaticTextExtraction;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteOption = AutomaticTextExtraction | object;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterOptions<Option extends AutocompleteOption> = Pick<\n Required<BaseSearchOptions<Option>>,\n \"list\" | \"query\" | \"extractor\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteFilterFunction<Option extends AutocompleteOption> = (\n options: AutocompleteFilterOptions<Option>\n) => readonly Option[];\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionPropsOptions<\n Option extends AutocompleteOption,\n> {\n index: number;\n query: string;\n option: Option;\n selected: boolean;\n extractor: TextExtractor<Option>;\n}\n\n/**\n * @see {@link AutocompleteGetOptionProps.getOptionProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionPropsCallback<\n Option extends AutocompleteOption,\n> = (\n options: AutocompleteGetOptionPropsOptions<Option>\n) => ConfigurableAutocompleteOptionProps | undefined;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionProps<Option extends AutocompleteOption> {\n /**\n * This can be used to add additional props to each option.\n *\n * @example Simple Example\n * ```tsx\n * getOptionProps={({ option }) => {\n * return {\n * disabled: option === \"\",\n * className: cnb(option === \"a\" && styles.blue),\n * leftAddon: option === value && <CheckIcon />,\n * };\n * }}\n * ```\n *\n * @see {@link AutocompleteGetOptionPropsOptions}\n * @see {@link AutocompleteGetOptionPropsCallback}\n * @since 6.0.0\n */\n getOptionProps?: AutocompleteGetOptionPropsCallback<Option>;\n}\n\n/**\n * @see {@link AutocompleteBaseProps.getChipProps}\n * @since 6.0.0\n */\nexport type AutocompleteGetChipProps<Option extends AutocompleteOption> = (\n options: Omit<AutocompleteGetOptionPropsOptions<Option>, \"selected\">\n) => Partial<AutocompleteChipProps> | undefined;\n\n/**\n * @see {@link AutocompleteGetOptionLabel}\n * @since 6.0.0\n */\nexport type AutocompleteGetOptionLabelCallback<\n Option extends AutocompleteOption,\n> = (option: Option) => string;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteGetOptionLabel<Option extends AutocompleteOption> {\n /**\n * If the list of options contain an object that doesn't have a\n * `label: string`, this prop must be provided to extract a string to display\n * in the text field once selected.\n *\n * @example No Getter Required\n * ```tsx\n * const options1 = ['a', 'b', 'c', 'd'];\n * const options2 = [{ label: 'a' }, { label: 'b' }, { label: 'c' }, { label: 'd' }];\n *\n * <Autocomplete options={options1} />\n * <Autocomplete options={options2} />\n * ```\n *\n * @example Getter Required\n * ```tsx\n * const options = [\n * {\n * name: \"Alaska\",\n * abbr: \"AK\",\n * },\n * {\n * name: \"Arizona\",\n * abbr: \"AZ\",\n * }\n * ];\n *\n * <Autocomplete options={options} getOptionLabel={(state) => state.name} />\n * ```\n *\n * @defaultValue `defaultAutocompleteExtractor`\n * @since 6.0.0\n */\n getOptionLabel?: AutocompleteGetOptionLabelCallback<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type ConfigurableAutocompleteOptionProps = Partial<\n Omit<OptionProps, \"role\" | \"value\">\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledValue<T> {\n value: T;\n setValue: Dispatch<T>;\n defaultValue?: never;\n onValueChange?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledValue<T> {\n value?: never;\n setValue?: never;\n defaultValue?: UseStateInitializer<T>;\n\n /**\n * This prop should be used when some action should occur whenever the value\n * changes, but is not required to be stored in state. For all other cases, it\n * is recommended to control the `value` instead of using this prop.\n *\n * @defaultValue `() => {}`\n */\n onValueChange?: (value: T) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteValue<T> =\n | AutocompleteControlledValue<T>\n | AutocompleteUncontrolledValue<T>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteControlledQuery {\n query: string;\n setQuery: Dispatch<string>;\n defaultQuery?: never;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUncontrolledQuery {\n query?: never;\n setQuery?: never;\n defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQuery =\n | AutocompleteControlledQuery\n | AutocompleteUncontrolledQuery;\n\n/**\n * This allows the `query` to be updated whenever a new value has been selected.\n *\n * - `\"clear\"` - clears the `query`\n * - `\"selected\"` - sets the \tquery\t to the selected value's label\n * - `\"as-is\"` - doesn't change the `query`\n *\n * @defaultValue `(multiselect || Array.isArray(value ?? defaultValue)) ? \"clear\" : \"selected\"`\n * @since 6.0.0\n */\nexport type AutocompleteUpdateQueryOnSelect = \"clear\" | \"selected\" | \"as-is\";\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteUnknownQueryAndValueOptions<\n Option extends AutocompleteOption,\n> {\n query?: string;\n setQuery?: Dispatch<string>;\n defaultQuery?: UseStateInitializer<string>;\n value?: Option | null | readonly Option[];\n setValue?: Dispatch<Option | null | readonly Option[]>;\n defaultValue?: UseStateInitializer<Option | null | readonly Option[]>;\n onValueChange?: (value: Option | null | readonly Option[]) => void;\n}\n\n/**\n * A utility type that makes the `getOptionLabel` required when an option is not\n * a {@link AutomaticTextExtraction}.\n *\n * @since 6.0.0\n */\nexport type AutocompleteOptionLabelExtractor<\n Option extends AutocompleteOption,\n> = Option extends AutomaticTextExtraction\n ? AutocompleteGetOptionLabel<Option>\n : Required<AutocompleteGetOptionLabel<Option>>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilteringOptions<\n Option extends AutocompleteOption,\n> extends AutocompleteGetOptionLabel<Option> {\n /**\n * The list of options that can be shown within the autocomplete and filtered\n * based on the current query.\n */\n options: readonly Option[];\n\n /**\n * The function that filters the {@link options} based on the current query\n * and defaults to a case insensitive search that starts with the query.\n *\n * @example Case Insensitive Anywhere\n * ```tsx\n * import { caseInsensitiveSearch } from \"@react-md/core/searching/caseInsensitive\";\n *\n * <Autocomplete {...props} filter={caseInsensitiveSearch} />\n * ```\n *\n * @example Fuzzy Filtering\n * ```tsx\n * import { fuzzySearch } from \"@react-md/core/searching/fuzzy\";\n *\n * <Autocomplete {...props} filter={fuzzySearch} />\n * ```\n *\n * @example Async Searching\n * ```tsx\n * import { useDebouncedFunction } from \"@react-md/core/useDebouncedFunction\";\n * import { useState } from \"react\";\n *\n * interface State {\n * loading: boolean;\n * options: readonly string[];\n * }\n *\n * function Example() {\n * const [state, setState] = useState<State>({\n * loading: false,\n * options: [],\n * });\n *\n * const search = useDebouncedFunction(async (query: string) => {\n * setState(prev => ({ ...prev, loading: true }));\n *\n * const options = await someAsyncTask(query);\n * setState({ loading: false, options })\n * });\n *\n * return (\n * <Autocomplete\n * {...props}\n * // Setting `type=\"search\"` automatically updates the `filter` prop to\n * // be `noopAutocompleteFilter`\n * type=\"search\"\n * options={options}\n * onChange={(event) => search(event.currentTarget.value)}\n * />\n * );\n * }\n * ```\n *\n * @defaultValue `defaultAutocompleteFilter`\n */\n filter?: AutocompleteFilterFunction<Option>;\n\n /**\n * Set this to `true` to update the filtering behavior to also remove the\n * selected value from the available options. This is mostly for the\n * multiselect behavior.\n *\n * @defaultValue `false`\n */\n filterSelected?: boolean;\n\n /**\n * Set this to `true` to allow any value to be typed into the autocomplete\n * instead of enforcing an empty string or one of the option labels.\n *\n * @defaultValue `filter === noopAutocompleteFilter`\n */\n allowAnyValue?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteFilterAndListboxOptions<\n Option extends AutocompleteOption,\n>\n extends\n AutocompleteFilteringOptions<Option>,\n AutocompleteGetOptionProps<Option>,\n OptionSelectedIconProps {\n /**\n * Set this to `true` when using a multiselect autocomplete to update each\n * option to use checkboxes to show the selection state.\n *\n * @defaultValue `false`\n */\n checkboxes?: boolean;\n\n /**\n * @see {@link OptionSelectedIconProps.disableSelectedIcon}\n * @defaultValue `!checkboxes`\n */\n disableSelectedIcon?: boolean;\n\n /**\n * @see {@link AutocompleteUpdateQueryOnSelect}\n * @defaultValue `multiselect ? \"clear\" : \"selected\"`\n */\n updateQueryOnSelect?: AutocompleteUpdateQueryOnSelect;\n\n /**\n * Set this to `true` to prevent the listbox from closing when an option is\n * selected.\n *\n * @defaultValue `checkboxes`\n */\n disableCloseOnSelect?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteEditableComboboxOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>\n extends\n EditableComboboxOptions<ComboboxEl, PopupEl>,\n AutocompleteFilterAndListboxOptions<Option> {\n onBlur?: FocusEventHandler<ComboboxEl>;\n onChange?: ChangeEventHandler<ComboboxEl>;\n\n /**\n * This is a convenience prop for the `onEntering`/`onEntered` transition\n * callbacks that will ensure it is only called once even if the transitions\n * are disabled. A great use-case for this function is to fetch data once the\n * menu is opened.\n */\n onOpen?: () => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl> &\n AutocompleteOptionLabelExtractor<Option> &\n AutocompleteQuery;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n AutocompleteValue<Option | null>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> = AutocompleteQueryAndExtractorOptions<Option, ComboboxEl, PopupEl> &\n AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteOptions<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>\n extends\n AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,\n AutocompleteUnknownQueryAndValueOptions<Option> {}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteComboboxProps<\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n> extends EditableComboboxWidgetProps<ComboboxEl> {\n \"aria-autocomplete\": NonNullable<AriaAttributes[\"aria-autocomplete\"]>;\n value: string;\n onBlur: FocusEventHandler<ComboboxEl>;\n onChange: ChangeEventHandler<ComboboxEl>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteListboxProps<\n T extends AutocompleteOption = AutocompleteOption,\n PopupEl extends HTMLElement = HTMLElement,\n>\n extends Omit<ComboboxMenuProps<PopupEl>, \"ref\">, OptionSelectedIconProps {\n value: T | null | readonly T[];\n setValue: Dispatch<T>;\n onEnter: (appearing: boolean) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteListboxProps\n extends ConfigurableComboboxMenuProps, OptionSelectedIconProps {\n id?: string;\n}\n\n/**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n * - the input has a value and:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n *\n * @since 6.0.0\n */\nexport type ClearButtonVisibility = \"query\" | \"active\" | \"always\";\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {\n /** @defaultValue `\"Clear\"` */\n \"aria-label\"?: string;\n\n /** @defaultValue `\"autocomplete-clear-\" + useId()` */\n id?: string;\n\n /** {@inheritDoc ClearButtonVisibility} */\n visibility?: ClearButtonVisibility;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonProps extends ConfigurableAutocompleteClearButtonProps {\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableAutocompleteDropdownButtonProps extends ButtonProps {\n /** @defaultValue `AutocompleteProps.listboxLabel` */\n \"aria-label\"?: string;\n /** @defaultValue `AutocompleteProps.listboxLabelledby` */\n \"aria-labelledby\"?: string;\n\n /** @defaultValue `\"autocomplete-dropdown-\" + useId()` */\n id?: string;\n\n /** @defaultValue `getIcon(\"dropdown\")` */\n icon?: ReactNode;\n iconRotatorProps?: Omit<IconRotatorProps, \"rotated\">;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonProps extends ConfigurableAutocompleteDropdownButtonProps {\n \"aria-controls\": string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n visible: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteCircularProgressProps extends CircularProgressProps {\n /** @defaultValue `\"Loading\"` */\n \"aria-label\"?: string;\n\n /** @defaultValue `\"current-color\"` */\n theme?: ProgressTheme;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipProps extends ChipProps {\n /**\n * @defaultValue `typeof children === \"string\" ? \\`Remove \"${children}\"\\` : undefined`\n */\n \"aria-description\"?: string;\n\n /** @defaultValue `getIcon(\"remove\")` */\n removeIcon?: ReactNode;\n children: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteWithQueryImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n>\n extends\n EditableComboboxImplementation<ComboboxEl, PopupEl>,\n Required<AutocompleteGetOptionProps<Option>>,\n Required<AutocompleteGetOptionLabel<Option>> {\n query: string;\n setQuery: Dispatch<string>;\n comboboxProps: AutocompleteComboboxProps<ComboboxEl>;\n\n /**\n * This is a convenience prop to determine if the autocomplete supports\n * multiselect.\n */\n multiselect: boolean;\n\n /**\n * This is the current list of options that will be filtered based on the\n * current `query`. This should normally be rendered in the\n * `AutocompleteListboxChildren` component\n */\n availableOptions: readonly Option[];\n\n /**\n * Generates the props required for the `Listbox` component and should\n * normally be provided any menu props that might override the default display\n * settings.\n */\n getListboxProps: (\n overrides?: ConfigurableAutocompleteListboxProps\n ) => AutocompleteListboxProps<Option, PopupEl>;\n\n /**\n * Generates the props required for the `AutocompleteClearButton`.\n */\n getClearButtonProps: (\n overrides?: ConfigurableAutocompleteClearButtonProps\n ) => AutocompleteClearButtonProps;\n\n /**\n * Generates the props required for the `AutocompleteDropdownButton`.\n */\n getDropdownButtonProps: (\n overrides?: ConfigurableAutocompleteDropdownButtonProps\n ) => AutocompleteDropdownButtonProps;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteSingleSelectImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n value: Option | null;\n setValue: Dispatch<Option | null>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteMultiSelectImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n value: readonly Option[];\n setValue: Dispatch<readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteImplementation<\n Option extends AutocompleteOption,\n ComboboxEl extends EditableHTMLElement = HTMLInputElement,\n PopupEl extends HTMLElement = HTMLElement,\n> extends AutocompleteWithQueryImplementation<Option, ComboboxEl, PopupEl> {\n value: Option | null | readonly Option[];\n setValue: Dispatch<Option | null | readonly Option[]>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteBaseProps<Option extends AutocompleteOption>\n extends\n Omit<TextFieldProps, \"value\" | \"defaultValue\">,\n AutocompleteFilterAndListboxOptions<Option>,\n ComboboxVisibilityOptions {\n inputRef?: Ref<HTMLInputElement>;\n\n /**\n * An `aria-label` to pass to the `Listbox` component that describes the list\n * of {@link options}. Either this or the {@link listboxLabelledBy} are\n * required for accessibility.\n */\n listboxLabel?: string;\n\n /**\n * An `aria-labelledby` to pass to the `Listbox` component that describes the\n * list of {@link options}. Either this or the {@link listboxLabel} are\n * required for accessibility.\n */\n listboxLabelledBy?: string;\n\n /**\n * Any additional props that should be passed to the `Listbox` component.\n */\n listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;\n\n /**\n * This can be used to add any custom styling, change the icon, change the\n * label, etc for the dropdown button.\n *\n * @example Simple Example\n * ```tsx\n * dropdownButtonProps={{\n * \"aria-label\": \"Open\",\n * className: styles.dropdownButton,\n * icon: <MyCustomDropdownIcon />,\n * }}\n * ```\n */\n dropdownButtonProps?: ConfigurableAutocompleteDropdownButtonProps;\n\n /**\n * Set this to `true` to remove the {@link DropdownButton} from being rendered\n * after the input element.\n *\n * @defaultValue `false`\n */\n disableDropdownButton?: boolean;\n\n /**\n * Set this to `true` to disable a `<CircularProgress />` after the input and\n * before the `<DropdownButton />`.\n *\n * @defaultValue `false`\n */\n loading?: boolean;\n\n /**\n * @defaultValue `{ \"aria-label\": \"Loading\", ...loadingProps }`\n */\n loadingProps?: AutocompleteCircularProgressProps;\n\n /**\n * This will do nothing if {@link disableClearButton} is `true`.\n */\n clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;\n\n /**\n * Set to `true` to hide the clear button that appears when hovering an\n * `Autocomplete` that has a value. The user will still be able to clear the\n * value quickly using the `Escape` key.\n *\n * @defaultValue `false`\n */\n disableClearButton?: boolean;\n\n /**\n * - `\"always\"` - the clear button is always visible\n * - `\"active\"` - the clear button will be visible when:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n * - `\"query\"` - the clear button will be visible when:\n * - the input has a value and:\n * - the user moves focus within the autocomplete\n * - the user hovers the autocomplete\n *\n * @defaultValue `\"query\"`\n */\n clearButtonVisibility?: ClearButtonVisibility;\n\n /**\n * This is a convenience prop for the `onEntering`/`onEntered` transition\n * callbacks that will ensure it is only called once even if the transitions\n * are disabled. A great use-case for this function is to fetch data once the\n * menu is opened.\n */\n onOpen?: () => void;\n\n /**\n * The children to display when there are no {@link options} due to the\n * current text box value.\n *\n * @defaultValue `<ListSubheader>No options</ListSubheader`\n */\n noOptionsChildren?: ReactNode;\n\n /**\n * Set this to `true` when using a multiselect autocomplete to prevent the\n * selected values from being rendered inline with the input. This is useful\n * when the selected values should be shown in a different part of the UI\n * instead.\n *\n * @defaultValue `false`\n */\n disableInlineChips?: boolean;\n\n /**\n * This can be used to add additional props to each inline chip for multiselect\n * autocompletes.\n *\n * @example Simple Example\n * ```tsx\n * getChipProps={({ option, index }) => {\n * return {\n * disabled: index < 3,\n * className: cnb(option === \"a\" && styles.blue)<\n * };\n * }}\n * ```\n */\n getChipProps?: AutocompleteGetChipProps<Option>;\n}\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteListboxLabelProps =\n | { listboxLabel: string }\n | { listboxLabelledBy: string };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteQueryAndExtractorProps<\n Option extends AutocompleteOption,\n> = AutocompleteBaseProps<Option> &\n AutocompleteOptionLabelExtractor<Option> &\n AutocompleteQuery &\n AutocompleteListboxLabelProps;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteSingleSelectProps<Option extends AutocompleteOption> =\n AutocompleteQueryAndExtractorProps<Option> &\n AutocompleteValue<Option | null> & {\n checkboxes?: never;\n getChipProps?: never;\n disableInlineChips?: never;\n };\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteMultiSelectProps<Option extends AutocompleteOption> =\n AutocompleteQueryAndExtractorProps<Option> &\n AutocompleteValue<readonly Option[]>;\n\n/**\n * @since 6.0.0\n */\nexport type AutocompleteProps<Option extends AutocompleteOption> =\n AutocompleteBaseProps<Option> &\n AutocompleteUnknownQueryAndValueOptions<Option>;\n"],"names":[],"mappings":"AAy2BA;;CAEC,GACD,WAEoD"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/autocomplete/utils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nimport {\n type EditableHTMLElement,\n triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { type NonNullMutableRef, type UseStateInitializer } from \"../types.js\";\nimport { noopAutocompleteFilter } from \"./defaults.js\";\nimport {\n type AutocompleteFilterOptions,\n type AutocompleteGetOptionLabel,\n type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface GetDefaultValueOptions<Option extends AutocompleteOption>\n extends Required<AutocompleteGetOptionLabel<Option>> {\n query: string | undefined;\n multiselect?: boolean;\n defaultQuery: UseStateInitializer<string> | undefined;\n defaultValue:\n | UseStateInitializer<Option | null | readonly Option[]>\n | undefined;\n options: readonly Option[];\n filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultValue<Option extends AutocompleteOption>(\n options: GetDefaultValueOptions<Option>\n): UseStateInitializer<Option | null | readonly Option[]> {\n const {\n query,\n filter,\n multiselect,\n defaultQuery,\n defaultValue,\n options: values,\n getOptionLabel,\n } = options;\n\n if (typeof defaultValue !== \"undefined\") {\n return defaultValue;\n }\n\n // do not support determining the default value for a multiselect\n // autocomplete if only a query was provided.\n if (multiselect) {\n return [];\n }\n\n // do not support a default value out of the box for this case\n if (filter === noopAutocompleteFilter) {\n return null;\n }\n\n return () => {\n let q = \"\";\n if (query) {\n q = query;\n } else if (defaultQuery) {\n q = defaultQuery instanceof Function ? defaultQuery() : defaultQuery;\n }\n\n if (!q) {\n return null;\n }\n\n const filtered = filter({\n list: values,\n query: q,\n extractor: getOptionLabel,\n });\n\n return filtered[0] ?? null;\n };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface GetDefaultQueryOptions<Option extends AutocompleteOption>\n extends Required<AutocompleteGetOptionLabel<Option>> {\n value: Option | null | readonly Option[];\n defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultQuery<Option extends AutocompleteOption>(\n options: GetDefaultQueryOptions<Option>\n): UseStateInitializer<string> {\n const { value, getOptionLabel, defaultQuery } = options;\n\n if (defaultQuery) {\n return defaultQuery;\n }\n\n return () => {\n if (typeof value === \"string\") {\n return value;\n }\n\n if (value && typeof value === \"object\" && !(\"length\" in value)) {\n return getOptionLabel(value);\n }\n\n return \"\";\n };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface EnforceSelectedValueOptions<Option extends AutocompleteOption>\n extends Required<AutocompleteGetOptionLabel<Option>> {\n value: Option | readonly Option[] | null;\n visible: boolean;\n container: HTMLElement | null;\n popupRef: RefObject<HTMLElement>;\n comboboxRef: RefObject<EditableHTMLElement>;\n availableOptions: readonly Option[];\n prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;\n}\n\n/**\n * This enforces that if the user clicks away, touches somewhere else on the\n * page, tabs to the next element, or focuses another element programmatically\n * the autocomplete will set the `value` back to the previous selected value if\n * there was one. i.e.\n *\n * Case 1:\n * - User selects \"Apple\"\n * - User hits backspace twice. Input displays \"App\"\n * - User clicks somewhere else on the page\n * - Input now displays \"Apple\" again\n *\n * Case 2:\n * - User selects \"Apple\"\n * - User clears the input\n * - User types \"app\"\n * - User clicks somewhere else on the page\n * - Input now displays \"\" and the value is set to `null`\n *\n * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}\n *\n * @since 6.0.0\n * @internal\n */\nexport function enforceSelectedValue<Option extends AutocompleteOption>(\n options: EnforceSelectedValueOptions<Option>\n): void {\n const {\n value,\n visible,\n container,\n popupRef,\n comboboxRef,\n getOptionLabel,\n availableOptions,\n prevAvailableOptions,\n } = options;\n\n if (!container) {\n return;\n }\n\n window.requestAnimationFrame(() => {\n if (\n container.contains(document.activeElement) ||\n popupRef.current?.contains(document.activeElement)\n ) {\n return;\n }\n\n if (visible) {\n // this makes it so that the options are not filtered again while closing\n prevAvailableOptions.current = availableOptions;\n }\n\n let label = \"\";\n if (typeof value === \"string\") {\n label = value;\n } else if (typeof value === \"object\" && value && !(\"length\" in value)) {\n label = getOptionLabel(value);\n }\n\n triggerManualChangeEvent(comboboxRef.current, label);\n });\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function isMultipleValues<Option extends AutocompleteOption>(\n value: Option | null | readonly Option[]\n): value is readonly Option[] {\n return !!value && typeof value === \"object\" && \"length\" in value;\n}\n"],"names":["triggerManualChangeEvent","noopAutocompleteFilter","getDefaultValue","options","query","filter","multiselect","defaultQuery","defaultValue","values","getOptionLabel","q","Function","filtered","list","extractor","getDefaultQuery","value","enforceSelectedValue","visible","container","popupRef","comboboxRef","availableOptions","prevAvailableOptions","window","requestAnimationFrame","contains","document","activeElement","current","label","isMultipleValues"],"mappings":"AAEA,SAEEA,wBAAwB,QACnB,mBAAmB;AAE1B,SAASC,sBAAsB,QAAQ,gBAAgB;AAuBvD;;;CAGC,GACD,OAAO,SAASC,gBACdC,OAAuC;IAEvC,MAAM,EACJC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZL,SAASM,MAAM,EACfC,cAAc,EACf,GAAGP;IAEJ,IAAI,OAAOK,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,iEAAiE;IACjE,6CAA6C;IAC7C,IAAIF,aAAa;QACf,OAAO,EAAE;IACX;IAEA,8DAA8D;IAC9D,IAAID,WAAWJ,wBAAwB;QACrC,OAAO;IACT;IAEA,OAAO;QACL,IAAIU,IAAI;QACR,IAAIP,OAAO;YACTO,IAAIP;QACN,OAAO,IAAIG,cAAc;YACvBI,IAAIJ,wBAAwBK,WAAWL,iBAAiBA;QAC1D;QAEA,IAAI,CAACI,GAAG;YACN,OAAO;QACT;QAEA,MAAME,WAAWR,OAAO;YACtBS,MAAML;YACNL,OAAOO;YACPI,WAAWL;QACb;QAEA,OAAOG,QAAQ,CAAC,EAAE,IAAI;IACxB;AACF;AAYA;;;CAGC,GACD,OAAO,SAASG,gBACdb,OAAuC;IAEvC,MAAM,EAAEc,KAAK,EAAEP,cAAc,EAAEH,YAAY,EAAE,GAAGJ;IAEhD,IAAII,cAAc;QAChB,OAAOA;IACT;IAEA,OAAO;QACL,IAAI,OAAOU,UAAU,UAAU;YAC7B,OAAOA;QACT;QAEA,IAAIA,SAAS,OAAOA,UAAU,YAAY,CAAE,CAAA,YAAYA,KAAI,GAAI;YAC9D,OAAOP,eAAeO;QACxB;QAEA,OAAO;IACT;AACF;AAiBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,qBACdf,OAA4C;IAE5C,MAAM,EACJc,KAAK,EACLE,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXZ,cAAc,EACda,gBAAgB,EAChBC,oBAAoB,EACrB,GAAGrB;IAEJ,IAAI,CAACiB,WAAW;QACd;IACF;IAEAK,OAAOC,qBAAqB,CAAC;QAC3B,IACEN,UAAUO,QAAQ,CAACC,SAASC,aAAa,KACzCR,SAASS,OAAO,EAAEH,SAASC,SAASC,aAAa,GACjD;YACA;QACF;QAEA,IAAIV,SAAS;YACX,yEAAyE;YACzEK,qBAAqBM,OAAO,GAAGP;QACjC;QAEA,IAAIQ,QAAQ;QACZ,IAAI,OAAOd,UAAU,UAAU;YAC7Bc,QAAQd;QACV,OAAO,IAAI,OAAOA,UAAU,YAAYA,SAAS,CAAE,CAAA,YAAYA,KAAI,GAAI;YACrEc,QAAQrB,eAAeO;QACzB;QAEAjB,yBAAyBsB,YAAYQ,OAAO,EAAEC;IAChD;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,iBACdf,KAAwC;IAExC,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,YAAYA;AAC7D"}
1
+ {"version":3,"sources":["../../src/autocomplete/utils.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nimport {\n type EditableHTMLElement,\n triggerManualChangeEvent,\n} from \"../form/utils.js\";\nimport { type NonNullMutableRef, type UseStateInitializer } from \"../types.js\";\nimport { noopAutocompleteFilter } from \"./defaults.js\";\nimport {\n type AutocompleteFilterOptions,\n type AutocompleteGetOptionLabel,\n type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface GetDefaultValueOptions<\n Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n query: string | undefined;\n multiselect?: boolean;\n defaultQuery: UseStateInitializer<string> | undefined;\n defaultValue:\n | UseStateInitializer<Option | null | readonly Option[]>\n | undefined;\n options: readonly Option[];\n filter: (options: AutocompleteFilterOptions<Option>) => readonly Option[];\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultValue<Option extends AutocompleteOption>(\n options: GetDefaultValueOptions<Option>\n): UseStateInitializer<Option | null | readonly Option[]> {\n const {\n query,\n filter,\n multiselect,\n defaultQuery,\n defaultValue,\n options: values,\n getOptionLabel,\n } = options;\n\n if (typeof defaultValue !== \"undefined\") {\n return defaultValue;\n }\n\n // do not support determining the default value for a multiselect\n // autocomplete if only a query was provided.\n if (multiselect) {\n return [];\n }\n\n // do not support a default value out of the box for this case\n if (filter === noopAutocompleteFilter) {\n return null;\n }\n\n return () => {\n let q = \"\";\n if (query) {\n q = query;\n } else if (defaultQuery) {\n q = defaultQuery instanceof Function ? defaultQuery() : defaultQuery;\n }\n\n if (!q) {\n return null;\n }\n\n const filtered = filter({\n list: values,\n query: q,\n extractor: getOptionLabel,\n });\n\n return filtered[0] ?? null;\n };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface GetDefaultQueryOptions<\n Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n value: Option | null | readonly Option[];\n defaultQuery?: UseStateInitializer<string>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function getDefaultQuery<Option extends AutocompleteOption>(\n options: GetDefaultQueryOptions<Option>\n): UseStateInitializer<string> {\n const { value, getOptionLabel, defaultQuery } = options;\n\n if (defaultQuery) {\n return defaultQuery;\n }\n\n return () => {\n if (typeof value === \"string\") {\n return value;\n }\n\n if (value && typeof value === \"object\" && !(\"length\" in value)) {\n return getOptionLabel(value);\n }\n\n return \"\";\n };\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface EnforceSelectedValueOptions<\n Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionLabel<Option>> {\n value: Option | readonly Option[] | null;\n visible: boolean;\n container: HTMLElement | null;\n popupRef: RefObject<HTMLElement>;\n comboboxRef: RefObject<EditableHTMLElement>;\n availableOptions: readonly Option[];\n prevAvailableOptions: NonNullMutableRef<readonly Option[] | null>;\n}\n\n/**\n * This enforces that if the user clicks away, touches somewhere else on the\n * page, tabs to the next element, or focuses another element programmatically\n * the autocomplete will set the `value` back to the previous selected value if\n * there was one. i.e.\n *\n * Case 1:\n * - User selects \"Apple\"\n * - User hits backspace twice. Input displays \"App\"\n * - User clicks somewhere else on the page\n * - Input now displays \"Apple\" again\n *\n * Case 2:\n * - User selects \"Apple\"\n * - User clears the input\n * - User types \"app\"\n * - User clicks somewhere else on the page\n * - Input now displays \"\" and the value is set to `null`\n *\n * NOTE: This mutates the {@link EnforceSelectedValueOptions.prevAvailableOptions}\n *\n * @since 6.0.0\n * @internal\n */\nexport function enforceSelectedValue<Option extends AutocompleteOption>(\n options: EnforceSelectedValueOptions<Option>\n): void {\n const {\n value,\n visible,\n container,\n popupRef,\n comboboxRef,\n getOptionLabel,\n availableOptions,\n prevAvailableOptions,\n } = options;\n\n if (!container) {\n return;\n }\n\n window.requestAnimationFrame(() => {\n if (\n container.contains(document.activeElement) ||\n popupRef.current?.contains(document.activeElement)\n ) {\n return;\n }\n\n if (visible) {\n // this makes it so that the options are not filtered again while closing\n prevAvailableOptions.current = availableOptions;\n }\n\n let label = \"\";\n if (typeof value === \"string\") {\n label = value;\n } else if (typeof value === \"object\" && value && !(\"length\" in value)) {\n label = getOptionLabel(value);\n }\n\n triggerManualChangeEvent(comboboxRef.current, label);\n });\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function isMultipleValues<Option extends AutocompleteOption>(\n value: Option | null | readonly Option[]\n): value is readonly Option[] {\n return !!value && typeof value === \"object\" && \"length\" in value;\n}\n"],"names":["triggerManualChangeEvent","noopAutocompleteFilter","getDefaultValue","options","query","filter","multiselect","defaultQuery","defaultValue","values","getOptionLabel","q","Function","filtered","list","extractor","getDefaultQuery","value","enforceSelectedValue","visible","container","popupRef","comboboxRef","availableOptions","prevAvailableOptions","window","requestAnimationFrame","contains","document","activeElement","current","label","isMultipleValues"],"mappings":"AAEA,SAEEA,wBAAwB,QACnB,mBAAmB;AAE1B,SAASC,sBAAsB,QAAQ,gBAAgB;AAwBvD;;;CAGC,GACD,OAAO,SAASC,gBACdC,OAAuC;IAEvC,MAAM,EACJC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZL,SAASM,MAAM,EACfC,cAAc,EACf,GAAGP;IAEJ,IAAI,OAAOK,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,iEAAiE;IACjE,6CAA6C;IAC7C,IAAIF,aAAa;QACf,OAAO,EAAE;IACX;IAEA,8DAA8D;IAC9D,IAAID,WAAWJ,wBAAwB;QACrC,OAAO;IACT;IAEA,OAAO;QACL,IAAIU,IAAI;QACR,IAAIP,OAAO;YACTO,IAAIP;QACN,OAAO,IAAIG,cAAc;YACvBI,IAAIJ,wBAAwBK,WAAWL,iBAAiBA;QAC1D;QAEA,IAAI,CAACI,GAAG;YACN,OAAO;QACT;QAEA,MAAME,WAAWR,OAAO;YACtBS,MAAML;YACNL,OAAOO;YACPI,WAAWL;QACb;QAEA,OAAOG,QAAQ,CAAC,EAAE,IAAI;IACxB;AACF;AAaA;;;CAGC,GACD,OAAO,SAASG,gBACdb,OAAuC;IAEvC,MAAM,EAAEc,KAAK,EAAEP,cAAc,EAAEH,YAAY,EAAE,GAAGJ;IAEhD,IAAII,cAAc;QAChB,OAAOA;IACT;IAEA,OAAO;QACL,IAAI,OAAOU,UAAU,UAAU;YAC7B,OAAOA;QACT;QAEA,IAAIA,SAAS,OAAOA,UAAU,YAAY,CAAE,CAAA,YAAYA,KAAI,GAAI;YAC9D,OAAOP,eAAeO;QACxB;QAEA,OAAO;IACT;AACF;AAkBA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,qBACdf,OAA4C;IAE5C,MAAM,EACJc,KAAK,EACLE,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXZ,cAAc,EACda,gBAAgB,EAChBC,oBAAoB,EACrB,GAAGrB;IAEJ,IAAI,CAACiB,WAAW;QACd;IACF;IAEAK,OAAOC,qBAAqB,CAAC;QAC3B,IACEN,UAAUO,QAAQ,CAACC,SAASC,aAAa,KACzCR,SAASS,OAAO,EAAEH,SAASC,SAASC,aAAa,GACjD;YACA;QACF;QAEA,IAAIV,SAAS;YACX,yEAAyE;YACzEK,qBAAqBM,OAAO,GAAGP;QACjC;QAEA,IAAIQ,QAAQ;QACZ,IAAI,OAAOd,UAAU,UAAU;YAC7Bc,QAAQd;QACV,OAAO,IAAI,OAAOA,UAAU,YAAYA,SAAS,CAAE,CAAA,YAAYA,KAAI,GAAI;YACrEc,QAAQrB,eAAeO;QACzB;QAEAjB,yBAAyBsB,YAAYQ,OAAO,EAAEC;IAChD;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,iBACdf,KAAwC;IAExC,OAAO,CAAC,CAACA,SAAS,OAAOA,UAAU,YAAY,YAAYA;AAC7D"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type ImgHTMLAttributes,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /**\n * Since avatars are normally presentational data, they are hidden from screen\n * readers by default.\n *\n * @defaultValue `true`\n */\n \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n /**\n * This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n */\n src?: string;\n\n /**\n * An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n *\n * For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n *\n * @defaultValue `\"\"`\n */\n alt?: string;\n\n /**\n * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n *\n * @since 2.2.0\n */\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /**\n * An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n *\n * Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n *\n * @since 2.2.0\n */\n imgProps?: PropsWithRef<AvatarImgAttributes>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/avatar | Avatar Demos}\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n \"aria-hidden\": ariaHidden = true,\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color,\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img: ReactNode;\n if (src || imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n aria-hidden={ariaHidden}\n ref={ref}\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAAsCC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AA+D/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type ImgHTMLAttributes,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { type PropsWithRef } from \"../types.js\";\nimport { type AvatarClassNameOptions, avatar, avatarImage } from \"./styles.js\";\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n extends\n Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /**\n * Since avatars are normally presentational data, they are hidden from screen\n * readers by default.\n *\n * @defaultValue `true`\n */\n \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n /**\n * This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n */\n src?: string;\n\n /**\n * An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n *\n * For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n *\n * @defaultValue `\"\"`\n */\n alt?: string;\n\n /**\n * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n *\n * @since 2.2.0\n */\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /**\n * An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n *\n * Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n *\n * @since 2.2.0\n */\n imgProps?: PropsWithRef<AvatarImgAttributes>;\n}\n\n/**\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/avatar | Avatar Demos}\n * @since 6.0.0 `aria-hidden` is set to `true` by default.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n \"aria-hidden\": ariaHidden = true,\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color,\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img: ReactNode;\n if (src || imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n aria-hidden={ariaHidden}\n ref={ref}\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SAIEA,UAAU,QACL,QAAQ;AAGf,SAAsCC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AAgE/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n FloatingActionButton,\n type FloatingActionButtonPosition,\n type FloatingActionButtonProps,\n} from \"./FloatingActionButton.js\";\nimport { type ButtonClassNameThemeOptions, button } from \"./styles.js\";\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonClassNameThemeOptions,\n ComponentWithRippleProps {\n /** @defaultValue `\"button\"` */\n type?: \"button\" | \"reset\" | \"submit\";\n\n /**\n * The position within the viewport to display the button as a floating action\n * button.\n */\n floating?: FloatingActionButtonPosition;\n\n /**\n * Any additional props to provide the to `FAB` container element when the\n * `floating` prop is provided\n */\n floatingProps?: PropsWithRef<FloatingActionButtonProps>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"primary\"\n * themeType=\"contained\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"secondary\"\n * themeType=\"outline\"\n * buttonType=\"icon\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteIcon />\n * </Button>\n * );\n * }\n * ```\n *\n * @example Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteIcon />\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button | Button Demos}\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, ref) {\n const {\n type = \"button\",\n disabled = false,\n floating = null,\n floatingProps,\n theme = floating ? \"secondary\" : \"clear\",\n themeType = floating ? \"contained\" : \"flat\",\n iconSize,\n buttonType = floating || iconSize ? \"icon\" : \"text\",\n className,\n responsive,\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;\n const isThemeDisabled = theme === \"disabled\";\n const ariaDisabled = props[\"aria-disabled\"];\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n mode: disableRipple ? \"press\" : 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 disabled ||\n isThemeDisabled ||\n (ariaDisabled && ariaDisabled !== \"false\"),\n });\n\n const children = useHigherContrastChildren(propChildren);\n\n return (\n <FloatingActionButton position={floating} {...floatingProps}>\n <button\n {...remaining}\n // when the theme is set to `\"disabled\"`, the event handlers should be\n // removed so that it behaves like a disabled button. you do not want to\n // actually set the `disabled` attribute since it will lose keyboard\n // focus. this is mostly for supporting circular progress bars within\n // buttons\n {...(isThemeDisabled ? {} : handlers)}\n aria-disabled={isThemeDisabled || remaining[\"aria-disabled\"]}\n disabled={disabled}\n ref={ref}\n type={type}\n className={button({\n theme,\n themeType,\n buttonType,\n disabled,\n responsive,\n iconSize,\n pressed,\n pressedClassName,\n className,\n })}\n >\n {children}\n {ripples}\n </button>\n </FloatingActionButton>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","FloatingActionButton","button","Button","props","ref","type","disabled","floating","floatingProps","theme","themeType","iconSize","buttonType","className","responsive","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","mode","undefined","position","aria-disabled"],"mappings":"AAAA;;AAEA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAA2CC,MAAM,QAAQ,cAAc;AAsBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFC,GACD,OAAO,MAAMC,uBAASL,WACpB,SAASK,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,WAAW,IAAI,EACfC,aAAa,EACbC,QAAQF,WAAW,cAAc,OAAO,EACxCG,YAAYH,WAAW,cAAc,MAAM,EAC3CI,QAAQ,EACRC,aAAaL,YAAYI,WAAW,SAAS,MAAM,EACnDE,SAAS,EACTC,UAAU,EACVC,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,MAAM2B,kBAAkBrB,UAAU;IAClC,MAAMsB,eAAe5B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE6B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDrC,sBAAsB;QACpBsC,MAAMR,gBAAgB,UAAUS;QAChCpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAwB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMhB,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBsC,UAAU/B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG4B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCI,iBAAeT,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DvB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAqB;gBACAC;gBACApB;YACF;;gBAECE;gBACAmB;;;;AAIT,GACA"}
1
+ {"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n FloatingActionButton,\n type FloatingActionButtonPosition,\n type FloatingActionButtonProps,\n} from \"./FloatingActionButton.js\";\nimport { type ButtonClassNameThemeOptions, button } from \"./styles.js\";\n\nexport interface ButtonProps\n extends\n ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonClassNameThemeOptions,\n ComponentWithRippleProps {\n /** @defaultValue `\"button\"` */\n type?: \"button\" | \"reset\" | \"submit\";\n\n /**\n * The position within the viewport to display the button as a floating action\n * button.\n */\n floating?: FloatingActionButtonPosition;\n\n /**\n * Any additional props to provide the to `FAB` container element when the\n * `floating` prop is provided\n */\n floatingProps?: PropsWithRef<FloatingActionButtonProps>;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"primary\"\n * themeType=\"contained\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"secondary\"\n * themeType=\"outline\"\n * buttonType=\"icon\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteIcon />\n * </Button>\n * );\n * }\n * ```\n *\n * @example Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteIcon />\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/button | Button Demos}\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, ref) {\n const {\n type = \"button\",\n disabled = false,\n floating = null,\n floatingProps,\n theme = floating ? \"secondary\" : \"clear\",\n themeType = floating ? \"contained\" : \"flat\",\n iconSize,\n buttonType = floating || iconSize ? \"icon\" : \"text\",\n className,\n responsive,\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;\n const isThemeDisabled = theme === \"disabled\";\n const ariaDisabled = props[\"aria-disabled\"];\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n mode: disableRipple ? \"press\" : 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 disabled ||\n isThemeDisabled ||\n (ariaDisabled && ariaDisabled !== \"false\"),\n });\n\n const children = useHigherContrastChildren(propChildren);\n\n return (\n <FloatingActionButton position={floating} {...floatingProps}>\n <button\n {...remaining}\n // when the theme is set to `\"disabled\"`, the event handlers should be\n // removed so that it behaves like a disabled button. you do not want to\n // actually set the `disabled` attribute since it will lose keyboard\n // focus. this is mostly for supporting circular progress bars within\n // buttons\n {...(isThemeDisabled ? {} : handlers)}\n aria-disabled={isThemeDisabled || remaining[\"aria-disabled\"]}\n disabled={disabled}\n ref={ref}\n type={type}\n className={button({\n theme,\n themeType,\n buttonType,\n disabled,\n responsive,\n iconSize,\n pressed,\n pressedClassName,\n className,\n })}\n >\n {children}\n {ripples}\n </button>\n </FloatingActionButton>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","FloatingActionButton","button","Button","props","ref","type","disabled","floating","floatingProps","theme","themeType","iconSize","buttonType","className","responsive","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","mode","undefined","position","aria-disabled"],"mappings":"AAAA;;AAEA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAA2CC,MAAM,QAAQ,cAAc;AAuBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFC,GACD,OAAO,MAAMC,uBAASL,WACpB,SAASK,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,WAAW,IAAI,EACfC,aAAa,EACbC,QAAQF,WAAW,cAAc,OAAO,EACxCG,YAAYH,WAAW,cAAc,MAAM,EAC3CI,QAAQ,EACRC,aAAaL,YAAYI,WAAW,SAAS,MAAM,EACnDE,SAAS,EACTC,UAAU,EACVC,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,MAAM2B,kBAAkBrB,UAAU;IAClC,MAAMsB,eAAe5B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE6B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDrC,sBAAsB;QACpBsC,MAAMR,gBAAgB,UAAUS;QAChCpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAwB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMhB,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBsC,UAAU/B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG4B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCI,iBAAeT,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DvB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAqB;gBACAC;gBACApB;YACF;;gBAECE;gBACAmB;;;;AAIT,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-fab-offset\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n | \"bottom-left\"\n | \"bottom-right\"\n | \"top-left\"\n | \"top-right\"\n | null;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n className?: string;\n\n /** @defaultValue `null` */\n position?: FloatingActionButtonPosition;\n\n /**\n * @defaultValue `false`\n */\n absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n const { className, position = null, absolute = false } = options;\n\n return cnb(\n styles({\n tl: position === \"top-left\",\n tr: position === \"top-right\",\n bl: position === \"bottom-left\",\n br: position === \"bottom-right\",\n absolute,\n }),\n className\n );\n}\n\n/** @since 6.0.0 */\nexport interface FloatingActionButtonProps\n extends HTMLAttributes<HTMLSpanElement>,\n FloatingActionButtonClassNameOptions {}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n HTMLSpanElement,\n FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n const {\n children,\n className,\n position = null,\n absolute = false,\n ...remaining\n } = props;\n if (!position) {\n return <>{children}</>;\n }\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={fab({\n className,\n position,\n absolute,\n })}\n >\n {children}\n </span>\n );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAOA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}
1
+ {"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-fab-offset\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n | \"bottom-left\"\n | \"bottom-right\"\n | \"top-left\"\n | \"top-right\"\n | null;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n className?: string;\n\n /** @defaultValue `null` */\n position?: FloatingActionButtonPosition;\n\n /**\n * @defaultValue `false`\n */\n absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n const { className, position = null, absolute = false } = options;\n\n return cnb(\n styles({\n tl: position === \"top-left\",\n tr: position === \"top-right\",\n bl: position === \"bottom-left\",\n br: position === \"bottom-right\",\n absolute,\n }),\n className\n );\n}\n\n/** @since 6.0.0 */\nexport interface FloatingActionButtonProps\n extends\n HTMLAttributes<HTMLSpanElement>,\n FloatingActionButtonClassNameOptions {}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n HTMLSpanElement,\n FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n const {\n children,\n className,\n position = null,\n absolute = false,\n ...remaining\n } = props;\n if (!position) {\n return <>{children}</>;\n }\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={fab({\n className,\n position,\n absolute,\n })}\n >\n {children}\n </span>\n );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAQA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n extends HTMLAttributes<HTMLDivElement>,\n CardClassNameOptions,\n Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n /** @defaultValue `\"stretch\"` */\n align?: BoxAlignItems;\n\n /** @defaultValue `\"start\"` */\n justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Card>\n * <CardHeader>\n * <CardTitle>Main Title</CardTitle>\n * <CardSubtitle>A subtitle</CardSubtitle>\n * </CardHeader>\n * <CardContent>\n * <Typography margin=\"none\">\n * Some paragraph of text.\n * </Typography>\n * </CardContent>\n * <CardFooter>\n * <Button>Action 1</Button>\n * <Button>Action 2</Button>\n * </CardFooter>\n * </Card>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n function Card(props, ref) {\n const {\n children,\n className,\n align = \"stretch\",\n justify = \"stretch\",\n bordered,\n raisable,\n interactable,\n ...remaining\n } = props;\n\n return (\n <Box\n align={align}\n justify={justify}\n disableWrap\n {...remaining}\n stacked\n disableGap\n disablePadding\n ref={ref}\n className={card({\n className,\n bordered,\n raisable,\n interactable,\n })}\n >\n {children}\n </Box>\n );\n }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAiB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { Box } from \"../box/Box.js\";\nimport { type BoxAlignItems, type BoxOptions } from \"../box/styles.js\";\nimport { type CardClassNameOptions, card } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the\n * deprecated `raiseable` prop\n */\nexport interface CardProps\n extends\n HTMLAttributes<HTMLDivElement>,\n CardClassNameOptions,\n Pick<BoxOptions, \"align\" | \"justify\" | \"fullWidth\" | \"disableWrap\"> {\n /** @defaultValue `\"stretch\"` */\n align?: BoxAlignItems;\n\n /** @defaultValue `\"start\"` */\n justify?: BoxAlignItems;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Card } from \"@react-md/core/card/Card\";\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { CardFooter } from \"@react-md/core/card/CardFooter\";\n * import { CardHeader } from \"@react-md/core/card/CardHeader\";\n * import { CardTitle } from \"@react-md/core/card/CardTitle\";\n * import { CardSubtitle } from \"@react-md/core/card/CardSubtitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Card>\n * <CardHeader>\n * <CardTitle>Main Title</CardTitle>\n * <CardSubtitle>A subtitle</CardSubtitle>\n * </CardHeader>\n * <CardContent>\n * <Typography margin=\"none\">\n * Some paragraph of text.\n * </Typography>\n * </CardContent>\n * <CardFooter>\n * <Button>Action 1</Button>\n * <Button>Action 2</Button>\n * </CardFooter>\n * </Card>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Removed the deprecated `raiseable` prop\n * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of\n * `block`/`inline-block`.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n function Card(props, ref) {\n const {\n children,\n className,\n align = \"stretch\",\n justify = \"stretch\",\n bordered,\n raisable,\n interactable,\n ...remaining\n } = props;\n\n return (\n <Box\n align={align}\n justify={justify}\n disableWrap\n {...remaining}\n stacked\n disableGap\n disablePadding\n ref={ref}\n className={card({\n className,\n bordered,\n raisable,\n interactable,\n })}\n >\n {children}\n </Box>\n );\n }\n);\n"],"names":["forwardRef","Box","card","Card","props","ref","children","className","align","justify","bordered","raisable","interactable","remaining","disableWrap","stacked","disableGap","disablePadding"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAAoCC,IAAI,QAAQ,cAAc;AAkB9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GACD,OAAO,MAAMC,qBAAOH,WAClB,SAASG,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,QAAQ,SAAS,EACjBC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZ,GAAGC,WACJ,GAAGT;IAEJ,qBACE,KAACH;QACCO,OAAOA;QACPC,SAASA;QACTK,WAAW;QACV,GAAGD,SAAS;QACbE,OAAO;QACPC,UAAU;QACVC,cAAc;QACdZ,KAAKA;QACLE,WAAWL,KAAK;YACdK;YACAG;YACAC;YACAC;QACF;kBAECN;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type CardContentClassNameOptions, cardContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n extends HTMLAttributes<HTMLDivElement>,\n CardContentClassNameOptions {}\n\n/**\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n function CardContent(props, ref) {\n const {\n children,\n className,\n disablePadding,\n disableSecondaryColor,\n disableLastChildPadding,\n ...remaining\n } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={cardContent({\n className,\n disablePadding,\n disableSecondaryColor,\n disableLastChildPadding,\n })}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA2CC,WAAW,QAAQ,cAAc;AAU5E;;;;CAIC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/card/CardContent.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type CardContentClassNameOptions, cardContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport interface CardContentProps\n extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {}\n\n/**\n * @see {@link https://react-md.dev/components/card | Card Demos}\n * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and\n * removed the `disableParagraphMargin` prop.\n */\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n function CardContent(props, ref) {\n const {\n children,\n className,\n disablePadding,\n disableSecondaryColor,\n disableLastChildPadding,\n ...remaining\n } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={cardContent({\n className,\n disablePadding,\n disableSecondaryColor,\n disableLastChildPadding,\n })}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","cardContent","CardContent","props","ref","children","className","disablePadding","disableSecondaryColor","disableLastChildPadding","remaining","div"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAA2CC,WAAW,QAAQ,cAAc;AAS5E;;;;CAIC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACvB,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLE,WAAWL,YAAY;YACrBK;YACAC;YACAC;YACAC;QACF;kBAECJ;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface ClickableCardProps\n extends CardProps,\n ComponentWithRippleProps {\n onClick: MouseEventHandler<HTMLDivElement>;\n\n /**\n * Set this to `true` to disable all click events.\n *\n * Note: Any disabled styling will need to be manually applied.\n *\n * @defaultValue `false`\n */\n disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\"\n * import { ClickableCard } from \"@react-md/core/card/ClickableCard\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n * return (\n * <ClickableCard\n * onClick={() => {\n * // do something\n * }}\n * >\n * <CardContent>Wow</CardContent>\n * </ClickableCard>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card#clickable-card | ClickableCard Demos}\n * @since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n function ClickableCard(props, ref) {\n const {\n role = \"button\",\n disabled,\n tabIndex = disabled ? undefined : 0,\n onClick,\n onKeyDown = noop,\n className,\n children: propChildren,\n disableRipple,\n ...remaining\n } = props;\n const { handlers, ripples } = useElementInteraction({\n ...remaining,\n mode: disableRipple ? \"none\" : undefined,\n });\n const children = useHigherContrastChildren(propChildren);\n\n return (\n <Card\n {...remaining}\n {...handlers}\n aria-disabled={disabled || undefined}\n ref={ref}\n role={role}\n tabIndex={tabIndex}\n className={cnb(\"rmd-card--clickable\", className)}\n onClick={(event) => {\n if (disabled) {\n return;\n }\n\n onClick(event);\n }}\n onKeyDown={(event) => {\n onKeyDown(event);\n if (disabled) {\n return;\n }\n\n const isSpace = event.key === \" \";\n if (isSpace || event.key === \"Enter\") {\n if (isSpace) {\n event.preventDefault();\n }\n\n event.currentTarget.click();\n }\n }}\n >\n {children}\n {ripples}\n </Card>\n );\n }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAiCC,UAAU,QAAQ,QAAQ;AAG3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECb;YACAK;;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/card/ClickableCard.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { Card, type CardProps } from \"./Card.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface ClickableCardProps\n extends CardProps, ComponentWithRippleProps {\n onClick: MouseEventHandler<HTMLDivElement>;\n\n /**\n * Set this to `true` to disable all click events.\n *\n * Note: Any disabled styling will need to be manually applied.\n *\n * @defaultValue `false`\n */\n disabled?: boolean;\n}\n\n/**\n * A Small wrapper around the `Card` component that is clickable and has the\n * element interaction enabled (ripples).\n *\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\"\n * import { ClickableCard } from \"@react-md/core/card/ClickableCard\";\n * import { type ReactElement } from \"react\";\n *\n * export default function ClickableCardExample(): ReactElement {\n * return (\n * <ClickableCard\n * onClick={() => {\n * // do something\n * }}\n * >\n * <CardContent>Wow</CardContent>\n * </ClickableCard>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/card#clickable-card | ClickableCard Demos}\n * @since 6.0.0\n */\nexport const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(\n function ClickableCard(props, ref) {\n const {\n role = \"button\",\n disabled,\n tabIndex = disabled ? undefined : 0,\n onClick,\n onKeyDown = noop,\n className,\n children: propChildren,\n disableRipple,\n ...remaining\n } = props;\n const { handlers, ripples } = useElementInteraction({\n ...remaining,\n mode: disableRipple ? \"none\" : undefined,\n });\n const children = useHigherContrastChildren(propChildren);\n\n return (\n <Card\n {...remaining}\n {...handlers}\n aria-disabled={disabled || undefined}\n ref={ref}\n role={role}\n tabIndex={tabIndex}\n className={cnb(\"rmd-card--clickable\", className)}\n onClick={(event) => {\n if (disabled) {\n return;\n }\n\n onClick(event);\n }}\n onKeyDown={(event) => {\n onKeyDown(event);\n if (disabled) {\n return;\n }\n\n const isSpace = event.key === \" \";\n if (isSpace || event.key === \"Enter\") {\n if (isSpace) {\n event.preventDefault();\n }\n\n event.currentTarget.click();\n }\n }}\n >\n {children}\n {ripples}\n </Card>\n );\n }\n);\n"],"names":["cnb","forwardRef","useElementInteraction","useHigherContrastChildren","Card","noop","ClickableCard","props","ref","role","disabled","tabIndex","undefined","onClick","onKeyDown","className","children","propChildren","disableRipple","remaining","handlers","ripples","mode","aria-disabled","event","isSpace","key","preventDefault","currentTarget","click"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAAiCC,UAAU,QAAQ,QAAQ;AAG3D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,IAAI,QAAwB,YAAY;AAEjD,MAAMC,OAAO;AACX,aAAa;AACf;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,8BAAgBL,WAC3B,SAASK,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,OAAO,QAAQ,EACfC,QAAQ,EACRC,WAAWD,WAAWE,YAAY,CAAC,EACnCC,OAAO,EACPC,YAAYT,IAAI,EAChBU,SAAS,EACTC,UAAUC,YAAY,EACtBC,aAAa,EACb,GAAGC,WACJ,GAAGZ;IACJ,MAAM,EAAEa,QAAQ,EAAEC,OAAO,EAAE,GAAGnB,sBAAsB;QAClD,GAAGiB,SAAS;QACZG,MAAMJ,gBAAgB,SAASN;IACjC;IACA,MAAMI,WAAWb,0BAA0Bc;IAE3C,qBACE,MAACb;QACE,GAAGe,SAAS;QACZ,GAAGC,QAAQ;QACZG,iBAAeb,YAAYE;QAC3BJ,KAAKA;QACLC,MAAMA;QACNE,UAAUA;QACVI,WAAWf,IAAI,uBAAuBe;QACtCF,SAAS,CAACW;YACR,IAAId,UAAU;gBACZ;YACF;YAEAG,QAAQW;QACV;QACAV,WAAW,CAACU;YACVV,UAAUU;YACV,IAAId,UAAU;gBACZ;YACF;YAEA,MAAMe,UAAUD,MAAME,GAAG,KAAK;YAC9B,IAAID,WAAWD,MAAME,GAAG,KAAK,SAAS;gBACpC,IAAID,SAAS;oBACXD,MAAMG,cAAc;gBACtB;gBAEAH,MAAMI,aAAa,CAACC,KAAK;YAC3B;QACF;;YAECb;YACAK;;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type ButtonHTMLAttributes,\n type CSSProperties,\n type HTMLAttributes,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n type BaseMaxWidthTransitionOptions,\n useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n BaseMaxWidthTransitionOptions,\n ComponentWithRippleProps {\n /**\n * @defaultValue `\"solid\"`\n */\n theme?: ChipTheme;\n\n /**\n * Set this to `true` if the chip should gain additional box shadow while the\n * user is pressing down on the chip.\n *\n * @defaultValue `false`\n */\n raisable?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disabled?: boolean;\n\n /**\n * When this is a boolean, a selected icon will be displayed before the\n * `children` and appear/disappear when `true`/`false`.\n *\n * @see {@link selectedIcon}\n * @see {@link selectedIconAfter}\n * @see {@link selectedThemed}\n */\n selected?: boolean;\n\n /**\n * Set this to `true` if the chip should change background color while\n * {@link selected} instead of displaying an icon. The default background\n * color is a lighter swatch of the theme primary color.\n *\n * @defaultValue `false`\n */\n selectedThemed?: boolean;\n\n /**\n * An optional className to provide only while {@link selected} is `true`.\n */\n selectedClassName?: string;\n\n /**\n * This will be ignored if {@link selected} is `undefined`.\n *\n * @defaultValue `getIcon(\"selected\")`\n */\n selectedIcon?: ReactNode;\n\n /**\n * Set this to `true` if the {@link selectedIcon} should display as the\n * {@link rightAddon} instead of the {@link leftAddon}.\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n selectedIconAfter?: boolean;\n\n /**\n * Set this to `true` if the {@link selectedIcon} should not animate and\n * instead apply `display: none`\n *\n * @defaultValue `false`\n */\n disableIconTransition?: boolean;\n\n /**\n * Set this to `true` to render the chip as a `<span>` instead of a button.\n *\n * @since 2.6.0\n * @since 6.0.0 Renamed from `noninteractable`\n * @defaultValue `false`\n */\n noninteractive?: boolean;\n\n /**\n * An optional background color theme to use.\n *\n * @since 6.0.0\n */\n backgroundColor?: BackgroundColor;\n\n /**\n * An optional icon, avatar, circular progress, or custom component to render\n * before the `children`. This will remove some of the leading horizontal\n * padding on the chip as well.\n */\n leftAddon?: ReactNode;\n\n /**\n * An optional icon, avatar, circular progress, or custom component to render\n * after the `children`. This will remove some of the trailing horizontal\n * padding on the chip as well.\n */\n rightAddon?: ReactNode;\n\n /**\n * Set this to true if the `children` should not be wrapped in a span to apply\n * the {@link chipContent} styles which allow for shrinking text and\n * truncating text with ellipsis.\n *\n * @defaultValue `false`\n */\n disableContentWrap?: boolean;\n\n /**\n * This will be ignored if {@link disableContentWrap} is `true`.\n *\n * @since 6.0.0\n */\n contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * This will be ignored if {@link disableContentWrap} is `true`.\n */\n contentStyle?: CSSProperties;\n\n /**\n * This will be ignored if {@link disableContentWrap} is `true`.\n */\n contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Chip\n * leftAddon={\n * <Avatar>\n * <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n * </Avatar>\n * }\n * rightAddon={<AddCircleIcon />}\n * >\n * Chip\n * </Chip>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n function Chip(props, ref) {\n const {\n \"aria-pressed\": ariaPressed,\n theme = \"solid\",\n className,\n raisable = false,\n disabled = false,\n selected,\n selectedThemed = false,\n selectedClassName,\n selectedIcon: propSelectedIcon,\n selectedIconAfter = false,\n backgroundColor,\n noninteractive = false,\n disableRipple,\n disableIconTransition = false,\n children: propChildren,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n leftAddon: propLeftAddon,\n rightAddon: propRightAddon,\n contentProps,\n contentStyle,\n contentClassName,\n disableContentWrap = false,\n ...remaining\n } = props;\n\n let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n if (!noninteractive) {\n buttonProps = {\n \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n type: \"button\",\n disabled,\n };\n }\n\n let content = propChildren;\n if (!disableContentWrap) {\n content = (\n <span\n style={contentStyle}\n {...contentProps}\n className={cnb(\n chipContent({ className: contentClassName }),\n contentProps?.className\n )}\n >\n {propChildren}\n </span>\n );\n }\n\n let leftAddon = propLeftAddon;\n let rightAddon = propRightAddon;\n const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n const isTransitionable =\n !selectedThemed &&\n typeof selected === \"boolean\" &&\n typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n \"undefined\";\n const selectedIcon = useMaxWidthTransition({\n element: selectedIconNode,\n transitionIn: !!selected,\n disabled: !isTransitionable,\n disableTransition: disableIconTransition,\n });\n if (isTransitionable) {\n if (selectedIconAfter) {\n rightAddon = selectedIcon;\n } else {\n leftAddon = selectedIcon;\n }\n }\n\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled: disabled || noninteractive,\n });\n const children = useHigherContrastChildren(content);\n const Component = noninteractive ? \"span\" : \"button\";\n\n return (\n <Component\n {...remaining}\n {...buttonProps}\n {...handlers}\n className={chip({\n className,\n theme,\n pressed: raisable && pressed,\n disabled,\n selected,\n selectedThemed,\n selectedClassName,\n noninteractive,\n backgroundColor,\n pressedClassName,\n leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n rightAddon:\n !!rightAddon && (!selectedIconAfter || selected !== false),\n })}\n ref={ref}\n >\n {leftAddon}\n {children}\n {rightAddon}\n {ripples}\n </Component>\n );\n }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAKEC,UAAU,QACL,QAAQ;AAGf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAEEC,qBAAqB,QAChB,yCAAyC;AAEhD,SAAyBC,IAAI,EAAEC,WAAW,QAAQ,cAAc;AAuIhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,MAAMC,qBAAOP,WAClB,SAASO,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJ,gBAAgBC,WAAW,EAC3BC,QAAQ,OAAO,EACfC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,cAAcC,gBAAgB,EAC9BC,oBAAoB,KAAK,EACzBC,eAAe,EACfC,iBAAiB,KAAK,EACtBC,aAAa,EACbC,wBAAwB,KAAK,EAC7BC,UAAUC,YAAY,EACtBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,qBAAqB,KAAK,EAC1B,GAAGC,WACJ,GAAGrC;IAEJ,IAAIsC;IACJ,IAAI,CAACxB,gBAAgB;QACnBwB,cAAc;YACZ,gBAAgBpC,eAAgB,CAAA,CAAC,CAACK,YAAYgC,SAAQ;YACtDC,MAAM;YACNlC;QACF;IACF;IAEA,IAAImC,UAAUvB;IACd,IAAI,CAACkB,oBAAoB;QACvBK,wBACE,KAACC;YACCC,OAAOT;YACN,GAAGD,YAAY;YAChB7B,WAAWb,IACTO,YAAY;gBAAEM,WAAW+B;YAAiB,IAC1CF,cAAc7B;sBAGfc;;IAGP;IAEA,IAAIW,YAAYC;IAChB,IAAIC,aAAaC;IACjB,MAAMY,mBAAmBnD,QAAQ,YAAYkB;IAC7C,MAAMkC,mBACJ,CAACrC,kBACD,OAAOD,aAAa,aACpB,OAAQK,CAAAA,oBAAoBoB,iBAAiBF,aAAY,MACvD;IACJ,MAAMpB,eAAed,sBAAsB;QACzCkD,SAASF;QACTG,cAAc,CAAC,CAACxC;QAChBD,UAAU,CAACuC;QACXG,mBAAmBhC;IACrB;IACA,IAAI6B,kBAAkB;QACpB,IAAIjC,mBAAmB;YACrBmB,aAAarB;QACf,OAAO;YACLmB,YAAYnB;QACd;IACF;IAEA,MAAM,EAAEuC,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD1D,sBAAsB;QACpB2D,MAAMtC,gBAAgB,SAASwB;QAC/BpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,UAAUA,YAAYQ;IACxB;IACF,MAAMG,WAAWtB,0BAA0B8C;IAC3C,MAAMa,YAAYxC,iBAAiB,SAAS;IAE5C,qBACE,MAACwC;QACE,GAAGjB,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGc,QAAQ;QACZhD,WAAWP,KAAK;YACdO;YACAD;YACA8C,SAAS5C,YAAY4C;YACrB3C;YACAC;YACAC;YACAC;YACAK;YACAD;YACAqC;YACArB,WAAW,CAAC,CAACA,aAAcjB,CAAAA,qBAAqBL,aAAa,KAAI;YACjEwB,YACE,CAAC,CAACA,cAAe,CAAA,CAACnB,qBAAqBL,aAAa,KAAI;QAC5D;QACAN,KAAKA;;YAEJ4B;YACAZ;YACAc;YACAoB;;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/chip/Chip.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type ButtonHTMLAttributes,\n type CSSProperties,\n type HTMLAttributes,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport {\n type BaseMaxWidthTransitionOptions,\n useMaxWidthTransition,\n} from \"../transition/useMaxWidthTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { type ChipTheme, chip, chipContent } from \"./styles.js\";\n\n/**\n * @since 6.0.0 Renamed the `noninteractive` prop to\n * `noninteractable`.\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module\n * augmentation.\n */\nexport interface ChipProps\n extends\n ButtonHTMLAttributes<HTMLButtonElement>,\n BaseMaxWidthTransitionOptions,\n ComponentWithRippleProps {\n /**\n * @defaultValue `\"solid\"`\n */\n theme?: ChipTheme;\n\n /**\n * Set this to `true` if the chip should gain additional box shadow while the\n * user is pressing down on the chip.\n *\n * @defaultValue `false`\n */\n raisable?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disabled?: boolean;\n\n /**\n * When this is a boolean, a selected icon will be displayed before the\n * `children` and appear/disappear when `true`/`false`.\n *\n * @see {@link selectedIcon}\n * @see {@link selectedIconAfter}\n * @see {@link selectedThemed}\n */\n selected?: boolean;\n\n /**\n * Set this to `true` if the chip should change background color while\n * {@link selected} instead of displaying an icon. The default background\n * color is a lighter swatch of the theme primary color.\n *\n * @defaultValue `false`\n */\n selectedThemed?: boolean;\n\n /**\n * An optional className to provide only while {@link selected} is `true`.\n */\n selectedClassName?: string;\n\n /**\n * This will be ignored if {@link selected} is `undefined`.\n *\n * @defaultValue `getIcon(\"selected\")`\n */\n selectedIcon?: ReactNode;\n\n /**\n * Set this to `true` if the {@link selectedIcon} should display as the\n * {@link rightAddon} instead of the {@link leftAddon}.\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n selectedIconAfter?: boolean;\n\n /**\n * Set this to `true` if the {@link selectedIcon} should not animate and\n * instead apply `display: none`\n *\n * @defaultValue `false`\n */\n disableIconTransition?: boolean;\n\n /**\n * Set this to `true` to render the chip as a `<span>` instead of a button.\n *\n * @since 2.6.0\n * @since 6.0.0 Renamed from `noninteractable`\n * @defaultValue `false`\n */\n noninteractive?: boolean;\n\n /**\n * An optional background color theme to use.\n *\n * @since 6.0.0\n */\n backgroundColor?: BackgroundColor;\n\n /**\n * An optional icon, avatar, circular progress, or custom component to render\n * before the `children`. This will remove some of the leading horizontal\n * padding on the chip as well.\n */\n leftAddon?: ReactNode;\n\n /**\n * An optional icon, avatar, circular progress, or custom component to render\n * after the `children`. This will remove some of the trailing horizontal\n * padding on the chip as well.\n */\n rightAddon?: ReactNode;\n\n /**\n * Set this to true if the `children` should not be wrapped in a span to apply\n * the {@link chipContent} styles which allow for shrinking text and\n * truncating text with ellipsis.\n *\n * @defaultValue `false`\n */\n disableContentWrap?: boolean;\n\n /**\n * This will be ignored if {@link disableContentWrap} is `true`.\n *\n * @since 6.0.0\n */\n contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * This will be ignored if {@link disableContentWrap} is `true`.\n */\n contentStyle?: CSSProperties;\n\n /**\n * This will be ignored if {@link disableContentWrap} is `true`.\n */\n contentClassName?: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <Chip>Content</Chip>;\n * }\n * ```\n *\n * @example Outlined Example\n * ```tsx\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <Chip theme=\"outline\">Content</Chip>;\n * }\n * ```\n *\n * @example Addons Example\n * ```tsx\n * import { Avatar } from \"@react-md/core/avatar/Avatar\";\n * import { Chip } from \"@react-md/core/chip/Chip\";\n * import AddCircleIcon from \"@react-md/material-icons/AddCircleIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Chip\n * leftAddon={\n * <Avatar>\n * <img src=\"https://i.pravatar.cc/40?img=3\" alt=\"\" />\n * </Avatar>\n * }\n * rightAddon={<AddCircleIcon />}\n * >\n * Chip\n * </Chip>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/chip | Chip Demos}\n * @since 6.0.0 Renamed the `noninteractable` prop to\n * `noninteractive`.\n */\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(\n function Chip(props, ref) {\n const {\n \"aria-pressed\": ariaPressed,\n theme = \"solid\",\n className,\n raisable = false,\n disabled = false,\n selected,\n selectedThemed = false,\n selectedClassName,\n selectedIcon: propSelectedIcon,\n selectedIconAfter = false,\n backgroundColor,\n noninteractive = false,\n disableRipple,\n disableIconTransition = false,\n children: propChildren,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n leftAddon: propLeftAddon,\n rightAddon: propRightAddon,\n contentProps,\n contentStyle,\n contentClassName,\n disableContentWrap = false,\n ...remaining\n } = props;\n\n let buttonProps: ButtonHTMLAttributes<HTMLButtonElement> | undefined;\n if (!noninteractive) {\n buttonProps = {\n \"aria-pressed\": ariaPressed ?? (!!selected || undefined),\n type: \"button\",\n disabled,\n };\n }\n\n let content = propChildren;\n if (!disableContentWrap) {\n content = (\n <span\n style={contentStyle}\n {...contentProps}\n className={cnb(\n chipContent({ className: contentClassName }),\n contentProps?.className\n )}\n >\n {propChildren}\n </span>\n );\n }\n\n let leftAddon = propLeftAddon;\n let rightAddon = propRightAddon;\n const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n const isTransitionable =\n !selectedThemed &&\n typeof selected === \"boolean\" &&\n typeof (selectedIconAfter ? propRightAddon : propLeftAddon) ===\n \"undefined\";\n const selectedIcon = useMaxWidthTransition({\n element: selectedIconNode,\n transitionIn: !!selected,\n disabled: !isTransitionable,\n disableTransition: disableIconTransition,\n });\n if (isTransitionable) {\n if (selectedIconAfter) {\n rightAddon = selectedIcon;\n } else {\n leftAddon = selectedIcon;\n }\n }\n\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled: disabled || noninteractive,\n });\n const children = useHigherContrastChildren(content);\n const Component = noninteractive ? \"span\" : \"button\";\n\n return (\n <Component\n {...remaining}\n {...buttonProps}\n {...handlers}\n className={chip({\n className,\n theme,\n pressed: raisable && pressed,\n disabled,\n selected,\n selectedThemed,\n selectedClassName,\n noninteractive,\n backgroundColor,\n pressedClassName,\n leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),\n rightAddon:\n !!rightAddon && (!selectedIconAfter || selected !== false),\n })}\n ref={ref}\n >\n {leftAddon}\n {children}\n {rightAddon}\n {ripples}\n </Component>\n );\n }\n);\n"],"names":["cnb","forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","chip","chipContent","Chip","props","ref","ariaPressed","theme","className","raisable","disabled","selected","selectedThemed","selectedClassName","selectedIcon","propSelectedIcon","selectedIconAfter","backgroundColor","noninteractive","disableRipple","disableIconTransition","children","propChildren","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","leftAddon","propLeftAddon","rightAddon","propRightAddon","contentProps","contentStyle","contentClassName","disableContentWrap","remaining","buttonProps","undefined","type","content","span","style","selectedIconNode","isTransitionable","element","transitionIn","disableTransition","pressed","pressedClassName","ripples","handlers","mode","Component"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAKEC,UAAU,QACL,QAAQ;AAGf,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAEEC,qBAAqB,QAChB,yCAAyC;AAEhD,SAAyBC,IAAI,EAAEC,WAAW,QAAQ,cAAc;AAwIhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,MAAMC,qBAAOP,WAClB,SAASO,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJ,gBAAgBC,WAAW,EAC3BC,QAAQ,OAAO,EACfC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,iBAAiB,KAAK,EACtBC,iBAAiB,EACjBC,cAAcC,gBAAgB,EAC9BC,oBAAoB,KAAK,EACzBC,eAAe,EACfC,iBAAiB,KAAK,EACtBC,aAAa,EACbC,wBAAwB,KAAK,EAC7BC,UAAUC,YAAY,EACtBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,YAAY,EACZC,YAAY,EACZC,gBAAgB,EAChBC,qBAAqB,KAAK,EAC1B,GAAGC,WACJ,GAAGrC;IAEJ,IAAIsC;IACJ,IAAI,CAACxB,gBAAgB;QACnBwB,cAAc;YACZ,gBAAgBpC,eAAgB,CAAA,CAAC,CAACK,YAAYgC,SAAQ;YACtDC,MAAM;YACNlC;QACF;IACF;IAEA,IAAImC,UAAUvB;IACd,IAAI,CAACkB,oBAAoB;QACvBK,wBACE,KAACC;YACCC,OAAOT;YACN,GAAGD,YAAY;YAChB7B,WAAWb,IACTO,YAAY;gBAAEM,WAAW+B;YAAiB,IAC1CF,cAAc7B;sBAGfc;;IAGP;IAEA,IAAIW,YAAYC;IAChB,IAAIC,aAAaC;IACjB,MAAMY,mBAAmBnD,QAAQ,YAAYkB;IAC7C,MAAMkC,mBACJ,CAACrC,kBACD,OAAOD,aAAa,aACpB,OAAQK,CAAAA,oBAAoBoB,iBAAiBF,aAAY,MACvD;IACJ,MAAMpB,eAAed,sBAAsB;QACzCkD,SAASF;QACTG,cAAc,CAAC,CAACxC;QAChBD,UAAU,CAACuC;QACXG,mBAAmBhC;IACrB;IACA,IAAI6B,kBAAkB;QACpB,IAAIjC,mBAAmB;YACrBmB,aAAarB;QACf,OAAO;YACLmB,YAAYnB;QACd;IACF;IAEA,MAAM,EAAEuC,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpD1D,sBAAsB;QACpB2D,MAAMtC,gBAAgB,SAASwB;QAC/BpB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,UAAUA,YAAYQ;IACxB;IACF,MAAMG,WAAWtB,0BAA0B8C;IAC3C,MAAMa,YAAYxC,iBAAiB,SAAS;IAE5C,qBACE,MAACwC;QACE,GAAGjB,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGc,QAAQ;QACZhD,WAAWP,KAAK;YACdO;YACAD;YACA8C,SAAS5C,YAAY4C;YACrB3C;YACAC;YACAC;YACAC;YACAK;YACAD;YACAqC;YACArB,WAAW,CAAC,CAACA,aAAcjB,CAAAA,qBAAqBL,aAAa,KAAI;YACjEwB,YACE,CAAC,CAACA,cAAe,CAAA,CAACnB,qBAAqBL,aAAa,KAAI;QAC5D;QACAN,KAAKA;;YAEJ4B;YACAZ;YACAc;YACAoB;;;AAGP,GACA"}