@react-md/core 6.3.3 → 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 (456) 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/box/_box.scss +20 -1
  13. package/dist/box/styles.d.ts +39 -0
  14. package/dist/box/styles.js +39 -0
  15. package/dist/box/styles.js.map +1 -1
  16. package/dist/button/Button.js.map +1 -1
  17. package/dist/button/FloatingActionButton.js.map +1 -1
  18. package/dist/card/Card.js.map +1 -1
  19. package/dist/card/CardContent.js.map +1 -1
  20. package/dist/card/ClickableCard.js.map +1 -1
  21. package/dist/chip/Chip.js.map +1 -1
  22. package/dist/datetime/NativeDateField.js.map +1 -1
  23. package/dist/datetime/NativeTimeField.js.map +1 -1
  24. package/dist/datetime/useDateField.js.map +1 -1
  25. package/dist/datetime/useTimeField.js.map +1 -1
  26. package/dist/dialog/Dialog.js.map +1 -1
  27. package/dist/dialog/DialogContainer.js.map +1 -1
  28. package/dist/dialog/DialogContent.js.map +1 -1
  29. package/dist/dialog/DialogFooter.js.map +1 -1
  30. package/dist/divider/Divider.js.map +1 -1
  31. package/dist/draggable/useDraggable.js.map +1 -1
  32. package/dist/draggable/utils.js.map +1 -1
  33. package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
  34. package/dist/files/FileInput.js.map +1 -1
  35. package/dist/files/useFileUpload.js.map +1 -1
  36. package/dist/files/validation.js.map +1 -1
  37. package/dist/focus/useFocusContainer.js.map +1 -1
  38. package/dist/form/Fieldset.d.ts +19 -0
  39. package/dist/form/Fieldset.js +22 -2
  40. package/dist/form/Fieldset.js.map +1 -1
  41. package/dist/form/FormMessageContainer.js.map +1 -1
  42. package/dist/form/FormMessageCounter.js.map +1 -1
  43. package/dist/form/InputToggle.js.map +1 -1
  44. package/dist/form/Legend.d.ts +27 -5
  45. package/dist/form/Legend.js +39 -6
  46. package/dist/form/Legend.js.map +1 -1
  47. package/dist/form/Listbox.js.map +1 -1
  48. package/dist/form/ListboxProvider.js.map +1 -1
  49. package/dist/form/NativeSelect.js.map +1 -1
  50. package/dist/form/Password.js.map +1 -1
  51. package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
  52. package/dist/form/Select.js.map +1 -1
  53. package/dist/form/Slider.js.map +1 -1
  54. package/dist/form/SliderContainer.js.map +1 -1
  55. package/dist/form/SliderThumb.js.map +1 -1
  56. package/dist/form/SliderTrack.js.map +1 -1
  57. package/dist/form/SliderValueMarks.js.map +1 -1
  58. package/dist/form/Switch.js.map +1 -1
  59. package/dist/form/TextArea.js.map +1 -1
  60. package/dist/form/TextField.js.map +1 -1
  61. package/dist/form/TextFieldContainer.js.map +1 -1
  62. package/dist/form/_fieldset.scss +7 -0
  63. package/dist/form/_legend.scss +68 -0
  64. package/dist/form/_text-field.scss +39 -4
  65. package/dist/form/fieldsetStyles.d.ts +6 -1
  66. package/dist/form/fieldsetStyles.js +3 -2
  67. package/dist/form/fieldsetStyles.js.map +1 -1
  68. package/dist/form/inputToggleStyles.js.map +1 -1
  69. package/dist/form/labelStyles.d.ts +1 -1
  70. package/dist/form/labelStyles.js +1 -1
  71. package/dist/form/labelStyles.js.map +1 -1
  72. package/dist/form/legendStyles.d.ts +83 -0
  73. package/dist/form/legendStyles.js +25 -0
  74. package/dist/form/legendStyles.js.map +1 -0
  75. package/dist/form/selectUtils.js.map +1 -1
  76. package/dist/form/textFieldContainerStyles.js.map +1 -1
  77. package/dist/form/types.d.ts +28 -6
  78. package/dist/form/types.js.map +1 -1
  79. package/dist/form/useCheckboxGroup.js.map +1 -1
  80. package/dist/form/useCombobox.js.map +1 -1
  81. package/dist/form/useNumberField.js +16 -19
  82. package/dist/form/useNumberField.js.map +1 -1
  83. package/dist/form/useRangeSlider.js.map +1 -1
  84. package/dist/form/useSlider.js.map +1 -1
  85. package/dist/form/useTextField.d.ts +1 -1
  86. package/dist/form/useTextField.js.map +1 -1
  87. package/dist/hoverMode/useHoverMode.js.map +1 -1
  88. package/dist/icon/FontIcon.js.map +1 -1
  89. package/dist/icon/IconRotator.js.map +1 -1
  90. package/dist/icon/MaterialIcon.js.map +1 -1
  91. package/dist/icon/MaterialSymbol.js.map +1 -1
  92. package/dist/icon/SVGIcon.js.map +1 -1
  93. package/dist/icon/config.d.ts +0 -1
  94. package/dist/icon/config.js +10 -7
  95. package/dist/icon/config.js.map +1 -1
  96. package/dist/icon/materialConfig.js.map +1 -1
  97. package/dist/icon/styles.js.map +1 -1
  98. package/dist/interaction/UserInteractionModeProvider.js +6 -4
  99. package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
  100. package/dist/interaction/types.js.map +1 -1
  101. package/dist/interaction/useElementInteraction.js.map +1 -1
  102. package/dist/layout/LayoutAppBar.d.ts +6 -6
  103. package/dist/layout/LayoutAppBar.js +6 -6
  104. package/dist/layout/LayoutAppBar.js.map +1 -1
  105. package/dist/layout/LayoutNav.js.map +1 -1
  106. package/dist/layout/LayoutWindowSplitter.js.map +1 -1
  107. package/dist/layout/Main.js.map +1 -1
  108. package/dist/layout/useExpandableLayout.js +43 -0
  109. package/dist/layout/useExpandableLayout.js.map +1 -1
  110. package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
  111. package/dist/layout/useLayoutTree.js.map +1 -1
  112. package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
  113. package/dist/layout/useResizableLayout.js.map +1 -1
  114. package/dist/link/Link.js.map +1 -1
  115. package/dist/link/SkipToMainContent.js +19 -21
  116. package/dist/link/SkipToMainContent.js.map +1 -1
  117. package/dist/list/List.js.map +1 -1
  118. package/dist/list/ListItem.js.map +1 -1
  119. package/dist/list/ListItemAddon.js.map +1 -1
  120. package/dist/list/ListItemLink.js.map +1 -1
  121. package/dist/list/ListSubheader.js.map +1 -1
  122. package/dist/list/getListItemHeight.js.map +1 -1
  123. package/dist/list/listItemStyles.js.map +1 -1
  124. package/dist/list/types.js.map +1 -1
  125. package/dist/media-queries/AppSizeProvider.d.ts +2 -0
  126. package/dist/media-queries/AppSizeProvider.js +3 -2
  127. package/dist/media-queries/AppSizeProvider.js.map +1 -1
  128. package/dist/media-queries/appSize.d.ts +3 -0
  129. package/dist/media-queries/appSize.js +3 -1
  130. package/dist/media-queries/appSize.js.map +1 -1
  131. package/dist/media-queries/config.d.ts +11 -0
  132. package/dist/media-queries/config.js +26 -0
  133. package/dist/media-queries/config.js.map +1 -0
  134. package/dist/menu/DropdownMenu.js.map +1 -1
  135. package/dist/menu/Menu.js.map +1 -1
  136. package/dist/menu/MenuItemButton.js.map +1 -1
  137. package/dist/menu/MenuItemFileInput.js.map +1 -1
  138. package/dist/menu/MenuItemInputToggle.js.map +1 -1
  139. package/dist/menu/MenuItemSeparator.js.map +1 -1
  140. package/dist/menu/MenuVisibilityProvider.js.map +1 -1
  141. package/dist/menu/MenuWidget.js.map +1 -1
  142. package/dist/menu/useContextMenu.js.map +1 -1
  143. package/dist/movement/types.d.ts +28 -3
  144. package/dist/movement/types.js.map +1 -1
  145. package/dist/movement/useKeyboardMovementProvider.js +96 -47
  146. package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
  147. package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
  148. package/dist/navigation/NavItem.js.map +1 -1
  149. package/dist/navigation/NavItemButton.js.map +1 -1
  150. package/dist/navigation/NavItemLink.js.map +1 -1
  151. package/dist/navigation/getTableOfContentsHeadings.js.map +1 -1
  152. package/dist/navigation/types.js.map +1 -1
  153. package/dist/overlay/Overlay.js.map +1 -1
  154. package/dist/positioning/createHorizontalPosition.js.map +1 -1
  155. package/dist/positioning/createVerticalPosition.js.map +1 -1
  156. package/dist/positioning/useFixedPositioning.js.map +1 -1
  157. package/dist/progress/CircularProgress.js.map +1 -1
  158. package/dist/progress/LinearProgress.js.map +1 -1
  159. package/dist/progress/linearProgressStyles.js.map +1 -1
  160. package/dist/responsive-item/ResponsiveItem.js.map +1 -1
  161. package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
  162. package/dist/searching/caseInsensitive.js.map +1 -1
  163. package/dist/segmented-button/SegmentedButton.js.map +1 -1
  164. package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
  165. package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
  166. package/dist/sheet/Sheet.js.map +1 -1
  167. package/dist/snackbar/Toast.js.map +1 -1
  168. package/dist/spinbutton/SpinButton.d.ts +16 -0
  169. package/dist/spinbutton/SpinButton.js +55 -0
  170. package/dist/spinbutton/SpinButton.js.map +1 -0
  171. package/dist/spinbutton/SpinButtonGroupProvider.d.ts +17 -0
  172. package/dist/spinbutton/SpinButtonGroupProvider.js +19 -0
  173. package/dist/spinbutton/SpinButtonGroupProvider.js.map +1 -0
  174. package/dist/spinbutton/defaults.d.ts +9 -0
  175. package/dist/spinbutton/defaults.js +25 -0
  176. package/dist/spinbutton/defaults.js.map +1 -0
  177. package/dist/spinbutton/types.d.ts +324 -0
  178. package/dist/spinbutton/types.js +5 -0
  179. package/dist/spinbutton/types.js.map +1 -0
  180. package/dist/spinbutton/useSpinButton.d.ts +5 -0
  181. package/dist/spinbutton/useSpinButton.js +260 -0
  182. package/dist/spinbutton/useSpinButton.js.map +1 -0
  183. package/dist/spinbutton/useSpinButtonGroupProvider.d.ts +27 -0
  184. package/dist/spinbutton/useSpinButtonGroupProvider.js +49 -0
  185. package/dist/spinbutton/useSpinButtonGroupProvider.js.map +1 -0
  186. package/dist/spinbutton/utils/deselectNode.d.ts +5 -0
  187. package/dist/spinbutton/utils/deselectNode.js +17 -0
  188. package/dist/spinbutton/utils/deselectNode.js.map +1 -0
  189. package/dist/spinbutton/utils/resolveInputEvent.d.ts +30 -0
  190. package/dist/spinbutton/utils/resolveInputEvent.js +53 -0
  191. package/dist/spinbutton/utils/resolveInputEvent.js.map +1 -0
  192. package/dist/spinbutton/utils/selectNode.d.ts +5 -0
  193. package/dist/spinbutton/utils/selectNode.js +15 -0
  194. package/dist/spinbutton/utils/selectNode.js.map +1 -0
  195. package/dist/table/StickyTableSection.js.map +1 -1
  196. package/dist/table/Table.js.map +1 -1
  197. package/dist/table/TableBody.js.map +1 -1
  198. package/dist/table/TableCellContent.js.map +1 -1
  199. package/dist/table/TableCheckbox.js.map +1 -1
  200. package/dist/table/TableFooter.js.map +1 -1
  201. package/dist/table/TableHeader.js.map +1 -1
  202. package/dist/table/TableRadio.js.map +1 -1
  203. package/dist/table/TableRow.js.map +1 -1
  204. package/dist/table/useStickyTableSection.js.map +1 -1
  205. package/dist/tabs/SimpleTabPanel.js.map +1 -1
  206. package/dist/tabs/SimpleTabPanels.js.map +1 -1
  207. package/dist/tabs/Tab.js.map +1 -1
  208. package/dist/tabs/TabList.js.map +1 -1
  209. package/dist/tabs/TabListScrollButton.js.map +1 -1
  210. package/dist/tabs/useMaxTabPanelHeight.js.map +1 -1
  211. package/dist/test-utils/data-testid.js.map +1 -1
  212. package/dist/test-utils/mocks/match-media.js +5 -5
  213. package/dist/test-utils/mocks/match-media.js.map +1 -1
  214. package/dist/test-utils/vitest/timers.d.ts +1 -1
  215. package/dist/test-utils/vitest/timers.js +1 -1
  216. package/dist/test-utils/vitest/timers.js.map +1 -1
  217. package/dist/tooltip/Tooltip.js.map +1 -1
  218. package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
  219. package/dist/tooltip/useTooltip.js.map +1 -1
  220. package/dist/transition/CSSTransition.js.map +1 -1
  221. package/dist/transition/Collapse.js.map +1 -1
  222. package/dist/transition/CrossFade.js.map +1 -1
  223. package/dist/transition/ScaleTransition.js.map +1 -1
  224. package/dist/transition/SkeletonPlaceholder.js.map +1 -1
  225. package/dist/transition/Slide.js.map +1 -1
  226. package/dist/transition/SlideContainer.js.map +1 -1
  227. package/dist/transition/types.js.map +1 -1
  228. package/dist/transition/useCollapseTransition.js.map +1 -1
  229. package/dist/transition/useCrossFadeTransition.js.map +1 -1
  230. package/dist/transition/useMaxWidthTransition.js.map +1 -1
  231. package/dist/transition/useScaleTransition.js.map +1 -1
  232. package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
  233. package/dist/tree/Tree.js.map +1 -1
  234. package/dist/tree/TreeItem.js.map +1 -1
  235. package/dist/tree/TreeProvider.js.map +1 -1
  236. package/dist/tree/styles.js.map +1 -1
  237. package/dist/tree/types.js.map +1 -1
  238. package/dist/tree/useTreeMovement.js.map +1 -1
  239. package/dist/typography/HighlightTextMark.js.map +1 -1
  240. package/dist/typography/Mark.js.map +1 -1
  241. package/dist/typography/TextContainer.js.map +1 -1
  242. package/dist/typography/Typography.js.map +1 -1
  243. package/dist/typography/_typography.scss +0 -1
  244. package/dist/useElementSize.js.map +1 -1
  245. package/dist/useIntersectionObserver.js.map +1 -1
  246. package/dist/useMutationObserver.js.map +1 -1
  247. package/dist/useWindowSize.js.map +1 -1
  248. package/dist/utils/getNumberOfDigits.d.ts +7 -0
  249. package/dist/utils/getNumberOfDigits.js +11 -0
  250. package/dist/utils/getNumberOfDigits.js.map +1 -0
  251. package/dist/utils/nearest.js +2 -1
  252. package/dist/utils/nearest.js.map +1 -1
  253. package/dist/utils/useDevEffect.d.ts +7 -0
  254. package/dist/utils/useDevEffect.js +8 -0
  255. package/dist/utils/useDevEffect.js.map +1 -0
  256. package/dist/window-splitter/WindowSplitter.js +3 -2
  257. package/dist/window-splitter/WindowSplitter.js.map +1 -1
  258. package/dist/window-splitter/_window-splitter.scss +60 -12
  259. package/dist/window-splitter/styles.d.ts +9 -0
  260. package/dist/window-splitter/styles.js +3 -2
  261. package/dist/window-splitter/styles.js.map +1 -1
  262. package/dist/window-splitter/useWindowSplitter.js.map +1 -1
  263. package/package.json +38 -30
  264. package/src/CoreProviders.tsx +1 -0
  265. package/src/app-bar/AppBar.tsx +1 -2
  266. package/src/app-bar/AppBarTitle.tsx +1 -2
  267. package/src/autocomplete/AutocompleteListboxChildren.tsx +3 -1
  268. package/src/autocomplete/types.ts +24 -19
  269. package/src/autocomplete/utils.ts +9 -6
  270. package/src/avatar/Avatar.tsx +2 -1
  271. package/src/box/styles.ts +39 -0
  272. package/src/button/Button.tsx +2 -1
  273. package/src/button/FloatingActionButton.tsx +2 -1
  274. package/src/card/Card.tsx +2 -1
  275. package/src/card/CardContent.tsx +1 -2
  276. package/src/card/ClickableCard.tsx +1 -2
  277. package/src/chip/Chip.tsx +2 -1
  278. package/src/datetime/NativeDateField.tsx +2 -1
  279. package/src/datetime/NativeTimeField.tsx +2 -1
  280. package/src/datetime/useDateField.ts +13 -8
  281. package/src/datetime/useTimeField.ts +13 -8
  282. package/src/dialog/Dialog.tsx +2 -1
  283. package/src/dialog/DialogContainer.tsx +1 -2
  284. package/src/dialog/DialogContent.tsx +1 -2
  285. package/src/dialog/DialogFooter.tsx +1 -2
  286. package/src/divider/Divider.tsx +1 -2
  287. package/src/draggable/useDraggable.ts +4 -4
  288. package/src/draggable/utils.ts +4 -2
  289. package/src/expansion-panel/ExpansionPanelHeader.tsx +1 -2
  290. package/src/files/FileInput.tsx +2 -1
  291. package/src/files/useFileUpload.ts +6 -6
  292. package/src/files/validation.ts +1 -2
  293. package/src/focus/useFocusContainer.ts +4 -4
  294. package/src/form/Fieldset.tsx +25 -3
  295. package/src/form/FormMessageContainer.tsx +1 -2
  296. package/src/form/FormMessageCounter.tsx +1 -2
  297. package/src/form/InputToggle.tsx +3 -3
  298. package/src/form/Legend.tsx +55 -10
  299. package/src/form/Listbox.tsx +1 -2
  300. package/src/form/ListboxProvider.ts +3 -2
  301. package/src/form/NativeSelect.tsx +2 -1
  302. package/src/form/Password.tsx +4 -2
  303. package/src/form/ResizingTextAreaWrapper.tsx +1 -2
  304. package/src/form/Select.tsx +2 -1
  305. package/src/form/Slider.tsx +2 -1
  306. package/src/form/SliderContainer.tsx +1 -2
  307. package/src/form/SliderThumb.tsx +6 -3
  308. package/src/form/SliderTrack.tsx +2 -1
  309. package/src/form/SliderValueMarks.tsx +1 -2
  310. package/src/form/Switch.tsx +2 -1
  311. package/src/form/TextArea.tsx +1 -2
  312. package/src/form/TextField.tsx +2 -1
  313. package/src/form/TextFieldContainer.tsx +1 -2
  314. package/src/form/fieldsetStyles.ts +18 -3
  315. package/src/form/inputToggleStyles.ts +4 -2
  316. package/src/form/labelStyles.ts +1 -1
  317. package/src/form/legendStyles.ts +132 -0
  318. package/src/form/selectUtils.ts +3 -2
  319. package/src/form/textFieldContainerStyles.ts +1 -2
  320. package/src/form/types.ts +35 -17
  321. package/src/form/useCheckboxGroup.ts +3 -2
  322. package/src/form/useCombobox.ts +8 -3
  323. package/src/form/useNumberField.ts +36 -35
  324. package/src/form/useRangeSlider.ts +1 -2
  325. package/src/form/useSlider.ts +1 -2
  326. package/src/form/useTextField.ts +9 -4
  327. package/src/hoverMode/useHoverMode.ts +4 -8
  328. package/src/icon/FontIcon.tsx +1 -2
  329. package/src/icon/IconRotator.tsx +1 -2
  330. package/src/icon/MaterialIcon.tsx +2 -1
  331. package/src/icon/MaterialSymbol.tsx +2 -1
  332. package/src/icon/SVGIcon.tsx +1 -2
  333. package/src/icon/config.tsx +10 -7
  334. package/src/icon/materialConfig.ts +1 -2
  335. package/src/icon/styles.ts +1 -2
  336. package/src/interaction/UserInteractionModeProvider.tsx +9 -4
  337. package/src/interaction/types.ts +1 -2
  338. package/src/interaction/useElementInteraction.tsx +3 -2
  339. package/src/layout/LayoutAppBar.tsx +6 -6
  340. package/src/layout/LayoutNav.tsx +2 -1
  341. package/src/layout/LayoutWindowSplitter.tsx +2 -1
  342. package/src/layout/Main.tsx +1 -2
  343. package/src/layout/useExpandableLayout.ts +63 -5
  344. package/src/layout/useHorizontalLayoutTransition.ts +1 -2
  345. package/src/layout/useLayoutTree.ts +2 -2
  346. package/src/layout/useLayoutWindowSplitter.ts +6 -6
  347. package/src/layout/useResizableLayout.ts +3 -6
  348. package/src/link/Link.tsx +1 -2
  349. package/src/link/SkipToMainContent.tsx +20 -23
  350. package/src/list/List.tsx +1 -2
  351. package/src/list/ListItem.tsx +2 -1
  352. package/src/list/ListItemAddon.tsx +2 -1
  353. package/src/list/ListItemLink.tsx +2 -1
  354. package/src/list/ListSubheader.tsx +1 -2
  355. package/src/list/getListItemHeight.ts +8 -9
  356. package/src/list/listItemStyles.ts +1 -2
  357. package/src/list/types.ts +1 -2
  358. package/src/media-queries/AppSizeProvider.tsx +8 -10
  359. package/src/media-queries/appSize.ts +3 -0
  360. package/src/media-queries/config.ts +41 -0
  361. package/src/menu/DropdownMenu.tsx +4 -5
  362. package/src/menu/Menu.tsx +2 -1
  363. package/src/menu/MenuItemButton.tsx +1 -2
  364. package/src/menu/MenuItemFileInput.tsx +2 -1
  365. package/src/menu/MenuItemInputToggle.tsx +3 -3
  366. package/src/menu/MenuItemSeparator.tsx +2 -1
  367. package/src/menu/MenuVisibilityProvider.tsx +4 -2
  368. package/src/menu/MenuWidget.tsx +1 -2
  369. package/src/menu/useContextMenu.ts +4 -2
  370. package/src/movement/types.ts +52 -13
  371. package/src/movement/useKeyboardMovementProvider.ts +77 -38
  372. package/src/navigation/CollapsibleNavGroup.tsx +1 -2
  373. package/src/navigation/NavItem.tsx +1 -2
  374. package/src/navigation/NavItemButton.tsx +2 -1
  375. package/src/navigation/NavItemLink.tsx +2 -1
  376. package/src/navigation/getTableOfContentsHeadings.ts +1 -2
  377. package/src/navigation/types.ts +1 -2
  378. package/src/overlay/Overlay.tsx +2 -1
  379. package/src/positioning/createHorizontalPosition.ts +10 -12
  380. package/src/positioning/createVerticalPosition.ts +10 -11
  381. package/src/positioning/useFixedPositioning.ts +6 -3
  382. package/src/progress/CircularProgress.tsx +2 -1
  383. package/src/progress/LinearProgress.tsx +2 -1
  384. package/src/progress/linearProgressStyles.ts +1 -2
  385. package/src/responsive-item/ResponsiveItem.tsx +1 -2
  386. package/src/responsive-item/ResponsiveItemOverlay.tsx +2 -1
  387. package/src/searching/caseInsensitive.ts +2 -4
  388. package/src/segmented-button/SegmentedButton.tsx +2 -1
  389. package/src/segmented-button/SegmentedButtonContainer.tsx +2 -1
  390. package/src/segmented-button/segmentedButtonStyles.ts +1 -2
  391. package/src/sheet/Sheet.tsx +1 -2
  392. package/src/snackbar/Toast.tsx +2 -1
  393. package/src/spinbutton/SpinButton.tsx +98 -0
  394. package/src/spinbutton/SpinButtonGroupProvider.tsx +32 -0
  395. package/src/spinbutton/defaults.ts +45 -0
  396. package/src/spinbutton/types.ts +413 -0
  397. package/src/spinbutton/useSpinButton.ts +311 -0
  398. package/src/spinbutton/useSpinButtonGroupProvider.ts +104 -0
  399. package/src/spinbutton/utils/deselectNode.ts +17 -0
  400. package/src/spinbutton/utils/resolveInputEvent.ts +112 -0
  401. package/src/spinbutton/utils/selectNode.ts +15 -0
  402. package/src/table/StickyTableSection.tsx +2 -1
  403. package/src/table/Table.tsx +1 -2
  404. package/src/table/TableBody.tsx +2 -1
  405. package/src/table/TableCellContent.tsx +1 -2
  406. package/src/table/TableCheckbox.tsx +1 -2
  407. package/src/table/TableFooter.tsx +1 -2
  408. package/src/table/TableHeader.tsx +1 -2
  409. package/src/table/TableRadio.tsx +1 -2
  410. package/src/table/TableRow.tsx +1 -2
  411. package/src/table/useStickyTableSection.tsx +1 -2
  412. package/src/tabs/SimpleTabPanel.tsx +2 -1
  413. package/src/tabs/SimpleTabPanels.tsx +2 -1
  414. package/src/tabs/Tab.tsx +3 -6
  415. package/src/tabs/TabList.tsx +2 -1
  416. package/src/tabs/TabListScrollButton.tsx +1 -2
  417. package/src/tabs/useMaxTabPanelHeight.ts +7 -4
  418. package/src/test-utils/data-testid.ts +1 -2
  419. package/src/test-utils/mocks/match-media.ts +5 -10
  420. package/src/test-utils/vitest/timers.ts +1 -1
  421. package/src/tooltip/Tooltip.tsx +2 -1
  422. package/src/tooltip/TooltipHoverModeProvider.tsx +1 -2
  423. package/src/tooltip/useTooltip.ts +9 -5
  424. package/src/transition/CSSTransition.tsx +2 -1
  425. package/src/transition/Collapse.tsx +4 -2
  426. package/src/transition/CrossFade.tsx +2 -1
  427. package/src/transition/ScaleTransition.tsx +2 -1
  428. package/src/transition/SkeletonPlaceholder.tsx +1 -2
  429. package/src/transition/Slide.tsx +2 -1
  430. package/src/transition/SlideContainer.tsx +1 -2
  431. package/src/transition/types.ts +15 -16
  432. package/src/transition/useCollapseTransition.ts +6 -5
  433. package/src/transition/useCrossFadeTransition.ts +3 -2
  434. package/src/transition/useMaxWidthTransition.ts +1 -2
  435. package/src/transition/useScaleTransition.ts +3 -2
  436. package/src/transition/useSkeletonPlaceholder.ts +1 -2
  437. package/src/tree/Tree.tsx +2 -1
  438. package/src/tree/TreeItem.tsx +2 -1
  439. package/src/tree/TreeProvider.tsx +4 -4
  440. package/src/tree/styles.ts +1 -2
  441. package/src/tree/types.ts +1 -2
  442. package/src/tree/useTreeMovement.ts +1 -2
  443. package/src/typography/HighlightTextMark.tsx +1 -2
  444. package/src/typography/Mark.tsx +1 -2
  445. package/src/typography/TextContainer.tsx +1 -2
  446. package/src/typography/Typography.tsx +1 -2
  447. package/src/useElementSize.ts +7 -4
  448. package/src/useIntersectionObserver.ts +3 -2
  449. package/src/useMutationObserver.ts +3 -2
  450. package/src/useWindowSize.ts +4 -2
  451. package/src/utils/getNumberOfDigits.ts +18 -0
  452. package/src/utils/nearest.ts +2 -1
  453. package/src/utils/useDevEffect.ts +9 -0
  454. package/src/window-splitter/WindowSplitter.tsx +5 -2
  455. package/src/window-splitter/styles.ts +13 -2
  456. package/src/window-splitter/useWindowSplitter.ts +3 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/CollapsibleNavGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport {\n type CollapseTransitionHookOptions,\n useCollapseTransition,\n} from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { NavGroup, type NavGroupProps } from \"./NavGroup.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport {\n NavItemButton,\n type NavItemButtonRotatorProps,\n} from \"./NavItemButton.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface CollapsibleNavGroupProps\n extends NavGroupProps,\n NavItemButtonRotatorProps {\n liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;\n buttonProps?: PropsWithRef<ButtonProps>;\n collapseOptions?: Omit<\n CollapseTransitionHookOptions<HTMLUListElement>,\n \"nodeRef\" | \"className\" | \"transitionIn\"\n >;\n\n /**\n * The children to render in the {@link NavItemButton} that toggles the\n * collapsed state\n */\n buttonChildren: ReactNode;\n\n /**\n * The content that should be rendered in the non-collapsed {@link NavGroup}.\n */\n children: ReactNode;\n\n collapsed: boolean;\n toggleCollapsed: () => void;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const CollapsibleNavGroup = forwardRef<\n HTMLUListElement,\n CollapsibleNavGroupProps\n>(function CollapsibleNavGroup(props, ref) {\n const {\n liProps,\n buttonProps,\n buttonChildren,\n icon,\n iconRotatorProps,\n disableIconRotator,\n className,\n children,\n collapsed,\n toggleCollapsed,\n collapseOptions,\n ...remaining\n } = props;\n\n const { rendered, elementProps } = useCollapseTransition({\n ...collapseOptions,\n nodeRef: ref,\n className,\n transitionIn: !collapsed,\n });\n const onButtonClick = buttonProps?.onClick ?? noop;\n\n return (\n <NavItem {...liProps}>\n <NavItemButton\n {...buttonProps}\n onClick={(event) => {\n onButtonClick(event);\n toggleCollapsed();\n }}\n collapsed={collapsed}\n icon={icon}\n iconRotatorProps={iconRotatorProps}\n disableIconRotator={disableIconRotator}\n >\n {buttonChildren}\n </NavItemButton>\n {rendered && (\n <NavGroup {...remaining} {...elementProps}>\n {children}\n </NavGroup>\n )}\n </NavItem>\n );\n});\n"],"names":["forwardRef","useCollapseTransition","NavGroup","NavItem","NavItemButton","noop","CollapsibleNavGroup","props","ref","liProps","buttonProps","buttonChildren","icon","iconRotatorProps","disableIconRotator","className","children","collapsed","toggleCollapsed","collapseOptions","remaining","rendered","elementProps","nodeRef","transitionIn","onButtonClick","onClick","event"],"mappings":"AAAA;;AAEA,SAAgDA,UAAU,QAAQ,QAAQ;AAG1E,SAEEC,qBAAqB,QAChB,yCAAyC;AAEhD,SAASC,QAAQ,QAA4B,gBAAgB;AAC7D,SAASC,OAAO,QAAQ,eAAe;AACvC,SACEC,aAAa,QAER,qBAAqB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA8BA;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBN,WAGjC,SAASM,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,OAAO,EACPC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,eAAe,EACf,GAAGC,WACJ,GAAGb;IAEJ,MAAM,EAAEc,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,sBAAsB;QACvD,GAAGkB,eAAe;QAClBI,SAASf;QACTO;QACAS,cAAc,CAACP;IACjB;IACA,MAAMQ,gBAAgBf,aAAagB,WAAWrB;IAE9C,qBACE,MAACF;QAAS,GAAGM,OAAO;;0BAClB,KAACL;gBACE,GAAGM,WAAW;gBACfgB,SAAS,CAACC;oBACRF,cAAcE;oBACdT;gBACF;gBACAD,WAAWA;gBACXL,MAAMA;gBACNC,kBAAkBA;gBAClBC,oBAAoBA;0BAEnBH;;YAEFU,0BACC,KAACnB;gBAAU,GAAGkB,SAAS;gBAAG,GAAGE,YAAY;0BACtCN;;;;AAKX,GAAG"}
