@salt-ds/core 1.71.0 → 1.73.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 (444) hide show
  1. package/CHANGELOG.md +204 -0
  2. package/css/salt-core.css +432 -175
  3. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  4. package/dist-cjs/avatar/Avatar.css.js +1 -1
  5. package/dist-cjs/badge/Badge.css.js +1 -1
  6. package/dist-cjs/banner/Banner.css.js +1 -1
  7. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  8. package/dist-cjs/breadcrumbs/Breadcrumb.css.js +1 -1
  9. package/dist-cjs/breadcrumbs/Breadcrumb.js +5 -6
  10. package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
  11. package/dist-cjs/breadcrumbs/Breadcrumbs.css.js +1 -1
  12. package/dist-cjs/button/Button.css.js +1 -1
  13. package/dist-cjs/card/CardContent.css.js +1 -1
  14. package/dist-cjs/card/hasCardSection.js +11 -3
  15. package/dist-cjs/card/hasCardSection.js.map +1 -1
  16. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  17. package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
  18. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  19. package/dist-cjs/collapsible/CollapsiblePanel.css.js +1 -1
  20. package/dist-cjs/collapsible/CollapsiblePanel.js +15 -15
  21. package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -1
  22. package/dist-cjs/combo-box/ComboBox.js +18 -36
  23. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  24. package/dist-cjs/combo-box/useComboBox.js +21 -21
  25. package/dist-cjs/combo-box/useComboBox.js.map +1 -1
  26. package/dist-cjs/dialog/DialogHeader.js +2 -0
  27. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  28. package/dist-cjs/drawer/DrawerHeader.js +2 -0
  29. package/dist-cjs/drawer/DrawerHeader.js.map +1 -1
  30. package/dist-cjs/dropdown/Dropdown.css.js +1 -1
  31. package/dist-cjs/dropdown/Dropdown.js +30 -31
  32. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  33. package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
  34. package/dist-cjs/form-field/FormField.css.js +1 -1
  35. package/dist-cjs/form-field/FormField.js +2 -2
  36. package/dist-cjs/form-field/FormField.js.map +1 -1
  37. package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
  38. package/dist-cjs/form-field/FormFieldHelperText.js +2 -0
  39. package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
  40. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  41. package/dist-cjs/form-field/FormFieldLabel.js +3 -1
  42. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  43. package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
  44. package/dist-cjs/index.js +13 -0
  45. package/dist-cjs/index.js.map +1 -1
  46. package/dist-cjs/input/Input.css.js +1 -1
  47. package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
  48. package/dist-cjs/interactable-card/InteractableCard.js +18 -7
  49. package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
  50. package/dist-cjs/interactable-card/InteractableCardGroup.js +71 -39
  51. package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
  52. package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
  53. package/dist-cjs/interactable-card/useInteractableCard.js +2 -3
  54. package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
  55. package/dist-cjs/kbd/Kbd.css.js +1 -1
  56. package/dist-cjs/link/Link.css.js +1 -1
  57. package/dist-cjs/link/Link.js +2 -0
  58. package/dist-cjs/link/Link.js.map +1 -1
  59. package/dist-cjs/link/LinkAction.js +3 -2
  60. package/dist-cjs/link/LinkAction.js.map +1 -1
  61. package/dist-cjs/link-button/LinkButton.js +3 -2
  62. package/dist-cjs/link-button/LinkButton.js.map +1 -1
  63. package/dist-cjs/list-box/ListBox.js +20 -27
  64. package/dist-cjs/list-box/ListBox.js.map +1 -1
  65. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  66. package/dist-cjs/list-control/ListControlNavigationKeys.js +74 -0
  67. package/dist-cjs/list-control/ListControlNavigationKeys.js.map +1 -0
  68. package/dist-cjs/list-control/ListControlOptionContext.js +47 -0
  69. package/dist-cjs/list-control/ListControlOptionContext.js.map +1 -0
  70. package/dist-cjs/list-control/ListControlOptionStore.js +159 -0
  71. package/dist-cjs/list-control/ListControlOptionStore.js.map +1 -0
  72. package/dist-cjs/list-control/ListControlProvider.js +39 -0
  73. package/dist-cjs/list-control/ListControlProvider.js.map +1 -0
  74. package/dist-cjs/list-control/ListControlRegistry.js +161 -0
  75. package/dist-cjs/list-control/ListControlRegistry.js.map +1 -0
  76. package/dist-cjs/list-control/ListControlState.js +137 -109
  77. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  78. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  79. package/dist-cjs/mega-menu/MegaMenuListItem.css.js +1 -1
  80. package/dist-cjs/menu/MenuGroup.css.js +1 -1
  81. package/dist-cjs/menu/MenuItem.css.js +1 -1
  82. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  83. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  84. package/dist-cjs/number-input/NumberInput.css.js +1 -1
  85. package/dist-cjs/number-input/NumberInput.js +2 -2
  86. package/dist-cjs/number-input/NumberInput.js.map +1 -1
  87. package/dist-cjs/on-solid-button/OnSolidButton.css.js +6 -0
  88. package/dist-cjs/on-solid-button/OnSolidButton.css.js.map +1 -0
  89. package/dist-cjs/on-solid-button/OnSolidButton.js +68 -0
  90. package/dist-cjs/on-solid-button/OnSolidButton.js.map +1 -0
  91. package/dist-cjs/option/Option.css.js +1 -1
  92. package/dist-cjs/option/Option.js +64 -39
  93. package/dist-cjs/option/Option.js.map +1 -1
  94. package/dist-cjs/option/OptionGroup.css.js +1 -1
  95. package/dist-cjs/overlay/Overlay.js +12 -2
  96. package/dist-cjs/overlay/Overlay.js.map +1 -1
  97. package/dist-cjs/overlay/OverlayContext.js +6 -0
  98. package/dist-cjs/overlay/OverlayContext.js.map +1 -1
  99. package/dist-cjs/overlay/OverlayFooter.css.js +6 -0
  100. package/dist-cjs/overlay/OverlayFooter.css.js.map +1 -0
  101. package/dist-cjs/overlay/OverlayFooter.js +30 -0
  102. package/dist-cjs/overlay/OverlayFooter.js.map +1 -0
  103. package/dist-cjs/overlay/OverlayHeader.css.js +1 -1
  104. package/dist-cjs/overlay/OverlayHeader.js +53 -11
  105. package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
  106. package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
  107. package/dist-cjs/overlay/OverlayPanel.js +20 -7
  108. package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
  109. package/dist-cjs/overlay/OverlayPanelCloseButton.js +1 -1
  110. package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
  111. package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
  112. package/dist-cjs/overlay/OverlayPanelContent.js +11 -13
  113. package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
  114. package/dist-cjs/overlay/hasOverlaySection.js +24 -0
  115. package/dist-cjs/overlay/hasOverlaySection.js.map +1 -0
  116. package/dist-cjs/pagination/CompactPaginator.js +2 -0
  117. package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
  118. package/dist-cjs/pagination/GoToInput.js +2 -0
  119. package/dist-cjs/pagination/GoToInput.js.map +1 -1
  120. package/dist-cjs/pill/PillCheckIcon.js.map +1 -1
  121. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  122. package/dist-cjs/pill-input/PillInput.js +2 -2
  123. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  124. package/dist-cjs/progress/CircularProgress/CircularProgress.js +2 -0
  125. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  126. package/dist-cjs/progress/LinearProgress/LinearProgress.js +2 -0
  127. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  128. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  129. package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
  130. package/dist-cjs/rating/Rating.css.js +1 -1
  131. package/dist-cjs/salt-provider/ThemeApplicator.js +10 -6
  132. package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -1
  133. package/dist-cjs/side-panel/SidePanelTitle.js +2 -0
  134. package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -1
  135. package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -1
  136. package/dist-cjs/side-panel/internal/useIsScrollable.js.map +1 -1
  137. package/dist-cjs/side-panel/useSidePanel.js +4 -9
  138. package/dist-cjs/side-panel/useSidePanel.js.map +1 -1
  139. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +2 -2
  140. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  141. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
  142. package/dist-cjs/slider/internal/SliderTooltip.js +2 -0
  143. package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
  144. package/dist-cjs/slider/internal/SliderTrack.css.js +1 -1
  145. package/dist-cjs/slider/internal/SliderTrack.js +2 -0
  146. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
  147. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
  148. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
  149. package/dist-cjs/slider/internal/utils.js.map +1 -1
  150. package/dist-cjs/stepper/Stepper.js +1 -1
  151. package/dist-cjs/stepper/Stepper.js.map +1 -1
  152. package/dist-cjs/stepper/internal/StepText.css.js +1 -1
  153. package/dist-cjs/stepper/internal/StepText.js +2 -0
  154. package/dist-cjs/stepper/internal/StepText.js.map +1 -1
  155. package/dist-cjs/switch/Switch.css.js +1 -1
  156. package/dist-cjs/table/Table.css.js +1 -1
  157. package/dist-cjs/tabs/Tabs.js +1 -1
  158. package/dist-cjs/tabs/Tabs.js.map +1 -1
  159. package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -1
  160. package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
  161. package/dist-cjs/tag/Tag.css.js +1 -1
  162. package/dist-cjs/text/Code.js +1 -1
  163. package/dist-cjs/text/Code.js.map +1 -1
  164. package/dist-cjs/text/Editorial.js +32 -0
  165. package/dist-cjs/text/Editorial.js.map +1 -0
  166. package/dist-cjs/text/Eyebrow.js +12 -0
  167. package/dist-cjs/text/Eyebrow.js.map +1 -0
  168. package/dist-cjs/text/Text.css.js +1 -1
  169. package/dist-cjs/text/Text.js +6 -2
  170. package/dist-cjs/text/Text.js.map +1 -1
  171. package/dist-cjs/toast/Toast.css.js +1 -1
  172. package/dist-cjs/toggle-button/ToggleButton.js +8 -2
  173. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  174. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +71 -8
  175. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  176. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  177. package/dist-cjs/toggletip/ToggletipPanel.css.js +1 -1
  178. package/dist-cjs/toolbar/ToolbarOverflow.js +8 -4
  179. package/dist-cjs/toolbar/ToolbarOverflow.js.map +1 -1
  180. package/dist-cjs/toolbar/toolbarUtils.js.map +1 -1
  181. package/dist-cjs/tooltip/Tooltip.css.js +1 -1
  182. package/dist-cjs/tooltip/useAriaAnnounce.js +4 -2
  183. package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
  184. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  185. package/dist-cjs/tree/TreeContext.js.map +1 -1
  186. package/dist-cjs/utils/forkRef.js +34 -0
  187. package/dist-cjs/utils/forkRef.js.map +1 -0
  188. package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
  189. package/dist-cjs/utils/marginMiddleware.js.map +1 -1
  190. package/dist-cjs/utils/setRef.js.map +1 -1
  191. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  192. package/dist-cjs/utils/useForkRef.js +3 -6
  193. package/dist-cjs/utils/useForkRef.js.map +1 -1
  194. package/dist-cjs/utils/useResizeObserver.js.map +1 -1
  195. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
  196. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  197. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  198. package/dist-es/avatar/Avatar.css.js +1 -1
  199. package/dist-es/badge/Badge.css.js +1 -1
  200. package/dist-es/banner/Banner.css.js +1 -1
  201. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  202. package/dist-es/breadcrumbs/Breadcrumb.css.js +1 -1
  203. package/dist-es/breadcrumbs/Breadcrumb.js +5 -6
  204. package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
  205. package/dist-es/breadcrumbs/Breadcrumbs.css.js +1 -1
  206. package/dist-es/button/Button.css.js +1 -1
  207. package/dist-es/card/CardContent.css.js +1 -1
  208. package/dist-es/card/hasCardSection.js +11 -3
  209. package/dist-es/card/hasCardSection.js.map +1 -1
  210. package/dist-es/checkbox/Checkbox.css.js +1 -1
  211. package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
  212. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  213. package/dist-es/collapsible/CollapsiblePanel.css.js +1 -1
  214. package/dist-es/collapsible/CollapsiblePanel.js +16 -16
  215. package/dist-es/collapsible/CollapsiblePanel.js.map +1 -1
  216. package/dist-es/combo-box/ComboBox.js +18 -36
  217. package/dist-es/combo-box/ComboBox.js.map +1 -1
  218. package/dist-es/combo-box/useComboBox.js +21 -21
  219. package/dist-es/combo-box/useComboBox.js.map +1 -1
  220. package/dist-es/dialog/DialogHeader.js +2 -0
  221. package/dist-es/dialog/DialogHeader.js.map +1 -1
  222. package/dist-es/drawer/DrawerHeader.js +2 -0
  223. package/dist-es/drawer/DrawerHeader.js.map +1 -1
  224. package/dist-es/dropdown/Dropdown.css.js +1 -1
  225. package/dist-es/dropdown/Dropdown.js +30 -31
  226. package/dist-es/dropdown/Dropdown.js.map +1 -1
  227. package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
  228. package/dist-es/form-field/FormField.css.js +1 -1
  229. package/dist-es/form-field/FormField.js +2 -2
  230. package/dist-es/form-field/FormField.js.map +1 -1
  231. package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
  232. package/dist-es/form-field/FormFieldHelperText.js +2 -0
  233. package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
  234. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  235. package/dist-es/form-field/FormFieldLabel.js +3 -1
  236. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  237. package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
  238. package/dist-es/index.js +4 -0
  239. package/dist-es/index.js.map +1 -1
  240. package/dist-es/input/Input.css.js +1 -1
  241. package/dist-es/interactable-card/InteractableCard.css.js +1 -1
  242. package/dist-es/interactable-card/InteractableCard.js +18 -7
  243. package/dist-es/interactable-card/InteractableCard.js.map +1 -1
  244. package/dist-es/interactable-card/InteractableCardGroup.js +72 -40
  245. package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
  246. package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
  247. package/dist-es/interactable-card/useInteractableCard.js +2 -3
  248. package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
  249. package/dist-es/kbd/Kbd.css.js +1 -1
  250. package/dist-es/link/Link.css.js +1 -1
  251. package/dist-es/link/Link.js +2 -0
  252. package/dist-es/link/Link.js.map +1 -1
  253. package/dist-es/link/LinkAction.js +3 -2
  254. package/dist-es/link/LinkAction.js.map +1 -1
  255. package/dist-es/link-button/LinkButton.js +3 -2
  256. package/dist-es/link-button/LinkButton.js.map +1 -1
  257. package/dist-es/list-box/ListBox.js +20 -27
  258. package/dist-es/list-box/ListBox.js.map +1 -1
  259. package/dist-es/list-control/ListControlContext.js.map +1 -1
  260. package/dist-es/list-control/ListControlNavigationKeys.js +69 -0
  261. package/dist-es/list-control/ListControlNavigationKeys.js.map +1 -0
  262. package/dist-es/list-control/ListControlOptionContext.js +44 -0
  263. package/dist-es/list-control/ListControlOptionContext.js.map +1 -0
  264. package/dist-es/list-control/ListControlOptionStore.js +153 -0
  265. package/dist-es/list-control/ListControlOptionStore.js.map +1 -0
  266. package/dist-es/list-control/ListControlProvider.js +37 -0
  267. package/dist-es/list-control/ListControlProvider.js.map +1 -0
  268. package/dist-es/list-control/ListControlRegistry.js +158 -0
  269. package/dist-es/list-control/ListControlRegistry.js.map +1 -0
  270. package/dist-es/list-control/ListControlState.js +137 -110
  271. package/dist-es/list-control/ListControlState.js.map +1 -1
  272. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  273. package/dist-es/mega-menu/MegaMenuListItem.css.js +1 -1
  274. package/dist-es/menu/MenuGroup.css.js +1 -1
  275. package/dist-es/menu/MenuItem.css.js +1 -1
  276. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  277. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  278. package/dist-es/number-input/NumberInput.css.js +1 -1
  279. package/dist-es/number-input/NumberInput.js +2 -2
  280. package/dist-es/number-input/NumberInput.js.map +1 -1
  281. package/dist-es/on-solid-button/OnSolidButton.css.js +4 -0
  282. package/dist-es/on-solid-button/OnSolidButton.css.js.map +1 -0
  283. package/dist-es/on-solid-button/OnSolidButton.js +66 -0
  284. package/dist-es/on-solid-button/OnSolidButton.js.map +1 -0
  285. package/dist-es/option/Option.css.js +1 -1
  286. package/dist-es/option/Option.js +65 -40
  287. package/dist-es/option/Option.js.map +1 -1
  288. package/dist-es/option/OptionGroup.css.js +1 -1
  289. package/dist-es/overlay/Overlay.js +13 -3
  290. package/dist-es/overlay/Overlay.js.map +1 -1
  291. package/dist-es/overlay/OverlayContext.js +6 -0
  292. package/dist-es/overlay/OverlayContext.js.map +1 -1
  293. package/dist-es/overlay/OverlayFooter.css.js +4 -0
  294. package/dist-es/overlay/OverlayFooter.css.js.map +1 -0
  295. package/dist-es/overlay/OverlayFooter.js +28 -0
  296. package/dist-es/overlay/OverlayFooter.js.map +1 -0
  297. package/dist-es/overlay/OverlayHeader.css.js +1 -1
  298. package/dist-es/overlay/OverlayHeader.js +53 -11
  299. package/dist-es/overlay/OverlayHeader.js.map +1 -1
  300. package/dist-es/overlay/OverlayPanel.css.js +1 -1
  301. package/dist-es/overlay/OverlayPanel.js +20 -7
  302. package/dist-es/overlay/OverlayPanel.js.map +1 -1
  303. package/dist-es/overlay/OverlayPanelCloseButton.js +1 -1
  304. package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
  305. package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
  306. package/dist-es/overlay/OverlayPanelContent.js +11 -13
  307. package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
  308. package/dist-es/overlay/hasOverlaySection.js +22 -0
  309. package/dist-es/overlay/hasOverlaySection.js.map +1 -0
  310. package/dist-es/pagination/CompactPaginator.js +2 -0
  311. package/dist-es/pagination/CompactPaginator.js.map +1 -1
  312. package/dist-es/pagination/GoToInput.js +2 -0
  313. package/dist-es/pagination/GoToInput.js.map +1 -1
  314. package/dist-es/pill/PillCheckIcon.js.map +1 -1
  315. package/dist-es/pill-input/PillInput.css.js +1 -1
  316. package/dist-es/pill-input/PillInput.js +2 -2
  317. package/dist-es/pill-input/PillInput.js.map +1 -1
  318. package/dist-es/progress/CircularProgress/CircularProgress.js +2 -0
  319. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  320. package/dist-es/progress/LinearProgress/LinearProgress.js +2 -0
  321. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  322. package/dist-es/radio-button/RadioButton.css.js +1 -1
  323. package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
  324. package/dist-es/rating/Rating.css.js +1 -1
  325. package/dist-es/salt-provider/ThemeApplicator.js +10 -6
  326. package/dist-es/salt-provider/ThemeApplicator.js.map +1 -1
  327. package/dist-es/side-panel/SidePanelTitle.js +2 -0
  328. package/dist-es/side-panel/SidePanelTitle.js.map +1 -1
  329. package/dist-es/side-panel/SidePanelTrigger.js.map +1 -1
  330. package/dist-es/side-panel/internal/useIsScrollable.js.map +1 -1
  331. package/dist-es/side-panel/useSidePanel.js +4 -9
  332. package/dist-es/side-panel/useSidePanel.js.map +1 -1
  333. package/dist-es/skip-link/internal/useManageFocusOnTarget.js +2 -2
  334. package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  335. package/dist-es/slider/internal/SliderThumb.js.map +1 -1
  336. package/dist-es/slider/internal/SliderTooltip.js +2 -0
  337. package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
  338. package/dist-es/slider/internal/SliderTrack.css.js +1 -1
  339. package/dist-es/slider/internal/SliderTrack.js +2 -0
  340. package/dist-es/slider/internal/SliderTrack.js.map +1 -1
  341. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
  342. package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
  343. package/dist-es/slider/internal/utils.js.map +1 -1
  344. package/dist-es/stepper/Stepper.js +1 -1
  345. package/dist-es/stepper/Stepper.js.map +1 -1
  346. package/dist-es/stepper/internal/StepText.css.js +1 -1
  347. package/dist-es/stepper/internal/StepText.js +2 -0
  348. package/dist-es/stepper/internal/StepText.js.map +1 -1
  349. package/dist-es/switch/Switch.css.js +1 -1
  350. package/dist-es/table/Table.css.js +1 -1
  351. package/dist-es/tabs/Tabs.js +1 -1
  352. package/dist-es/tabs/Tabs.js.map +1 -1
  353. package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -1
  354. package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
  355. package/dist-es/tag/Tag.css.js +1 -1
  356. package/dist-es/text/Code.js +1 -1
  357. package/dist-es/text/Code.js.map +1 -1
  358. package/dist-es/text/Editorial.js +25 -0
  359. package/dist-es/text/Editorial.js.map +1 -0
  360. package/dist-es/text/Eyebrow.js +10 -0
  361. package/dist-es/text/Eyebrow.js.map +1 -0
  362. package/dist-es/text/Text.css.js +1 -1
  363. package/dist-es/text/Text.js +6 -2
  364. package/dist-es/text/Text.js.map +1 -1
  365. package/dist-es/toast/Toast.css.js +1 -1
  366. package/dist-es/toggle-button/ToggleButton.js +8 -2
  367. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  368. package/dist-es/toggle-button-group/ToggleButtonGroup.js +71 -8
  369. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  370. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  371. package/dist-es/toggletip/ToggletipPanel.css.js +1 -1
  372. package/dist-es/toolbar/ToolbarOverflow.js +8 -4
  373. package/dist-es/toolbar/ToolbarOverflow.js.map +1 -1
  374. package/dist-es/toolbar/toolbarUtils.js.map +1 -1
  375. package/dist-es/tooltip/Tooltip.css.js +1 -1
  376. package/dist-es/tooltip/useAriaAnnounce.js +4 -2
  377. package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
  378. package/dist-es/tooltip/useTooltip.js.map +1 -1
  379. package/dist-es/tree/TreeContext.js.map +1 -1
  380. package/dist-es/utils/forkRef.js +32 -0
  381. package/dist-es/utils/forkRef.js.map +1 -0
  382. package/dist-es/utils/getRefFromChildren.js.map +1 -1
  383. package/dist-es/utils/marginMiddleware.js.map +1 -1
  384. package/dist-es/utils/setRef.js.map +1 -1
  385. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  386. package/dist-es/utils/useForkRef.js +3 -6
  387. package/dist-es/utils/useForkRef.js.map +1 -1
  388. package/dist-es/utils/useResizeObserver.js.map +1 -1
  389. package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
  390. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  391. package/dist-types/checkbox/CheckboxIcon.d.ts +2 -1
  392. package/dist-types/collapsible/CollapsiblePanel.d.ts +8 -1
  393. package/dist-types/combo-box/ComboBox.d.ts +2 -2
  394. package/dist-types/combo-box/useComboBox.d.ts +3 -6
  395. package/dist-types/dropdown/Dropdown.d.ts +2 -2
  396. package/dist-types/form-field/FormFieldHelperText.d.ts +1 -1
  397. package/dist-types/form-field/FormFieldLabel.d.ts +1 -1
  398. package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
  399. package/dist-types/index.d.ts +1 -0
  400. package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +2 -0
  401. package/dist-types/interactable-card/useInteractableCard.d.ts +1 -2
  402. package/dist-types/list-box/ListBox.d.ts +2 -2
  403. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  404. package/dist-types/list-control/ListControlNavigationKeys.d.ts +30 -0
  405. package/dist-types/list-control/ListControlOptionContext.d.ts +18 -0
  406. package/dist-types/list-control/ListControlOptionStore.d.ts +17 -0
  407. package/dist-types/list-control/ListControlProvider.d.ts +11 -0
  408. package/dist-types/list-control/ListControlRegistry.d.ts +22 -0
  409. package/dist-types/list-control/ListControlState.d.ts +6 -6
  410. package/dist-types/on-solid-button/OnSolidButton.d.ts +12 -0
  411. package/dist-types/on-solid-button/index.d.ts +1 -0
  412. package/dist-types/option/Option.d.ts +3 -1
  413. package/dist-types/overlay/Overlay.d.ts +2 -1
  414. package/dist-types/overlay/OverlayContext.d.ts +4 -0
  415. package/dist-types/overlay/OverlayFooter.d.ts +4 -0
  416. package/dist-types/overlay/hasOverlaySection.d.ts +2 -0
  417. package/dist-types/overlay/index.d.ts +1 -0
  418. package/dist-types/pill/PillCheckIcon.d.ts +2 -1
  419. package/dist-types/registerClassNameInjection.d.ts +0 -2
  420. package/dist-types/salt-provider/SaltProvider.d.ts +1 -1
  421. package/dist-types/side-panel/internal/useIsScrollable.d.ts +1 -1
  422. package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +1 -1
  423. package/dist-types/slider/internal/SliderThumb.d.ts +2 -2
  424. package/dist-types/slider/internal/SliderTrack.d.ts +2 -2
  425. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
  426. package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
  427. package/dist-types/slider/internal/utils.d.ts +1 -1
  428. package/dist-types/tabs/internal/overflow/useOverflow.d.ts +2 -2
  429. package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +1 -1
  430. package/dist-types/text/Editorial.d.ts +7 -0
  431. package/dist-types/text/Eyebrow.d.ts +2 -0
  432. package/dist-types/text/Text.d.ts +9 -2
  433. package/dist-types/text/index.d.ts +2 -0
  434. package/dist-types/toggle-button/ToggleButton.d.ts +1 -1
  435. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +2 -1
  436. package/dist-types/tooltip/useTooltip.d.ts +12 -26
  437. package/dist-types/tree/TreeContext.d.ts +1 -1
  438. package/dist-types/utils/forkRef.d.ts +11 -0
  439. package/dist-types/utils/inferElementType.d.ts +1 -2
  440. package/dist-types/utils/marginMiddleware.d.ts +1 -1
  441. package/dist-types/utils/setRef.d.ts +4 -0
  442. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -5
  443. package/dist-types/utils/useResizeObserver.d.ts +1 -1
  444. package/package.json +5 -5
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n --numberInput-outline: none;\n\n align-items: center;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n min-width: 4em;\n overflow: hidden;\n outline: var(--numberInput-outline);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n position: relative;\n width: 100%;\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n --numberInput-background: var(--salt-editable-tertiary-background);\n --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n min-width: 0;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n\n border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n display: none;\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n /* Activation indicator width minus the border from the number input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
1
+ var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n --numberInput-outline: none;\n\n align-items: center;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n min-width: 4em;\n overflow: hidden;\n outline: var(--numberInput-outline);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n position: relative;\n width: 100%;\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n --numberInput-background: var(--salt-editable-tertiary-background);\n --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n min-width: 0;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n\n border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n display: none;\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n /* Activation indicator width minus the border from the number input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=NumberInput.css.js.map
@@ -331,8 +331,8 @@ const NumberInput = forwardRef(
331
331
  Number.isNaN(floatValue) ? value : String(floatValue)
332
332
  );
333
333
  }
334
- const disableDecrement = disabled || floatValue - step < min;
335
- const disableIncrement = disabled || floatValue + step > max;
334
+ const disableDecrement = isDisabled || floatValue - step < min;
335
+ const disableIncrement = isDisabled || floatValue + step > max;
336
336
  return /* @__PURE__ */ jsxs(
337
337
  "div",
338
338
  {
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n useClassNameInjection,\n useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"../button\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport {\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { useLongPressPointerAction } from \"./internal/useLongPressPointerAction\";\nimport numberInputCss from \"./NumberInput.css\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"onChange\" | \"defaultValue\" | \"value\"\n > {\n /**\n * Styling variant with full border.\n * @default false\n */\n bordered?: boolean;\n /**\n * A boolean that, when true, ensures the input value is clamped within the specified min and max range upon losing focus.\n * @default false\n */\n clamp?: boolean;\n /**\n * Number of decimal places allowed (only used by default parser/formatter).\n * Defaults to the decimal scale of either the initial value provided or the step, whichever is greater.\n * For high precision of larger numbers, consider a custom parser/formatter from a third-party library.\n */\n decimalScale?: number;\n /**\n * Custom decrement function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n decrement?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * The default value. Use when the component is uncontrolled.\n */\n defaultValue?: number | string;\n /**\n * Disable the `NumberInput`.\n * @default false\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * @default \"—\"\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Callback to format the NumberInput value.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library.\n */\n format?: (value: string) => string;\n /**\n * Hide the number buttons.\n * @default false\n */\n hideButtons?: boolean;\n /**\n * Custom increment function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n increment?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Callback that matches on values as you type and determines whether the value can be entered.\n */\n pattern?: (inputValue: string) => boolean;\n /**\n * The maximum value that can be selected.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback function that is triggered when the value changes via user input or increment/decrement.\n * Use `onNumberChange` if you want stable number, after blur or through increment/decrement\n *\n * @param event - The event that triggers the value change, can be null if called by long-press of increment/decrement\n * @param value - value as string\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n /**\n * Callback function that is triggered when the value changes via increment/decrement or on blur.\n *\n * @param event - The event that triggers the change, can be null if called by long-press of increment/decrement\n * @param value - The committed, parsed number value or null if an empty value\n */\n onNumberChange?: (event: SyntheticEvent | null, value: number | null) => void;\n /**\n * Callback to parse the NumberInput value, used with the `format` callback.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library. * Return null for empty input.\n */\n parse?: (value: string) => number | null;\n /**\n * A string displayed in a dimmed color when the `NumberInput` value is empty.\n */\n placeholder?: string;\n /**\n * A boolean property that controls the read-only state of the `NumberInput`.\n * - When set to `true`, the `NumberInput` becomes read-only, preventing user edits.\n * - When set to `false` or omitted, the `NumberInput` is editable by the user.\n */\n readOnly?: boolean;\n /**\n * Start adornment component.\n */\n startAdornment?: ReactNode;\n /**\n * The amount to increment or decrement the value by when using the `NumberInput` buttons or Up Arrow and Down Arrow keys.\n * @default 1\n */\n step?: number;\n /**\n * Defines the factor by which the step value is multiplied to determine the maximum increment or decrement when the Shift key\n * is held while pressing the Up Arrow or Down Arrow keys for faster adjustments of the value.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Specifies the alignment of the text within the `NumberInput`.\n *\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * Styling variant.\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Value of the `NumberInput`, to be used when in a controlled state.\n */\n value?: number | string;\n}\n\nexport const isOutOfRange = (\n value: number | string,\n min: number,\n max: number,\n) => {\n if (typeof value === \"string\" && !value.length) {\n return true;\n }\n const floatValue =\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n return Number.isNaN(floatValue) || floatValue > max || floatValue < min;\n};\n\nfunction getNumberPrecision(num: number | string) {\n const numStr = String(num);\n\n if (numStr.includes(\"e\") || numStr.includes(\"E\")) {\n const [base, exponent] = numStr.split(/[eE]/);\n const decimalPart = base.split(\".\")[1] || \"\";\n const precision = decimalPart.length - Number.parseInt(exponent, 10);\n return Math.max(0, precision);\n }\n\n if (numStr.includes(\".\")) {\n return numStr.split(\".\")[1].length;\n }\n\n return 0;\n}\n\nconst defaultPattern: NumberInputProps[\"pattern\"] = (inputValue) =>\n /^[+-]?(\\d+(\\.\\d*)?|\\.\\d*)?$/.test(inputValue);\n\nconst defaultDecrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const decrementStep = step * stepMultiplier;\n return String(parsedValue - decrementStep);\n};\n\nconst defaultIncrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const incrementStep = step * stepMultiplier;\n return String(parsedValue + incrementStep);\n};\n\nconst defaultFormat = (value: string, decimalScale: number): string => {\n const sanitized = value.trim();\n if (!sanitized.length) {\n return \"\";\n }\n const floatValue = Number.parseFloat(sanitized);\n const updatedValue = Number.isNaN(floatValue)\n ? sanitized\n : floatValue.toFixed(decimalScale);\n return String(updatedValue);\n};\n\nconst defaultParse = (value: string, decimalScale: number): number | null => {\n const sanitizedValue = value.trim();\n if (!sanitizedValue.length) {\n return null;\n }\n if (\n sanitizedValue === \".\" ||\n sanitizedValue === \"+\" ||\n sanitizedValue === \"-\"\n ) {\n return 0;\n }\n const floatString = Number.parseFloat(value).toFixed(decimalScale);\n return Number.parseFloat(floatString);\n};\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n function NumberInput(props, ref) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltNumberInput\",\n props,\n );\n const {\n \"aria-valuetext\": ariaValueTextProp,\n bordered,\n clamp,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue,\n decimalScale = Math.max(\n getNumberPrecision(valueProp ?? defaultValue ?? 0),\n getNumberPrecision(step),\n ),\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n format = (v: string) => defaultFormat(v, decimalScale),\n hideButtons,\n id,\n pattern = defaultPattern,\n inputProps = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n name,\n onBlur,\n onChange,\n onMouseUp,\n onNumberChange,\n parse = (v: string) => defaultParse(v, decimalScale),\n placeholder,\n readOnly,\n startAdornment,\n decrement = (v, s, m) => defaultDecrement(v, s, m, parse),\n increment = (v, s, m) => defaultIncrement(v, s, m, parse),\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...restProps\n } = finalProps;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-number-input\",\n css: numberInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const validationStatusId = useId(id);\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [isFocused, setIsFocused] = useState(false);\n const [isEditing, setIsEditing] = useState(false);\n const { DecreaseIcon, IncreaseIcon } = useIcon();\n\n const [value, setValue] = useControlled({\n controlled: valueProp !== undefined ? String(valueProp) : undefined,\n default: String(defaultValue ?? \"\"),\n name: \"NumberInput\",\n state: \"value\",\n });\n\n // Committed values are complete numbers, created through blur or increment/decrement, not partial entries such as \"0.\" created by input/onChange.\n const lastCommitValue = useRef<string>(value);\n const commit = (\n event: SyntheticEvent | null,\n newNumber: number | null,\n newInputValue: string,\n ) => {\n let safeNumber = newNumber;\n if (safeNumber !== null && !Number.isNaN(safeNumber)) {\n safeNumber = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, safeNumber),\n );\n if (clamp) {\n safeNumber = Math.max(min, Math.min(max, safeNumber));\n }\n } else {\n // If not a valid number, treat as null\n safeNumber = null;\n }\n const commitValue =\n safeNumber !== null ? format(String(safeNumber)) : newInputValue;\n if (commitValue !== value) {\n setValue(commitValue);\n onChange?.(event, commitValue);\n }\n if (lastCommitValue.current !== commitValue) {\n onNumberChange?.(event, safeNumber);\n lastCommitValue.current = commitValue;\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnBlur?.(event);\n const parsedValue = parse(value);\n commit(event, parsedValue, value);\n };\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnFocus?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const inputValue = event.currentTarget.value;\n\n if (!inputValue.length) {\n setValue(\"\");\n onChange?.(event, \"\");\n return;\n }\n const validValue = pattern ? pattern(inputValue) : true;\n\n if (validValue) {\n setIsEditing(true);\n onChange?.(event, event.target.value);\n setValue(inputValue);\n } else {\n event.preventDefault();\n }\n };\n\n let floatValue = parse(value) ?? 0;\n floatValue = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, floatValue),\n );\n if (clamp) {\n floatValue = Math.max(min, Math.min(max, floatValue));\n }\n\n const decrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = decrement(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const activateDecrement = useLongPressPointerAction(\n decrementValue,\n floatValue <= min,\n );\n\n const incrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = increment(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const activateIncrement = useLongPressPointerAction(\n incrementValue,\n floatValue >= max,\n );\n\n useEffect(() => {\n if (isFocused) {\n inputRef.current?.focus();\n }\n }, [isFocused]);\n\n const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n switch (event.key) {\n case \"ArrowUp\": {\n event.preventDefault();\n const block = event.shiftKey;\n incrementValue(event, block);\n break;\n }\n case \"ArrowDown\": {\n event.preventDefault();\n const block = event.shiftKey;\n decrementValue(event, block);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n const newValue = String(min);\n commit(event, min, newValue);\n break;\n }\n case \"End\": {\n event.preventDefault();\n const newValue = String(max);\n commit(event, max, newValue);\n break;\n }\n case \"PageUp\": {\n event.preventDefault();\n incrementValue(event, true);\n break;\n }\n case \"PageDown\": {\n event.preventDefault();\n decrementValue(event, true);\n break;\n }\n }\n inputOnKeyDown?.(event);\n };\n\n const handleIncrementPointerDown = (\n event: PointerEvent,\n disableIncrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableIncrement) {\n setIsEditing(false);\n activateIncrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleDecrementPointerDown = (\n event: PointerEvent,\n disableDecrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableDecrement) {\n setIsEditing(false);\n activateDecrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleContainerMouseUp: MouseEventHandler<HTMLDivElement> = (\n event,\n ) => {\n setIsFocused(true);\n onMouseUp?.(event);\n };\n\n let renderedValue: string;\n if (isEditing) {\n renderedValue = value;\n } else if (!value?.length) {\n renderedValue = \"\";\n } else {\n renderedValue = format(\n Number.isNaN(floatValue) ? value : String(floatValue),\n );\n }\n\n const disableDecrement = disabled || floatValue - step < min;\n const disableIncrement = disabled || floatValue + step > max;\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: isFocused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"hiddenButtons\")]: hideButtons,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n onBlur={handleBlur}\n onMouseUp={handleContainerMouseUp}\n {...restProps}\n ref={ref}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role is determined by variable, aria-valuemax is only used when the role is appropriate. */}\n <input\n aria-describedby={\n clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n }\n aria-labelledby={\n clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n }\n aria-invalid={\n !isReadOnly && renderedValue.length\n ? isOutOfRange(floatValue, min, max) ||\n validationStatus === \"error\"\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n name={name}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={isReadOnly ? undefined : handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={handleInputRef}\n required={isRequired}\n aria-valuemax={!isReadOnly && renderedValue.length ? max : undefined}\n aria-valuemin={!isReadOnly && renderedValue.length ? min : undefined}\n aria-valuenow={!isReadOnly ? floatValue : undefined}\n aria-valuetext={\n !isReadOnly\n ? renderedValue.length\n ? (ariaValueTextProp ?? renderedValue)\n : \"Empty\"\n : undefined\n }\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n tabIndex={isDisabled ? -1 : 0}\n value={\n isReadOnly && renderedValue.length === 0\n ? emptyReadOnlyMarker\n : renderedValue\n }\n {...restInputProps}\n />\n <div className={withBaseName(\"activationIndicator\")} />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} id={validationStatusId} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n {!isReadOnly && (\n <div className={clsx(withBaseName(\"buttonContainer\"))}>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableIncrement}\n className={withBaseName(\"increment\")}\n onPointerDown={(event) =>\n handleIncrementPointerDown(event, disableIncrement)\n }\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableDecrement}\n className={withBaseName(\"decrement\")}\n onPointerDown={(event) =>\n handleDecrementPointerDown(event, disableDecrement)\n }\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["NumberInput","numberInputCss","disableIncrement","disableDecrement"],"mappings":"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"}
1
+ {"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n useClassNameInjection,\n useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"../button\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport {\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { useLongPressPointerAction } from \"./internal/useLongPressPointerAction\";\nimport numberInputCss from \"./NumberInput.css\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"onChange\" | \"defaultValue\" | \"value\"\n > {\n /**\n * Styling variant with full border.\n * @default false\n */\n bordered?: boolean;\n /**\n * A boolean that, when true, ensures the input value is clamped within the specified min and max range upon losing focus.\n * @default false\n */\n clamp?: boolean;\n /**\n * Number of decimal places allowed (only used by default parser/formatter).\n * Defaults to the decimal scale of either the initial value provided or the step, whichever is greater.\n * For high precision of larger numbers, consider a custom parser/formatter from a third-party library.\n */\n decimalScale?: number;\n /**\n * Custom decrement function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n decrement?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * The default value. Use when the component is uncontrolled.\n */\n defaultValue?: number | string;\n /**\n * Disable the `NumberInput`.\n * @default false\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * @default \"—\"\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Callback to format the NumberInput value.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library.\n */\n format?: (value: string) => string;\n /**\n * Hide the number buttons.\n * @default false\n */\n hideButtons?: boolean;\n /**\n * Custom increment function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n increment?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Callback that matches on values as you type and determines whether the value can be entered.\n */\n pattern?: (inputValue: string) => boolean;\n /**\n * The maximum value that can be selected.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback function that is triggered when the value changes via user input or increment/decrement.\n * Use `onNumberChange` if you want stable number, after blur or through increment/decrement\n *\n * @param event - The event that triggers the value change, can be null if called by long-press of increment/decrement\n * @param value - value as string\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n /**\n * Callback function that is triggered when the value changes via increment/decrement or on blur.\n *\n * @param event - The event that triggers the change, can be null if called by long-press of increment/decrement\n * @param value - The committed, parsed number value or null if an empty value\n */\n onNumberChange?: (event: SyntheticEvent | null, value: number | null) => void;\n /**\n * Callback to parse the NumberInput value, used with the `format` callback.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library. * Return null for empty input.\n */\n parse?: (value: string) => number | null;\n /**\n * A string displayed in a dimmed color when the `NumberInput` value is empty.\n */\n placeholder?: string;\n /**\n * A boolean property that controls the read-only state of the `NumberInput`.\n * - When set to `true`, the `NumberInput` becomes read-only, preventing user edits.\n * - When set to `false` or omitted, the `NumberInput` is editable by the user.\n */\n readOnly?: boolean;\n /**\n * Start adornment component.\n */\n startAdornment?: ReactNode;\n /**\n * The amount to increment or decrement the value by when using the `NumberInput` buttons or Up Arrow and Down Arrow keys.\n * @default 1\n */\n step?: number;\n /**\n * Defines the factor by which the step value is multiplied to determine the maximum increment or decrement when the Shift key\n * is held while pressing the Up Arrow or Down Arrow keys for faster adjustments of the value.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Specifies the alignment of the text within the `NumberInput`.\n *\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * Styling variant.\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Value of the `NumberInput`, to be used when in a controlled state.\n */\n value?: number | string;\n}\n\nexport const isOutOfRange = (\n value: number | string,\n min: number,\n max: number,\n) => {\n if (typeof value === \"string\" && !value.length) {\n return true;\n }\n const floatValue =\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n return Number.isNaN(floatValue) || floatValue > max || floatValue < min;\n};\n\nfunction getNumberPrecision(num: number | string) {\n const numStr = String(num);\n\n if (numStr.includes(\"e\") || numStr.includes(\"E\")) {\n const [base, exponent] = numStr.split(/[eE]/);\n const decimalPart = base.split(\".\")[1] || \"\";\n const precision = decimalPart.length - Number.parseInt(exponent, 10);\n return Math.max(0, precision);\n }\n\n if (numStr.includes(\".\")) {\n return numStr.split(\".\")[1].length;\n }\n\n return 0;\n}\n\nconst defaultPattern: NumberInputProps[\"pattern\"] = (inputValue) =>\n /^[+-]?(\\d+(\\.\\d*)?|\\.\\d*)?$/.test(inputValue);\n\nconst defaultDecrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const decrementStep = step * stepMultiplier;\n return String(parsedValue - decrementStep);\n};\n\nconst defaultIncrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const incrementStep = step * stepMultiplier;\n return String(parsedValue + incrementStep);\n};\n\nconst defaultFormat = (value: string, decimalScale: number): string => {\n const sanitized = value.trim();\n if (!sanitized.length) {\n return \"\";\n }\n const floatValue = Number.parseFloat(sanitized);\n const updatedValue = Number.isNaN(floatValue)\n ? sanitized\n : floatValue.toFixed(decimalScale);\n return String(updatedValue);\n};\n\nconst defaultParse = (value: string, decimalScale: number): number | null => {\n const sanitizedValue = value.trim();\n if (!sanitizedValue.length) {\n return null;\n }\n if (\n sanitizedValue === \".\" ||\n sanitizedValue === \"+\" ||\n sanitizedValue === \"-\"\n ) {\n return 0;\n }\n const floatString = Number.parseFloat(value).toFixed(decimalScale);\n return Number.parseFloat(floatString);\n};\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n function NumberInput(props, ref) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltNumberInput\",\n props,\n );\n const {\n \"aria-valuetext\": ariaValueTextProp,\n bordered,\n clamp,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue,\n decimalScale = Math.max(\n getNumberPrecision(valueProp ?? defaultValue ?? 0),\n getNumberPrecision(step),\n ),\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n format = (v: string) => defaultFormat(v, decimalScale),\n hideButtons,\n id,\n pattern = defaultPattern,\n inputProps = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n name,\n onBlur,\n onChange,\n onMouseUp,\n onNumberChange,\n parse = (v: string) => defaultParse(v, decimalScale),\n placeholder,\n readOnly,\n startAdornment,\n decrement = (v, s, m) => defaultDecrement(v, s, m, parse),\n increment = (v, s, m) => defaultIncrement(v, s, m, parse),\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...restProps\n } = finalProps;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-number-input\",\n css: numberInputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const validationStatusId = useId(id);\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [isFocused, setIsFocused] = useState(false);\n const [isEditing, setIsEditing] = useState(false);\n const { DecreaseIcon, IncreaseIcon } = useIcon();\n\n const [value, setValue] = useControlled({\n controlled: valueProp !== undefined ? String(valueProp) : undefined,\n default: String(defaultValue ?? \"\"),\n name: \"NumberInput\",\n state: \"value\",\n });\n\n // Committed values are complete numbers, created through blur or increment/decrement, not partial entries such as \"0.\" created by input/onChange.\n const lastCommitValue = useRef<string>(value);\n const commit = (\n event: SyntheticEvent | null,\n newNumber: number | null,\n newInputValue: string,\n ) => {\n let safeNumber = newNumber;\n if (safeNumber !== null && !Number.isNaN(safeNumber)) {\n safeNumber = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, safeNumber),\n );\n if (clamp) {\n safeNumber = Math.max(min, Math.min(max, safeNumber));\n }\n } else {\n // If not a valid number, treat as null\n safeNumber = null;\n }\n const commitValue =\n safeNumber !== null ? format(String(safeNumber)) : newInputValue;\n if (commitValue !== value) {\n setValue(commitValue);\n onChange?.(event, commitValue);\n }\n if (lastCommitValue.current !== commitValue) {\n onNumberChange?.(event, safeNumber);\n lastCommitValue.current = commitValue;\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnBlur?.(event);\n const parsedValue = parse(value);\n commit(event, parsedValue, value);\n };\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnFocus?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const inputValue = event.currentTarget.value;\n\n if (!inputValue.length) {\n setValue(\"\");\n onChange?.(event, \"\");\n return;\n }\n const validValue = pattern ? pattern(inputValue) : true;\n\n if (validValue) {\n setIsEditing(true);\n onChange?.(event, event.target.value);\n setValue(inputValue);\n } else {\n event.preventDefault();\n }\n };\n\n let floatValue = parse(value) ?? 0;\n floatValue = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, floatValue),\n );\n if (clamp) {\n floatValue = Math.max(min, Math.min(max, floatValue));\n }\n\n const decrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = decrement(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const activateDecrement = useLongPressPointerAction(\n decrementValue,\n floatValue <= min,\n );\n\n const incrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = increment(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const activateIncrement = useLongPressPointerAction(\n incrementValue,\n floatValue >= max,\n );\n\n useEffect(() => {\n if (isFocused) {\n inputRef.current?.focus();\n }\n }, [isFocused]);\n\n const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n switch (event.key) {\n case \"ArrowUp\": {\n event.preventDefault();\n const block = event.shiftKey;\n incrementValue(event, block);\n break;\n }\n case \"ArrowDown\": {\n event.preventDefault();\n const block = event.shiftKey;\n decrementValue(event, block);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n const newValue = String(min);\n commit(event, min, newValue);\n break;\n }\n case \"End\": {\n event.preventDefault();\n const newValue = String(max);\n commit(event, max, newValue);\n break;\n }\n case \"PageUp\": {\n event.preventDefault();\n incrementValue(event, true);\n break;\n }\n case \"PageDown\": {\n event.preventDefault();\n decrementValue(event, true);\n break;\n }\n }\n inputOnKeyDown?.(event);\n };\n\n const handleIncrementPointerDown = (\n event: PointerEvent,\n disableIncrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableIncrement) {\n setIsEditing(false);\n activateIncrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleDecrementPointerDown = (\n event: PointerEvent,\n disableDecrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableDecrement) {\n setIsEditing(false);\n activateDecrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleContainerMouseUp: MouseEventHandler<HTMLDivElement> = (\n event,\n ) => {\n setIsFocused(true);\n onMouseUp?.(event);\n };\n\n let renderedValue: string;\n if (isEditing) {\n renderedValue = value;\n } else if (!value?.length) {\n renderedValue = \"\";\n } else {\n renderedValue = format(\n Number.isNaN(floatValue) ? value : String(floatValue),\n );\n }\n\n const disableDecrement = isDisabled || floatValue - step < min;\n const disableIncrement = isDisabled || floatValue + step > max;\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: isFocused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"hiddenButtons\")]: hideButtons,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n onBlur={handleBlur}\n onMouseUp={handleContainerMouseUp}\n {...restProps}\n ref={ref}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role is determined by variable, aria-valuemax is only used when the role is appropriate. */}\n <input\n aria-describedby={\n clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n }\n aria-labelledby={\n clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n }\n aria-invalid={\n !isReadOnly && renderedValue.length\n ? isOutOfRange(floatValue, min, max) ||\n validationStatus === \"error\"\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n name={name}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={isReadOnly ? undefined : handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={handleInputRef}\n required={isRequired}\n aria-valuemax={!isReadOnly && renderedValue.length ? max : undefined}\n aria-valuemin={!isReadOnly && renderedValue.length ? min : undefined}\n aria-valuenow={!isReadOnly ? floatValue : undefined}\n aria-valuetext={\n !isReadOnly\n ? renderedValue.length\n ? (ariaValueTextProp ?? renderedValue)\n : \"Empty\"\n : undefined\n }\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n tabIndex={isDisabled ? -1 : 0}\n value={\n isReadOnly && renderedValue.length === 0\n ? emptyReadOnlyMarker\n : renderedValue\n }\n {...restInputProps}\n />\n <div className={withBaseName(\"activationIndicator\")} />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} id={validationStatusId} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n {!isReadOnly && (\n <div className={clsx(withBaseName(\"buttonContainer\"))}>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableIncrement}\n className={withBaseName(\"increment\")}\n onPointerDown={(event) =>\n handleIncrementPointerDown(event, disableIncrement)\n }\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableDecrement}\n className={withBaseName(\"decrement\")}\n onPointerDown={(event) =>\n handleDecrementPointerDown(event, disableDecrement)\n }\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["NumberInput","numberInputCss","disableIncrement","disableDecrement"],"mappings":"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"}
@@ -0,0 +1,4 @@
1
+ var css_248z = ".saltOnSolidButton {\n --onSolidButton-borderWidth: var(--salt-size-fixed-100);\n align-items: center;\n appearance: none;\n -webkit-appearance: none;\n background: var(--salt-actionable-onSolid-subtle-background);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n border-radius: var(--salt-palette-corner-weak, 0);\n border-style: solid;\n border-width: var(--onSolidButton-borderWidth);\n color: var(--salt-actionable-onSolid-subtle-foreground);\n display: inline-flex;\n font-family: var(--salt-text-action-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));\n position: relative;\n -webkit-tap-highlight-color: transparent;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n text-transform: var(--salt-text-action-textTransform);\n transition: none;\n}\n\n.saltOnSolidButton:focus-visible {\n background: var(--salt-actionable-onSolid-subtle-background-hover);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n outline-color: var(--salt-focused-onSolid-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n@media (hover: hover) {\n .saltOnSolidButton:hover {\n background: var(--salt-actionable-onSolid-subtle-background-hover);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n cursor: var(--salt-cursor-hover);\n }\n}\n\n.saltOnSolidButton.saltOnSolidButton-active:focus-visible,\n.saltOnSolidButton:focus-visible:active,\n.saltOnSolidButton:active,\n.saltOnSolidButton.saltOnSolidButton-active {\n background: var(--salt-actionable-onSolid-subtle-background-active);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);\n color: var(--salt-actionable-onSolid-subtle-foreground-active);\n cursor: var(--salt-cursor-active);\n}\n\n.saltOnSolidButton:disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:hover {\n background: var(--salt-actionable-onSolid-subtle-background);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n color: var(--salt-actionable-onSolid-subtle-foreground);\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltOnSolidButton {\n --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltOnSolidButton strong,\n.saltOnSolidButton b {\n font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltOnSolidButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n";
2
+
3
+ export { css_248z as default };
4
+ //# sourceMappingURL=OnSolidButton.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OnSolidButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,66 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useComponentCssInjection } from '@salt-ds/styles';
3
+ import { useWindow } from '@salt-ds/window';
4
+ import { clsx } from 'clsx';
5
+ import { forwardRef } from 'react';
6
+ import '../button/Button.js';
7
+ import { useButton } from '../button/useButton.js';
8
+ import { makePrefixer } from '../utils/makePrefixer.js';
9
+ import '../utils/useFloatingUI/useFloatingUI.js';
10
+ import '../utils/useId.js';
11
+ import '../salt-provider/SaltProvider.js';
12
+ import '../viewport/ViewportProvider.js';
13
+ import css_248z from './OnSolidButton.css.js';
14
+
15
+ const withBaseName = makePrefixer("saltOnSolidButton");
16
+ const OnSolidButton = forwardRef(
17
+ function OnSolidButton2({
18
+ children,
19
+ className,
20
+ disabled,
21
+ focusableWhenDisabled,
22
+ onBlur,
23
+ onClick,
24
+ onKeyDown,
25
+ onKeyUp,
26
+ type = "button",
27
+ ...rest
28
+ }, ref) {
29
+ const targetWindow = useWindow();
30
+ useComponentCssInjection({
31
+ testId: "salt-on-solid-button",
32
+ css: css_248z,
33
+ window: targetWindow
34
+ });
35
+ const { active, buttonProps } = useButton({
36
+ disabled,
37
+ focusableWhenDisabled,
38
+ onBlur,
39
+ onClick,
40
+ onKeyDown,
41
+ onKeyUp
42
+ });
43
+ const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;
44
+ return /* @__PURE__ */ jsx(
45
+ "button",
46
+ {
47
+ ...restButtonProps,
48
+ className: clsx(
49
+ withBaseName(),
50
+ {
51
+ [withBaseName("active")]: active,
52
+ [withBaseName("disabled")]: disabled
53
+ },
54
+ className
55
+ ),
56
+ ...rest,
57
+ ref,
58
+ type,
59
+ children
60
+ }
61
+ );
62
+ }
63
+ );
64
+
65
+ export { OnSolidButton };
66
+ //# sourceMappingURL=OnSolidButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OnSolidButton.js","sources":["../src/on-solid-button/OnSolidButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\n\nimport onSolidButtonCss from \"./OnSolidButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOnSolidButton\");\n\nexport interface OnSolidButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n}\n\nexport const OnSolidButton = forwardRef<HTMLButtonElement, OnSolidButtonProps>(\n function OnSolidButton(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n type = \"button\",\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-on-solid-button\",\n css: onSolidButtonCss,\n window: targetWindow,\n });\n\n const { active, buttonProps } = useButton<HTMLButtonElement>({\n disabled,\n focusableWhenDisabled,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n });\n\n const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;\n\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n {...rest}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n },\n);\n"],"names":["OnSolidButton","onSolidButtonCss"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAa9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,iBAAgB,GAAI,WAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,WAC9B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltOption {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltOption-active {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n opacity: 0.4;\n\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow:\n calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n min-height: var(--salt-text-lineHeight);\n}\n";
1
+ var css_248z = ".saltOption {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltOption-active {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n opacity: 0.4;\n\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow:\n calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* Align the checkbox with the first line of text */\n.saltOption-checkbox {\n margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n min-height: var(--salt-text-lineHeight);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Option.css.js.map
@@ -2,12 +2,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useComponentCssInjection } from '@salt-ds/styles';
3
3
  import { useWindow } from '@salt-ds/window';
4
4
  import { clsx } from 'clsx';
5
- import { forwardRef, useRef, useMemo, useEffect } from 'react';
5
+ import { forwardRef, useRef, useMemo, memo } from 'react';
6
+ import { useSyncExternalStore } from 'use-sync-external-store/shim';
6
7
  import '../checkbox/Checkbox.js';
7
8
  import '../checkbox/CheckboxGroup.js';
8
9
  import { CheckboxIcon } from '../checkbox/CheckboxIcon.js';
9
- import { useListControlContext } from '../list-control/ListControlContext.js';
10
+ import { useListControlOptionContext } from '../list-control/ListControlOptionContext.js';
11
+ import { hasOptionState, OPTION_STATE_SELECTED, OPTION_STATE_ACTIVE, OPTION_STATE_FOCUS_VISIBLE } from '../list-control/ListControlOptionStore.js';
10
12
  import { makePrefixer } from '../utils/makePrefixer.js';
13
+ import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
11
14
  import '../utils/useFloatingUI/useFloatingUI.js';
12
15
  import { useForkRef } from '../utils/useForkRef.js';
13
16
  import { useId } from '../utils/useId.js';
@@ -16,7 +19,7 @@ import '../viewport/ViewportProvider.js';
16
19
  import css_248z from './Option.css.js';
17
20
 
18
21
  const withBaseName = makePrefixer("saltOption");
19
- const Option = forwardRef(
22
+ const OptionComponent = forwardRef(
20
23
  function Option2(props, ref) {
21
24
  const {
22
25
  className,
@@ -37,26 +40,38 @@ const Option = forwardRef(
37
40
  const id = useId(idProp);
38
41
  const {
39
42
  setActive,
40
- activeState,
41
43
  multiselect,
42
44
  select,
43
45
  register,
44
- selectedState,
45
- focusVisibleState,
46
+ optionStateStore,
46
47
  valueToString,
47
48
  disabled: listDisabled,
48
49
  listRef
49
- } = useListControlContext();
50
+ } = useListControlOptionContext();
50
51
  const disabled = disabledProp || listDisabled;
51
- const selected = selectedState.includes(value);
52
- const active = (activeState == null ? void 0 : activeState.value) === value;
53
- const optionValue = useMemo(
54
- () => ({
55
- id: String(id),
52
+ const optionId = String(id);
53
+ const { getSnapshot, optionValue, subscribe } = useMemo(() => {
54
+ const nextOptionValue = {
55
+ id: optionId,
56
56
  disabled: Boolean(disabled),
57
57
  value
58
- }),
59
- [id, disabled, value]
58
+ };
59
+ return {
60
+ getSnapshot: () => optionStateStore.getSnapshot(optionId, nextOptionValue),
61
+ optionValue: nextOptionValue,
62
+ subscribe: (listener) => optionStateStore.subscribe(optionId, listener)
63
+ };
64
+ }, [optionId, disabled, value, optionStateStore]);
65
+ const optionState = useSyncExternalStore(
66
+ subscribe,
67
+ getSnapshot,
68
+ getSnapshot
69
+ );
70
+ const selected = hasOptionState(optionState, OPTION_STATE_SELECTED);
71
+ const active = hasOptionState(optionState, OPTION_STATE_ACTIVE);
72
+ const focusVisible = hasOptionState(
73
+ optionState,
74
+ OPTION_STATE_FOCUS_VISIBLE
60
75
  );
61
76
  const handleClick = (event) => {
62
77
  var _a;
@@ -71,40 +86,50 @@ const Option = forwardRef(
71
86
  const handleMouseOver = () => {
72
87
  setActive(optionValue);
73
88
  };
74
- useEffect(() => {
89
+ useIsomorphicLayoutEffect(() => {
75
90
  if (id && optionRef.current) {
76
91
  return register(optionValue, optionRef.current);
77
92
  }
78
93
  }, [optionValue, id, register]);
79
94
  const handleRef = useForkRef(optionRef, ref);
80
- return /* @__PURE__ */ jsxs(
81
- "div",
82
- {
83
- "aria-disabled": disabled ? "true" : void 0,
84
- "aria-selected": selected,
85
- className: clsx(
86
- withBaseName(),
87
- {
88
- [withBaseName("active")]: active,
89
- [withBaseName("focusVisible")]: focusVisibleState && active
90
- },
91
- className
92
- ),
93
- ref: handleRef,
94
- role: "option",
95
- id,
96
- onClick: handleClick,
97
- onMouseOver: handleMouseOver,
98
- tabIndex: -1,
99
- ...rest,
100
- children: [
101
- multiselect && /* @__PURE__ */ jsx(CheckboxIcon, { checked: selected }),
102
- children ?? valueToString(value)
103
- ]
104
- }
95
+ return (
96
+ // biome-ignore lint/a11y/useKeyWithClickEvents: The click event is handled by the parent list control, which manages keyboard interactions.
97
+ /* @__PURE__ */ jsxs(
98
+ "div",
99
+ {
100
+ "aria-disabled": disabled ? "true" : void 0,
101
+ "aria-selected": selected,
102
+ className: clsx(
103
+ withBaseName(),
104
+ {
105
+ [withBaseName("active")]: active,
106
+ [withBaseName("focusVisible")]: focusVisible
107
+ },
108
+ className
109
+ ),
110
+ ref: handleRef,
111
+ role: "option",
112
+ id,
113
+ onClick: handleClick,
114
+ onMouseOver: handleMouseOver,
115
+ tabIndex: -1,
116
+ ...rest,
117
+ children: [
118
+ multiselect && /* @__PURE__ */ jsx(
119
+ CheckboxIcon,
120
+ {
121
+ checked: selected,
122
+ className: withBaseName("checkbox")
123
+ }
124
+ ),
125
+ children ?? valueToString(value)
126
+ ]
127
+ }
128
+ )
105
129
  );
106
130
  }
107
131
  );
132
+ const Option = memo(OptionComponent);
108
133
 
109
134
  export { Option };
110
135
  //# sourceMappingURL=Option.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n type OptionValue,\n useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n activeState,\n multiselect,\n select,\n register,\n selectedState,\n focusVisibleState,\n valueToString,\n disabled: listDisabled,\n listRef,\n } = useListControlContext();\n\n const disabled = disabledProp || listDisabled;\n\n const selected = selectedState.includes(value);\n const active = activeState?.value === value;\n\n const optionValue: OptionValue<unknown> = useMemo(\n () => ({\n id: String(id),\n disabled: Boolean(disabled),\n value,\n }),\n [id, disabled, value],\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n listRef?.current?.focus({ preventScroll: true });\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n tabIndex={-1}\n {...rest}\n >\n {multiselect && <CheckboxIcon checked={selected} />}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n"],"names":["Option","optionCss"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,SAASA,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,OAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,aAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAY,OAAO,IAAI,CAAA;AAC7B,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV;AAAA,QACE,qBAAA,EAAsB;AAE1B,IAAA,MAAM,WAAW,YAAA,IAAgB,YAAA;AAEjC,IAAA,MAAM,QAAA,GAAW,aAAA,CAAc,QAAA,CAAS,KAAK,CAAA;AAC7C,IAAA,MAAM,MAAA,GAAA,CAAS,2CAAa,KAAA,MAAU,KAAA;AAEtC,IAAA,MAAM,WAAA,GAAoC,OAAA;AAAA,MACxC,OAAO;AAAA,QACL,EAAA,EAAI,OAAO,EAAE,CAAA;AAAA,QACb,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B;AAAA,OACF,CAAA;AAAA,MACA,CAAC,EAAA,EAAI,QAAA,EAAU,KAAK;AAAA,KACtB;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsC;AAtF/D,MAAA,IAAA,EAAA;AAuFM,MAAA,IAAI,QAAA,IAAY,OAAO,MAAA,EAAW;AAChC,QAAA;AAAA,MACF;AAEA,MAAA,CAAA,EAAA,GAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,OAAA,KAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,KAAA,CAAM,EAAE,eAAe,IAAA,EAAK,CAAA;AAE9C,MAAA,SAAA,CAAU,WAAW,CAAA;AAGrB,MAAA,MAAA,CAAO,OAAO,WAAW,CAAA;AAEzB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,SAAA,CAAU,WAAW,CAAA;AAAA,IACvB,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,EAAA,IAAM,UAAU,OAAA,EAAS;AAC3B,QAAA,OAAO,QAAA,CAAS,WAAA,EAAa,SAAA,CAAU,OAAO,CAAA;AAAA,MAChD;AAAA,IACF,CAAA,EAAG,CAAC,WAAA,EAAa,EAAA,EAAI,QAAQ,CAAC,CAAA;AAE9B,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,SAAA,EAAW,GAAG,CAAA;AAE3C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,QACnC,eAAA,EAAe,QAAA;AAAA,QACf,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,iBAAA,IAAqB;AAAA,WACvD;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA,EAAK,SAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,EAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,WAAA,EAAa,eAAA;AAAA,QACb,QAAA,EAAU,EAAA;AAAA,QACT,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,WAAA,oBAAe,GAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,QAAA,EAAU,CAAA;AAAA,UAChD,QAAA,IAAY,cAAc,KAAK;AAAA;AAAA;AAAA,KAClC;AAAA,EAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n memo,\n type ReactNode,\n useMemo,\n useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport { useListControlOptionContext } from \"../list-control/ListControlOptionContext\";\nimport {\n hasOptionState,\n OPTION_STATE_ACTIVE,\n OPTION_STATE_FOCUS_VISIBLE,\n OPTION_STATE_SELECTED,\n} from \"../list-control/ListControlOptionStore\";\nimport {\n makePrefixer,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\n// biome-ignore lint/plugin/named-component-functions: exported as memo(OptionComponent) under the name Option.\nconst OptionComponent = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n multiselect,\n select,\n register,\n optionStateStore,\n valueToString,\n disabled: listDisabled,\n listRef,\n } = useListControlOptionContext();\n\n const disabled = disabledProp || listDisabled;\n\n const optionId = String(id);\n const { getSnapshot, optionValue, subscribe } = useMemo(() => {\n const nextOptionValue: OptionValue<unknown> = {\n id: optionId,\n disabled: Boolean(disabled),\n value,\n };\n return {\n getSnapshot: () =>\n optionStateStore.getSnapshot(optionId, nextOptionValue),\n optionValue: nextOptionValue,\n subscribe: (listener: () => void) =>\n optionStateStore.subscribe(optionId, listener),\n };\n }, [optionId, disabled, value, optionStateStore]);\n const optionState = useSyncExternalStore(\n subscribe,\n getSnapshot,\n getSnapshot,\n );\n const selected = hasOptionState(optionState, OPTION_STATE_SELECTED);\n const active = hasOptionState(optionState, OPTION_STATE_ACTIVE);\n const focusVisible = hasOptionState(\n optionState,\n OPTION_STATE_FOCUS_VISIBLE,\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n listRef?.current?.focus({ preventScroll: true });\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n // biome-ignore lint/a11y/useKeyWithClickEvents: The click event is handled by the parent list control, which manages keyboard interactions.\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisible,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n tabIndex={-1}\n {...rest}\n >\n {multiselect && (\n <CheckboxIcon\n checked={selected}\n className={withBaseName(\"checkbox\")}\n />\n )}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n\n// Context isolation makes this bailout effective for unchanged option props.\nexport const Option = memo(OptionComponent) as typeof OptionComponent;\n"],"names":["Option","optionCss"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltOptionGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n font-family: var(--salt-text-label-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltOptionGroup {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOptionGroup:first-of-type {\n border-top: 0;\n}\n";
1
+ var css_248z = ".saltOptionGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-bolder);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltOptionGroup {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOptionGroup:first-of-type {\n border-top: 0;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=OptionGroup.css.js.map
@@ -1,6 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { offset, flip, shift, limitShift, arrow, useInteractions, useRole, useClick, useDismiss } from '@floating-ui/react';
3
- import { useRef, useMemo } from 'react';
3
+ import { useRef, useState, useMemo } from 'react';
4
4
  import 'clsx';
5
5
  import { useControlled } from '../utils/useControlled.js';
6
6
  import { useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
@@ -17,6 +17,10 @@ const Overlay = ({
17
17
  hideArrow = false
18
18
  }) => {
19
19
  const arrowRef = useRef(null);
20
+ const [headerId, setHeaderId] = useState(void 0);
21
+ const [descriptionId, setDescriptionId] = useState(
22
+ void 0
23
+ );
20
24
  const [openState, setOpenState] = useControlled({
21
25
  controlled: open,
22
26
  default: false,
@@ -74,7 +78,11 @@ const Overlay = ({
74
78
  floating,
75
79
  reference,
76
80
  getFloatingProps,
77
- getReferenceProps
81
+ getReferenceProps,
82
+ headerId,
83
+ setHeaderId,
84
+ descriptionId,
85
+ setDescriptionId
78
86
  }),
79
87
  [
80
88
  openState,
@@ -85,7 +93,9 @@ const Overlay = ({
85
93
  floating,
86
94
  reference,
87
95
  getFloatingProps,
88
- getReferenceProps
96
+ getReferenceProps,
97
+ headerId,
98
+ descriptionId
89
99
  ]
90
100
  );
91
101
  return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: contextValue, children });