@salt-ds/lab 1.0.0-alpha.61 → 1.0.0-alpha.63

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 (250) hide show
  1. package/CHANGELOG.md +102 -0
  2. package/css/salt-lab.css +623 -324
  3. package/dist-cjs/date-picker/DatePicker.js +4 -3
  4. package/dist-cjs/date-picker/DatePicker.js.map +1 -1
  5. package/dist-cjs/date-picker/DatePickerActions.js +1 -1
  6. package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
  7. package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
  8. package/dist-cjs/date-picker/DatePickerOverlay.js +0 -4
  9. package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -1
  10. package/dist-cjs/date-picker/DatePickerOverlayProvider.js +65 -43
  11. package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
  12. package/dist-cjs/date-picker/DatePickerRangeInput.js +10 -26
  13. package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
  14. package/dist-cjs/date-picker/DatePickerSingleInput.js +8 -14
  15. package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
  16. package/dist-cjs/date-picker/useDatePicker.js +10 -7
  17. package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
  18. package/dist-cjs/date-picker/useKeyboard.js +23 -0
  19. package/dist-cjs/date-picker/useKeyboard.js.map +1 -0
  20. package/dist-cjs/index.js +19 -8
  21. package/dist-cjs/index.js.map +1 -1
  22. package/dist-cjs/number-input/NumberInput.css.js +6 -0
  23. package/dist-cjs/number-input/NumberInput.css.js.map +1 -0
  24. package/dist-cjs/{stepper-input/StepperInput.js → number-input/NumberInput.js} +15 -15
  25. package/dist-cjs/number-input/NumberInput.js.map +1 -0
  26. package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js.map +1 -0
  27. package/dist-cjs/number-input/internal/useInterval.js.map +1 -0
  28. package/dist-cjs/number-input/internal/utils.js.map +1 -0
  29. package/dist-cjs/{stepper-input/useStepperInput.js → number-input/useNumberInput.js} +3 -3
  30. package/dist-cjs/number-input/useNumberInput.js.map +1 -0
  31. package/dist-cjs/slider/RangeSlider.js +161 -0
  32. package/dist-cjs/slider/RangeSlider.js.map +1 -0
  33. package/dist-cjs/slider/Slider.js +104 -70
  34. package/dist-cjs/slider/Slider.js.map +1 -1
  35. package/dist-cjs/slider/internal/SliderThumb.css.js +6 -0
  36. package/dist-cjs/slider/internal/SliderThumb.css.js.map +1 -0
  37. package/dist-cjs/slider/internal/SliderThumb.js +136 -70
  38. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
  39. package/dist-cjs/slider/internal/SliderTooltip.css.js +6 -0
  40. package/dist-cjs/slider/internal/SliderTooltip.css.js.map +1 -0
  41. package/dist-cjs/slider/internal/SliderTooltip.js +43 -0
  42. package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -0
  43. package/dist-cjs/slider/internal/SliderTrack.css.js +6 -0
  44. package/dist-cjs/slider/internal/SliderTrack.css.js.map +1 -0
  45. package/dist-cjs/slider/internal/SliderTrack.js +160 -80
  46. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
  47. package/dist-cjs/slider/internal/useRangeSliderThumb.js +194 -0
  48. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -0
  49. package/dist-cjs/slider/internal/useSliderThumb.js +123 -0
  50. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -0
  51. package/dist-cjs/slider/internal/utils.js +97 -72
  52. package/dist-cjs/slider/internal/utils.js.map +1 -1
  53. package/dist-cjs/splitter/SplitHandle.css.js +6 -0
  54. package/dist-cjs/splitter/SplitHandle.css.js.map +1 -0
  55. package/dist-cjs/splitter/SplitHandle.js +60 -0
  56. package/dist-cjs/splitter/SplitHandle.js.map +1 -0
  57. package/dist-cjs/splitter/SplitPanel.css.js +6 -0
  58. package/dist-cjs/splitter/SplitPanel.css.js.map +1 -0
  59. package/dist-cjs/splitter/SplitPanel.js +37 -0
  60. package/dist-cjs/splitter/SplitPanel.js.map +1 -0
  61. package/dist-cjs/splitter/Splitter.js +31 -0
  62. package/dist-cjs/splitter/Splitter.js.map +1 -0
  63. package/dist-cjs/splitter/utils.js +18 -0
  64. package/dist-cjs/splitter/utils.js.map +1 -0
  65. package/dist-cjs/stepped-tracker/stepReducer.js +127 -81
  66. package/dist-cjs/stepped-tracker/stepReducer.js.map +1 -1
  67. package/dist-cjs/stepped-tracker/useStepReducer.js +6 -4
  68. package/dist-cjs/stepped-tracker/useStepReducer.js.map +1 -1
  69. package/dist-cjs/stepped-tracker/utils.js +44 -9
  70. package/dist-cjs/stepped-tracker/utils.js.map +1 -1
  71. package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
  72. package/dist-cjs/tabs-next/TabListNext.js +10 -16
  73. package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
  74. package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
  75. package/dist-cjs/tabs-next/TabOverflowList.js +3 -2
  76. package/dist-cjs/tabs-next/TabOverflowList.js.map +1 -1
  77. package/dist-cjs/tabs-next/TabsNext.js +4 -51
  78. package/dist-cjs/tabs-next/TabsNext.js.map +1 -1
  79. package/dist-cjs/tabs-next/TabsNextContext.js +1 -1
  80. package/dist-cjs/tabs-next/TabsNextContext.js.map +1 -1
  81. package/dist-cjs/tabs-next/hooks/useCollection.js.map +1 -1
  82. package/dist-cjs/tabs-next/hooks/useOverflow.js +48 -5
  83. package/dist-cjs/tabs-next/hooks/useOverflow.js.map +1 -1
  84. package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js +93 -0
  85. package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js.map +1 -0
  86. package/dist-es/date-picker/DatePicker.js +4 -3
  87. package/dist-es/date-picker/DatePicker.js.map +1 -1
  88. package/dist-es/date-picker/DatePickerActions.js +1 -1
  89. package/dist-es/date-picker/DatePickerActions.js.map +1 -1
  90. package/dist-es/date-picker/DatePickerContext.js.map +1 -1
  91. package/dist-es/date-picker/DatePickerOverlay.js +0 -4
  92. package/dist-es/date-picker/DatePickerOverlay.js.map +1 -1
  93. package/dist-es/date-picker/DatePickerOverlayProvider.js +67 -45
  94. package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
  95. package/dist-es/date-picker/DatePickerRangeInput.js +10 -26
  96. package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
  97. package/dist-es/date-picker/DatePickerSingleInput.js +8 -14
  98. package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
  99. package/dist-es/date-picker/useDatePicker.js +10 -7
  100. package/dist-es/date-picker/useDatePicker.js.map +1 -1
  101. package/dist-es/date-picker/useKeyboard.js +21 -0
  102. package/dist-es/date-picker/useKeyboard.js.map +1 -0
  103. package/dist-es/index.js +9 -4
  104. package/dist-es/index.js.map +1 -1
  105. package/dist-es/number-input/NumberInput.css.js +4 -0
  106. package/dist-es/number-input/NumberInput.css.js.map +1 -0
  107. package/dist-es/{stepper-input/StepperInput.js → number-input/NumberInput.js} +14 -14
  108. package/dist-es/number-input/NumberInput.js.map +1 -0
  109. package/dist-es/number-input/internal/useActivateWhileMouseDown.js.map +1 -0
  110. package/dist-es/number-input/internal/useInterval.js.map +1 -0
  111. package/dist-es/number-input/internal/utils.js.map +1 -0
  112. package/dist-es/{stepper-input/useStepperInput.js → number-input/useNumberInput.js} +3 -3
  113. package/dist-es/number-input/useNumberInput.js.map +1 -0
  114. package/dist-es/slider/RangeSlider.js +159 -0
  115. package/dist-es/slider/RangeSlider.js.map +1 -0
  116. package/dist-es/slider/Slider.js +107 -73
  117. package/dist-es/slider/Slider.js.map +1 -1
  118. package/dist-es/slider/internal/SliderThumb.css.js +4 -0
  119. package/dist-es/slider/internal/SliderThumb.css.js.map +1 -0
  120. package/dist-es/slider/internal/SliderThumb.js +138 -72
  121. package/dist-es/slider/internal/SliderThumb.js.map +1 -1
  122. package/dist-es/slider/internal/SliderTooltip.css.js +4 -0
  123. package/dist-es/slider/internal/SliderTooltip.css.js.map +1 -0
  124. package/dist-es/slider/internal/SliderTooltip.js +41 -0
  125. package/dist-es/slider/internal/SliderTooltip.js.map +1 -0
  126. package/dist-es/slider/internal/SliderTrack.css.js +4 -0
  127. package/dist-es/slider/internal/SliderTrack.css.js.map +1 -0
  128. package/dist-es/slider/internal/SliderTrack.js +164 -84
  129. package/dist-es/slider/internal/SliderTrack.js.map +1 -1
  130. package/dist-es/slider/internal/useRangeSliderThumb.js +192 -0
  131. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -0
  132. package/dist-es/slider/internal/useSliderThumb.js +121 -0
  133. package/dist-es/slider/internal/useSliderThumb.js.map +1 -0
  134. package/dist-es/slider/internal/utils.js +91 -63
  135. package/dist-es/slider/internal/utils.js.map +1 -1
  136. package/dist-es/splitter/SplitHandle.css.js +4 -0
  137. package/dist-es/splitter/SplitHandle.css.js.map +1 -0
  138. package/dist-es/splitter/SplitHandle.js +58 -0
  139. package/dist-es/splitter/SplitHandle.js.map +1 -0
  140. package/dist-es/splitter/SplitPanel.css.js +4 -0
  141. package/dist-es/splitter/SplitPanel.css.js.map +1 -0
  142. package/dist-es/splitter/SplitPanel.js +35 -0
  143. package/dist-es/splitter/SplitPanel.js.map +1 -0
  144. package/dist-es/splitter/Splitter.js +27 -0
  145. package/dist-es/splitter/Splitter.js.map +1 -0
  146. package/dist-es/splitter/utils.js +15 -0
  147. package/dist-es/splitter/utils.js.map +1 -0
  148. package/dist-es/stepped-tracker/stepReducer.js +128 -82
  149. package/dist-es/stepped-tracker/stepReducer.js.map +1 -1
  150. package/dist-es/stepped-tracker/useStepReducer.js +7 -5
  151. package/dist-es/stepped-tracker/useStepReducer.js.map +1 -1
  152. package/dist-es/stepped-tracker/utils.js +43 -9
  153. package/dist-es/stepped-tracker/utils.js.map +1 -1
  154. package/dist-es/tabs-next/TabListNext.css.js +1 -1
  155. package/dist-es/tabs-next/TabListNext.js +11 -17
  156. package/dist-es/tabs-next/TabListNext.js.map +1 -1
  157. package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
  158. package/dist-es/tabs-next/TabOverflowList.js +4 -3
  159. package/dist-es/tabs-next/TabOverflowList.js.map +1 -1
  160. package/dist-es/tabs-next/TabsNext.js +5 -52
  161. package/dist-es/tabs-next/TabsNext.js.map +1 -1
  162. package/dist-es/tabs-next/TabsNextContext.js +1 -1
  163. package/dist-es/tabs-next/TabsNextContext.js.map +1 -1
  164. package/dist-es/tabs-next/hooks/useCollection.js.map +1 -1
  165. package/dist-es/tabs-next/hooks/useOverflow.js +49 -6
  166. package/dist-es/tabs-next/hooks/useOverflow.js.map +1 -1
  167. package/dist-es/tabs-next/hooks/useRestoreActiveTab.js +91 -0
  168. package/dist-es/tabs-next/hooks/useRestoreActiveTab.js.map +1 -0
  169. package/dist-types/date-picker/DatePicker.d.ts +6 -1
  170. package/dist-types/date-picker/DatePickerContext.d.ts +2 -1
  171. package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +18 -4
  172. package/dist-types/date-picker/DatePickerRangeInput.d.ts +1 -1
  173. package/dist-types/date-picker/index.d.ts +1 -0
  174. package/dist-types/date-picker/useKeyboard.d.ts +14 -0
  175. package/dist-types/index.d.ts +5 -4
  176. package/dist-types/{stepper-input/StepperInput.d.ts → number-input/NumberInput.d.ts} +7 -7
  177. package/dist-types/number-input/index.d.ts +2 -0
  178. package/dist-types/{stepper-input/useStepperInput.d.ts → number-input/useNumberInput.d.ts} +2 -2
  179. package/dist-types/slider/RangeSlider.d.ts +91 -0
  180. package/dist-types/slider/Slider.d.ts +74 -15
  181. package/dist-types/slider/index.d.ts +1 -1
  182. package/dist-types/slider/internal/SliderThumb.d.ts +20 -7
  183. package/dist-types/slider/internal/SliderTooltip.d.ts +6 -0
  184. package/dist-types/slider/internal/SliderTrack.d.ts +23 -3
  185. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +26 -0
  186. package/dist-types/slider/internal/useSliderThumb.d.ts +24 -0
  187. package/dist-types/slider/internal/utils.d.ts +17 -15
  188. package/dist-types/splitter/SplitHandle.d.ts +21 -0
  189. package/dist-types/splitter/SplitPanel.d.ts +10 -0
  190. package/dist-types/splitter/Splitter.d.ts +22 -0
  191. package/dist-types/splitter/index.d.ts +4 -0
  192. package/dist-types/splitter/utils.d.ts +4 -0
  193. package/dist-types/stepped-tracker/Step.types.d.ts +2 -4
  194. package/dist-types/stepped-tracker/stepReducer.types.d.ts +6 -4
  195. package/dist-types/stepped-tracker/utils.d.ts +6 -3
  196. package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
  197. package/dist-types/tabs-next/TabsNextContext.d.ts +1 -1
  198. package/dist-types/tabs-next/hooks/useOverflow.d.ts +1 -1
  199. package/dist-types/tabs-next/hooks/useRestoreActiveTab.d.ts +10 -0
  200. package/package.json +4 -3
  201. package/dist-cjs/slider/Slider.css.js +0 -6
  202. package/dist-cjs/slider/Slider.css.js.map +0 -1
  203. package/dist-cjs/slider/internal/SliderContext.js +0 -19
  204. package/dist-cjs/slider/internal/SliderContext.js.map +0 -1
  205. package/dist-cjs/slider/internal/SliderMarks.js +0 -29
  206. package/dist-cjs/slider/internal/SliderMarks.js.map +0 -1
  207. package/dist-cjs/slider/internal/SliderSelection.js +0 -33
  208. package/dist-cjs/slider/internal/SliderSelection.js.map +0 -1
  209. package/dist-cjs/slider/internal/useKeyDownThumb.js +0 -50
  210. package/dist-cjs/slider/internal/useKeyDownThumb.js.map +0 -1
  211. package/dist-cjs/stepper-input/StepperInput.css.js +0 -6
  212. package/dist-cjs/stepper-input/StepperInput.css.js.map +0 -1
  213. package/dist-cjs/stepper-input/StepperInput.js.map +0 -1
  214. package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map +0 -1
  215. package/dist-cjs/stepper-input/internal/useInterval.js.map +0 -1
  216. package/dist-cjs/stepper-input/internal/utils.js.map +0 -1
  217. package/dist-cjs/stepper-input/useStepperInput.js.map +0 -1
  218. package/dist-es/slider/Slider.css.js +0 -4
  219. package/dist-es/slider/Slider.css.js.map +0 -1
  220. package/dist-es/slider/internal/SliderContext.js +0 -16
  221. package/dist-es/slider/internal/SliderContext.js.map +0 -1
  222. package/dist-es/slider/internal/SliderMarks.js +0 -27
  223. package/dist-es/slider/internal/SliderMarks.js.map +0 -1
  224. package/dist-es/slider/internal/SliderSelection.js +0 -31
  225. package/dist-es/slider/internal/SliderSelection.js.map +0 -1
  226. package/dist-es/slider/internal/useKeyDownThumb.js +0 -48
  227. package/dist-es/slider/internal/useKeyDownThumb.js.map +0 -1
  228. package/dist-es/stepper-input/StepperInput.css.js +0 -4
  229. package/dist-es/stepper-input/StepperInput.css.js.map +0 -1
  230. package/dist-es/stepper-input/StepperInput.js.map +0 -1
  231. package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map +0 -1
  232. package/dist-es/stepper-input/internal/useInterval.js.map +0 -1
  233. package/dist-es/stepper-input/internal/utils.js.map +0 -1
  234. package/dist-es/stepper-input/useStepperInput.js.map +0 -1
  235. package/dist-types/slider/internal/SliderContext.d.ts +0 -11
  236. package/dist-types/slider/internal/SliderMarks.d.ts +0 -7
  237. package/dist-types/slider/internal/SliderSelection.d.ts +0 -4
  238. package/dist-types/slider/internal/index.d.ts +0 -3
  239. package/dist-types/slider/internal/useKeyDownThumb.d.ts +0 -2
  240. package/dist-types/slider/types.d.ts +0 -4
  241. package/dist-types/stepper-input/index.d.ts +0 -2
  242. /package/dist-cjs/{stepper-input → number-input}/internal/useActivateWhileMouseDown.js +0 -0
  243. /package/dist-cjs/{stepper-input → number-input}/internal/useInterval.js +0 -0
  244. /package/dist-cjs/{stepper-input → number-input}/internal/utils.js +0 -0
  245. /package/dist-es/{stepper-input → number-input}/internal/useActivateWhileMouseDown.js +0 -0
  246. /package/dist-es/{stepper-input → number-input}/internal/useInterval.js +0 -0
  247. /package/dist-es/{stepper-input → number-input}/internal/utils.js +0 -0
  248. /package/dist-types/{stepper-input → number-input}/internal/useActivateWhileMouseDown.d.ts +0 -0
  249. /package/dist-types/{stepper-input → number-input}/internal/useInterval.d.ts +0 -0
  250. /package/dist-types/{stepper-input → number-input}/internal/utils.d.ts +0 -0
