@react-md/core 1.0.0-next.2 → 1.0.0-next.3

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 (752) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/.turbo/turbo-lint.log +12 -0
  3. package/.turbo/turbo-test.log +179 -0
  4. package/.turbo/turbo-typecheck.log +4 -0
  5. package/CHANGELOG.md +103 -0
  6. package/coverage/clover.xml +437 -3
  7. package/coverage/coverage-final.json +4 -1
  8. package/coverage/lcov-report/Avatar.tsx.html +472 -0
  9. package/coverage/lcov-report/IconRotator.tsx.html +322 -0
  10. package/coverage/lcov-report/ListItem.tsx.html +892 -0
  11. package/coverage/lcov-report/Portal.tsx.html +223 -0
  12. package/coverage/lcov-report/PortalContainerProvider.tsx.html +367 -0
  13. package/coverage/lcov-report/SkeletonPlaceholder.tsx.html +613 -0
  14. package/coverage/lcov-report/Tab.tsx.html +261 -147
  15. package/coverage/lcov-report/TreeGroup.tsx.html +313 -0
  16. package/coverage/lcov-report/app-bar/AppBar.tsx.html +178 -28
  17. package/coverage/lcov-report/app-bar/index.html +7 -7
  18. package/coverage/lcov-report/button/TooltippedButton.tsx.html +445 -0
  19. package/coverage/lcov-report/button/index.html +10 -10
  20. package/coverage/lcov-report/card/Card.tsx.html +349 -0
  21. package/coverage/lcov-report/card/CardContent.tsx.html +223 -0
  22. package/coverage/lcov-report/card/ClickableCard.tsx.html +400 -0
  23. package/coverage/lcov-report/card/index.html +21 -21
  24. package/coverage/lcov-report/card/styles.ts.html +428 -392
  25. package/coverage/lcov-report/cssUtils.ts.html +86 -59
  26. package/coverage/lcov-report/draggable/index.html +21 -36
  27. package/coverage/lcov-report/draggable/useDraggable.ts.html +377 -368
  28. package/coverage/lcov-report/draggable/utils.ts.html +96 -195
  29. package/coverage/lcov-report/expansion-panel/ExpansionList.tsx.html +211 -0
  30. package/coverage/lcov-report/expansion-panel/ExpansionPanel.tsx.html +12 -15
  31. package/coverage/lcov-report/expansion-panel/index.html +34 -19
  32. package/coverage/lcov-report/expansion-panel/useExpansionPanels.ts.html +928 -0
  33. package/coverage/lcov-report/form/MenuItemInputToggle.tsx.html +2 -2
  34. package/coverage/lcov-report/form/Select.tsx.html +1663 -0
  35. package/coverage/lcov-report/form/Slider.tsx.html +163 -40
  36. package/coverage/lcov-report/form/index.html +21 -21
  37. package/coverage/lcov-report/icon/FontIcon.tsx.html +28 -28
  38. package/coverage/lcov-report/icon/index.html +1 -1
  39. package/coverage/lcov-report/index.html +41 -11
  40. package/coverage/lcov-report/interaction/UserInteractionModeProvider.tsx.html +679 -0
  41. package/coverage/lcov-report/interaction/config.ts.html +181 -0
  42. package/coverage/lcov-report/interaction/index.html +33 -18
  43. package/coverage/lcov-report/list/List.tsx.html +490 -0
  44. package/coverage/lcov-report/list/ListItem.tsx.html +886 -0
  45. package/coverage/lcov-report/list/ListItemAddon.tsx.html +286 -0
  46. package/coverage/lcov-report/list/ListItemChildren.tsx.html +445 -0
  47. package/coverage/lcov-report/list/ListItemLink.tsx.html +5 -5
  48. package/coverage/lcov-report/list/index.html +81 -6
  49. package/coverage/lcov-report/list/listItemStyles.ts.html +703 -0
  50. package/coverage/lcov-report/media-queries/appSize.ts.html +1 -1
  51. package/coverage/lcov-report/media-queries/index.html +1 -1
  52. package/coverage/lcov-report/menu/Menu.tsx.html +37 -19
  53. package/coverage/lcov-report/menu/index.html +14 -44
  54. package/coverage/lcov-report/sheet/index.html +8 -8
  55. package/coverage/lcov-report/sheet/styles.ts.html +376 -0
  56. package/coverage/lcov-report/skeletonPlaceholderUtils.ts.html +400 -0
  57. package/coverage/lcov-report/src/CoreProviders.tsx.html +20 -20
  58. package/coverage/lcov-report/src/NoSsr.tsx.html +1 -1
  59. package/coverage/lcov-report/src/SsrProvider.tsx.html +10 -10
  60. package/coverage/lcov-report/src/app-bar/AppBar.tsx.html +143 -23
  61. package/coverage/lcov-report/src/app-bar/AppBarTitle.tsx.html +1 -1
  62. package/coverage/lcov-report/src/app-bar/index.html +5 -5
  63. package/coverage/lcov-report/src/avatar/Avatar.tsx.html +2 -2
  64. package/coverage/lcov-report/src/avatar/index.html +1 -1
  65. package/coverage/lcov-report/src/avatar/styles.ts.html +1 -1
  66. package/coverage/lcov-report/src/badge/Badge.tsx.html +1 -1
  67. package/coverage/lcov-report/src/badge/index.html +1 -1
  68. package/coverage/lcov-report/src/box/Box.tsx.html +1 -1
  69. package/coverage/lcov-report/src/box/index.html +23 -8
  70. package/coverage/lcov-report/src/box/styles.ts.html +46 -46
  71. package/coverage/lcov-report/src/button/AsyncButton.tsx.html +1 -1
  72. package/coverage/lcov-report/src/button/Button.tsx.html +84 -84
  73. package/coverage/lcov-report/src/button/ButtonUnstyled.tsx.html +1 -1
  74. package/coverage/lcov-report/src/button/FloatingActionButton.tsx.html +11 -11
  75. package/coverage/lcov-report/src/button/TooltippedButton.tsx.html +445 -0
  76. package/coverage/lcov-report/src/button/buttonStyles.ts.html +52 -52
  77. package/coverage/lcov-report/src/button/buttonUnstyledStyles.ts.html +1 -1
  78. package/coverage/lcov-report/src/button/index.html +83 -8
  79. package/coverage/lcov-report/src/card/Card.tsx.html +37 -31
  80. package/coverage/lcov-report/src/card/CardContent.tsx.html +4 -4
  81. package/coverage/lcov-report/src/card/CardFooter.tsx.html +1 -1
  82. package/coverage/lcov-report/src/card/CardHeader.tsx.html +1 -1
  83. package/coverage/lcov-report/src/card/CardSubtitle.tsx.html +1 -1
  84. package/coverage/lcov-report/src/card/CardTitle.tsx.html +1 -1
  85. package/coverage/lcov-report/src/card/ClickableCard.tsx.html +400 -0
  86. package/coverage/lcov-report/src/card/index.html +24 -9
  87. package/coverage/lcov-report/src/card/styles.ts.html +58 -31
  88. package/coverage/lcov-report/src/chip/Chip.tsx.html +1 -1
  89. package/coverage/lcov-report/src/chip/index.html +7 -7
  90. package/coverage/lcov-report/src/chip/styles.ts.html +9 -12
  91. package/coverage/lcov-report/src/cssUtils.ts.html +53 -53
  92. package/coverage/lcov-report/src/delegateEvent.ts.html +109 -109
  93. package/coverage/lcov-report/src/dialog/Dialog.tsx.html +1 -1
  94. package/coverage/lcov-report/src/dialog/DialogContainer.tsx.html +1 -1
  95. package/coverage/lcov-report/src/dialog/DialogContent.tsx.html +1 -1
  96. package/coverage/lcov-report/src/dialog/DialogFooter.tsx.html +1 -1
  97. package/coverage/lcov-report/src/dialog/DialogHeader.tsx.html +1 -1
  98. package/coverage/lcov-report/src/dialog/DialogTitle.tsx.html +1 -1
  99. package/coverage/lcov-report/src/dialog/FixedDialog.tsx.html +1 -1
  100. package/coverage/lcov-report/src/dialog/NestedDialogProvider.ts.html +1 -1
  101. package/coverage/lcov-report/src/dialog/index.html +129 -9
  102. package/coverage/lcov-report/src/dialog/styles.ts.html +1 -1
  103. package/coverage/lcov-report/src/divider/Divider.tsx.html +4 -7
  104. package/coverage/lcov-report/src/divider/index.html +5 -5
  105. package/coverage/lcov-report/src/divider/styles.ts.html +1 -1
  106. package/coverage/lcov-report/src/draggable/index.html +27 -27
  107. package/coverage/lcov-report/src/draggable/useDraggable.ts.html +47 -44
  108. package/coverage/lcov-report/src/draggable/utils.ts.html +29 -131
  109. package/coverage/lcov-report/src/expansion-panel/ExpansionList.tsx.html +1 -1
  110. package/coverage/lcov-report/src/expansion-panel/ExpansionPanel.tsx.html +1 -1
  111. package/coverage/lcov-report/src/expansion-panel/ExpansionPanelHeader.tsx.html +1 -1
  112. package/coverage/lcov-report/src/expansion-panel/index.html +8 -8
  113. package/coverage/lcov-report/src/expansion-panel/useExpansionList.ts.html +1 -1
  114. package/coverage/lcov-report/src/expansion-panel/useExpansionPanels.ts.html +36 -24
  115. package/coverage/lcov-report/src/focus/index.html +1 -1
  116. package/coverage/lcov-report/src/focus/useFocusContainer.ts.html +1 -1
  117. package/coverage/lcov-report/src/focus/utils.ts.html +1 -1
  118. package/coverage/lcov-report/src/form/Checkbox.tsx.html +1 -1
  119. package/coverage/lcov-report/src/form/Fieldset.tsx.html +1 -1
  120. package/coverage/lcov-report/src/form/FileInput.tsx.html +1 -1
  121. package/coverage/lcov-report/src/form/Form.tsx.html +1 -1
  122. package/coverage/lcov-report/src/form/FormMessage.tsx.html +1 -1
  123. package/coverage/lcov-report/src/form/FormMessageContainer.tsx.html +5 -5
  124. package/coverage/lcov-report/src/form/FormMessageCounter.tsx.html +1 -1
  125. package/coverage/lcov-report/src/form/InputToggle.tsx.html +110 -110
  126. package/coverage/lcov-report/src/form/InputToggleIcon.tsx.html +63 -63
  127. package/coverage/lcov-report/src/form/Label.tsx.html +98 -98
  128. package/coverage/lcov-report/src/form/Legend.tsx.html +1 -1
  129. package/coverage/lcov-report/src/form/MenuItemCheckbox.tsx.html +1 -1
  130. package/coverage/lcov-report/src/form/MenuItemFileInput.tsx.html +1 -1
  131. package/coverage/lcov-report/src/form/MenuItemInputToggle.tsx.html +2 -2
  132. package/coverage/lcov-report/src/form/MenuItemRadio.tsx.html +1 -1
  133. package/coverage/lcov-report/src/form/MenuItemSwitch.tsx.html +1 -1
  134. package/coverage/lcov-report/src/form/MenuItemTextField.tsx.html +1 -1
  135. package/coverage/lcov-report/src/form/NativeSelect.tsx.html +1 -1
  136. package/coverage/lcov-report/src/form/OptGroup.tsx.html +1 -1
  137. package/coverage/lcov-report/src/form/Option.tsx.html +1 -1
  138. package/coverage/lcov-report/src/form/Password.tsx.html +1 -1
  139. package/coverage/lcov-report/src/form/Radio.tsx.html +3 -3
  140. package/coverage/lcov-report/src/form/Select.tsx.html +29 -5
  141. package/coverage/lcov-report/src/form/SelectValue.tsx.html +1 -1
  142. package/coverage/lcov-report/src/form/Slider.tsx.html +1 -1
  143. package/coverage/lcov-report/src/form/SliderContainer.tsx.html +1 -1
  144. package/coverage/lcov-report/src/form/SliderMark.tsx.html +1 -1
  145. package/coverage/lcov-report/src/form/SliderMarkLabel.tsx.html +1 -1
  146. package/coverage/lcov-report/src/form/SliderThumb.tsx.html +1 -1
  147. package/coverage/lcov-report/src/form/SliderTrack.tsx.html +1 -1
  148. package/coverage/lcov-report/src/form/SliderValueMarks.tsx.html +1 -1
  149. package/coverage/lcov-report/src/form/SliderValueTooltip.tsx.html +1 -1
  150. package/coverage/lcov-report/src/form/Switch.tsx.html +1 -1
  151. package/coverage/lcov-report/src/form/SwitchTrack.tsx.html +1 -1
  152. package/coverage/lcov-report/src/form/TextArea.tsx.html +2 -2
  153. package/coverage/lcov-report/src/form/TextField.tsx.html +1 -1
  154. package/coverage/lcov-report/src/form/TextFieldAddon.tsx.html +1 -1
  155. package/coverage/lcov-report/src/form/TextFieldContainer.tsx.html +1 -1
  156. package/coverage/lcov-report/src/form/TextFieldContainerStyles.ts.html +8 -8
  157. package/coverage/lcov-report/src/form/fileUtils.ts.html +1 -1
  158. package/coverage/lcov-report/src/form/formConfig.ts.html +1 -1
  159. package/coverage/lcov-report/src/form/formMessageStyles.ts.html +1 -1
  160. package/coverage/lcov-report/src/form/index.html +940 -10
  161. package/coverage/lcov-report/src/form/inputToggleStyles.ts.html +30 -30
  162. package/coverage/lcov-report/src/form/nativeSelectStyles.ts.html +1 -1
  163. package/coverage/lcov-report/src/form/optionStyles.ts.html +1 -1
  164. package/coverage/lcov-report/src/form/passwordStyles.ts.html +1 -1
  165. package/coverage/lcov-report/src/form/selectStyles.ts.html +1 -1
  166. package/coverage/lcov-report/src/form/selectUtils.ts.html +1 -1
  167. package/coverage/lcov-report/src/form/sliderUtils.ts.html +1 -1
  168. package/coverage/lcov-report/src/form/switchStyles.ts.html +1 -1
  169. package/coverage/lcov-report/src/form/textAreaStyles.ts.html +3 -3
  170. package/coverage/lcov-report/src/form/textFieldStyles.ts.html +1 -1
  171. package/coverage/lcov-report/src/form/useCheckboxGroup.ts.html +1 -1
  172. package/coverage/lcov-report/src/form/useFileUpload.ts.html +1 -1
  173. package/coverage/lcov-report/src/form/useListboxProvider.ts.html +1 -1
  174. package/coverage/lcov-report/src/form/useNumberField.ts.html +1 -1
  175. package/coverage/lcov-report/src/form/useRadioGroup.ts.html +47 -47
  176. package/coverage/lcov-report/src/form/useRangeSlider.ts.html +1 -1
  177. package/coverage/lcov-report/src/form/useResizingTextArea.ts.html +1 -1
  178. package/coverage/lcov-report/src/form/useSlider.ts.html +1 -1
  179. package/coverage/lcov-report/src/form/useTextField.ts.html +1 -1
  180. package/coverage/lcov-report/src/form/utils.ts.html +1 -1
  181. package/coverage/lcov-report/src/form/validation.ts.html +1 -1
  182. package/coverage/lcov-report/src/hoverMode/index.html +1 -1
  183. package/coverage/lcov-report/src/hoverMode/useHoverMode.ts.html +98 -98
  184. package/coverage/lcov-report/src/hoverMode/useHoverModeProvider.ts.html +19 -19
  185. package/coverage/lcov-report/src/icon/FontIcon.tsx.html +28 -28
  186. package/coverage/lcov-report/src/icon/IconRotator.tsx.html +5 -8
  187. package/coverage/lcov-report/src/icon/MaterialIcon.tsx.html +1 -1
  188. package/coverage/lcov-report/src/icon/MaterialSymbol.tsx.html +1 -1
  189. package/coverage/lcov-report/src/icon/SVGIcon.tsx.html +1 -1
  190. package/coverage/lcov-report/src/icon/TextIconSpacing.tsx.html +1 -1
  191. package/coverage/lcov-report/src/icon/iconConfig.tsx.html +8 -8
  192. package/coverage/lcov-report/src/icon/index.html +7 -7
  193. package/coverage/lcov-report/src/icon/material.ts.html +1 -1
  194. package/coverage/lcov-report/src/icon/materialConfig.ts.html +1 -1
  195. package/coverage/lcov-report/src/icon/styles.ts.html +38 -38
  196. package/coverage/lcov-report/src/index.html +354 -9
  197. package/coverage/lcov-report/src/interaction/Ripple.tsx.html +1 -1
  198. package/coverage/lcov-report/src/interaction/RippleContainer.tsx.html +1 -1
  199. package/coverage/lcov-report/src/interaction/UserInteractionModeProvider.tsx.html +87 -87
  200. package/coverage/lcov-report/src/interaction/config.ts.html +7 -7
  201. package/coverage/lcov-report/src/interaction/index.html +1 -1
  202. package/coverage/lcov-report/src/interaction/useElementInteraction.tsx.html +123 -123
  203. package/coverage/lcov-report/src/interaction/useHigherContrastChildren.tsx.html +17 -17
  204. package/coverage/lcov-report/src/interaction/utils.ts.html +1 -1
  205. package/coverage/lcov-report/src/layout/LayoutAppBar.tsx.html +1 -1
  206. package/coverage/lcov-report/src/layout/LayoutNav.tsx.html +60 -60
  207. package/coverage/lcov-report/src/layout/LayoutWindowSplitter.tsx.html +1 -1
  208. package/coverage/lcov-report/src/layout/Main.tsx.html +1 -1
  209. package/coverage/lcov-report/src/layout/index.html +15 -15
  210. package/coverage/lcov-report/src/layout/layoutNavStyles.ts.html +5 -5
  211. package/coverage/lcov-report/src/layout/layoutWindowSplitterStyles.ts.html +1 -1
  212. package/coverage/lcov-report/src/layout/mainStyles.ts.html +1 -1
  213. package/coverage/lcov-report/src/layout/useExpandableLayout.ts.html +1 -1
  214. package/coverage/lcov-report/src/layout/useHorizontalLayoutTransition.ts.html +1 -1
  215. package/coverage/lcov-report/src/layout/useLayoutAppBarHeight.ts.html +20 -32
  216. package/coverage/lcov-report/src/layout/useLayoutTree.ts.html +1 -1
  217. package/coverage/lcov-report/src/layout/useLayoutWindowSplitter.ts.html +1 -1
  218. package/coverage/lcov-report/src/layout/useMainTabIndex.ts.html +1 -1
  219. package/coverage/lcov-report/src/layout/useResizableLayout.ts.html +1 -1
  220. package/coverage/lcov-report/src/layout/useTemporaryLayout.ts.html +1 -1
  221. package/coverage/lcov-report/src/link/Link.tsx.html +1 -1
  222. package/coverage/lcov-report/src/link/SkipToMainContent.tsx.html +1 -1
  223. package/coverage/lcov-report/src/link/index.html +1 -1
  224. package/coverage/lcov-report/src/link/styles.ts.html +1 -1
  225. package/coverage/lcov-report/src/list/List.tsx.html +30 -30
  226. package/coverage/lcov-report/src/list/ListItem.tsx.html +37 -16
  227. package/coverage/lcov-report/src/list/ListItemAddon.tsx.html +13 -7
  228. package/coverage/lcov-report/src/list/ListItemChildren.tsx.html +12 -6
  229. package/coverage/lcov-report/src/list/ListItemLink.tsx.html +4 -4
  230. package/coverage/lcov-report/src/list/ListItemText.tsx.html +1 -1
  231. package/coverage/lcov-report/src/list/ListSubheader.tsx.html +1 -1
  232. package/coverage/lcov-report/src/list/getListItemHeight.ts.html +1 -1
  233. package/coverage/lcov-report/src/list/index.html +11 -11
  234. package/coverage/lcov-report/src/list/listItemStyles.ts.html +39 -9
  235. package/coverage/lcov-report/src/media-queries/AppSizeProvider.tsx.html +54 -54
  236. package/coverage/lcov-report/src/media-queries/appSize.ts.html +1 -1
  237. package/coverage/lcov-report/src/media-queries/index.html +1 -1
  238. package/coverage/lcov-report/src/media-queries/useMediaQuery.ts.html +25 -25
  239. package/coverage/lcov-report/src/menu/DropdownMenu.tsx.html +1 -1
  240. package/coverage/lcov-report/src/menu/Menu.tsx.html +2 -2
  241. package/coverage/lcov-report/src/menu/MenuBar.tsx.html +1 -1
  242. package/coverage/lcov-report/src/menu/MenuButton.tsx.html +1 -1
  243. package/coverage/lcov-report/src/menu/MenuConfigurationProvider.tsx.html +1 -1
  244. package/coverage/lcov-report/src/menu/MenuItem.tsx.html +1 -1
  245. package/coverage/lcov-report/src/menu/MenuItemButton.tsx.html +1 -1
  246. package/coverage/lcov-report/src/menu/MenuItemGroup.tsx.html +1 -1
  247. package/coverage/lcov-report/src/menu/MenuItemSeparator.tsx.html +1 -1
  248. package/coverage/lcov-report/src/menu/MenuSheet.tsx.html +1 -1
  249. package/coverage/lcov-report/src/menu/MenuVisibilityProvider.tsx.html +1 -1
  250. package/coverage/lcov-report/src/menu/MenuWidget.tsx.html +1 -1
  251. package/coverage/lcov-report/src/menu/MenuWidgetKeyboardProvider.tsx.html +1 -1
  252. package/coverage/lcov-report/src/menu/index.html +1 -1
  253. package/coverage/lcov-report/src/menu/useContextMenu.ts.html +1 -1
  254. package/coverage/lcov-report/src/menu/useMenuBarProvider.ts.html +1 -1
  255. package/coverage/lcov-report/src/menu/utils.ts.html +1 -1
  256. package/coverage/lcov-report/src/movement/constants.ts.html +1 -1
  257. package/coverage/lcov-report/src/movement/findMatchIndex.ts.html +1 -1
  258. package/coverage/lcov-report/src/movement/index.html +1 -1
  259. package/coverage/lcov-report/src/movement/useKeyboardMovementProvider.ts.html +3 -3
  260. package/coverage/lcov-report/src/movement/utils.ts.html +1 -1
  261. package/coverage/lcov-report/src/overlay/Overlay.tsx.html +1 -1
  262. package/coverage/lcov-report/src/overlay/index.html +1 -1
  263. package/coverage/lcov-report/src/overlay/overlayStyles.ts.html +1 -1
  264. package/coverage/lcov-report/src/portal/Portal.tsx.html +7 -7
  265. package/coverage/lcov-report/src/portal/PortalContainerProvider.tsx.html +59 -35
  266. package/coverage/lcov-report/src/portal/index.html +7 -7
  267. package/coverage/lcov-report/src/positioning/constants.ts.html +1 -1
  268. package/coverage/lcov-report/src/positioning/createHorizontalPosition.ts.html +47 -47
  269. package/coverage/lcov-report/src/positioning/createVerticalPosition.ts.html +55 -55
  270. package/coverage/lcov-report/src/positioning/getFixedPosition.ts.html +89 -89
  271. package/coverage/lcov-report/src/positioning/index.html +1 -1
  272. package/coverage/lcov-report/src/positioning/useFixedPositioning.ts.html +193 -193
  273. package/coverage/lcov-report/src/positioning/utils.ts.html +59 -59
  274. package/coverage/lcov-report/src/progress/CircularProgress.tsx.html +3 -3
  275. package/coverage/lcov-report/src/progress/LinearProgress.tsx.html +3 -3
  276. package/coverage/lcov-report/src/progress/getProgressA11y.ts.html +1 -1
  277. package/coverage/lcov-report/src/progress/index.html +20 -5
  278. package/coverage/lcov-report/src/responsive-item/ResponsiveItemContainer.tsx.html +1 -1
  279. package/coverage/lcov-report/src/responsive-item/ResponsiveItemOverlay.tsx.html +1 -1
  280. package/coverage/lcov-report/src/responsive-item/index.html +1 -1
  281. package/coverage/lcov-report/src/responsive-item/styles.ts.html +1 -1
  282. package/coverage/lcov-report/src/scroll/ScrollLock.tsx.html +1 -1
  283. package/coverage/lcov-report/src/scroll/getScrollbarWidth.ts.html +1 -1
  284. package/coverage/lcov-report/src/scroll/index.html +1 -1
  285. package/coverage/lcov-report/src/scroll/useScrollLock.ts.html +1 -1
  286. package/coverage/lcov-report/src/segmented-button/SegmentedButton.tsx.html +1 -1
  287. package/coverage/lcov-report/src/segmented-button/SegmentedButtonContainer.tsx.html +1 -1
  288. package/coverage/lcov-report/src/segmented-button/index.html +1 -1
  289. package/coverage/lcov-report/src/segmented-button/segmentedButtonContainerStyles.ts.html +1 -1
  290. package/coverage/lcov-report/src/segmented-button/segmentedButtonStyles.ts.html +1 -1
  291. package/coverage/lcov-report/src/sheet/Sheet.tsx.html +1 -1
  292. package/coverage/lcov-report/src/sheet/index.html +5 -5
  293. package/coverage/lcov-report/src/sheet/styles.ts.html +45 -48
  294. package/coverage/lcov-report/src/snackbar/DefaultToastRenderer.tsx.html +80 -80
  295. package/coverage/lcov-report/src/snackbar/Snackbar.tsx.html +21 -45
  296. package/coverage/lcov-report/src/snackbar/Toast.tsx.html +108 -93
  297. package/coverage/lcov-report/src/snackbar/ToastActionButton.tsx.html +1 -1
  298. package/coverage/lcov-report/src/snackbar/ToastCloseButton.tsx.html +1 -1
  299. package/coverage/lcov-report/src/snackbar/ToastContent.tsx.html +48 -48
  300. package/coverage/lcov-report/src/snackbar/ToastManager.tsx.html +278 -275
  301. package/coverage/lcov-report/src/snackbar/ToastManagerProvider.tsx.html +6 -6
  302. package/coverage/lcov-report/src/snackbar/index.html +19 -19
  303. package/coverage/lcov-report/src/snackbar/snackbarStyles.ts.html +15 -15
  304. package/coverage/lcov-report/src/snackbar/toastContentStyles.ts.html +14 -14
  305. package/coverage/lcov-report/src/snackbar/toastStyles.ts.html +27 -27
  306. package/coverage/lcov-report/src/snackbar/useCurrentToastActions.ts.html +1 -1
  307. package/coverage/lcov-report/src/suspense/CircularProgressSuspense.tsx.html +1 -1
  308. package/coverage/lcov-report/src/suspense/NullSuspense.tsx.html +1 -1
  309. package/coverage/lcov-report/src/suspense/index.html +20 -5
  310. package/coverage/lcov-report/src/table/Table.tsx.html +45 -114
  311. package/coverage/lcov-report/src/table/TableBody.tsx.html +43 -43
  312. package/coverage/lcov-report/src/table/TableCell.tsx.html +109 -298
  313. package/coverage/lcov-report/src/table/TableCellContent.tsx.html +81 -27
  314. package/coverage/lcov-report/src/table/TableCheckbox.tsx.html +16 -10
  315. package/coverage/lcov-report/src/table/TableConfigurationProvider.tsx.html +20 -20
  316. package/coverage/lcov-report/src/table/TableContainer.tsx.html +7 -28
  317. package/coverage/lcov-report/src/table/TableContainerProvider.tsx.html +1 -1
  318. package/coverage/lcov-report/src/table/TableFooter.tsx.html +64 -43
  319. package/coverage/lcov-report/src/table/TableHeader.tsx.html +41 -92
  320. package/coverage/lcov-report/src/table/TableRadio.tsx.html +676 -0
  321. package/coverage/lcov-report/src/table/TableRow.tsx.html +38 -119
  322. package/coverage/lcov-report/src/table/index.html +151 -46
  323. package/coverage/lcov-report/src/table/tableCellStyles.ts.html +334 -0
  324. package/coverage/lcov-report/src/table/tableContainerStyles.ts.html +142 -0
  325. package/coverage/lcov-report/src/table/tableFooterStyles.ts.html +166 -0
  326. package/coverage/lcov-report/src/table/tableHeaderStyles.ts.html +172 -0
  327. package/coverage/lcov-report/src/table/tableRowStyles.ts.html +169 -0
  328. package/coverage/lcov-report/src/table/tableStyles.ts.html +157 -0
  329. package/coverage/lcov-report/src/tabs/Tab.tsx.html +263 -143
  330. package/coverage/lcov-report/src/tabs/TabList.tsx.html +1 -1
  331. package/coverage/lcov-report/src/tabs/TabListScrollButton.tsx.html +1 -1
  332. package/coverage/lcov-report/src/tabs/index.html +25 -25
  333. package/coverage/lcov-report/src/tabs/tabIndicatorStyles.ts.html +37 -7
  334. package/coverage/lcov-report/src/tabs/tabListScrollButtonStyles.ts.html +1 -1
  335. package/coverage/lcov-report/src/tabs/tabListStyles.ts.html +2 -2
  336. package/coverage/lcov-report/src/tabs/tabStyles.ts.html +64 -28
  337. package/coverage/lcov-report/src/tabs/useTabList.ts.html +44 -38
  338. package/coverage/lcov-report/src/tabs/useTabs.ts.html +1 -1
  339. package/coverage/lcov-report/src/tabs/utils.ts.html +3 -3
  340. package/coverage/lcov-report/src/test-utils/IntersectionObserver.ts.html +1 -1
  341. package/coverage/lcov-report/src/test-utils/ResizeObserver.ts.html +205 -205
  342. package/coverage/lcov-report/src/test-utils/data-testid.ts.html +1 -1
  343. package/coverage/lcov-report/src/test-utils/drag.ts.html +1 -1
  344. package/coverage/lcov-report/src/test-utils/index.html +4 -4
  345. package/coverage/lcov-report/src/test-utils/jest-setup.ts.html +9 -9
  346. package/coverage/lcov-report/src/test-utils/matchMedia.ts.html +4 -4
  347. package/coverage/lcov-report/src/test-utils/polyfills/IntersectionObserver.ts.html +4 -4
  348. package/coverage/lcov-report/src/test-utils/polyfills/ResizeObserver.ts.html +3 -3
  349. package/coverage/lcov-report/src/test-utils/polyfills/index.html +1 -1
  350. package/coverage/lcov-report/src/test-utils/polyfills/matchMedia.ts.html +6 -6
  351. package/coverage/lcov-report/src/test-utils/polyfills/offsetParent.ts.html +14 -14
  352. package/coverage/lcov-report/src/test-utils/polyfills/scrollIntoView.ts.html +5 -5
  353. package/coverage/lcov-report/src/test-utils/render.tsx.html +21 -21
  354. package/coverage/lcov-report/src/test-utils/timers.ts.html +1 -1
  355. package/coverage/lcov-report/src/theme/LocalStorageColorSchemeProvider.tsx.html +1 -1
  356. package/coverage/lcov-report/src/theme/ThemeProvider.tsx.html +1 -1
  357. package/coverage/lcov-report/src/theme/colors.ts.html +1 -1
  358. package/coverage/lcov-report/src/theme/cssVars.ts.html +1 -1
  359. package/coverage/lcov-report/src/theme/index.html +1 -1
  360. package/coverage/lcov-report/src/theme/useCSSVariables.ts.html +25 -25
  361. package/coverage/lcov-report/src/theme/useColorScheme.ts.html +1 -1
  362. package/coverage/lcov-report/src/theme/useColorSchemeMetaTag.ts.html +1 -1
  363. package/coverage/lcov-report/src/theme/useColorSchemeProvider.ts.html +1 -1
  364. package/coverage/lcov-report/src/theme/usePrefersColorScheme.ts.html +1 -1
  365. package/coverage/lcov-report/src/theme/utils.ts.html +1 -1
  366. package/coverage/lcov-report/src/tooltip/Tooltip.tsx.html +62 -62
  367. package/coverage/lcov-report/src/tooltip/TooltipHoverModeProvider.tsx.html +3 -3
  368. package/coverage/lcov-report/src/tooltip/constants.ts.html +1 -1
  369. package/coverage/lcov-report/src/tooltip/index.html +9 -9
  370. package/coverage/lcov-report/src/tooltip/tooltipStyles.ts.html +12 -12
  371. package/coverage/lcov-report/src/tooltip/useTooltip.ts.html +243 -222
  372. package/coverage/lcov-report/src/tooltip/useTooltipPosition.ts.html +27 -27
  373. package/coverage/lcov-report/src/tooltip/utils.ts.html +22 -22
  374. package/coverage/lcov-report/src/transition/CSSTransition.tsx.html +1 -1
  375. package/coverage/lcov-report/src/transition/Collapse.tsx.html +1 -1
  376. package/coverage/lcov-report/src/transition/CrossFade.tsx.html +1 -1
  377. package/coverage/lcov-report/src/transition/ScaleTransition.tsx.html +1 -1
  378. package/coverage/lcov-report/src/transition/SkeletonPlaceholder.tsx.html +374 -338
  379. package/coverage/lcov-report/src/transition/Slide.tsx.html +1 -1
  380. package/coverage/lcov-report/src/transition/SlideContainer.tsx.html +1 -1
  381. package/coverage/lcov-report/src/transition/collapseStyles.ts.html +13 -13
  382. package/coverage/lcov-report/src/transition/config.ts.html +5 -5
  383. package/coverage/lcov-report/src/transition/index.html +47 -32
  384. package/coverage/lcov-report/src/transition/maxWidthTransition.ts.html +1 -1
  385. package/coverage/lcov-report/src/transition/skeletonPlaceholderUtils.ts.html +400 -0
  386. package/coverage/lcov-report/src/transition/useCSSTransition.ts.html +68 -68
  387. package/coverage/lcov-report/src/transition/useCarousel.ts.html +1 -1
  388. package/coverage/lcov-report/src/transition/useCollapseTransition.ts.html +87 -87
  389. package/coverage/lcov-report/src/transition/useCrossFadeTransition.ts.html +1 -1
  390. package/coverage/lcov-report/src/transition/useMaxWidthTransition.ts.html +1 -1
  391. package/coverage/lcov-report/src/transition/useScaleTransition.ts.html +18 -18
  392. package/coverage/lcov-report/src/transition/useSkeletonPlaceholder.ts.html +607 -562
  393. package/coverage/lcov-report/src/transition/useSlideTransition.ts.html +1 -1
  394. package/coverage/lcov-report/src/transition/useTransition.ts.html +237 -237
  395. package/coverage/lcov-report/src/transition/utils.ts.html +43 -43
  396. package/coverage/lcov-report/src/tree/DefaultTreeItemRenderer.tsx.html +18 -6
  397. package/coverage/lcov-report/src/tree/Tree.tsx.html +20 -8
  398. package/coverage/lcov-report/src/tree/TreeGroup.tsx.html +45 -45
  399. package/coverage/lcov-report/src/tree/TreeItem.tsx.html +7 -10
  400. package/coverage/lcov-report/src/tree/TreeItemExpander.tsx.html +1 -1
  401. package/coverage/lcov-report/src/tree/TreeProvider.tsx.html +8 -8
  402. package/coverage/lcov-report/src/tree/index.html +11 -11
  403. package/coverage/lcov-report/src/tree/styles.ts.html +8 -35
  404. package/coverage/lcov-report/src/tree/useTree.ts.html +1 -1
  405. package/coverage/lcov-report/src/tree/useTreeExpansion.ts.html +1 -1
  406. package/coverage/lcov-report/src/tree/useTreeItems.ts.html +1 -1
  407. package/coverage/lcov-report/src/tree/useTreeMovement.ts.html +1 -1
  408. package/coverage/lcov-report/src/tree/useTreeSelection.ts.html +1 -1
  409. package/coverage/lcov-report/src/tree/utils.ts.html +1 -1
  410. package/coverage/lcov-report/src/typography/SrOnly.tsx.html +1 -1
  411. package/coverage/lcov-report/src/typography/TextContainer.tsx.html +1 -1
  412. package/coverage/lcov-report/src/typography/Typography.tsx.html +1 -1
  413. package/coverage/lcov-report/src/typography/WritingDirectionProvider.tsx.html +1 -1
  414. package/coverage/lcov-report/src/typography/index.html +1 -1
  415. package/coverage/lcov-report/src/useAsyncAction.ts.html +1 -1
  416. package/coverage/lcov-report/src/useDebouncedFunction.ts.html +1 -1
  417. package/coverage/lcov-report/src/useDropzone.ts.html +1 -1
  418. package/coverage/lcov-report/src/useElementSize.ts.html +334 -0
  419. package/coverage/lcov-report/src/useEnsuredId.ts.html +8 -8
  420. package/coverage/lcov-report/src/useEnsuredRef.ts.html +14 -14
  421. package/coverage/lcov-report/src/useEnsuredState.ts.html +1 -1
  422. package/coverage/lcov-report/src/useHtmlClassName.ts.html +1 -1
  423. package/coverage/lcov-report/src/useIntersectionObserver.ts.html +1 -1
  424. package/coverage/lcov-report/src/useIsomorphicLayoutEffect.ts.html +1 -1
  425. package/coverage/lcov-report/src/useLocalStorage.ts.html +1 -1
  426. package/coverage/lcov-report/src/useOrientation.ts.html +32 -32
  427. package/coverage/lcov-report/src/usePageInactive.ts.html +30 -30
  428. package/coverage/lcov-report/src/useResizeListener.ts.html +38 -32
  429. package/coverage/lcov-report/src/useResizeObserver.ts.html +68 -179
  430. package/coverage/lcov-report/src/useThrottledFunction.ts.html +1 -1
  431. package/coverage/lcov-report/src/useToggle.ts.html +1 -1
  432. package/coverage/lcov-report/src/useUnmounted.ts.html +1 -1
  433. package/coverage/lcov-report/src/useWindowSize.ts.html +124 -94
  434. package/coverage/lcov-report/src/utils/RenderRecursively.tsx.html +1 -1
  435. package/coverage/lcov-report/src/utils/alphaNumericSort.ts.html +1 -1
  436. package/coverage/lcov-report/src/utils/applyRef.ts.html +11 -11
  437. package/coverage/lcov-report/src/utils/bem.ts.html +45 -45
  438. package/coverage/lcov-report/src/utils/filters.ts.html +1 -1
  439. package/coverage/lcov-report/src/utils/getClientPosition.ts.html +1 -1
  440. package/coverage/lcov-report/src/utils/getMiddleOfRange.ts.html +163 -0
  441. package/coverage/lcov-report/src/utils/getPercentage.ts.html +9 -9
  442. package/coverage/lcov-report/src/utils/getRangeDefaultValue.ts.html +66 -87
  443. package/coverage/lcov-report/src/utils/getRangeSteps.ts.html +7 -7
  444. package/coverage/lcov-report/src/utils/identity.ts.html +1 -1
  445. package/coverage/lcov-report/src/utils/index.html +46 -31
  446. package/coverage/lcov-report/src/utils/isElementVisible.ts.html +1 -1
  447. package/coverage/lcov-report/src/utils/isValidNumber.ts.html +118 -0
  448. package/coverage/lcov-report/src/utils/loop.ts.html +1 -1
  449. package/coverage/lcov-report/src/utils/nearest.ts.html +21 -21
  450. package/coverage/lcov-report/src/utils/parseCssLengthUnit.ts.html +18 -18
  451. package/coverage/lcov-report/src/utils/randomInt.ts.html +52 -52
  452. package/coverage/lcov-report/src/utils/wait.ts.html +1 -1
  453. package/coverage/lcov-report/src/utils/withinRange.ts.html +1 -1
  454. package/coverage/lcov-report/src/window-splitter/WindowSplitter.tsx.html +1 -1
  455. package/coverage/lcov-report/src/window-splitter/index.html +14 -14
  456. package/coverage/lcov-report/src/window-splitter/useWindowSplitter.ts.html +19 -67
  457. package/coverage/lcov-report/src/window-splitter/useWindowSplitterMaxValue.ts.html +256 -0
  458. package/coverage/lcov-report/suspense/CircularProgressSuspense.tsx.html +283 -0
  459. package/coverage/lcov-report/suspense/NullSuspense.tsx.html +202 -0
  460. package/coverage/lcov-report/suspense/index.html +131 -0
  461. package/coverage/lcov-report/tabIndicatorStyles.ts.html +43 -13
  462. package/coverage/lcov-report/tabListStyles.ts.html +35 -26
  463. package/coverage/lcov-report/tabStyles.ts.html +68 -26
  464. package/coverage/lcov-report/tabs/Tab.tsx.html +233 -143
  465. package/coverage/lcov-report/tabs/TabList.tsx.html +85 -85
  466. package/coverage/lcov-report/tabs/index.html +56 -11
  467. package/coverage/lcov-report/tabs/tabIndicatorStyles.ts.html +187 -0
  468. package/coverage/lcov-report/tabs/tabListStyles.ts.html +241 -0
  469. package/coverage/lcov-report/tabs/tabStyles.ts.html +253 -0
  470. package/coverage/lcov-report/tabs/useTabList.ts.html +736 -0
  471. package/coverage/lcov-report/tabs/useTabs.ts.html +1 -1
  472. package/coverage/lcov-report/tabs/utils.ts.html +1 -1
  473. package/coverage/lcov-report/test-utils/index.html +21 -21
  474. package/coverage/lcov-report/test-utils/use.ts.html +187 -0
  475. package/coverage/lcov-report/tooltip/Tooltip.tsx.html +62 -62
  476. package/coverage/lcov-report/tooltip/index.html +10 -70
  477. package/coverage/lcov-report/tooltip/useTooltip.ts.html +243 -222
  478. package/coverage/lcov-report/transition/SkeletonPlaceholder.tsx.html +595 -0
  479. package/coverage/lcov-report/transition/config.ts.html +5 -5
  480. package/coverage/lcov-report/transition/index.html +1 -1
  481. package/coverage/lcov-report/transition/skeletonPlaceholderUtils.ts.html +400 -0
  482. package/coverage/lcov-report/transition/useSkeletonPlaceholder.ts.html +952 -0
  483. package/coverage/lcov-report/tree/TreeItem.tsx.html +7 -10
  484. package/coverage/lcov-report/tree/index.html +12 -27
  485. package/coverage/lcov-report/tree/styles.ts.html +538 -0
  486. package/coverage/lcov-report/typography/Typography.tsx.html +110 -110
  487. package/coverage/lcov-report/typography/WritingDirectionProvider.tsx.html +75 -75
  488. package/coverage/lcov-report/typography/index.html +15 -15
  489. package/coverage/lcov-report/useSkeletonPlaceholder.ts.html +952 -0
  490. package/coverage/lcov-report/useTabList.ts.html +142 -136
  491. package/coverage/lcov-report/useWindowSplitter.ts.html +640 -0
  492. package/coverage/lcov-report/useWindowSplitterMaxValue.ts.html +256 -0
  493. package/coverage/lcov-report/utils/index.html +16 -31
  494. package/coverage/lcov-report/utils/isElementVisible.ts.html +14 -14
  495. package/coverage/lcov-report/utils/randomInt.ts.html +148 -0
  496. package/coverage/lcov-report/utils/wait.ts.html +1 -1
  497. package/coverage/lcov-report/window-splitter/index.html +21 -36
  498. package/coverage/lcov-report/window-splitter/useWindowSplitter.ts.html +406 -328
  499. package/coverage/lcov.info +474 -0
  500. package/dist/_box-shadows.scss +12 -2
  501. package/dist/_core.scss +0 -2
  502. package/dist/_utils.scss +22 -0
  503. package/dist/app-bar/AppBar.d.ts +4 -9
  504. package/dist/app-bar/AppBar.js +29 -7
  505. package/dist/app-bar/AppBar.js.map +1 -1
  506. package/dist/app-bar/_app-bar.scss +7 -9
  507. package/dist/avatar/Avatar.d.ts +1 -1
  508. package/dist/avatar/Avatar.js.map +1 -1
  509. package/dist/badge/_badge.scss +12 -7
  510. package/dist/button/TooltippedButton.d.ts +62 -0
  511. package/dist/button/TooltippedButton.js +62 -0
  512. package/dist/button/TooltippedButton.js.map +1 -0
  513. package/dist/card/Card.js +3 -2
  514. package/dist/card/Card.js.map +1 -1
  515. package/dist/card/CardContent.js +1 -1
  516. package/dist/card/CardContent.js.map +1 -1
  517. package/dist/card/ClickableCard.d.ts +42 -0
  518. package/dist/card/ClickableCard.js +73 -0
  519. package/dist/card/ClickableCard.js.map +1 -0
  520. package/dist/card/_card.scss +15 -9
  521. package/dist/card/styles.d.ts +8 -0
  522. package/dist/card/styles.js +6 -3
  523. package/dist/card/styles.js.map +1 -1
  524. package/dist/dialog/_dialog.scss +28 -15
  525. package/dist/divider/_divider.scss +9 -10
  526. package/dist/draggable/useDraggable.d.ts +12 -23
  527. package/dist/draggable/useDraggable.js +15 -6
  528. package/dist/draggable/useDraggable.js.map +1 -1
  529. package/dist/draggable/utils.d.ts +4 -17
  530. package/dist/draggable/utils.js +9 -25
  531. package/dist/draggable/utils.js.map +1 -1
  532. package/dist/expansion-panel/_expansion-panel.scss +25 -16
  533. package/dist/expansion-panel/useExpansionPanels.d.ts +5 -3
  534. package/dist/expansion-panel/useExpansionPanels.js +16 -9
  535. package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
  536. package/dist/form/MenuItemInputToggle.d.ts +1 -1
  537. package/dist/form/MenuItemInputToggle.js.map +1 -1
  538. package/dist/form/Select.js +6 -1
  539. package/dist/form/Select.js.map +1 -1
  540. package/dist/form/_form.scss +40 -22
  541. package/dist/icon/IconRotator.js +2 -3
  542. package/dist/icon/IconRotator.js.map +1 -1
  543. package/dist/icon/_icon.scss +7 -2
  544. package/dist/index.d.ts +5 -0
  545. package/dist/index.js +5 -0
  546. package/dist/index.js.map +1 -1
  547. package/dist/interaction/_interaction.scss +12 -9
  548. package/dist/layout/useLayoutAppBarHeight.js +5 -9
  549. package/dist/layout/useLayoutAppBarHeight.js.map +1 -1
  550. package/dist/link/_link.scss +26 -12
  551. package/dist/list/ListItem.d.ts +8 -3
  552. package/dist/list/ListItem.js +4 -3
  553. package/dist/list/ListItem.js.map +1 -1
  554. package/dist/list/ListItemAddon.js +2 -1
  555. package/dist/list/ListItemAddon.js.map +1 -1
  556. package/dist/list/ListItemChildren.js +3 -2
  557. package/dist/list/ListItemChildren.js.map +1 -1
  558. package/dist/list/ListItemLink.js +3 -3
  559. package/dist/list/ListItemLink.js.map +1 -1
  560. package/dist/list/_list.scss +29 -18
  561. package/dist/list/listItemStyles.d.ts +9 -1
  562. package/dist/list/listItemStyles.js +5 -5
  563. package/dist/list/listItemStyles.js.map +1 -1
  564. package/dist/list/types.d.ts +14 -4
  565. package/dist/list/types.js.map +1 -1
  566. package/dist/menu/Menu.d.ts +1 -1
  567. package/dist/menu/Menu.js.map +1 -1
  568. package/dist/menu/_menu.scss +3 -14
  569. package/dist/portal/PortalContainerProvider.d.ts +2 -2
  570. package/dist/portal/PortalContainerProvider.js +6 -1
  571. package/dist/portal/PortalContainerProvider.js.map +1 -1
  572. package/dist/sheet/styles.d.ts +14 -15
  573. package/dist/sheet/styles.js.map +1 -1
  574. package/dist/table/TableCheckbox.d.ts +3 -2
  575. package/dist/table/TableCheckbox.js +4 -2
  576. package/dist/table/TableCheckbox.js.map +1 -1
  577. package/dist/table/TableRadio.d.ts +3 -2
  578. package/dist/table/TableRadio.js +4 -2
  579. package/dist/table/TableRadio.js.map +1 -1
  580. package/dist/table/tableCellStyles.d.ts +1 -1
  581. package/dist/table/tableCellStyles.js.map +1 -1
  582. package/dist/tabs/Tab.d.ts +24 -3
  583. package/dist/tabs/Tab.js +15 -8
  584. package/dist/tabs/Tab.js.map +1 -1
  585. package/dist/tabs/_tabs.scss +28 -16
  586. package/dist/tabs/tabIndicatorStyles.d.ts +2 -1
  587. package/dist/tabs/tabIndicatorStyles.js +6 -3
  588. package/dist/tabs/tabIndicatorStyles.js.map +1 -1
  589. package/dist/tabs/tabListStyles.js +2 -1
  590. package/dist/tabs/tabListStyles.js.map +1 -1
  591. package/dist/tabs/tabStyles.d.ts +2 -0
  592. package/dist/tabs/tabStyles.js +6 -3
  593. package/dist/tabs/tabStyles.js.map +1 -1
  594. package/dist/tabs/useTabList.d.ts +3 -3
  595. package/dist/tabs/useTabList.js +9 -6
  596. package/dist/tabs/useTabList.js.map +1 -1
  597. package/dist/tooltip/useTooltip.d.ts +14 -14
  598. package/dist/tooltip/useTooltip.js.map +1 -1
  599. package/dist/transition/SkeletonPlaceholder.d.ts +2 -2
  600. package/dist/transition/SkeletonPlaceholder.js +8 -3
  601. package/dist/transition/SkeletonPlaceholder.js.map +1 -1
  602. package/dist/transition/_transition.scss +12 -7
  603. package/dist/transition/skeletonPlaceholderUtils.d.ts +77 -0
  604. package/dist/transition/skeletonPlaceholderUtils.js +38 -0
  605. package/dist/transition/skeletonPlaceholderUtils.js.map +1 -0
  606. package/dist/transition/useSkeletonPlaceholder.d.ts +12 -7
  607. package/dist/transition/useSkeletonPlaceholder.js +38 -37
  608. package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
  609. package/dist/tree/DefaultTreeItemRenderer.d.ts +2 -2
  610. package/dist/tree/DefaultTreeItemRenderer.js.map +1 -1
  611. package/dist/tree/Tree.d.ts +8 -4
  612. package/dist/tree/Tree.js.map +1 -1
  613. package/dist/tree/TreeItem.js +3 -4
  614. package/dist/tree/TreeItem.js.map +1 -1
  615. package/dist/tree/_tree.scss +29 -22
  616. package/dist/tree/styles.d.ts +0 -6
  617. package/dist/tree/styles.js +1 -2
  618. package/dist/tree/styles.js.map +1 -1
  619. package/dist/types.d.ts +7 -0
  620. package/dist/types.js +1 -2
  621. package/dist/types.js.map +1 -1
  622. package/dist/typography/_typography.scss +12 -2
  623. package/dist/useElementSize.d.ts +40 -0
  624. package/dist/useElementSize.js +53 -0
  625. package/dist/useElementSize.js.map +1 -0
  626. package/dist/useResizeListener.d.ts +1 -1
  627. package/dist/useResizeListener.js +1 -0
  628. package/dist/useResizeListener.js.map +1 -1
  629. package/dist/useResizeObserver.d.ts +4 -43
  630. package/dist/useResizeObserver.js +3 -42
  631. package/dist/useResizeObserver.js.map +1 -1
  632. package/dist/useWindowSize.d.ts +14 -11
  633. package/dist/useWindowSize.js +12 -7
  634. package/dist/useWindowSize.js.map +1 -1
  635. package/dist/utils/getMiddleOfRange.d.ts +13 -0
  636. package/dist/utils/getMiddleOfRange.js +20 -0
  637. package/dist/utils/getMiddleOfRange.js.map +1 -0
  638. package/dist/utils/getRangeDefaultValue.d.ts +3 -5
  639. package/dist/utils/getRangeDefaultValue.js +3 -13
  640. package/dist/utils/getRangeDefaultValue.js.map +1 -1
  641. package/dist/utils/getRangeSteps.d.ts +1 -1
  642. package/dist/utils/getRangeSteps.js +2 -2
  643. package/dist/utils/getRangeSteps.js.map +1 -1
  644. package/dist/utils/nearest.js +1 -1
  645. package/dist/utils/nearest.js.map +1 -1
  646. package/dist/window-splitter/_window-splitter.scss +11 -16
  647. package/dist/window-splitter/useWindowSplitter.d.ts +3 -5
  648. package/dist/window-splitter/useWindowSplitter.js +3 -11
  649. package/dist/window-splitter/useWindowSplitter.js.map +1 -1
  650. package/package.json +18 -18
  651. package/src/__tests__/useElementSize.tsx +181 -0
  652. package/src/__tests__/useWindowSize.node.tsx +56 -0
  653. package/src/__tests__/useWindowSize.tsx +156 -0
  654. package/src/_box-shadows.scss +12 -2
  655. package/src/_core.scss +0 -2
  656. package/src/_utils.scss +22 -0
  657. package/src/app-bar/AppBar.tsx +59 -19
  658. package/src/app-bar/__tests__/__snapshots__/AppBar.tsx.snap +21 -21
  659. package/src/app-bar/_app-bar.scss +7 -9
  660. package/src/avatar/Avatar.tsx +1 -1
  661. package/src/badge/_badge.scss +12 -7
  662. package/src/button/TooltippedButton.tsx +120 -0
  663. package/src/button/__tests__/TooltippedButton.tsx +60 -0
  664. package/src/button/__tests__/__snapshots__/TooltippedButton.tsx.snap +26 -0
  665. package/src/card/Card.tsx +5 -3
  666. package/src/card/CardContent.tsx +3 -3
  667. package/src/card/ClickableCard.tsx +105 -0
  668. package/src/card/__tests__/ClickableCard.tsx +66 -0
  669. package/src/card/__tests__/__snapshots__/CardHeader.tsx.snap +1 -1
  670. package/src/card/__tests__/__snapshots__/CardSubtitle.tsx.snap +2 -2
  671. package/src/card/__tests__/__snapshots__/ClickableCard.tsx.snap +20 -0
  672. package/src/card/__tests__/__snapshots__/styles.ts.snap +1 -1
  673. package/src/card/_card.scss +15 -9
  674. package/src/card/styles.ts +19 -10
  675. package/src/dialog/_dialog.scss +28 -15
  676. package/src/divider/_divider.scss +9 -10
  677. package/src/draggable/useDraggable.ts +26 -25
  678. package/src/draggable/utils.ts +16 -50
  679. package/src/expansion-panel/__tests__/ExpansionPanel.tsx +2 -2
  680. package/src/expansion-panel/_expansion-panel.scss +25 -16
  681. package/src/expansion-panel/useExpansionPanels.ts +20 -16
  682. package/src/form/MenuItemInputToggle.tsx +1 -1
  683. package/src/form/Select.tsx +9 -1
  684. package/src/form/_form.scss +40 -22
  685. package/src/icon/IconRotator.tsx +1 -2
  686. package/src/icon/_icon.scss +7 -2
  687. package/src/index.ts +5 -0
  688. package/src/interaction/_interaction.scss +12 -9
  689. package/src/layout/__tests__/__snapshots__/LayoutAppBar.tsx.snap +4 -4
  690. package/src/layout/__tests__/__snapshots__/useExpandableLayout.tsx.snap +1 -1
  691. package/src/layout/__tests__/__snapshots__/useLayoutTree.tsx.snap +18 -18
  692. package/src/layout/__tests__/__snapshots__/useResizableLayout.tsx.snap +1 -1
  693. package/src/layout/__tests__/__snapshots__/useTemporaryLayout.tsx.snap +1 -1
  694. package/src/layout/useLayoutAppBarHeight.ts +5 -9
  695. package/src/link/_link.scss +26 -12
  696. package/src/list/ListItem.tsx +19 -12
  697. package/src/list/ListItemAddon.tsx +5 -3
  698. package/src/list/ListItemChildren.tsx +4 -2
  699. package/src/list/ListItemLink.tsx +3 -3
  700. package/src/list/__tests__/ListItem.tsx +1 -1
  701. package/src/list/__tests__/__snapshots__/ListItem.tsx.snap +1 -1
  702. package/src/list/_list.scss +29 -18
  703. package/src/list/listItemStyles.ts +15 -5
  704. package/src/list/types.ts +15 -4
  705. package/src/menu/Menu.tsx +1 -1
  706. package/src/menu/_menu.scss +3 -14
  707. package/src/portal/PortalContainerProvider.tsx +10 -2
  708. package/src/portal/__tests__/PortalContainerProvider.tsx +23 -0
  709. package/src/sheet/styles.ts +14 -15
  710. package/src/suspense/__tests__/CircularProgressSuspense.tsx +90 -0
  711. package/src/suspense/__tests__/NullSuspense.tsx +46 -0
  712. package/src/suspense/__tests__/__snapshots__/CircularProgressSuspense.tsx.snap +24 -0
  713. package/src/table/TableCheckbox.tsx +4 -2
  714. package/src/table/TableRadio.tsx +4 -2
  715. package/src/table/tableCellStyles.ts +1 -1
  716. package/src/tabs/Tab.tsx +110 -70
  717. package/src/tabs/__tests__/Tab.tsx +25 -2
  718. package/src/tabs/__tests__/TabList.tsx +4 -4
  719. package/src/tabs/__tests__/__snapshots__/TabList.tsx.snap +2 -2
  720. package/src/tabs/_tabs.scss +28 -16
  721. package/src/tabs/tabIndicatorStyles.ts +13 -3
  722. package/src/tabs/tabListStyles.ts +1 -1
  723. package/src/tabs/tabStyles.ts +16 -4
  724. package/src/tabs/useTabList.ts +10 -8
  725. package/src/tooltip/useTooltip.ts +23 -16
  726. package/src/transition/SkeletonPlaceholder.tsx +18 -6
  727. package/src/transition/__tests__/SkeletonPlaceholder.tsx +72 -0
  728. package/src/transition/__tests__/__snapshots__/SkeletonPlaceholder.tsx.snap +24 -0
  729. package/src/transition/_transition.scss +12 -7
  730. package/src/transition/skeletonPlaceholderUtils.ts +105 -0
  731. package/src/transition/useSkeletonPlaceholder.ts +62 -47
  732. package/src/tree/DefaultTreeItemRenderer.tsx +6 -2
  733. package/src/tree/Tree.tsx +8 -4
  734. package/src/tree/TreeItem.tsx +3 -4
  735. package/src/tree/__tests__/Tree.tsx +1 -1
  736. package/src/tree/__tests__/__snapshots__/Tree.tsx.snap +124 -124
  737. package/src/tree/_tree.scss +29 -22
  738. package/src/tree/styles.ts +0 -9
  739. package/src/types.ts +8 -0
  740. package/src/typography/_typography.scss +12 -2
  741. package/src/useElementSize.ts +83 -0
  742. package/src/useResizeListener.ts +3 -1
  743. package/src/useResizeObserver.ts +7 -44
  744. package/src/useWindowSize.ts +29 -19
  745. package/src/utils/__tests__/getMiddleOfRange.ts +12 -0
  746. package/src/utils/__tests__/getRangeDefaultValue.ts +47 -0
  747. package/src/utils/getMiddleOfRange.ts +26 -0
  748. package/src/utils/getRangeDefaultValue.ts +8 -15
  749. package/src/utils/getRangeSteps.ts +2 -2
  750. package/src/utils/nearest.ts +1 -1
  751. package/src/window-splitter/_window-splitter.scss +11 -16
  752. package/src/window-splitter/useWindowSplitter.ts +12 -28
