@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.52

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 (276) hide show
  1. package/css/salt-lab.css +256 -268
  2. package/dist-cjs/calendar/Calendar.css.js +1 -1
  3. package/dist-cjs/calendar/Calendar.js +6 -17
  4. package/dist-cjs/calendar/Calendar.js.map +1 -1
  5. package/dist-cjs/calendar/CalendarNavigation.css.js +6 -0
  6. package/dist-cjs/calendar/{internal/CalendarNavigation.js → CalendarNavigation.js} +160 -66
  7. package/dist-cjs/calendar/CalendarNavigation.js.map +1 -0
  8. package/dist-cjs/calendar/formatDate.js +56 -0
  9. package/dist-cjs/calendar/formatDate.js.map +1 -0
  10. package/dist-cjs/calendar/internal/CalendarCarousel.js +3 -3
  11. package/dist-cjs/calendar/internal/CalendarCarousel.js.map +1 -1
  12. package/dist-cjs/calendar/internal/CalendarDay.js +45 -33
  13. package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
  14. package/dist-cjs/calendar/internal/CalendarMonth.js +3 -2
  15. package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
  16. package/dist-cjs/calendar/internal/CalendarWeekHeader.js +3 -3
  17. package/dist-cjs/calendar/internal/CalendarWeekHeader.js.map +1 -1
  18. package/dist-cjs/calendar/internal/useFocusManagement.js +7 -4
  19. package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -1
  20. package/dist-cjs/calendar/internal/utils.js +28 -23
  21. package/dist-cjs/calendar/internal/utils.js.map +1 -1
  22. package/dist-cjs/calendar/useCalendar.js +94 -45
  23. package/dist-cjs/calendar/useCalendar.js.map +1 -1
  24. package/dist-cjs/calendar/useCalendarDay.js +19 -10
  25. package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
  26. package/dist-cjs/calendar/useCalendarSelection.js +360 -0
  27. package/dist-cjs/calendar/useCalendarSelection.js.map +1 -0
  28. package/dist-cjs/cascading-menu/internal/useMouseHandlers.js.map +1 -1
  29. package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
  30. package/dist-cjs/combo-box-deprecated/ComboBox.css.js +1 -1
  31. package/dist-cjs/common-hooks/useCollectionItems.js.map +1 -1
  32. package/dist-cjs/content-status/ContentStatus.css.js +1 -1
  33. package/dist-cjs/date-input/DateInput.css.js +1 -1
  34. package/dist-cjs/date-input/DateInputRange.js +355 -0
  35. package/dist-cjs/date-input/DateInputRange.js.map +1 -0
  36. package/dist-cjs/date-input/DateInputSingle.js +229 -0
  37. package/dist-cjs/date-input/DateInputSingle.js.map +1 -0
  38. package/dist-cjs/date-input/utils.js +65 -0
  39. package/dist-cjs/date-input/utils.js.map +1 -0
  40. package/dist-cjs/date-picker/DatePicker.js +40 -150
  41. package/dist-cjs/date-picker/DatePicker.js.map +1 -1
  42. package/dist-cjs/date-picker/DatePickerActions.css.js +6 -0
  43. package/dist-cjs/date-picker/DatePickerActions.css.js.map +1 -0
  44. package/dist-cjs/date-picker/DatePickerActions.js +102 -0
  45. package/dist-cjs/date-picker/DatePickerActions.js.map +1 -0
  46. package/dist-cjs/date-picker/DatePickerContext.js +23 -17
  47. package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
  48. package/dist-cjs/date-picker/DatePickerOverlay.css.js +6 -0
  49. package/dist-cjs/date-picker/DatePickerOverlay.css.js.map +1 -0
  50. package/dist-cjs/date-picker/DatePickerOverlay.js +50 -0
  51. package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -0
  52. package/dist-cjs/date-picker/DatePickerOverlayProvider.js +105 -0
  53. package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -0
  54. package/dist-cjs/date-picker/DatePickerPanel.css.js +1 -1
  55. package/dist-cjs/date-picker/DatePickerRangeInput.js +118 -0
  56. package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -0
  57. package/dist-cjs/date-picker/DatePickerRangePanel.js +206 -0
  58. package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -0
  59. package/dist-cjs/date-picker/DatePickerSingleInput.js +97 -0
  60. package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -0
  61. package/dist-cjs/date-picker/DatePickerSinglePanel.js +138 -0
  62. package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -0
  63. package/dist-cjs/date-picker/useDatePicker.js +179 -0
  64. package/dist-cjs/date-picker/useDatePicker.js.map +1 -0
  65. package/dist-cjs/dropdown/useDropdown.js.map +1 -1
  66. package/dist-cjs/form-field-legacy/FormLabel.js.map +1 -1
  67. package/dist-cjs/index.js +43 -10
  68. package/dist-cjs/index.js.map +1 -1
  69. package/dist-cjs/list/List.js.map +1 -1
  70. package/dist-cjs/menu-button/MenuButtonTrigger.css.js +1 -1
  71. package/dist-cjs/query-input/QueryInput.css.js +1 -1
  72. package/dist-cjs/slider/Slider.css.js +1 -1
  73. package/dist-cjs/slider/Slider.js +53 -105
  74. package/dist-cjs/slider/Slider.js.map +1 -1
  75. package/dist-cjs/slider/internal/SliderContext.js +21 -0
  76. package/dist-cjs/slider/internal/SliderContext.js.map +1 -0
  77. package/dist-cjs/slider/internal/SliderMarks.js +31 -0
  78. package/dist-cjs/slider/internal/SliderMarks.js.map +1 -0
  79. package/dist-cjs/slider/internal/SliderSelection.js +17 -10
  80. package/dist-cjs/slider/internal/SliderSelection.js.map +1 -1
  81. package/dist-cjs/slider/internal/SliderThumb.js +77 -0
  82. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -0
  83. package/dist-cjs/slider/internal/SliderTrack.js +91 -0
  84. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -0
  85. package/dist-cjs/slider/internal/useKeyDownThumb.js +53 -0
  86. package/dist-cjs/slider/internal/useKeyDownThumb.js.map +1 -0
  87. package/dist-cjs/slider/internal/utils.js +78 -116
  88. package/dist-cjs/slider/internal/utils.js.map +1 -1
  89. package/dist-cjs/tabs/TabActivationIndicator.css.js +1 -1
  90. package/dist-cjs/tabs/useTabs.js.map +1 -1
  91. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  92. package/dist-es/calendar/Calendar.css.js +1 -1
  93. package/dist-es/calendar/Calendar.js +7 -18
  94. package/dist-es/calendar/Calendar.js.map +1 -1
  95. package/dist-es/calendar/CalendarNavigation.css.js +4 -0
  96. package/dist-es/calendar/CalendarNavigation.js +308 -0
  97. package/dist-es/calendar/CalendarNavigation.js.map +1 -0
  98. package/dist-es/calendar/formatDate.js +51 -0
  99. package/dist-es/calendar/formatDate.js.map +1 -0
  100. package/dist-es/calendar/internal/CalendarCarousel.js +3 -3
  101. package/dist-es/calendar/internal/CalendarCarousel.js.map +1 -1
  102. package/dist-es/calendar/internal/CalendarDay.js +45 -33
  103. package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
  104. package/dist-es/calendar/internal/CalendarMonth.js +3 -2
  105. package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
  106. package/dist-es/calendar/internal/CalendarWeekHeader.js +3 -3
  107. package/dist-es/calendar/internal/CalendarWeekHeader.js.map +1 -1
  108. package/dist-es/calendar/internal/useFocusManagement.js +7 -4
  109. package/dist-es/calendar/internal/useFocusManagement.js.map +1 -1
  110. package/dist-es/calendar/internal/utils.js +29 -23
  111. package/dist-es/calendar/internal/utils.js.map +1 -1
  112. package/dist-es/calendar/useCalendar.js +96 -47
  113. package/dist-es/calendar/useCalendar.js.map +1 -1
  114. package/dist-es/calendar/useCalendarDay.js +20 -11
  115. package/dist-es/calendar/useCalendarDay.js.map +1 -1
  116. package/dist-es/calendar/useCalendarSelection.js +350 -0
  117. package/dist-es/calendar/useCalendarSelection.js.map +1 -0
  118. package/dist-es/cascading-menu/internal/useMouseHandlers.js.map +1 -1
  119. package/dist-es/color-chooser/ColorChooser.js.map +1 -1
  120. package/dist-es/combo-box-deprecated/ComboBox.css.js +1 -1
  121. package/dist-es/common-hooks/useCollectionItems.js.map +1 -1
  122. package/dist-es/content-status/ContentStatus.css.js +1 -1
  123. package/dist-es/date-input/DateInput.css.js +1 -1
  124. package/dist-es/date-input/DateInputRange.js +351 -0
  125. package/dist-es/date-input/DateInputRange.js.map +1 -0
  126. package/dist-es/date-input/DateInputSingle.js +225 -0
  127. package/dist-es/date-input/DateInputSingle.js.map +1 -0
  128. package/dist-es/date-input/utils.js +57 -0
  129. package/dist-es/date-input/utils.js.map +1 -0
  130. package/dist-es/date-picker/DatePicker.js +43 -154
  131. package/dist-es/date-picker/DatePicker.js.map +1 -1
  132. package/dist-es/date-picker/DatePickerActions.css.js +4 -0
  133. package/dist-es/date-picker/DatePickerActions.css.js.map +1 -0
  134. package/dist-es/date-picker/DatePickerActions.js +98 -0
  135. package/dist-es/date-picker/DatePickerActions.js.map +1 -0
  136. package/dist-es/date-picker/DatePickerContext.js +22 -17
  137. package/dist-es/date-picker/DatePickerContext.js.map +1 -1
  138. package/dist-es/date-picker/DatePickerOverlay.css.js +4 -0
  139. package/dist-es/date-picker/DatePickerOverlay.css.js.map +1 -0
  140. package/dist-es/date-picker/DatePickerOverlay.js +46 -0
  141. package/dist-es/date-picker/DatePickerOverlay.js.map +1 -0
  142. package/dist-es/date-picker/DatePickerOverlayProvider.js +100 -0
  143. package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -0
  144. package/dist-es/date-picker/DatePickerPanel.css.js +1 -1
  145. package/dist-es/date-picker/DatePickerRangeInput.js +114 -0
  146. package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -0
  147. package/dist-es/date-picker/DatePickerRangePanel.js +198 -0
  148. package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -0
  149. package/dist-es/date-picker/DatePickerSingleInput.js +93 -0
  150. package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -0
  151. package/dist-es/date-picker/DatePickerSinglePanel.js +130 -0
  152. package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -0
  153. package/dist-es/date-picker/useDatePicker.js +175 -0
  154. package/dist-es/date-picker/useDatePicker.js.map +1 -0
  155. package/dist-es/dropdown/useDropdown.js.map +1 -1
  156. package/dist-es/form-field-legacy/FormLabel.js.map +1 -1
  157. package/dist-es/index.js +14 -3
  158. package/dist-es/index.js.map +1 -1
  159. package/dist-es/list/List.js.map +1 -1
  160. package/dist-es/menu-button/MenuButtonTrigger.css.js +1 -1
  161. package/dist-es/query-input/QueryInput.css.js +1 -1
  162. package/dist-es/slider/Slider.css.js +1 -1
  163. package/dist-es/slider/Slider.js +55 -107
  164. package/dist-es/slider/Slider.js.map +1 -1
  165. package/dist-es/slider/internal/SliderContext.js +16 -0
  166. package/dist-es/slider/internal/SliderContext.js.map +1 -0
  167. package/dist-es/slider/internal/SliderMarks.js +27 -0
  168. package/dist-es/slider/internal/SliderMarks.js.map +1 -0
  169. package/dist-es/slider/internal/SliderSelection.js +17 -10
  170. package/dist-es/slider/internal/SliderSelection.js.map +1 -1
  171. package/dist-es/slider/internal/SliderThumb.js +73 -0
  172. package/dist-es/slider/internal/SliderThumb.js.map +1 -0
  173. package/dist-es/slider/internal/SliderTrack.js +87 -0
  174. package/dist-es/slider/internal/SliderTrack.js.map +1 -0
  175. package/dist-es/slider/internal/useKeyDownThumb.js +49 -0
  176. package/dist-es/slider/internal/useKeyDownThumb.js.map +1 -0
  177. package/dist-es/slider/internal/utils.js +70 -111
  178. package/dist-es/slider/internal/utils.js.map +1 -1
  179. package/dist-es/tabs/TabActivationIndicator.css.js +1 -1
  180. package/dist-es/tabs/useTabs.js.map +1 -1
  181. package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  182. package/dist-types/calendar/Calendar.d.ts +63 -6
  183. package/dist-types/calendar/CalendarNavigation.d.ts +57 -0
  184. package/dist-types/calendar/formatDate.d.ts +14 -0
  185. package/dist-types/calendar/index.d.ts +3 -1
  186. package/dist-types/calendar/internal/CalendarDay.d.ts +2 -1
  187. package/dist-types/calendar/internal/CalendarWeekHeader.d.ts +4 -4
  188. package/dist-types/calendar/internal/useFocusManagement.d.ts +2 -1
  189. package/dist-types/calendar/internal/utils.d.ts +7 -8
  190. package/dist-types/calendar/useCalendar.d.ts +100 -16
  191. package/dist-types/calendar/useCalendarDay.d.ts +38 -0
  192. package/dist-types/calendar/useCalendarSelection.d.ts +189 -0
  193. package/dist-types/date-input/DateInputRange.d.ts +150 -0
  194. package/dist-types/date-input/DateInputSingle.d.ts +117 -0
  195. package/dist-types/date-input/index.d.ts +3 -1
  196. package/dist-types/date-input/utils.d.ts +43 -0
  197. package/dist-types/date-picker/DatePicker.d.ts +20 -62
  198. package/dist-types/date-picker/DatePickerActions.d.ts +80 -0
  199. package/dist-types/date-picker/DatePickerContext.d.ts +180 -17
  200. package/dist-types/date-picker/DatePickerOverlay.d.ts +11 -0
  201. package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +67 -0
  202. package/dist-types/date-picker/DatePickerRangeInput.d.ts +7 -0
  203. package/dist-types/date-picker/DatePickerRangePanel.d.ts +64 -0
  204. package/dist-types/date-picker/DatePickerSingleInput.d.ts +7 -0
  205. package/dist-types/date-picker/DatePickerSinglePanel.d.ts +42 -0
  206. package/dist-types/date-picker/index.d.ts +7 -0
  207. package/dist-types/date-picker/useDatePicker.d.ts +112 -0
  208. package/dist-types/slider/Slider.d.ts +23 -10
  209. package/dist-types/slider/internal/SliderContext.d.ts +11 -0
  210. package/dist-types/slider/internal/SliderMarks.d.ts +7 -0
  211. package/dist-types/slider/internal/SliderSelection.d.ts +3 -3
  212. package/dist-types/slider/internal/SliderThumb.d.ts +8 -0
  213. package/dist-types/slider/internal/SliderTrack.d.ts +4 -0
  214. package/dist-types/slider/internal/index.d.ts +3 -0
  215. package/dist-types/slider/internal/useKeyDownThumb.d.ts +2 -0
  216. package/dist-types/slider/internal/utils.d.ts +18 -10
  217. package/dist-types/slider/types.d.ts +3 -1
  218. package/package.json +3 -3
  219. package/dist-cjs/calendar/internal/CalendarNavigation.css.js +0 -6
  220. package/dist-cjs/calendar/internal/CalendarNavigation.js.map +0 -1
  221. package/dist-cjs/calendar/useSelection.js +0 -249
  222. package/dist-cjs/calendar/useSelection.js.map +0 -1
  223. package/dist-cjs/date-input/DateInput.js +0 -283
  224. package/dist-cjs/date-input/DateInput.js.map +0 -1
  225. package/dist-cjs/date-picker/DatePickerPanel.js +0 -155
  226. package/dist-cjs/date-picker/DatePickerPanel.js.map +0 -1
  227. package/dist-cjs/slider/internal/SliderHandle.js +0 -44
  228. package/dist-cjs/slider/internal/SliderHandle.js.map +0 -1
  229. package/dist-cjs/slider/internal/SliderMarkLabels.js +0 -45
  230. package/dist-cjs/slider/internal/SliderMarkLabels.js.map +0 -1
  231. package/dist-cjs/slider/internal/SliderRail.js +0 -25
  232. package/dist-cjs/slider/internal/SliderRail.js.map +0 -1
  233. package/dist-cjs/slider/internal/SliderRailMarks.js +0 -48
  234. package/dist-cjs/slider/internal/SliderRailMarks.js.map +0 -1
  235. package/dist-cjs/slider/internal/styles.js +0 -99
  236. package/dist-cjs/slider/internal/styles.js.map +0 -1
  237. package/dist-cjs/slider/internal/useSliderKeyDown.js +0 -50
  238. package/dist-cjs/slider/internal/useSliderKeyDown.js.map +0 -1
  239. package/dist-cjs/slider/internal/useSliderMouseDown.js +0 -96
  240. package/dist-cjs/slider/internal/useSliderMouseDown.js.map +0 -1
  241. package/dist-es/calendar/internal/CalendarNavigation.css.js +0 -4
  242. package/dist-es/calendar/internal/CalendarNavigation.js +0 -214
  243. package/dist-es/calendar/internal/CalendarNavigation.js.map +0 -1
  244. package/dist-es/calendar/useSelection.js +0 -242
  245. package/dist-es/calendar/useSelection.js.map +0 -1
  246. package/dist-es/date-input/DateInput.js +0 -279
  247. package/dist-es/date-input/DateInput.js.map +0 -1
  248. package/dist-es/date-picker/DatePickerPanel.js +0 -151
  249. package/dist-es/date-picker/DatePickerPanel.js.map +0 -1
  250. package/dist-es/slider/internal/SliderHandle.js +0 -40
  251. package/dist-es/slider/internal/SliderHandle.js.map +0 -1
  252. package/dist-es/slider/internal/SliderMarkLabels.js +0 -41
  253. package/dist-es/slider/internal/SliderMarkLabels.js.map +0 -1
  254. package/dist-es/slider/internal/SliderRail.js +0 -21
  255. package/dist-es/slider/internal/SliderRail.js.map +0 -1
  256. package/dist-es/slider/internal/SliderRailMarks.js +0 -44
  257. package/dist-es/slider/internal/SliderRailMarks.js.map +0 -1
  258. package/dist-es/slider/internal/styles.js +0 -91
  259. package/dist-es/slider/internal/styles.js.map +0 -1
  260. package/dist-es/slider/internal/useSliderKeyDown.js +0 -46
  261. package/dist-es/slider/internal/useSliderKeyDown.js.map +0 -1
  262. package/dist-es/slider/internal/useSliderMouseDown.js +0 -92
  263. package/dist-es/slider/internal/useSliderMouseDown.js.map +0 -1
  264. package/dist-types/calendar/internal/CalendarNavigation.d.ts +0 -16
  265. package/dist-types/calendar/useSelection.d.ts +0 -78
  266. package/dist-types/date-input/DateInput.d.ts +0 -60
  267. package/dist-types/date-picker/DatePickerPanel.d.ts +0 -10
  268. package/dist-types/slider/internal/SliderHandle.d.ts +0 -11
  269. package/dist-types/slider/internal/SliderMarkLabels.d.ts +0 -7
  270. package/dist-types/slider/internal/SliderRail.d.ts +0 -1
  271. package/dist-types/slider/internal/SliderRailMarks.d.ts +0 -12
  272. package/dist-types/slider/internal/styles.d.ts +0 -10
  273. package/dist-types/slider/internal/useSliderKeyDown.d.ts +0 -4
  274. package/dist-types/slider/internal/useSliderMouseDown.d.ts +0 -4
  275. /package/dist-cjs/calendar/{internal/CalendarNavigation.css.js.map → CalendarNavigation.css.js.map} +0 -0
  276. /package/dist-es/calendar/{internal/CalendarNavigation.css.js.map → CalendarNavigation.css.js.map} +0 -0
