@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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselControls.js","sources":["../src/carousel/CarouselControls.tsx"],"sourcesContent":["import { Button, Text, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n type HTMLAttributes,\n type MouseEvent,\n type ReactNode,\n type SyntheticEvent,\n forwardRef,\n useContext,\n useRef,\n useState,\n} from \"react\";\nimport {\n CarouselDispatchContext,\n CarouselStateContext,\n} from \"./CarouselContext\";\n\nimport carouselControlsCss from \"./CarouselControls.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselControls\");\n\nexport interface CarouselControlsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n /**\n * Callback when Back button is clicked.\n */\n onPrevious?: (\n event: SyntheticEvent<HTMLButtonElement>,\n index: number,\n ) => void;\n /**\n * Callback when Next button is clicked.\n */\n onNext?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;\n /**\n * Location of the label relative to the controls.\n *\n * Either 'left', or 'right'`.\n */\n labelPlacement?: \"left\" | \"right\";\n /**\n * If `true`, the carousel controls will be disabled.\n * **/\n disabled?: boolean;\n /**\n * The title of the carousel that accompanies the controls.\n */\n title?: ReactNode;\n}\n\nexport const CarouselControls = forwardRef<\n HTMLDivElement,\n CarouselControlsProps\n>(function CarouselControls(\n {\n onPrevious,\n onNext,\n disabled,\n className,\n title,\n labelPlacement = \"right\",\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-carousel-controls\",\n css: carouselControlsCss,\n window: targetWindow,\n });\n const { slides, carouselId, activeSlideIndex, visibleSlides } =\n useContext(CarouselStateContext);\n const dispatch = useContext(CarouselDispatchContext);\n\n const slideCount = slides.size;\n const { NextIcon, PreviousIcon } = useIcon();\n\n const [isFocused, setIsFocused] = useState(false);\n function handleFocusCapture() {\n !isFocused && setIsFocused(true);\n }\n function handleBlurCapture() {\n isFocused && setIsFocused(false);\n }\n\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const slideIds = [...slides.keys()];\n\n const currentId = slideIds[activeSlideIndex] || null;\n const prevId = slideIds[activeSlideIndex - 1] || null;\n const nextId = slideIds[activeSlideIndex + 1] || null;\n\n const isOnFirstSlide = activeSlideIndex === 0;\n const isOnLastSlide = activeSlideIndex === slideCount - visibleSlides;\n\n const isAnnouncerOn =\n nextButtonRef.current === document.activeElement ||\n prevButtonRef.current === document.activeElement;\n\n const currentSlideDescription =\n (visibleSlides === 1 &&\n currentId &&\n slides.get(currentId)?.slideDescription) ||\n undefined;\n\n const controlsLabel = slideCount >= 1 && (\n <Text\n as=\"span\"\n aria-live={isAnnouncerOn ? \"polite\" : undefined}\n aria-atomic=\"false\"\n >\n <strong>\n {`${activeSlideIndex + 1} ${visibleSlides > 1 && slideCount > 1 ? ` - ${activeSlideIndex + visibleSlides}` : \"\"} of\n ${slideCount}`}\n\n {\n <span className=\"saltCarouselControls-sr-only\">\n {currentSlideDescription}\n </span>\n }\n </strong>\n </Text>\n );\n\n function handlePrevClick(event: MouseEvent<HTMLButtonElement>) {\n if (!prevId) return;\n dispatch({ type: \"scroll\", payload: prevId });\n onPrevious?.(event, slideIds.indexOf(prevId));\n }\n\n function handleNextClick(event: MouseEvent<HTMLButtonElement>) {\n if (!nextId) return;\n dispatch({ type: \"scroll\", payload: nextId });\n onNext?.(event, slideIds.indexOf(nextId));\n }\n\n return (\n <div className={withBaseName(\"container\")} ref={ref} {...rest}>\n {title}\n <div\n className={withBaseName()}\n ref={ref}\n {...rest}\n onFocusCapture={handleFocusCapture}\n onBlurCapture={handleBlurCapture}\n >\n {(labelPlacement === \"left\" || title) && controlsLabel}\n <Button\n ref={prevButtonRef}\n focusableWhenDisabled\n appearance=\"bordered\"\n sentiment=\"neutral\"\n className={withBaseName(\"prev-button\")}\n onClick={handlePrevClick}\n disabled={isOnFirstSlide || disabled}\n aria-controls={carouselId}\n aria-label={`Previous slide${visibleSlides > 1 ? \"s\" : \"\"}`}\n >\n <PreviousIcon aria-hidden />\n </Button>\n <Button\n ref={nextButtonRef}\n focusableWhenDisabled\n appearance=\"bordered\"\n sentiment=\"neutral\"\n className={withBaseName(\"next-button\")}\n onClick={handleNextClick}\n disabled={isOnLastSlide || disabled}\n aria-controls={carouselId}\n aria-label={`Next slide${visibleSlides > 1 ? \"s\" : \"\"}`}\n >\n <NextIcon aria-hidden />\n </Button>\n {labelPlacement === \"right\" && !title && controlsLabel}\n </div>\n </div>\n );\n});\n"],"names":["CarouselControls","carouselControlsCss"],"mappings":"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"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
function carouselReducer(state, action) {
|
|
2
|
-
switch (action.type) {
|
|
3
|
-
case "register": {
|
|
4
|
-
const { slides } = state;
|
|
5
|
-
const [id, { element, slideDescription }] = action.payload;
|
|
6
|
-
const newSlides = new Map(slides);
|
|
7
|
-
newSlides.set(id, { element, slideDescription });
|
|
8
|
-
return {
|
|
9
|
-
...state,
|
|
10
|
-
slides: newSlides
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
case "unregister": {
|
|
14
|
-
const { slides } = state;
|
|
15
|
-
const id = action.payload;
|
|
16
|
-
if (!slides.has(id)) {
|
|
17
|
-
return state;
|
|
18
|
-
}
|
|
19
|
-
const newSlides = new Map(slides);
|
|
20
|
-
newSlides.delete(id);
|
|
21
|
-
return {
|
|
22
|
-
...state,
|
|
23
|
-
slides: newSlides
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
// moves the first visible item
|
|
27
|
-
case "move": {
|
|
28
|
-
const { slides } = state;
|
|
29
|
-
const id = action.payload;
|
|
30
|
-
if (!slides.has(id)) {
|
|
31
|
-
return state;
|
|
32
|
-
}
|
|
33
|
-
const slideIds = [...slides.keys()];
|
|
34
|
-
const index = slideIds.indexOf(id || slideIds[0]);
|
|
35
|
-
return {
|
|
36
|
-
...state,
|
|
37
|
-
activeSlideIndex: index
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
case "moveToIndex": {
|
|
41
|
-
const { slides } = state;
|
|
42
|
-
const index = action.payload;
|
|
43
|
-
if (index === -1 || index > slides.size) {
|
|
44
|
-
return state;
|
|
45
|
-
}
|
|
46
|
-
return {
|
|
47
|
-
...state,
|
|
48
|
-
focusedSlideIndex: index
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
case "updateSlideCount": {
|
|
52
|
-
const visibleSlides = action.payload;
|
|
53
|
-
return { ...state, visibleSlides };
|
|
54
|
-
}
|
|
55
|
-
case "scroll": {
|
|
56
|
-
const id = action.payload;
|
|
57
|
-
const { slides } = state;
|
|
58
|
-
const focusedSlideIndex = [...slides.keys()].indexOf(id);
|
|
59
|
-
if (focusedSlideIndex === -1) {
|
|
60
|
-
return state;
|
|
61
|
-
}
|
|
62
|
-
return {
|
|
63
|
-
...state,
|
|
64
|
-
focusedSlideIndex
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
default: {
|
|
68
|
-
const exhaustiveCheck = action;
|
|
69
|
-
throw new Error(`Action of type ${exhaustiveCheck} does not exist`);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export { carouselReducer };
|
|
75
|
-
//# 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,4 +0,0 @@
|
|
|
1
|
-
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";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=CarouselSlide.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useIdMemo, useId, useForkRef } 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, useContext, useRef, useEffect } from 'react';
|
|
7
|
-
import { CarouselDispatchContext, CarouselStateContext } from './CarouselContext.js';
|
|
8
|
-
import css_248z from './CarouselSlide.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltCarouselSlide");
|
|
11
|
-
const CarouselSlide = forwardRef(
|
|
12
|
-
function CarouselSlide2({
|
|
13
|
-
actions,
|
|
14
|
-
appearance,
|
|
15
|
-
media,
|
|
16
|
-
header,
|
|
17
|
-
children,
|
|
18
|
-
"aria-labelledby": ariaLabelledBy,
|
|
19
|
-
style,
|
|
20
|
-
id: idProp,
|
|
21
|
-
...rest
|
|
22
|
-
}, refProp) {
|
|
23
|
-
const targetWindow = useWindow();
|
|
24
|
-
useComponentCssInjection({
|
|
25
|
-
testId: "salt-carousel-slide",
|
|
26
|
-
css: css_248z,
|
|
27
|
-
window: targetWindow
|
|
28
|
-
});
|
|
29
|
-
const dispatch = useContext(CarouselDispatchContext);
|
|
30
|
-
const { slides, visibleSlides, activeSlideIndex } = useContext(CarouselStateContext);
|
|
31
|
-
const slideRef = useRef(null);
|
|
32
|
-
const headerRef = useRef(null);
|
|
33
|
-
const id = useIdMemo(idProp);
|
|
34
|
-
const announcerId = useId();
|
|
35
|
-
const slideCount = slides.size;
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
var _a;
|
|
38
|
-
if (!slideRef.current) return;
|
|
39
|
-
dispatch({
|
|
40
|
-
type: "register",
|
|
41
|
-
payload: [
|
|
42
|
-
id,
|
|
43
|
-
{
|
|
44
|
-
element: slideRef.current,
|
|
45
|
-
slideDescription: (_a = headerRef == null ? void 0 : headerRef.current) == null ? void 0 : _a.innerText
|
|
46
|
-
}
|
|
47
|
-
]
|
|
48
|
-
});
|
|
49
|
-
return () => dispatch({ type: "unregister", payload: id });
|
|
50
|
-
}, [dispatch, id]);
|
|
51
|
-
const SlideStyles = {
|
|
52
|
-
"--carousel-slide-width": visibleSlides > 1 ? `calc((100% / ${visibleSlides}) - var(--salt-spacing-200)/${visibleSlides})` : void 0,
|
|
53
|
-
...style
|
|
54
|
-
};
|
|
55
|
-
const ref = useForkRef(refProp, slideRef);
|
|
56
|
-
const slideIds = [...slides.keys()];
|
|
57
|
-
const index = slideIds.indexOf(id || slideIds[0]);
|
|
58
|
-
const helperText = `${index + 1} of ${slideCount}`;
|
|
59
|
-
const isVisible = index >= activeSlideIndex && index < activeSlideIndex + visibleSlides;
|
|
60
|
-
return /* @__PURE__ */ jsxs(
|
|
61
|
-
"div",
|
|
62
|
-
{
|
|
63
|
-
role: "group",
|
|
64
|
-
"aria-roledescription": "slide",
|
|
65
|
-
"aria-labelledby": clsx(ariaLabelledBy, announcerId),
|
|
66
|
-
id,
|
|
67
|
-
className: clsx(withBaseName(), {
|
|
68
|
-
[withBaseName("bordered")]: appearance === "bordered"
|
|
69
|
-
}),
|
|
70
|
-
style: SlideStyles,
|
|
71
|
-
tabIndex: isVisible ? 0 : -1,
|
|
72
|
-
hidden: !isVisible,
|
|
73
|
-
...rest,
|
|
74
|
-
ref,
|
|
75
|
-
children: [
|
|
76
|
-
media,
|
|
77
|
-
children && /* @__PURE__ */ jsxs(
|
|
78
|
-
"div",
|
|
79
|
-
{
|
|
80
|
-
className: clsx(withBaseName("container"), {
|
|
81
|
-
[withBaseName("card")]: appearance === "bordered"
|
|
82
|
-
}),
|
|
83
|
-
children: [
|
|
84
|
-
/* @__PURE__ */ jsxs("div", { className: withBaseName("content"), children: [
|
|
85
|
-
isVisible && /* @__PURE__ */ jsx(
|
|
86
|
-
"span",
|
|
87
|
-
{
|
|
88
|
-
id: announcerId,
|
|
89
|
-
className: withBaseName("sr-only"),
|
|
90
|
-
"aria-hidden": "true",
|
|
91
|
-
children: helperText
|
|
92
|
-
}
|
|
93
|
-
),
|
|
94
|
-
/* @__PURE__ */ jsx("div", { ref: headerRef, children: header }),
|
|
95
|
-
/* @__PURE__ */ jsx("div", { children })
|
|
96
|
-
] }),
|
|
97
|
-
isVisible && actions
|
|
98
|
-
]
|
|
99
|
-
}
|
|
100
|
-
)
|
|
101
|
-
]
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
|
|
107
|
-
export { CarouselSlide };
|
|
108
|
-
//# 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":["CarouselSlide","carouselSlideCss"],"mappings":";;;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAmB,EAAA,cAAA;AAAA,IACnB,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,OACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,QAAA,GAAW,WAAW,uBAAuB,CAAA;AACnD,IAAA,MAAM,EAAE,MAAQ,EAAA,aAAA,EAAe,gBAAiB,EAAA,GAC9C,WAAW,oBAAoB,CAAA;AAEjC,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,IAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA;AAC3B,IAAA,MAAM,cAAc,KAAM,EAAA;AAC1B,IAAA,MAAM,aAAa,MAAO,CAAA,IAAA;AAE1B,IAAA,SAAA,CAAU,MAAM;AAlFpB,MAAA,IAAA,EAAA;AAmFM,MAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AAEvB,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,UAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,EAAA;AAAA,UACA;AAAA,YACE,SAAS,QAAS,CAAA,OAAA;AAAA,YAClB,gBAAA,EAAA,CAAkB,EAAW,GAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,OAAA,KAAX,IAAoB,GAAA,MAAA,GAAA,EAAA,CAAA;AAAA;AACxC;AACF,OACD,CAAA;AACD,MAAA,OAAO,MAAM,QAAS,CAAA,EAAE,MAAM,YAAc,EAAA,OAAA,EAAS,IAAI,CAAA;AAAA,KACxD,EAAA,CAAC,QAAU,EAAA,EAAE,CAAC,CAAA;AAEjB,IAAA,MAAM,WAAc,GAAA;AAAA,MAClB,0BACE,aAAgB,GAAA,CAAA,GACZ,gBAAgB,aAAa,CAAA,4BAAA,EAA+B,aAAa,CACzE,CAAA,CAAA,GAAA,MAAA;AAAA,MACN,GAAG;AAAA,KACL;AAEA,IAAM,MAAA,GAAA,GAAM,UAAW,CAAA,OAAA,EAAS,QAAQ,CAAA;AACxC,IAAA,MAAM,QAAW,GAAA,CAAC,GAAG,MAAA,CAAO,MAAM,CAAA;AAClC,IAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAQ,EAAM,IAAA,QAAA,CAAS,CAAC,CAAC,CAAA;AAChD,IAAA,MAAM,UAAa,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,OAAO,UAAU,CAAA,CAAA;AAChD,IAAA,MAAM,SACJ,GAAA,KAAA,IAAS,gBAAoB,IAAA,KAAA,GAAQ,gBAAmB,GAAA,aAAA;AAE1D,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,iBAAA,EAAiB,IAAK,CAAA,cAAA,EAAgB,WAAW,CAAA;AAAA,QACjD,EAAA;AAAA,QACA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,UAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,SAC5C,CAAA;AAAA,QACD,KAAO,EAAA,WAAA;AAAA,QACP,QAAA,EAAU,YAAY,CAAI,GAAA,EAAA;AAAA,QAC1B,QAAQ,CAAC,SAAA;AAAA,QACR,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UACA,QACC,oBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,gBACzC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,UAAe,KAAA;AAAA,eACxC,CAAA;AAAA,cAED,QAAA,EAAA;AAAA,gCAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,SAAS,CACnC,EAAA,QAAA,EAAA;AAAA,kBACC,SAAA,oBAAA,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,EAAI,EAAA,WAAA;AAAA,sBACJ,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,sBACjC,aAAY,EAAA,MAAA;AAAA,sBAEX,QAAA,EAAA;AAAA;AAAA,mBACH;AAAA,kCAED,GAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,SAAA,EAAY,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,kCAC7B,GAAA,CAAC,SAAK,QAAS,EAAA;AAAA,iBACjB,EAAA,CAAA;AAAA,gBACC,SAAa,IAAA;AAAA;AAAA;AAAA;AAChB;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
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";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=CarouselSlider.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useForkRef } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { forwardRef, useRef, useContext, useLayoutEffect } from 'react';
|
|
6
|
-
import { CarouselStateContext, CarouselDispatchContext } from './CarouselContext.js';
|
|
7
|
-
import css_248z from './CarouselSlider.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltCarouselSlider");
|
|
10
|
-
const CarouselSlider = forwardRef(
|
|
11
|
-
function CarouselSlider2({ children, onKeyDown, onScroll, onSelectionChange, ...rest }, propRef) {
|
|
12
|
-
const targetWindow = useWindow();
|
|
13
|
-
useComponentCssInjection({
|
|
14
|
-
testId: "salt-carousel-slider",
|
|
15
|
-
css: css_248z,
|
|
16
|
-
window: targetWindow
|
|
17
|
-
});
|
|
18
|
-
const containerRef = useRef(null);
|
|
19
|
-
const hasRun = useRef(false);
|
|
20
|
-
const { slides, activeSlideIndex, focusedSlideIndex, visibleSlides } = useContext(CarouselStateContext);
|
|
21
|
-
const dispatch = useContext(CarouselDispatchContext);
|
|
22
|
-
const slideIds = [...slides.keys()];
|
|
23
|
-
const handleKeyDown = (event) => {
|
|
24
|
-
var _a, _b;
|
|
25
|
-
if (event.repeat) return;
|
|
26
|
-
switch (event.key) {
|
|
27
|
-
case "ArrowLeft": {
|
|
28
|
-
const prevIndex = focusedSlideIndex && focusedSlideIndex > activeSlideIndex ? focusedSlideIndex - 1 : activeSlideIndex - 1;
|
|
29
|
-
const prevId = slideIds[prevIndex] || null;
|
|
30
|
-
if (!prevId) break;
|
|
31
|
-
dispatch({ type: "scroll", payload: prevId });
|
|
32
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, prevIndex);
|
|
33
|
-
(_a = slides.get(prevId)) == null ? void 0 : _a.element.focus();
|
|
34
|
-
break;
|
|
35
|
-
}
|
|
36
|
-
case "ArrowRight": {
|
|
37
|
-
const nextIndex = activeSlideIndex + 1;
|
|
38
|
-
const nextId = slideIds[nextIndex] || null;
|
|
39
|
-
if (!nextId) break;
|
|
40
|
-
dispatch({ type: "scroll", payload: nextId });
|
|
41
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, nextIndex);
|
|
42
|
-
(_b = slides.get(nextId)) == null ? void 0 : _b.element.focus();
|
|
43
|
-
break;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
47
|
-
};
|
|
48
|
-
const handleScroll = (event) => {
|
|
49
|
-
const container = containerRef == null ? void 0 : containerRef.current;
|
|
50
|
-
if (!container) return;
|
|
51
|
-
const scrollLeft = container.scrollLeft;
|
|
52
|
-
const slideWidth = container.offsetWidth / visibleSlides;
|
|
53
|
-
const newIndex = Math.round(scrollLeft / slideWidth) || 0;
|
|
54
|
-
if (newIndex !== activeSlideIndex) {
|
|
55
|
-
dispatch({ type: "move", payload: slideIds[newIndex] });
|
|
56
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, newIndex);
|
|
57
|
-
}
|
|
58
|
-
onScroll == null ? void 0 : onScroll(event);
|
|
59
|
-
};
|
|
60
|
-
useLayoutEffect(() => {
|
|
61
|
-
const container = containerRef.current;
|
|
62
|
-
if (!container) return;
|
|
63
|
-
const scrollBehavior = hasRun.current ? "smooth" : "instant";
|
|
64
|
-
const slideWidth = container.offsetWidth / visibleSlides;
|
|
65
|
-
requestAnimationFrame(() => {
|
|
66
|
-
container.scrollTo({
|
|
67
|
-
left: focusedSlideIndex * slideWidth,
|
|
68
|
-
// @ts-ignore ScrollBehavior typescript definition missing instant
|
|
69
|
-
behavior: scrollBehavior
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
hasRun.current = true;
|
|
73
|
-
}, [focusedSlideIndex, visibleSlides]);
|
|
74
|
-
const ref = useForkRef(propRef, containerRef);
|
|
75
|
-
return /* @__PURE__ */ jsx(
|
|
76
|
-
"div",
|
|
77
|
-
{
|
|
78
|
-
ref,
|
|
79
|
-
className: withBaseName(),
|
|
80
|
-
tabIndex: -1,
|
|
81
|
-
onKeyDown: handleKeyDown,
|
|
82
|
-
onScroll: handleScroll,
|
|
83
|
-
...rest,
|
|
84
|
-
children
|
|
85
|
-
}
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
);
|
|
89
|
-
|
|
90
|
-
export { CarouselSlider };
|
|
91
|
-
//# 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":["CarouselSlider","carouselSliderCss"],"mappings":";;;;;;;;AAmCA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,UAAU,iBAAmB,EAAA,GAAG,IAAK,EAAA,EAC5D,OACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,IAAM,MAAA,MAAA,GAAS,OAAO,KAAK,CAAA;AAC3B,IAAA,MAAM,EAAE,MAAQ,EAAA,gBAAA,EAAkB,mBAAmB,aAAc,EAAA,GACjE,WAAW,oBAAoB,CAAA;AACjC,IAAM,MAAA,QAAA,GAAW,WAAW,uBAAuB,CAAA;AACnD,IAAA,MAAM,QAAW,GAAA,CAAC,GAAG,MAAA,CAAO,MAAM,CAAA;AAElC,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAvDpE,MAAA,IAAA,EAAA,EAAA,EAAA;AAwDM,MAAA,IAAI,MAAM,MAAQ,EAAA;AAClB,MAAA,QAAQ,MAAM,GAAK;AAAA,QACjB,KAAK,WAAa,EAAA;AAChB,UAAA,MAAM,YACJ,iBAAqB,IAAA,iBAAA,GAAoB,gBACrC,GAAA,iBAAA,GAAoB,IACpB,gBAAmB,GAAA,CAAA;AACzB,UAAM,MAAA,MAAA,GAAS,QAAS,CAAA,SAAS,CAAK,IAAA,IAAA;AAEtC,UAAA,IAAI,CAAC,MAAQ,EAAA;AACb,UAAA,QAAA,CAAS,EAAE,IAAA,EAAM,QAAU,EAAA,OAAA,EAAS,QAAQ,CAAA;AAC5C,UAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,SAAA,CAAA;AAC3B,UAAA,CAAA,EAAA,GAAA,MAAA,CAAO,GAAI,CAAA,MAAM,CAAjB,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,OAAQ,CAAA,KAAA,EAAA;AAE5B,UAAA;AAAA;AACF,QACA,KAAK,YAAc,EAAA;AACjB,UAAA,MAAM,YAAY,gBAAmB,GAAA,CAAA;AACrC,UAAM,MAAA,MAAA,GAAS,QAAS,CAAA,SAAS,CAAK,IAAA,IAAA;AAEtC,UAAA,IAAI,CAAC,MAAQ,EAAA;AAEb,UAAA,QAAA,CAAS,EAAE,IAAA,EAAM,QAAU,EAAA,OAAA,EAAS,QAAQ,CAAA;AAC5C,UAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,SAAA,CAAA;AAE3B,UAAA,CAAA,EAAA,GAAA,MAAA,CAAO,GAAI,CAAA,MAAM,CAAjB,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,OAAQ,CAAA,KAAA,EAAA;AAE5B,UAAA;AAAA;AACF;AAEF,MAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,KACd;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,KAAmC,KAAA;AACvD,MAAA,MAAM,YAAY,YAAc,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAA,OAAA;AAChC,MAAA,IAAI,CAAC,SAAW,EAAA;AAChB,MAAA,MAAM,aAAa,SAAU,CAAA,UAAA;AAC7B,MAAM,MAAA,UAAA,GAAa,UAAU,WAAc,GAAA,aAAA;AAC3C,MAAA,MAAM,QAAW,GAAA,IAAA,CAAK,KAAM,CAAA,UAAA,GAAa,UAAU,CAAK,IAAA,CAAA;AAExD,MAAA,IAAI,aAAa,gBAAkB,EAAA;AACjC,QAAA,QAAA,CAAS,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,QAAS,CAAA,QAAQ,GAAG,CAAA;AACtD,QAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,QAAA,CAAA;AAAA;AAE7B,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,MAAM,YAAY,YAAa,CAAA,OAAA;AAC/B,MAAA,IAAI,CAAC,SAAW,EAAA;AAEhB,MAAM,MAAA,cAAA,GAAiB,MAAO,CAAA,OAAA,GAAU,QAAW,GAAA,SAAA;AACnD,MAAM,MAAA,UAAA,GAAa,UAAU,WAAc,GAAA,aAAA;AAE3C,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,SAAA,CAAU,QAAS,CAAA;AAAA,UACjB,MAAM,iBAAoB,GAAA,UAAA;AAAA;AAAA,UAE1B,QAAU,EAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAED,MAAA,MAAA,CAAO,OAAU,GAAA,IAAA;AAAA,KAChB,EAAA,CAAC,iBAAmB,EAAA,aAAa,CAAC,CAAA;AAErC,IAAM,MAAA,GAAA,GAAM,UAAW,CAAA,OAAA,EAAS,YAAY,CAAA;AAC5C,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,YAAa,EAAA;AAAA,QACxB,QAAU,EAAA,EAAA;AAAA,QACV,SAAW,EAAA,aAAA;AAAA,QACX,QAAU,EAAA,YAAA;AAAA,QACT,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { type ResponsiveProp } from "@salt-ds/core";
|
|
2
|
-
import { type HTMLAttributes } from "react";
|
|
3
|
-
export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
-
/**
|
|
5
|
-
* The initial Index enables you to select the active slide in the carousel.
|
|
6
|
-
* Optional, default 0.
|
|
7
|
-
**/
|
|
8
|
-
defaultActiveSlideIndex?: number;
|
|
9
|
-
/**
|
|
10
|
-
* Controlled index of active slide in the carousel.
|
|
11
|
-
**/
|
|
12
|
-
activeSlideIndex?: number;
|
|
13
|
-
/**
|
|
14
|
-
* Set the placement of the CarouselControls relative to the CarouselSlider element. Defaults to `top`.
|
|
15
|
-
*/
|
|
16
|
-
controlsPlacement?: "top" | "bottom";
|
|
17
|
-
/**
|
|
18
|
-
* Number of slides visible at a time.
|
|
19
|
-
* Optional, default 1.
|
|
20
|
-
**/
|
|
21
|
-
visibleSlides?: ResponsiveProp<number>;
|
|
22
|
-
}
|
|
23
|
-
export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
2
|
-
import { type CarouselReducerDispatch, type CarouselReducerState } from "./CarouselReducer";
|
|
3
|
-
export declare const CarouselStateContext: import("react").Context<CarouselReducerState>;
|
|
4
|
-
export declare const CarouselDispatchContext: import("react").Context<CarouselReducerDispatch>;
|
|
5
|
-
export declare function CarouselProvider({ children, activeSlideIndex: activeSlideIndexProp, defaultActiveSlideIndex, visibleSlides, id, }: {
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
activeSlideIndex?: number;
|
|
8
|
-
defaultActiveSlideIndex?: number;
|
|
9
|
-
visibleSlides?: number;
|
|
10
|
-
id?: string;
|
|
11
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { type HTMLAttributes, type ReactNode, type SyntheticEvent } from "react";
|
|
2
|
-
export interface CarouselControlsProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
3
|
-
/**
|
|
4
|
-
* Callback when Back button is clicked.
|
|
5
|
-
*/
|
|
6
|
-
onPrevious?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
|
|
7
|
-
/**
|
|
8
|
-
* Callback when Next button is clicked.
|
|
9
|
-
*/
|
|
10
|
-
onNext?: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
|
|
11
|
-
/**
|
|
12
|
-
* Location of the label relative to the controls.
|
|
13
|
-
*
|
|
14
|
-
* Either 'left', or 'right'`.
|
|
15
|
-
*/
|
|
16
|
-
labelPlacement?: "left" | "right";
|
|
17
|
-
/**
|
|
18
|
-
* If `true`, the carousel controls will be disabled.
|
|
19
|
-
* **/
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* The title of the carousel that accompanies the controls.
|
|
23
|
-
*/
|
|
24
|
-
title?: ReactNode;
|
|
25
|
-
}
|
|
26
|
-
export declare const CarouselControls: import("react").ForwardRefExoticComponent<CarouselControlsProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import type { Dispatch } from "react";
|
|
2
|
-
import type { CarouselSlideId, CarouselSlideMeta } from "./CarouselSlide";
|
|
3
|
-
export interface CarouselReducerState {
|
|
4
|
-
slides: Map<CarouselSlideId, CarouselSlideMeta>;
|
|
5
|
-
activeSlideIndex: number;
|
|
6
|
-
visibleSlides: number;
|
|
7
|
-
focusedSlideIndex: number;
|
|
8
|
-
carouselId?: string;
|
|
9
|
-
}
|
|
10
|
-
export declare type CarouselReducerAction = {
|
|
11
|
-
type: "register";
|
|
12
|
-
payload: [CarouselSlideId, CarouselSlideMeta];
|
|
13
|
-
} | {
|
|
14
|
-
type: "unregister";
|
|
15
|
-
payload: CarouselSlideId;
|
|
16
|
-
} | {
|
|
17
|
-
type: "updateSlideCount";
|
|
18
|
-
payload: number;
|
|
19
|
-
} | {
|
|
20
|
-
type: "move";
|
|
21
|
-
payload: CarouselSlideId;
|
|
22
|
-
} | {
|
|
23
|
-
type: "moveToIndex";
|
|
24
|
-
payload: number;
|
|
25
|
-
} | {
|
|
26
|
-
type: "scroll";
|
|
27
|
-
payload: CarouselSlideId;
|
|
28
|
-
};
|
|
29
|
-
export declare type CarouselReducerDispatch = Dispatch<CarouselReducerAction>;
|
|
30
|
-
export declare function carouselReducer(state: CarouselReducerState, action: CarouselReducerAction): CarouselReducerState;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { type ComponentProps, type ReactNode } from "react";
|
|
2
|
-
export declare type CarouselSlideId = string;
|
|
3
|
-
export declare type CarouselSlideElement = HTMLDivElement;
|
|
4
|
-
export declare type CarouselSlideMeta = {
|
|
5
|
-
element: CarouselSlideElement;
|
|
6
|
-
slideDescription?: string;
|
|
7
|
-
};
|
|
8
|
-
export interface CarouselSlideProps extends ComponentProps<"div"> {
|
|
9
|
-
/**
|
|
10
|
-
* Actions to be displayed in the content footer.
|
|
11
|
-
**/
|
|
12
|
-
actions?: ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Media content to be displayed inside the slide. This could include images, videos, etc., that are visually prominent.
|
|
15
|
-
* It differs from children in that media is intended to be the main visual element of the slide.
|
|
16
|
-
**/
|
|
17
|
-
media?: ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
* The appearance of the slide. Options are 'bordered', and 'transparent'.
|
|
20
|
-
* 'transparent' is the default value.
|
|
21
|
-
**/
|
|
22
|
-
appearance?: "bordered" | "transparent";
|
|
23
|
-
/**
|
|
24
|
-
* Header content to be displayed at the top of the slide. This can be text or any other React node.
|
|
25
|
-
**/
|
|
26
|
-
header?: ReactNode;
|
|
27
|
-
/**
|
|
28
|
-
* Carousel slide id.
|
|
29
|
-
*/
|
|
30
|
-
id?: string;
|
|
31
|
-
}
|
|
32
|
-
export declare const CarouselSlide: import("react").ForwardRefExoticComponent<Omit<CarouselSlideProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type HTMLAttributes, type ReactElement, type SyntheticEvent } from "react";
|
|
2
|
-
import type { CarouselSlideProps } from "./CarouselSlide";
|
|
3
|
-
export interface CarouselSliderProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
-
/**
|
|
5
|
-
* Collection of slides to render
|
|
6
|
-
*/
|
|
7
|
-
children: Array<ReactElement<CarouselSlideProps>>;
|
|
8
|
-
/**
|
|
9
|
-
* Callback fired when the selected slide change.
|
|
10
|
-
**/
|
|
11
|
-
onSelectionChange?: (event: SyntheticEvent<HTMLDivElement>, index: number) => void;
|
|
12
|
-
}
|
|
13
|
-
export declare const CarouselSlider: import("react").ForwardRefExoticComponent<CarouselSliderProps & import("react").RefAttributes<HTMLDivElement>>;
|