@salt-ds/lab 1.0.0-alpha.70 → 1.0.0-alpha.71

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 (280) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/css/salt-lab.css +192 -302
  3. package/dist-cjs/app-header/AppHeader.css.js +1 -1
  4. package/dist-cjs/calendar/CalendarWeekHeader.css.js +1 -1
  5. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  6. package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
  7. package/dist-cjs/cascading-menu/CascadingMenuItem.css.js +1 -1
  8. package/dist-cjs/color-chooser/ColorChooser.css.js +1 -1
  9. package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
  10. package/dist-cjs/color-chooser/HexInput.css.js +1 -1
  11. package/dist-cjs/color-chooser/RGBAInput.css.js +1 -1
  12. package/dist-cjs/color-chooser/Swatch.css.js +1 -1
  13. package/dist-cjs/combo-box/useCombobox.js.map +1 -1
  14. package/dist-cjs/common-hooks/selectionTypes.js.map +1 -1
  15. package/dist-cjs/common-hooks/useCollapsibleGroups.js.map +1 -1
  16. package/dist-cjs/common-hooks/useKeyboardNavigation.js.map +1 -1
  17. package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
  18. package/dist-cjs/date-input/DateInput.css.js +1 -1
  19. package/dist-cjs/date-picker/DatePickerOverlay.css.js +1 -1
  20. package/dist-cjs/date-picker/DatePickerPanel.css.js +1 -1
  21. package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
  22. package/dist-cjs/form-field-legacy/FormLabel.css.js +1 -1
  23. package/dist-cjs/index.js +0 -8
  24. package/dist-cjs/index.js.map +1 -1
  25. package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
  26. package/dist-cjs/list/List.css.js +1 -1
  27. package/dist-cjs/list/ListItem.css.js +1 -1
  28. package/dist-cjs/list/useList.js.map +1 -1
  29. package/dist-cjs/list-deprecated/List.css.js +1 -1
  30. package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
  31. package/dist-cjs/list-next/ListItemNext.css.js +1 -1
  32. package/dist-cjs/list-next/ListNext.css.js +1 -1
  33. package/dist-cjs/logo/LogoSeparator.css.js +1 -1
  34. package/dist-cjs/number-input/NumberInput.css.js +1 -1
  35. package/dist-cjs/number-input/NumberInput.js +146 -79
  36. package/dist-cjs/number-input/NumberInput.js.map +1 -1
  37. package/dist-cjs/number-input/internal/useCaret.js +34 -0
  38. package/dist-cjs/number-input/internal/useCaret.js.map +1 -0
  39. package/dist-cjs/number-input/internal/utils.js +56 -14
  40. package/dist-cjs/number-input/internal/utils.js.map +1 -1
  41. package/dist-cjs/number-input/useNumberInput.js +34 -26
  42. package/dist-cjs/number-input/useNumberInput.js.map +1 -1
  43. package/dist-cjs/portal/Portal.js.map +1 -1
  44. package/dist-cjs/query-input/QueryInput.css.js +1 -1
  45. package/dist-cjs/responsive/OverflowReducer.js.map +1 -1
  46. package/dist-cjs/system-status/SystemStatus.css.js +1 -1
  47. package/dist-cjs/tabs/Tabstrip.css.js +1 -1
  48. package/dist-cjs/tabs/drag-drop/Draggable.css.js +1 -1
  49. package/dist-cjs/tabs-next/TabBar.css.js +1 -1
  50. package/dist-cjs/tabs-next/TabNext.css.js +1 -1
  51. package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
  52. package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
  53. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
  54. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
  55. package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
  56. package/dist-cjs/tree/useTree.js.map +1 -1
  57. package/dist-es/app-header/AppHeader.css.js +1 -1
  58. package/dist-es/calendar/CalendarWeekHeader.css.js +1 -1
  59. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  60. package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
  61. package/dist-es/cascading-menu/CascadingMenuItem.css.js +1 -1
  62. package/dist-es/color-chooser/ColorChooser.css.js +1 -1
  63. package/dist-es/color-chooser/ColorPicker.css.js +1 -1
  64. package/dist-es/color-chooser/HexInput.css.js +1 -1
  65. package/dist-es/color-chooser/RGBAInput.css.js +1 -1
  66. package/dist-es/color-chooser/Swatch.css.js +1 -1
  67. package/dist-es/combo-box/useCombobox.js.map +1 -1
  68. package/dist-es/common-hooks/selectionTypes.js.map +1 -1
  69. package/dist-es/common-hooks/useCollapsibleGroups.js.map +1 -1
  70. package/dist-es/common-hooks/useKeyboardNavigation.js.map +1 -1
  71. package/dist-es/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
  72. package/dist-es/date-input/DateInput.css.js +1 -1
  73. package/dist-es/date-picker/DatePickerOverlay.css.js +1 -1
  74. package/dist-es/date-picker/DatePickerPanel.css.js +1 -1
  75. package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
  76. package/dist-es/form-field-legacy/FormLabel.css.js +1 -1
  77. package/dist-es/index.js +0 -4
  78. package/dist-es/index.js.map +1 -1
  79. package/dist-es/input-legacy/InputLegacy.css.js +1 -1
  80. package/dist-es/list/List.css.js +1 -1
  81. package/dist-es/list/ListItem.css.js +1 -1
  82. package/dist-es/list/useList.js.map +1 -1
  83. package/dist-es/list-deprecated/List.css.js +1 -1
  84. package/dist-es/list-deprecated/ListItem.css.js +1 -1
  85. package/dist-es/list-next/ListItemNext.css.js +1 -1
  86. package/dist-es/list-next/ListNext.css.js +1 -1
  87. package/dist-es/logo/LogoSeparator.css.js +1 -1
  88. package/dist-es/number-input/NumberInput.css.js +1 -1
  89. package/dist-es/number-input/NumberInput.js +149 -82
  90. package/dist-es/number-input/NumberInput.js.map +1 -1
  91. package/dist-es/number-input/internal/useCaret.js +32 -0
  92. package/dist-es/number-input/internal/useCaret.js.map +1 -0
  93. package/dist-es/number-input/internal/utils.js +52 -10
  94. package/dist-es/number-input/internal/utils.js.map +1 -1
  95. package/dist-es/number-input/useNumberInput.js +35 -27
  96. package/dist-es/number-input/useNumberInput.js.map +1 -1
  97. package/dist-es/portal/Portal.js.map +1 -1
  98. package/dist-es/query-input/QueryInput.css.js +1 -1
  99. package/dist-es/responsive/OverflowReducer.js.map +1 -1
  100. package/dist-es/system-status/SystemStatus.css.js +1 -1
  101. package/dist-es/tabs/Tabstrip.css.js +1 -1
  102. package/dist-es/tabs/drag-drop/Draggable.css.js +1 -1
  103. package/dist-es/tabs-next/TabBar.css.js +1 -1
  104. package/dist-es/tabs-next/TabNext.css.js +1 -1
  105. package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
  106. package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
  107. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
  108. package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
  109. package/dist-es/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
  110. package/dist-es/tree/useTree.js.map +1 -1
  111. package/dist-types/app-header/AppHeader.d.ts +1 -1
  112. package/dist-types/button-bar/ButtonBar.d.ts +3 -3
  113. package/dist-types/calendar/Calendar.d.ts +1 -1
  114. package/dist-types/calendar/CalendarWeekHeader.d.ts +1 -1
  115. package/dist-types/calendar/useCalendar.d.ts +1 -1
  116. package/dist-types/calendar/useCalendarDay.d.ts +2 -1
  117. package/dist-types/calendar/useCalendarSelection.d.ts +5 -5
  118. package/dist-types/cascading-menu/internal/CascadingMenuAction.d.ts +2 -2
  119. package/dist-types/cascading-menu/internal/menuPositioning.d.ts +1 -1
  120. package/dist-types/cascading-menu/internal/stateUtils.d.ts +2 -2
  121. package/dist-types/cascading-menu/internal/useClickAway.d.ts +1 -1
  122. package/dist-types/cascading-menu/internal/useRefsManager.d.ts +1 -1
  123. package/dist-types/cascading-menu/internal/useStateReducer.d.ts +2 -2
  124. package/dist-types/cascading-menu/stateChangeTypes.d.ts +1 -1
  125. package/dist-types/color-chooser/Color.d.ts +1 -1
  126. package/dist-types/color-chooser/DictTabs.d.ts +1 -1
  127. package/dist-types/color-chooser/color-utils.d.ts +1 -1
  128. package/dist-types/combo-box/ComboBox.d.ts +3 -3
  129. package/dist-types/combo-box/useCombobox.d.ts +1 -1
  130. package/dist-types/combo-box-deprecated/ComboBoxDeprecated.d.ts +3 -3
  131. package/dist-types/combo-box-deprecated/filterHelpers.d.ts +1 -1
  132. package/dist-types/combo-box-deprecated/internal/DefaultComboBox.d.ts +1 -1
  133. package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts +1 -1
  134. package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +98 -97
  135. package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +214 -212
  136. package/dist-types/combo-box-deprecated/internal/usePopperStatus.d.ts +3 -3
  137. package/dist-types/common-hooks/collectionTypes.d.ts +3 -3
  138. package/dist-types/common-hooks/itemToString.d.ts +1 -1
  139. package/dist-types/common-hooks/navigationTypes.d.ts +4 -4
  140. package/dist-types/common-hooks/selectionTypes.d.ts +10 -10
  141. package/dist-types/common-hooks/useKeyboardNavigation.d.ts +1 -1
  142. package/dist-types/common-hooks/useSelection.d.ts +2 -2
  143. package/dist-types/common-hooks/utils/collection-item-utils.d.ts +2 -2
  144. package/dist-types/common-hooks/utils/filter-utils.d.ts +2 -2
  145. package/dist-types/contact-details/ContactAction.d.ts +1 -1
  146. package/dist-types/contact-details/ContactAvatar.d.ts +1 -1
  147. package/dist-types/contact-details/ContactDetails.d.ts +1 -1
  148. package/dist-types/date-input/DateInputRange.d.ts +2 -2
  149. package/dist-types/date-input/DateInputSingle.d.ts +1 -1
  150. package/dist-types/date-picker/DatePicker.d.ts +1 -1
  151. package/dist-types/date-picker/DatePickerActions.d.ts +1 -1
  152. package/dist-types/date-picker/DatePickerContext.d.ts +1 -1
  153. package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +1 -1
  154. package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts +1 -1
  155. package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts +1 -1
  156. package/dist-types/date-picker/DatePickerSinglePanel.d.ts +1 -1
  157. package/dist-types/date-picker/useDatePicker.d.ts +1 -1
  158. package/dist-types/deck-layout/DeckLayout.d.ts +3 -3
  159. package/dist-types/dropdown/Dropdown.d.ts +3 -3
  160. package/dist-types/dropdown/DropdownBase.d.ts +1 -1
  161. package/dist-types/dropdown/dropdownTypes.d.ts +1 -1
  162. package/dist-types/dropdown/useClickAway.d.ts +1 -1
  163. package/dist-types/dropdown/useDropdown.d.ts +1 -1
  164. package/dist-types/focus-manager/internal/findAllTabbableElements.d.ts +1 -1
  165. package/dist-types/form-field-legacy/FormFieldLegacy.d.ts +5 -5
  166. package/dist-types/form-field-legacy/NecessityIndicator.d.ts +1 -1
  167. package/dist-types/form-field-legacy/StatusIndicator.d.ts +1 -1
  168. package/dist-types/formatted-input/FormattedInput.d.ts +1 -1
  169. package/dist-types/index.d.ts +0 -1
  170. package/dist-types/input-legacy/StaticInputAdornment.d.ts +1 -1
  171. package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
  172. package/dist-types/list/List.d.ts +3 -3
  173. package/dist-types/list/ListItem.d.ts +1 -1
  174. package/dist-types/list/VirtualizedList.d.ts +3 -3
  175. package/dist-types/list/listTypes.d.ts +2 -2
  176. package/dist-types/list/useList.d.ts +1 -1
  177. package/dist-types/list/useVirtualization.d.ts +1 -1
  178. package/dist-types/list-deprecated/List.d.ts +2 -2
  179. package/dist-types/list-deprecated/ListBase.d.ts +2 -2
  180. package/dist-types/list-deprecated/ListItem.d.ts +1 -1
  181. package/dist-types/list-deprecated/ListItemContext.d.ts +1 -1
  182. package/dist-types/list-deprecated/ListProps.d.ts +5 -5
  183. package/dist-types/list-deprecated/itemToString.d.ts +1 -1
  184. package/dist-types/list-deprecated/useListItem.d.ts +2 -2
  185. package/dist-types/localization-provider/LocalizationProvider.d.ts +3 -3
  186. package/dist-types/logo/Logo.d.ts +1 -1
  187. package/dist-types/logo/LogoSeparator.d.ts +1 -1
  188. package/dist-types/number-input/NumberInput.d.ts +49 -27
  189. package/dist-types/number-input/internal/useCaret.d.ts +5 -0
  190. package/dist-types/number-input/internal/useInterval.d.ts +1 -1
  191. package/dist-types/number-input/internal/utils.d.ts +5 -5
  192. package/dist-types/number-input/useNumberInput.d.ts +11 -6
  193. package/dist-types/query-input/useQueryInput.d.ts +1 -1
  194. package/dist-types/responsive/OverflowReducer.d.ts +4 -4
  195. package/dist-types/responsive/overflowTypes.d.ts +20 -20
  196. package/dist-types/responsive/overflowUtils.d.ts +3 -3
  197. package/dist-types/responsive/useOverflowCollectionItems.d.ts +1 -1
  198. package/dist-types/responsive/useOverflowLayout.d.ts +1 -1
  199. package/dist-types/responsive/useResizeObserver.d.ts +2 -2
  200. package/dist-types/responsive/utils.d.ts +3 -3
  201. package/dist-types/tabs/Tab.d.ts +20 -19
  202. package/dist-types/tabs/Tabs.d.ts +1 -1
  203. package/dist-types/tabs/TabsTypes.d.ts +7 -7
  204. package/dist-types/tabs/drag-drop/Draggable.d.ts +2 -2
  205. package/dist-types/tabs/drag-drop/DropIndicator.d.ts +1 -1
  206. package/dist-types/tabs/drag-drop/drag-utils.d.ts +26 -22
  207. package/dist-types/tabs/drag-drop/dragDropTypes.d.ts +5 -5
  208. package/dist-types/tabs/drag-drop/useDragSpacers.d.ts +1 -1
  209. package/dist-types/tabs/useActivationIndicator.d.ts +1 -1
  210. package/dist-types/tabs/useEditableItem.d.ts +1 -1
  211. package/dist-types/tabs/useKeyboardNavigation.d.ts +1 -1
  212. package/dist-types/tabs/useSelection.d.ts +3 -3
  213. package/dist-types/tabs-next/hooks/useCollection.d.ts +1 -1
  214. package/dist-types/tokenized-input/TokenizedInput.d.ts +2 -2
  215. package/dist-types/tokenized-input/TokenizedInputBase.d.ts +5 -5
  216. package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
  217. package/dist-types/tokenized-input/internal/isPlainObject.d.ts +1 -1
  218. package/dist-types/tokenized-input/useTokenizedInput.d.ts +1 -1
  219. package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts +2 -2
  220. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
  221. package/dist-types/toolbar/ToolbarButton.d.ts +3 -3
  222. package/dist-types/toolbar/ToolbarProps.d.ts +1 -1
  223. package/dist-types/toolbar/TooltrayProps.d.ts +2 -2
  224. package/dist-types/toolbar/internal/ToolbarButtonRefsContext.d.ts +1 -1
  225. package/dist-types/toolbar/internal/renderTrayTools.d.ts +1 -1
  226. package/dist-types/tree/useTree.d.ts +1 -1
  227. package/dist-types/utils/forwardCallbackProps.d.ts +1 -1
  228. package/dist-types/utils/isEmail.d.ts +1 -1
  229. package/dist-types/utils/useClickOutside.d.ts +1 -1
  230. package/dist-types/utils/useSlideSelection.d.ts +1 -1
  231. package/dist-types/window/ElectronWindow.d.ts +1 -1
  232. package/dist-types/window/WindowContext.d.ts +4 -4
  233. package/package.json +2 -2
  234. package/dist-cjs/carousel/Carousel.css.js +0 -6
  235. package/dist-cjs/carousel/Carousel.css.js.map +0 -1
  236. package/dist-cjs/carousel/Carousel.js +0 -62
  237. package/dist-cjs/carousel/Carousel.js.map +0 -1
  238. package/dist-cjs/carousel/CarouselContext.js +0 -62
  239. package/dist-cjs/carousel/CarouselContext.js.map +0 -1
  240. package/dist-cjs/carousel/CarouselControls.css.js +0 -6
  241. package/dist-cjs/carousel/CarouselControls.css.js.map +0 -1
  242. package/dist-cjs/carousel/CarouselControls.js +0 -122
  243. package/dist-cjs/carousel/CarouselControls.js.map +0 -1
  244. package/dist-cjs/carousel/CarouselReducer.js +0 -77
  245. package/dist-cjs/carousel/CarouselReducer.js.map +0 -1
  246. package/dist-cjs/carousel/CarouselSlide.css.js +0 -6
  247. package/dist-cjs/carousel/CarouselSlide.css.js.map +0 -1
  248. package/dist-cjs/carousel/CarouselSlide.js +0 -110
  249. package/dist-cjs/carousel/CarouselSlide.js.map +0 -1
  250. package/dist-cjs/carousel/CarouselSlider.css.js +0 -6
  251. package/dist-cjs/carousel/CarouselSlider.css.js.map +0 -1
  252. package/dist-cjs/carousel/CarouselSlider.js +0 -93
  253. package/dist-cjs/carousel/CarouselSlider.js.map +0 -1
  254. package/dist-es/carousel/Carousel.css.js +0 -4
  255. package/dist-es/carousel/Carousel.css.js.map +0 -1
  256. package/dist-es/carousel/Carousel.js +0 -60
  257. package/dist-es/carousel/Carousel.js.map +0 -1
  258. package/dist-es/carousel/CarouselContext.js +0 -58
  259. package/dist-es/carousel/CarouselContext.js.map +0 -1
  260. package/dist-es/carousel/CarouselControls.css.js +0 -4
  261. package/dist-es/carousel/CarouselControls.css.js.map +0 -1
  262. package/dist-es/carousel/CarouselControls.js +0 -120
  263. package/dist-es/carousel/CarouselControls.js.map +0 -1
  264. package/dist-es/carousel/CarouselReducer.js +0 -75
  265. package/dist-es/carousel/CarouselReducer.js.map +0 -1
  266. package/dist-es/carousel/CarouselSlide.css.js +0 -4
  267. package/dist-es/carousel/CarouselSlide.css.js.map +0 -1
  268. package/dist-es/carousel/CarouselSlide.js +0 -108
  269. package/dist-es/carousel/CarouselSlide.js.map +0 -1
  270. package/dist-es/carousel/CarouselSlider.css.js +0 -4
  271. package/dist-es/carousel/CarouselSlider.css.js.map +0 -1
  272. package/dist-es/carousel/CarouselSlider.js +0 -91
  273. package/dist-es/carousel/CarouselSlider.js.map +0 -1
  274. package/dist-types/carousel/Carousel.d.ts +0 -23
  275. package/dist-types/carousel/CarouselContext.d.ts +0 -11
  276. package/dist-types/carousel/CarouselControls.d.ts +0 -26
  277. package/dist-types/carousel/CarouselReducer.d.ts +0 -30
  278. package/dist-types/carousel/CarouselSlide.d.ts +0 -32
  279. package/dist-types/carousel/CarouselSlider.d.ts +0 -13
  280. package/dist-types/carousel/index.d.ts +0 -4