@@ -1,44 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer } from '@salt-ds/core';
3
- import { clsx } from 'clsx';
4
- import { useMemo } from 'react';
5
- import { createSliderRailMarksStyle, createHandleStyles } from './styles.js';
6
- import { isMarkAtMax, isLabeledMark } from './utils.js';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import { useWindow } from '@salt-ds/window';
9
- import css_248z from '../Slider.css.js';
10
-
11
- const withBaseName = makePrefixer("saltSliderRailMarks");
12
- function SliderRailMarks(props) {
13
- const { min, max, marks } = props;
14
- const targetWindow = useWindow();
15
- useComponentCssInjection({
16
- testId: "salt-slider",
17
- css: css_248z,
18
- window: targetWindow
19
- });
20
- const style = useMemo(
21
- () => createSliderRailMarksStyle(min, max, marks),
22
- [min, max, marks]
23
- );
24
- const marksLength = marks.length;
25
- const markStyles = useMemo(
26
- () => createHandleStyles(marksLength),
27
- [marksLength]
28
- );
29
- return /* @__PURE__ */ jsx("div", {
30
- className: withBaseName(),
31
- style,
32
- children: marks.map((mark, i) => {
33
- return /* @__PURE__ */ jsx("div", {
34
- className: clsx(withBaseName("mark"), {
35
- [withBaseName("max")]: isMarkAtMax(max, mark)
36
- }),
37
- style: markStyles[i]
38
- }, isLabeledMark(mark) ? mark.value : mark);
39
- })
40
- });
41
- }
42
-
43
- export { SliderRailMarks };
44
- //# sourceMappingURL=SliderRailMarks.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, useMemo } from \"react\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isLabeledMark, isMarkAtMax } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n value: number;\n label: ReactNode;\n}\n\nexport type SliderMark = number | LabeledMark;\n\nexport interface SliderRailMarksProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderRailMarksStyle(min, max, marks),\n [min, max, marks],\n );\n const marksLength = marks.length;\n const markStyles = useMemo(\n () => createHandleStyles(marksLength),\n [marksLength],\n );\n\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div\n key={isLabeledMark(mark) ? mark.value : mark}\n className={clsx(withBaseName(\"mark\"), {\n [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n })}\n style={markStyles[i]}\n />\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,0BAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,mBAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UACpC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAA,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,aAAc,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,IAK1C,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -1,91 +0,0 @@
1
- import { isLabeledMark } from './utils.js';
2
-
3
- function widthToPercentage(w, range) {
4
- return `${Math.round(1e3 * w / range) * 0.1}%`;
5
- }
6
- function createGridTemplateColumns(min, max, values) {
7
- const range = max - min;
8
- const colWidths = [];
9
- let prev = min;
10
- for (const v of values) {
11
- colWidths.push(v - prev);
12
- prev = v;
13
- }
14
- colWidths.push(max - prev);
15
- let auto = false;
16
- const colTemplates = colWidths.map((w) => {
17
- if (w === 0) {
18
- return "0";
19
- }
20
- if (!auto) {
21
- auto = true;
22
- return "auto";
23
- }
24
- return widthToPercentage(w, range);
25
- });
26
- return colTemplates.join(" ");
27
- }
28
- function createTrackStyle(min, max, value) {
29
- const values = Array.isArray(value) ? value : [value];
30
- return {
31
- gridTemplateColumns: createGridTemplateColumns(min, max, values)
32
- };
33
- }
34
- function createHandleStyles(count) {
35
- return [...Array(count).keys()].map((i) => ({
36
- gridColumnStart: `${i + 2}`
37
- }));
38
- }
39
- function createSliderRailMarksStyle(min, max, marks) {
40
- return {
41
- gridTemplateColumns: createGridTemplateColumns(
42
- min,
43
- max,
44
- marks.map((mark) => isLabeledMark(mark) ? mark.value : mark)
45
- )
46
- };
47
- }
48
- function createSliderMarkLabelsStyle(min, max, marks) {
49
- const range = max - min;
50
- const colWidths = [];
51
- let prev = min;
52
- for (const m of marks) {
53
- const w = isLabeledMark(m) ? m.value : m;
54
- colWidths.push(w - prev);
55
- colWidths.push(0);
56
- prev = w;
57
- }
58
- colWidths.push(max - prev);
59
- let auto = false;
60
- const colTemplates = colWidths.map((w) => {
61
- if (w === 0) {
62
- return "0";
63
- }
64
- if (!auto) {
65
- auto = true;
66
- return "auto";
67
- }
68
- return widthToPercentage(w, range);
69
- });
70
- return {
71
- gridTemplateColumns: colTemplates.join(" ")
72
- };
73
- }
74
- function createSliderMarkLabelStyles(marks) {
75
- const styles = [];
76
- marks.forEach((mark, i) => {
77
- styles.push({
78
- gridColumnStart: 2 * i + 2
79
- });
80
- });
81
- if (marks.length > 0) {
82
- styles[0].justifySelf = "left";
83
- }
84
- if (marks.length > 1) {
85
- styles[marks.length - 1].justifySelf = "right";
86
- }
87
- return styles;
88
- }
89
-
90
- export { createHandleStyles, createSliderMarkLabelStyles, createSliderMarkLabelsStyle, createSliderRailMarksStyle, createTrackStyle };
91
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sources":["../src/slider/internal/styles.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { SliderValue } from \"../types\";\nimport type { SliderMark } from \"./SliderRailMarks\";\nimport { isLabeledMark } from \"./utils\";\n\nfunction widthToPercentage(w: number, range: number) {\n return `${Math.round((1000 * w) / range) * 0.1}%`;\n}\n\nfunction createGridTemplateColumns(\n min: number,\n max: number,\n values: number[],\n): string {\n const range = max - min;\n const colWidths: number[] = [];\n let prev = min;\n for (const v of values) {\n colWidths.push(v - prev);\n prev = v;\n }\n colWidths.push(max - prev);\n let auto = false;\n const colTemplates = colWidths.map((w) => {\n if (w === 0) {\n return \"0\";\n }\n if (!auto) {\n auto = true;\n return \"auto\";\n }\n return widthToPercentage(w, range);\n });\n return colTemplates.join(\" \");\n}\n\nexport function createTrackStyle(\n min: number,\n max: number,\n value: SliderValue,\n): CSSProperties {\n const values = Array.isArray(value) ? value : [value];\n return {\n gridTemplateColumns: createGridTemplateColumns(min, max, values),\n };\n}\n\nexport function createHandleStyles(count: number) {\n return [...Array(count).keys()].map((i) => ({\n gridColumnStart: `${i + 2}`,\n }));\n}\n\nexport function createSliderRailMarksStyle(\n min: number,\n max: number,\n marks: SliderMark[],\n): CSSProperties {\n return {\n gridTemplateColumns: createGridTemplateColumns(\n min,\n max,\n marks.map((mark) => (isLabeledMark(mark) ? mark.value : mark)),\n ),\n };\n}\n\nexport function createSliderMarkLabelsStyle(\n min: number,\n max: number,\n marks: SliderMark[],\n): CSSProperties {\n const range = max - min;\n const colWidths: number[] = [];\n let prev = min;\n for (const m of marks) {\n const w = isLabeledMark(m) ? m.value : m;\n colWidths.push(w - prev);\n colWidths.push(0);\n prev = w;\n }\n colWidths.push(max - prev);\n let auto = false;\n const colTemplates = colWidths.map((w) => {\n if (w === 0) {\n return \"0\";\n }\n if (!auto) {\n auto = true;\n return \"auto\";\n }\n return widthToPercentage(w, range);\n });\n\n return {\n gridTemplateColumns: colTemplates.join(\" \"),\n };\n}\n\nexport function createSliderMarkLabelStyles(\n marks: SliderMark[],\n): CSSProperties[] {\n const styles: CSSProperties[] = [];\n marks.forEach((mark, i) => {\n styles.push({\n gridColumnStart: 2 * i + 2,\n });\n });\n if (marks.length > 0) {\n styles[0].justifySelf = \"left\";\n }\n if (marks.length > 1) {\n styles[marks.length - 1].justifySelf = \"right\";\n }\n return styles;\n}\n"],"names":[],"mappings":"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"}
@@ -1,46 +0,0 @@
1
- import { getHandleIndex, roundValue, clampValue } from './utils.js';
2
-
3
- function useSliderKeyDown(value, min, max, pageStep, step, updateValueItem, setValue, onChange) {
4
- return (event) => {
5
- const handleElement = event.target;
6
- const handleIndex = getHandleIndex(handleElement);
7
- let valueItem = Array.isArray(value) ? value[handleIndex] : value;
8
- switch (event.key) {
9
- case "Home":
10
- valueItem = min;
11
- break;
12
- case "End":
13
- valueItem = max;
14
- break;
15
- case "PageUp":
16
- valueItem += pageStep;
17
- break;
18
- case "PageDown":
19
- valueItem -= pageStep;
20
- break;
21
- case "ArrowUp":
22
- case "ArrowRight":
23
- valueItem += step;
24
- break;
25
- case "ArrowDown":
26
- case "ArrowLeft":
27
- valueItem -= step;
28
- break;
29
- default:
30
- return;
31
- }
32
- event.preventDefault();
33
- valueItem = roundValue(valueItem, step);
34
- valueItem = clampValue(valueItem, min, max);
35
- const newValue = updateValueItem(value, handleIndex, valueItem);
36
- if (newValue !== value) {
37
- setValue(newValue);
38
- if (onChange) {
39
- onChange(newValue);
40
- }
41
- }
42
- };
43
- }
44
-
45
- export { useSliderKeyDown };
46
- //# sourceMappingURL=useSliderKeyDown.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSliderKeyDown.js","sources":["../src/slider/internal/useSliderKeyDown.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nimport {\n type UpdateValueItem,\n clampValue,\n getHandleIndex,\n roundValue,\n} from \"./utils\";\n\nexport function useSliderKeyDown(\n value: SliderValue,\n min: number,\n max: number,\n pageStep: number,\n step: number,\n updateValueItem: UpdateValueItem,\n setValue: SliderChangeHandler,\n onChange?: SliderChangeHandler,\n) {\n return (event: KeyboardEvent) => {\n const handleElement = event.target as HTMLDivElement;\n const handleIndex = getHandleIndex(handleElement);\n let valueItem: number = Array.isArray(value) ? value[handleIndex] : value;\n switch (event.key) {\n case \"Home\":\n valueItem = min;\n break;\n case \"End\":\n valueItem = max;\n break;\n case \"PageUp\":\n valueItem += pageStep;\n break;\n case \"PageDown\":\n valueItem -= pageStep;\n break;\n case \"ArrowUp\":\n case \"ArrowRight\":\n valueItem += step;\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n valueItem -= step;\n break;\n default:\n return;\n }\n event.preventDefault();\n valueItem = roundValue(valueItem, step);\n valueItem = clampValue(valueItem, min, max);\n const newValue = updateValueItem(value, handleIndex, valueItem);\n if (newValue !== value) {\n setValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n }\n };\n}\n"],"names":[],"mappings":";;AASgB,SAAA,gBAAA,CACd,OACA,GACA,EAAA,GAAA,EACA,UACA,IACA,EAAA,eAAA,EACA,UACA,QACA,EAAA;AACA,EAAA,OAAO,CAAC,KAAyB,KAAA;AAC/B,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,eAAe,aAAa,CAAA,CAAA;AAChD,IAAA,IAAI,YAAoB,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,GAAI,MAAM,WAAe,CAAA,GAAA,KAAA,CAAA;AACpE,IAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,MACP,KAAA,MAAA;AACH,QAAY,SAAA,GAAA,GAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAY,SAAA,GAAA,GAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,QAAA;AACH,QAAa,SAAA,IAAA,QAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,UAAA;AACH,QAAa,SAAA,IAAA,QAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,SAAA,CAAA;AAAA,MACA,KAAA,YAAA;AACH,QAAa,SAAA,IAAA,IAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,WAAA,CAAA;AAAA,MACA,KAAA,WAAA;AACH,QAAa,SAAA,IAAA,IAAA,CAAA;AACb,QAAA,MAAA;AAAA,MAAA;AAEA,QAAA,OAAA;AAAA,KAAA;AAEJ,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAY,SAAA,GAAA,UAAA,CAAW,WAAW,IAAI,CAAA,CAAA;AACtC,IAAY,SAAA,GAAA,UAAA,CAAW,SAAW,EAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAC1C,IAAA,MAAM,QAAW,GAAA,eAAA,CAAgB,KAAO,EAAA,WAAA,EAAa,SAAS,CAAA,CAAA;AAC9D,IAAA,IAAI,aAAa,KAAO,EAAA;AACtB,MAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,92 +0,0 @@
1
- import { useRef, useEffect, useCallback } from 'react';
2
- import { roundValue, clampValue } from './utils.js';
3
-
4
- const valueFromClientX = (context, x) => {
5
- const { min, max, step, trackRef } = context;
6
- const rect = trackRef.current.getBoundingClientRect();
7
- const localX = x - rect.x;
8
- let v = localX / rect.width * (max - min) + min;
9
- v = roundValue(v, step);
10
- v = clampValue(v, min, max);
11
- return v;
12
- };
13
- function getNearestHandle(value, clickValue) {
14
- if (!Array.isArray(value)) {
15
- return 0;
16
- }
17
- let minDistance = Number.MAX_VALUE;
18
- let handleIndex = -1;
19
- value.forEach((v, i) => {
20
- const d = Math.abs(clickValue - v);
21
- if (d < minDistance) {
22
- minDistance = d;
23
- handleIndex = i;
24
- }
25
- });
26
- return handleIndex;
27
- }
28
- function useSliderMouseDown(trackRef, value, min, max, step, updateValueItem, setValue, onChange) {
29
- const mouseContext = useRef({
30
- min,
31
- max,
32
- step,
33
- value,
34
- trackRef,
35
- updateValueItem,
36
- setValue,
37
- onChange
38
- });
39
- useEffect(() => {
40
- const c = mouseContext.current;
41
- c.min = min;
42
- c.max = max;
43
- c.step = step;
44
- c.value = value;
45
- c.updateValueItem = updateValueItem;
46
- c.onChange = onChange;
47
- c.setValue = setValue;
48
- }, [min, max, step, value, setValue, updateValueItem, onChange]);
49
- const onMouseMove = useCallback((event) => {
50
- const { handleIndex, value: value2, updateValueItem: updateValueItem2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
51
- if (handleIndex === void 0) {
52
- return;
53
- }
54
- const { clientX } = event;
55
- const clickValue = valueFromClientX(mouseContext.current, clientX);
56
- const newValue = updateValueItem2(value2, handleIndex, clickValue);
57
- if (newValue !== value2) {
58
- setValue2(newValue);
59
- if (onChange2) {
60
- onChange2(newValue);
61
- }
62
- }
63
- }, []);
64
- const onMouseUp = useCallback(() => {
65
- document.removeEventListener("mouseup", onMouseUp);
66
- document.removeEventListener("mousemove", onMouseMove);
67
- mouseContext.current.handleIndex = void 0;
68
- }, [onMouseMove]);
69
- return useCallback(
70
- (event) => {
71
- const { value: value2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
72
- document.addEventListener("mouseup", onMouseUp);
73
- document.addEventListener("mousemove", onMouseMove);
74
- const { clientX } = event;
75
- const clickValue = valueFromClientX(mouseContext.current, clientX);
76
- const handleIndex = getNearestHandle(value2, clickValue);
77
- mouseContext.current.handleIndex = handleIndex;
78
- const newValue = updateValueItem(value2, handleIndex, clickValue);
79
- if (newValue !== value2) {
80
- setValue2(newValue);
81
- if (onChange2) {
82
- onChange2(newValue);
83
- }
84
- }
85
- event.preventDefault();
86
- },
87
- [onMouseMove, onMouseUp]
88
- );
89
- }
90
-
91
- export { useSliderMouseDown };
92
- //# sourceMappingURL=useSliderMouseDown.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSliderMouseDown.js","sources":["../src/slider/internal/useSliderMouseDown.ts"],"sourcesContent":["import {\n type MouseEvent as ReactMouseEvent,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nimport { type UpdateValueItem, clampValue, roundValue } from \"./utils\";\n\ninterface MouseContext {\n min: number;\n max: number;\n step: number;\n value: SliderValue;\n trackRef: RefObject<HTMLDivElement>;\n handleIndex?: number;\n updateValueItem: UpdateValueItem;\n setValue: SliderChangeHandler;\n onChange?: SliderChangeHandler;\n}\n\nconst valueFromClientX = (context: MouseContext, x: number) => {\n const { min, max, step, trackRef } = context;\n const rect = trackRef.current!.getBoundingClientRect();\n const localX = x - rect.x;\n let v = (localX / rect.width) * (max - min) + min;\n v = roundValue(v, step);\n v = clampValue(v, min, max);\n return v;\n};\n\nfunction getNearestHandle(value: SliderValue, clickValue: number): number {\n if (!Array.isArray(value)) {\n return 0;\n }\n let minDistance = Number.MAX_VALUE;\n let handleIndex = -1;\n value.forEach((v, i) => {\n const d = Math.abs(clickValue - v);\n if (d < minDistance) {\n minDistance = d;\n handleIndex = i;\n }\n });\n return handleIndex;\n}\n\nexport function useSliderMouseDown(\n trackRef: RefObject<HTMLDivElement>,\n value: SliderValue,\n min: number,\n max: number,\n step: number,\n updateValueItem: UpdateValueItem,\n setValue: SliderChangeHandler,\n onChange?: SliderChangeHandler,\n) {\n const mouseContext = useRef<MouseContext>({\n min,\n max,\n step,\n value,\n trackRef,\n updateValueItem,\n setValue,\n onChange,\n });\n\n useEffect(() => {\n const c = mouseContext.current;\n c.min = min;\n c.max = max;\n c.step = step;\n c.value = value;\n c.updateValueItem = updateValueItem;\n c.onChange = onChange;\n c.setValue = setValue;\n }, [min, max, step, value, setValue, updateValueItem, onChange]);\n\n const onMouseMove = useCallback((event: MouseEvent) => {\n const { handleIndex, value, updateValueItem, setValue, onChange } =\n mouseContext.current;\n if (handleIndex === undefined) {\n return;\n }\n const { clientX } = event;\n const clickValue = valueFromClientX(mouseContext.current, clientX);\n const newValue = updateValueItem(value, handleIndex, clickValue);\n if (newValue !== value) {\n setValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n }\n }, []);\n\n const onMouseUp = useCallback(() => {\n document.removeEventListener(\"mouseup\", onMouseUp);\n document.removeEventListener(\"mousemove\", onMouseMove);\n mouseContext.current.handleIndex = undefined;\n }, [onMouseMove]);\n\n return useCallback(\n (event: ReactMouseEvent) => {\n const { value, setValue, onChange } = mouseContext.current;\n document.addEventListener(\"mouseup\", onMouseUp);\n document.addEventListener(\"mousemove\", onMouseMove);\n\n const { clientX } = event;\n const clickValue = valueFromClientX(mouseContext.current, clientX);\n\n const handleIndex = getNearestHandle(value, clickValue);\n mouseContext.current.handleIndex = handleIndex;\n const newValue = updateValueItem(value, handleIndex, clickValue);\n\n if (newValue !== value) {\n setValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n }\n\n event.preventDefault();\n },\n [onMouseMove, onMouseUp],\n );\n}\n"],"names":["value","updateValueItem","setValue","onChange"],"mappings":"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"}
@@ -1,16 +0,0 @@
1
- import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
2
- import { type ComponentPropsWithRef } from "react";
3
- import { type DateValue } from "@internationalized/date";
4
- declare type dateDropdownProps = DropdownProps<DateValue>;
5
- export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
6
- MonthDropdownProps?: dateDropdownProps;
7
- YearDropdownProps?: dateDropdownProps;
8
- onMonthSelect?: dateDropdownProps["onChange"];
9
- onYearSelect?: dateDropdownProps["onChange"];
10
- borderedDropdown?: dateDropdownProps["bordered"];
11
- onNavigateNext?: ButtonProps["onClick"];
12
- onNavigatePrevious?: ButtonProps["onClick"];
13
- hideYearDropdown?: boolean;
14
- }
15
- export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
16
- export {};
@@ -1,78 +0,0 @@
1
- import { CalendarDate, type DateValue } from "@internationalized/date";
2
- import type { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from "react";
3
- interface BaseUseSelectionCalendarProps<SelectionVariantType> {
4
- hoveredDate?: DateValue | null;
5
- selectedDate?: SelectionVariantType | null;
6
- defaultSelectedDate?: SelectionVariantType;
7
- onSelectedDateChange?: (event: SyntheticEvent, selectedDate: SelectionVariantType) => void;
8
- isDaySelectable: (date?: DateValue) => boolean;
9
- onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: DateValue | null) => void;
10
- }
11
- export declare type SingleSelectionValueType = DateValue;
12
- declare type MultiSelectionValueType = DateValue[];
13
- export declare type RangeSelectionValueType = {
14
- startDate?: DateValue;
15
- endDate?: DateValue;
16
- };
17
- declare type OffsetSelectionValueType = {
18
- startDate?: DateValue;
19
- endDate?: DateValue;
20
- };
21
- declare type AllSelectionValueType = SingleSelectionValueType | MultiSelectionValueType | RangeSelectionValueType | OffsetSelectionValueType | null;
22
- export interface UseOffsetSelectionCalendarProps extends Omit<BaseUseSelectionCalendarProps<OffsetSelectionValueType>, "startDateOffset" | "endDateOffset"> {
23
- selectionVariant: "offset";
24
- startDateOffset?: (date: DateValue) => DateValue;
25
- endDateOffset?: (date: DateValue) => DateValue;
26
- }
27
- export interface UseRangeSelectionCalendarProps extends BaseUseSelectionCalendarProps<RangeSelectionValueType> {
28
- selectionVariant: "range";
29
- }
30
- export interface UseMultiSelectionCalendarProps extends BaseUseSelectionCalendarProps<MultiSelectionValueType> {
31
- selectionVariant: "multiselect";
32
- }
33
- export interface UseSingleSelectionCalendarProps extends BaseUseSelectionCalendarProps<SingleSelectionValueType> {
34
- selectionVariant: "default";
35
- }
36
- export declare type useSelectionCalendarProps = UseSingleSelectionCalendarProps | UseMultiSelectionCalendarProps | UseRangeSelectionCalendarProps | UseOffsetSelectionCalendarProps;
37
- export declare function isRangeOrOffsetSelectionValue(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
38
- export declare function isRangeOrOffsetSelectionWithStartDate(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
39
- export declare function useSelectionCalendar(props: useSelectionCalendarProps): {
40
- state: {
41
- selectedDate: CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | RangeSelectionValueType | OffsetSelectionValueType | MultiSelectionValueType | null | undefined;
42
- hoveredDate: CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
43
- };
44
- helpers: {
45
- setSelectedDate: (event: SyntheticEvent<HTMLButtonElement>, newSelectedDate: DateValue) => void;
46
- isSelected: (date: DateValue) => boolean;
47
- setHoveredDate: (event: SyntheticEvent, date: DateValue | null) => void;
48
- isHovered: (date: DateValue) => boolean;
49
- isSelectedSpan: (date: DateValue) => boolean;
50
- isHoveredSpan: (date: DateValue) => boolean;
51
- isSelectedStart: (date: DateValue) => boolean;
52
- isSelectedEnd: (date: DateValue) => boolean;
53
- isHoveredOffset: (date: DateValue) => boolean;
54
- };
55
- };
56
- export declare function useSelectionDay({ date }: {
57
- date: DateValue;
58
- }): {
59
- handleClick: MouseEventHandler<HTMLButtonElement>;
60
- handleKeyDown: KeyboardEventHandler<HTMLButtonElement>;
61
- handleMouseOver: MouseEventHandler<HTMLButtonElement>;
62
- handleMouseLeave: MouseEventHandler<HTMLButtonElement>;
63
- status: {
64
- selected: boolean;
65
- selectedSpan: boolean;
66
- hoveredSpan: boolean;
67
- selectedStart: boolean;
68
- selectedEnd: boolean;
69
- hovered: boolean;
70
- hoveredOffset: boolean;
71
- };
72
- dayProps: {
73
- className: string;
74
- "aria-pressed": string | undefined;
75
- "aria-disabled": string | undefined;
76
- };
77
- };
78
- export {};
@@ -1,60 +0,0 @@
1
- import { type ChangeEvent, type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type RefObject, type SyntheticEvent } from "react";
2
- import { type DateValue } from "@internationalized/date";
3
- import { type RangeSelectionValueType, type SingleSelectionValueType } from "../calendar";
4
- export interface DateInputProps<SelectionVariantType> extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "placeholder"> {
5
- ariaLabel?: string;
6
- /**
7
- * The marker to use in an empty read only DateInput.
8
- * Use `''` to disable this feature. Defaults to '—'.
9
- */
10
- emptyReadOnlyMarker?: string;
11
- /**
12
- * End adornment component
13
- */
14
- endAdornment?: ReactNode;
15
- /**
16
- * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes) applied to the `input` elements.
17
- */
18
- inputProps?: InputHTMLAttributes<HTMLInputElement>;
19
- /**
20
- * If `true`, the component is read only.
21
- */
22
- readOnly?: boolean;
23
- /**
24
- * Validation status.
25
- */
26
- validationStatus?: "error" | "warning" | "success";
27
- /**
28
- * Styling variant. Defaults to "primary".
29
- */
30
- variant?: "primary" | "secondary";
31
- /**
32
- * Styling variant with full border. Defaults to false
33
- */
34
- bordered?: boolean;
35
- /**
36
- * Function to format the input value.
37
- */
38
- dateFormatter?: (input: DateValue | undefined) => string;
39
- /**
40
- * Reference for the startInput;
41
- */
42
- startInputRef?: RefObject<HTMLInputElement>;
43
- /**
44
- * Reference for the endInput;
45
- */
46
- endInputRef?: RefObject<HTMLInputElement>;
47
- /**
48
- * Selection variant. Defaults to single select.
49
- */
50
- selectionVariant?: "default" | "range";
51
- /**
52
- * Callback fired when the selected date change.
53
- */
54
- onSelectionChange?: (event: SyntheticEvent, selectedDate?: SelectionVariantType) => void;
55
- /**
56
- * Callback fired when the input value change.
57
- */
58
- onChange?: SelectionVariantType extends SingleSelectionValueType ? (event: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => void : (event: ChangeEvent<HTMLInputElement>, startDateInputValue?: string, endDateInputValue?: string) => void;
59
- }
60
- export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,10 +0,0 @@
1
- import { type DateValue } from "@internationalized/date";
2
- import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
3
- import { type CalendarProps, type RangeSelectionValueType } from "../calendar";
4
- export interface DatePickerPanelProps<SelectionVariantType> extends ComponentPropsWithoutRef<"div"> {
5
- onSelect?: (event: SyntheticEvent, selectedDate?: SelectionVariantType) => void;
6
- helperText?: string;
7
- visibleMonths?: 1 | 2;
8
- CalendarProps?: Partial<Omit<CalendarProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange">>;
9
- }
10
- export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,11 +0,0 @@
1
- import type { CSSProperties } from "react";
2
- export interface SliderHandleProps {
3
- min: number;
4
- max: number;
5
- value: number;
6
- index: number;
7
- disabled: boolean;
8
- valueLength: number;
9
- style: CSSProperties;
10
- }
11
- export declare function SliderHandle(props: SliderHandleProps): JSX.Element;
@@ -1,7 +0,0 @@
1
- import type { SliderMark } from "./SliderRailMarks";
2
- export interface SliderMarkLabelsProps {
3
- min: number;
4
- max: number;
5
- marks: SliderMark[];
6
- }
7
- export declare function SliderMarkLabels(props: SliderMarkLabelsProps): import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export declare function SliderRail(): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +0,0 @@
1
- import { type ReactNode } from "react";
2
- export interface LabeledMark {
3
- value: number;
4
- label: ReactNode;
5
- }
6
- export declare type SliderMark = number | LabeledMark;
7
- export interface SliderRailMarksProps {
8
- min: number;
9
- max: number;
10
- marks: SliderMark[];
11
- }
12
- export declare function SliderRailMarks(props: SliderRailMarksProps): import("react/jsx-runtime").JSX.Element;
@@ -1,10 +0,0 @@
1
- import type { CSSProperties } from "react";
2
- import type { SliderValue } from "../types";
3
- import type { SliderMark } from "./SliderRailMarks";
4
- export declare function createTrackStyle(min: number, max: number, value: SliderValue): CSSProperties;
5
- export declare function createHandleStyles(count: number): {
6
- gridColumnStart: string;
7
- }[];
8
- export declare function createSliderRailMarksStyle(min: number, max: number, marks: SliderMark[]): CSSProperties;
9
- export declare function createSliderMarkLabelsStyle(min: number, max: number, marks: SliderMark[]): CSSProperties;
10
- export declare function createSliderMarkLabelStyles(marks: SliderMark[]): CSSProperties[];
@@ -1,4 +0,0 @@
1
- import type { KeyboardEvent } from "react";
2
- import type { SliderChangeHandler, SliderValue } from "../types";
3
- import { type UpdateValueItem } from "./utils";
4
- export declare function useSliderKeyDown(value: SliderValue, min: number, max: number, pageStep: number, step: number, updateValueItem: UpdateValueItem, setValue: SliderChangeHandler, onChange?: SliderChangeHandler): (event: KeyboardEvent) => void;
@@ -1,4 +0,0 @@
1
- import { type MouseEvent as ReactMouseEvent, type RefObject } from "react";
2
- import type { SliderChangeHandler, SliderValue } from "../types";
3
- import { type UpdateValueItem } from "./utils";
4
- export declare function useSliderMouseDown(trackRef: RefObject<HTMLDivElement>, value: SliderValue, min: number, max: number, step: number, updateValueItem: UpdateValueItem, setValue: SliderChangeHandler, onChange?: SliderChangeHandler): (event: ReactMouseEvent) => void;