1
+ {"version":3,"sources":["../../src/navigation/CollapsibleNavGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport {\n type CollapseTransitionHookOptions,\n useCollapseTransition,\n} from \"../transition/useCollapseTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { NavGroup, type NavGroupProps } from \"./NavGroup.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport {\n NavItemButton,\n type NavItemButtonRotatorProps,\n} from \"./NavItemButton.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface CollapsibleNavGroupProps\n extends NavGroupProps, NavItemButtonRotatorProps {\n liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;\n buttonProps?: PropsWithRef<ButtonProps>;\n collapseOptions?: Omit<\n CollapseTransitionHookOptions<HTMLUListElement>,\n \"nodeRef\" | \"className\" | \"transitionIn\"\n >;\n\n /**\n * The children to render in the {@link NavItemButton} that toggles the\n * collapsed state\n */\n buttonChildren: ReactNode;\n\n /**\n * The content that should be rendered in the non-collapsed {@link NavGroup}.\n */\n children: ReactNode;\n\n collapsed: boolean;\n toggleCollapsed: () => void;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const CollapsibleNavGroup = forwardRef<\n HTMLUListElement,\n CollapsibleNavGroupProps\n>(function CollapsibleNavGroup(props, ref) {\n const {\n liProps,\n buttonProps,\n buttonChildren,\n icon,\n iconRotatorProps,\n disableIconRotator,\n className,\n children,\n collapsed,\n toggleCollapsed,\n collapseOptions,\n ...remaining\n } = props;\n\n const { rendered, elementProps } = useCollapseTransition({\n ...collapseOptions,\n nodeRef: ref,\n className,\n transitionIn: !collapsed,\n });\n const onButtonClick = buttonProps?.onClick ?? noop;\n\n return (\n <NavItem {...liProps}>\n <NavItemButton\n {...buttonProps}\n onClick={(event) => {\n onButtonClick(event);\n toggleCollapsed();\n }}\n collapsed={collapsed}\n icon={icon}\n iconRotatorProps={iconRotatorProps}\n disableIconRotator={disableIconRotator}\n >\n {buttonChildren}\n </NavItemButton>\n {rendered && (\n <NavGroup {...remaining} {...elementProps}>\n {children}\n </NavGroup>\n )}\n </NavItem>\n );\n});\n"],"names":["forwardRef","useCollapseTransition","NavGroup","NavItem","NavItemButton","noop","CollapsibleNavGroup","props","ref","liProps","buttonProps","buttonChildren","icon","iconRotatorProps","disableIconRotator","className","children","collapsed","toggleCollapsed","collapseOptions","remaining","rendered","elementProps","nodeRef","transitionIn","onButtonClick","onClick","event"],"mappings":"AAAA;;AAEA,SAAgDA,UAAU,QAAQ,QAAQ;AAG1E,SAEEC,qBAAqB,QAChB,yCAAyC;AAEhD,SAASC,QAAQ,QAA4B,gBAAgB;AAC7D,SAASC,OAAO,QAAQ,eAAe;AACvC,SACEC,aAAa,QAER,qBAAqB;AAE5B,MAAMC,OAAO;AACX,aAAa;AACf;AA6BA;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBN,WAGjC,SAASM,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,OAAO,EACPC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,eAAe,EACf,GAAGC,WACJ,GAAGb;IAEJ,MAAM,EAAEc,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,sBAAsB;QACvD,GAAGkB,eAAe;QAClBI,SAASf;QACTO;QACAS,cAAc,CAACP;IACjB;IACA,MAAMQ,gBAAgBf,aAAagB,WAAWrB;IAE9C,qBACE,MAACF;QAAS,GAAGM,OAAO;;0BAClB,KAACL;gBACE,GAAGM,WAAW;gBACfgB,SAAS,CAACC;oBACRF,cAAcE;oBACdT;gBACF;gBACAD,WAAWA;gBACXL,MAAMA;gBACNC,kBAAkBA;gBAClBC,oBAAoBA;0BAEnBH;;YAEFU,0BACC,KAACnB;gBAAU,GAAGkB,SAAS;gBAAG,GAAGE,YAAY;0BACtCN;;;;AAKX,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type NavItemClassNameOptions, navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties\n * augmentation.\n */\nexport interface NavItemProps\n extends LiHTMLAttributes<HTMLLIElement>,\n NavItemClassNameOptions {\n children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n function NavItem(props, ref) {\n const { className, children, ...remaining } = props;\n return (\n <li {...remaining} ref={ref} className={navItem({ className })}>\n {children}\n </li>\n );\n }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAAuCC,OAAO,QAAQ,qBAAqB;AAa3E;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type NavItemClassNameOptions, navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties\n * augmentation.\n */\nexport interface NavItemProps\n extends LiHTMLAttributes<HTMLLIElement>, NavItemClassNameOptions {\n children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n function NavItem(props, ref) {\n const { className, children, ...remaining } = props;\n return (\n <li {...remaining} ref={ref} className={navItem({ className })}>\n {children}\n </li>\n );\n }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAAuCC,OAAO,QAAQ,qBAAqB;AAY3E;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/NavItemButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type MouseEventHandler, type ReactNode, forwardRef } from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { IconRotator, type IconRotatorBaseProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { navItemContent } from \"./navItemStyles.js\";\nimport { type NavItemContentProps } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonRotatorProps {\n /** @defaultValue `getIcon(\"dropdown\")` */\n icon?: ReactNode;\n iconRotatorProps?: Omit<IconRotatorBaseProps, \"rotated\">;\n disableIconRotator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonProps\n extends Omit<ButtonProps, \"children\">,\n NavItemButtonRotatorProps,\n NavItemContentProps {\n onClick: MouseEventHandler<HTMLButtonElement>;\n collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(\n function NavItemButton(props, ref) {\n const {\n className,\n collapsed,\n icon,\n iconRotatorProps,\n disableIconRotator,\n children,\n beforeAddon,\n afterAddon,\n spanProps,\n onBlur,\n onContextMenu,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchEnd,\n onTouchStart,\n tooltipOptions,\n ...remaining\n } = props;\n\n const { elementProps, tooltipProps, overflowRef } = useTooltip({\n overflowOnly: true,\n defaultPosition: \"right\",\n ...tooltipOptions,\n onBlur,\n onContextMenu,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchEnd,\n onTouchStart,\n });\n\n return (\n <>\n <Button\n aria-expanded={!collapsed}\n {...remaining}\n {...elementProps}\n ref={ref}\n className={navItemContent({ className })}\n >\n {beforeAddon}\n <span\n {...spanProps}\n ref={overflowRef}\n className={cssUtils({\n className: spanProps?.className,\n textOverflow: \"ellipsis\",\n })}\n >\n {children}\n </span>\n {afterAddon}\n {!disableIconRotator && (\n <IconRotator {...iconRotatorProps} rotated={!collapsed}>\n {getIcon(\"dropdown\", icon)}\n </IconRotator>\n )}\n </Button>\n <Tooltip {...tooltipProps}>{children}</Tooltip>\n </>\n );\n }\n);\n"],"names":["forwardRef","Button","cssUtils","IconRotator","getIcon","Tooltip","useTooltip","navItemContent","NavItemButton","props","ref","className","collapsed","icon","iconRotatorProps","disableIconRotator","children","beforeAddon","afterAddon","spanProps","onBlur","onContextMenu","onFocus","onMouseEnter","onMouseLeave","onTouchEnd","onTouchStart","tooltipOptions","remaining","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","aria-expanded","span","textOverflow","rotated"],"mappings":"AAAA;;AAEA,SAAiDA,UAAU,QAAQ,QAAQ;AAE3E,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAmC,yBAAyB;AAChF,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,qBAAqB;AAwBpD;;;;;CAKC,GACD,OAAO,MAAMC,8BAAgBR,WAC3B,SAASQ,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,cAAc,EACd,GAAGC,WACJ,GAAGnB;IAEJ,MAAM,EAAEoB,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGzB,WAAW;QAC7D0B,cAAc;QACdC,iBAAiB;QACjB,GAAGN,cAAc;QACjBP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE;;0BACE,MAACzB;gBACCiC,iBAAe,CAACtB;gBACf,GAAGgB,SAAS;gBACZ,GAAGC,YAAY;gBAChBnB,KAAKA;gBACLC,WAAWJ,eAAe;oBAAEI;gBAAU;;oBAErCM;kCACD,KAACkB;wBACE,GAAGhB,SAAS;wBACbT,KAAKqB;wBACLpB,WAAWT,SAAS;4BAClBS,WAAWQ,WAAWR;4BACtByB,cAAc;wBAChB;kCAECpB;;oBAEFE;oBACA,CAACH,oCACA,KAACZ;wBAAa,GAAGW,gBAAgB;wBAAEuB,SAAS,CAACzB;kCAC1CR,QAAQ,YAAYS;;;;0BAI3B,KAACR;gBAAS,GAAGyB,YAAY;0BAAGd;;;;AAGlC,GACA"}
1
+ {"version":3,"sources":["../../src/navigation/NavItemButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type MouseEventHandler, type ReactNode, forwardRef } from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { IconRotator, type IconRotatorBaseProps } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { navItemContent } from \"./navItemStyles.js\";\nimport { type NavItemContentProps } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonRotatorProps {\n /** @defaultValue `getIcon(\"dropdown\")` */\n icon?: ReactNode;\n iconRotatorProps?: Omit<IconRotatorBaseProps, \"rotated\">;\n disableIconRotator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemButtonProps\n extends\n Omit<ButtonProps, \"children\">,\n NavItemButtonRotatorProps,\n NavItemContentProps {\n onClick: MouseEventHandler<HTMLButtonElement>;\n collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItemButton = forwardRef<HTMLButtonElement, NavItemButtonProps>(\n function NavItemButton(props, ref) {\n const {\n className,\n collapsed,\n icon,\n iconRotatorProps,\n disableIconRotator,\n children,\n beforeAddon,\n afterAddon,\n spanProps,\n onBlur,\n onContextMenu,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchEnd,\n onTouchStart,\n tooltipOptions,\n ...remaining\n } = props;\n\n const { elementProps, tooltipProps, overflowRef } = useTooltip({\n overflowOnly: true,\n defaultPosition: \"right\",\n ...tooltipOptions,\n onBlur,\n onContextMenu,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchEnd,\n onTouchStart,\n });\n\n return (\n <>\n <Button\n aria-expanded={!collapsed}\n {...remaining}\n {...elementProps}\n ref={ref}\n className={navItemContent({ className })}\n >\n {beforeAddon}\n <span\n {...spanProps}\n ref={overflowRef}\n className={cssUtils({\n className: spanProps?.className,\n textOverflow: \"ellipsis\",\n })}\n >\n {children}\n </span>\n {afterAddon}\n {!disableIconRotator && (\n <IconRotator {...iconRotatorProps} rotated={!collapsed}>\n {getIcon(\"dropdown\", icon)}\n </IconRotator>\n )}\n </Button>\n <Tooltip {...tooltipProps}>{children}</Tooltip>\n </>\n );\n }\n);\n"],"names":["forwardRef","Button","cssUtils","IconRotator","getIcon","Tooltip","useTooltip","navItemContent","NavItemButton","props","ref","className","collapsed","icon","iconRotatorProps","disableIconRotator","children","beforeAddon","afterAddon","spanProps","onBlur","onContextMenu","onFocus","onMouseEnter","onMouseLeave","onTouchEnd","onTouchStart","tooltipOptions","remaining","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","aria-expanded","span","textOverflow","rotated"],"mappings":"AAAA;;AAEA,SAAiDA,UAAU,QAAQ,QAAQ;AAE3E,SAASC,MAAM,QAA0B,sBAAsB;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAmC,yBAAyB;AAChF,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,qBAAqB;AAyBpD;;;;;CAKC,GACD,OAAO,MAAMC,8BAAgBR,WAC3B,SAASQ,cAAcC,KAAK,EAAEC,GAAG;IAC/B,MAAM,EACJC,SAAS,EACTC,SAAS,EACTC,IAAI,EACJC,gBAAgB,EAChBC,kBAAkB,EAClBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,aAAa,EACbC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,cAAc,EACd,GAAGC,WACJ,GAAGnB;IAEJ,MAAM,EAAEoB,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGzB,WAAW;QAC7D0B,cAAc;QACdC,iBAAiB;QACjB,GAAGN,cAAc;QACjBP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE;;0BACE,MAACzB;gBACCiC,iBAAe,CAACtB;gBACf,GAAGgB,SAAS;gBACZ,GAAGC,YAAY;gBAChBnB,KAAKA;gBACLC,WAAWJ,eAAe;oBAAEI;gBAAU;;oBAErCM;kCACD,KAACkB;wBACE,GAAGhB,SAAS;wBACbT,KAAKqB;wBACLpB,WAAWT,SAAS;4BAClBS,WAAWQ,WAAWR;4BACtByB,cAAc;wBAChB;kCAECpB;;oBAEFE;oBACA,CAACH,oCACA,KAACZ;wBAAa,GAAGW,gBAAgB;wBAAEuB,SAAS,CAACzB;kCAC1CR,QAAQ,YAAYS;;;;0BAI3B,KAACR;gBAAS,GAAGyB,YAAY;0BAAGd;;;;AAGlC,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/NavItemLink.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AnchorHTMLAttributes,\n type LiHTMLAttributes,\n forwardRef,\n useEffect,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport { navItemLink } from \"./navItemStyles.js\";\nimport {\n type NavItemContentProps,\n type NavigationLinkComponent,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkProps\n extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\">,\n NavItemContentProps,\n ComponentWithRippleProps {\n /** @defaultValue `\"a\"` */\n as?: NavigationLinkComponent;\n href: string;\n\n /**\n * Any additional props to provide the wrapping `<li>` element such as\n * `style`, `className`, and `ref`.\n */\n liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;\n\n /**\n * Set this to `true` if the link matches the current `pathname`. This will\n * enable `aria-current=\"true\"` and apply active styling.\n */\n active: boolean;\n\n /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n activeClassName?: string;\n\n /** @defaultValue `!to && !href` */\n disabled?: boolean;\n\n /**\n * Set this to `true` to prevent this item from scrolling into view when it\n * becomes active. It is generally recommended to keep this `false` unless a\n * custom implementation has been added so that when the temporary navigation\n * will show the active route.\n *\n * @defaultValue `false`\n */\n disableScrollIntoView?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(\n function NavItemLink(props, propRef) {\n const {\n as: Component = \"a\",\n href,\n active,\n activeClassName,\n beforeAddon,\n afterAddon,\n className,\n children,\n liProps,\n spanProps,\n disabled = !href,\n onClick,\n onBlur,\n onDragStart,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchMove,\n onTouchEnd,\n onTouchStart,\n tooltipOptions,\n disableRipple,\n disableScrollIntoView,\n ...remaining\n } = props;\n\n const [linkRef, linkRefCallback] = useEnsuredRef(propRef);\n const { handlers, ripples } = useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n disabled,\n onClick,\n onBlur,\n onDragStart,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchMove,\n onTouchEnd,\n onTouchStart,\n });\n\n const { elementProps, tooltipProps, overflowRef } = useTooltip({\n overflowOnly: true,\n defaultPosition: \"right\",\n ...tooltipOptions,\n ...handlers,\n });\n useEffect(() => {\n const link = linkRef.current;\n if (\n !active ||\n !link ||\n disableScrollIntoView ||\n document.activeElement === link ||\n // do not scroll into view if the collapse transition is occurring since\n // it makes it animate weirdly\n link.closest(\".rmd-collapse--enter\")\n ) {\n return;\n }\n\n link.scrollIntoView({ block: \"center\" });\n }, [active, disableScrollIntoView, linkRef]);\n\n return (\n <NavItem {...liProps}>\n <Component\n aria-current={active ? \"page\" : undefined}\n {...remaining}\n {...handlers}\n {...elementProps}\n ref={linkRefCallback}\n href={href}\n className={navItemLink({\n active,\n activeClassName,\n className,\n })}\n >\n {beforeAddon}\n <span\n {...spanProps}\n ref={overflowRef}\n className={cssUtils({\n className: spanProps?.className,\n textOverflow: \"ellipsis\",\n })}\n >\n {children}\n </span>\n {afterAddon}\n {ripples}\n </Component>\n <Tooltip {...tooltipProps}>{children}</Tooltip>\n </NavItem>\n );\n }\n);\n"],"names":["forwardRef","useEffect","cssUtils","useElementInteraction","Tooltip","useTooltip","useEnsuredRef","NavItem","navItemLink","NavItemLink","props","propRef","as","Component","href","active","activeClassName","beforeAddon","afterAddon","className","children","liProps","spanProps","disabled","onClick","onBlur","onDragStart","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchMove","onTouchEnd","onTouchStart","tooltipOptions","disableRipple","disableScrollIntoView","remaining","linkRef","linkRefCallback","handlers","ripples","mode","undefined","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","link","current","document","activeElement","closest","scrollIntoView","block","aria-current","ref","span","textOverflow"],"mappings":"AAAA;;AAEA,SAGEA,UAAU,EACVC,SAAS,QACJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,WAAW,QAAQ,qBAAqB;AA8CjD;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcT,WACzB,SAASS,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,IAAIC,YAAY,GAAG,EACnBC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,WAAW,CAACT,IAAI,EAChBU,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,aAAa,EACbC,qBAAqB,EACrB,GAAGC,WACJ,GAAG5B;IAEJ,MAAM,CAAC6B,SAASC,gBAAgB,GAAGlC,cAAcK;IACjD,MAAM,EAAE8B,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QAClDwC,MAAMP,gBAAgB,SAASQ;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAM,EAAEW,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAG1C,WAAW;QAC7D2C,cAAc;QACdC,iBAAiB;QACjB,GAAGd,cAAc;QACjB,GAAGM,QAAQ;IACb;IACAxC,UAAU;QACR,MAAMiD,OAAOX,QAAQY,OAAO;QAC5B,IACE,CAACpC,UACD,CAACmC,QACDb,yBACAe,SAASC,aAAa,KAAKH,QAC3B,wEAAwE;QACxE,8BAA8B;QAC9BA,KAAKI,OAAO,CAAC,yBACb;YACA;QACF;QAEAJ,KAAKK,cAAc,CAAC;YAAEC,OAAO;QAAS;IACxC,GAAG;QAACzC;QAAQsB;QAAuBE;KAAQ;IAE3C,qBACE,MAAChC;QAAS,GAAGc,OAAO;;0BAClB,MAACR;gBACC4C,gBAAc1C,SAAS,SAAS6B;gBAC/B,GAAGN,SAAS;gBACZ,GAAGG,QAAQ;gBACX,GAAGI,YAAY;gBAChBa,KAAKlB;gBACL1B,MAAMA;gBACNK,WAAWX,YAAY;oBACrBO;oBACAC;oBACAG;gBACF;;oBAECF;kCACD,KAAC0C;wBACE,GAAGrC,SAAS;wBACboC,KAAKX;wBACL5B,WAAWjB,SAAS;4BAClBiB,WAAWG,WAAWH;4BACtByC,cAAc;wBAChB;kCAECxC;;oBAEFF;oBACAwB;;;0BAEH,KAACtC;gBAAS,GAAG0C,YAAY;0BAAG1B;;;;AAGlC,GACA"}
1
+ {"version":3,"sources":["../../src/navigation/NavItemLink.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AnchorHTMLAttributes,\n type LiHTMLAttributes,\n forwardRef,\n useEffect,\n} from \"react\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { useTooltip } from \"../tooltip/useTooltip.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { NavItem } from \"./NavItem.js\";\nimport { navItemLink } from \"./navItemStyles.js\";\nimport {\n type NavItemContentProps,\n type NavigationLinkComponent,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkProps\n extends\n Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\">,\n NavItemContentProps,\n ComponentWithRippleProps {\n /** @defaultValue `\"a\"` */\n as?: NavigationLinkComponent;\n href: string;\n\n /**\n * Any additional props to provide the wrapping `<li>` element such as\n * `style`, `className`, and `ref`.\n */\n liProps?: PropsWithRef<LiHTMLAttributes<HTMLLIElement>>;\n\n /**\n * Set this to `true` if the link matches the current `pathname`. This will\n * enable `aria-current=\"true\"` and apply active styling.\n */\n active: boolean;\n\n /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n activeClassName?: string;\n\n /** @defaultValue `!to && !href` */\n disabled?: boolean;\n\n /**\n * Set this to `true` to prevent this item from scrolling into view when it\n * becomes active. It is generally recommended to keep this `false` unless a\n * custom implementation has been added so that when the temporary navigation\n * will show the active route.\n *\n * @defaultValue `false`\n */\n disableScrollIntoView?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItemLink = forwardRef<HTMLAnchorElement, NavItemLinkProps>(\n function NavItemLink(props, propRef) {\n const {\n as: Component = \"a\",\n href,\n active,\n activeClassName,\n beforeAddon,\n afterAddon,\n className,\n children,\n liProps,\n spanProps,\n disabled = !href,\n onClick,\n onBlur,\n onDragStart,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchMove,\n onTouchEnd,\n onTouchStart,\n tooltipOptions,\n disableRipple,\n disableScrollIntoView,\n ...remaining\n } = props;\n\n const [linkRef, linkRefCallback] = useEnsuredRef(propRef);\n const { handlers, ripples } = useElementInteraction({\n mode: disableRipple ? \"none\" : undefined,\n disabled,\n onClick,\n onBlur,\n onDragStart,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchMove,\n onTouchEnd,\n onTouchStart,\n });\n\n const { elementProps, tooltipProps, overflowRef } = useTooltip({\n overflowOnly: true,\n defaultPosition: \"right\",\n ...tooltipOptions,\n ...handlers,\n });\n useEffect(() => {\n const link = linkRef.current;\n if (\n !active ||\n !link ||\n disableScrollIntoView ||\n document.activeElement === link ||\n // do not scroll into view if the collapse transition is occurring since\n // it makes it animate weirdly\n link.closest(\".rmd-collapse--enter\")\n ) {\n return;\n }\n\n link.scrollIntoView({ block: \"center\" });\n }, [active, disableScrollIntoView, linkRef]);\n\n return (\n <NavItem {...liProps}>\n <Component\n aria-current={active ? \"page\" : undefined}\n {...remaining}\n {...handlers}\n {...elementProps}\n ref={linkRefCallback}\n href={href}\n className={navItemLink({\n active,\n activeClassName,\n className,\n })}\n >\n {beforeAddon}\n <span\n {...spanProps}\n ref={overflowRef}\n className={cssUtils({\n className: spanProps?.className,\n textOverflow: \"ellipsis\",\n })}\n >\n {children}\n </span>\n {afterAddon}\n {ripples}\n </Component>\n <Tooltip {...tooltipProps}>{children}</Tooltip>\n </NavItem>\n );\n }\n);\n"],"names":["forwardRef","useEffect","cssUtils","useElementInteraction","Tooltip","useTooltip","useEnsuredRef","NavItem","navItemLink","NavItemLink","props","propRef","as","Component","href","active","activeClassName","beforeAddon","afterAddon","className","children","liProps","spanProps","disabled","onClick","onBlur","onDragStart","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchMove","onTouchEnd","onTouchStart","tooltipOptions","disableRipple","disableScrollIntoView","remaining","linkRef","linkRefCallback","handlers","ripples","mode","undefined","elementProps","tooltipProps","overflowRef","overflowOnly","defaultPosition","link","current","document","activeElement","closest","scrollIntoView","block","aria-current","ref","span","textOverflow"],"mappings":"AAAA;;AAEA,SAGEA,UAAU,EACVC,SAAS,QACJ,QAAQ;AAEf,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,WAAW,QAAQ,qBAAqB;AA+CjD;;;;;CAKC,GACD,OAAO,MAAMC,4BAAcT,WACzB,SAASS,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,IAAIC,YAAY,GAAG,EACnBC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,WAAW,CAACT,IAAI,EAChBU,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,cAAc,EACdC,aAAa,EACbC,qBAAqB,EACrB,GAAGC,WACJ,GAAG5B;IAEJ,MAAM,CAAC6B,SAASC,gBAAgB,GAAGlC,cAAcK;IACjD,MAAM,EAAE8B,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QAClDwC,MAAMP,gBAAgB,SAASQ;QAC/BrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAM,EAAEW,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAG1C,WAAW;QAC7D2C,cAAc;QACdC,iBAAiB;QACjB,GAAGd,cAAc;QACjB,GAAGM,QAAQ;IACb;IACAxC,UAAU;QACR,MAAMiD,OAAOX,QAAQY,OAAO;QAC5B,IACE,CAACpC,UACD,CAACmC,QACDb,yBACAe,SAASC,aAAa,KAAKH,QAC3B,wEAAwE;QACxE,8BAA8B;QAC9BA,KAAKI,OAAO,CAAC,yBACb;YACA;QACF;QAEAJ,KAAKK,cAAc,CAAC;YAAEC,OAAO;QAAS;IACxC,GAAG;QAACzC;QAAQsB;QAAuBE;KAAQ;IAE3C,qBACE,MAAChC;QAAS,GAAGc,OAAO;;0BAClB,MAACR;gBACC4C,gBAAc1C,SAAS,SAAS6B;gBAC/B,GAAGN,SAAS;gBACZ,GAAGG,QAAQ;gBACX,GAAGI,YAAY;gBAChBa,KAAKlB;gBACL1B,MAAMA;gBACNK,WAAWX,YAAY;oBACrBO;oBACAC;oBACAG;gBACF;;oBAECF;kCACD,KAAC0C;wBACE,GAAGrC,SAAS;wBACboC,KAAKX;wBACL5B,WAAWjB,SAAS;4BAClBiB,WAAWG,WAAWH;4BACtByC,cAAc;wBAChB;kCAECxC;;oBAEFF;oBACAwB;;;0BAEH,KAACtC;gBAAS,GAAG0C,YAAY;0BAAG1B;;;;AAGlC,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/getTableOfContentsHeadings.ts"],"sourcesContent":["import {\n type TableOfContentsHeadingItem,\n type TableOfContentsHeadings,\n type TableOfContentsHeadingsOptions,\n} from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface GetTableOfContentsHeadingsOptions\n extends Required<TableOfContentsHeadingsOptions> {\n ssr: boolean;\n}\n\n/**\n * This is used by the `useTableOfContentsHeadings` hook to find\n * the active heading element which is why it is marked as\n * internal.\n *\n * This will always return an empty list if `ssr` is `true` or\n * `typeof window === \"undefined\"`.\n *\n * @internal\n * @since 6.0.0\n */\nexport function getTableOfContentsHeadings(\n options: GetTableOfContentsHeadingsOptions\n): TableOfContentsHeadings {\n const { ssr, selector, getDepth, getHeadingText } = options;\n\n if (ssr || typeof window === \"undefined\") {\n return [];\n }\n\n const root = {\n id: \"\",\n depth: 0,\n items: [],\n children: \"\",\n } satisfies TableOfContentsHeadingItem;\n let previous: TableOfContentsHeadingItem = root;\n const parents: TableOfContentsHeadingItem[] = [];\n const headings = document.querySelectorAll(selector);\n headings.forEach((heading) => {\n const depth = getDepth(heading);\n const item: TableOfContentsHeadingItem = {\n id: heading.id,\n depth,\n items: [],\n children: getHeadingText(heading),\n };\n if (depth > previous.depth) {\n if (!previous.items) {\n previous.items = [];\n }\n\n parents.push(previous);\n } else if (depth < previous.depth) {\n while (parents[parents.length - 1].depth >= depth) {\n parents.pop();\n }\n }\n const i = parents.length - 1;\n parents[i].items = [...(parents[i].items ?? []), item];\n previous = item;\n });\n\n return root.items;\n}\n"],"names":["getTableOfContentsHeadings","options","ssr","selector","getDepth","getHeadingText","window","root","id","depth","items","children","previous","parents","headings","document","querySelectorAll","forEach","heading","item","push","length","pop","i"],"mappings":"AAeA;;;;;;;;;;CAUC,GACD,OAAO,SAASA,2BACdC,OAA0C;IAE1C,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGJ;IAEpD,IAAIC,OAAO,OAAOI,WAAW,aAAa;QACxC,OAAO,EAAE;IACX;IAEA,MAAMC,OAAO;QACXC,IAAI;QACJC,OAAO;QACPC,OAAO,EAAE;QACTC,UAAU;IACZ;IACA,IAAIC,WAAuCL;IAC3C,MAAMM,UAAwC,EAAE;IAChD,MAAMC,WAAWC,SAASC,gBAAgB,CAACb;IAC3CW,SAASG,OAAO,CAAC,CAACC;QAChB,MAAMT,QAAQL,SAASc;QACvB,MAAMC,OAAmC;YACvCX,IAAIU,QAAQV,EAAE;YACdC;YACAC,OAAO,EAAE;YACTC,UAAUN,eAAea;QAC3B;QACA,IAAIT,QAAQG,SAASH,KAAK,EAAE;YAC1B,IAAI,CAACG,SAASF,KAAK,EAAE;gBACnBE,SAASF,KAAK,GAAG,EAAE;YACrB;YAEAG,QAAQO,IAAI,CAACR;QACf,OAAO,IAAIH,QAAQG,SAASH,KAAK,EAAE;YACjC,MAAOI,OAAO,CAACA,QAAQQ,MAAM,GAAG,EAAE,CAACZ,KAAK,IAAIA,MAAO;gBACjDI,QAAQS,GAAG;YACb;QACF;QACA,MAAMC,IAAIV,QAAQQ,MAAM,GAAG;QAC3BR,OAAO,CAACU,EAAE,CAACb,KAAK,GAAG;eAAKG,OAAO,CAACU,EAAE,CAACb,KAAK,IAAI,EAAE;YAAGS;SAAK;QACtDP,WAAWO;IACb;IAEA,OAAOZ,KAAKG,KAAK;AACnB"}
1
+ {"version":3,"sources":["../../src/navigation/getTableOfContentsHeadings.ts"],"sourcesContent":["import {\n type TableOfContentsHeadingItem,\n type TableOfContentsHeadings,\n type TableOfContentsHeadingsOptions,\n} from \"./types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface GetTableOfContentsHeadingsOptions extends Required<TableOfContentsHeadingsOptions> {\n ssr: boolean;\n}\n\n/**\n * This is used by the `useTableOfContentsHeadings` hook to find\n * the active heading element which is why it is marked as\n * internal.\n *\n * This will always return an empty list if `ssr` is `true` or\n * `typeof window === \"undefined\"`.\n *\n * @internal\n * @since 6.0.0\n */\nexport function getTableOfContentsHeadings(\n options: GetTableOfContentsHeadingsOptions\n): TableOfContentsHeadings {\n const { ssr, selector, getDepth, getHeadingText } = options;\n\n if (ssr || typeof window === \"undefined\") {\n return [];\n }\n\n const root = {\n id: \"\",\n depth: 0,\n items: [],\n children: \"\",\n } satisfies TableOfContentsHeadingItem;\n let previous: TableOfContentsHeadingItem = root;\n const parents: TableOfContentsHeadingItem[] = [];\n const headings = document.querySelectorAll(selector);\n headings.forEach((heading) => {\n const depth = getDepth(heading);\n const item: TableOfContentsHeadingItem = {\n id: heading.id,\n depth,\n items: [],\n children: getHeadingText(heading),\n };\n if (depth > previous.depth) {\n if (!previous.items) {\n previous.items = [];\n }\n\n parents.push(previous);\n } else if (depth < previous.depth) {\n while (parents[parents.length - 1].depth >= depth) {\n parents.pop();\n }\n }\n const i = parents.length - 1;\n parents[i].items = [...(parents[i].items ?? []), item];\n previous = item;\n });\n\n return root.items;\n}\n"],"names":["getTableOfContentsHeadings","options","ssr","selector","getDepth","getHeadingText","window","root","id","depth","items","children","previous","parents","headings","document","querySelectorAll","forEach","heading","item","push","length","pop","i"],"mappings":"AAcA;;;;;;;;;;CAUC,GACD,OAAO,SAASA,2BACdC,OAA0C;IAE1C,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGJ;IAEpD,IAAIC,OAAO,OAAOI,WAAW,aAAa;QACxC,OAAO,EAAE;IACX;IAEA,MAAMC,OAAO;QACXC,IAAI;QACJC,OAAO;QACPC,OAAO,EAAE;QACTC,UAAU;IACZ;IACA,IAAIC,WAAuCL;IAC3C,MAAMM,UAAwC,EAAE;IAChD,MAAMC,WAAWC,SAASC,gBAAgB,CAACb;IAC3CW,SAASG,OAAO,CAAC,CAACC;QAChB,MAAMT,QAAQL,SAASc;QACvB,MAAMC,OAAmC;YACvCX,IAAIU,QAAQV,EAAE;YACdC;YACAC,OAAO,EAAE;YACTC,UAAUN,eAAea;QAC3B;QACA,IAAIT,QAAQG,SAASH,KAAK,EAAE;YAC1B,IAAI,CAACG,SAASF,KAAK,EAAE;gBACnBE,SAASF,KAAK,GAAG,EAAE;YACrB;YAEAG,QAAQO,IAAI,CAACR;QACf,OAAO,IAAIH,QAAQG,SAASH,KAAK,EAAE;YACjC,MAAOI,OAAO,CAACA,QAAQQ,MAAM,GAAG,EAAE,CAACZ,KAAK,IAAIA,MAAO;gBACjDI,QAAQS,GAAG;YACb;QACF;QACA,MAAMC,IAAIV,QAAQQ,MAAM,GAAG;QAC3BR,OAAO,CAACU,EAAE,CAACb,KAAK,GAAG;eAAKG,OAAO,CAACU,EAAE,CAACb,KAAK,IAAI,EAAE;YAAGS;SAAK;QACtDP,WAAWO;IACb;IAEA,OAAOZ,KAAKG,KAAK;AACnB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n type AnchorHTMLAttributes,\n type ForwardRefExoticComponent,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n type TooltipOptions,\n type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n type: \"subheader\";\n children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * const id = getNavigationGroupId(item, nextParents);\n * return (\n * <CollapsibleNavGroup\n * depth={nextParents.length}\n * collapsed={!data?.expandedItems.has(id)}\n * buttonChildren={item.children}\n * toggleCollapsed={() => {\n * data?.toggleExpandedItem(id);\n * }}\n * >\n * {children}\n * </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n type: \"group\";\n\n /**\n * An optional unique id to identify the group used for handling the expanded\n * state when the `href` can't be used.\n */\n id?: string;\n\n /**\n * An optional href to prefix all child routes with and can be used instead of\n * the {@link id} for handling the expanded state.\n *\n * @example\n * ```ts\n * {\n * type: \"group\",\n * href: \"/some-path\",\n * children: \"Some Name\",\n * items: [\n * {\n * type: \"route\",\n * href: \"/page-1\",\n * children: \"Page 1\",\n * },\n * {\n * type: \"route\",\n * href: \"/page-2\",\n * children: \"Page 2\",\n * },\n * ],\n * }\n * ```\n *\n * Would result in:\n *\n * - Page 1 - `/some-path/page-1`\n * - Page 2 - `/some-path/page-2`\n */\n href?: string;\n children: ReactNode;\n items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n type: \"route\";\n href: string;\n children: ReactNode;\n active?: boolean;\n beforeAddon?: ReactNode;\n afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n | NavigationItemDivider\n | NavigationItemSubheader\n | NavigationItemGroup\n | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type CustomNavigationLinkComponent = ForwardRefExoticComponent<\n AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent = \"a\" | CustomNavigationLinkComponent;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansion {\n expandedItems: ReadonlySet<string>;\n toggleExpandedItem: (id: string) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData extends NavigationExpansion {\n /**\n * This is used to set the `active` state on a `NavItemLink`\n */\n pathname: string;\n linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n /**\n * Any additional props to provide the `<span>` element that wraps the\n * children such as `style`, `className`, and `ref`.\n */\n spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n /**\n * An optional addon to render before the `children` and will not be wrapped\n * in the `span` that adds ellipsis overflow.\n */\n beforeAddon?: ReactNode;\n\n /**\n * An optional addon to render after the `children` and will not be wrapped\n * in the `span` that adds ellipsis overflow.\n */\n afterAddon?: ReactNode;\n\n /**\n * This should contain accessible text for the page that this will link to and\n * will automatically be truncated with ellipsis if it is too large. A tooltip\n * will also appear only when it has been truncated.\n */\n children: ReactNode;\n\n /**\n * This most likely will never need to be used, but it's a way to override any\n * tooltip options. The default behavior will position the tooltip to the\n * right and only appear if the `children` are overflown.\n *\n * @example Customize\n * ```tsx\n * <NavItemLink\n * {...props}\n * tooltipOptions={{\n * overflowOnly: false,\n * defaultPosition: \"above\",\n * vhMargin: \"1rem\",\n * vwMargin: \"1rem\",\n * }}\n * >\n * ```\n */\n tooltipOptions?: Omit<\n TooltipOptions<HTMLAnchorElement>,\n keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n >;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReference {\n id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReferenceWithChildren extends HeadingReference {\n items?: readonly HeadingReferenceWithChildren[];\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingsOptions {\n /**\n * This should be a `document.querySelectorAll` query that returns elements\n * to display in a table of contents component that have a valid id.\n *\n * @see {@link DEFAULT_HEADING_SELECTOR}\n * @defaultValue `main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])`\n */\n selector?: string;\n\n /**\n * @see {@link DEFAULT_GET_HEADING_DEPTH}\n * @defaultValue `(element) => parseInt(element.tagName.substring(1))`\n */\n getDepth?: (element: Element) => number;\n\n /**\n * This is used to get the text to display in a table of contents from each\n * heading element.\n *\n * @see {@link DEFAULT_GET_HEADING_TEXT}\n * @defaultValue `(element) => element.textContent || \"\"`\n */\n getHeadingText?: (element: Element) => string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeading extends HeadingReference {\n depth: number;\n children: string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingItem\n extends TableOfContentsHeading,\n HeadingReferenceWithChildren {\n items?: TableOfContentsHeadingItem[];\n}\n\n/** @since 6.0.0 */\nexport type TableOfContentsHeadings = readonly TableOfContentsHeadingItem[];\n"],"names":[],"mappings":"AAgRA,iBAAiB,GACjB,WAA4E"}
1
+ {"version":3,"sources":["../../src/navigation/types.ts"],"sourcesContent":["import {\n type AnchorHTMLAttributes,\n type ForwardRefExoticComponent,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\n\nimport { type DividerProps } from \"../divider/Divider.js\";\nimport { type ListSubheaderProps } from \"../list/ListSubheader.js\";\nimport {\n type TooltipOptions,\n type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\n\n/**\n * Used to add a `Divider` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <Divider {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemDivider extends DividerProps {\n type: \"divider\";\n}\n\n/**\n * Used to add a `ListSubheader` to the navigation list.\n * @example Output\n * ```tsx\n * const { type, ...props } = item;\n * return <ListSubheader {...props} />;\n * ```\n *\n * @since 6.0.0\n */\nexport interface NavigationItemSubheader extends ListSubheaderProps {\n type: \"subheader\";\n children: ReactNode;\n}\n\n/**\n * This is used to either create a route group which update all child routes to\n * be prefixed with the optional `href`.\n *\n * @example Route Group Output\n * ```tsx\n * const nextParents = [item, ...parents];\n * const id = getNavigationGroupId(item, nextParents);\n * return (\n * <CollapsibleNavGroup\n * depth={nextParents.length}\n * collapsed={!data?.expandedItems.has(id)}\n * buttonChildren={item.children}\n * toggleCollapsed={() => {\n * data?.toggleExpandedItem(id);\n * }}\n * >\n * {children}\n * </CollapsibleNavGroup>\n * );\n * ```\n *\n * Note: `children` are any child `items` that have been rendered.\n *\n * @since 6.0.0\n */\nexport interface NavigationItemGroup {\n type: \"group\";\n\n /**\n * An optional unique id to identify the group used for handling the expanded\n * state when the `href` can't be used.\n */\n id?: string;\n\n /**\n * An optional href to prefix all child routes with and can be used instead of\n * the {@link id} for handling the expanded state.\n *\n * @example\n * ```ts\n * {\n * type: \"group\",\n * href: \"/some-path\",\n * children: \"Some Name\",\n * items: [\n * {\n * type: \"route\",\n * href: \"/page-1\",\n * children: \"Page 1\",\n * },\n * {\n * type: \"route\",\n * href: \"/page-2\",\n * children: \"Page 2\",\n * },\n * ],\n * }\n * ```\n *\n * Would result in:\n *\n * - Page 1 - `/some-path/page-1`\n * - Page 2 - `/some-path/page-2`\n */\n href?: string;\n children: ReactNode;\n items: readonly NavigationItem[];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationItemRoute {\n type: \"route\";\n href: string;\n children: ReactNode;\n active?: boolean;\n beforeAddon?: ReactNode;\n afterAddon?: ReactNode;\n}\n\n/**\n * @since 6.0.0\n */\nexport type NavigationItem =\n | NavigationItemDivider\n | NavigationItemSubheader\n | NavigationItemGroup\n | NavigationItemRoute;\n\n/**\n * @since 6.0.0\n */\nexport type CustomNavigationLinkComponent = ForwardRefExoticComponent<\n AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n>;\n\n/**\n * @since 6.0.0\n */\nexport type NavigationLinkComponent = \"a\" | CustomNavigationLinkComponent;\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationExpansion {\n expandedItems: ReadonlySet<string>;\n toggleExpandedItem: (id: string) => void;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavigationRenderData extends NavigationExpansion {\n /**\n * This is used to set the `active` state on a `NavItemLink`\n */\n pathname: string;\n linkComponent: NavigationLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentProps {\n /**\n * Any additional props to provide the `<span>` element that wraps the\n * children such as `style`, `className`, and `ref`.\n */\n spanProps?: HTMLAttributes<HTMLSpanElement>;\n\n /**\n * An optional addon to render before the `children` and will not be wrapped\n * in the `span` that adds ellipsis overflow.\n */\n beforeAddon?: ReactNode;\n\n /**\n * An optional addon to render after the `children` and will not be wrapped\n * in the `span` that adds ellipsis overflow.\n */\n afterAddon?: ReactNode;\n\n /**\n * This should contain accessible text for the page that this will link to and\n * will automatically be truncated with ellipsis if it is too large. A tooltip\n * will also appear only when it has been truncated.\n */\n children: ReactNode;\n\n /**\n * This most likely will never need to be used, but it's a way to override any\n * tooltip options. The default behavior will position the tooltip to the\n * right and only appear if the `children` are overflown.\n *\n * @example Customize\n * ```tsx\n * <NavItemLink\n * {...props}\n * tooltipOptions={{\n * overflowOnly: false,\n * defaultPosition: \"above\",\n * vhMargin: \"1rem\",\n * vwMargin: \"1rem\",\n * }}\n * >\n * ```\n */\n tooltipOptions?: Omit<\n TooltipOptions<HTMLAnchorElement>,\n keyof TooltippedElementEventHandlers<HTMLAnchorElement>\n >;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReference {\n id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface HeadingReferenceWithChildren extends HeadingReference {\n items?: readonly HeadingReferenceWithChildren[];\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingsOptions {\n /**\n * This should be a `document.querySelectorAll` query that returns elements\n * to display in a table of contents component that have a valid id.\n *\n * @see {@link DEFAULT_HEADING_SELECTOR}\n * @defaultValue `main :where(:not(nav *)):where(h1[id],h2[id],h3[id],h4[id],h5[id],h6[id])`\n */\n selector?: string;\n\n /**\n * @see {@link DEFAULT_GET_HEADING_DEPTH}\n * @defaultValue `(element) => parseInt(element.tagName.substring(1))`\n */\n getDepth?: (element: Element) => number;\n\n /**\n * This is used to get the text to display in a table of contents from each\n * heading element.\n *\n * @see {@link DEFAULT_GET_HEADING_TEXT}\n * @defaultValue `(element) => element.textContent || \"\"`\n */\n getHeadingText?: (element: Element) => string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeading extends HeadingReference {\n depth: number;\n children: string;\n}\n\n/** @since 6.0.0 */\nexport interface TableOfContentsHeadingItem\n extends TableOfContentsHeading, HeadingReferenceWithChildren {\n items?: TableOfContentsHeadingItem[];\n}\n\n/** @since 6.0.0 */\nexport type TableOfContentsHeadings = readonly TableOfContentsHeadingItem[];\n"],"names":[],"mappings":"AA+QA,iBAAiB,GACjB,WAA4E"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n type BaseOverlayClassNameOptions,\n DEFAULT_OVERLAY_CLASSNAMES,\n DEFAULT_OVERLAY_TIMEOUT,\n overlay,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface OverlayProps\n extends HTMLAttributes<HTMLSpanElement>,\n BaseOverlayClassNameOptions,\n CSSTransitionComponentProps,\n TransitionActions {\n /**\n * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n * and disabling the animation. This is useful if you'd like a \"close on\n * outside click\" behavior.\n *\n * @defaultValue `false`\n */\n noOpacity?: boolean;\n\n /**\n * @see {@link OverlayClassNameOptions.clickable}\n * @defaultValue `!noOpacity`\n */\n clickable?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { toggle, disable, toggled: visible } = useToggle(false);\n *\n * return (\n * <>\n * <Button onClick={toggle}>Toggle</Button>\n * <Overlay visible={visible} onClick={disable} />\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n function Overlay(props, nodeRef) {\n const {\n children,\n className,\n visible,\n noOpacity = false,\n clickable = !noOpacity,\n temporary = true,\n timeout = DEFAULT_OVERLAY_TIMEOUT,\n classNames = DEFAULT_OVERLAY_CLASSNAMES,\n disableTransition = false,\n align = \"center\",\n justify = \"center\",\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n exitedHidden = true,\n disablePortal: propDisablePortal = false,\n ...remaining\n } = props;\n\n const ssr = useSsr();\n const { elementProps, rendered, disablePortal } = useCSSTransition({\n nodeRef,\n transitionIn: visible,\n timeout: noOpacity ? 0 : timeout,\n classNames: noOpacity ? \"\" : classNames,\n className: overlay({\n visible,\n clickable,\n align,\n justify,\n className,\n }),\n appear: appear && !disableTransition && !ssr,\n enter: enter && !disableTransition,\n exit: exit && !disableTransition,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary,\n exitedHidden,\n disablePortal: propDisablePortal,\n });\n\n return (\n <Portal disabled={disablePortal}>\n {rendered && (\n <span {...remaining} {...elementProps}>\n {children}\n </span>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAEEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AAuCrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
1
+ {"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n type BaseOverlayClassNameOptions,\n DEFAULT_OVERLAY_CLASSNAMES,\n DEFAULT_OVERLAY_TIMEOUT,\n overlay,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface OverlayProps\n extends\n HTMLAttributes<HTMLSpanElement>,\n BaseOverlayClassNameOptions,\n CSSTransitionComponentProps,\n TransitionActions {\n /**\n * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n * and disabling the animation. This is useful if you'd like a \"close on\n * outside click\" behavior.\n *\n * @defaultValue `false`\n */\n noOpacity?: boolean;\n\n /**\n * @see {@link OverlayClassNameOptions.clickable}\n * @defaultValue `!noOpacity`\n */\n clickable?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { toggle, disable, toggled: visible } = useToggle(false);\n *\n * return (\n * <>\n * <Button onClick={toggle}>Toggle</Button>\n * <Overlay visible={visible} onClick={disable} />\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n function Overlay(props, nodeRef) {\n const {\n children,\n className,\n visible,\n noOpacity = false,\n clickable = !noOpacity,\n temporary = true,\n timeout = DEFAULT_OVERLAY_TIMEOUT,\n classNames = DEFAULT_OVERLAY_CLASSNAMES,\n disableTransition = false,\n align = \"center\",\n justify = \"center\",\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n exitedHidden = true,\n disablePortal: propDisablePortal = false,\n ...remaining\n } = props;\n\n const ssr = useSsr();\n const { elementProps, rendered, disablePortal } = useCSSTransition({\n nodeRef,\n transitionIn: visible,\n timeout: noOpacity ? 0 : timeout,\n classNames: noOpacity ? \"\" : classNames,\n className: overlay({\n visible,\n clickable,\n align,\n justify,\n className,\n }),\n appear: appear && !disableTransition && !ssr,\n enter: enter && !disableTransition,\n exit: exit && !disableTransition,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary,\n exitedHidden,\n disablePortal: propDisablePortal,\n });\n\n return (\n <Portal disabled={disablePortal}>\n {rendered && (\n <span {...remaining} {...elementProps}>\n {children}\n </span>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAEEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AAwCrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/positioning/createHorizontalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type HorizontalPosition } from \"./types.js\";\nimport {\n type XCoordConfig,\n getCenterXCoord,\n getInnerLeftCoord,\n getInnerRightCoord,\n getLeftCoord,\n getRightCoord,\n} from \"./utils.js\";\n\n/**\n * @internal\n */\ninterface XPosition {\n left: number;\n right?: number;\n width?: number;\n minWidth?: number;\n actualX: HorizontalPosition;\n}\n\n/**\n * @internal\n */\nexport interface HorizontalFixConfig extends XCoordConfig {\n vwMargin: number;\n screenRight: number;\n disableSwapping: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CreateHorizontalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n \"vwMargin\" | \"xMargin\" | \"width\" | \"disableSwapping\"\n >\n > {\n x: HorizontalPosition;\n vw: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the left of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the right position if it can't fit\n * within the viewport to the left. If it can't fit in the viewport even after\n * being swapped to the right or swapping is disabled, it will be positioned to\n * the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredLeft(config: HorizontalFixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getLeftCoord(config);\n let actualX: HorizontalPosition = \"left\";\n if (left >= vwMargin) {\n return { actualX, left };\n }\n\n const swappedLeft = getRightCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = swappedLeft;\n actualX = \"right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-left of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the right position if it\n * can't fit within the viewport to the left. If it can't fit in the viewport\n * even after being swapped to the right or swapping is disabled, it will be\n * positioned to the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerLeft(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getInnerLeftCoord(config);\n let actualX: HorizontalPosition = \"inner-left\";\n if (left + elWidth <= screenRight && left >= vwMargin) {\n return { actualX, left };\n }\n\n if (disableSwapping) {\n if (left + elWidth > screenRight) {\n left = screenRight - elWidth;\n } else {\n left = vwMargin;\n }\n\n return { actualX, left };\n }\n\n const swappedLeft = getInnerRightCoord(config);\n if (swappedLeft < vwMargin) {\n left = vwMargin;\n } else if (swappedLeft + elWidth > screenRight) {\n left = screenRight - elWidth;\n actualX = \"inner-right\";\n } else {\n left = swappedLeft;\n actualX = \"inner-right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * centered element can't fit within the viewport, it will use the vwMargin\n * value if it overflowed to the left, it'll position to the screen right\n * boundary.\n *\n * @internal\n */\nexport function createAnchoredHorizontalCenter(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth } = config;\n let left = getCenterXCoord(config);\n if (left < vwMargin) {\n left = vwMargin;\n } else if (left + elWidth > screenRight || left < vwMargin) {\n left = screenRight - elWidth;\n }\n\n return { actualX: \"center\", left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-right of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the inner-left position\n * if it can't fit within the viewport to the right. If it can't fit in the\n * viewport even after being swapped to the left or swapping is disabled, it\n * will be positioned to the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerRight(\n config: HorizontalFixConfig\n): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getInnerRightCoord(config);\n let actualX: HorizontalPosition = \"inner-right\";\n if (left >= vwMargin) {\n return { actualX, left: Math.min(left, screenRight - elWidth) };\n }\n\n const swappedLeft = getInnerLeftCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = Math.max(swappedLeft, vwMargin);\n actualX = \"inner-left\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the right of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the left position if it can't fit\n * within the viewport to the right. If it can't fit in the viewport even after\n * being swapped to the left or swapping is disabled, it will be positioned to\n * the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredRight(config: HorizontalFixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getRightCoord(config);\n let actualX: HorizontalPosition = \"right\";\n if (left + elWidth <= screenRight) {\n return { actualX, left };\n }\n\n const swappedLeft = getLeftCoord(config);\n if (disableSwapping || swappedLeft < vwMargin) {\n left = screenRight - elWidth;\n } else {\n left = swappedLeft;\n actualX = \"left\";\n }\n\n return { actualX, left };\n}\n\nexport interface EqualWidthOptions\n extends Pick<\n CreateHorizontalPositionOptions,\n \"x\" | \"elWidth\" | \"xMargin\" | \"vwMargin\" | \"containerRect\" | \"initialX\"\n > {\n screenRight: number;\n isMinWidth: boolean;\n}\n\n/**\n * @internal\n */\nexport function createEqualWidth(options: EqualWidthOptions): XPosition {\n const {\n x,\n elWidth,\n xMargin,\n vwMargin,\n initialX,\n containerRect,\n screenRight,\n isMinWidth,\n } = options;\n\n let left = initialX ?? containerRect.left + xMargin;\n\n let width: number | undefined = containerRect.width - xMargin * 2;\n let minWidth: number | undefined;\n let right: number | undefined;\n if (isMinWidth) {\n minWidth = width;\n // if the fixed element has a width greater than the element it is fixed to,\n // update the width to be the fixed element's width. since the \"min-width\"\n // option is only possible for horizontally centered elements, need to then\n // update the `left` position again.\n if (elWidth > width) {\n left -= (elWidth - width) / 2;\n minWidth = elWidth;\n }\n\n width = undefined;\n const elRight = left + elWidth;\n if (elRight > screenRight) {\n left -= elRight - screenRight;\n right = vwMargin;\n }\n\n left = Math.max(vwMargin, left);\n }\n\n // going to assume that the container element is visible in the DOM and just\n // make the fixed element have the same left and right corners\n return {\n left,\n right,\n width,\n minWidth,\n actualX: x,\n };\n}\n\n/**\n * Creates the horizontal position for a fixed element with the provided\n * options.\n * @internal\n */\nexport function createHorizontalPosition(\n options: CreateHorizontalPositionOptions\n): XPosition {\n const {\n x,\n vw,\n vwMargin,\n xMargin,\n width,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n } = options;\n\n const screenRight = vw - vwMargin;\n if (width !== \"equal\" && elWidth > vw - vwMargin * 2) {\n // if the element's width is greater than the viewport's width minus the\n // margin on both sides, just make the element span the entire viewport with\n // the margin\n return {\n left: vwMargin,\n right: vwMargin,\n actualX: x,\n };\n }\n\n if (width === \"min\" || width === \"equal\") {\n return createEqualWidth({\n x,\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n containerRect,\n screenRight,\n isMinWidth: width === \"min\",\n });\n }\n\n const config: HorizontalFixConfig = {\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n screenRight,\n containerRect,\n disableSwapping,\n };\n\n switch (x) {\n case \"left\":\n return createAnchoredLeft(config);\n case \"inner-left\":\n return createAnchoredInnerLeft(config);\n case \"center\":\n return createAnchoredHorizontalCenter(config);\n case \"inner-right\":\n return createAnchoredInnerRight(config);\n case \"right\":\n return createAnchoredRight(config);\n }\n}\n"],"names":["getCenterXCoord","getInnerLeftCoord","getInnerRightCoord","getLeftCoord","getRightCoord","createAnchoredLeft","config","vwMargin","screenRight","elWidth","disableSwapping","left","actualX","swappedLeft","createAnchoredInnerLeft","createAnchoredHorizontalCenter","createAnchoredInnerRight","Math","min","max","createAnchoredRight","createEqualWidth","options","x","xMargin","initialX","containerRect","isMinWidth","width","minWidth","right","undefined","elRight","createHorizontalPosition","vw"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/positioning/createHorizontalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type HorizontalPosition } from \"./types.js\";\nimport {\n type XCoordConfig,\n getCenterXCoord,\n getInnerLeftCoord,\n getInnerRightCoord,\n getLeftCoord,\n getRightCoord,\n} from \"./utils.js\";\n\n/**\n * @internal\n */\ninterface XPosition {\n left: number;\n right?: number;\n width?: number;\n minWidth?: number;\n actualX: HorizontalPosition;\n}\n\n/**\n * @internal\n */\nexport interface HorizontalFixConfig extends XCoordConfig {\n vwMargin: number;\n screenRight: number;\n disableSwapping: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CreateHorizontalPositionOptions extends Required<\n Pick<\n FixedPositionOptions,\n \"vwMargin\" | \"xMargin\" | \"width\" | \"disableSwapping\"\n >\n> {\n x: HorizontalPosition;\n vw: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the left of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the right position if it can't fit\n * within the viewport to the left. If it can't fit in the viewport even after\n * being swapped to the right or swapping is disabled, it will be positioned to\n * the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredLeft(config: HorizontalFixConfig): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getLeftCoord(config);\n let actualX: HorizontalPosition = \"left\";\n if (left >= vwMargin) {\n return { actualX, left };\n }\n\n const swappedLeft = getRightCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = swappedLeft;\n actualX = \"right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-left of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the right position if it\n * can't fit within the viewport to the left. If it can't fit in the viewport\n * even after being swapped to the right or swapping is disabled, it will be\n * positioned to the viewport left boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerLeft(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth, disableSwapping } = config;\n\n let left = getInnerLeftCoord(config);\n let actualX: HorizontalPosition = \"inner-left\";\n if (left + elWidth <= screenRight && left >= vwMargin) {\n return { actualX, left };\n }\n\n if (disableSwapping) {\n if (left + elWidth > screenRight) {\n left = screenRight - elWidth;\n } else {\n left = vwMargin;\n }\n\n return { actualX, left };\n }\n\n const swappedLeft = getInnerRightCoord(config);\n if (swappedLeft < vwMargin) {\n left = vwMargin;\n } else if (swappedLeft + elWidth > screenRight) {\n left = screenRight - elWidth;\n actualX = \"inner-right\";\n } else {\n left = swappedLeft;\n actualX = \"inner-right\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * centered element can't fit within the viewport, it will use the vwMargin\n * value if it overflowed to the left, it'll position to the screen right\n * boundary.\n *\n * @internal\n */\nexport function createAnchoredHorizontalCenter(\n config: HorizontalFixConfig\n): XPosition {\n const { vwMargin, screenRight, elWidth } = config;\n let left = getCenterXCoord(config);\n if (left < vwMargin) {\n left = vwMargin;\n } else if (left + elWidth > screenRight || left < vwMargin) {\n left = screenRight - elWidth;\n }\n\n return { actualX: \"center\", left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the\n * inner-right of the container element but also within the viewport boundaries.\n * When swapping is enabled, it will attempt to swap to the inner-left position\n * if it can't fit within the viewport to the right. If it can't fit in the\n * viewport even after being swapped to the left or swapping is disabled, it\n * will be positioned to the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredInnerRight(\n config: HorizontalFixConfig\n): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getInnerRightCoord(config);\n let actualX: HorizontalPosition = \"inner-right\";\n if (left >= vwMargin) {\n return { actualX, left: Math.min(left, screenRight - elWidth) };\n }\n\n const swappedLeft = getInnerLeftCoord(config);\n if (disableSwapping || swappedLeft + elWidth > screenRight) {\n left = vwMargin;\n } else {\n left = Math.max(swappedLeft, vwMargin);\n actualX = \"inner-left\";\n }\n\n return { actualX, left };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear to the right of\n * the container element but also within the viewport boundaries. When swapping\n * is enabled, it will attempt to swap to the left position if it can't fit\n * within the viewport to the right. If it can't fit in the viewport even after\n * being swapped to the left or swapping is disabled, it will be positioned to\n * the viewport right boundary.\n *\n * @internal\n */\nexport function createAnchoredRight(config: HorizontalFixConfig): XPosition {\n const { screenRight, vwMargin, elWidth, disableSwapping } = config;\n\n let left = getRightCoord(config);\n let actualX: HorizontalPosition = \"right\";\n if (left + elWidth <= screenRight) {\n return { actualX, left };\n }\n\n const swappedLeft = getLeftCoord(config);\n if (disableSwapping || swappedLeft < vwMargin) {\n left = screenRight - elWidth;\n } else {\n left = swappedLeft;\n actualX = \"left\";\n }\n\n return { actualX, left };\n}\n\nexport interface EqualWidthOptions extends Pick<\n CreateHorizontalPositionOptions,\n \"x\" | \"elWidth\" | \"xMargin\" | \"vwMargin\" | \"containerRect\" | \"initialX\"\n> {\n screenRight: number;\n isMinWidth: boolean;\n}\n\n/**\n * @internal\n */\nexport function createEqualWidth(options: EqualWidthOptions): XPosition {\n const {\n x,\n elWidth,\n xMargin,\n vwMargin,\n initialX,\n containerRect,\n screenRight,\n isMinWidth,\n } = options;\n\n let left = initialX ?? containerRect.left + xMargin;\n\n let width: number | undefined = containerRect.width - xMargin * 2;\n let minWidth: number | undefined;\n let right: number | undefined;\n if (isMinWidth) {\n minWidth = width;\n // if the fixed element has a width greater than the element it is fixed to,\n // update the width to be the fixed element's width. since the \"min-width\"\n // option is only possible for horizontally centered elements, need to then\n // update the `left` position again.\n if (elWidth > width) {\n left -= (elWidth - width) / 2;\n minWidth = elWidth;\n }\n\n width = undefined;\n const elRight = left + elWidth;\n if (elRight > screenRight) {\n left -= elRight - screenRight;\n right = vwMargin;\n }\n\n left = Math.max(vwMargin, left);\n }\n\n // going to assume that the container element is visible in the DOM and just\n // make the fixed element have the same left and right corners\n return {\n left,\n right,\n width,\n minWidth,\n actualX: x,\n };\n}\n\n/**\n * Creates the horizontal position for a fixed element with the provided\n * options.\n * @internal\n */\nexport function createHorizontalPosition(\n options: CreateHorizontalPositionOptions\n): XPosition {\n const {\n x,\n vw,\n vwMargin,\n xMargin,\n width,\n elWidth,\n initialX,\n containerRect,\n disableSwapping,\n } = options;\n\n const screenRight = vw - vwMargin;\n if (width !== \"equal\" && elWidth > vw - vwMargin * 2) {\n // if the element's width is greater than the viewport's width minus the\n // margin on both sides, just make the element span the entire viewport with\n // the margin\n return {\n left: vwMargin,\n right: vwMargin,\n actualX: x,\n };\n }\n\n if (width === \"min\" || width === \"equal\") {\n return createEqualWidth({\n x,\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n containerRect,\n screenRight,\n isMinWidth: width === \"min\",\n });\n }\n\n const config: HorizontalFixConfig = {\n vwMargin,\n xMargin,\n elWidth,\n initialX,\n screenRight,\n containerRect,\n disableSwapping,\n };\n\n switch (x) {\n case \"left\":\n return createAnchoredLeft(config);\n case \"inner-left\":\n return createAnchoredInnerLeft(config);\n case \"center\":\n return createAnchoredHorizontalCenter(config);\n case \"inner-right\":\n return createAnchoredInnerRight(config);\n case \"right\":\n return createAnchoredRight(config);\n }\n}\n"],"names":["getCenterXCoord","getInnerLeftCoord","getInnerRightCoord","getLeftCoord","getRightCoord","createAnchoredLeft","config","vwMargin","screenRight","elWidth","disableSwapping","left","actualX","swappedLeft","createAnchoredInnerLeft","createAnchoredHorizontalCenter","createAnchoredInnerRight","Math","min","max","createAnchoredRight","createEqualWidth","options","x","xMargin","initialX","containerRect","isMinWidth","width","minWidth","right","undefined","elRight","createHorizontalPosition","vw"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/positioning/createVerticalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type VerticalPosition } from \"./types.js\";\nimport {\n type YCoordConfig,\n getAboveCoord,\n getBelowCoord,\n getBottomCoord,\n getCenterYCoord,\n getTopCoord,\n} from \"./utils.js\";\n\n/** @internal */\ninterface YPosition {\n top: number;\n bottom?: number;\n actualY: VerticalPosition;\n /** @since 5.1.6 */\n transformOriginY?: number;\n}\n\n/** @internal */\nexport interface VerticalFixConfig extends YCoordConfig {\n vhMargin: number;\n screenBottom: number;\n preventOverlap: boolean;\n disableSwapping: boolean;\n disableVHBounds: boolean;\n}\n\n/** @internal */\nexport interface CreateVerticalPositionOptions\n extends Required<\n Pick<\n FixedPositionOptions,\n | \"yMargin\"\n | \"vhMargin\"\n | \"preventOverlap\"\n | \"disableSwapping\"\n | \"disableVHBounds\"\n >\n > {\n y: VerticalPosition;\n vh: number;\n initialY?: number;\n elHeight: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * above the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the below position if it\n * can't fit within the viewport above the container element. If it can't fit in\n * the viewport even after being swapped below or swapping is disabled, it will\n * be positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredAbove(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n screenBottom,\n elHeight,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getAboveCoord(config);\n let actualY: VerticalPosition = \"above\";\n\n if (disableVHBounds) {\n // can't actually allow a top value as a negative number since browsers\n // won't scroll upwards past the normal page top\n return { actualY, top: Math.max(0, top) };\n }\n\n if (top > vhMargin) {\n // don't need to do anything else since the top is still in the viewport and\n // since it's positioned above, we already know it can't overlap the\n // container element\n return { actualY, top };\n }\n\n const swappedTop = getBelowCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, vhMargin);\n } else {\n actualY = \"below\";\n top = swappedTop;\n }\n\n let bottom: number | undefined;\n if (\n preventOverlap &&\n // can't overlap if it's positioned below\n actualY === \"above\" &&\n top + elHeight > containerRect.top\n ) {\n bottom = screenBottom - containerRect.top + yMargin;\n }\n\n return { actualY, top, bottom };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * top of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the bottom position if it\n * can't fit within the viewport. If it can't fit in the viewport even after\n * being swapped to the bottom position or swapping is disabled, it will be\n * positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredTop(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getTopCoord(config);\n let actualY: VerticalPosition = \"top\";\n\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n const swappedTop = getBottomCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.max(top, vhMargin);\n } else {\n actualY = \"bottom\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * entered element can't fit within the viewport, it'll update the top value\n * to either be the vhMargin or position to the screen bottom boundary\n *\n * @internal\n */\nexport function createAnchoredVerticalCenter(\n config: VerticalFixConfig\n): YPosition {\n const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;\n let top = getCenterYCoord(config);\n const actualY: VerticalPosition = \"center\";\n if (disableVHBounds) {\n return { actualY, top: Math.max(0, top) };\n }\n\n top = Math.max(vhMargin, top);\n if (top + elHeight > screenBottom) {\n top = screenBottom - elHeight;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * bottom of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the top position if it can't\n * fit within the viewport. If it can't fit in the viewport even after being\n * swapped to the top position or swapping is disabled, it will be positioned to\n * the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBottom(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getBottomCoord(config);\n let actualY: VerticalPosition = \"bottom\";\n if (disableVHBounds || top > vhMargin) {\n return { actualY, top };\n }\n\n const swappedTop = getTopCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"top\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * below the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the above position if it\n * can't fit within the viewport below the container element. If it can't fit in\n * the viewport even after being swapped above or swapping is disabled, it will\n * be positioned to the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBelow(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n elHeight,\n screenBottom,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getBelowCoord(config);\n let actualY: VerticalPosition = \"below\";\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n if (preventOverlap) {\n const availableTop = containerRect.top - yMargin;\n if (disableSwapping || availableTop < screenBottom - top) {\n return {\n actualY,\n top,\n bottom: vhMargin,\n };\n }\n\n return {\n actualY: \"above\",\n top: Math.max(vhMargin, availableTop - elHeight),\n // this makes it so that the bottom of the fixed element is the top of the container\n // element. this ensures that it won't ever overlap the container element\n bottom: window.innerHeight - availableTop,\n };\n }\n\n const swappedTop = getAboveCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"above\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Creates the vertical position for a fixed element with the provided options.\n *\n * @internal\n */\nexport function createVerticalPosition(\n options: CreateVerticalPositionOptions\n): YPosition {\n const {\n y,\n vh,\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n } = options;\n\n if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {\n // the element is too big to be displayed in the viewport, so just span the\n // full viewport excluding margins\n return {\n top: vhMargin,\n bottom: vhMargin,\n actualY: \"center\",\n transformOriginY: containerRect.top,\n };\n }\n\n const config: VerticalFixConfig = {\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n screenBottom: vh - vhMargin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n };\n\n switch (y) {\n case \"above\":\n return createAnchoredAbove(config);\n case \"top\":\n return createAnchoredTop(config);\n case \"center\":\n return createAnchoredVerticalCenter(config);\n case \"bottom\":\n return createAnchoredBottom(config);\n case \"below\":\n return createAnchoredBelow(config);\n }\n}\n"],"names":["getAboveCoord","getBelowCoord","getBottomCoord","getCenterYCoord","getTopCoord","createAnchoredAbove","config","yMargin","vhMargin","screenBottom","elHeight","containerRect","preventOverlap","disableSwapping","disableVHBounds","top","actualY","Math","max","swappedTop","min","bottom","createAnchoredTop","createAnchoredVerticalCenter","createAnchoredBottom","createAnchoredBelow","availableTop","window","innerHeight","createVerticalPosition","options","y","vh","initialY","transformOriginY"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/positioning/createVerticalPosition.ts"],"sourcesContent":["import { type FixedPositionOptions, type VerticalPosition } from \"./types.js\";\nimport {\n type YCoordConfig,\n getAboveCoord,\n getBelowCoord,\n getBottomCoord,\n getCenterYCoord,\n getTopCoord,\n} from \"./utils.js\";\n\n/** @internal */\ninterface YPosition {\n top: number;\n bottom?: number;\n actualY: VerticalPosition;\n /** @since 5.1.6 */\n transformOriginY?: number;\n}\n\n/** @internal */\nexport interface VerticalFixConfig extends YCoordConfig {\n vhMargin: number;\n screenBottom: number;\n preventOverlap: boolean;\n disableSwapping: boolean;\n disableVHBounds: boolean;\n}\n\n/** @internal */\nexport interface CreateVerticalPositionOptions extends Required<\n Pick<\n FixedPositionOptions,\n | \"yMargin\"\n | \"vhMargin\"\n | \"preventOverlap\"\n | \"disableSwapping\"\n | \"disableVHBounds\"\n >\n> {\n y: VerticalPosition;\n vh: number;\n initialY?: number;\n elHeight: number;\n containerRect: DOMRect;\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * above the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the below position if it\n * can't fit within the viewport above the container element. If it can't fit in\n * the viewport even after being swapped below or swapping is disabled, it will\n * be positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredAbove(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n screenBottom,\n elHeight,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getAboveCoord(config);\n let actualY: VerticalPosition = \"above\";\n\n if (disableVHBounds) {\n // can't actually allow a top value as a negative number since browsers\n // won't scroll upwards past the normal page top\n return { actualY, top: Math.max(0, top) };\n }\n\n if (top > vhMargin) {\n // don't need to do anything else since the top is still in the viewport and\n // since it's positioned above, we already know it can't overlap the\n // container element\n return { actualY, top };\n }\n\n const swappedTop = getBelowCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, vhMargin);\n } else {\n actualY = \"below\";\n top = swappedTop;\n }\n\n let bottom: number | undefined;\n if (\n preventOverlap &&\n // can't overlap if it's positioned below\n actualY === \"above\" &&\n top + elHeight > containerRect.top\n ) {\n bottom = screenBottom - containerRect.top + yMargin;\n }\n\n return { actualY, top, bottom };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * top of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the bottom position if it\n * can't fit within the viewport. If it can't fit in the viewport even after\n * being swapped to the bottom position or swapping is disabled, it will be\n * positioned to the top viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredTop(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getTopCoord(config);\n let actualY: VerticalPosition = \"top\";\n\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n const swappedTop = getBottomCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.max(top, vhMargin);\n } else {\n actualY = \"bottom\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear at the center\n * of the container element but also within the viewport boundaries. If the\n * entered element can't fit within the viewport, it'll update the top value\n * to either be the vhMargin or position to the screen bottom boundary\n *\n * @internal\n */\nexport function createAnchoredVerticalCenter(\n config: VerticalFixConfig\n): YPosition {\n const { vhMargin, screenBottom, elHeight, disableVHBounds } = config;\n let top = getCenterYCoord(config);\n const actualY: VerticalPosition = \"center\";\n if (disableVHBounds) {\n return { actualY, top: Math.max(0, top) };\n }\n\n top = Math.max(vhMargin, top);\n if (top + elHeight > screenBottom) {\n top = screenBottom - elHeight;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear fixed to the\n * bottom of the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the top position if it can't\n * fit within the viewport. If it can't fit in the viewport even after being\n * swapped to the top position or swapping is disabled, it will be positioned to\n * the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBottom(config: VerticalFixConfig): YPosition {\n const { vhMargin, screenBottom, elHeight, disableSwapping, disableVHBounds } =\n config;\n let top = getBottomCoord(config);\n let actualY: VerticalPosition = \"bottom\";\n if (disableVHBounds || top > vhMargin) {\n return { actualY, top };\n }\n\n const swappedTop = getTopCoord(config);\n if (disableSwapping || swappedTop + elHeight > screenBottom) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"top\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Attempts to position the fixed element so that it will appear completely\n * below the container element but also within the viewport boundaries. When\n * swapping is enabled, it will attempt to swap to the above position if it\n * can't fit within the viewport below the container element. If it can't fit in\n * the viewport even after being swapped above or swapping is disabled, it will\n * be positioned to the bottom viewport boundary.\n *\n * @internal\n */\nexport function createAnchoredBelow(config: VerticalFixConfig): YPosition {\n const {\n yMargin,\n vhMargin,\n elHeight,\n screenBottom,\n containerRect,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n } = config;\n let top = getBelowCoord(config);\n let actualY: VerticalPosition = \"below\";\n if (disableVHBounds || top + elHeight <= screenBottom) {\n return { actualY, top };\n }\n\n if (preventOverlap) {\n const availableTop = containerRect.top - yMargin;\n if (disableSwapping || availableTop < screenBottom - top) {\n return {\n actualY,\n top,\n bottom: vhMargin,\n };\n }\n\n return {\n actualY: \"above\",\n top: Math.max(vhMargin, availableTop - elHeight),\n // this makes it so that the bottom of the fixed element is the top of the container\n // element. this ensures that it won't ever overlap the container element\n bottom: window.innerHeight - availableTop,\n };\n }\n\n const swappedTop = getAboveCoord(config);\n if (disableSwapping || swappedTop < vhMargin) {\n top = Math.min(top, screenBottom - elHeight);\n } else {\n actualY = \"above\";\n top = swappedTop;\n }\n\n return { actualY, top };\n}\n\n/**\n * Creates the vertical position for a fixed element with the provided options.\n *\n * @internal\n */\nexport function createVerticalPosition(\n options: CreateVerticalPositionOptions\n): YPosition {\n const {\n y,\n vh,\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n disableSwapping,\n preventOverlap,\n disableVHBounds,\n } = options;\n\n if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {\n // the element is too big to be displayed in the viewport, so just span the\n // full viewport excluding margins\n return {\n top: vhMargin,\n bottom: vhMargin,\n actualY: \"center\",\n transformOriginY: containerRect.top,\n };\n }\n\n const config: VerticalFixConfig = {\n vhMargin,\n yMargin,\n elHeight,\n initialY,\n containerRect,\n screenBottom: vh - vhMargin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n };\n\n switch (y) {\n case \"above\":\n return createAnchoredAbove(config);\n case \"top\":\n return createAnchoredTop(config);\n case \"center\":\n return createAnchoredVerticalCenter(config);\n case \"bottom\":\n return createAnchoredBottom(config);\n case \"below\":\n return createAnchoredBelow(config);\n }\n}\n"],"names":["getAboveCoord","getBelowCoord","getBottomCoord","getCenterYCoord","getTopCoord","createAnchoredAbove","config","yMargin","vhMargin","screenBottom","elHeight","containerRect","preventOverlap","disableSwapping","disableVHBounds","top","actualY","Math","max","swappedTop","min","bottom","createAnchoredTop","createAnchoredVerticalCenter","createAnchoredBottom","createAnchoredBelow","availableTop","window","innerHeight","createVerticalPosition","options","y","vh","initialY","transformOriginY"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\n\nimport {\n type CSSProperties,\n type Ref,\n type RefCallback,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport {\n type CalculateFixedPositionOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type FixedPositionStyle,\n} from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface FixedPositioningTransitionOptions<E extends HTMLElement>\n extends FixedPositioningTransitionCallbacks {\n /** {@inheritDoc TransitionOptions.nodeRef} */\n nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /**\n * Boolean if the {@link fixedToElement} is visible within the viewport.\n */\n visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n */\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> extends FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /**\n * An optional style that will be merged with the fixed positioning required\n * styles.\n *\n * @see {@link FixedPositionStyle}\n */\n style?: CSSProperties;\n\n /**\n * A ref pointing to an element that another element should be fixed to. This\n * **must** be provided for the positioning to work.\n */\n fixedTo: RefObject<FixedToElement>;\n\n /**\n * An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n */\n onResize?: EventListener;\n /** @see {@link TransitionScrollCallback} */\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n\n /**\n * Set this to `true` to disable the fixed positioning behavior so it can be\n * customized within CSS or manually instead. This was added mostly to just\n * support rendering menus inline with other content (like autocompletes\n * within a dialog).\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disabled?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n * @since 6.0.0 Renamed from `FixedPositioningHookReturnValue` to\n * `FixedPositioningImplementation` to match naming conventions.\n */\nexport interface FixedPositioningImplementation<E extends HTMLElement> {\n /**\n * A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n *\n * This should really only be used if the {@link TransitionOptions} is not\n * being used.\n */\n ref: RefCallback<E>;\n\n /**\n * This is the {@link FixedPositionStyle} merged with the\n * {@link FixedPositioningOptions.style}. This will only return `undefined`\n * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was\n * provided.\n */\n style: CSSProperties | undefined;\n\n /**\n * This should really only be used if the {@link transitionOptions} is not\n * being used.\n */\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /**\n * A function that can be called to update the style for the fixed element.\n */\n updateStyle: () => void;\n\n /** {@inheritDoc FixedPositioningTransitionOptions} */\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n *\n * return (\n * <>\n * <Button ref={fixedTo} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningImplementation<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n disabled,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties | undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX, initialY, or disabled should cause the\n // useEffect below to trigger, which is why everything else is set in a ref.\n }, [disabled, initialX, initialY]);\n\n useEffect(() => {\n if (!active || disabled) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: disabled ? propStyle : { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","disabled","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\n\nimport {\n type CSSProperties,\n type Ref,\n type RefCallback,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport {\n type CalculateFixedPositionOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type FixedPositionStyle,\n} from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/**\n * @since 4.0.0\n */\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" | \"onEntering\" | \"onEntered\" | \"onExited\"\n>;\n\n/**\n * This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface FixedPositioningTransitionOptions<\n E extends HTMLElement,\n> extends FixedPositioningTransitionCallbacks {\n /** {@inheritDoc TransitionOptions.nodeRef} */\n nodeRef?: Ref<E>;\n}\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /**\n * Boolean if the {@link fixedToElement} is visible within the viewport.\n */\n visible: boolean;\n}\n\n/**\n * This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n *\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n */\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/**\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>\n extends\n FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /**\n * An optional style that will be merged with the fixed positioning required\n * styles.\n *\n * @see {@link FixedPositionStyle}\n */\n style?: CSSProperties;\n\n /**\n * A ref pointing to an element that another element should be fixed to. This\n * **must** be provided for the positioning to work.\n */\n fixedTo: RefObject<FixedToElement>;\n\n /**\n * An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n */\n onResize?: EventListener;\n /** @see {@link TransitionScrollCallback} */\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n\n /**\n * Set this to `true` to disable the fixed positioning behavior so it can be\n * customized within CSS or manually instead. This was added mostly to just\n * support rendering menus inline with other content (like autocompletes\n * within a dialog).\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disabled?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n * @since 6.0.0 Renamed from `FixedPositioningHookReturnValue` to\n * `FixedPositioningImplementation` to match naming conventions.\n */\nexport interface FixedPositioningImplementation<E extends HTMLElement> {\n /**\n * A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n *\n * This should really only be used if the {@link TransitionOptions} is not\n * being used.\n */\n ref: RefCallback<E>;\n\n /**\n * This is the {@link FixedPositionStyle} merged with the\n * {@link FixedPositioningOptions.style}. This will only return `undefined`\n * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was\n * provided.\n */\n style: CSSProperties | undefined;\n\n /**\n * This should really only be used if the {@link transitionOptions} is not\n * being used.\n */\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /**\n * A function that can be called to update the style for the fixed element.\n */\n updateStyle: () => void;\n\n /** {@inheritDoc FixedPositioningTransitionOptions} */\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/**\n * This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n *\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useCSSTransition } from \"@react-md/core/transition/useCSSTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\n *\n * function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n *\n * return (\n * <>\n * <Button ref={fixedTo} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-fixed-positioning | useFixedPositioning Demos}\n * @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningImplementation<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n disabled,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties | undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX, initialY, or disabled should cause the\n // useEffect below to trigger, which is why everything else is set in a ref.\n }, [disabled, initialX, initialY]);\n\n useEffect(() => {\n if (!active || disabled) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: disabled ? propStyle : { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","disabled","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type CircularProgressClassNameOptions,\n circularProgress,\n circularProgressCircle,\n circularProgressSvg,\n} from \"./circularProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps,\n CircularProgressClassNameOptions {\n /**\n * An optional style to apply to the svg within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n svgStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the svg within the circular progress.\n */\n svgClassName?: string;\n\n /**\n * An optional style to apply to the circle within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n circleStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the circle within the circular progress.\n */\n circleClassName?: string;\n\n /**\n * The radius for the circle. It is generally recommended to have the radius\n * be 1/2 of the viewbox and minus a few more pixels so that there is some\n * surrounding padding. You probably shouldn't really be changing this prop\n * though.\n *\n * @defaultValue `30`\n */\n radius?: number;\n\n /**\n * The center point for the circle. This should be half of the `viewBox` prop\n * 99% of the time and probably won't be changed.\n *\n * @defaultValue `33`\n */\n center?: number;\n\n /**\n * The viewbox for the child svg. I wouldn't recommend changing this value as\n * you will also need to update the `dashoffset` in both Sass and this prop to\n * get the animation to look nice again.\n *\n * @defaultValue `0 0 66 66`\n */\n viewBox?: string;\n\n /**\n * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n * be changing this value that much as it should match the\n * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n * to help to create the determinate progress animation.\n *\n * @defaultValue `187`\n */\n dashoffset?: number;\n\n /**\n * Set this to `true` to update the indeterminate behavior to only rotate\n * which will increase performance during CPU-intensive tasks or when many\n * loading spinners are displayed at once on the page.\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disableShrink?: boolean;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}\n * @since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n const {\n id: propId,\n className,\n svgStyle,\n svgClassName,\n circleStyle: propCircleStyle,\n circleClassName,\n value,\n min = 0,\n max = 100,\n radius = 30,\n center = 33,\n viewBox = \"0 0 66 66\",\n theme,\n dense,\n dashoffset = 187,\n disableShrink,\n disableCentered,\n disableTransition,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"circular-progress\");\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n\n const circleStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propCircleStyle;\n }\n\n return {\n ...propCircleStyle,\n strokeDashoffset: dashoffset - dashoffset * progress,\n };\n }, [progress, propCircleStyle, dashoffset]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={circularProgress({\n theme,\n dense,\n disableCentered,\n className,\n })}\n >\n <svg\n style={svgStyle}\n className={circularProgressSvg({\n className: svgClassName,\n indeterminate,\n disableShrink,\n })}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={circularProgressCircle({\n className: circleClassName,\n indeterminate,\n disableShrink,\n disableTransition,\n })}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","circularProgress","circularProgressCircle","circularProgressSvg","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","svg","style","circle","r","cx","cy"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,gBAAgB,EAChBC,sBAAsB,EACtBC,mBAAmB,QACd,8BAA8B;AAsFrC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,KAAK,EACLC,KAAK,EACLC,aAAa,GAAG,EAChBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW5B,cAAc;YAAEgB;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGL,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL2B,MAAK;QACLC,iBAAelB;QACfmB,iBAAelB;QACfmB,iBAAerB;QACfN,WAAWR,iBAAiB;YAC1BoB;YACAC;YACAG;YACAhB;QACF;kBAEA,cAAA,KAAC4B;YACCC,OAAO5B;YACPD,WAAWN,oBAAoB;gBAC7BM,WAAWE;gBACXoB;gBACAP;YACF;YACAJ,SAASA;sBAET,cAAA,KAACmB;gBACCD,OAAO1B;gBACPH,WAAWP,uBAAuB;oBAChCO,WAAWK;oBACXiB;oBACAP;oBACAE;gBACF;gBACAc,GAAGtB;gBACHuB,IAAItB;gBACJuB,IAAIvB;;;;AAKd,GAAG"}
1
+ {"version":3,"sources":["../../src/progress/CircularProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type CircularProgressClassNameOptions,\n circularProgress,\n circularProgressCircle,\n circularProgressSvg,\n} from \"./circularProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `disableShrink` prop.\n * @since 6.0.0 Renamed `small` to `dense`.\n * @since 6.0.0 Renamed `centered` to `disableCentered`.\n * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no\n * longer rotates while increasing value.\n */\nexport interface CircularProgressProps\n extends\n Omit<HTMLAttributes<HTMLSpanElement>, \"id\">,\n ProgressProps,\n CircularProgressClassNameOptions {\n /**\n * An optional style to apply to the svg within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n svgStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the svg within the circular progress.\n */\n svgClassName?: string;\n\n /**\n * An optional style to apply to the circle within the circular progress. The\n * values of this style object will be merged with the current determinate\n * style (if it exists).\n */\n circleStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the circle within the circular progress.\n */\n circleClassName?: string;\n\n /**\n * The radius for the circle. It is generally recommended to have the radius\n * be 1/2 of the viewbox and minus a few more pixels so that there is some\n * surrounding padding. You probably shouldn't really be changing this prop\n * though.\n *\n * @defaultValue `30`\n */\n radius?: number;\n\n /**\n * The center point for the circle. This should be half of the `viewBox` prop\n * 99% of the time and probably won't be changed.\n *\n * @defaultValue `33`\n */\n center?: number;\n\n /**\n * The viewbox for the child svg. I wouldn't recommend changing this value as\n * you will also need to update the `dashoffset` in both Sass and this prop to\n * get the animation to look nice again.\n *\n * @defaultValue `0 0 66 66`\n */\n viewBox?: string;\n\n /**\n * The `stroke-dashoffset` for the circle within the SVG. You probably won't\n * be changing this value that much as it should match the\n * `$rmd-progress-circle-dashoffset` Sass variable. This is really just used\n * to help to create the determinate progress animation.\n *\n * @defaultValue `187`\n */\n dashoffset?: number;\n\n /**\n * Set this to `true` to update the indeterminate behavior to only rotate\n * which will increase performance during CPU-intensive tasks or when many\n * loading spinners are displayed at once on the page.\n *\n * @defaultValue `false`\n * @since 6.0.0\n */\n disableShrink?: boolean;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <CircularProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { CircularProgress } from \"@react-md/core/progress/CircularProgress\":\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <CircularProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#circular-progress | Progress Demos}\n * @since 6.0.0 Updated the determinate circular progress to no longer\n * rotate while increasing the value and require a label for accessibility.\n */\nexport const CircularProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<CircularProgressProps>\n>(function CircularProgress(props, ref) {\n const {\n id: propId,\n className,\n svgStyle,\n svgClassName,\n circleStyle: propCircleStyle,\n circleClassName,\n value,\n min = 0,\n max = 100,\n radius = 30,\n center = 33,\n viewBox = \"0 0 66 66\",\n theme,\n dense,\n dashoffset = 187,\n disableShrink,\n disableCentered,\n disableTransition,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"circular-progress\");\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n\n const circleStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propCircleStyle;\n }\n\n return {\n ...propCircleStyle,\n strokeDashoffset: dashoffset - dashoffset * progress,\n };\n }, [progress, propCircleStyle, dashoffset]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={circularProgress({\n theme,\n dense,\n disableCentered,\n className,\n })}\n >\n <svg\n style={svgStyle}\n className={circularProgressSvg({\n className: svgClassName,\n indeterminate,\n disableShrink,\n })}\n viewBox={viewBox}\n >\n <circle\n style={circleStyle}\n className={circularProgressCircle({\n className: circleClassName,\n indeterminate,\n disableShrink,\n disableTransition,\n })}\n r={radius}\n cx={center}\n cy={center}\n />\n </svg>\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","circularProgress","circularProgressCircle","circularProgressSvg","CircularProgress","props","ref","id","propId","className","svgStyle","svgClassName","circleStyle","propCircleStyle","circleClassName","value","min","max","radius","center","viewBox","theme","dense","dashoffset","disableShrink","disableCentered","disableTransition","remaining","progress","validate","strokeDashoffset","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow","svg","style","circle","r","cx","cy"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,gBAAgB,EAChBC,sBAAsB,EACtBC,mBAAmB,QACd,8BAA8B;AAuFrC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,iCAAmBP,WAG9B,SAASO,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAaC,eAAe,EAC5BC,eAAe,EACfC,KAAK,EACLC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,SAAS,EAAE,EACXC,SAAS,EAAE,EACXC,UAAU,WAAW,EACrBC,KAAK,EACLC,KAAK,EACLC,aAAa,GAAG,EAChBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjB,GAAGC,WACJ,GAAGtB;IAEJ,MAAME,KAAKR,aAAaS,QAAQ;IAChC,IAAIoB;IACJ,IAAI,OAAOb,UAAU,UAAU;QAC7Ba,WAAW5B,cAAc;YAAEgB;YAAKC;YAAKF;YAAOc,UAAU;QAAK;IAC7D;IAEA,MAAMjB,cAAcd,QAAQ;QAC1B,IAAI,OAAO8B,aAAa,UAAU;YAChC,OAAOf;QACT;QAEA,OAAO;YACL,GAAGA,eAAe;YAClBiB,kBAAkBP,aAAaA,aAAaK;QAC9C;IACF,GAAG;QAACA;QAAUf;QAAiBU;KAAW;IAE1C,MAAMQ,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGL,SAAS;QACbpB,IAAIA;QACJD,KAAKA;QACL2B,MAAK;QACLC,iBAAelB;QACfmB,iBAAelB;QACfmB,iBAAerB;QACfN,WAAWR,iBAAiB;YAC1BoB;YACAC;YACAG;YACAhB;QACF;kBAEA,cAAA,KAAC4B;YACCC,OAAO5B;YACPD,WAAWN,oBAAoB;gBAC7BM,WAAWE;gBACXoB;gBACAP;YACF;YACAJ,SAASA;sBAET,cAAA,KAACmB;gBACCD,OAAO1B;gBACPH,WAAWP,uBAAuB;oBAChCO,WAAWK;oBACXiB;oBACAP;oBACAE;gBACF;gBACAc,GAAGtB;gBACHuB,IAAItB;gBACJuB,IAAIvB;;;;AAKd,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type BaseLinearProgressClassNameOptions,\n linearProgress,\n linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n BaseLinearProgressClassNameOptions,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * @since 6.1.0\n */\n barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n barProps,\n min = 0,\n max = 100,\n value,\n reverse,\n theme,\n disableTransition,\n vertical,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={linearProgress({\n className,\n theme,\n vertical,\n indeterminate,\n })}\n >\n <span\n {...barProps}\n style={barStyle}\n className={linearProgressBar({\n className: barClassName,\n reverse,\n vertical,\n indeterminate,\n disableTransition,\n })}\n />\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAkDnC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,+BAAiBN,WAG5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR,GAAG"}
1
+ {"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type BaseLinearProgressClassNameOptions,\n linearProgress,\n linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n extends\n Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n BaseLinearProgressClassNameOptions,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * @since 6.1.0\n */\n barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n barProps,\n min = 0,\n max = 100,\n value,\n reverse,\n theme,\n disableTransition,\n vertical,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={linearProgress({\n className,\n theme,\n vertical,\n indeterminate,\n })}\n >\n <span\n {...barProps}\n style={barStyle}\n className={linearProgressBar({\n className: barClassName,\n reverse,\n vertical,\n indeterminate,\n disableTransition,\n })}\n />\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAmDnC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,+BAAiBN,WAG5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-background-color\"?: string;\n \"--rmd-progress-color\"?: string;\n \"--rmd-progress-linear-size\"?: string | number;\n }\n}\n\nexport interface BaseLinearProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions\n extends BaseLinearProgressClassNameOptions {\n /** @defaultValue `false` */\n indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n options: LinearProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n return cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate: !indeterminate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n reverse?: boolean;\n /** @defaultValue `false` */\n vertical?: boolean;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n options: LinearProgressBarClassNameOptions = {}\n): string {\n const { className, reverse, vertical, indeterminate, disableTransition } =\n options;\n\n return cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate,\n \"determinate-reverse\": !indeterminate && reverse && !vertical,\n \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAsCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}
1
+ {"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-background-color\"?: string;\n \"--rmd-progress-color\"?: string;\n \"--rmd-progress-linear-size\"?: string | number;\n }\n}\n\nexport interface BaseLinearProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions extends BaseLinearProgressClassNameOptions {\n /** @defaultValue `false` */\n indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n options: LinearProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n return cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate: !indeterminate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n reverse?: boolean;\n /** @defaultValue `false` */\n vertical?: boolean;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n options: LinearProgressBarClassNameOptions = {}\n): string {\n const { className, reverse, vertical, indeterminate, disableTransition } =\n options;\n\n return cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate,\n \"determinate-reverse\": !indeterminate && reverse && !vertical,\n \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAqCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemClassNameOptions,\n responsiveItem,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` prop since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n extends HTMLAttributes<HTMLSpanElement>,\n ResponsiveItemClassNameOptions {}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem>\n * <img alt=\"\" src=\"/some-image.png\" />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem>\n * <iframe\n * src=\"https://youtube.com/some-video-url\"\n * title=\"Some YouTube video\"\n * allowFullScreen\n * />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem aspectRatio=\"16-9\">\n * <img alt=\"\" src=\"/some-image.png\" />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(\n function ResponsiveItem(props, ref) {\n const {\n className,\n fullWidth = false,\n aspectRatio,\n responsive = \"auto\",\n children,\n ...remaining\n } = props;\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={responsiveItem({\n className,\n fullWidth,\n aspectRatio,\n responsive,\n })}\n >\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","responsiveItem","ResponsiveItem","props","ref","className","fullWidth","aspectRatio","responsive","children","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,cAAc,QACT,4BAA4B;AAenC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,eAAe;YACxBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/responsive-item/ResponsiveItem.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemClassNameOptions,\n responsiveItem,\n} from \"./responsiveItemStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaContainerProps` to\n * `ResponsiveItemProps`\n * @since 6.0.0 The `height` and `width` props were removed in favor of the\n * `aspectRatio` prop since the latest typescript string interpolation supports\n * enforcing the correct format.\n * @since 6.0.0 The `auto` prop was removed in favor of the new\n * {@link ResponsiveItemProps.responsive} prop.\n */\nexport interface ResponsiveItemProps\n extends HTMLAttributes<HTMLSpanElement>, ResponsiveItemClassNameOptions {}\n\n/**\n * @example Image Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem>\n * <img alt=\"\" src=\"/some-image.png\" />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @example Iframe Example\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem>\n * <iframe\n * src=\"https://youtube.com/some-video-url\"\n * title=\"Some YouTube video\"\n * allowFullScreen\n * />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @example Forced Aspect Ratio\n * ```tsx\n * import { ResponsiveItem } from \"@react-md/core/responsive-item/ResponsiveItem\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <ResponsiveItem aspectRatio=\"16-9\">\n * <img alt=\"\" src=\"/some-image.png\" />\n * </ResponsiveItem>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @since 6.0.0 Renamed from `MediaContainer` to\n * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(\n function ResponsiveItem(props, ref) {\n const {\n className,\n fullWidth = false,\n aspectRatio,\n responsive = \"auto\",\n children,\n ...remaining\n } = props;\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={responsiveItem({\n className,\n fullWidth,\n aspectRatio,\n responsive,\n })}\n >\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","responsiveItem","ResponsiveItem","props","ref","className","fullWidth","aspectRatio","responsive","children","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAEEC,cAAc,QACT,4BAA4B;AAcnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,WAAW,EACXC,aAAa,MAAM,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,qBACE,KAACQ;QACE,GAAGD,SAAS;QACbN,KAAKA;QACLC,WAAWJ,eAAe;YACxBI;YACAC;YACAC;YACAC;QACF;kBAECC;;AAGP,GACA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemOverlayClassNameOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type ResponsiveItemOverlayPosition,\n responsiveItemOverlay,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n extends HTMLAttributes<HTMLSpanElement>,\n ResponsiveItemOverlayClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { ResponsiveItemOverlay } from \"@react-md/core/responsive-item/ResponsiveItemOverlay\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <CardContent>\n * <img alt=\"\" src=\"/some-image.png\" />\n * <ResponsiveItemOverlay>\n * <Typography type=\"headline-5\" margin=\"none\">\n * This appears at the bottom by default.\n * </Typography>\n * </ResponsiveItemOverlay>\n * </CardContent>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @see {@link ResponsiveItemOverlayPosition}\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemOverlay = forwardRef<\n HTMLSpanElement,\n ResponsiveItemOverlayProps\n>(function ResponsiveItemOverlay(props, ref) {\n const { className, children, position = \"bottom\", ...remaining } = props;\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={responsiveItemOverlay({ className, position })}\n >\n {children}\n </span>\n );\n});\n"],"names":["forwardRef","responsiveItemOverlay","ResponsiveItemOverlay","props","ref","className","children","position","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAIEC,qBAAqB,QAChB,mCAAmC;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,sCAAwBF,WAGnC,SAASE,sBAAsBC,KAAK,EAAEC,GAAG;IACzC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEnE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,sBAAsB;YAAEI;YAAWE;QAAS;kBAEtDD;;AAGP,GAAG"}
1
+ {"version":3,"sources":["../../src/responsive-item/ResponsiveItemOverlay.tsx"],"sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport {\n type ResponsiveItemOverlayClassNameOptions,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type ResponsiveItemOverlayPosition,\n responsiveItemOverlay,\n} from \"./responsiveItemOverlayStyles.js\";\n\n/**\n * @since 6.0.0 Renamed from `MediaOverlayProps` to\n * `ResponsiveItemOverlayProps`.\n */\nexport interface ResponsiveItemOverlayProps\n extends\n HTMLAttributes<HTMLSpanElement>,\n ResponsiveItemOverlayClassNameOptions {}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { CardContent } from \"@react-md/core/card/CardContent\";\n * import { ResponsiveItemOverlay } from \"@react-md/core/responsive-item/ResponsiveItemOverlay\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <CardContent>\n * <img alt=\"\" src=\"/some-image.png\" />\n * <ResponsiveItemOverlay>\n * <Typography type=\"headline-5\" margin=\"none\">\n * This appears at the bottom by default.\n * </Typography>\n * </ResponsiveItemOverlay>\n * </CardContent>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/responsive-item | ResponsiveItem Demos}\n * @see {@link ResponsiveItemOverlayPosition}\n * @since 6.0.0 Renamed from `MediaOverlay` to `ResponsiveItemOverlay`\n * and renders as a `<span>` instead of a `<div>`.\n */\nexport const ResponsiveItemOverlay = forwardRef<\n HTMLSpanElement,\n ResponsiveItemOverlayProps\n>(function ResponsiveItemOverlay(props, ref) {\n const { className, children, position = \"bottom\", ...remaining } = props;\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={responsiveItemOverlay({ className, position })}\n >\n {children}\n </span>\n );\n});\n"],"names":["forwardRef","responsiveItemOverlay","ResponsiveItemOverlay","props","ref","className","children","position","remaining","span"],"mappings":";AAAA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAIEC,qBAAqB,QAChB,mCAAmC;AAW1C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,sCAAwBF,WAGnC,SAASE,sBAAsBC,KAAK,EAAEC,GAAG;IACzC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEnE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,sBAAsB;YAAEI;YAAWE;QAAS;kBAEtDD;;AAGP,GAAG"}