@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.
- package/CHANGELOG.md +53 -0
- package/css/salt-lab.css +192 -302
- package/dist-cjs/app-header/AppHeader.css.js +1 -1
- package/dist-cjs/calendar/CalendarWeekHeader.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-cjs/color-chooser/ColorChooser.css.js +1 -1
- package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
- package/dist-cjs/color-chooser/HexInput.css.js +1 -1
- package/dist-cjs/color-chooser/RGBAInput.css.js +1 -1
- package/dist-cjs/color-chooser/Swatch.css.js +1 -1
- package/dist-cjs/combo-box/useCombobox.js.map +1 -1
- package/dist-cjs/common-hooks/selectionTypes.js.map +1 -1
- package/dist-cjs/common-hooks/useCollapsibleGroups.js.map +1 -1
- package/dist-cjs/common-hooks/useKeyboardNavigation.js.map +1 -1
- package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-picker/DatePickerOverlay.css.js +1 -1
- package/dist-cjs/date-picker/DatePickerPanel.css.js +1 -1
- package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-cjs/form-field-legacy/FormLabel.css.js +1 -1
- package/dist-cjs/index.js +0 -8
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
- package/dist-cjs/list/List.css.js +1 -1
- package/dist-cjs/list/ListItem.css.js +1 -1
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-cjs/list-deprecated/List.css.js +1 -1
- package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +1 -1
- package/dist-cjs/list-next/ListNext.css.js +1 -1
- package/dist-cjs/logo/LogoSeparator.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.js +146 -79
- package/dist-cjs/number-input/NumberInput.js.map +1 -1
- package/dist-cjs/number-input/internal/useCaret.js +34 -0
- package/dist-cjs/number-input/internal/useCaret.js.map +1 -0
- package/dist-cjs/number-input/internal/utils.js +56 -14
- package/dist-cjs/number-input/internal/utils.js.map +1 -1
- package/dist-cjs/number-input/useNumberInput.js +34 -26
- package/dist-cjs/number-input/useNumberInput.js.map +1 -1
- package/dist-cjs/portal/Portal.js.map +1 -1
- package/dist-cjs/query-input/QueryInput.css.js +1 -1
- package/dist-cjs/responsive/OverflowReducer.js.map +1 -1
- package/dist-cjs/system-status/SystemStatus.css.js +1 -1
- package/dist-cjs/tabs/Tabstrip.css.js +1 -1
- package/dist-cjs/tabs/drag-drop/Draggable.css.js +1 -1
- package/dist-cjs/tabs-next/TabBar.css.js +1 -1
- package/dist-cjs/tabs-next/TabNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
- package/dist-cjs/tree/useTree.js.map +1 -1
- package/dist-es/app-header/AppHeader.css.js +1 -1
- package/dist-es/calendar/CalendarWeekHeader.css.js +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-es/color-chooser/ColorChooser.css.js +1 -1
- package/dist-es/color-chooser/ColorPicker.css.js +1 -1
- package/dist-es/color-chooser/HexInput.css.js +1 -1
- package/dist-es/color-chooser/RGBAInput.css.js +1 -1
- package/dist-es/color-chooser/Swatch.css.js +1 -1
- package/dist-es/combo-box/useCombobox.js.map +1 -1
- package/dist-es/common-hooks/selectionTypes.js.map +1 -1
- package/dist-es/common-hooks/useCollapsibleGroups.js.map +1 -1
- package/dist-es/common-hooks/useKeyboardNavigation.js.map +1 -1
- package/dist-es/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-picker/DatePickerOverlay.css.js +1 -1
- package/dist-es/date-picker/DatePickerPanel.css.js +1 -1
- package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-es/form-field-legacy/FormLabel.css.js +1 -1
- package/dist-es/index.js +0 -4
- package/dist-es/index.js.map +1 -1
- package/dist-es/input-legacy/InputLegacy.css.js +1 -1
- package/dist-es/list/List.css.js +1 -1
- package/dist-es/list/ListItem.css.js +1 -1
- package/dist-es/list/useList.js.map +1 -1
- package/dist-es/list-deprecated/List.css.js +1 -1
- package/dist-es/list-deprecated/ListItem.css.js +1 -1
- package/dist-es/list-next/ListItemNext.css.js +1 -1
- package/dist-es/list-next/ListNext.css.js +1 -1
- package/dist-es/logo/LogoSeparator.css.js +1 -1
- package/dist-es/number-input/NumberInput.css.js +1 -1
- package/dist-es/number-input/NumberInput.js +149 -82
- package/dist-es/number-input/NumberInput.js.map +1 -1
- package/dist-es/number-input/internal/useCaret.js +32 -0
- package/dist-es/number-input/internal/useCaret.js.map +1 -0
- package/dist-es/number-input/internal/utils.js +52 -10
- package/dist-es/number-input/internal/utils.js.map +1 -1
- package/dist-es/number-input/useNumberInput.js +35 -27
- package/dist-es/number-input/useNumberInput.js.map +1 -1
- package/dist-es/portal/Portal.js.map +1 -1
- package/dist-es/query-input/QueryInput.css.js +1 -1
- package/dist-es/responsive/OverflowReducer.js.map +1 -1
- package/dist-es/system-status/SystemStatus.css.js +1 -1
- package/dist-es/tabs/Tabstrip.css.js +1 -1
- package/dist-es/tabs/drag-drop/Draggable.css.js +1 -1
- package/dist-es/tabs-next/TabBar.css.js +1 -1
- package/dist-es/tabs-next/TabNext.css.js +1 -1
- package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
- package/dist-es/tree/useTree.js.map +1 -1
- package/dist-types/app-header/AppHeader.d.ts +1 -1
- package/dist-types/button-bar/ButtonBar.d.ts +3 -3
- package/dist-types/calendar/Calendar.d.ts +1 -1
- package/dist-types/calendar/CalendarWeekHeader.d.ts +1 -1
- package/dist-types/calendar/useCalendar.d.ts +1 -1
- package/dist-types/calendar/useCalendarDay.d.ts +2 -1
- package/dist-types/calendar/useCalendarSelection.d.ts +5 -5
- package/dist-types/cascading-menu/internal/CascadingMenuAction.d.ts +2 -2
- package/dist-types/cascading-menu/internal/menuPositioning.d.ts +1 -1
- package/dist-types/cascading-menu/internal/stateUtils.d.ts +2 -2
- package/dist-types/cascading-menu/internal/useClickAway.d.ts +1 -1
- package/dist-types/cascading-menu/internal/useRefsManager.d.ts +1 -1
- package/dist-types/cascading-menu/internal/useStateReducer.d.ts +2 -2
- package/dist-types/cascading-menu/stateChangeTypes.d.ts +1 -1
- package/dist-types/color-chooser/Color.d.ts +1 -1
- package/dist-types/color-chooser/DictTabs.d.ts +1 -1
- package/dist-types/color-chooser/color-utils.d.ts +1 -1
- package/dist-types/combo-box/ComboBox.d.ts +3 -3
- package/dist-types/combo-box/useCombobox.d.ts +1 -1
- package/dist-types/combo-box-deprecated/ComboBoxDeprecated.d.ts +3 -3
- package/dist-types/combo-box-deprecated/filterHelpers.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/DefaultComboBox.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts +1 -1
- package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +98 -97
- package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +214 -212
- package/dist-types/combo-box-deprecated/internal/usePopperStatus.d.ts +3 -3
- package/dist-types/common-hooks/collectionTypes.d.ts +3 -3
- package/dist-types/common-hooks/itemToString.d.ts +1 -1
- package/dist-types/common-hooks/navigationTypes.d.ts +4 -4
- package/dist-types/common-hooks/selectionTypes.d.ts +10 -10
- package/dist-types/common-hooks/useKeyboardNavigation.d.ts +1 -1
- package/dist-types/common-hooks/useSelection.d.ts +2 -2
- package/dist-types/common-hooks/utils/collection-item-utils.d.ts +2 -2
- package/dist-types/common-hooks/utils/filter-utils.d.ts +2 -2
- package/dist-types/contact-details/ContactAction.d.ts +1 -1
- package/dist-types/contact-details/ContactAvatar.d.ts +1 -1
- package/dist-types/contact-details/ContactDetails.d.ts +1 -1
- package/dist-types/date-input/DateInputRange.d.ts +2 -2
- package/dist-types/date-input/DateInputSingle.d.ts +1 -1
- package/dist-types/date-picker/DatePicker.d.ts +1 -1
- package/dist-types/date-picker/DatePickerActions.d.ts +1 -1
- package/dist-types/date-picker/DatePickerContext.d.ts +1 -1
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +1 -1
- package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts +1 -1
- package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts +1 -1
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +1 -1
- package/dist-types/date-picker/useDatePicker.d.ts +1 -1
- package/dist-types/deck-layout/DeckLayout.d.ts +3 -3
- package/dist-types/dropdown/Dropdown.d.ts +3 -3
- package/dist-types/dropdown/DropdownBase.d.ts +1 -1
- package/dist-types/dropdown/dropdownTypes.d.ts +1 -1
- package/dist-types/dropdown/useClickAway.d.ts +1 -1
- package/dist-types/dropdown/useDropdown.d.ts +1 -1
- package/dist-types/focus-manager/internal/findAllTabbableElements.d.ts +1 -1
- package/dist-types/form-field-legacy/FormFieldLegacy.d.ts +5 -5
- package/dist-types/form-field-legacy/NecessityIndicator.d.ts +1 -1
- package/dist-types/form-field-legacy/StatusIndicator.d.ts +1 -1
- package/dist-types/formatted-input/FormattedInput.d.ts +1 -1
- package/dist-types/index.d.ts +0 -1
- package/dist-types/input-legacy/StaticInputAdornment.d.ts +1 -1
- package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
- package/dist-types/list/List.d.ts +3 -3
- package/dist-types/list/ListItem.d.ts +1 -1
- package/dist-types/list/VirtualizedList.d.ts +3 -3
- package/dist-types/list/listTypes.d.ts +2 -2
- package/dist-types/list/useList.d.ts +1 -1
- package/dist-types/list/useVirtualization.d.ts +1 -1
- package/dist-types/list-deprecated/List.d.ts +2 -2
- package/dist-types/list-deprecated/ListBase.d.ts +2 -2
- package/dist-types/list-deprecated/ListItem.d.ts +1 -1
- package/dist-types/list-deprecated/ListItemContext.d.ts +1 -1
- package/dist-types/list-deprecated/ListProps.d.ts +5 -5
- package/dist-types/list-deprecated/itemToString.d.ts +1 -1
- package/dist-types/list-deprecated/useListItem.d.ts +2 -2
- package/dist-types/localization-provider/LocalizationProvider.d.ts +3 -3
- package/dist-types/logo/Logo.d.ts +1 -1
- package/dist-types/logo/LogoSeparator.d.ts +1 -1
- package/dist-types/number-input/NumberInput.d.ts +49 -27
- package/dist-types/number-input/internal/useCaret.d.ts +5 -0
- package/dist-types/number-input/internal/useInterval.d.ts +1 -1
- package/dist-types/number-input/internal/utils.d.ts +5 -5
- package/dist-types/number-input/useNumberInput.d.ts +11 -6
- package/dist-types/query-input/useQueryInput.d.ts +1 -1
- package/dist-types/responsive/OverflowReducer.d.ts +4 -4
- package/dist-types/responsive/overflowTypes.d.ts +20 -20
- package/dist-types/responsive/overflowUtils.d.ts +3 -3
- package/dist-types/responsive/useOverflowCollectionItems.d.ts +1 -1
- package/dist-types/responsive/useOverflowLayout.d.ts +1 -1
- package/dist-types/responsive/useResizeObserver.d.ts +2 -2
- package/dist-types/responsive/utils.d.ts +3 -3
- package/dist-types/tabs/Tab.d.ts +20 -19
- package/dist-types/tabs/Tabs.d.ts +1 -1
- package/dist-types/tabs/TabsTypes.d.ts +7 -7
- package/dist-types/tabs/drag-drop/Draggable.d.ts +2 -2
- package/dist-types/tabs/drag-drop/DropIndicator.d.ts +1 -1
- package/dist-types/tabs/drag-drop/drag-utils.d.ts +26 -22
- package/dist-types/tabs/drag-drop/dragDropTypes.d.ts +5 -5
- package/dist-types/tabs/drag-drop/useDragSpacers.d.ts +1 -1
- package/dist-types/tabs/useActivationIndicator.d.ts +1 -1
- package/dist-types/tabs/useEditableItem.d.ts +1 -1
- package/dist-types/tabs/useKeyboardNavigation.d.ts +1 -1
- package/dist-types/tabs/useSelection.d.ts +3 -3
- package/dist-types/tabs-next/hooks/useCollection.d.ts +1 -1
- package/dist-types/tokenized-input/TokenizedInput.d.ts +2 -2
- package/dist-types/tokenized-input/TokenizedInputBase.d.ts +5 -5
- package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
- package/dist-types/tokenized-input/internal/isPlainObject.d.ts +1 -1
- package/dist-types/tokenized-input/useTokenizedInput.d.ts +1 -1
- package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts +2 -2
- package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
- package/dist-types/toolbar/ToolbarButton.d.ts +3 -3
- package/dist-types/toolbar/ToolbarProps.d.ts +1 -1
- package/dist-types/toolbar/TooltrayProps.d.ts +2 -2
- package/dist-types/toolbar/internal/ToolbarButtonRefsContext.d.ts +1 -1
- package/dist-types/toolbar/internal/renderTrayTools.d.ts +1 -1
- package/dist-types/tree/useTree.d.ts +1 -1
- package/dist-types/utils/forwardCallbackProps.d.ts +1 -1
- package/dist-types/utils/isEmail.d.ts +1 -1
- package/dist-types/utils/useClickOutside.d.ts +1 -1
- package/dist-types/utils/useSlideSelection.d.ts +1 -1
- package/dist-types/window/ElectronWindow.d.ts +1 -1
- package/dist-types/window/WindowContext.d.ts +4 -4
- package/package.json +2 -2
- package/dist-cjs/carousel/Carousel.css.js +0 -6
- package/dist-cjs/carousel/Carousel.css.js.map +0 -1
- package/dist-cjs/carousel/Carousel.js +0 -62
- package/dist-cjs/carousel/Carousel.js.map +0 -1
- package/dist-cjs/carousel/CarouselContext.js +0 -62
- package/dist-cjs/carousel/CarouselContext.js.map +0 -1
- package/dist-cjs/carousel/CarouselControls.css.js +0 -6
- package/dist-cjs/carousel/CarouselControls.css.js.map +0 -1
- package/dist-cjs/carousel/CarouselControls.js +0 -122
- package/dist-cjs/carousel/CarouselControls.js.map +0 -1
- package/dist-cjs/carousel/CarouselReducer.js +0 -77
- package/dist-cjs/carousel/CarouselReducer.js.map +0 -1
- package/dist-cjs/carousel/CarouselSlide.css.js +0 -6
- package/dist-cjs/carousel/CarouselSlide.css.js.map +0 -1
- package/dist-cjs/carousel/CarouselSlide.js +0 -110
- package/dist-cjs/carousel/CarouselSlide.js.map +0 -1
- package/dist-cjs/carousel/CarouselSlider.css.js +0 -6
- package/dist-cjs/carousel/CarouselSlider.css.js.map +0 -1
- package/dist-cjs/carousel/CarouselSlider.js +0 -93
- package/dist-cjs/carousel/CarouselSlider.js.map +0 -1
- package/dist-es/carousel/Carousel.css.js +0 -4
- package/dist-es/carousel/Carousel.css.js.map +0 -1
- package/dist-es/carousel/Carousel.js +0 -60
- package/dist-es/carousel/Carousel.js.map +0 -1
- package/dist-es/carousel/CarouselContext.js +0 -58
- package/dist-es/carousel/CarouselContext.js.map +0 -1
- package/dist-es/carousel/CarouselControls.css.js +0 -4
- package/dist-es/carousel/CarouselControls.css.js.map +0 -1
- package/dist-es/carousel/CarouselControls.js +0 -120
- package/dist-es/carousel/CarouselControls.js.map +0 -1
- package/dist-es/carousel/CarouselReducer.js +0 -75
- package/dist-es/carousel/CarouselReducer.js.map +0 -1
- package/dist-es/carousel/CarouselSlide.css.js +0 -4
- package/dist-es/carousel/CarouselSlide.css.js.map +0 -1
- package/dist-es/carousel/CarouselSlide.js +0 -108
- package/dist-es/carousel/CarouselSlide.js.map +0 -1
- package/dist-es/carousel/CarouselSlider.css.js +0 -4
- package/dist-es/carousel/CarouselSlider.css.js.map +0 -1
- package/dist-es/carousel/CarouselSlider.js +0 -91
- package/dist-es/carousel/CarouselSlider.js.map +0 -1
- package/dist-types/carousel/Carousel.d.ts +0 -23
- package/dist-types/carousel/CarouselContext.d.ts +0 -11
- package/dist-types/carousel/CarouselControls.d.ts +0 -26
- package/dist-types/carousel/CarouselReducer.d.ts +0 -30
- package/dist-types/carousel/CarouselSlide.d.ts +0 -32
- package/dist-types/carousel/CarouselSlider.d.ts +0 -13
- 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
|