@@ -1,77 +0,0 @@
1
- 'use strict';
2
-
3
- function carouselReducer(state, action) {
4
- switch (action.type) {
5
- case "register": {
6
- const { slides } = state;
7
- const [id, { element, slideDescription }] = action.payload;
8
- const newSlides = new Map(slides);
9
- newSlides.set(id, { element, slideDescription });
10
- return {
11
- ...state,
12
- slides: newSlides
13
- };
14
- }
15
- case "unregister": {
16
- const { slides } = state;
17
- const id = action.payload;
18
- if (!slides.has(id)) {
19
- return state;
20
- }
21
- const newSlides = new Map(slides);
22
- newSlides.delete(id);
23
- return {
24
- ...state,
25
- slides: newSlides
26
- };
27
- }
28
- // moves the first visible item
29
- case "move": {
30
- const { slides } = state;
31
- const id = action.payload;
32
- if (!slides.has(id)) {
33
- return state;
34
- }
35
- const slideIds = [...slides.keys()];
36
- const index = slideIds.indexOf(id || slideIds[0]);
37
- return {
38
- ...state,
39
- activeSlideIndex: index
40
- };
41
- }
42
- case "moveToIndex": {
43
- const { slides } = state;
44
- const index = action.payload;
45
- if (index === -1 || index > slides.size) {
46
- return state;
47
- }
48
- return {
49
- ...state,
50
- focusedSlideIndex: index
51
- };
52
- }
53
- case "updateSlideCount": {
54
- const visibleSlides = action.payload;
55
- return { ...state, visibleSlides };
56
- }
57
- case "scroll": {
58
- const id = action.payload;
59
- const { slides } = state;
60
- const focusedSlideIndex = [...slides.keys()].indexOf(id);
61
- if (focusedSlideIndex === -1) {
62
- return state;
63
- }
64
- return {
65
- ...state,
66
- focusedSlideIndex
67
- };
68
- }
69
- default: {
70
- const exhaustiveCheck = action;
71
- throw new Error(`Action of type ${exhaustiveCheck} does not exist`);
72
- }
73
- }
74
- }
75
-
76
- exports.carouselReducer = carouselReducer;
77
- //# sourceMappingURL=CarouselReducer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselReducer.js","sources":["../src/carousel/CarouselReducer.ts"],"sourcesContent":["import type { Dispatch } from \"react\";\n\nimport type { CarouselSlideId, CarouselSlideMeta } from \"./CarouselSlide\";\n\nexport interface CarouselReducerState {\n slides: Map<CarouselSlideId, CarouselSlideMeta>;\n activeSlideIndex: number;\n visibleSlides: number;\n focusedSlideIndex: number;\n carouselId?: string;\n}\nexport type CarouselReducerAction =\n | { type: \"register\"; payload: [CarouselSlideId, CarouselSlideMeta] }\n | { type: \"unregister\"; payload: CarouselSlideId }\n | { type: \"updateSlideCount\"; payload: number }\n | { type: \"move\"; payload: CarouselSlideId }\n | { type: \"moveToIndex\"; payload: number }\n | { type: \"scroll\"; payload: CarouselSlideId };\n\nexport type CarouselReducerDispatch = Dispatch<CarouselReducerAction>;\n\nexport function carouselReducer(\n state: CarouselReducerState,\n action: CarouselReducerAction,\n) {\n switch (action.type) {\n case \"register\": {\n const { slides } = state;\n const [id, { element, slideDescription }] = action.payload;\n const newSlides = new Map(slides);\n newSlides.set(id, { element, slideDescription });\n return {\n ...state,\n slides: newSlides,\n };\n }\n case \"unregister\": {\n const { slides } = state;\n const id = action.payload;\n if (!slides.has(id)) {\n return state;\n }\n const newSlides = new Map(slides);\n newSlides.delete(id);\n return {\n ...state,\n slides: newSlides,\n };\n }\n // moves the first visible item\n case \"move\": {\n const { slides } = state;\n const id = action.payload;\n if (!slides.has(id)) {\n return state;\n }\n const slideIds = [...slides.keys()];\n const index = slideIds.indexOf(id || slideIds[0]);\n return {\n ...state,\n activeSlideIndex: index,\n };\n }\n case \"moveToIndex\": {\n const { slides } = state;\n\n const index = action.payload;\n\n if (index === -1 || index > slides.size) {\n return state;\n }\n\n return {\n ...state,\n focusedSlideIndex: index,\n };\n }\n case \"updateSlideCount\": {\n const visibleSlides = action.payload;\n\n return { ...state, visibleSlides: visibleSlides };\n }\n\n case \"scroll\": {\n const id = action.payload;\n const { slides } = state;\n\n const focusedSlideIndex = [...slides.keys()].indexOf(id);\n\n if (focusedSlideIndex === -1) {\n return state;\n }\n\n return {\n ...state,\n focusedSlideIndex,\n };\n }\n default: {\n const exhaustiveCheck: never = action;\n throw new Error(`Action of type ${exhaustiveCheck} does not exist`);\n }\n }\n}\n"],"names":[],"mappings":";;AAqBgB,SAAA,eAAA,CACd,OACA,MACA,EAAA;AACA,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,UAAY,EAAA;AACf,MAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,MAAA,MAAM,CAAC,EAAI,EAAA,EAAE,SAAS,gBAAiB,EAAC,IAAI,MAAO,CAAA,OAAA;AACnD,MAAM,MAAA,SAAA,GAAY,IAAI,GAAA,CAAI,MAAM,CAAA;AAChC,MAAA,SAAA,CAAU,GAAI,CAAA,EAAA,EAAI,EAAE,OAAA,EAAS,kBAAkB,CAAA;AAC/C,MAAO,OAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,MAAQ,EAAA;AAAA,OACV;AAAA;AACF,IACA,KAAK,YAAc,EAAA;AACjB,MAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,MAAA,MAAM,KAAK,MAAO,CAAA,OAAA;AAClB,MAAA,IAAI,CAAC,MAAA,CAAO,GAAI,CAAA,EAAE,CAAG,EAAA;AACnB,QAAO,OAAA,KAAA;AAAA;AAET,MAAM,MAAA,SAAA,GAAY,IAAI,GAAA,CAAI,MAAM,CAAA;AAChC,MAAA,SAAA,CAAU,OAAO,EAAE,CAAA;AACnB,MAAO,OAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,MAAQ,EAAA;AAAA,OACV;AAAA;AACF;AAAA,IAEA,KAAK,MAAQ,EAAA;AACX,MAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,MAAA,MAAM,KAAK,MAAO,CAAA,OAAA;AAClB,MAAA,IAAI,CAAC,MAAA,CAAO,GAAI,CAAA,EAAE,CAAG,EAAA;AACnB,QAAO,OAAA,KAAA;AAAA;AAET,MAAA,MAAM,QAAW,GAAA,CAAC,GAAG,MAAA,CAAO,MAAM,CAAA;AAClC,MAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAQ,EAAM,IAAA,QAAA,CAAS,CAAC,CAAC,CAAA;AAChD,MAAO,OAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,gBAAkB,EAAA;AAAA,OACpB;AAAA;AACF,IACA,KAAK,aAAe,EAAA;AAClB,MAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AAEnB,MAAA,MAAM,QAAQ,MAAO,CAAA,OAAA;AAErB,MAAA,IAAI,KAAU,KAAA,EAAA,IAAM,KAAQ,GAAA,MAAA,CAAO,IAAM,EAAA;AACvC,QAAO,OAAA,KAAA;AAAA;AAGT,MAAO,OAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,iBAAmB,EAAA;AAAA,OACrB;AAAA;AACF,IACA,KAAK,kBAAoB,EAAA;AACvB,MAAA,MAAM,gBAAgB,MAAO,CAAA,OAAA;AAE7B,MAAO,OAAA,EAAE,GAAG,KAAA,EAAO,aAA6B,EAAA;AAAA;AAClD,IAEA,KAAK,QAAU,EAAA;AACb,MAAA,MAAM,KAAK,MAAO,CAAA,OAAA;AAClB,MAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AAEnB,MAAM,MAAA,iBAAA,GAAoB,CAAC,GAAG,MAAA,CAAO,MAAM,CAAA,CAAE,QAAQ,EAAE,CAAA;AAEvD,MAAA,IAAI,sBAAsB,EAAI,EAAA;AAC5B,QAAO,OAAA,KAAA;AAAA;AAGT,MAAO,OAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH;AAAA,OACF;AAAA;AACF,IACA,SAAS;AACP,MAAA,MAAM,eAAyB,GAAA,MAAA;AAC/B,MAAA,MAAM,IAAI,KAAA,CAAM,CAAkB,eAAA,EAAA,eAAe,CAAiB,eAAA,CAAA,CAAA;AAAA;AACpE;AAEJ;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltCarouselSlide {\n scroll-snap-align: start;\n display: flex;\n flex-direction: column;\n flex: 0 0 auto;\n box-sizing: border-box;\n width: var(--carousel-slide-width, 100%);\n gap: var(--salt-spacing-200);\n}\n.saltCarouselSlide:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCarouselSlide-actions {\n display: none;\n}\n\n.saltCarouselSlide-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n\n.saltCarouselSlide-actions.saltCarouselSlide-visible {\n display: flex;\n}\n.saltCarouselSlide-container {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n gap: var(--salt-spacing-200);\n padding-left: var(--salt-spacing-25);\n padding-bottom: var(--salt-spacing-25);\n flex-grow: 1;\n}\n.saltCarouselSlide-content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: var(--salt-spacing-100);\n}\n.saltCarouselSlide-card {\n padding: var(--salt-spacing-200);\n padding-top: 0;\n}\n.saltCarouselSlide-content h2,\n.saltCarouselSlide-content h3 {\n margin: 0;\n}\n.saltCarouselSlide-bordered {\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n border-radius: var(--salt-palette-corner, 0);\n overflow: hidden;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=CarouselSlide.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselSlide.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,110 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var styles = require('@salt-ds/styles');
6
- var window = require('@salt-ds/window');
7
- var clsx = require('clsx');
8
- var react = require('react');
9
- var CarouselContext = require('./CarouselContext.js');
10
- var CarouselSlide$1 = require('./CarouselSlide.css.js');
11
-
12
- const withBaseName = core.makePrefixer("saltCarouselSlide");
13
- const CarouselSlide = react.forwardRef(
14
- function CarouselSlide2({
15
- actions,
16
- appearance,
17
- media,
18
- header,
19
- children,
20
- "aria-labelledby": ariaLabelledBy,
21
- style,
22
- id: idProp,
23
- ...rest
24
- }, refProp) {
25
- const targetWindow = window.useWindow();
26
- styles.useComponentCssInjection({
27
- testId: "salt-carousel-slide",
28
- css: CarouselSlide$1,
29
- window: targetWindow
30
- });
31
- const dispatch = react.useContext(CarouselContext.CarouselDispatchContext);
32
- const { slides, visibleSlides, activeSlideIndex } = react.useContext(CarouselContext.CarouselStateContext);
33
- const slideRef = react.useRef(null);
34
- const headerRef = react.useRef(null);
35
- const id = core.useIdMemo(idProp);
36
- const announcerId = core.useId();
37
- const slideCount = slides.size;
38
- react.useEffect(() => {
39
- var _a;
40
- if (!slideRef.current) return;
41
- dispatch({
42
- type: "register",
43
- payload: [
44
- id,
45
- {
46
- element: slideRef.current,
47
- slideDescription: (_a = headerRef == null ? void 0 : headerRef.current) == null ? void 0 : _a.innerText
48
- }
49
- ]
50
- });
51
- return () => dispatch({ type: "unregister", payload: id });
52
- }, [dispatch, id]);
53
- const SlideStyles = {
54
- "--carousel-slide-width": visibleSlides > 1 ? `calc((100% / ${visibleSlides}) - var(--salt-spacing-200)/${visibleSlides})` : void 0,
55
- ...style
56
- };
57
- const ref = core.useForkRef(refProp, slideRef);
58
- const slideIds = [...slides.keys()];
59
- const index = slideIds.indexOf(id || slideIds[0]);
60
- const helperText = `${index + 1} of ${slideCount}`;
61
- const isVisible = index >= activeSlideIndex && index < activeSlideIndex + visibleSlides;
62
- return /* @__PURE__ */ jsxRuntime.jsxs(
63
- "div",
64
- {
65
- role: "group",
66
- "aria-roledescription": "slide",
67
- "aria-labelledby": clsx.clsx(ariaLabelledBy, announcerId),
68
- id,
69
- className: clsx.clsx(withBaseName(), {
70
- [withBaseName("bordered")]: appearance === "bordered"
71
- }),
72
- style: SlideStyles,
73
- tabIndex: isVisible ? 0 : -1,
74
- hidden: !isVisible,
75
- ...rest,
76
- ref,
77
- children: [
78
- media,
79
- children && /* @__PURE__ */ jsxRuntime.jsxs(
80
- "div",
81
- {
82
- className: clsx.clsx(withBaseName("container"), {
83
- [withBaseName("card")]: appearance === "bordered"
84
- }),
85
- children: [
86
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("content"), children: [
87
- isVisible && /* @__PURE__ */ jsxRuntime.jsx(
88
- "span",
89
- {
90
- id: announcerId,
91
- className: withBaseName("sr-only"),
92
- "aria-hidden": "true",
93
- children: helperText
94
- }
95
- ),
96
- /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, children: header }),
97
- /* @__PURE__ */ jsxRuntime.jsx("div", { children })
98
- ] }),
99
- isVisible && actions
100
- ]
101
- }
102
- )
103
- ]
104
- }
105
- );
106
- }
107
- );
108
-
109
- exports.CarouselSlide = CarouselSlide;
110
- //# sourceMappingURL=CarouselSlide.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselSlide.js","sources":["../src/carousel/CarouselSlide.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentProps,\n type ReactNode,\n forwardRef,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\nimport {\n CarouselDispatchContext,\n CarouselStateContext,\n} from \"./CarouselContext\";\nimport carouselSlideCss from \"./CarouselSlide.css\";\n\nexport type CarouselSlideId = string;\nexport type CarouselSlideElement = HTMLDivElement;\nexport type CarouselSlideMeta = {\n element: CarouselSlideElement;\n slideDescription?: string;\n};\nexport interface CarouselSlideProps extends ComponentProps<\"div\"> {\n /**\n * Actions to be displayed in the content footer.\n **/\n actions?: ReactNode;\n /**\n * Media content to be displayed inside the slide. This could include images, videos, etc., that are visually prominent.\n * It differs from children in that media is intended to be the main visual element of the slide.\n **/\n media?: ReactNode;\n /**\n * The appearance of the slide. Options are 'bordered', and 'transparent'.\n * 'transparent' is the default value.\n **/\n appearance?: \"bordered\" | \"transparent\";\n /**\n * Header content to be displayed at the top of the slide. This can be text or any other React node.\n **/\n header?: ReactNode;\n /**\n * Carousel slide id.\n */\n id?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlide\");\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n function CarouselSlide(\n {\n actions,\n appearance,\n media,\n header,\n children,\n \"aria-labelledby\": ariaLabelledBy,\n style,\n id: idProp,\n ...rest\n },\n refProp,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-slide\",\n css: carouselSlideCss,\n window: targetWindow,\n });\n const dispatch = useContext(CarouselDispatchContext);\n const { slides, visibleSlides, activeSlideIndex } =\n useContext(CarouselStateContext);\n\n const slideRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const id = useIdMemo(idProp);\n const announcerId = useId();\n const slideCount = slides.size;\n\n useEffect(() => {\n if (!slideRef.current) return;\n\n dispatch({\n type: \"register\",\n payload: [\n id,\n {\n element: slideRef.current,\n slideDescription: headerRef?.current?.innerText,\n },\n ],\n });\n return () => dispatch({ type: \"unregister\", payload: id });\n }, [dispatch, id]);\n\n const SlideStyles = {\n \"--carousel-slide-width\":\n visibleSlides > 1\n ? `calc((100% / ${visibleSlides}) - var(--salt-spacing-200)/${visibleSlides})`\n : undefined,\n ...style,\n };\n\n const ref = useForkRef(refProp, slideRef);\n const slideIds = [...slides.keys()];\n const index = slideIds.indexOf(id || slideIds[0]);\n const helperText = `${index + 1} of ${slideCount}`;\n const isVisible =\n index >= activeSlideIndex && index < activeSlideIndex + visibleSlides;\n\n return (\n <div\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-labelledby={clsx(ariaLabelledBy, announcerId)}\n id={id}\n className={clsx(withBaseName(), {\n [withBaseName(\"bordered\")]: appearance === \"bordered\",\n })}\n style={SlideStyles}\n tabIndex={isVisible ? 0 : -1}\n hidden={!isVisible}\n {...rest}\n ref={ref}\n >\n {media}\n {children && (\n <div\n className={clsx(withBaseName(\"container\"), {\n [withBaseName(\"card\")]: appearance === \"bordered\",\n })}\n >\n <div className={withBaseName(\"content\")}>\n {isVisible && (\n <span\n id={announcerId}\n className={withBaseName(\"sr-only\")}\n aria-hidden=\"true\"\n >\n {helperText}\n </span>\n )}\n <div ref={headerRef}>{header}</div>\n <div>{children}</div>\n </div>\n {isVisible && actions}\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlide","useWindow","useComponentCssInjection","carouselSlideCss","useContext","CarouselDispatchContext","CarouselStateContext","useRef","useIdMemo","useId","useEffect","useForkRef","jsxs","clsx","jsx"],"mappings":"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"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltCarouselSlider {\n display: flex;\n scroll-snap-type: x mandatory;\n overflow-x: auto;\n scroll-behavior: smooth;\n width: 100%;\n gap: var(--salt-spacing-100);\n grid-area: slider;\n}\n@supports (scrollbar-width: none) {\n .saltCarouselSlider {\n scrollbar-width: none;\n }\n}\n@supports not (scrollbar-width: none) {\n .saltCarouselSlider::-webkit-scrollbar {\n display: none;\n }\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=CarouselSlider.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselSlider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,93 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var styles = require('@salt-ds/styles');
6
- var window = require('@salt-ds/window');
7
- var react = require('react');
8
- var CarouselContext = require('./CarouselContext.js');
9
- var CarouselSlider$1 = require('./CarouselSlider.css.js');
10
-
11
- const withBaseName = core.makePrefixer("saltCarouselSlider");
12
- const CarouselSlider = react.forwardRef(
13
- function CarouselSlider2({ children, onKeyDown, onScroll, onSelectionChange, ...rest }, propRef) {
14
- const targetWindow = window.useWindow();
15
- styles.useComponentCssInjection({
16
- testId: "salt-carousel-slider",
17
- css: CarouselSlider$1,
18
- window: targetWindow
19
- });
20
- const containerRef = react.useRef(null);
21
- const hasRun = react.useRef(false);
22
- const { slides, activeSlideIndex, focusedSlideIndex, visibleSlides } = react.useContext(CarouselContext.CarouselStateContext);
23
- const dispatch = react.useContext(CarouselContext.CarouselDispatchContext);
24
- const slideIds = [...slides.keys()];
25
- const handleKeyDown = (event) => {
26
- var _a, _b;
27
- if (event.repeat) return;
28
- switch (event.key) {
29
- case "ArrowLeft": {
30
- const prevIndex = focusedSlideIndex && focusedSlideIndex > activeSlideIndex ? focusedSlideIndex - 1 : activeSlideIndex - 1;
31
- const prevId = slideIds[prevIndex] || null;
32
- if (!prevId) break;
33
- dispatch({ type: "scroll", payload: prevId });
34
- onSelectionChange == null ? void 0 : onSelectionChange(event, prevIndex);
35
- (_a = slides.get(prevId)) == null ? void 0 : _a.element.focus();
36
- break;
37
- }
38
- case "ArrowRight": {
39
- const nextIndex = activeSlideIndex + 1;
40
- const nextId = slideIds[nextIndex] || null;
41
- if (!nextId) break;
42
- dispatch({ type: "scroll", payload: nextId });
43
- onSelectionChange == null ? void 0 : onSelectionChange(event, nextIndex);
44
- (_b = slides.get(nextId)) == null ? void 0 : _b.element.focus();
45
- break;
46
- }
47
- }
48
- onKeyDown == null ? void 0 : onKeyDown(event);
49
- };
50
- const handleScroll = (event) => {
51
- const container = containerRef == null ? void 0 : containerRef.current;
52
- if (!container) return;
53
- const scrollLeft = container.scrollLeft;
54
- const slideWidth = container.offsetWidth / visibleSlides;
55
- const newIndex = Math.round(scrollLeft / slideWidth) || 0;
56
- if (newIndex !== activeSlideIndex) {
57
- dispatch({ type: "move", payload: slideIds[newIndex] });
58
- onSelectionChange == null ? void 0 : onSelectionChange(event, newIndex);
59
- }
60
- onScroll == null ? void 0 : onScroll(event);
61
- };
62
- react.useLayoutEffect(() => {
63
- const container = containerRef.current;
64
- if (!container) return;
65
- const scrollBehavior = hasRun.current ? "smooth" : "instant";
66
- const slideWidth = container.offsetWidth / visibleSlides;
67
- requestAnimationFrame(() => {
68
- container.scrollTo({
69
- left: focusedSlideIndex * slideWidth,
70
- // @ts-ignore ScrollBehavior typescript definition missing instant
71
- behavior: scrollBehavior
72
- });
73
- });
74
- hasRun.current = true;
75
- }, [focusedSlideIndex, visibleSlides]);
76
- const ref = core.useForkRef(propRef, containerRef);
77
- return /* @__PURE__ */ jsxRuntime.jsx(
78
- "div",
79
- {
80
- ref,
81
- className: withBaseName(),
82
- tabIndex: -1,
83
- onKeyDown: handleKeyDown,
84
- onScroll: handleScroll,
85
- ...rest,
86
- children
87
- }
88
- );
89
- }
90
- );
91
-
92
- exports.CarouselSlider = CarouselSlider;
93
- //# sourceMappingURL=CarouselSlider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselSlider.js","sources":["../src/carousel/CarouselSlider.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactElement,\n type SyntheticEvent,\n type UIEvent,\n forwardRef,\n useContext,\n useLayoutEffect,\n useRef,\n} from \"react\";\nimport {\n CarouselDispatchContext,\n CarouselStateContext,\n} from \"./CarouselContext\";\nimport type { CarouselSlideProps } from \"./CarouselSlide\";\nimport carouselSliderCss from \"./CarouselSlider.css\";\n\nexport interface CarouselSliderProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Collection of slides to render\n */\n children: Array<ReactElement<CarouselSlideProps>>;\n /**\n * Callback fired when the selected slide change.\n **/\n onSelectionChange?: (\n event: SyntheticEvent<HTMLDivElement>,\n index: number,\n ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlider\");\n\nexport const CarouselSlider = forwardRef<HTMLDivElement, CarouselSliderProps>(\n function CarouselSlider(\n { children, onKeyDown, onScroll, onSelectionChange, ...rest },\n propRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-slider\",\n css: carouselSliderCss,\n window: targetWindow,\n });\n const containerRef = useRef<HTMLDivElement>(null);\n const hasRun = useRef(false);\n const { slides, activeSlideIndex, focusedSlideIndex, visibleSlides } =\n useContext(CarouselStateContext);\n const dispatch = useContext(CarouselDispatchContext);\n const slideIds = [...slides.keys()];\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.repeat) return;\n switch (event.key) {\n case \"ArrowLeft\": {\n const prevIndex =\n focusedSlideIndex && focusedSlideIndex > activeSlideIndex\n ? focusedSlideIndex - 1\n : activeSlideIndex - 1;\n const prevId = slideIds[prevIndex] || null;\n\n if (!prevId) break;\n dispatch({ type: \"scroll\", payload: prevId });\n onSelectionChange?.(event, prevIndex);\n slides.get(prevId)?.element.focus();\n\n break;\n }\n case \"ArrowRight\": {\n const nextIndex = activeSlideIndex + 1;\n const nextId = slideIds[nextIndex] || null;\n\n if (!nextId) break;\n\n dispatch({ type: \"scroll\", payload: nextId });\n onSelectionChange?.(event, nextIndex);\n\n slides.get(nextId)?.element.focus();\n\n break;\n }\n }\n onKeyDown?.(event);\n };\n\n const handleScroll = (event: UIEvent<HTMLDivElement>) => {\n const container = containerRef?.current;\n if (!container) return;\n const scrollLeft = container.scrollLeft;\n const slideWidth = container.offsetWidth / visibleSlides;\n const newIndex = Math.round(scrollLeft / slideWidth) || 0;\n\n if (newIndex !== activeSlideIndex) {\n dispatch({ type: \"move\", payload: slideIds[newIndex] });\n onSelectionChange?.(event, newIndex);\n }\n onScroll?.(event);\n };\n\n useLayoutEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const scrollBehavior = hasRun.current ? \"smooth\" : \"instant\";\n const slideWidth = container.offsetWidth / visibleSlides;\n\n requestAnimationFrame(() => {\n container.scrollTo({\n left: focusedSlideIndex * slideWidth,\n // @ts-ignore ScrollBehavior typescript definition missing instant\n behavior: scrollBehavior,\n });\n });\n\n hasRun.current = true;\n }, [focusedSlideIndex, visibleSlides]);\n\n const ref = useForkRef(propRef, containerRef);\n return (\n <div\n ref={ref}\n className={withBaseName()}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n onScroll={handleScroll}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlider","useWindow","useComponentCssInjection","carouselSliderCss","useRef","useContext","CarouselStateContext","CarouselDispatchContext","useLayoutEffect","useForkRef","jsx"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltCarousel {\n display: grid;\n grid-row-gap: var(--salt-spacing-100);\n grid-template-areas: \"controls\" \"slider\";\n grid-template-rows: auto 1fr;\n}\n\n.saltCarousel.saltCarousel-bottom {\n grid-template-areas: \"slider\" \"controls\";\n grid-template-rows: 1fr auto;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=Carousel.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Carousel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,60 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useBreakpoint, resolveResponsiveValue, useId } from '@salt-ds/core';
3
- import { useComponentCssInjection } from '@salt-ds/styles';
4
- import { useWindow } from '@salt-ds/window';
5
- import { clsx } from 'clsx';
6
- import { forwardRef } from 'react';
7
- import css_248z from './Carousel.css.js';
8
- import { CarouselProvider } from './CarouselContext.js';
9
-
10
- const withBaseName = makePrefixer("saltCarousel");
11
- const Carousel = forwardRef(
12
- function Carousel2({
13
- defaultActiveSlideIndex = 0,
14
- activeSlideIndex,
15
- visibleSlides: visibleSlidesProp = 1,
16
- children,
17
- controlsPlacement = "top",
18
- id: idProp,
19
- ...rest
20
- }, ref) {
21
- const targetWindow = useWindow();
22
- useComponentCssInjection({
23
- testId: "salt-carousel",
24
- css: css_248z,
25
- window: targetWindow
26
- });
27
- const { matchedBreakpoints } = useBreakpoint();
28
- const visibleSlides = resolveResponsiveValue(
29
- visibleSlidesProp,
30
- matchedBreakpoints
31
- );
32
- const id = useId(idProp);
33
- return /* @__PURE__ */ jsx(
34
- CarouselProvider,
35
- {
36
- defaultActiveSlideIndex,
37
- activeSlideIndex,
38
- visibleSlides,
39
- id,
40
- children: /* @__PURE__ */ jsx(
41
- "section",
42
- {
43
- role: "region",
44
- className: clsx(withBaseName(), {
45
- [withBaseName(controlsPlacement)]: controlsPlacement === "bottom"
46
- }),
47
- "aria-roledescription": "carousel",
48
- id,
49
- ref,
50
- ...rest,
51
- children
52
- }
53
- )
54
- }
55
- );
56
- }
57
- );
58
-
59
- export { Carousel };
60
- //# sourceMappingURL=Carousel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import {\n type ResponsiveProp,\n makePrefixer,\n resolveResponsiveValue,\n useBreakpoint,\n useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport carouselCss from \"./Carousel.css\";\nimport { CarouselProvider } from \"./CarouselContext\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The initial Index enables you to select the active slide in the carousel.\n * Optional, default 0.\n **/\n defaultActiveSlideIndex?: number;\n /**\n * Controlled index of active slide in the carousel.\n **/\n activeSlideIndex?: number;\n /**\n * Set the placement of the CarouselControls relative to the CarouselSlider element. Defaults to `top`.\n */\n controlsPlacement?: \"top\" | \"bottom\";\n /**\n * Number of slides visible at a time.\n * Optional, default 1.\n **/\n visibleSlides?: ResponsiveProp<number>;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n function Carousel(\n {\n defaultActiveSlideIndex = 0,\n activeSlideIndex,\n visibleSlides: visibleSlidesProp = 1,\n children,\n controlsPlacement = \"top\",\n id: idProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel\",\n css: carouselCss,\n window: targetWindow,\n });\n const { matchedBreakpoints } = useBreakpoint();\n\n const visibleSlides = resolveResponsiveValue(\n visibleSlidesProp,\n matchedBreakpoints,\n );\n const id = useId(idProp);\n return (\n <CarouselProvider\n defaultActiveSlideIndex={defaultActiveSlideIndex}\n activeSlideIndex={activeSlideIndex}\n visibleSlides={visibleSlides}\n id={id}\n >\n <section\n role=\"region\"\n className={clsx(withBaseName(), {\n [withBaseName(controlsPlacement)]: controlsPlacement === \"bottom\",\n })}\n aria-roledescription=\"carousel\"\n id={id}\n ref={ref}\n {...rest}\n >\n {children}\n </section>\n </CarouselProvider>\n );\n },\n);\n"],"names":["Carousel","carouselCss"],"mappings":";;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAuBzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,uBAA0B,GAAA,CAAA;AAAA,IAC1B,gBAAA;AAAA,IACA,eAAe,iBAAoB,GAAA,CAAA;AAAA,IACnC,QAAA;AAAA,IACA,iBAAoB,GAAA,KAAA;AAAA,IACpB,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA;AAE7C,IAAA,MAAM,aAAgB,GAAA,sBAAA;AAAA,MACpB,iBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,uBAAA;AAAA,QACA,gBAAA;AAAA,QACA,aAAA;AAAA,QACA,EAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,cAC9B,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,iBAAsB,KAAA;AAAA,aAC1D,CAAA;AAAA,YACD,sBAAqB,EAAA,UAAA;AAAA,YACrB,EAAA;AAAA,YACA,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
@@ -1,58 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { createContext, useControlled } from '@salt-ds/core';
3
- import { useReducer, useEffect } from 'react';
4
- import { carouselReducer } from './CarouselReducer.js';
5
-
6
- const CarouselStateContext = createContext(
7
- "CarouselStateContext",
8
- {
9
- slides: /* @__PURE__ */ new Map(),
10
- activeSlideIndex: 0,
11
- visibleSlides: 1,
12
- focusedSlideIndex: 0,
13
- carouselId: void 0
14
- }
15
- );
16
- const CarouselDispatchContext = createContext(
17
- "CarouselDispatchContext",
18
- () => {
19
- return;
20
- }
21
- );
22
- function CarouselProvider({
23
- children,
24
- activeSlideIndex: activeSlideIndexProp,
25
- defaultActiveSlideIndex = 0,
26
- visibleSlides = 1,
27
- id
28
- }) {
29
- const [activeSlideIndex, setActiveSlideIndex] = useControlled({
30
- controlled: activeSlideIndexProp,
31
- default: defaultActiveSlideIndex,
32
- name: "Carousel",
33
- state: "activeSlideIndex"
34
- });
35
- const [state, dispatch] = useReducer(carouselReducer, {
36
- slides: /* @__PURE__ */ new Map(),
37
- focusedSlideIndex: activeSlideIndex,
38
- activeSlideIndex,
39
- visibleSlides,
40
- carouselId: id
41
- });
42
- useEffect(() => {
43
- dispatch({
44
- type: "updateSlideCount",
45
- payload: visibleSlides
46
- });
47
- }, [visibleSlides]);
48
- useEffect(() => {
49
- dispatch({
50
- type: "moveToIndex",
51
- payload: activeSlideIndex
52
- });
53
- }, [activeSlideIndex]);
54
- return /* @__PURE__ */ jsx(CarouselStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(CarouselDispatchContext.Provider, { value: dispatch, children }) });
55
- }
56
-
57
- export { CarouselDispatchContext, CarouselProvider, CarouselStateContext };
58
- //# sourceMappingURL=CarouselContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselContext.js","sources":["../src/carousel/CarouselContext.tsx"],"sourcesContent":["import { createContext, useControlled } from \"@salt-ds/core\";\nimport { type ReactNode, useEffect, useReducer } from \"react\";\nimport {\n type CarouselReducerDispatch,\n type CarouselReducerState,\n carouselReducer,\n} from \"./CarouselReducer\";\n\nexport const CarouselStateContext = createContext<CarouselReducerState>(\n \"CarouselStateContext\",\n {\n slides: new Map(),\n activeSlideIndex: 0,\n visibleSlides: 1,\n focusedSlideIndex: 0,\n carouselId: undefined,\n },\n);\nexport const CarouselDispatchContext = createContext<CarouselReducerDispatch>(\n \"CarouselDispatchContext\",\n () => {\n return;\n },\n);\n\nexport function CarouselProvider({\n children,\n activeSlideIndex: activeSlideIndexProp,\n defaultActiveSlideIndex = 0,\n visibleSlides = 1,\n id,\n}: {\n children: ReactNode;\n activeSlideIndex?: number;\n defaultActiveSlideIndex?: number;\n visibleSlides?: number;\n id?: string;\n}) {\n const [activeSlideIndex, setActiveSlideIndex] = useControlled({\n controlled: activeSlideIndexProp,\n default: defaultActiveSlideIndex,\n name: \"Carousel\",\n state: \"activeSlideIndex\",\n });\n const [state, dispatch] = useReducer(carouselReducer, {\n slides: new Map(),\n focusedSlideIndex: activeSlideIndex,\n activeSlideIndex,\n visibleSlides,\n carouselId: id,\n });\n\n useEffect(() => {\n dispatch({\n type: \"updateSlideCount\",\n payload: visibleSlides,\n });\n }, [visibleSlides]);\n\n useEffect(() => {\n dispatch({\n type: \"moveToIndex\",\n payload: activeSlideIndex,\n });\n }, [activeSlideIndex]);\n\n return (\n <CarouselStateContext.Provider value={state}>\n <CarouselDispatchContext.Provider value={dispatch}>\n {children}\n </CarouselDispatchContext.Provider>\n </CarouselStateContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;;AAQO,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAClC,sBAAA;AAAA,EACA;AAAA,IACE,MAAA,sBAAY,GAAI,EAAA;AAAA,IAChB,gBAAkB,EAAA,CAAA;AAAA,IAClB,aAAe,EAAA,CAAA;AAAA,IACf,iBAAmB,EAAA,CAAA;AAAA,IACnB,UAAY,EAAA;AAAA;AAEhB;AACO,MAAM,uBAA0B,GAAA,aAAA;AAAA,EACrC,yBAAA;AAAA,EACA,MAAM;AACJ,IAAA;AAAA;AAEJ;AAEO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,QAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,uBAA0B,GAAA,CAAA;AAAA,EAC1B,aAAgB,GAAA,CAAA;AAAA,EAChB;AACF,CAMG,EAAA;AACD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,aAAc,CAAA;AAAA,IAC5D,UAAY,EAAA,oBAAA;AAAA,IACZ,OAAS,EAAA,uBAAA;AAAA,IACT,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AACD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,WAAW,eAAiB,EAAA;AAAA,IACpD,MAAA,sBAAY,GAAI,EAAA;AAAA,IAChB,iBAAmB,EAAA,gBAAA;AAAA,IACnB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAY,EAAA;AAAA,GACb,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,kBAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,SAAA,CAAU,MAAM;AACd,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,aAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAErB,EAAA,uBACG,GAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,KAAO,EAAA,KAAA,EACpC,QAAC,kBAAA,GAAA,CAAA,uBAAA,CAAwB,QAAxB,EAAA,EAAiC,KAAO,EAAA,QAAA,EACtC,UACH,CACF,EAAA,CAAA;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltCarouselControls {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n grid-area: controls;\n}\n.saltCarouselControls-container {\n display: flex;\n flex-flow: wrap;\n align-items: center;\n gap: var(--salt-spacing-100);\n justify-content: space-between;\n}\n.saltCarouselControls-container:last-child {\n margin-left: auto;\n}\n.saltCarouselControls-container h2 {\n margin: 0;\n}\n\n.saltCarouselControls-sr-only {\n display: none;\n}\n.saltCarouselControls:focus-within .saltCarouselControls-sr-only {\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=CarouselControls.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CarouselControls.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,120 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useIcon, Button, Text } from '@salt-ds/core';
3
- import { useComponentCssInjection } from '@salt-ds/styles';
4
- import { useWindow } from '@salt-ds/window';
5
- import { forwardRef, useContext, useState, useRef } from 'react';
6
- import { CarouselStateContext, CarouselDispatchContext } from './CarouselContext.js';
7
- import css_248z from './CarouselControls.css.js';
8
-
9
- const withBaseName = makePrefixer("saltCarouselControls");
10
- const CarouselControls = forwardRef(function CarouselControls2({
11
- onPrevious,
12
- onNext,
13
- disabled,
14
- className,
15
- title,
16
- labelPlacement = "right",
17
- ...rest
18
- }, ref) {
19
- var _a;
20
- const targetWindow = useWindow();
21
- useComponentCssInjection({
22
- testId: "salt-carousel-controls",
23
- css: css_248z,
24
- window: targetWindow
25
- });
26
- const { slides, carouselId, activeSlideIndex, visibleSlides } = useContext(CarouselStateContext);
27
- const dispatch = useContext(CarouselDispatchContext);
28
- const slideCount = slides.size;
29
- const { NextIcon, PreviousIcon } = useIcon();
30
- const [isFocused, setIsFocused] = useState(false);
31
- function handleFocusCapture() {
32
- !isFocused && setIsFocused(true);
33
- }
34
- function handleBlurCapture() {
35
- isFocused && setIsFocused(false);
36
- }
37
- const prevButtonRef = useRef(null);
38
- const nextButtonRef = useRef(null);
39
- const slideIds = [...slides.keys()];
40
- const currentId = slideIds[activeSlideIndex] || null;
41
- const prevId = slideIds[activeSlideIndex - 1] || null;
42
- const nextId = slideIds[activeSlideIndex + 1] || null;
43
- const isOnFirstSlide = activeSlideIndex === 0;
44
- const isOnLastSlide = activeSlideIndex === slideCount - visibleSlides;
45
- const isAnnouncerOn = nextButtonRef.current === document.activeElement || prevButtonRef.current === document.activeElement;
46
- const currentSlideDescription = visibleSlides === 1 && currentId && ((_a = slides.get(currentId)) == null ? void 0 : _a.slideDescription) || void 0;
47
- const controlsLabel = slideCount >= 1 && /* @__PURE__ */ jsx(
48
- Text,
49
- {
50
- as: "span",
51
- "aria-live": isAnnouncerOn ? "polite" : void 0,
52
- "aria-atomic": "false",
53
- children: /* @__PURE__ */ jsxs("strong", { children: [
54
- `${activeSlideIndex + 1} ${visibleSlides > 1 && slideCount > 1 ? ` - ${activeSlideIndex + visibleSlides}` : ""} of
55
- ${slideCount}`,
56
- /* @__PURE__ */ jsx("span", { className: "saltCarouselControls-sr-only", children: currentSlideDescription })
57
- ] })
58
- }
59
- );
60
- function handlePrevClick(event) {
61
- if (!prevId) return;
62
- dispatch({ type: "scroll", payload: prevId });
63
- onPrevious == null ? void 0 : onPrevious(event, slideIds.indexOf(prevId));
64
- }
65
- function handleNextClick(event) {
66
- if (!nextId) return;
67
- dispatch({ type: "scroll", payload: nextId });
68
- onNext == null ? void 0 : onNext(event, slideIds.indexOf(nextId));
69
- }
70
- return /* @__PURE__ */ jsxs("div", { className: withBaseName("container"), ref, ...rest, children: [
71
- title,
72
- /* @__PURE__ */ jsxs(
73
- "div",
74
- {
75
- className: withBaseName(),
76
- ref,
77
- ...rest,
78
- onFocusCapture: handleFocusCapture,
79
- onBlurCapture: handleBlurCapture,
80
- children: [
81
- (labelPlacement === "left" || title) && controlsLabel,
82
- /* @__PURE__ */ jsx(
83
- Button,
84
- {
85
- ref: prevButtonRef,
86
- focusableWhenDisabled: true,
87
- appearance: "bordered",
88
- sentiment: "neutral",
89
- className: withBaseName("prev-button"),
90
- onClick: handlePrevClick,
91
- disabled: isOnFirstSlide || disabled,
92
- "aria-controls": carouselId,
93
- "aria-label": `Previous slide${visibleSlides > 1 ? "s" : ""}`,
94
- children: /* @__PURE__ */ jsx(PreviousIcon, { "aria-hidden": true })
95
- }
96
- ),
97
- /* @__PURE__ */ jsx(
98
- Button,
99
- {
100
- ref: nextButtonRef,
101
- focusableWhenDisabled: true,
102
- appearance: "bordered",
103
- sentiment: "neutral",
104
- className: withBaseName("next-button"),
105
- onClick: handleNextClick,
106
- disabled: isOnLastSlide || disabled,
107
- "aria-controls": carouselId,
108
- "aria-label": `Next slide${visibleSlides > 1 ? "s" : ""}`,
109
- children: /* @__PURE__ */ jsx(NextIcon, { "aria-hidden": true })
110
- }
111
- ),
112
- labelPlacement === "right" && !title && controlsLabel
113
- ]
114
- }
115
- )
116
- ] });
117
- });
118
-
119
- export { CarouselControls };
120
- //# sourceMappingURL=CarouselControls.js.map