package/coverage/lcov-report/src/transition/SkeletonPlaceholder.tsx.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
26
+ <span class="strong">100% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/164</span>
28
+ <span class='fraction'>176/176</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
33
+ <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/1</span>
35
+ <span class='fraction'>1/1</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
40
+ <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/1</span>
42
+ <span class='fraction'>1/1</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
47
+ <span class="strong">100% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/164</span>
49
+ <span class='fraction'>176/176</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line low'></div>
64
+ <div class='status-line high'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -227,334 +227,370 @@
227
227
  <a name='L162'></a><a href='#L162'>162</a>
228
228
  <a name='L163'></a><a href='#L163'>163</a>
229
229
  <a name='L164'></a><a href='#L164'>164</a>
230
- <a name='L165'></a><a href='#L165'>165</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
231
- <span class="cline-any cline-no">&nbsp;</span>
232
- <span class="cline-any cline-no">&nbsp;</span>
233
- <span class="cline-any cline-no">&nbsp;</span>
234
- <span class="cline-any cline-no">&nbsp;</span>
235
- <span class="cline-any cline-no">&nbsp;</span>
236
- <span class="cline-any cline-no">&nbsp;</span>
237
- <span class="cline-any cline-no">&nbsp;</span>
238
- <span class="cline-any cline-no">&nbsp;</span>
239
- <span class="cline-any cline-no">&nbsp;</span>
240
- <span class="cline-any cline-no">&nbsp;</span>
241
- <span class="cline-any cline-no">&nbsp;</span>
242
- <span class="cline-any cline-no">&nbsp;</span>
243
- <span class="cline-any cline-no">&nbsp;</span>
244
- <span class="cline-any cline-no">&nbsp;</span>
245
- <span class="cline-any cline-no">&nbsp;</span>
246
- <span class="cline-any cline-no">&nbsp;</span>
247
- <span class="cline-any cline-no">&nbsp;</span>
248
- <span class="cline-any cline-no">&nbsp;</span>
249
- <span class="cline-any cline-no">&nbsp;</span>
250
- <span class="cline-any cline-no">&nbsp;</span>
251
- <span class="cline-any cline-no">&nbsp;</span>
252
- <span class="cline-any cline-no">&nbsp;</span>
253
- <span class="cline-any cline-no">&nbsp;</span>
254
- <span class="cline-any cline-no">&nbsp;</span>
255
- <span class="cline-any cline-no">&nbsp;</span>
256
- <span class="cline-any cline-no">&nbsp;</span>
257
- <span class="cline-any cline-no">&nbsp;</span>
258
- <span class="cline-any cline-no">&nbsp;</span>
259
- <span class="cline-any cline-no">&nbsp;</span>
260
- <span class="cline-any cline-no">&nbsp;</span>
261
- <span class="cline-any cline-no">&nbsp;</span>
262
- <span class="cline-any cline-no">&nbsp;</span>
263
- <span class="cline-any cline-no">&nbsp;</span>
264
- <span class="cline-any cline-no">&nbsp;</span>
265
- <span class="cline-any cline-no">&nbsp;</span>
266
- <span class="cline-any cline-no">&nbsp;</span>
267
- <span class="cline-any cline-no">&nbsp;</span>
268
- <span class="cline-any cline-no">&nbsp;</span>
269
- <span class="cline-any cline-no">&nbsp;</span>
270
- <span class="cline-any cline-no">&nbsp;</span>
271
- <span class="cline-any cline-no">&nbsp;</span>
272
- <span class="cline-any cline-no">&nbsp;</span>
273
- <span class="cline-any cline-no">&nbsp;</span>
274
- <span class="cline-any cline-no">&nbsp;</span>
275
- <span class="cline-any cline-no">&nbsp;</span>
276
- <span class="cline-any cline-no">&nbsp;</span>
277
- <span class="cline-any cline-no">&nbsp;</span>
278
- <span class="cline-any cline-no">&nbsp;</span>
279
- <span class="cline-any cline-no">&nbsp;</span>
280
- <span class="cline-any cline-no">&nbsp;</span>
281
- <span class="cline-any cline-no">&nbsp;</span>
282
- <span class="cline-any cline-no">&nbsp;</span>
283
- <span class="cline-any cline-no">&nbsp;</span>
284
- <span class="cline-any cline-no">&nbsp;</span>
285
- <span class="cline-any cline-no">&nbsp;</span>
286
- <span class="cline-any cline-no">&nbsp;</span>
287
- <span class="cline-any cline-no">&nbsp;</span>
288
- <span class="cline-any cline-no">&nbsp;</span>
289
- <span class="cline-any cline-no">&nbsp;</span>
290
- <span class="cline-any cline-no">&nbsp;</span>
291
- <span class="cline-any cline-no">&nbsp;</span>
292
- <span class="cline-any cline-no">&nbsp;</span>
293
- <span class="cline-any cline-no">&nbsp;</span>
294
- <span class="cline-any cline-no">&nbsp;</span>
295
- <span class="cline-any cline-no">&nbsp;</span>
296
- <span class="cline-any cline-no">&nbsp;</span>
297
- <span class="cline-any cline-no">&nbsp;</span>
298
- <span class="cline-any cline-no">&nbsp;</span>
299
- <span class="cline-any cline-no">&nbsp;</span>
300
- <span class="cline-any cline-no">&nbsp;</span>
301
- <span class="cline-any cline-no">&nbsp;</span>
302
- <span class="cline-any cline-no">&nbsp;</span>
303
- <span class="cline-any cline-no">&nbsp;</span>
304
- <span class="cline-any cline-no">&nbsp;</span>
305
- <span class="cline-any cline-no">&nbsp;</span>
306
- <span class="cline-any cline-no">&nbsp;</span>
307
- <span class="cline-any cline-no">&nbsp;</span>
308
- <span class="cline-any cline-no">&nbsp;</span>
309
- <span class="cline-any cline-no">&nbsp;</span>
310
- <span class="cline-any cline-no">&nbsp;</span>
311
- <span class="cline-any cline-no">&nbsp;</span>
312
- <span class="cline-any cline-no">&nbsp;</span>
313
- <span class="cline-any cline-no">&nbsp;</span>
314
- <span class="cline-any cline-no">&nbsp;</span>
315
- <span class="cline-any cline-no">&nbsp;</span>
316
- <span class="cline-any cline-no">&nbsp;</span>
317
- <span class="cline-any cline-no">&nbsp;</span>
318
- <span class="cline-any cline-no">&nbsp;</span>
319
- <span class="cline-any cline-no">&nbsp;</span>
320
- <span class="cline-any cline-no">&nbsp;</span>
321
- <span class="cline-any cline-no">&nbsp;</span>
322
- <span class="cline-any cline-no">&nbsp;</span>
323
- <span class="cline-any cline-no">&nbsp;</span>
324
- <span class="cline-any cline-no">&nbsp;</span>
325
- <span class="cline-any cline-no">&nbsp;</span>
326
- <span class="cline-any cline-no">&nbsp;</span>
327
- <span class="cline-any cline-no">&nbsp;</span>
328
- <span class="cline-any cline-no">&nbsp;</span>
329
- <span class="cline-any cline-no">&nbsp;</span>
330
- <span class="cline-any cline-no">&nbsp;</span>
331
- <span class="cline-any cline-no">&nbsp;</span>
332
- <span class="cline-any cline-no">&nbsp;</span>
333
- <span class="cline-any cline-no">&nbsp;</span>
334
- <span class="cline-any cline-no">&nbsp;</span>
335
- <span class="cline-any cline-no">&nbsp;</span>
336
- <span class="cline-any cline-no">&nbsp;</span>
337
- <span class="cline-any cline-no">&nbsp;</span>
338
- <span class="cline-any cline-no">&nbsp;</span>
339
- <span class="cline-any cline-no">&nbsp;</span>
340
- <span class="cline-any cline-no">&nbsp;</span>
341
- <span class="cline-any cline-no">&nbsp;</span>
342
- <span class="cline-any cline-no">&nbsp;</span>
343
- <span class="cline-any cline-no">&nbsp;</span>
344
- <span class="cline-any cline-no">&nbsp;</span>
345
- <span class="cline-any cline-no">&nbsp;</span>
346
- <span class="cline-any cline-no">&nbsp;</span>
347
- <span class="cline-any cline-no">&nbsp;</span>
348
- <span class="cline-any cline-no">&nbsp;</span>
349
- <span class="cline-any cline-no">&nbsp;</span>
350
- <span class="cline-any cline-no">&nbsp;</span>
351
- <span class="cline-any cline-no">&nbsp;</span>
352
- <span class="cline-any cline-no">&nbsp;</span>
353
- <span class="cline-any cline-no">&nbsp;</span>
354
- <span class="cline-any cline-no">&nbsp;</span>
355
- <span class="cline-any cline-no">&nbsp;</span>
356
- <span class="cline-any cline-no">&nbsp;</span>
357
- <span class="cline-any cline-no">&nbsp;</span>
358
- <span class="cline-any cline-no">&nbsp;</span>
359
- <span class="cline-any cline-no">&nbsp;</span>
360
- <span class="cline-any cline-no">&nbsp;</span>
361
- <span class="cline-any cline-no">&nbsp;</span>
362
- <span class="cline-any cline-no">&nbsp;</span>
363
- <span class="cline-any cline-no">&nbsp;</span>
364
- <span class="cline-any cline-no">&nbsp;</span>
365
- <span class="cline-any cline-no">&nbsp;</span>
366
- <span class="cline-any cline-no">&nbsp;</span>
367
- <span class="cline-any cline-no">&nbsp;</span>
368
- <span class="cline-any cline-no">&nbsp;</span>
369
- <span class="cline-any cline-no">&nbsp;</span>
370
- <span class="cline-any cline-no">&nbsp;</span>
371
- <span class="cline-any cline-no">&nbsp;</span>
372
- <span class="cline-any cline-no">&nbsp;</span>
373
- <span class="cline-any cline-no">&nbsp;</span>
374
- <span class="cline-any cline-no">&nbsp;</span>
375
- <span class="cline-any cline-no">&nbsp;</span>
376
- <span class="cline-any cline-no">&nbsp;</span>
377
- <span class="cline-any cline-no">&nbsp;</span>
378
- <span class="cline-any cline-no">&nbsp;</span>
379
- <span class="cline-any cline-no">&nbsp;</span>
380
- <span class="cline-any cline-no">&nbsp;</span>
381
- <span class="cline-any cline-no">&nbsp;</span>
382
- <span class="cline-any cline-no">&nbsp;</span>
383
- <span class="cline-any cline-no">&nbsp;</span>
384
- <span class="cline-any cline-no">&nbsp;</span>
385
- <span class="cline-any cline-no">&nbsp;</span>
386
- <span class="cline-any cline-no">&nbsp;</span>
387
- <span class="cline-any cline-no">&nbsp;</span>
388
- <span class="cline-any cline-no">&nbsp;</span>
389
- <span class="cline-any cline-no">&nbsp;</span>
390
- <span class="cline-any cline-no">&nbsp;</span>
391
- <span class="cline-any cline-no">&nbsp;</span>
392
- <span class="cline-any cline-no">&nbsp;</span>
393
- <span class="cline-any cline-no">&nbsp;</span>
394
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js"><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="branch-0 cbranch-no" title="branch not covered" >"use client";</span></span></span>
395
- <span class="cstat-no" title="statement not covered" >import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";</span>
396
- <span class="cstat-no" title="statement not covered" >import {</span>
397
- <span class="cstat-no" title="statement not covered" > useSkeletonPlaceholder,</span>
398
- <span class="cstat-no" title="statement not covered" > type SkeletonPlaceholderOptions,</span>
399
- <span class="cstat-no" title="statement not covered" >} from "./useSkeletonPlaceholder.js";</span>
400
- <span class="cstat-no" title="statement not covered" ></span>
401
- <span class="cstat-no" title="statement not covered" >declare module "react" {</span>
402
- <span class="cstat-no" title="statement not covered" > interface CSSProperties {</span>
403
- <span class="cstat-no" title="statement not covered" > "--rmd-skeleton-placeholder-background-color"?: string;</span>
404
- <span class="cstat-no" title="statement not covered" > "--rmd-skeleton-placeholder-height"?: string | number;</span>
405
- <span class="cstat-no" title="statement not covered" > "--rmd-skeleton-placeholder-width"?: string | number;</span>
406
- <span class="cstat-no" title="statement not covered" > }</span>
407
- <span class="cstat-no" title="statement not covered" >}</span>
408
- <span class="cstat-no" title="statement not covered" ></span>
409
- <span class="cstat-no" title="statement not covered" >/** @remarks \@since 6.0.0 */</span>
410
- <span class="cstat-no" title="statement not covered" >export interface SkeletonPlaceholderProps</span>
411
- <span class="cstat-no" title="statement not covered" > extends HTMLAttributes&lt;HTMLDivElement&gt;,</span>
412
- <span class="cstat-no" title="statement not covered" > SkeletonPlaceholderOptions {</span>
413
- <span class="cstat-no" title="statement not covered" > /**</span>
414
- <span class="cstat-no" title="statement not covered" > * @defaultValue `!!children`</span>
415
- <span class="cstat-no" title="statement not covered" > * @see {@link SkeletonPlaceholderOptions.disabled}</span>
416
- <span class="cstat-no" title="statement not covered" > */</span>
417
- <span class="cstat-no" title="statement not covered" > disabled?: boolean;</span>
418
- <span class="cstat-no" title="statement not covered" ></span>
419
- <span class="cstat-no" title="statement not covered" > /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */</span>
420
- <span class="cstat-no" title="statement not covered" > children?: ReactNode;</span>
421
- <span class="cstat-no" title="statement not covered" >}</span>
422
- <span class="cstat-no" title="statement not covered" ></span>
423
- <span class="cstat-no" title="statement not covered" >/**</span>
424
- <span class="cstat-no" title="statement not covered" > * **Client Component**</span>
425
- <span class="cstat-no" title="statement not covered" > *</span>
426
- <span class="cstat-no" title="statement not covered" > * @example</span>
427
- <span class="cstat-no" title="statement not covered" > * Simple Example</span>
428
- <span class="cstat-no" title="statement not covered" > * ```tsx</span>
429
- <span class="cstat-no" title="statement not covered" > * import type { ReactElement } from "@react";</span>
430
- <span class="cstat-no" title="statement not covered" > * import { SkeletonPlaceholder } from "@react-md/core";</span>
431
- <span class="cstat-no" title="statement not covered" > *</span>
432
- <span class="cstat-no" title="statement not covered" > * interface ExampleProps {</span>
433
- <span class="cstat-no" title="statement not covered" > * loading: boolean;</span>
434
- <span class="cstat-no" title="statement not covered" > * children: ReactNode;</span>
435
- <span class="cstat-no" title="statement not covered" > * }</span>
436
- <span class="cstat-no" title="statement not covered" > *</span>
437
- <span class="cstat-no" title="statement not covered" > * export default function Example({ loading, children }: ExampleProps): ReactElement {</span>
438
- <span class="cstat-no" title="statement not covered" > * if (loading) {</span>
439
- <span class="cstat-no" title="statement not covered" > * return &lt;SkeletonPlaceholder /&gt;;</span>
440
- <span class="cstat-no" title="statement not covered" > * }</span>
441
- <span class="cstat-no" title="statement not covered" > *</span>
442
- <span class="cstat-no" title="statement not covered" > * return &lt;&gt;{children}&lt;/&gt;;</span>
443
- <span class="cstat-no" title="statement not covered" > * }</span>
444
- <span class="cstat-no" title="statement not covered" > * ```</span>
445
- <span class="cstat-no" title="statement not covered" > *</span>
446
- <span class="cstat-no" title="statement not covered" > * @example</span>
447
- <span class="cstat-no" title="statement not covered" > * Pre-rendered Layout</span>
448
- <span class="cstat-no" title="statement not covered" > * ```tsx</span>
449
- <span class="cstat-no" title="statement not covered" > * import type { ReactElement } from "@react";</span>
450
- <span class="cstat-no" title="statement not covered" > * import { SkeletonPlaceholder } from "@react-md/core";</span>
451
- <span class="cstat-no" title="statement not covered" > *</span>
452
- <span class="cstat-no" title="statement not covered" > * interface Data {</span>
453
- <span class="cstat-no" title="statement not covered" > * id: string;</span>
454
- <span class="cstat-no" title="statement not covered" > * name: string;</span>
455
- <span class="cstat-no" title="statement not covered" > * createdBy: string</span>
456
- <span class="cstat-no" title="statement not covered" > * createdOn: string;</span>
457
- <span class="cstat-no" title="statement not covered" > * modifiedBy: string;</span>
458
- <span class="cstat-no" title="statement not covered" > * modifiedOn: string;</span>
459
- <span class="cstat-no" title="statement not covered" > * }</span>
460
- <span class="cstat-no" title="statement not covered" > *</span>
461
- <span class="cstat-no" title="statement not covered" > * function ShowData({</span>
462
- <span class="cstat-no" title="statement not covered" > * id,</span>
463
- <span class="cstat-no" title="statement not covered" > * name,</span>
464
- <span class="cstat-no" title="statement not covered" > * createdBy,</span>
465
- <span class="cstat-no" title="statement not covered" > * createdOn,</span>
466
- <span class="cstat-no" title="statement not covered" > * modifiedBy,</span>
467
- <span class="cstat-no" title="statement not covered" > * modifiedOn,</span>
468
- <span class="cstat-no" title="statement not covered" > * }: Partial&lt;Data&gt;:: ReactElement {</span>
469
- <span class="cstat-no" title="statement not covered" > * const loading =</span>
470
- <span class="cstat-no" title="statement not covered" > * !name &amp;&amp;</span>
471
- <span class="cstat-no" title="statement not covered" > * !createdBy &amp;&amp;</span>
472
- <span class="cstat-no" title="statement not covered" > * !createdOn &amp;&amp;</span>
473
- <span class="cstat-no" title="statement not covered" > * !modifiedBy &amp;&amp;</span>
474
- <span class="cstat-no" title="statement not covered" > * !modifiedOn;</span>
475
- <span class="cstat-no" title="statement not covered" > *</span>
476
- <span class="cstat-no" title="statement not covered" > * return (</span>
477
- <span class="cstat-no" title="statement not covered" > * &lt;Box grid gridName="custom-class-name"&gt;</span>
478
- <span class="cstat-no" title="statement not covered" > * &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
479
- <span class="cstat-no" title="statement not covered" > * {id}</span>
480
- <span class="cstat-no" title="statement not covered" > * &lt;/SkeletonPlaceholder&gt;</span>
481
- <span class="cstat-no" title="statement not covered" > * &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
482
- <span class="cstat-no" title="statement not covered" > * {name}</span>
483
- <span class="cstat-no" title="statement not covered" > * &lt;/SkeletonPlaceholder&gt;</span>
484
- <span class="cstat-no" title="statement not covered" > * &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
485
- <span class="cstat-no" title="statement not covered" > * {createdOn}</span>
486
- <span class="cstat-no" title="statement not covered" > * &lt;/SkeletonPlaceholder&gt;</span>
487
- <span class="cstat-no" title="statement not covered" > * &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
488
- <span class="cstat-no" title="statement not covered" > * {createdBy}</span>
489
- <span class="cstat-no" title="statement not covered" > * &lt;/SkeletonPlaceholder&gt;</span>
490
- <span class="cstat-no" title="statement not covered" > * &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
491
- <span class="cstat-no" title="statement not covered" > * {modifiedOn}</span>
492
- <span class="cstat-no" title="statement not covered" > * &lt;/SkeletonPlaceholder&gt;</span>
493
- <span class="cstat-no" title="statement not covered" > * &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
494
- <span class="cstat-no" title="statement not covered" > * {modifiedBy}</span>
495
- <span class="cstat-no" title="statement not covered" > * &lt;/SkeletonPlaceholder&gt;</span>
496
- <span class="cstat-no" title="statement not covered" > * &lt;/Box&gt;</span>
497
- <span class="cstat-no" title="statement not covered" > * );</span>
498
- <span class="cstat-no" title="statement not covered" > * }</span>
499
- <span class="cstat-no" title="statement not covered" > *</span>
500
- <span class="cstat-no" title="statement not covered" > * export function Example(): ReactElement {</span>
501
- <span class="cstat-no" title="statement not covered" > * const { data } = useLoadSomeDataQuery();</span>
502
- <span class="cstat-no" title="statement not covered" > *</span>
503
- <span class="cstat-no" title="statement not covered" > * const items = useMemo(() =&gt; {</span>
504
- <span class="cstat-no" title="statement not covered" > * // if the data has been fetched, just return the data</span>
505
- <span class="cstat-no" title="statement not covered" > * if (data) {</span>
506
- <span class="cstat-no" title="statement not covered" > * return data;</span>
507
- <span class="cstat-no" title="statement not covered" > * }</span>
508
- <span class="cstat-no" title="statement not covered" > *</span>
509
- <span class="cstat-no" title="statement not covered" > * // if the data does not exist, set up a skeleton of your layout by</span>
510
- <span class="cstat-no" title="statement not covered" > * // rendering a random number of items.</span>
511
- <span class="cstat-no" title="statement not covered" > * //</span>
512
- <span class="cstat-no" title="statement not covered" > * // NOTE: This is memoized so you don't create a random length each</span>
513
- <span class="cstat-no" title="statement not covered" > * // render</span>
514
- <span class="cstat-no" title="statement not covered" > * const length = randomInt({ min: 3, max: 10 })</span>
515
- <span class="cstat-no" title="statement not covered" > * return Array.from({ length }, (_, i) =&gt; ({ id: `placeholder-${i}` }));</span>
516
- <span class="cstat-no" title="statement not covered" > * }, [data])</span>
517
- <span class="cstat-no" title="statement not covered" > *</span>
518
- <span class="cstat-no" title="statement not covered" > * return (</span>
519
- <span class="cstat-no" title="statement not covered" > * &lt;List&gt;</span>
520
- <span class="cstat-no" title="statement not covered" > * {items.map((item) =&gt; &lt;ShowData {...item} /&gt;)}</span>
521
- <span class="cstat-no" title="statement not covered" > * &lt;/List&gt;</span>
522
- <span class="cstat-no" title="statement not covered" > * );</span>
523
- <span class="cstat-no" title="statement not covered" > * }</span>
524
- <span class="cstat-no" title="statement not covered" > * ```</span>
525
- <span class="cstat-no" title="statement not covered" > *</span>
526
- <span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
527
- <span class="cstat-no" title="statement not covered" > */</span>
528
- <span class="cstat-no" title="statement not covered" >export function SkeletonPlaceholder(</span>
529
- <span class="cstat-no" title="statement not covered" > props: SkeletonPlaceholderProps</span>
530
- <span class="cstat-no" title="statement not covered" >): ReactElement {</span>
531
- <span class="cstat-no" title="statement not covered" > const {</span>
532
- <span class="cstat-no" title="statement not covered" > style,</span>
533
- <span class="cstat-no" title="statement not covered" > className,</span>
534
- <span class="cstat-no" title="statement not covered" > height,</span>
535
- <span class="cstat-no" title="statement not covered" > width,</span>
536
- <span class="cstat-no" title="statement not covered" > children,</span>
537
- <span class="cstat-no" title="statement not covered" > disabled = !!children,</span>
538
- <span class="cstat-no" title="statement not covered" > minPercentage,</span>
539
- <span class="cstat-no" title="statement not covered" > maxPercentage,</span>
540
- <span class="cstat-no" title="statement not covered" > ...remaining</span>
541
- <span class="cstat-no" title="statement not covered" > } = props;</span>
542
- <span class="cstat-no" title="statement not covered" > const skeleton = useSkeletonPlaceholder({</span>
543
- <span class="cstat-no" title="statement not covered" > disabled,</span>
544
- <span class="cstat-no" title="statement not covered" > style,</span>
545
- <span class="cstat-no" title="statement not covered" > className,</span>
546
- <span class="cstat-no" title="statement not covered" > height,</span>
547
- <span class="cstat-no" title="statement not covered" > width,</span>
548
- <span class="cstat-no" title="statement not covered" > minPercentage,</span>
549
- <span class="cstat-no" title="statement not covered" > maxPercentage,</span>
550
- <span class="cstat-no" title="statement not covered" > });</span>
551
- <span class="cstat-no" title="statement not covered" ></span>
552
- <span class="cstat-no" title="statement not covered" > return (</span>
553
- <span class="cstat-no" title="statement not covered" > &lt;div {...remaining} {...skeleton}&gt;</span>
554
- <span class="cstat-no" title="statement not covered" > {children}</span>
555
- <span class="cstat-no" title="statement not covered" > &lt;/div&gt;</span>
556
- <span class="cstat-no" title="statement not covered" > );</span>
557
- <span class="cstat-no" title="statement not covered" >}</span>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
243
+ <span class="cline-any cline-yes">1x</span>
244
+ <span class="cline-any cline-yes">1x</span>
245
+ <span class="cline-any cline-yes">1x</span>
246
+ <span class="cline-any cline-yes">1x</span>
247
+ <span class="cline-any cline-yes">1x</span>
248
+ <span class="cline-any cline-yes">1x</span>
249
+ <span class="cline-any cline-yes">1x</span>
250
+ <span class="cline-any cline-yes">1x</span>
251
+ <span class="cline-any cline-yes">1x</span>
252
+ <span class="cline-any cline-yes">1x</span>
253
+ <span class="cline-any cline-yes">1x</span>
254
+ <span class="cline-any cline-yes">1x</span>
255
+ <span class="cline-any cline-yes">1x</span>
256
+ <span class="cline-any cline-yes">1x</span>
257
+ <span class="cline-any cline-yes">1x</span>
258
+ <span class="cline-any cline-yes">1x</span>
259
+ <span class="cline-any cline-yes">1x</span>
260
+ <span class="cline-any cline-yes">1x</span>
261
+ <span class="cline-any cline-yes">1x</span>
262
+ <span class="cline-any cline-yes">1x</span>
263
+ <span class="cline-any cline-yes">1x</span>
264
+ <span class="cline-any cline-yes">1x</span>
265
+ <span class="cline-any cline-yes">1x</span>
266
+ <span class="cline-any cline-yes">1x</span>
267
+ <span class="cline-any cline-yes">1x</span>
268
+ <span class="cline-any cline-yes">1x</span>
269
+ <span class="cline-any cline-yes">1x</span>
270
+ <span class="cline-any cline-yes">1x</span>
271
+ <span class="cline-any cline-yes">1x</span>
272
+ <span class="cline-any cline-yes">1x</span>
273
+ <span class="cline-any cline-yes">1x</span>
274
+ <span class="cline-any cline-yes">1x</span>
275
+ <span class="cline-any cline-yes">1x</span>
276
+ <span class="cline-any cline-yes">1x</span>
277
+ <span class="cline-any cline-yes">1x</span>
278
+ <span class="cline-any cline-yes">1x</span>
279
+ <span class="cline-any cline-yes">1x</span>
280
+ <span class="cline-any cline-yes">1x</span>
281
+ <span class="cline-any cline-yes">1x</span>
282
+ <span class="cline-any cline-yes">1x</span>
283
+ <span class="cline-any cline-yes">1x</span>
284
+ <span class="cline-any cline-yes">1x</span>
285
+ <span class="cline-any cline-yes">1x</span>
286
+ <span class="cline-any cline-yes">1x</span>
287
+ <span class="cline-any cline-yes">1x</span>
288
+ <span class="cline-any cline-yes">1x</span>
289
+ <span class="cline-any cline-yes">1x</span>
290
+ <span class="cline-any cline-yes">1x</span>
291
+ <span class="cline-any cline-yes">1x</span>
292
+ <span class="cline-any cline-yes">1x</span>
293
+ <span class="cline-any cline-yes">1x</span>
294
+ <span class="cline-any cline-yes">1x</span>
295
+ <span class="cline-any cline-yes">1x</span>
296
+ <span class="cline-any cline-yes">1x</span>
297
+ <span class="cline-any cline-yes">1x</span>
298
+ <span class="cline-any cline-yes">1x</span>
299
+ <span class="cline-any cline-yes">1x</span>
300
+ <span class="cline-any cline-yes">1x</span>
301
+ <span class="cline-any cline-yes">1x</span>
302
+ <span class="cline-any cline-yes">1x</span>
303
+ <span class="cline-any cline-yes">1x</span>
304
+ <span class="cline-any cline-yes">1x</span>
305
+ <span class="cline-any cline-yes">1x</span>
306
+ <span class="cline-any cline-yes">1x</span>
307
+ <span class="cline-any cline-yes">1x</span>
308
+ <span class="cline-any cline-yes">1x</span>
309
+ <span class="cline-any cline-yes">1x</span>
310
+ <span class="cline-any cline-yes">1x</span>
311
+ <span class="cline-any cline-yes">1x</span>
312
+ <span class="cline-any cline-yes">1x</span>
313
+ <span class="cline-any cline-yes">1x</span>
314
+ <span class="cline-any cline-yes">1x</span>
315
+ <span class="cline-any cline-yes">1x</span>
316
+ <span class="cline-any cline-yes">1x</span>
317
+ <span class="cline-any cline-yes">1x</span>
318
+ <span class="cline-any cline-yes">1x</span>
319
+ <span class="cline-any cline-yes">1x</span>
320
+ <span class="cline-any cline-yes">1x</span>
321
+ <span class="cline-any cline-yes">1x</span>
322
+ <span class="cline-any cline-yes">1x</span>
323
+ <span class="cline-any cline-yes">1x</span>
324
+ <span class="cline-any cline-yes">1x</span>
325
+ <span class="cline-any cline-yes">1x</span>
326
+ <span class="cline-any cline-yes">1x</span>
327
+ <span class="cline-any cline-yes">1x</span>
328
+ <span class="cline-any cline-yes">1x</span>
329
+ <span class="cline-any cline-yes">1x</span>
330
+ <span class="cline-any cline-yes">1x</span>
331
+ <span class="cline-any cline-yes">1x</span>
332
+ <span class="cline-any cline-yes">1x</span>
333
+ <span class="cline-any cline-yes">1x</span>
334
+ <span class="cline-any cline-yes">1x</span>
335
+ <span class="cline-any cline-yes">1x</span>
336
+ <span class="cline-any cline-yes">1x</span>
337
+ <span class="cline-any cline-yes">1x</span>
338
+ <span class="cline-any cline-yes">1x</span>
339
+ <span class="cline-any cline-yes">1x</span>
340
+ <span class="cline-any cline-yes">1x</span>
341
+ <span class="cline-any cline-yes">1x</span>
342
+ <span class="cline-any cline-yes">1x</span>
343
+ <span class="cline-any cline-yes">1x</span>
344
+ <span class="cline-any cline-yes">1x</span>
345
+ <span class="cline-any cline-yes">1x</span>
346
+ <span class="cline-any cline-yes">1x</span>
347
+ <span class="cline-any cline-yes">1x</span>
348
+ <span class="cline-any cline-yes">1x</span>
349
+ <span class="cline-any cline-yes">1x</span>
350
+ <span class="cline-any cline-yes">1x</span>
351
+ <span class="cline-any cline-yes">1x</span>
352
+ <span class="cline-any cline-yes">1x</span>
353
+ <span class="cline-any cline-yes">1x</span>
354
+ <span class="cline-any cline-yes">1x</span>
355
+ <span class="cline-any cline-yes">1x</span>
356
+ <span class="cline-any cline-yes">1x</span>
357
+ <span class="cline-any cline-yes">1x</span>
358
+ <span class="cline-any cline-yes">1x</span>
359
+ <span class="cline-any cline-yes">1x</span>
360
+ <span class="cline-any cline-yes">1x</span>
361
+ <span class="cline-any cline-yes">1x</span>
362
+ <span class="cline-any cline-yes">1x</span>
363
+ <span class="cline-any cline-yes">1x</span>
364
+ <span class="cline-any cline-yes">1x</span>
365
+ <span class="cline-any cline-yes">1x</span>
366
+ <span class="cline-any cline-yes">1x</span>
367
+ <span class="cline-any cline-yes">1x</span>
368
+ <span class="cline-any cline-yes">1x</span>
369
+ <span class="cline-any cline-yes">1x</span>
370
+ <span class="cline-any cline-yes">1x</span>
371
+ <span class="cline-any cline-yes">1x</span>
372
+ <span class="cline-any cline-yes">1x</span>
373
+ <span class="cline-any cline-yes">1x</span>
374
+ <span class="cline-any cline-yes">1x</span>
375
+ <span class="cline-any cline-yes">1x</span>
376
+ <span class="cline-any cline-yes">1x</span>
377
+ <span class="cline-any cline-yes">1x</span>
378
+ <span class="cline-any cline-yes">1x</span>
379
+ <span class="cline-any cline-yes">1x</span>
380
+ <span class="cline-any cline-yes">1x</span>
381
+ <span class="cline-any cline-yes">1x</span>
382
+ <span class="cline-any cline-yes">1x</span>
383
+ <span class="cline-any cline-yes">1x</span>
384
+ <span class="cline-any cline-yes">1x</span>
385
+ <span class="cline-any cline-yes">3x</span>
386
+ <span class="cline-any cline-yes">3x</span>
387
+ <span class="cline-any cline-yes">3x</span>
388
+ <span class="cline-any cline-yes">3x</span>
389
+ <span class="cline-any cline-yes">3x</span>
390
+ <span class="cline-any cline-yes">3x</span>
391
+ <span class="cline-any cline-yes">3x</span>
392
+ <span class="cline-any cline-yes">3x</span>
393
+ <span class="cline-any cline-yes">3x</span>
394
+ <span class="cline-any cline-yes">3x</span>
395
+ <span class="cline-any cline-yes">3x</span>
396
+ <span class="cline-any cline-yes">3x</span>
397
+ <span class="cline-any cline-yes">3x</span>
398
+ <span class="cline-any cline-yes">3x</span>
399
+ <span class="cline-any cline-yes">3x</span>
400
+ <span class="cline-any cline-yes">3x</span>
401
+ <span class="cline-any cline-yes">3x</span>
402
+ <span class="cline-any cline-yes">3x</span>
403
+ <span class="cline-any cline-yes">3x</span>
404
+ <span class="cline-any cline-yes">3x</span>
405
+ <span class="cline-any cline-yes">3x</span>
406
+ <span class="cline-any cline-yes">3x</span>
407
+ <span class="cline-any cline-yes">3x</span>
408
+ <span class="cline-any cline-yes">3x</span>
409
+ <span class="cline-any cline-yes">3x</span>
410
+ <span class="cline-any cline-yes">3x</span>
411
+ <span class="cline-any cline-yes">3x</span>
412
+ <span class="cline-any cline-yes">3x</span>
413
+ <span class="cline-any cline-yes">3x</span>
414
+ <span class="cline-any cline-yes">3x</span>
415
+ <span class="cline-any cline-yes">3x</span>
416
+ <span class="cline-any cline-yes">3x</span>
417
+ <span class="cline-any cline-yes">3x</span>
418
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
419
+ import {
420
+ forwardRef,
421
+ type HTMLAttributes,
422
+ type ReactElement,
423
+ type ReactNode,
424
+ } from "react";
425
+ import {
426
+ useSkeletonPlaceholder,
427
+ type SkeletonPlaceholderOptions,
428
+ } from "./useSkeletonPlaceholder.js";
429
+ &nbsp;
430
+ declare module "react" {
431
+ interface CSSProperties {
432
+ "--rmd-skeleton-placeholder-background-color"?: string;
433
+ "--rmd-skeleton-placeholder-height"?: string | number;
434
+ "--rmd-skeleton-placeholder-width"?: string | number;
435
+ }
436
+ }
437
+ &nbsp;
438
+ /** @remarks \@since 6.0.0 */
439
+ export interface SkeletonPlaceholderProps
440
+ extends HTMLAttributes&lt;HTMLDivElement&gt;,
441
+ SkeletonPlaceholderOptions {
442
+ /**
443
+ * @defaultValue `!!children`
444
+ * @see {@link SkeletonPlaceholderOptions.disabled}
445
+ */
446
+ disabled?: boolean;
447
+ &nbsp;
448
+ /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */
449
+ children?: ReactNode;
450
+ }
451
+ &nbsp;
452
+ /**
453
+ * **Client Component**
454
+ *
455
+ * @example
456
+ * Simple Example
457
+ * ```tsx
458
+ * import type { ReactElement } from "@react";
459
+ * import { SkeletonPlaceholder } from "@react-md/core";
460
+ *
461
+ * interface ExampleProps {
462
+ * loading: boolean;
463
+ * children: ReactNode;
464
+ * }
465
+ *
466
+ * export default function Example({ loading, children }: ExampleProps): ReactElement {
467
+ * if (loading) {
468
+ * return &lt;SkeletonPlaceholder /&gt;;
469
+ * }
470
+ *
471
+ * return &lt;&gt;{children}&lt;/&gt;;
472
+ * }
473
+ * ```
474
+ *
475
+ * @example
476
+ * Pre-rendered Layout
477
+ * ```tsx
478
+ * import type { ReactElement } from "@react";
479
+ * import { SkeletonPlaceholder } from "@react-md/core";
480
+ *
481
+ * interface Data {
482
+ * id: string;
483
+ * name: string;
484
+ * createdBy: string
485
+ * createdOn: string;
486
+ * modifiedBy: string;
487
+ * modifiedOn: string;
488
+ * }
489
+ *
490
+ * function ShowData({
491
+ * id,
492
+ * name,
493
+ * createdBy,
494
+ * createdOn,
495
+ * modifiedBy,
496
+ * modifiedOn,
497
+ * }: Partial&lt;Data&gt;:: ReactElement {
498
+ * const loading =
499
+ * !name &amp;&amp;
500
+ * !createdBy &amp;&amp;
501
+ * !createdOn &amp;&amp;
502
+ * !modifiedBy &amp;&amp;
503
+ * !modifiedOn;
504
+ *
505
+ * return (
506
+ * &lt;Box grid gridName="custom-class-name"&gt;
507
+ * &lt;SkeletonPlaceholder disabled={!loading}&gt;
508
+ * {id}
509
+ * &lt;/SkeletonPlaceholder&gt;
510
+ * &lt;SkeletonPlaceholder disabled={!loading}&gt;
511
+ * {name}
512
+ * &lt;/SkeletonPlaceholder&gt;
513
+ * &lt;SkeletonPlaceholder disabled={!loading}&gt;
514
+ * {createdOn}
515
+ * &lt;/SkeletonPlaceholder&gt;
516
+ * &lt;SkeletonPlaceholder disabled={!loading}&gt;
517
+ * {createdBy}
518
+ * &lt;/SkeletonPlaceholder&gt;
519
+ * &lt;SkeletonPlaceholder disabled={!loading}&gt;
520
+ * {modifiedOn}
521
+ * &lt;/SkeletonPlaceholder&gt;
522
+ * &lt;SkeletonPlaceholder disabled={!loading}&gt;
523
+ * {modifiedBy}
524
+ * &lt;/SkeletonPlaceholder&gt;
525
+ * &lt;/Box&gt;
526
+ * );
527
+ * }
528
+ *
529
+ * export function Example(): ReactElement {
530
+ * const { data } = useLoadSomeDataQuery();
531
+ *
532
+ * const items = useMemo(() =&gt; {
533
+ * // if the data has been fetched, just return the data
534
+ * if (data) {
535
+ * return data;
536
+ * }
537
+ *
538
+ * // if the data does not exist, set up a skeleton of your layout by
539
+ * // rendering a random number of items.
540
+ * //
541
+ * // NOTE: This is memoized so you don't create a random length each
542
+ * // render
543
+ * const length = randomInt({ min: 3, max: 10 })
544
+ * return Array.from({ length }, (_, i) =&gt; ({ id: `placeholder-${i}` }));
545
+ * }, [data])
546
+ *
547
+ * return (
548
+ * &lt;List&gt;
549
+ * {items.map((item) =&gt; &lt;ShowData {...item} /&gt;)}
550
+ * &lt;/List&gt;
551
+ * );
552
+ * }
553
+ * ```
554
+ *
555
+ * @remarks \@since 6.0.0
556
+ */
557
+ export const SkeletonPlaceholder = forwardRef&lt;
558
+ HTMLDivElement,
559
+ SkeletonPlaceholderProps
560
+ &gt;(function SkeletonPlaceholder(props, ref): ReactElement {
561
+ const {
562
+ style,
563
+ className,
564
+ height,
565
+ width,
566
+ children,
567
+ disabled = !!children,
568
+ delay,
569
+ minDelay,
570
+ maxDelay,
571
+ minPercentage,
572
+ maxPercentage,
573
+ ...remaining
574
+ } = props;
575
+ const skeleton = useSkeletonPlaceholder({
576
+ disabled,
577
+ style,
578
+ className,
579
+ height,
580
+ width,
581
+ delay,
582
+ minDelay,
583
+ maxDelay,
584
+ minPercentage,
585
+ maxPercentage,
586
+ });
587
+ &nbsp;
588
+ return (
589
+ &lt;div {...remaining} ref={ref} {...skeleton}&gt;
590
+ {children}
591
+ &lt;/div&gt;
592
+ );
593
+ });
558
594
  &nbsp;</pre></td></tr></table></pre>
559
595
 
560
596
  <div class='push'></div><!-- for sticky footer -->
@@ -562,7 +598,7 @@
562
598
  <div class='footer quiet pad2 space-top1 center small'>
563
599
  Code coverage generated by
564
600
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
565
- at 2023-11-12T03:26:02.290Z
601
+ at 2024-01-11T19:16:14.942Z
566
602
  </div>
567
603
  <script src="../../prettify.js"></script>
568
604
  <script>