@mantine/core 9.6.3 → 9.7.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 (373) hide show
  1. package/cjs/components/ActionBar/ActionBar.cjs +0 -3
  2. package/cjs/components/ActionBar/ActionBar.cjs.map +1 -1
  3. package/cjs/components/ActionBar/ActionBar.module.cjs.map +1 -1
  4. package/cjs/components/AppShell/AppShell.cjs +33 -6
  5. package/cjs/components/AppShell/AppShell.cjs.map +1 -1
  6. package/cjs/components/AppShell/AppShell.context.cjs.map +1 -1
  7. package/cjs/components/AppShell/AppShell.module.cjs +2 -1
  8. package/cjs/components/AppShell/AppShell.module.cjs.map +1 -1
  9. package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs +28 -7
  10. package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs.map +1 -1
  11. package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs +28 -7
  12. package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs.map +1 -1
  13. package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs +28 -7
  14. package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs.map +1 -1
  15. package/cjs/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.cjs +3 -2
  16. package/cjs/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.cjs.map +1 -1
  17. package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs +27 -16
  18. package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs.map +1 -1
  19. package/cjs/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.cjs +24 -16
  20. package/cjs/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.cjs.map +1 -1
  21. package/cjs/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.cjs +24 -16
  22. package/cjs/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.cjs.map +1 -1
  23. package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs +30 -19
  24. package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs.map +1 -1
  25. package/cjs/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.cjs +26 -0
  26. package/cjs/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.cjs.map +1 -0
  27. package/cjs/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.cjs +10 -0
  28. package/cjs/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.cjs.map +1 -0
  29. package/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs +13 -5
  30. package/cjs/components/AppShell/AppShellMediaStyles/get-variables/get-variables.cjs.map +1 -1
  31. package/cjs/components/AppShell/AppShellNavbar/AppShellNavbar.cjs +28 -7
  32. package/cjs/components/AppShell/AppShellNavbar/AppShellNavbar.cjs.map +1 -1
  33. package/cjs/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.cjs +270 -0
  34. package/cjs/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.cjs.map +1 -0
  35. package/cjs/components/AppShell/use-app-shell-resize/clamp-resize-size.cjs +15 -0
  36. package/cjs/components/AppShell/use-app-shell-resize/clamp-resize-size.cjs.map +1 -0
  37. package/cjs/components/AppShell/use-app-shell-resize/resize-section-config.cjs +51 -0
  38. package/cjs/components/AppShell/use-app-shell-resize/resize-section-config.cjs.map +1 -0
  39. package/cjs/components/AppShell/use-app-shell-resize/safe-area-inset.cjs +12 -0
  40. package/cjs/components/AppShell/use-app-shell-resize/safe-area-inset.cjs.map +1 -0
  41. package/cjs/components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs +127 -0
  42. package/cjs/components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs.map +1 -0
  43. package/cjs/components/AppShell/use-resizing/use-resizing.cjs +20 -2
  44. package/cjs/components/AppShell/use-resizing/use-resizing.cjs.map +1 -1
  45. package/cjs/components/Checkbox/Checkbox.cjs +10 -2
  46. package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
  47. package/cjs/components/Checkbox/Checkbox.module.cjs +1 -0
  48. package/cjs/components/Checkbox/Checkbox.module.cjs.map +1 -1
  49. package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs +10 -2
  50. package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map +1 -1
  51. package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.cjs +1 -0
  52. package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.cjs.map +1 -1
  53. package/cjs/components/Dialog/Dialog.cjs +0 -1
  54. package/cjs/components/Dialog/Dialog.cjs.map +1 -1
  55. package/cjs/components/Dialog/Dialog.module.cjs.map +1 -1
  56. package/cjs/components/HoverCard/HoverCard.cjs +34 -5
  57. package/cjs/components/HoverCard/HoverCard.cjs.map +1 -1
  58. package/cjs/components/HoverCard/HoverCard.context.cjs.map +1 -1
  59. package/cjs/components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs +13 -18
  60. package/cjs/components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs.map +1 -1
  61. package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs +6 -23
  62. package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs.map +1 -1
  63. package/cjs/components/HoverCard/use-hover-card.cjs +26 -12
  64. package/cjs/components/HoverCard/use-hover-card.cjs.map +1 -1
  65. package/cjs/components/Radio/Radio.cjs +10 -2
  66. package/cjs/components/Radio/Radio.cjs.map +1 -1
  67. package/cjs/components/Radio/Radio.module.cjs +1 -0
  68. package/cjs/components/Radio/Radio.module.cjs.map +1 -1
  69. package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs +10 -2
  70. package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs.map +1 -1
  71. package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs +1 -0
  72. package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs.map +1 -1
  73. package/cjs/components/Toggle/Toggle.cjs +80 -0
  74. package/cjs/components/Toggle/Toggle.cjs.map +1 -0
  75. package/cjs/components/Toggle/Toggle.module.cjs +7 -0
  76. package/cjs/components/Toggle/Toggle.module.cjs.map +1 -0
  77. package/cjs/components/Toolbar/Toolbar.cjs +107 -0
  78. package/cjs/components/Toolbar/Toolbar.cjs.map +1 -0
  79. package/cjs/components/Toolbar/Toolbar.context.cjs +8 -0
  80. package/cjs/components/Toolbar/Toolbar.context.cjs.map +1 -0
  81. package/cjs/components/Toolbar/Toolbar.module.cjs +12 -0
  82. package/cjs/components/Toolbar/Toolbar.module.cjs.map +1 -0
  83. package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs +31 -0
  84. package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs.map +1 -0
  85. package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs +31 -0
  86. package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs.map +1 -0
  87. package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs +47 -0
  88. package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs.map +1 -0
  89. package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs +61 -0
  90. package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.cjs.map +1 -0
  91. package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.cjs +8 -0
  92. package/cjs/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.cjs.map +1 -0
  93. package/cjs/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs +51 -0
  94. package/cjs/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.cjs.map +1 -0
  95. package/cjs/components/Toolbar/use-toolbar-navigation.cjs +76 -0
  96. package/cjs/components/Toolbar/use-toolbar-navigation.cjs.map +1 -0
  97. package/cjs/components/Tooltip/Tooltip.cjs +9 -5
  98. package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
  99. package/cjs/components/Tooltip/use-tooltip.cjs +6 -3
  100. package/cjs/components/Tooltip/use-tooltip.cjs.map +1 -1
  101. package/cjs/components/Tour/Tour.cjs +283 -0
  102. package/cjs/components/Tour/Tour.cjs.map +1 -0
  103. package/cjs/components/Tour/Tour.context.cjs +25 -0
  104. package/cjs/components/Tour/Tour.context.cjs.map +1 -0
  105. package/cjs/components/Tour/Tour.module.cjs +19 -0
  106. package/cjs/components/Tour/Tour.module.cjs.map +1 -0
  107. package/cjs/components/Tour/TourBeacon/TourBeacon.cjs +54 -0
  108. package/cjs/components/Tour/TourBeacon/TourBeacon.cjs.map +1 -0
  109. package/cjs/components/Tour/TourBeaconPositioned.cjs +46 -0
  110. package/cjs/components/Tour/TourBeaconPositioned.cjs.map +1 -0
  111. package/cjs/components/Tour/TourBody/TourBody.cjs +37 -0
  112. package/cjs/components/Tour/TourBody/TourBody.cjs.map +1 -0
  113. package/cjs/components/Tour/TourCloseButton/TourCloseButton.cjs +26 -0
  114. package/cjs/components/Tour/TourCloseButton/TourCloseButton.cjs.map +1 -0
  115. package/cjs/components/Tour/TourNavigation/TourNavigation.cjs +63 -0
  116. package/cjs/components/Tour/TourNavigation/TourNavigation.cjs.map +1 -0
  117. package/cjs/components/Tour/TourOverlay/TourOverlay.cjs +70 -0
  118. package/cjs/components/Tour/TourOverlay/TourOverlay.cjs.map +1 -0
  119. package/cjs/components/Tour/TourRoot/TourRoot.cjs +125 -0
  120. package/cjs/components/Tour/TourRoot/TourRoot.cjs.map +1 -0
  121. package/cjs/components/Tour/TourStep/TourStep.cjs +10 -0
  122. package/cjs/components/Tour/TourStep/TourStep.cjs.map +1 -0
  123. package/cjs/components/Tour/TourTitle/TourTitle.cjs +38 -0
  124. package/cjs/components/Tour/TourTitle/TourTitle.cjs.map +1 -0
  125. package/cjs/components/Tour/TourTooltip/TourTooltip.cjs +87 -0
  126. package/cjs/components/Tour/TourTooltip/TourTooltip.cjs.map +1 -0
  127. package/cjs/components/Tour/get-overlay-hit-path.cjs +17 -0
  128. package/cjs/components/Tour/get-overlay-hit-path.cjs.map +1 -0
  129. package/cjs/components/Tour/is-element-in-view.cjs +30 -0
  130. package/cjs/components/Tour/is-element-in-view.cjs.map +1 -0
  131. package/cjs/components/Tour/press-aware-auto-update.cjs +38 -0
  132. package/cjs/components/Tour/press-aware-auto-update.cjs.map +1 -0
  133. package/cjs/components/Tour/use-target-rect.cjs +61 -0
  134. package/cjs/components/Tour/use-target-rect.cjs.map +1 -0
  135. package/cjs/components/Tour/use-tooltip-auto-focus.cjs +34 -0
  136. package/cjs/components/Tour/use-tooltip-auto-focus.cjs.map +1 -0
  137. package/cjs/components/Tour/use-tour-state.cjs +102 -0
  138. package/cjs/components/Tour/use-tour-state.cjs.map +1 -0
  139. package/cjs/components/Tour/use-tour.cjs +155 -0
  140. package/cjs/components/Tour/use-tour.cjs.map +1 -0
  141. package/cjs/components/TreeSelect/TreeSelect.cjs +29 -16
  142. package/cjs/components/TreeSelect/TreeSelect.cjs.map +1 -1
  143. package/cjs/index.cjs +41 -1
  144. package/esm/components/ActionBar/ActionBar.mjs +0 -3
  145. package/esm/components/ActionBar/ActionBar.mjs.map +1 -1
  146. package/esm/components/ActionBar/ActionBar.module.mjs.map +1 -1
  147. package/esm/components/AppShell/AppShell.context.mjs.map +1 -1
  148. package/esm/components/AppShell/AppShell.mjs +35 -8
  149. package/esm/components/AppShell/AppShell.mjs.map +1 -1
  150. package/esm/components/AppShell/AppShell.module.mjs +2 -1
  151. package/esm/components/AppShell/AppShell.module.mjs.map +1 -1
  152. package/esm/components/AppShell/AppShellAside/AppShellAside.mjs +29 -8
  153. package/esm/components/AppShell/AppShellAside/AppShellAside.mjs.map +1 -1
  154. package/esm/components/AppShell/AppShellFooter/AppShellFooter.mjs +29 -8
  155. package/esm/components/AppShell/AppShellFooter/AppShellFooter.mjs.map +1 -1
  156. package/esm/components/AppShell/AppShellHeader/AppShellHeader.mjs +29 -8
  157. package/esm/components/AppShell/AppShellHeader/AppShellHeader.mjs.map +1 -1
  158. package/esm/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.mjs +3 -2
  159. package/esm/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.mjs.map +1 -1
  160. package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs +27 -16
  161. package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs.map +1 -1
  162. package/esm/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.mjs +24 -16
  163. package/esm/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.mjs.map +1 -1
  164. package/esm/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.mjs +24 -16
  165. package/esm/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.mjs.map +1 -1
  166. package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs +30 -19
  167. package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs.map +1 -1
  168. package/esm/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.mjs +26 -0
  169. package/esm/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.mjs.map +1 -0
  170. package/esm/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.mjs +10 -0
  171. package/esm/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.mjs.map +1 -0
  172. package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs +13 -5
  173. package/esm/components/AppShell/AppShellMediaStyles/get-variables/get-variables.mjs.map +1 -1
  174. package/esm/components/AppShell/AppShellNavbar/AppShellNavbar.mjs +29 -8
  175. package/esm/components/AppShell/AppShellNavbar/AppShellNavbar.mjs.map +1 -1
  176. package/esm/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.mjs +270 -0
  177. package/esm/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.mjs.map +1 -0
  178. package/esm/components/AppShell/use-app-shell-resize/clamp-resize-size.mjs +14 -0
  179. package/esm/components/AppShell/use-app-shell-resize/clamp-resize-size.mjs.map +1 -0
  180. package/esm/components/AppShell/use-app-shell-resize/resize-section-config.mjs +49 -0
  181. package/esm/components/AppShell/use-app-shell-resize/resize-section-config.mjs.map +1 -0
  182. package/esm/components/AppShell/use-app-shell-resize/safe-area-inset.mjs +12 -0
  183. package/esm/components/AppShell/use-app-shell-resize/safe-area-inset.mjs.map +1 -0
  184. package/esm/components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs +127 -0
  185. package/esm/components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs.map +1 -0
  186. package/esm/components/AppShell/use-resizing/use-resizing.mjs +21 -3
  187. package/esm/components/AppShell/use-resizing/use-resizing.mjs.map +1 -1
  188. package/esm/components/Checkbox/Checkbox.mjs +10 -2
  189. package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
  190. package/esm/components/Checkbox/Checkbox.module.mjs +1 -0
  191. package/esm/components/Checkbox/Checkbox.module.mjs.map +1 -1
  192. package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs +10 -2
  193. package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map +1 -1
  194. package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.mjs +1 -0
  195. package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.mjs.map +1 -1
  196. package/esm/components/Dialog/Dialog.mjs +0 -1
  197. package/esm/components/Dialog/Dialog.mjs.map +1 -1
  198. package/esm/components/Dialog/Dialog.module.mjs.map +1 -1
  199. package/esm/components/HoverCard/HoverCard.context.mjs.map +1 -1
  200. package/esm/components/HoverCard/HoverCard.mjs +34 -5
  201. package/esm/components/HoverCard/HoverCard.mjs.map +1 -1
  202. package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs +13 -18
  203. package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs.map +1 -1
  204. package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs +7 -24
  205. package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map +1 -1
  206. package/esm/components/HoverCard/use-hover-card.mjs +27 -13
  207. package/esm/components/HoverCard/use-hover-card.mjs.map +1 -1
  208. package/esm/components/Radio/Radio.mjs +10 -2
  209. package/esm/components/Radio/Radio.mjs.map +1 -1
  210. package/esm/components/Radio/Radio.module.mjs +1 -0
  211. package/esm/components/Radio/Radio.module.mjs.map +1 -1
  212. package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs +10 -2
  213. package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs.map +1 -1
  214. package/esm/components/Radio/RadioIndicator/RadioIndicator.module.mjs +1 -0
  215. package/esm/components/Radio/RadioIndicator/RadioIndicator.module.mjs.map +1 -1
  216. package/esm/components/Toggle/Toggle.mjs +80 -0
  217. package/esm/components/Toggle/Toggle.mjs.map +1 -0
  218. package/esm/components/Toggle/Toggle.module.mjs +7 -0
  219. package/esm/components/Toggle/Toggle.module.mjs.map +1 -0
  220. package/esm/components/Toolbar/Toolbar.context.mjs +8 -0
  221. package/esm/components/Toolbar/Toolbar.context.mjs.map +1 -0
  222. package/esm/components/Toolbar/Toolbar.mjs +107 -0
  223. package/esm/components/Toolbar/Toolbar.mjs.map +1 -0
  224. package/esm/components/Toolbar/Toolbar.module.mjs +12 -0
  225. package/esm/components/Toolbar/Toolbar.module.mjs.map +1 -0
  226. package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs +31 -0
  227. package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs.map +1 -0
  228. package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs +31 -0
  229. package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs.map +1 -0
  230. package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs +47 -0
  231. package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs.map +1 -0
  232. package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs +8 -0
  233. package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs.map +1 -0
  234. package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs +61 -0
  235. package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs.map +1 -0
  236. package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs +51 -0
  237. package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs.map +1 -0
  238. package/esm/components/Toolbar/use-toolbar-navigation.mjs +76 -0
  239. package/esm/components/Toolbar/use-toolbar-navigation.mjs.map +1 -0
  240. package/esm/components/Tooltip/Tooltip.mjs +9 -5
  241. package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
  242. package/esm/components/Tooltip/use-tooltip.mjs +7 -4
  243. package/esm/components/Tooltip/use-tooltip.mjs.map +1 -1
  244. package/esm/components/Tour/Tour.context.mjs +22 -0
  245. package/esm/components/Tour/Tour.context.mjs.map +1 -0
  246. package/esm/components/Tour/Tour.mjs +283 -0
  247. package/esm/components/Tour/Tour.mjs.map +1 -0
  248. package/esm/components/Tour/Tour.module.mjs +19 -0
  249. package/esm/components/Tour/Tour.module.mjs.map +1 -0
  250. package/esm/components/Tour/TourBeacon/TourBeacon.mjs +54 -0
  251. package/esm/components/Tour/TourBeacon/TourBeacon.mjs.map +1 -0
  252. package/esm/components/Tour/TourBeaconPositioned.mjs +46 -0
  253. package/esm/components/Tour/TourBeaconPositioned.mjs.map +1 -0
  254. package/esm/components/Tour/TourBody/TourBody.mjs +37 -0
  255. package/esm/components/Tour/TourBody/TourBody.mjs.map +1 -0
  256. package/esm/components/Tour/TourCloseButton/TourCloseButton.mjs +26 -0
  257. package/esm/components/Tour/TourCloseButton/TourCloseButton.mjs.map +1 -0
  258. package/esm/components/Tour/TourNavigation/TourNavigation.mjs +63 -0
  259. package/esm/components/Tour/TourNavigation/TourNavigation.mjs.map +1 -0
  260. package/esm/components/Tour/TourOverlay/TourOverlay.mjs +70 -0
  261. package/esm/components/Tour/TourOverlay/TourOverlay.mjs.map +1 -0
  262. package/esm/components/Tour/TourRoot/TourRoot.mjs +125 -0
  263. package/esm/components/Tour/TourRoot/TourRoot.mjs.map +1 -0
  264. package/esm/components/Tour/TourStep/TourStep.mjs +10 -0
  265. package/esm/components/Tour/TourStep/TourStep.mjs.map +1 -0
  266. package/esm/components/Tour/TourTitle/TourTitle.mjs +38 -0
  267. package/esm/components/Tour/TourTitle/TourTitle.mjs.map +1 -0
  268. package/esm/components/Tour/TourTooltip/TourTooltip.mjs +87 -0
  269. package/esm/components/Tour/TourTooltip/TourTooltip.mjs.map +1 -0
  270. package/esm/components/Tour/get-overlay-hit-path.mjs +17 -0
  271. package/esm/components/Tour/get-overlay-hit-path.mjs.map +1 -0
  272. package/esm/components/Tour/is-element-in-view.mjs +30 -0
  273. package/esm/components/Tour/is-element-in-view.mjs.map +1 -0
  274. package/esm/components/Tour/press-aware-auto-update.mjs +38 -0
  275. package/esm/components/Tour/press-aware-auto-update.mjs.map +1 -0
  276. package/esm/components/Tour/use-target-rect.mjs +59 -0
  277. package/esm/components/Tour/use-target-rect.mjs.map +1 -0
  278. package/esm/components/Tour/use-tooltip-auto-focus.mjs +34 -0
  279. package/esm/components/Tour/use-tooltip-auto-focus.mjs.map +1 -0
  280. package/esm/components/Tour/use-tour-state.mjs +102 -0
  281. package/esm/components/Tour/use-tour-state.mjs.map +1 -0
  282. package/esm/components/Tour/use-tour.mjs +155 -0
  283. package/esm/components/Tour/use-tour.mjs.map +1 -0
  284. package/esm/components/TreeSelect/TreeSelect.mjs +30 -17
  285. package/esm/components/TreeSelect/TreeSelect.mjs.map +1 -1
  286. package/esm/index.mjs +21 -2
  287. package/lib/components/ActionBar/ActionBar.d.ts +1 -1
  288. package/lib/components/AppShell/AppShell.context.d.ts +4 -0
  289. package/lib/components/AppShell/AppShell.d.ts +5 -3
  290. package/lib/components/AppShell/AppShell.types.d.ts +70 -0
  291. package/lib/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.d.ts +6 -1
  292. package/lib/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.d.ts +3 -1
  293. package/lib/components/AppShell/AppShellMediaStyles/assign-footer-variables/assign-footer-variables.d.ts +3 -1
  294. package/lib/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.d.ts +3 -1
  295. package/lib/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.d.ts +3 -1
  296. package/lib/components/AppShell/AppShellMediaStyles/escape-css-id/escape-css-id.d.ts +2 -0
  297. package/lib/components/AppShell/AppShellMediaStyles/get-resized-value/get-resized-value.d.ts +1 -0
  298. package/lib/components/AppShell/AppShellMediaStyles/get-variables/get-variables.d.ts +6 -1
  299. package/lib/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.d.ts +10 -0
  300. package/lib/components/AppShell/index.d.ts +3 -2
  301. package/lib/components/AppShell/use-app-shell-resize/clamp-resize-size.d.ts +9 -0
  302. package/lib/components/AppShell/use-app-shell-resize/resize-section-config.d.ts +29 -0
  303. package/lib/components/AppShell/use-app-shell-resize/safe-area-inset.d.ts +1 -0
  304. package/lib/components/AppShell/use-app-shell-resize/use-app-shell-resize.d.ts +2 -0
  305. package/lib/components/AppShell/use-resizing/use-resizing.d.ts +2 -1
  306. package/lib/components/Checkbox/Checkbox.d.ts +2 -2
  307. package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.d.ts +2 -2
  308. package/lib/components/HoverCard/HoverCard.context.d.ts +8 -4
  309. package/lib/components/HoverCard/HoverCard.d.ts +41 -0
  310. package/lib/components/HoverCard/index.d.ts +1 -1
  311. package/lib/components/HoverCard/use-hover-card.d.ts +11 -0
  312. package/lib/components/Radio/Radio.d.ts +2 -2
  313. package/lib/components/Radio/RadioIndicator/RadioIndicator.d.ts +2 -2
  314. package/lib/components/Toggle/Toggle.d.ts +73 -0
  315. package/lib/components/Toggle/index.d.ts +7 -0
  316. package/lib/components/Toolbar/Toolbar.context.d.ts +7 -0
  317. package/lib/components/Toolbar/Toolbar.d.ts +58 -0
  318. package/lib/components/Toolbar/ToolbarDivider/ToolbarDivider.d.ts +16 -0
  319. package/lib/components/Toolbar/ToolbarGroup/ToolbarGroup.d.ts +16 -0
  320. package/lib/components/Toolbar/ToolbarToggle/ToolbarToggle.d.ts +44 -0
  321. package/lib/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.d.ts +7 -0
  322. package/lib/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.d.ts +42 -0
  323. package/lib/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.d.ts +22 -0
  324. package/lib/components/Toolbar/index.d.ts +32 -0
  325. package/lib/components/Toolbar/use-toolbar-navigation.d.ts +11 -0
  326. package/lib/components/Tooltip/Tooltip.d.ts +2 -0
  327. package/lib/components/Tooltip/use-tooltip.d.ts +2 -0
  328. package/lib/components/Tour/Tour.context.d.ts +66 -0
  329. package/lib/components/Tour/Tour.d.ts +144 -0
  330. package/lib/components/Tour/TourBeacon/TourBeacon.d.ts +23 -0
  331. package/lib/components/Tour/TourBeaconPositioned.d.ts +13 -0
  332. package/lib/components/Tour/TourBody/TourBody.d.ts +19 -0
  333. package/lib/components/Tour/TourCloseButton/TourCloseButton.d.ts +12 -0
  334. package/lib/components/Tour/TourNavigation/TourNavigation.d.ts +11 -0
  335. package/lib/components/Tour/TourOverlay/TourOverlay.d.ts +22 -0
  336. package/lib/components/Tour/TourRoot/TourRoot.d.ts +72 -0
  337. package/lib/components/Tour/TourStep/TourStep.d.ts +30 -0
  338. package/lib/components/Tour/TourTitle/TourTitle.d.ts +19 -0
  339. package/lib/components/Tour/TourTooltip/TourTooltip.d.ts +29 -0
  340. package/lib/components/Tour/get-overlay-hit-path.d.ts +2 -0
  341. package/lib/components/Tour/index.d.ts +23 -0
  342. package/lib/components/Tour/is-element-in-view.d.ts +1 -0
  343. package/lib/components/Tour/press-aware-auto-update.d.ts +2 -0
  344. package/lib/components/Tour/use-target-rect.d.ts +13 -0
  345. package/lib/components/Tour/use-tooltip-auto-focus.d.ts +7 -0
  346. package/lib/components/Tour/use-tour-state.d.ts +23 -0
  347. package/lib/components/Tour/use-tour.d.ts +40 -0
  348. package/lib/components/TreeSelect/TreeSelect.d.ts +14 -0
  349. package/lib/components/TreeSelect/index.d.ts +2 -2
  350. package/lib/components/index.d.ts +3 -0
  351. package/package.json +5 -5
  352. package/styles/ActionBar.css +1 -0
  353. package/styles/ActionBar.layer.css +1 -0
  354. package/styles/AppShell.css +68 -0
  355. package/styles/AppShell.layer.css +68 -0
  356. package/styles/Checkbox.css +20 -0
  357. package/styles/Checkbox.layer.css +20 -0
  358. package/styles/CheckboxIndicator.css +16 -0
  359. package/styles/CheckboxIndicator.layer.css +16 -0
  360. package/styles/Dialog.css +1 -0
  361. package/styles/Dialog.layer.css +1 -0
  362. package/styles/Radio.css +10 -0
  363. package/styles/Radio.layer.css +10 -0
  364. package/styles/RadioIndicator.css +11 -0
  365. package/styles/RadioIndicator.layer.css +11 -0
  366. package/styles/Toggle.css +98 -0
  367. package/styles/Toggle.layer.css +99 -0
  368. package/styles/Toolbar.css +220 -0
  369. package/styles/Toolbar.layer.css +221 -0
  370. package/styles/Tour.css +127 -0
  371. package/styles/Tour.layer.css +128 -0
  372. package/styles.css +575 -0
  373. package/styles.layer.css +575 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useRef","use","CheckboxGroupContext","useStyles","extractStyleProps","useId","InlineInput","Box","useMergedRef","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n CheckboxCard,\n type CheckboxCardProps,\n type CheckboxCardStylesNames,\n type CheckboxCardCssVariables,\n type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n CheckboxGroup,\n CheckboxGroupContext,\n type CheckboxGroupProps,\n type CheckboxGroupStylesNames,\n type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n CheckboxIndicator,\n type CheckboxIndicatorProps,\n type CheckboxIndicatorStylesNames,\n type CheckboxIndicatorCssVariables,\n type CheckboxIndicatorFactory,\n type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n indeterminate: boolean | undefined;\n className: string;\n}>;\n\nexport interface CheckboxProps\n extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n /** Unique input id */\n id?: string;\n\n /** `label` associated with the checkbox */\n label?: React.ReactNode;\n\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Props passed down to the root element */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Position of the label relative to the input @default 'right' */\n labelPosition?: 'left' | 'right';\n\n /** Description below the label */\n description?: React.ReactNode;\n\n /** Error message below the label */\n error?: React.ReactNode;\n\n /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n indeterminate?: boolean;\n\n /** Icon for checked or indeterminate state */\n icon?: CheckboxIconComponent;\n\n /** Root element ref */\n rootRef?: React.Ref<HTMLDivElement>;\n\n /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n iconColor?: MantineColor;\n\n /** If set, adjusts icon color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n props: CheckboxProps;\n ref: HTMLInputElement;\n stylesNames: CheckboxStylesNames;\n vars: CheckboxCssVariables;\n variant: CheckboxVariant;\n staticComponents: {\n Group: typeof CheckboxGroup;\n Indicator: typeof CheckboxIndicator;\n Card: typeof CheckboxCard;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n icon: CheckboxIcon,\n withErrorStyles: true,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n const props = useProps('Checkbox', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n label,\n id,\n size,\n radius,\n wrapperProps,\n checked,\n labelPosition,\n description,\n error,\n disabled,\n variant,\n indeterminate,\n icon: Icon,\n rootRef,\n iconColor,\n onChange,\n autoContrast,\n mod,\n attributes,\n readOnly,\n onClick,\n withErrorStyles,\n ref,\n ...others\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const ctx = use(CheckboxGroupContext);\n const _size = size || ctx?.size;\n\n const getStyles = useStyles<CheckboxFactory>({\n name: 'Checkbox',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n const descriptionId = description ? `${uuid}-description` : undefined;\n const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n const describedBy =\n [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n const withContextProps = {\n checked: ctx?.value.includes(rest.value as string) ?? checked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n ctx?.onChange(event);\n onChange?.(event);\n },\n };\n\n const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n const finalDisabled = disabled || isDisabledByGroup;\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate || false;\n\n if (indeterminate) {\n inputRef.current.setAttribute('data-indeterminate', 'true');\n } else {\n inputRef.current.removeAttribute('data-indeterminate');\n }\n }\n }, [indeterminate]);\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Checkbox\"\n __stylesApiProps={props}\n id={uuid}\n size={_size}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={finalDisabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={withContextProps.checked || checked || undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n inert={rest.inert}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ labelPosition }}>\n <Box\n component=\"input\"\n id={uuid}\n ref={useMergedRef(inputRef, ref)}\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n {...getStyles('input', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n aria-describedby={describedBy}\n disabled={finalDisabled}\n inert={rest.inert}\n type=\"checkbox\"\n onClick={(event) => {\n if (readOnly && withContextProps.checked === undefined) {\n event.preventDefault();\n }\n\n onClick?.(event);\n }}\n />\n\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n </InlineInput>\n );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n export type Props = CheckboxProps;\n export type StylesNames = CheckboxStylesNames;\n export type CssVariables = CheckboxCssVariables;\n export type Factory = CheckboxFactory;\n export type Variant = CheckboxVariant;\n export type IconComponent = CheckboxIconComponent;\n\n export namespace Group {\n export type Props = CheckboxGroupProps;\n export type StylesNames = CheckboxGroupStylesNames;\n export type Factory = CheckboxGroupFactory;\n }\n\n export namespace Indicator {\n export type Props = CheckboxIndicatorProps;\n export type StylesNames = CheckboxIndicatorStylesNames;\n export type CssVariables = CheckboxIndicatorCssVariables;\n export type Factory = CheckboxIndicatorFactory;\n export type Variant = CheckboxIndicatorVariant;\n }\n\n export namespace Card {\n export type Props = CheckboxCardProps;\n export type StylesNames = CheckboxCardStylesNames;\n export type CssVariables = CheckboxCardCssVariables;\n export type Factory = CheckboxCardFactory;\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getThemeColor","getSize","getRadius","getAutoContrastValue","getContrastColor","factory","useProps","useRef","use","CheckboxGroupContext","useStyles","extractStyleProps","useId","InlineInput","Box","useMergedRef","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n CheckboxCard,\n type CheckboxCardProps,\n type CheckboxCardStylesNames,\n type CheckboxCardCssVariables,\n type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n CheckboxGroup,\n CheckboxGroupContext,\n type CheckboxGroupProps,\n type CheckboxGroupStylesNames,\n type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n CheckboxIndicator,\n type CheckboxIndicatorProps,\n type CheckboxIndicatorStylesNames,\n type CheckboxIndicatorCssVariables,\n type CheckboxIndicatorFactory,\n type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline' | 'light';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n root:\n | '--checkbox-size'\n | '--checkbox-radius'\n | '--checkbox-color'\n | '--checkbox-icon-color'\n | '--checkbox-bg';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n indeterminate: boolean | undefined;\n className: string;\n}>;\n\nexport interface CheckboxProps\n extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n /** Unique input id */\n id?: string;\n\n /** `label` associated with the checkbox */\n label?: React.ReactNode;\n\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Props passed down to the root element */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Position of the label relative to the input @default 'right' */\n labelPosition?: 'left' | 'right';\n\n /** Description below the label */\n description?: React.ReactNode;\n\n /** Error message below the label */\n error?: React.ReactNode;\n\n /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n indeterminate?: boolean;\n\n /** Icon for checked or indeterminate state */\n icon?: CheckboxIconComponent;\n\n /** Root element ref */\n rootRef?: React.Ref<HTMLDivElement>;\n\n /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n iconColor?: MantineColor;\n\n /** If set, adjusts icon color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n props: CheckboxProps;\n ref: HTMLInputElement;\n stylesNames: CheckboxStylesNames;\n vars: CheckboxCssVariables;\n variant: CheckboxVariant;\n staticComponents: {\n Group: typeof CheckboxGroup;\n Indicator: typeof CheckboxIndicator;\n Card: typeof CheckboxCard;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n icon: CheckboxIcon,\n withErrorStyles: true,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n const lightColors =\n variant === 'light'\n ? theme.variantColorResolver({\n color: color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast,\n })\n : undefined;\n\n const resolvedColor =\n variant === 'outline'\n ? outlineColor\n : lightColors\n ? lightColors.color\n : getThemeColor(color, theme);\n\n return {\n root: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': resolvedColor,\n '--checkbox-bg': lightColors?.background,\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : lightColors\n ? lightColors.color\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n const props = useProps('Checkbox', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n label,\n id,\n size,\n radius,\n wrapperProps,\n checked,\n labelPosition,\n description,\n error,\n disabled,\n variant,\n indeterminate,\n icon: Icon,\n rootRef,\n iconColor,\n onChange,\n autoContrast,\n mod,\n attributes,\n readOnly,\n onClick,\n withErrorStyles,\n ref,\n ...others\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const ctx = use(CheckboxGroupContext);\n const _size = size || ctx?.size;\n\n const getStyles = useStyles<CheckboxFactory>({\n name: 'Checkbox',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n const descriptionId = description ? `${uuid}-description` : undefined;\n const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n const describedBy =\n [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n const withContextProps = {\n checked: ctx?.value.includes(rest.value as string) ?? checked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n ctx?.onChange(event);\n onChange?.(event);\n },\n };\n\n const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n const finalDisabled = disabled || isDisabledByGroup;\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate || false;\n\n if (indeterminate) {\n inputRef.current.setAttribute('data-indeterminate', 'true');\n } else {\n inputRef.current.removeAttribute('data-indeterminate');\n }\n }\n }, [indeterminate]);\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Checkbox\"\n __stylesApiProps={props}\n id={uuid}\n size={_size}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={finalDisabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={withContextProps.checked || checked || undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n inert={rest.inert}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ labelPosition }}>\n <Box\n component=\"input\"\n id={uuid}\n ref={useMergedRef(inputRef, ref)}\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n {...getStyles('input', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n aria-describedby={describedBy}\n disabled={finalDisabled}\n inert={rest.inert}\n type=\"checkbox\"\n onClick={(event) => {\n if (readOnly && withContextProps.checked === undefined) {\n event.preventDefault();\n }\n\n onClick?.(event);\n }}\n />\n\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n </InlineInput>\n );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n export type Props = CheckboxProps;\n export type StylesNames = CheckboxStylesNames;\n export type CssVariables = CheckboxCssVariables;\n export type Factory = CheckboxFactory;\n export type Variant = CheckboxVariant;\n export type IconComponent = CheckboxIconComponent;\n\n export namespace Group {\n export type Props = CheckboxGroupProps;\n export type StylesNames = CheckboxGroupStylesNames;\n export type Factory = CheckboxGroupFactory;\n }\n\n export namespace Indicator {\n export type Props = CheckboxIndicatorProps;\n export type StylesNames = CheckboxIndicatorStylesNames;\n export type CssVariables = CheckboxIndicatorCssVariables;\n export type Factory = CheckboxIndicatorFactory;\n export type Variant = CheckboxIndicatorVariant;\n }\n\n export namespace Card {\n export type Props = CheckboxCardProps;\n export type StylesNames = CheckboxCardStylesNames;\n export type CssVariables = CheckboxCardCssVariables;\n export type Factory = CheckboxCardFactory;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+HA,MAAM,eAAe;CACnB,eAAe;CACf,MAAMA,kBAAAA;CACN,iBAAiB;CACjB,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,MAAM,cACJ,YAAY,UACR,MAAM,qBAAqB;EACzB,OAAO,SAAS,MAAM;EACtB;EACA,SAAS;EACT;CACF,CAAC,IACD,KAAA;CAEN,MAAM,gBACJ,YAAY,YACR,eACA,cACE,YAAY,QACZC,wBAAAA,cAAc,OAAO,KAAK;CAElC,OAAO,EACL,MAAM;EACJ,mBAAmBC,iBAAAA,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACxE,oBAAoB;EACpB,iBAAiB,aAAa;EAC9B,yBAAyB,YACrBF,wBAAAA,cAAc,WAAW,KAAK,IAC9B,cACE,YAAY,QACZG,gCAAAA,qBAAqB,cAAc,KAAK,IACtCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACV,EACF;AACF,CACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,IACA,MACA,QACA,cACA,SACA,eACA,aACA,OACA,UACA,SACA,eACA,MAAM,MACN,SACA,WACA,UACA,cACA,KACA,YACA,UACA,SACA,iBACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAC9C,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,sBAAAA,oBAAoB;CACpC,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN;EACA,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,MAAM;CACrD,MAAM,QAAA,GAAOC,eAAAA,MAAAA,CAAM,EAAE;CAGrB,MAAM,cACJ;EAHoB,cAAc,GAAG,KAAK,gBAAgB,KAAA;EAC5C,SAAS,OAAO,UAAU,YAAY,GAAG,KAAK,UAAU,KAAA;EAE7C,KAAK;CAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAElF,MAAM,mBAAmB;EACvB,SAAS,KAAK,MAAM,SAAS,KAAK,KAAe,KAAK;EACtD,WAAW,UAA+C;GACxD,IAAI,UACF;GAGF,KAAK,SAAS,KAAK;GACnB,WAAW,KAAK;EAClB;CACF;CAEA,MAAM,oBAAoB,KAAK,aAAa,KAAK,KAAe,KAAK;CACrE,MAAM,gBAAgB,YAAY;CAElC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS,SAAS;GACpB,SAAS,QAAQ,gBAAgB,iBAAiB;GAElD,IAAI,eACF,SAAS,QAAQ,aAAa,sBAAsB,MAAM;QAE1D,SAAS,QAAQ,gBAAgB,oBAAoB;EAEzD;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;EACE,GAAI,UAAU,MAAM;EACpB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU;EACE;EACJ;EACE;EACV,gBAAc,iBAAiB,WAAW,WAAW,KAAA;EAC5C;EACT,KAAK;EACA;EACO;EACZ,OAAO,KAAK;EACZ,GAAI;EACJ,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,OAAO;GAAG,KAAK,EAAE,cAAc;GAAlD,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;IACE,WAAU;IACV,IAAI;IACJ,MAAA,GAAKC,eAAAA,aAAAA,CAAa,UAAU,GAAG;IAC/B,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;IAAgB;IAC5D,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;IAAQ,CAAC;IACnD,GAAI;IACJ,GAAI;IACJ,oBAAkB;IAClB,UAAU;IACV,OAAO,KAAK;IACZ,MAAK;IACL,UAAU,UAAU;KAClB,IAAI,YAAY,iBAAiB,YAAY,KAAA,GAC3C,MAAM,eAAe;KAGvB,UAAU,KAAK;IACjB;GACD,CAAA,GAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAqB;IAAe,GAAI,UAAU,MAAM;GAAI,CAAA,CACzD;;CACM,CAAA;AAEjB,CAAC;AAED,SAAS,UAAU;CAAE,GAAGC,wBAAAA;CAAS,GAAGC,oBAAAA;AAAmB;AACvD,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,YAAYC,0BAAAA;AACrB,SAAS,OAAOC,qBAAAA"}
@@ -5,6 +5,7 @@ var Checkbox_module_default = {
5
5
  "inner": "m_26062bec",
6
6
  "input": "m_26063560",
7
7
  "icon": "m_bf295423",
8
+ "input--light": "m_595ab216",
8
9
  "input--outline": "m_215c4542"
9
10
  };
10
11
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.module.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":[".root {\n --checkbox-size-xs: 16px;\n --checkbox-size-sm: 20px;\n --checkbox-size-md: 24px;\n --checkbox-size-lg: 30px;\n --checkbox-size-xl: 36px;\n\n --checkbox-size: var(--checkbox-size-sm);\n --checkbox-color: var(--mantine-primary-color-filled);\n\n &:where([data-variant='filled']) {\n --checkbox-icon-color: var(--mantine-color-white);\n }\n\n &:where([data-variant='outline']) {\n --checkbox-icon-color: var(--checkbox-color);\n }\n}\n\n.inner {\n position: relative;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n order: 1;\n\n &:where([data-label-position='left']) {\n order: 2;\n }\n}\n\n.input {\n appearance: none;\n border: 1px solid transparent;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n padding: 0;\n display: block;\n margin: 0;\n transition:\n border-color 100ms ease,\n background-color 100ms ease;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-with-error-styles][data-error]) {\n border-color: var(--mantine-color-error);\n }\n\n &[data-indeterminate],\n &:checked {\n background-color: var(--checkbox-color);\n border-color: var(--checkbox-color);\n\n & + .icon {\n opacity: 1;\n transform: none;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n border-color: var(--mantine-color-disabled-border);\n background-color: var(--mantine-color-disabled);\n\n & + .icon {\n color: var(--mantine-color-disabled-color);\n }\n }\n}\n\n.input--outline {\n & + .icon {\n color: var(--checkbox-color);\n }\n\n &[data-indeterminate]:not(:disabled),\n &:checked:not(:disabled) {\n background-color: transparent;\n border-color: var(--checkbox-color);\n\n & + .icon {\n color: var(--checkbox-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.icon {\n position: absolute;\n inset: 0;\n width: 60%;\n margin: auto;\n color: var(--checkbox-icon-color);\n pointer-events: none;\n transform: translateY(rem(5px)) scale(0.5);\n opacity: 0;\n transition:\n transform 100ms ease,\n opacity 100ms ease;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Checkbox.module.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":[".root {\n --checkbox-size-xs: 16px;\n --checkbox-size-sm: 20px;\n --checkbox-size-md: 24px;\n --checkbox-size-lg: 30px;\n --checkbox-size-xl: 36px;\n\n --checkbox-size: var(--checkbox-size-sm);\n --checkbox-color: var(--mantine-primary-color-filled);\n\n &:where([data-variant='filled']) {\n --checkbox-icon-color: var(--mantine-color-white);\n }\n\n &:where([data-variant='outline']) {\n --checkbox-icon-color: var(--checkbox-color);\n }\n\n &:where([data-variant='light']) {\n --checkbox-icon-color: var(--checkbox-color);\n }\n}\n\n.inner {\n position: relative;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n order: 1;\n\n &:where([data-label-position='left']) {\n order: 2;\n }\n}\n\n.input {\n appearance: none;\n border: 1px solid transparent;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n padding: 0;\n display: block;\n margin: 0;\n transition:\n border-color 100ms ease,\n background-color 100ms ease;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-with-error-styles][data-error]) {\n border-color: var(--mantine-color-error);\n }\n\n &[data-indeterminate],\n &:checked {\n background-color: var(--checkbox-color);\n border-color: var(--checkbox-color);\n\n & + .icon {\n opacity: 1;\n transform: none;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n border-color: var(--mantine-color-disabled-border);\n background-color: var(--mantine-color-disabled);\n\n & + .icon {\n color: var(--mantine-color-disabled-color);\n }\n }\n}\n\n.input--light {\n & + .icon {\n color: var(--checkbox-color);\n }\n\n &[data-indeterminate]:not(:disabled),\n &:checked:not(:disabled) {\n background-color: var(--checkbox-bg);\n border-color: transparent;\n\n & + .icon {\n color: var(--checkbox-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.input--outline {\n & + .icon {\n color: var(--checkbox-color);\n }\n\n &[data-indeterminate]:not(:disabled),\n &:checked:not(:disabled) {\n background-color: transparent;\n border-color: var(--checkbox-color);\n\n & + .icon {\n color: var(--checkbox-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.icon {\n position: absolute;\n inset: 0;\n width: 60%;\n margin: auto;\n color: var(--checkbox-icon-color);\n pointer-events: none;\n transform: translateY(rem(5px)) scale(0.5);\n opacity: 0;\n transition:\n transform 100ms ease,\n opacity 100ms ease;\n}\n"],"mappings":""}
@@ -26,11 +26,19 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
26
26
  theme
27
27
  });
28
28
  const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
29
+ const lightColors = variant === "light" ? theme.variantColorResolver({
30
+ color: color || theme.primaryColor,
31
+ theme,
32
+ variant: "light",
33
+ autoContrast
34
+ }) : void 0;
35
+ const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : require_get_theme_color.getThemeColor(color, theme);
29
36
  return { indicator: {
30
37
  "--checkbox-size": require_get_size.getSize(size, "checkbox-size"),
31
38
  "--checkbox-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
32
- "--checkbox-color": variant === "outline" ? outlineColor : require_get_theme_color.getThemeColor(color, theme),
33
- "--checkbox-icon-color": iconColor ? require_get_theme_color.getThemeColor(iconColor, theme) : require_get_auto_contrast_value.getAutoContrastValue(autoContrast, theme) ? require_get_contrast_color.getContrastColor({
39
+ "--checkbox-color": resolvedColor,
40
+ "--checkbox-bg": lightColors?.background,
41
+ "--checkbox-icon-color": iconColor ? require_get_theme_color.getThemeColor(iconColor, theme) : lightColors ? lightColors.color : require_get_auto_contrast_value.getAutoContrastValue(autoContrast, theme) ? require_get_contrast_color.getContrastColor({
34
42
  color,
35
43
  theme,
36
44
  autoContrast
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","use","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n iconColor?: MantineColor;\n\n /** If set, adjusts icon color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n indeterminate?: boolean;\n\n /** Icon for checked or indeterminate state */\n icon?: CheckboxIconComponent;\n\n /** Determines whether the component should have checked styles */\n checked?: boolean;\n\n /** Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _indeterminate = typeof indeterminate === 'boolean' ? indeterminate : ctx?.indeterminate;\n const _checked =\n typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n ? checked || indeterminate\n : ctx?.checked || ctx?.indeterminate || false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={_indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACxE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,KAAK;EACrF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,KAAK,IAC9BC,gCAAAA,qBAAqB,cAAc,KAAK,IACtCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,qBAAAA,mBAAmB;CACnC,MAAM,iBAAiB,OAAO,kBAAkB,YAAY,gBAAgB,KAAK;CACjF,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW,KAAK,iBAAiB;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAM,eAAe;GAAgB,GAAI,UAAU,MAAM;EAAI,CAAA;CAC1D,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
1
+ {"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getThemeColor","getSize","getRadius","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","use","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline' | 'light';\nexport type CheckboxIndicatorCssVariables = {\n indicator:\n | '--checkbox-size'\n | '--checkbox-radius'\n | '--checkbox-color'\n | '--checkbox-icon-color'\n | '--checkbox-bg';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n iconColor?: MantineColor;\n\n /** If set, adjusts icon color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n indeterminate?: boolean;\n\n /** Icon for checked or indeterminate state */\n icon?: CheckboxIconComponent;\n\n /** Determines whether the component should have checked styles */\n checked?: boolean;\n\n /** Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n const lightColors =\n variant === 'light'\n ? theme.variantColorResolver({\n color: color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast,\n })\n : undefined;\n\n const resolvedColor =\n variant === 'outline'\n ? outlineColor\n : lightColors\n ? lightColors.color\n : getThemeColor(color, theme);\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': resolvedColor,\n '--checkbox-bg': lightColors?.background,\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : lightColors\n ? lightColors.color\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _indeterminate = typeof indeterminate === 'boolean' ? indeterminate : ctx?.indeterminate;\n const _checked =\n typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n ? checked || indeterminate\n : ctx?.checked || ctx?.indeterminate || false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={_indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2EA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,MAAM,cACJ,YAAY,UACR,MAAM,qBAAqB;EACzB,OAAO,SAAS,MAAM;EACtB;EACA,SAAS;EACT;CACF,CAAC,IACD,KAAA;CAEN,MAAM,gBACJ,YAAY,YACR,eACA,cACE,YAAY,QACZC,wBAAAA,cAAc,OAAO,KAAK;CAElC,OAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACxE,oBAAoB;EACpB,iBAAiB,aAAa;EAC9B,yBAAyB,YACrBF,wBAAAA,cAAc,WAAW,KAAK,IAC9B,cACE,YAAY,QACZG,gCAAAA,qBAAqB,cAAc,KAAK,IACtCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACV,EACF;AACF,CACF;AAEA,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,qBAAAA,mBAAmB;CACnC,MAAM,iBAAiB,OAAO,kBAAkB,YAAY,gBAAgB,KAAK;CACjF,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW,KAAK,iBAAiB;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;GAAM,eAAe;GAAgB,GAAI,UAAU,MAAM;EAAI,CAAA;CAC1D,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
@@ -3,6 +3,7 @@
3
3
  var CheckboxIndicator_module_default = {
4
4
  "indicator": "m_5e5256ee",
5
5
  "icon": "m_1b1c543a",
6
+ "indicator--light": "m_193e54c8",
6
7
  "indicator--outline": "m_76e20374"
7
8
  };
8
9
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxIndicator.module.cjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css"],"sourcesContent":[".indicator {\n --checkbox-size-xs: 16px;\n --checkbox-size-sm: 20px;\n --checkbox-size-md: 24px;\n --checkbox-size-lg: 30px;\n --checkbox-size-xl: 36px;\n\n --checkbox-size: var(--checkbox-size-sm);\n --checkbox-color: var(--mantine-primary-color-filled);\n\n &:where([data-variant='filled']) {\n --checkbox-icon-color: var(--mantine-color-white);\n }\n\n &:where([data-variant='outline']) {\n --checkbox-icon-color: var(--checkbox-color);\n }\n\n position: relative;\n border: 1px solid transparent;\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n transition:\n border-color 100ms ease,\n background-color 100ms ease;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &[data-indeterminate],\n &[data-checked] {\n background-color: var(--checkbox-color);\n border-color: var(--checkbox-color);\n\n & > .icon {\n opacity: 1;\n transform: none;\n color: var(--checkbox-icon-color);\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n border-color: var(--mantine-color-disabled-border);\n background-color: var(--mantine-color-disabled);\n\n &[data-checked] > .icon {\n @mixin light {\n color: var(--mantine-color-gray-5);\n }\n\n @mixin dark {\n color: var(--mantine-color-dark-3);\n }\n }\n }\n}\n\n.indicator--outline {\n &[data-indeterminate]:not([data-disabled]),\n &[data-checked]:not([data-disabled]) {\n background-color: transparent;\n border-color: var(--checkbox-color);\n\n & > .icon {\n color: var(--checkbox-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.icon {\n display: block;\n width: 60%;\n color: transparent;\n pointer-events: none;\n transform: translateY(rem(5px)) scale(0.5);\n opacity: 1;\n transition:\n transform 100ms ease,\n opacity 100ms ease;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"CheckboxIndicator.module.cjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css"],"sourcesContent":[".indicator {\n --checkbox-size-xs: 16px;\n --checkbox-size-sm: 20px;\n --checkbox-size-md: 24px;\n --checkbox-size-lg: 30px;\n --checkbox-size-xl: 36px;\n\n --checkbox-size: var(--checkbox-size-sm);\n --checkbox-color: var(--mantine-primary-color-filled);\n\n &:where([data-variant='filled']) {\n --checkbox-icon-color: var(--mantine-color-white);\n }\n\n &:where([data-variant='outline']) {\n --checkbox-icon-color: var(--checkbox-color);\n }\n\n &:where([data-variant='light']) {\n --checkbox-icon-color: var(--checkbox-color);\n }\n\n position: relative;\n border: 1px solid transparent;\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n transition:\n border-color 100ms ease,\n background-color 100ms ease;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &[data-indeterminate],\n &[data-checked] {\n background-color: var(--checkbox-color);\n border-color: var(--checkbox-color);\n\n & > .icon {\n opacity: 1;\n transform: none;\n color: var(--checkbox-icon-color);\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n border-color: var(--mantine-color-disabled-border);\n background-color: var(--mantine-color-disabled);\n\n &[data-checked] > .icon {\n @mixin light {\n color: var(--mantine-color-gray-5);\n }\n\n @mixin dark {\n color: var(--mantine-color-dark-3);\n }\n }\n }\n}\n\n.indicator--light {\n &[data-indeterminate]:not([data-disabled]),\n &[data-checked]:not([data-disabled]) {\n background-color: var(--checkbox-bg);\n border-color: transparent;\n\n & > .icon {\n color: var(--checkbox-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.indicator--outline {\n &[data-indeterminate]:not([data-disabled]),\n &[data-checked]:not([data-disabled]) {\n background-color: transparent;\n border-color: var(--checkbox-color);\n\n & > .icon {\n color: var(--checkbox-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.icon {\n display: block;\n width: 60%;\n color: transparent;\n pointer-events: none;\n transform: translateY(rem(5px)) scale(0.5);\n opacity: 1;\n transition:\n transform 100ms ease,\n opacity 100ms ease;\n}\n"],"mappings":""}
@@ -13,7 +13,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
13
13
  //#region packages/@mantine/core/src/components/Dialog/Dialog.tsx
14
14
  const defaultProps = {
15
15
  shadow: "md",
16
- p: "md",
17
16
  withBorder: true,
18
17
  transitionProps: {
19
18
  transition: "pop-top-right",
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.cjs","names":["createVarsResolver","getSize","factory","useProps","useStyles","Affix","Transition","Paper","CloseButton","classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' | 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */\n keepMounted?: boolean;\n\n /** If set, displays the close button @default false */\n withCloseButton?: boolean;\n\n /** Called on close button click */\n onClose?: () => void;\n\n /** Dialog content */\n children?: React.ReactNode;\n\n /** Opened state */\n opened: boolean;\n\n /** Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } */\n transitionProps?: TransitionOverride;\n\n /** Controls `width` of the dialog @default 'md' */\n size?: MantineSize | (string & {}) | number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n p: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n export type Props = DialogProps;\n export type StylesNames = DialogStylesNames;\n export type CssVariables = DialogCssVariables;\n export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAeA,6BAAAA,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;EACU;EACE;EACI;EACD;EACH;EAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;GACvD,WAAA,qBACA,iBAAA,GAAA,kBAAA,KAAA,CAACC,cAAAA,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;IAHN,UAAA,CAKG,mBACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
1
+ {"version":3,"file":"Dialog.cjs","names":["createVarsResolver","getSize","factory","useProps","useStyles","Affix","Transition","Paper","CloseButton","classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' | 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */\n keepMounted?: boolean;\n\n /** If set, displays the close button @default false */\n withCloseButton?: boolean;\n\n /** Called on close button click */\n onClose?: () => void;\n\n /** Dialog content */\n children?: React.ReactNode;\n\n /** Opened state */\n opened: boolean;\n\n /** Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } */\n transitionProps?: TransitionOverride;\n\n /** Controls `width` of the dialog @default 'md' */\n size?: MantineSize | (string & {}) | number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n export type Props = DialogProps;\n export type StylesNames = DialogStylesNames;\n export type CssVariables = DialogCssVariables;\n export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAeA,6BAAAA,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;EACU;EACE;EACI;EACD;EACH;EAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;GACvD,WAAA,qBACA,iBAAA,GAAA,kBAAA,KAAA,CAACC,cAAAA,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;IAHN,UAAA,CAKG,mBACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.module.cjs","names":[],"sources":["../../../src/components/Dialog/Dialog.module.css"],"sourcesContent":[".root {\n --dialog-size-xs: 160px;\n --dialog-size-sm: 200px;\n --dialog-size-md: 340px;\n --dialog-size-lg: 400px;\n --dialog-size-xl: 500px;\n --dialog-size: var(--dialog-size-md);\n\n position: relative;\n width: var(--dialog-size);\n max-width: calc(100vw - var(--mantine-spacing-xl) * 2);\n min-height: 50px;\n}\n\n.closeButton {\n position: absolute;\n top: calc(var(--mantine-spacing-md) / 2);\n inset-inline-end: calc(var(--mantine-spacing-md) / 2);\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Dialog.module.cjs","names":[],"sources":["../../../src/components/Dialog/Dialog.module.css"],"sourcesContent":[".root {\n --dialog-size-xs: 160px;\n --dialog-size-sm: 200px;\n --dialog-size-md: 340px;\n --dialog-size-lg: 400px;\n --dialog-size-xl: 500px;\n --dialog-size: var(--dialog-size-md);\n\n position: relative;\n width: var(--dialog-size);\n max-width: calc(100vw - var(--mantine-spacing-xl) * 2);\n min-height: 50px;\n padding: var(--mantine-spacing-md);\n}\n\n.closeButton {\n position: absolute;\n top: calc(var(--mantine-spacing-md) / 2);\n inset-inline-end: calc(var(--mantine-spacing-md) / 2);\n}\n"],"mappings":""}
@@ -2,25 +2,45 @@
2
2
  const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
3
3
  const require_Popover = require("../Popover/Popover.cjs");
4
4
  const require_HoverCard_context = require("./HoverCard.context.cjs");
5
- const require_HoverCardGroup = require("./HoverCardGroup/HoverCardGroup.cjs");
6
5
  const require_HoverCardDropdown = require("./HoverCardDropdown/HoverCardDropdown.cjs");
6
+ const require_HoverCardGroup = require("./HoverCardGroup/HoverCardGroup.cjs");
7
7
  const require_HoverCardTarget = require("./HoverCardTarget/HoverCardTarget.cjs");
8
8
  const require_use_hover_card = require("./use-hover-card.cjs");
9
9
  let react_jsx_runtime = require("react/jsx-runtime");
10
10
  //#region packages/@mantine/core/src/components/HoverCard/HoverCard.tsx
11
+ const DEFAULT_EVENTS = {
12
+ hover: true,
13
+ focus: true,
14
+ touch: false
15
+ };
11
16
  const defaultProps = {
12
17
  openDelay: 0,
13
18
  closeDelay: 150,
14
- initiallyOpened: false
19
+ initiallyOpened: false,
20
+ interactive: false,
21
+ closeOnEscape: true,
22
+ closeOnClickOutside: true,
23
+ role: "dialog"
15
24
  };
16
25
  function HoverCard(props) {
17
- const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = require_use_props.useProps("HoverCard", defaultProps, props);
26
+ const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, events, interactive, closeOnEscape, closeOnClickOutside, returnFocus, onDismiss, id, role, withRoles, ...others } = require_use_props.useProps("HoverCard", defaultProps, props);
27
+ const resolvedEvents = {
28
+ ...DEFAULT_EVENTS,
29
+ ...events
30
+ };
31
+ const rolesEnabled = withRoles !== false;
18
32
  const hoverCard = require_use_hover_card.useHoverCard({
19
33
  openDelay,
20
34
  closeDelay,
21
35
  defaultOpened: initiallyOpened,
22
36
  onOpen,
23
- onClose
37
+ onClose,
38
+ events: resolvedEvents,
39
+ interactive,
40
+ closeOnEscape,
41
+ closeOnClickOutside,
42
+ onDismiss,
43
+ id
24
44
  });
25
45
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HoverCard_context.HoverCardContext, {
26
46
  value: {
@@ -30,10 +50,19 @@ function HoverCard(props) {
30
50
  getReferenceProps: hoverCard.getReferenceProps,
31
51
  getFloatingProps: hoverCard.getFloatingProps,
32
52
  reference: hoverCard.reference,
33
- floating: hoverCard.floating
53
+ floating: hoverCard.floating,
54
+ opened: hoverCard.opened,
55
+ dropdownId: hoverCard.dropdownId,
56
+ role,
57
+ withRoles: rolesEnabled
34
58
  },
35
59
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
36
60
  ...others,
61
+ id,
62
+ closeOnEscape,
63
+ closeOnClickOutside,
64
+ returnFocus: resolvedEvents.focus ? false : returnFocus,
65
+ withRoles: role === "tooltip" ? false : withRoles,
37
66
  opened: hoverCard.opened,
38
67
  __staticSelector: "HoverCard",
39
68
  children
@@ -1 +1 @@
1
- {"version":3,"file":"HoverCard.cjs","names":["useProps","useHoverCard","HoverCardContext","Popover","HoverCardTarget","HoverCardDropdown","HoverCardGroup"],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n HoverCardGroup,\n HoverCardGroupContextValue,\n HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n /** Initial opened state */\n initiallyOpened?: boolean;\n\n /** Called when the dropdown is opened */\n onOpen?: () => void;\n\n /** Called when the dropdown is closed */\n onClose?: () => void;\n\n /**\n * Delay in ms before the dropdown opens after mouse enters the target.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 0\n */\n openDelay?: number;\n\n /**\n * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 150\n */\n closeDelay?: number;\n}\n\nexport type HoverCardFactory = Factory<{\n props: HoverCardProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n openDelay: 0,\n closeDelay: 150,\n initiallyOpened: false,\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(\n 'HoverCard',\n defaultProps,\n props\n );\n\n const hoverCard = useHoverCard({\n openDelay,\n closeDelay,\n defaultOpened: initiallyOpened,\n onOpen,\n onClose,\n });\n\n return (\n <HoverCardContext\n value={{\n openDropdown: hoverCard.openDropdown,\n closeDropdown: hoverCard.closeDropdown,\n assignTarget: hoverCard.assignTarget,\n getReferenceProps: hoverCard.getReferenceProps,\n getFloatingProps: hoverCard.getFloatingProps,\n reference: hoverCard.reference,\n floating: hoverCard.floating,\n }}\n >\n <Popover {...others} opened={hoverCard.opened} __staticSelector=\"HoverCard\">\n {children}\n </Popover>\n </HoverCardContext>\n );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n export type Props = HoverCardProps;\n export type DropdownProps = HoverCardDropdownProps;\n export type TargetProps = HoverCardTargetProps;\n export type GroupProps = HoverCardGroupProps;\n export type ContextValue = HoverCardContextValue;\n\n export namespace Group {\n export type Props = HoverCardGroupProps;\n export type ContextValue = HoverCardGroupContextValue;\n }\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;AACnB;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,WAAW,YAAY,iBAAiB,GAAG,WAAWA,kBAAAA,SACvF,aACA,cACA,KACF;CAEA,MAAM,YAAYC,uBAAAA,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;EACtB;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;GAAS,GAAI;GAAQ,QAAQ,UAAU;GAAQ,kBAAiB;GAC7D;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAASC,wBAAAA;AACnB,UAAU,WAAWC,0BAAAA;AACrB,UAAU,QAAQC,uBAAAA;AAClB,UAAU,UAAU,UAA6C"}
1
+ {"version":3,"file":"HoverCard.cjs","names":["useProps","useHoverCard","HoverCardContext","Popover","HoverCardTarget","HoverCardDropdown","HoverCardGroup"],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n HoverCardGroup,\n HoverCardGroupContextValue,\n HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardEvents {\n /** Determines whether the dropdown should be opened when the target is hovered @default true */\n hover?: boolean;\n\n /** Determines whether the dropdown should be opened when the target is focused with the keyboard @default true */\n focus?: boolean;\n\n /** Determines whether the dropdown should be opened when the target is tapped on touch devices. Requires `hover` to be enabled @default false */\n touch?: boolean;\n}\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n /** Initial opened state */\n initiallyOpened?: boolean;\n\n /** Called when the dropdown is opened */\n onOpen?: () => void;\n\n /** Called when the dropdown is closed */\n onClose?: () => void;\n\n /**\n * Delay in ms before the dropdown opens after mouse enters the target.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 0\n */\n openDelay?: number;\n\n /**\n * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n * Overridden by HoverCard.Group delay if used within a group.\n * @default 150\n */\n closeDelay?: number;\n\n /**\n * Determines which events open the dropdown. Fields that are not specified keep their default values.\n * @default { hover: true, focus: true, touch: false }\n */\n events?: HoverCardEvents;\n\n /**\n * If set, the dropdown stays open while the pointer travels from the target to the dropdown\n * and remains over it. Set it if the dropdown contains interactive content.\n * @default false\n */\n interactive?: boolean;\n\n /**\n * Accessible relation between the target and the dropdown. `dialog` sets `aria-haspopup`,\n * `aria-expanded` and `aria-controls` on the target, `tooltip` sets `aria-describedby` instead\n * and should be used if the dropdown contains only descriptive content.\n * @default 'dialog'\n */\n role?: 'dialog' | 'tooltip';\n\n /** Determines whether the dropdown should be closed when the user presses outside of the target and the dropdown @default true */\n closeOnClickOutside?: boolean;\n\n /** Not supported by `HoverCard`: outside press is always detected with the `pointerdown` event. Use `closeOnClickOutside` to disable it. */\n clickOutsideEvents?: string[];\n\n /**\n * Determines whether focus should be returned to the target when the dropdown closes.\n * Ignored when focus activation is enabled (`events.focus`, the default), otherwise moving\n * focus away from the target would return it and reopen the dropdown.\n * `Escape` pressed inside the dropdown always returns focus to the target.\n * @default false\n */\n returnFocus?: boolean;\n\n /** Called when the dropdown is closed with `Escape` key or with a press outside of the target and the dropdown */\n onDismiss?: () => void;\n}\n\nexport type HoverCardFactory = Factory<{\n props: HoverCardProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst DEFAULT_EVENTS = { hover: true, focus: true, touch: false };\n\nconst defaultProps = {\n openDelay: 0,\n closeDelay: 150,\n initiallyOpened: false,\n interactive: false,\n closeOnEscape: true,\n closeOnClickOutside: true,\n role: 'dialog',\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n const {\n children,\n onOpen,\n onClose,\n openDelay,\n closeDelay,\n initiallyOpened,\n events,\n interactive,\n closeOnEscape,\n closeOnClickOutside,\n returnFocus,\n onDismiss,\n id,\n role,\n withRoles,\n ...others\n } = useProps('HoverCard', defaultProps, props);\n\n const resolvedEvents = { ...DEFAULT_EVENTS, ...events };\n const rolesEnabled = withRoles !== false;\n\n const hoverCard = useHoverCard({\n openDelay,\n closeDelay,\n defaultOpened: initiallyOpened,\n onOpen,\n onClose,\n events: resolvedEvents,\n interactive,\n closeOnEscape,\n closeOnClickOutside,\n onDismiss,\n id,\n });\n\n return (\n <HoverCardContext\n value={{\n openDropdown: hoverCard.openDropdown,\n closeDropdown: hoverCard.closeDropdown,\n assignTarget: hoverCard.assignTarget,\n getReferenceProps: hoverCard.getReferenceProps,\n getFloatingProps: hoverCard.getFloatingProps,\n reference: hoverCard.reference,\n floating: hoverCard.floating,\n opened: hoverCard.opened!,\n dropdownId: hoverCard.dropdownId,\n role,\n withRoles: rolesEnabled,\n }}\n >\n <Popover\n {...others}\n id={id}\n closeOnEscape={closeOnEscape}\n closeOnClickOutside={closeOnClickOutside}\n returnFocus={resolvedEvents.focus ? false : returnFocus}\n withRoles={role === 'tooltip' ? false : withRoles}\n opened={hoverCard.opened}\n __staticSelector=\"HoverCard\"\n >\n {children}\n </Popover>\n </HoverCardContext>\n );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n export type Props = HoverCardProps;\n export type Events = HoverCardEvents;\n export type DropdownProps = HoverCardDropdownProps;\n export type TargetProps = HoverCardTargetProps;\n export type GroupProps = HoverCardGroupProps;\n export type ContextValue = HoverCardContextValue;\n\n export namespace Group {\n export type Props = HoverCardGroupProps;\n export type ContextValue = HoverCardGroupContextValue;\n }\n}\n"],"mappings":";;;;;;;;;;AA8FA,MAAM,iBAAiB;CAAE,OAAO;CAAM,OAAO;CAAM,OAAO;AAAM;AAEhE,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;CACjB,aAAa;CACb,eAAe;CACf,qBAAqB;CACrB,MAAM;AACR;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,UACA,QACA,SACA,WACA,YACA,iBACA,QACA,aACA,eACA,qBACA,aACA,WACA,IACA,MACA,WACA,GAAG,WACDA,kBAAAA,SAAS,aAAa,cAAc,KAAK;CAE7C,MAAM,iBAAiB;EAAE,GAAG;EAAgB,GAAG;CAAO;CACtD,MAAM,eAAe,cAAc;CAEnC,MAAM,YAAYC,uBAAAA,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;GACpB,QAAQ,UAAU;GAClB,YAAY,UAAU;GACtB;GACA,WAAW;EACb;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;GACE,GAAI;GACA;GACW;GACM;GACrB,aAAa,eAAe,QAAQ,QAAQ;GAC5C,WAAW,SAAS,YAAY,QAAQ;GACxC,QAAQ,UAAU;GAClB,kBAAiB;GAEhB;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAASC,wBAAAA;AACnB,UAAU,WAAWC,0BAAAA;AACrB,UAAU,QAAQC,uBAAAA;AAClB,UAAU,UAAU,UAA6C"}
@@ -1 +1 @@
1
- {"version":3,"file":"HoverCard.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/HoverCard/HoverCard.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface HoverCardContextValue {\n openDropdown: () => void;\n closeDropdown: () => void;\n assignTarget: (node: HTMLElement | null) => void;\n getReferenceProps?: () => any;\n getFloatingProps?: () => any;\n reference?: (node: HTMLElement | null) => void;\n floating?: (node: HTMLElement | null) => void;\n}\n\nexport const [HoverCardContext, useHoverCardContext] = createSafeContext<HoverCardContextValue>(\n 'HoverCard component was not found in the tree'\n);\n"],"mappings":";;AAYA,MAAa,CAAC,kBAAkB,6FAAuBA,CAAAA,CAAAA,kBACrD,+CACF"}
1
+ {"version":3,"file":"HoverCard.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/HoverCard/HoverCard.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface HoverCardContextValue {\n openDropdown: () => void;\n closeDropdown: () => void;\n assignTarget: (node: HTMLElement | null) => void;\n getReferenceProps: (userProps?: Record<string, any>) => Record<string, any>;\n getFloatingProps: (userProps?: Record<string, any>) => Record<string, any>;\n reference: (node: HTMLElement | null) => void;\n floating: (node: HTMLElement | null) => void;\n opened: boolean;\n role: 'dialog' | 'tooltip';\n withRoles: boolean;\n dropdownId: string;\n}\n\nexport const [HoverCardContext, useHoverCardContext] = createSafeContext<HoverCardContextValue>(\n 'HoverCard component was not found in the tree'\n);\n"],"mappings":";;AAgBA,MAAa,CAAC,kBAAkB,6FAAuBA,CAAAA,CAAAA,kBACrD,+CACF"}
@@ -3,29 +3,24 @@ const require_create_event_handler = require("../../../core/utils/create-event-h
3
3
  const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
4
4
  const require_Popover = require("../../Popover/Popover.cjs");
5
5
  const require_HoverCard_context = require("../HoverCard.context.cjs");
6
- const require_HoverCardGroup = require("../HoverCardGroup/HoverCardGroup.cjs");
7
- let react = require("react");
6
+ let _mantine_hooks = require("@mantine/hooks");
8
7
  let react_jsx_runtime = require("react/jsx-runtime");
9
8
  //#region packages/@mantine/core/src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx
10
9
  function HoverCardDropdown(props) {
11
- const { children, onMouseEnter, onMouseLeave, ...others } = require_use_props.useProps("HoverCardDropdown", null, props);
10
+ const { children, onMouseEnter, onMouseLeave, ref, ...others } = require_use_props.useProps("HoverCardDropdown", null, props);
12
11
  const ctx = require_HoverCard_context.useHoverCardContext();
13
- if ((0, react.use)(require_HoverCardGroup.HoverCardGroupContext).withinGroup && ctx.getFloatingProps && ctx.floating) {
14
- const floatingProps = ctx.getFloatingProps();
15
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover.Dropdown, {
16
- ref: ctx.floating,
17
- ...floatingProps,
18
- onMouseEnter: require_create_event_handler.createEventHandler(onMouseEnter, floatingProps.onMouseEnter),
19
- onMouseLeave: require_create_event_handler.createEventHandler(onMouseLeave, floatingProps.onMouseLeave),
20
- ...others,
21
- children
22
- });
23
- }
24
- const handleMouseEnter = require_create_event_handler.createEventHandler(onMouseEnter, ctx.openDropdown);
25
- const handleMouseLeave = require_create_event_handler.createEventHandler(onMouseLeave, ctx.closeDropdown);
12
+ const floatingProps = ctx.getFloatingProps();
13
+ const mergedRef = (0, _mantine_hooks.useMergedRef)(ctx.floating, ref);
14
+ const accessibleProps = ctx.withRoles && ctx.role === "tooltip" ? {
15
+ role: "tooltip",
16
+ id: ctx.dropdownId
17
+ } : void 0;
26
18
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover.Dropdown, {
27
- onMouseEnter: handleMouseEnter,
28
- onMouseLeave: handleMouseLeave,
19
+ ref: mergedRef,
20
+ ...floatingProps,
21
+ ...accessibleProps,
22
+ onMouseEnter: require_create_event_handler.createEventHandler(onMouseEnter, floatingProps.onMouseEnter),
23
+ onMouseLeave: require_create_event_handler.createEventHandler(onMouseLeave, floatingProps.onMouseLeave),
29
24
  ...others,
30
25
  children
31
26
  });
@@ -1 +1 @@
1
- {"version":3,"file":"HoverCardDropdown.cjs","names":["useProps","useHoverCardContext","use","HoverCardGroupContext","Popover","createEventHandler"],"sources":["../../../../src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx"],"sourcesContent":["import { use } from 'react';\nimport { createEventHandler, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardDropdownProps extends PopoverDropdownProps {\n /** Dropdown content */\n children?: React.ReactNode;\n}\n\nexport function HoverCardDropdown(props: HoverCardDropdownProps) {\n const { children, onMouseEnter, onMouseLeave, ...others } = useProps(\n 'HoverCardDropdown',\n null,\n props\n );\n\n const ctx = useHoverCardContext();\n const groupCtx = use(HoverCardGroupContext);\n\n if (groupCtx.withinGroup && ctx.getFloatingProps && ctx.floating) {\n const floatingProps = ctx.getFloatingProps();\n\n return (\n <Popover.Dropdown\n ref={ctx.floating}\n {...floatingProps}\n onMouseEnter={createEventHandler<any>(onMouseEnter, floatingProps.onMouseEnter)}\n onMouseLeave={createEventHandler<any>(onMouseLeave, floatingProps.onMouseLeave)}\n {...others}\n >\n {children}\n </Popover.Dropdown>\n );\n }\n\n const handleMouseEnter = createEventHandler<any>(onMouseEnter, ctx.openDropdown);\n const handleMouseLeave = createEventHandler<any>(onMouseLeave!, ctx.closeDropdown);\n\n return (\n <Popover.Dropdown onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...others}>\n {children}\n </Popover.Dropdown>\n );\n}\n\nHoverCardDropdown.displayName = '@mantine/core/HoverCardDropdown';\n"],"mappings":";;;;;;;;;AAWA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,EAAE,UAAU,cAAc,cAAc,GAAG,WAAWA,kBAAAA,SAC1D,qBACA,MACA,KACF;CAEA,MAAM,MAAMC,0BAAAA,oBAAoB;CAGhC,KAAA,GAFiBC,MAAAA,IAAAA,CAAIC,uBAAAA,qBAEV,CAAC,CAAC,eAAe,IAAI,oBAAoB,IAAI,UAAU;EAChE,MAAM,gBAAgB,IAAI,iBAAiB;EAE3C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,UAAT;GACE,KAAK,IAAI;GACT,GAAI;GACJ,cAAcC,6BAAAA,mBAAwB,cAAc,cAAc,YAAY;GAC9E,cAAcA,6BAAAA,mBAAwB,cAAc,cAAc,YAAY;GAC9E,GAAI;GAEH;EACe,CAAA;CAEtB;CAEA,MAAM,mBAAmBA,6BAAAA,mBAAwB,cAAc,IAAI,YAAY;CAC/E,MAAM,mBAAmBA,6BAAAA,mBAAwB,cAAe,IAAI,aAAa;CAEjF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,gBAAAA,QAAQ,UAAT;EAAkB,cAAc;EAAkB,cAAc;EAAkB,GAAI;EACnF;CACe,CAAA;AAEtB;AAEA,kBAAkB,cAAc"}
1
+ {"version":3,"file":"HoverCardDropdown.cjs","names":["useProps","useHoverCardContext","useMergedRef","Popover","createEventHandler"],"sources":["../../../../src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\n\nexport interface HoverCardDropdownProps extends PopoverDropdownProps {\n /** Dropdown content */\n children?: React.ReactNode;\n}\n\nexport function HoverCardDropdown(props: HoverCardDropdownProps) {\n const { children, onMouseEnter, onMouseLeave, ref, ...others } = useProps(\n 'HoverCardDropdown',\n null,\n props\n );\n\n const ctx = useHoverCardContext();\n const floatingProps = ctx.getFloatingProps();\n const mergedRef = useMergedRef(ctx.floating, ref);\n\n const accessibleProps =\n ctx.withRoles && ctx.role === 'tooltip' ? { role: 'tooltip', id: ctx.dropdownId } : undefined;\n\n return (\n <Popover.Dropdown\n ref={mergedRef}\n {...floatingProps}\n {...accessibleProps}\n onMouseEnter={createEventHandler<any>(onMouseEnter, floatingProps.onMouseEnter)}\n onMouseLeave={createEventHandler<any>(onMouseLeave, floatingProps.onMouseLeave)}\n {...others}\n >\n {children}\n </Popover.Dropdown>\n );\n}\n\nHoverCardDropdown.displayName = '@mantine/core/HoverCardDropdown';\n"],"mappings":";;;;;;;;AAUA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,EAAE,UAAU,cAAc,cAAc,KAAK,GAAG,WAAWA,kBAAAA,SAC/D,qBACA,MACA,KACF;CAEA,MAAM,MAAMC,0BAAAA,oBAAoB;CAChC,MAAM,gBAAgB,IAAI,iBAAiB;CAC3C,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,IAAI,UAAU,GAAG;CAEhD,MAAM,kBACJ,IAAI,aAAa,IAAI,SAAS,YAAY;EAAE,MAAM;EAAW,IAAI,IAAI;CAAW,IAAI,KAAA;CAEtF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,UAAT;EACE,KAAK;EACL,GAAI;EACJ,GAAI;EACJ,cAAcC,6BAAAA,mBAAwB,cAAc,cAAc,YAAY;EAC9E,cAAcA,6BAAAA,mBAAwB,cAAc,cAAc,YAAY;EAC9E,GAAI;EAEH;CACe,CAAA;AAEtB;AAEA,kBAAkB,cAAc"}
@@ -1,11 +1,9 @@
1
1
  "use client";
2
- const require_create_event_handler = require("../../../core/utils/create-event-handler/create-event-handler.cjs");
3
2
  const require_get_ref_prop = require("../../../core/utils/get-ref-prop/get-ref-prop.cjs");
4
3
  const require_get_single_element_child = require("../../../core/utils/get-single-element-child/get-single-element-child.cjs");
5
4
  const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
6
5
  const require_Popover = require("../../Popover/Popover.cjs");
7
6
  const require_HoverCard_context = require("../HoverCard.context.cjs");
8
- const require_HoverCardGroup = require("../HoverCardGroup/HoverCardGroup.cjs");
9
7
  let react = require("react");
10
8
  let _mantine_hooks = require("@mantine/hooks");
11
9
  let react_jsx_runtime = require("react/jsx-runtime");
@@ -16,28 +14,13 @@ function HoverCardTarget(props) {
16
14
  const child = require_get_single_element_child.getSingleElementChild(children);
17
15
  if (!child) throw new Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
18
16
  const ctx = require_HoverCard_context.useHoverCardContext();
19
- const groupContext = (0, react.use)(require_HoverCardGroup.HoverCardGroupContext);
20
- const targetRef = (0, _mantine_hooks.useMergedRef)(require_get_ref_prop.getRefProp(child), ctx.assignTarget);
21
- if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {
22
- const referenceProps = ctx.getReferenceProps();
23
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover.Target, {
24
- refProp,
25
- ...others,
26
- children: (0, react.cloneElement)(child, eventPropsWrapperName ? { [eventPropsWrapperName]: {
27
- ...referenceProps,
28
- ref: ctx.reference
29
- } } : {
30
- ...referenceProps,
31
- ref: ctx.reference
32
- })
33
- });
34
- }
35
- const eventListeners = {
36
- onMouseEnter: require_create_event_handler.createEventHandler(child.props.onMouseEnter, ctx.openDropdown),
37
- onMouseLeave: require_create_event_handler.createEventHandler(child.props.onMouseLeave, ctx.closeDropdown)
38
- };
17
+ const childProps = child.props;
18
+ const targetRef = (0, _mantine_hooks.useMergedRef)(require_get_ref_prop.getRefProp(child), ctx.assignTarget, ctx.reference);
19
+ const referenceProps = ctx.getReferenceProps(eventPropsWrapperName ? childProps[eventPropsWrapperName] : childProps);
20
+ const accessibleProps = ctx.withRoles && ctx.role === "tooltip" ? { "aria-describedby": [childProps["aria-describedby"], ctx.opened ? ctx.dropdownId : null].filter(Boolean).join(" ") || void 0 } : void 0;
39
21
  const clonedProps = {
40
- ...eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners,
22
+ ...eventPropsWrapperName ? { [eventPropsWrapperName]: referenceProps } : referenceProps,
23
+ ...accessibleProps,
41
24
  ref: targetRef
42
25
  };
43
26
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover.Target, {
@@ -1 +1 @@
1
- {"version":3,"file":"HoverCardTarget.cjs","names":["useProps","getSingleElementChild","useHoverCardContext","use","HoverCardGroupContext","useMergedRef","getRefProp","Popover","cloneElement","createEventHandler"],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement, use } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n /**\n * Name of the prop to wrap event listeners in.\n * Use when the target component expects event listeners in a nested object.\n * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n * @default undefined (event listeners passed directly to component)\n */\n eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n 'HoverCardTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useHoverCardContext();\n const groupContext = use(HoverCardGroupContext);\n const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);\n\n if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {\n const referenceProps = ctx.getReferenceProps();\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(\n child,\n eventPropsWrapperName\n ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }\n : { ...referenceProps, ref: ctx.reference }\n )}\n </Popover.Target>\n );\n }\n\n const onMouseEnter = createEventHandler((child.props as any).onMouseEnter, ctx.openDropdown);\n const onMouseLeave = createEventHandler((child.props as any).onMouseLeave, ctx.closeDropdown);\n\n const eventListeners = { onMouseEnter, onMouseLeave };\n\n const clonedProps: any = {\n ...(eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners),\n ref: targetRef,\n };\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(child, clonedProps)}\n </Popover.Target>\n );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAWA,kBAAAA,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAMC,0BAAAA,oBAAoB;CAChC,MAAM,gBAAA,GAAeC,MAAAA,IAAAA,CAAIC,uBAAAA,qBAAqB;CAC9C,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAaC,qBAAAA,WAAW,KAAK,GAAG,IAAI,YAAY;CAElE,IAAI,aAAa,eAAe,IAAI,qBAAqB,IAAI,WAAW;EACtE,MAAM,iBAAiB,IAAI,kBAAkB;EAE7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,QAAT;GAAyB;GAAS,GAAI;GACnCC,WAAAA,GAAAA,MAAAA,aAAAA,CACC,OACA,wBACI,GAAG,wBAAwB;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,EAAE,IACrE;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,CAC9C;EACc,CAAA;CAEpB;CAKA,MAAM,iBAAiB;EAAE,cAHJC,6BAAAA,mBAAoB,MAAM,MAAc,cAAc,IAAI,YAG3C;EAAG,cAFlBA,6BAAAA,mBAAoB,MAAM,MAAc,cAAc,IAAI,aAE7B;CAAE;CAEpD,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,KAAK;CACP;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,GAAI;EACnCC,WAAAA,GAAAA,MAAAA,aAAAA,CAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
1
+ {"version":3,"file":"HoverCardTarget.cjs","names":["useProps","getSingleElementChild","useHoverCardContext","useMergedRef","getRefProp","Popover","cloneElement"],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n /**\n * Name of the prop to wrap event listeners in.\n * Use when the target component expects event listeners in a nested object.\n * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n * @default undefined (event listeners passed directly to component)\n */\n eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n 'HoverCardTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useHoverCardContext();\n const childProps = child.props as any;\n const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget, ctx.reference);\n\n const referenceProps = ctx.getReferenceProps(\n eventPropsWrapperName ? childProps[eventPropsWrapperName] : childProps\n );\n\n const accessibleProps =\n ctx.withRoles && ctx.role === 'tooltip'\n ? {\n 'aria-describedby':\n [childProps['aria-describedby'], ctx.opened ? ctx.dropdownId : null]\n .filter(Boolean)\n .join(' ') || undefined,\n }\n : undefined;\n\n const clonedProps: any = {\n ...(eventPropsWrapperName ? { [eventPropsWrapperName]: referenceProps } : referenceProps),\n ...accessibleProps,\n ref: targetRef,\n };\n\n return (\n <Popover.Target refProp={refProp} {...others}>\n {cloneElement(child, clonedProps)}\n </Popover.Target>\n );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAWA,kBAAAA,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAMC,0BAAAA,oBAAoB;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAaC,qBAAAA,WAAW,KAAK,GAAG,IAAI,cAAc,IAAI,SAAS;CAEjF,MAAM,iBAAiB,IAAI,kBACzB,wBAAwB,WAAW,yBAAyB,UAC9D;CAEA,MAAM,kBACJ,IAAI,aAAa,IAAI,SAAS,YAC1B,EACE,oBACE,CAAC,WAAW,qBAAqB,IAAI,SAAS,IAAI,aAAa,IAAI,CAAC,CACjE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA,EACpB,IACA,KAAA;CAEN,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,GAAG;EACH,KAAK;CACP;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,GAAI;EACnCC,WAAAA,GAAAA,MAAAA,aAAAA,CAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
@@ -8,7 +8,9 @@ function useHoverCard(settings) {
8
8
  const [uncontrolledOpened, setUncontrolledOpened] = (0, react.useState)(settings.defaultOpened);
9
9
  const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
10
10
  const withinGroup = (0, react.use)(require_HoverCardGroup.HoverCardGroupContext).withinGroup;
11
- const uid = (0, _mantine_hooks.useId)();
11
+ const uid = (0, _mantine_hooks.useId)(settings.id);
12
+ const openedRef = (0, react.useRef)(opened);
13
+ openedRef.current = opened;
12
14
  const openTimeout = (0, react.useRef)(-1);
13
15
  const closeTimeout = (0, react.useRef)(-1);
14
16
  const targetRef = (0, react.useRef)(null);
@@ -20,6 +22,8 @@ function useHoverCard(settings) {
20
22
  window.clearTimeout(closeTimeout.current);
21
23
  }, []);
22
24
  const onChange = (0, react.useCallback)((_opened) => {
25
+ if (openedRef.current === _opened) return;
26
+ openedRef.current = _opened;
23
27
  setUncontrolledOpened(_opened);
24
28
  if (_opened) {
25
29
  setCurrentId(uid);
@@ -30,40 +34,49 @@ function useHoverCard(settings) {
30
34
  settings.onOpen,
31
35
  settings.onClose
32
36
  ]);
37
+ const onOpenChange = (0, react.useCallback)((_opened, _event, reason) => {
38
+ const wasOpened = openedRef.current;
39
+ onChange(_opened);
40
+ if (wasOpened && !_opened && (reason === "escape-key" || reason === "outside-press")) settings.onDismiss?.();
41
+ }, [onChange, settings.onDismiss]);
33
42
  const { context, refs } = (0, _floating_ui_react.useFloating)({
34
43
  open: opened,
35
- onOpenChange: onChange
44
+ onOpenChange
36
45
  });
37
46
  const { delay: groupDelay, setCurrentId } = (0, _floating_ui_react.useDelayGroup)(context, { id: uid });
38
47
  const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
39
48
  (0, _floating_ui_react.useHover)(context, {
40
- enabled: true,
49
+ enabled: settings.events.hover,
41
50
  delay: withinGroup ? groupDelay : {
42
51
  open: settings.openDelay,
43
52
  close: settings.closeDelay
44
- }
53
+ },
54
+ mouseOnly: !settings.events.touch,
55
+ handleClose: settings.interactive ? (0, _floating_ui_react.safePolygon)() : null
56
+ }),
57
+ (0, _floating_ui_react.useFocus)(context, {
58
+ enabled: settings.events.focus,
59
+ visibleOnly: true
45
60
  }),
46
- (0, _floating_ui_react.useRole)(context, { role: "dialog" }),
47
- (0, _floating_ui_react.useDismiss)(context, { enabled: withinGroup })
61
+ (0, _floating_ui_react.useDismiss)(context, {
62
+ escapeKey: settings.closeOnEscape,
63
+ outsidePress: settings.closeOnClickOutside
64
+ })
48
65
  ]);
49
66
  const openDropdown = (0, react.useCallback)(() => {
50
- if (withinGroup) return;
51
67
  clearTimeouts();
52
- if (settings.openDelay === 0 || settings.openDelay === void 0) onChange(true);
68
+ if (!settings.openDelay) onChange(true);
53
69
  else openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);
54
70
  }, [
55
- withinGroup,
56
71
  clearTimeouts,
57
72
  settings.openDelay,
58
73
  onChange
59
74
  ]);
60
75
  const closeDropdown = (0, react.useCallback)(() => {
61
- if (withinGroup) return;
62
76
  clearTimeouts();
63
- if (settings.closeDelay === 0 || settings.closeDelay === void 0) onChange(false);
77
+ if (!settings.closeDelay) onChange(false);
64
78
  else closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);
65
79
  }, [
66
- withinGroup,
67
80
  clearTimeouts,
68
81
  settings.closeDelay,
69
82
  onChange
@@ -90,6 +103,7 @@ function useHoverCard(settings) {
90
103
  ]);
91
104
  return {
92
105
  opened,
106
+ dropdownId: `${uid}-dropdown`,
93
107
  reference: refs.setReference,
94
108
  floating: refs.setFloating,
95
109
  assignTarget,
@@ -1 +1 @@
1
- {"version":3,"file":"use-hover-card.cjs","names":["useState","use","HoverCardGroupContext","useId","useRef","useCallback","useFloating","useDelayGroup","useInteractions","useHover","useRole","useDismiss"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n useDelayGroup,\n useDismiss,\n useFloating,\n useHover,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n openDelay?: number;\n closeDelay?: number;\n opened?: boolean;\n defaultOpened?: boolean;\n onOpen?: () => void;\n onClose?: () => void;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = use(HoverCardGroupContext).withinGroup;\n const uid = useId();\n\n const openTimeout = useRef(-1);\n const closeTimeout = useRef(-1);\n const targetRef = useRef<HTMLElement | null>(null);\n\n const assignTarget = useCallback((node: HTMLElement | null) => {\n targetRef.current = node;\n }, []);\n\n const clearTimeouts = useCallback(() => {\n window.clearTimeout(openTimeout.current);\n window.clearTimeout(closeTimeout.current);\n }, []);\n\n const onChange = useCallback(\n (_opened: boolean) => {\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n settings.onOpen?.();\n } else {\n settings.onClose?.();\n }\n },\n [uid, settings.onOpen, settings.onClose]\n );\n\n const { context, refs } = useFloating({\n open: opened,\n onOpenChange: onChange,\n });\n\n const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: true,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n }),\n useRole(context, { role: 'dialog' }),\n useDismiss(context, { enabled: withinGroup }),\n ]);\n\n const openDropdown = useCallback(() => {\n if (withinGroup) {\n return; // Group mode handles this automatically\n }\n\n clearTimeouts();\n if (settings.openDelay === 0 || settings.openDelay === undefined) {\n onChange(true);\n } else {\n openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n }\n }, [withinGroup, clearTimeouts, settings.openDelay, onChange]);\n\n const closeDropdown = useCallback(() => {\n if (withinGroup) {\n return; // Group mode handles this automatically\n }\n\n clearTimeouts();\n if (settings.closeDelay === 0 || settings.closeDelay === undefined) {\n onChange(false);\n } else {\n closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n }\n }, [withinGroup, clearTimeouts, settings.closeDelay, onChange]);\n\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n\n useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n useEffect(() => {\n if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n return undefined;\n }\n\n const node = targetRef.current;\n if (!node) {\n return undefined;\n }\n\n const observer = new IntersectionObserver(() => {\n if (!node.isConnected || node.getClientRects().length === 0) {\n clearTimeouts();\n onChangeRef.current(false);\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [opened, withinGroup, clearTimeouts]);\n\n return {\n opened,\n reference: refs.setReference,\n floating: refs.setFloating,\n assignTarget,\n getReferenceProps,\n getFloatingProps,\n openDropdown,\n closeDropdown,\n };\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"use-hover-card.cjs","names":["useState","use","HoverCardGroupContext","useId","useRef","useCallback","useFloating","useDelayGroup","useInteractions","useHover","safePolygon","useFocus","useDismiss"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n OpenChangeReason,\n safePolygon,\n useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n openDelay?: number;\n closeDelay?: number;\n opened?: boolean;\n defaultOpened?: boolean;\n onOpen?: () => void;\n onClose?: () => void;\n events: { hover: boolean; focus: boolean; touch: boolean };\n interactive: boolean;\n closeOnEscape: boolean;\n closeOnClickOutside: boolean;\n onDismiss?: () => void;\n id?: string;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n const controlled = typeof settings.opened === 'boolean';\n const opened = controlled ? settings.opened : uncontrolledOpened;\n const withinGroup = use(HoverCardGroupContext).withinGroup;\n const uid = useId(settings.id);\n\n const openedRef = useRef(opened);\n openedRef.current = opened;\n\n const openTimeout = useRef(-1);\n const closeTimeout = useRef(-1);\n const targetRef = useRef<HTMLElement | null>(null);\n\n const assignTarget = useCallback((node: HTMLElement | null) => {\n targetRef.current = node;\n }, []);\n\n const clearTimeouts = useCallback(() => {\n window.clearTimeout(openTimeout.current);\n window.clearTimeout(closeTimeout.current);\n }, []);\n\n const onChange = useCallback(\n (_opened: boolean) => {\n if (openedRef.current === _opened) {\n return;\n }\n\n openedRef.current = _opened;\n setUncontrolledOpened(_opened);\n\n if (_opened) {\n setCurrentId(uid);\n settings.onOpen?.();\n } else {\n settings.onClose?.();\n }\n },\n [uid, settings.onOpen, settings.onClose]\n );\n\n const onOpenChange = useCallback(\n (_opened: boolean, _event?: Event, reason?: OpenChangeReason) => {\n const wasOpened = openedRef.current;\n onChange(_opened);\n\n if (wasOpened && !_opened && (reason === 'escape-key' || reason === 'outside-press')) {\n settings.onDismiss?.();\n }\n },\n [onChange, settings.onDismiss]\n );\n\n const { context, refs } = useFloating({\n open: opened,\n onOpenChange,\n });\n\n const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n enabled: settings.events.hover,\n delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n mouseOnly: !settings.events.touch,\n handleClose: settings.interactive ? safePolygon() : null,\n }),\n useFocus(context, { enabled: settings.events.focus, visibleOnly: true }),\n useDismiss(context, {\n escapeKey: settings.closeOnEscape,\n outsidePress: settings.closeOnClickOutside,\n }),\n ]);\n\n const openDropdown = useCallback(() => {\n clearTimeouts();\n if (!settings.openDelay) {\n onChange(true);\n } else {\n openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n }\n }, [clearTimeouts, settings.openDelay, onChange]);\n\n const closeDropdown = useCallback(() => {\n clearTimeouts();\n if (!settings.closeDelay) {\n onChange(false);\n } else {\n closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n }\n }, [clearTimeouts, settings.closeDelay, onChange]);\n\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n\n useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n useEffect(() => {\n if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n return undefined;\n }\n\n const node = targetRef.current;\n if (!node) {\n return undefined;\n }\n\n const observer = new IntersectionObserver(() => {\n if (!node.isConnected || node.getClientRects().length === 0) {\n clearTimeouts();\n onChangeRef.current(false);\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, [opened, withinGroup, clearTimeouts]);\n\n return {\n opened,\n dropdownId: `${uid}-dropdown`,\n reference: refs.setReference,\n floating: refs.setFloating,\n assignTarget,\n getReferenceProps,\n getFloatingProps,\n openDropdown,\n closeDropdown,\n };\n}\n"],"mappings":"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"}