@@ -56,7 +56,7 @@ function useDatePicker(props, ref) {
56
56
  const applySingle = react.useCallback(
57
57
  (event, date) => {
58
58
  setCancelled(false);
59
- setOpen(false);
59
+ setOpen(false, event.nativeEvent, "apply");
60
60
  if (selectionVariant === "single") {
61
61
  onApply == null ? void 0 : onApply(event, date);
62
62
  }
@@ -84,7 +84,7 @@ function useDatePicker(props, ref) {
84
84
  const applyRange = react.useCallback(
85
85
  (event, date) => {
86
86
  setCancelled(false);
87
- setOpen(false);
87
+ setOpen(false, event.nativeEvent, "apply");
88
88
  if (selectionVariant === "range") {
89
89
  onApply == null ? void 0 : onApply(event, date);
90
90
  }
@@ -109,11 +109,14 @@ function useDatePicker(props, ref) {
109
109
  setSelectedDate
110
110
  ]
111
111
  );
112
- const cancel = react.useCallback(() => {
113
- setCancelled(true);
114
- setOpen(false);
115
- onCancel == null ? void 0 : onCancel();
116
- }, [setCancelled, setOpen, onCancel]);
112
+ const cancel = react.useCallback(
113
+ (event) => {
114
+ setCancelled(true);
115
+ setOpen(false, event, "cancel");
116
+ onCancel == null ? void 0 : onCancel();
117
+ },
118
+ [setCancelled, setOpen, onCancel]
119
+ );
117
120
  const returnValue = {
118
121
  state: {
119
122
  selectionVariant,
@@ -1 +1 @@
1
- {"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n /** If `true`, the component is disabled. */\n disabled?: boolean;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: TDate;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: TDate;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n}\n\n/**\n * Props for single date selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection<TDate> | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection<TDate> | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection<TDate> | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n TDate extends DateFrameworkType,\n SelectionVariant,\n> = SelectionVariant extends \"single\"\n ? UseDatePickerSingleProps<TDate>\n : SelectionVariant extends \"range\"\n ? UseDatePickerRangeProps<TDate>\n : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n>(\n props: UseDatePickerProps<TDate, SelectionVariant>,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n const {\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<TDate>();\n const {\n readOnly = false,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>();\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [enableApply, setEnableApply] = useState<boolean>(false);\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false);\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [setCancelled, setOpen, onApply],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details: DateInputSingleDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date) {\n applySingle(event, date);\n }\n },\n [\n applySingle,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false);\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [onApply, setCancelled, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date?.startDate && date?.endDate) {\n applyRange(event, date);\n }\n },\n [\n applyRange,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const cancel = useCallback(() => {\n setCancelled(true);\n setOpen(false);\n onCancel?.();\n }, [setCancelled, setOpen, onCancel]);\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n },\n helpers: {\n cancel,\n setEnableApply,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState<TDate>;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState<TDate>;\n}\n"],"names":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}
1
+ {"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n /** If `true`, the component is disabled. */\n disabled?: boolean;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: TDate;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: TDate;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n}\n\n/**\n * Props for single date selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection<TDate> | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection<TDate> | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection<TDate> | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n TDate extends DateFrameworkType,\n SelectionVariant,\n> = SelectionVariant extends \"single\"\n ? UseDatePickerSingleProps<TDate>\n : SelectionVariant extends \"range\"\n ? UseDatePickerRangeProps<TDate>\n : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n>(\n props: UseDatePickerProps<TDate, SelectionVariant>,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n const {\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<TDate>();\n const {\n readOnly = false,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>();\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [enableApply, setEnableApply] = useState<boolean>(false);\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [setCancelled, setOpen, onApply],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details: DateInputSingleDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date) {\n applySingle(event, date);\n }\n },\n [\n applySingle,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [onApply, setCancelled, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date?.startDate && date?.endDate) {\n applyRange(event, date);\n }\n },\n [\n applyRange,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const cancel = useCallback(\n (event?: Event) => {\n setCancelled(true);\n setOpen(false, event, \"cancel\");\n onCancel?.();\n },\n [setCancelled, setOpen, onCancel],\n );\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n },\n helpers: {\n cancel,\n setEnableApply,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState<TDate>;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState<TDate>;\n}\n"],"names":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}
@@ -0,0 +1,23 @@
1
+ 'use strict';
2
+
3
+ var react = require('react');
4
+
5
+ function useKeyboard(context, props) {
6
+ const { onOpenChange } = context;
7
+ const { enabled = true } = props;
8
+ const reference = react.useMemo(
9
+ () => ({
10
+ onKeyDown(event) {
11
+ if (event.key === "ArrowDown") {
12
+ event.preventDefault();
13
+ onOpenChange(true, event.nativeEvent, "reference-press");
14
+ }
15
+ }
16
+ }),
17
+ [onOpenChange]
18
+ );
19
+ return react.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
20
+ }
21
+
22
+ exports.useKeyboard = useKeyboard;
23
+ //# sourceMappingURL=useKeyboard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useKeyboard.js","sources":["../src/date-picker/useKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nexport interface UseKeyboardProps {\n /**\n * Whether the hook is enabled\n * @default true\n */\n enabled?: boolean;\n}\n\n/**\n * Floating UI Interactions hook, that will open DatePicker on keydown\n * @param context\n * @param props\n */\nexport function useKeyboard(\n context: FloatingContext,\n props: UseKeyboardProps,\n): ElementProps {\n const { onOpenChange } = context;\n const { enabled = true } = props;\n const reference: ElementProps[\"reference\"] = useMemo(\n () => ({\n onKeyDown(event) {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n onOpenChange(true, event.nativeEvent, \"reference-press\");\n }\n },\n }),\n [onOpenChange],\n );\n\n return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":["useMemo"],"mappings":";;;;AAgBgB,SAAA,WAAA,CACd,SACA,KACc,EAAA;AACd,EAAM,MAAA,EAAE,cAAiB,GAAA,OAAA;AACzB,EAAM,MAAA,EAAE,OAAU,GAAA,IAAA,EAAS,GAAA,KAAA;AAC3B,EAAA,MAAM,SAAuC,GAAAA,aAAA;AAAA,IAC3C,OAAO;AAAA,MACL,UAAU,KAAO,EAAA;AACf,QAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAa,YAAA,CAAA,IAAA,EAAM,KAAM,CAAA,WAAA,EAAa,iBAAiB,CAAA;AAAA;AACzD;AACF,KACF,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAO,OAAAA,aAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAc,GAAA,EAAK,EAAA,CAAC,OAAS,EAAA,SAAS,CAAC,CAAA;AAC3E;;;;"}
package/dist-cjs/index.js CHANGED
@@ -65,6 +65,7 @@ var DatePicker = require('./date-picker/DatePicker.js');
65
65
  var DatePickerActions = require('./date-picker/DatePickerActions.js');
66
66
  var DatePickerContext = require('./date-picker/DatePickerContext.js');
67
67
  var DatePickerOverlay = require('./date-picker/DatePickerOverlay.js');
68
+ var DatePickerOverlayProvider = require('./date-picker/DatePickerOverlayProvider.js');
68
69
  var DatePickerRangeInput = require('./date-picker/DatePickerRangeInput.js');
69
70
  var DatePickerRangePanel = require('./date-picker/DatePickerRangePanel.js');
70
71
  var DatePickerSingleInput = require('./date-picker/DatePickerSingleInput.js');
@@ -78,10 +79,10 @@ var DropdownButton = require('./dropdown/DropdownButton.js');
78
79
  var Dropdown = require('./dropdown/Dropdown.js');
79
80
  var useDropdownBase = require('./dropdown/useDropdownBase.js');
80
81
  var EditableLabel = require('./editable-label/EditableLabel.js');
81
- var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
82
- var FormLabel = require('./form-field-legacy/FormLabel.js');
83
82
  var FormFieldLegacyContext = require('./form-field-context-legacy/FormFieldLegacyContext.js');
84
83
  var useFormFieldLegacyProps = require('./form-field-context-legacy/useFormFieldLegacyProps.js');
84
+ var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
85
+ var FormLabel = require('./form-field-legacy/FormLabel.js');
85
86
  var FormGroup = require('./form-group/FormGroup.js');
86
87
  var FormattedInput = require('./formatted-input/FormattedInput.js');
87
88
  var InputLegacy = require('./input-legacy/InputLegacy.js');
@@ -104,6 +105,8 @@ var MenuButton = require('./menu-button/MenuButton.js');
104
105
  var Metric = require('./metric/Metric.js');
105
106
  var MetricHeader = require('./metric/MetricHeader.js');
106
107
  var MetricContent = require('./metric/MetricContent.js');
108
+ var useNumberInput = require('./number-input/useNumberInput.js');
109
+ var NumberInput = require('./number-input/NumberInput.js');
107
110
  var OverlayHeader = require('./overlay/OverlayHeader.js');
108
111
  var Portal = require('./portal/Portal.js');
109
112
  var QueryInput = require('./query-input/QueryInput.js');
@@ -120,14 +123,16 @@ var overflowUtils = require('./responsive/overflowUtils.js');
120
123
  var utils = require('./responsive/utils.js');
121
124
  var SearchInput = require('./search-input/SearchInput.js');
122
125
  var Slider = require('./slider/Slider.js');
126
+ var RangeSlider = require('./slider/RangeSlider.js');
127
+ var Splitter = require('./splitter/Splitter.js');
128
+ var SplitPanel = require('./splitter/SplitPanel.js');
129
+ var SplitHandle = require('./splitter/SplitHandle.js');
123
130
  var StaticList = require('./static-list/StaticList.js');
124
131
  var StaticListItem = require('./static-list/StaticListItem.js');
125
132
  var StaticListItemContent = require('./static-list/StaticListItemContent.js');
126
133
  var SteppedTracker = require('./stepped-tracker/SteppedTracker.js');
127
134
  var Step = require('./stepped-tracker/Step.js');
128
135
  var useStepReducer = require('./stepped-tracker/useStepReducer.js');
129
- var useStepperInput = require('./stepper-input/useStepperInput.js');
130
- var StepperInput = require('./stepper-input/StepperInput.js');
131
136
  var SystemStatus = require('./system-status/SystemStatus.js');
132
137
  var SystemStatusContent = require('./system-status/SystemStatusContent.js');
133
138
  var SystemStatusActions = require('./system-status/SystemStatusActions.js');
@@ -233,6 +238,8 @@ exports.DateRangeSelectionContext = DatePickerContext.DateRangeSelectionContext;
233
238
  exports.SingleDateSelectionContext = DatePickerContext.SingleDateSelectionContext;
234
239
  exports.useDatePickerContext = DatePickerContext.useDatePickerContext;
235
240
  exports.DatePickerOverlay = DatePickerOverlay.DatePickerOverlay;
241
+ exports.DatePickerOverlayProvider = DatePickerOverlayProvider.DatePickerOverlayProvider;
242
+ exports.useDatePickerOverlay = DatePickerOverlayProvider.useDatePickerOverlay;
236
243
  exports.DatePickerRangeInput = DatePickerRangeInput.DatePickerRangeInput;
237
244
  exports.defaultRangeValidator = DatePickerRangeInput.defaultRangeValidator;
238
245
  exports.DatePickerRangePanel = DatePickerRangePanel.DatePickerRangePanel;
@@ -247,10 +254,10 @@ exports.DropdownButton = DropdownButton.DropdownButton;
247
254
  exports.Dropdown = Dropdown.Dropdown;
248
255
  exports.useDropdownBase = useDropdownBase.useDropdownBase;
249
256
  exports.EditableLabel = EditableLabel.EditableLabel;
250
- exports.FormField = FormFieldLegacy.FormFieldLegacy;
251
- exports.FormLabel = FormLabel.FormLabel;
252
257
  exports.FormFieldLegacyContext = FormFieldLegacyContext.FormFieldLegacyContext;
253
258
  exports.useFormFieldLegacyProps = useFormFieldLegacyProps.useFormFieldLegacyProps;
259
+ exports.FormField = FormFieldLegacy.FormFieldLegacy;
260
+ exports.FormLabel = FormLabel.FormLabel;
254
261
  exports.FormGroup = FormGroup.FormGroup;
255
262
  exports.FormattedInput = FormattedInput.FormattedInput;
256
263
  exports.Input = InputLegacy.InputLegacy;
@@ -277,6 +284,8 @@ exports.MenuButton = MenuButton.MenuButton;
277
284
  exports.Metric = Metric.Metric;
278
285
  exports.MetricHeader = MetricHeader.MetricHeader;
279
286
  exports.MetricContent = MetricContent.MetricContent;
287
+ exports.useNumberInput = useNumberInput.useNumberInput;
288
+ exports.NumberInput = NumberInput.NumberInput;
280
289
  exports.OverlayHeader = OverlayHeader.OverlayHeader;
281
290
  exports.Portal = Portal.Portal;
282
291
  exports.QueryInput = QueryInput.QueryInput;
@@ -318,14 +327,16 @@ exports.isResponsiveAttribute = utils.isResponsiveAttribute;
318
327
  exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
319
328
  exports.SearchInput = SearchInput.SearchInput;
320
329
  exports.Slider = Slider.Slider;
330
+ exports.RangeSlider = RangeSlider.RangeSlider;
331
+ exports.Splitter = Splitter.Splitter;
332
+ exports.SplitPanel = SplitPanel.SplitPanel;
333
+ exports.SplitHandle = SplitHandle.SplitHandle;
321
334
  exports.StaticList = StaticList.StaticList;
322
335
  exports.StaticListItem = StaticListItem.StaticListItem;
323
336
  exports.StaticListItemContent = StaticListItemContent.StaticListItemContent;
324
337
  exports.SteppedTracker = SteppedTracker.SteppedTracker;
325
338
  exports.Step = Step.Step;
326
339
  exports.useStepReducer = useStepReducer.useStepReducer;
327
- exports.useStepperInput = useStepperInput.useStepperInput;
328
- exports.StepperInput = StepperInput.StepperInput;
329
340
  exports.SystemStatus = SystemStatus.SystemStatus;
330
341
  exports.SystemStatusContent = SystemStatusContent.SystemStatusContent;
331
342
  exports.SystemStatusActions = SystemStatusActions.SystemStatusActions;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: none;\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-editable-borderStyle);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-border);\n\n align-items: center;\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 height: var(--salt-size-base);\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n width: 100%;\n box-sizing: border-box;\n\n gap: var(--salt-spacing-50);\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--numberInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-active);\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--numberInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-active: var(--salt-editable-primary-background-active);\n --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-active: var(--salt-editable-secondary-background-active);\n --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-secondary-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-background-active: var(--salt-status-error-background);\n --numberInput-background-hover: 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-background-active: var(--salt-status-warning-background);\n --numberInput-background-hover: 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-background-active: var(--salt-status-success-background);\n --numberInput-background-hover: 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.saltNumberInput-inputContainer {\n display: flex;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n border: var(--numberInput-border);\n box-sizing: border-box;\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n overflow: hidden;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n flex-grow: 1;\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 height: 100%;\n letter-spacing: var(--saltNumberInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\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 selected input */\n.saltNumberInput-input::selection {\n background: var(--salt-content-foreground-highlight);\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-editable-borderWidth-active);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --numberInput-borderWidth: var(--salt-size-border);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-border);\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-editable-borderStyle-disabled);\n --numberInput-borderWidth: var(--salt-size-border);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--numberInput-borderWidth) var(--numberInput-borderStyle) var(--numberInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\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-editable-borderWidth-active);\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/* 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-readOnly .saltNumberInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 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(--salt-size-border));\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 text-align: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n text-align: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-size-border-strong);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);\n --saltButton-width: var(--salt-size-base);\n}\n\n.saltNumberInput-numberButtonIncrement {\n --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=NumberInput.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NumberInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -7,12 +7,12 @@ var window = require('@salt-ds/window');
7
7
  var clsx = require('clsx');
8
8
  var react = require('react');
9
9
  var utils = require('./internal/utils.js');
10
- var StepperInput$1 = require('./StepperInput.css.js');
11
- var useStepperInput = require('./useStepperInput.js');
10
+ var NumberInput$1 = require('./NumberInput.css.js');
11
+ var useNumberInput = require('./useNumberInput.js');
12
12
 
13
- const withBaseName = core.makePrefixer("saltStepperInput");
14
- const StepperInput = react.forwardRef(
15
- function StepperInput2({
13
+ const withBaseName = core.makePrefixer("saltNumberInput");
14
+ const NumberInput = react.forwardRef(
15
+ function NumberInput2({
16
16
  bordered,
17
17
  className: classNameProp,
18
18
  decimalPlaces = 0,
@@ -39,8 +39,8 @@ const StepperInput = react.forwardRef(
39
39
  }, ref) {
40
40
  const targetWindow = window.useWindow();
41
41
  styles.useComponentCssInjection({
42
- testId: "salt-stepper-input",
43
- css: StepperInput$1,
42
+ testId: "salt-number-input",
43
+ css: NumberInput$1,
44
44
  window: targetWindow
45
45
  });
46
46
  const { IncreaseIcon, DecreaseIcon } = core.useIcon();
@@ -72,7 +72,7 @@ const StepperInput = react.forwardRef(
72
72
  const [value, setValue] = core.useControlled({
73
73
  controlled: valueProp,
74
74
  default: typeof defaultValueProp === "number" ? utils.toFixedDecimalPlaces(defaultValueProp, decimalPlaces) : defaultValueProp,
75
- name: "StepperInput",
75
+ name: "NumberInput",
76
76
  state: "value"
77
77
  });
78
78
  const [focused, setFocused] = react.useState(false);
@@ -83,7 +83,7 @@ const StepperInput = react.forwardRef(
83
83
  decrementValue,
84
84
  incrementButtonProps,
85
85
  incrementValue
86
- } = useStepperInput.useStepperInput({
86
+ } = useNumberInput.useNumberInput({
87
87
  inputRef,
88
88
  setValue,
89
89
  decimalPlaces,
@@ -225,8 +225,8 @@ const StepperInput = react.forwardRef(
225
225
  core.Button,
226
226
  {
227
227
  className: clsx.clsx(
228
- withBaseName("stepperButton"),
229
- withBaseName("stepperButtonIncrement")
228
+ withBaseName("numberButton"),
229
+ withBaseName("numberButtonIncrement")
230
230
  ),
231
231
  ...incrementButtonProps,
232
232
  children: /* @__PURE__ */ jsxRuntime.jsx(IncreaseIcon, { "aria-hidden": true })
@@ -236,8 +236,8 @@ const StepperInput = react.forwardRef(
236
236
  core.Button,
237
237
  {
238
238
  className: clsx.clsx(
239
- withBaseName("stepperButton"),
240
- withBaseName("stepperButtonDecrement")
239
+ withBaseName("numberButton"),
240
+ withBaseName("numberButtonDecrement")
241
241
  ),
242
242
  ...decrementButtonProps,
243
243
  children: /* @__PURE__ */ jsxRuntime.jsx(DecreaseIcon, { "aria-hidden": true })
@@ -250,5 +250,5 @@ const StepperInput = react.forwardRef(
250
250
  }
251
251
  );
252
252
 
253
- exports.StepperInput = StepperInput;
254
- //# sourceMappingURL=StepperInput.js.map
253
+ exports.NumberInput = NumberInput;
254
+ //# sourceMappingURL=NumberInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n Button,\n StatusAdornment,\n type ValidationStatus,\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } 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 type InputHTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport {\n isAllowedNonNumeric,\n isOutOfRange,\n sanitizedInput,\n toFixedDecimalPlaces,\n toFloat,\n} from \"./internal/utils\";\n\nimport numberInputCss from \"./NumberInput.css\";\nimport { useNumberInput } from \"./useNumberInput\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * A boolean. When `true`, the input will receive a full border.\n */\n bordered?: boolean;\n /**\n * The number of decimal places to display.\n */\n decimalPlaces?: number;\n /**\n * Sets the initial default value of the component.\n */\n defaultValue?: number | string;\n /**\n * If `true`, the number input will be disabled.\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n * @default '—'\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * Whether to hide the number buttons. Defaults to `false`.\n * @default false\n */\n hideButtons?: boolean;\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 * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * Callback when number input value is changed.\n * @param event - the event triggers value change, could be undefined during increment / decrement button long press\n */\n onChange?: (\n event: SyntheticEvent | undefined,\n value: number | string,\n ) => void;\n /**\n * A string. Displayed in a dimmed color when the input value is empty.\n */\n placeholder?: string | undefined;\n /**\n * A boolean. If `true`, the component is not 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 number buttons or Up Arrow and Down Arrow keys. Default to 1.\n * @default 1\n */\n step?: number;\n /**\n * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.\n * Defaults to 10.\n * @default 10\n */\n stepBlock?: number;\n /**\n * Alignment of text within container. Defaults to \"left\".\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n /**\n * Styling variant. Defaults to \"primary\".\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The value of the number input. The component will be controlled if this prop is provided.\n */\n value?: number | string | undefined;\n}\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n function NumberInput(\n {\n bordered,\n className: classNameProp,\n decimalPlaces = 0,\n defaultValue: defaultValueProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hideButtons,\n inputProps: inputPropsProp = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange: onChangeProp,\n placeholder,\n readOnly: readOnlyProp,\n startAdornment,\n step = 1,\n stepBlock = 10,\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n value: valueProp,\n variant = \"primary\",\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-number-input\",\n css: numberInputCss,\n window: targetWindow,\n });\n\n const { IncreaseIcon, DecreaseIcon } = useIcon();\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 = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onChange: inputOnChange,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputPropsProp;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default:\n typeof defaultValueProp === \"number\"\n ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces)\n : defaultValueProp,\n name: \"NumberInput\",\n state: \"value\",\n });\n\n // Won't be needed when `:has` css can be used\n const [focused, setFocused] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedInputRef = useForkRef(inputRef, inputRefProp);\n\n const {\n decrementButtonProps,\n decrementValue,\n incrementButtonProps,\n incrementValue,\n } = useNumberInput({\n inputRef,\n setValue,\n decimalPlaces,\n disabled,\n max,\n min,\n onChange: onChangeProp,\n readOnly: isReadOnly,\n step,\n stepBlock,\n value,\n });\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n\n inputOnFocus?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setFocused(false);\n\n if (value === undefined) return;\n\n const floatValue = toFloat(value);\n if (Number.isNaN(floatValue)) {\n // Keep original value if NaN\n setValue(value);\n onChangeProp?.(event, value);\n } else {\n const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);\n\n if (value !== \"\" && !isAllowedNonNumeric(value)) {\n setValue(roundedValue);\n }\n\n onChangeProp?.(event, roundedValue);\n }\n\n inputOnBlur?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const changedValue = event.target.value;\n\n setValue(sanitizedInput(changedValue));\n\n onChangeProp?.(event, sanitizedInput(changedValue));\n inputOnChange?.(event);\n };\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 setValue(min);\n onChangeProp?.(event, min);\n break;\n }\n case \"End\": {\n event.preventDefault();\n setValue(max);\n onChangeProp?.(event, max);\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\n inputOnKeyDown?.(event);\n };\n\n return (\n <div\n className={clsx(withBaseName(), classNameProp)}\n {...restProps}\n ref={ref}\n >\n <div\n className={clsx(\n withBaseName(\"inputContainer\"),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n )}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n aria-invalid={\n !isReadOnly ? isOutOfRange(value, min, max) : undefined\n }\n aria-valuemax={\n !isReadOnly\n ? toFloat(toFixedDecimalPlaces(max, decimalPlaces))\n : undefined\n }\n aria-valuemin={\n !isReadOnly\n ? toFloat(toFixedDecimalPlaces(min, decimalPlaces))\n : undefined\n }\n aria-valuenow={\n value && !Number.isNaN(toFloat(value)) && !isReadOnly\n ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces))\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={!isDisabled ? handleInputFocus : undefined}\n onKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={forkedInputRef}\n required={isRequired}\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={value}\n {...restInputProps}\n />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n\n {!hideButtons && !isReadOnly && (\n <div className={withBaseName(\"buttonContainer\")}>\n <Button\n className={clsx(\n withBaseName(\"numberButton\"),\n withBaseName(\"numberButtonIncrement\"),\n )}\n {...incrementButtonProps}\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n className={clsx(\n withBaseName(\"numberButton\"),\n withBaseName(\"numberButtonDecrement\"),\n )}\n {...decrementButtonProps}\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","NumberInput","useWindow","useComponentCssInjection","numberInputCss","useIcon","useFormFieldProps","useControlled","toFixedDecimalPlaces","useState","useRef","useForkRef","useNumberInput","toFloat","isAllowedNonNumeric","sanitizedInput","jsxs","clsx","jsx","isOutOfRange","capitalize","StatusAdornment","Button"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/number-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n activationFn: (event?: SyntheticEvent) => void,\n isAtLimit: boolean,\n) {\n const [buttonDown, setButtonDown] = useState(false);\n const [delay, setDelay] = useState(INITIAL_DELAY);\n\n const cancelInterval = useCallback(() => {\n setButtonDown(false);\n setDelay(INITIAL_DELAY);\n }, []);\n\n useEffect(() => {\n if (isAtLimit) cancelInterval();\n }, [isAtLimit, cancelInterval]);\n\n const targetWindow = useWindow();\n\n useEffect(() => {\n if (targetWindow) {\n targetWindow.addEventListener(\"mouseup\", cancelInterval);\n }\n return () => {\n if (targetWindow) {\n targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n }\n };\n }, [cancelInterval, targetWindow]);\n\n const activate = (event: SyntheticEvent) => {\n activationFn(event);\n if (event.type === \"mousedown\") {\n setButtonDown(true);\n }\n };\n\n useInterval(\n () => {\n if (!buttonDown) return;\n activationFn();\n if (delay === INITIAL_DELAY) {\n setDelay(INTERVAL_DELAY);\n }\n },\n buttonDown ? delay : null,\n );\n\n return { activate, buttonDown };\n}\n"],"names":["useState","useCallback","useEffect","useWindow","useInterval"],"mappings":";;;;;;AAIA,MAAM,aAAgB,GAAA,GAAA;AACtB,MAAM,cAAiB,GAAA,GAAA;AAEP,SAAA,yBAAA,CACd,cACA,SACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,aAAa,CAAA;AAEhD,EAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAA0B,cAAA,EAAA;AAAA,GAC7B,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAa,YAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA;AAAA;AAEzD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAc,EAAA;AAChB,QAAa,YAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA;AAAA;AAC5D,KACF;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA;AAEjC,EAAM,MAAA,QAAA,GAAW,CAAC,KAA0B,KAAA;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAI,IAAA,KAAA,CAAM,SAAS,WAAa,EAAA;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA;AACpB,GACF;AAEA,EAAAE,uBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAY,EAAA;AACjB,MAAa,YAAA,EAAA;AACb,MAAA,IAAI,UAAU,aAAe,EAAA;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA;AACzB,KACF;AAAA,IACA,aAAa,KAAQ,GAAA;AAAA,GACvB;AAEA,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA;AAChC;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useInterval.js","sources":["../src/number-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n const savedCallback = useRef<IntervalFunction | null>(null);\n\n useEffect(() => {\n savedCallback.current = callback;\n });\n\n useEffect(() => {\n function tick() {\n if (savedCallback.current !== null) {\n savedCallback.current();\n }\n }\n\n if (delay !== null) {\n const id = setInterval(tick, delay);\n return () => clearInterval(id);\n }\n return;\n }, [delay]);\n}\n\nexport { useInterval };\n"],"names":["useRef","useEffect"],"mappings":";;;;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgBA,aAAgC,IAAI,CAAA;AAE1D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA;AAAA,GACzB,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA;AAAA;AACxB;AAGF,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA;AAAA;AAE/B,IAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../src/number-input/internal/utils.ts"],"sourcesContent":["// The input should only accept numbers, decimal points, and plus/minus symbols\nexport const ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nexport const toFixedDecimalPlaces = (\n inputNumber: number,\n decimalPlaces: number,\n) => inputNumber.toFixed(decimalPlaces);\n\nexport const isAllowedNonNumeric = (inputCharacter: number | string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n inputCharacter === \"\"\n );\n};\n\nexport const toFloat = (inputValue: number | string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return Number.parseFloat(inputValue.toString());\n};\n\nexport const sanitizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nexport const isAtMax = (value: number | string | undefined, max: number) => {\n if (value === undefined) return true;\n return toFloat(value) >= max;\n};\n\nexport const isAtMin = (value: number | string | undefined, min: number) => {\n if (value === undefined) return true;\n return toFloat(value) <= min;\n};\n\nexport const isOutOfRange = (\n value: number | string | undefined,\n min: number,\n max: number,\n) => {\n if (value === undefined) return true;\n const floatValue = toFloat(value);\n return floatValue > max || floatValue < min;\n};\n"],"names":[],"mappings":";;AACO,MAAM,YAAe,GAAA;AAErB,MAAM,uBAAuB,CAClC,WAAA,EACA,aACG,KAAA,WAAA,CAAY,QAAQ,aAAa;AAEzB,MAAA,mBAAA,GAAsB,CAAC,cAAoC,KAAA;AACtE,EAAI,IAAA,OAAO,mBAAmB,QAAU,EAAA;AACxC,EAAA,OACG,KAAK,QAAS,CAAA,cAAc,KAAK,cAAe,CAAA,MAAA,KAAW,KAC5D,cAAmB,KAAA,EAAA;AAEvB;AAEa,MAAA,OAAA,GAAU,CAAC,UAAgC,KAAA;AAEtD,EAAI,IAAA,mBAAA,CAAoB,UAAU,CAAA,EAAU,OAAA,CAAA;AAC5C,EAAA,OAAO,MAAO,CAAA,UAAA,CAAW,UAAW,CAAA,QAAA,EAAU,CAAA;AAChD;AAEa,MAAA,cAAA,GAAiB,CAAC,YAAA,KAAA,CAC5B,YAAa,CAAA,KAAA,CAAM,YAAY,CAAK,IAAA,EAAI,EAAA,IAAA,CAAK,EAAE;AAErC,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEa,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEO,MAAM,YAAe,GAAA,CAC1B,KACA,EAAA,GAAA,EACA,GACG,KAAA;AACH,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAK,CAAA;AAChC,EAAO,OAAA,UAAA,GAAa,OAAO,UAAa,GAAA,GAAA;AAC1C;;;;;;;;;;;"}
@@ -4,7 +4,7 @@ var react = require('react');
4
4
  var useActivateWhileMouseDown = require('./internal/useActivateWhileMouseDown.js');
5
5
  var utils = require('./internal/utils.js');
6
6
 
7
- const useStepperInput = ({
7
+ const useNumberInput = ({
8
8
  decimalPlaces = 0,
9
9
  disabled,
10
10
  inputRef,
@@ -95,5 +95,5 @@ const useStepperInput = ({
95
95
  };
96
96
  };
97
97
 
98
- exports.useStepperInput = useStepperInput;
99
- //# sourceMappingURL=useStepperInput.js.map
98
+ exports.useNumberInput = useNumberInput;
99
+ //# sourceMappingURL=useNumberInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useNumberInput.js","sources":["../src/number-input/useNumberInput.ts"],"sourcesContent":["import {\n type Dispatch,\n type MouseEvent,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\nimport type { NumberInputProps } from \"./NumberInput\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport {\n isAtMax,\n isAtMin,\n toFixedDecimalPlaces,\n toFloat,\n} from \"./internal/utils\";\n\n/**\n * Manages increment / decrement logic\n */\nexport const useNumberInput = ({\n decimalPlaces = 0,\n disabled,\n inputRef,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n readOnly,\n setValue,\n step = 1,\n stepBlock = 10,\n value,\n}: Pick<\n NumberInputProps,\n | \"decimalPlaces\"\n | \"disabled\"\n | \"inputRef\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"readOnly\"\n | \"step\"\n | \"stepBlock\"\n | \"value\"\n> & {\n setValue: Dispatch<SetStateAction<string | number | undefined>>;\n inputRef: MutableRefObject<HTMLInputElement | null>;\n}) => {\n const setValueInRange = useCallback(\n (event: SyntheticEvent | undefined, modifiedValue: number) => {\n if (readOnly) return;\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (Number.isNaN(toFloat(roundedValue))) return;\n\n setValue(roundedValue);\n\n onChange?.(event, roundedValue);\n },\n [decimalPlaces, min, max, onChange, readOnly, setValue],\n );\n\n const decrementValue = useCallback(\n (event?: SyntheticEvent, block?: boolean) => {\n if (value === undefined || isAtMin(value, min)) return;\n const decrementStep = block ? stepBlock : step;\n const nextValue =\n value === \"\" ? -decrementStep : toFloat(value) - decrementStep;\n setValueInRange(event, nextValue);\n },\n [value, min, step, stepBlock, setValueInRange],\n );\n\n const incrementValue = useCallback(\n (event?: SyntheticEvent, block?: boolean) => {\n if (value === undefined || isAtMax(value, max)) return;\n const incrementStep = block ? stepBlock : step;\n const nextValue =\n value === \"\" ? incrementStep : toFloat(value) + incrementStep;\n setValueInRange(event, nextValue);\n },\n [value, max, step, stepBlock, setValueInRange],\n );\n\n const { activate: decrementSpinner } = useActivateWhileMouseDown(\n (event?: SyntheticEvent) => decrementValue(event),\n isAtMin(value, min),\n );\n\n const { activate: incrementSpinner } = useActivateWhileMouseDown(\n (event?: SyntheticEvent) => incrementValue(event),\n isAtMax(value, max),\n );\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const commonButtonProps = {\n \"aria-hidden\": true,\n tabIndex: -1,\n onMouseUp: handleButtonMouseUp,\n };\n\n const incrementButtonProps = {\n ...commonButtonProps,\n \"aria-label\": \"increment value\",\n disabled: disabled || isAtMax(value, max),\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n if (event.nativeEvent.button !== 0) {\n // To match closely with <input type='input'>\n return;\n }\n incrementSpinner(event);\n },\n };\n\n const decrementButtonProps = {\n ...commonButtonProps,\n \"aria-label\": \"decrement value\",\n disabled: disabled || isAtMin(value, min),\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n if (event.nativeEvent.button !== 0) {\n // To match closely with <input type='input'>\n return;\n }\n decrementSpinner(event);\n },\n };\n\n return {\n incrementButtonProps,\n decrementButtonProps,\n incrementValue,\n decrementValue,\n };\n};\n"],"names":["useCallback","toFixedDecimalPlaces","toFloat","isAtMin","isAtMax","useActivateWhileMouseDown"],"mappings":"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"}
@@ -0,0 +1,161 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var core = require('@salt-ds/core');
6
+ var clsx = require('clsx');
7
+ var SliderThumb = require('./internal/SliderThumb.js');
8
+ var SliderTrack = require('./internal/SliderTrack.js');
9
+ var useRangeSliderThumb = require('./internal/useRangeSliderThumb.js');
10
+ var utils = require('./internal/utils.js');
11
+
12
+ const RangeSlider = react.forwardRef(
13
+ function RangeSlider2({
14
+ "aria-label": ariaLabel,
15
+ "aria-labelledby": ariaLabelledBy,
16
+ "aria-valuetext": ariaValueText,
17
+ decimalPlaces = 2,
18
+ disabled: disabledProp = false,
19
+ format,
20
+ marks,
21
+ max = 10,
22
+ min = 0,
23
+ maxLabel,
24
+ minLabel,
25
+ onChange,
26
+ onChangeEnd,
27
+ restrictToMarks = false,
28
+ showTooltip = true,
29
+ step = 1,
30
+ stepMultiplier = 2,
31
+ value: valueProp,
32
+ defaultValue = [min, min + (max - min) / 2],
33
+ ...rest
34
+ }, ref) {
35
+ const [valueState, setValue] = core.useControlled({
36
+ controlled: valueProp,
37
+ default: defaultValue,
38
+ name: "RangeSlider",
39
+ state: "value"
40
+ });
41
+ const lastValueRef = react.useRef(valueState);
42
+ const {
43
+ a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
44
+ disabled: formFieldDisabled
45
+ } = core.useFormFieldProps();
46
+ const disabled = formFieldDisabled || disabledProp;
47
+ const value = utils.clampRange(
48
+ valueState,
49
+ max,
50
+ min,
51
+ step,
52
+ decimalPlaces,
53
+ marks,
54
+ restrictToMarks
55
+ );
56
+ const progressPercentageStart = utils.calculatePercentage(value[0], max, min);
57
+ const progressPercentageEnd = utils.calculatePercentage(value[1], max, min);
58
+ const thumbProps = {
59
+ "aria-label": ariaLabel,
60
+ "aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy),
61
+ "aria-valuemax": max,
62
+ "aria-valuemin": min,
63
+ "aria-valuetext": ariaValueText,
64
+ disabled,
65
+ format,
66
+ max,
67
+ maxLabel,
68
+ min,
69
+ minLabel,
70
+ showTooltip,
71
+ step,
72
+ stepMultiplier,
73
+ sliderValue: value
74
+ };
75
+ const handleInputChange = (event, thumbIndex) => {
76
+ const parsedValue = utils.toFloat(event.target.value);
77
+ const values = preventThumbOverlap(parsedValue, value, thumbIndex);
78
+ const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
79
+ if (haveValuesChanged) {
80
+ const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
81
+ setValue(values2);
82
+ onChange == null ? void 0 : onChange(event, values2);
83
+ onChangeEnd == null ? void 0 : onChangeEnd(event, values2);
84
+ lastValueRef.current = values2;
85
+ }
86
+ };
87
+ const {
88
+ handleKeydownOnThumb,
89
+ handlePointerDownOnThumb,
90
+ handlePointerDownOnTrack,
91
+ isDragging,
92
+ sliderRef,
93
+ thumbIndexState,
94
+ preventThumbOverlap
95
+ } = useRangeSliderThumb.useRangeSliderThumb({
96
+ decimalPlaces,
97
+ handleInputChange,
98
+ marks,
99
+ min,
100
+ max,
101
+ step,
102
+ value,
103
+ onChange,
104
+ onChangeEnd,
105
+ restrictToMarks,
106
+ setValue,
107
+ stepMultiplier
108
+ });
109
+ return /* @__PURE__ */ jsxRuntime.jsxs(
110
+ SliderTrack.SliderTrack,
111
+ {
112
+ disabled,
113
+ format,
114
+ handlePointerDown: handlePointerDownOnTrack,
115
+ isDragging,
116
+ isRange: true,
117
+ marks,
118
+ min,
119
+ minLabel,
120
+ max,
121
+ maxLabel,
122
+ progressPercentageRange: [
123
+ progressPercentageStart,
124
+ progressPercentageEnd
125
+ ],
126
+ ref,
127
+ sliderRef,
128
+ ...rest,
129
+ children: [
130
+ /* @__PURE__ */ jsxRuntime.jsx(
131
+ SliderThumb.SliderThumb,
132
+ {
133
+ index: 0,
134
+ handleInputChange: (event) => handleInputChange(event, 0),
135
+ handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
136
+ handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
137
+ offsetPercentage: `${utils.calculatePercentage(value[0], max, min)}%`,
138
+ trackDragging: isDragging && thumbIndexState === 0,
139
+ ...thumbProps
140
+ }
141
+ ),
142
+ /* @__PURE__ */ jsxRuntime.jsx(
143
+ SliderThumb.SliderThumb,
144
+ {
145
+ index: 1,
146
+ handleInputChange: (event) => handleInputChange(event, 1),
147
+ handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
148
+ handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
149
+ offsetPercentage: `${utils.calculatePercentage(value[1], max, min)}%`,
150
+ trackDragging: isDragging && thumbIndexState === 1,
151
+ ...thumbProps
152
+ }
153
+ )
154
+ ]
155
+ }
156
+ );
157
+ }
158
+ );
159
+
160
+ exports.RangeSlider = RangeSlider;
161
+ //# sourceMappingURL=RangeSlider.js.map