@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53
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/css/salt-lab.css +532 -303
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-cjs/calendar/Calendar.css.js +1 -1
- package/dist-cjs/calendar/Calendar.js +57 -39
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarDateGrid.css.js +6 -0
- package/dist-cjs/calendar/CalendarDateGrid.css.js.map +1 -0
- package/dist-cjs/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +39 -16
- package/dist-cjs/calendar/CalendarDateGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.css.js +6 -0
- package/dist-cjs/calendar/CalendarNavigation.js +314 -0
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -0
- package/dist-cjs/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +6 -5
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-cjs/calendar/formatDate.js +56 -0
- package/dist-cjs/calendar/formatDate.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +45 -33
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +3 -2
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/useFocusManagement.js +7 -4
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-cjs/calendar/internal/utils.js +28 -23
- package/dist-cjs/calendar/internal/utils.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +90 -43
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +19 -10
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +333 -0
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -0
- package/dist-cjs/carousel/Carousel.js +5 -5
- package/dist-cjs/carousel/Carousel.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js +2 -2
- package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useMouseHandlers.js.map +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/ComboBox.css.js +1 -1
- package/dist-cjs/common-hooks/useCollectionItems.js.map +1 -1
- package/dist-cjs/contact-details/ContactMetadata.js +2 -2
- package/dist-cjs/contact-details/ContactMetadata.js.map +1 -1
- package/dist-cjs/content-status/ContentStatus.css.js +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +357 -0
- package/dist-cjs/date-input/DateInputRange.js.map +1 -0
- package/dist-cjs/date-input/DateInputSingle.js +231 -0
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -0
- package/dist-cjs/date-input/utils.js +65 -0
- package/dist-cjs/date-input/utils.js.map +1 -0
- package/dist-cjs/date-picker/DatePicker.js +74 -149
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerActions.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerActions.js +106 -0
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerContext.js +23 -17
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlay.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerOverlay.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js +50 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +105 -0
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerPanel.css.js +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +119 -0
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerRangePanel.js +230 -0
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerSingleInput.js +98 -0
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +152 -0
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -0
- package/dist-cjs/date-picker/useDatePicker.js +207 -0
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -0
- package/dist-cjs/dropdown/DropdownButton.js +4 -2
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/dropdown/useDropdown.js.map +1 -1
- package/dist-cjs/form-field-legacy/FormLabel.js.map +1 -1
- package/dist-cjs/index.js +53 -10
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/List.js.map +1 -1
- package/dist-cjs/menu-button/MenuButtonTrigger.css.js +1 -1
- package/dist-cjs/menu-button/MenuButtonTrigger.js +2 -2
- package/dist-cjs/menu-button/MenuButtonTrigger.js.map +1 -1
- package/dist-cjs/query-input/QueryInput.css.js +1 -1
- package/dist-cjs/query-input/internal/CategoryListItem.js +2 -2
- package/dist-cjs/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-cjs/query-input/internal/ValueList.js +2 -2
- package/dist-cjs/query-input/internal/ValueList.js.map +1 -1
- package/dist-cjs/search-input/SearchInput.js +2 -1
- package/dist-cjs/search-input/SearchInput.js.map +1 -1
- package/dist-cjs/slider/Slider.css.js +1 -1
- package/dist-cjs/slider/Slider.js +53 -105
- package/dist-cjs/slider/Slider.js.map +1 -1
- package/dist-cjs/slider/internal/SliderContext.js +21 -0
- package/dist-cjs/slider/internal/SliderContext.js.map +1 -0
- package/dist-cjs/slider/internal/SliderMarks.js +31 -0
- package/dist-cjs/slider/internal/SliderMarks.js.map +1 -0
- package/dist-cjs/slider/internal/SliderSelection.js +17 -10
- package/dist-cjs/slider/internal/SliderSelection.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.js +77 -0
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTrack.js +91 -0
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -0
- package/dist-cjs/slider/internal/useKeyDownThumb.js +53 -0
- package/dist-cjs/slider/internal/useKeyDownThumb.js.map +1 -0
- package/dist-cjs/slider/internal/utils.js +78 -116
- package/dist-cjs/slider/internal/utils.js.map +1 -1
- package/dist-cjs/static-list/StaticList.css.js +6 -0
- package/dist-cjs/static-list/StaticList.css.js.map +1 -0
- package/dist-cjs/static-list/StaticList.js +32 -0
- package/dist-cjs/static-list/StaticList.js.map +1 -0
- package/dist-cjs/static-list/StaticListItem.css.js +6 -0
- package/dist-cjs/static-list/StaticListItem.css.js.map +1 -0
- package/dist-cjs/static-list/StaticListItem.js +33 -0
- package/dist-cjs/static-list/StaticListItem.js.map +1 -0
- package/dist-cjs/static-list/StaticListItemContent.css.js +6 -0
- package/dist-cjs/static-list/StaticListItemContent.css.js.map +1 -0
- package/dist-cjs/static-list/StaticListItemContent.js +30 -0
- package/dist-cjs/static-list/StaticListItemContent.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +8 -8
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-cjs/stepper-input/StepperInput.css.js +1 -1
- package/dist-cjs/stepper-input/StepperInput.js +214 -29
- package/dist-cjs/stepper-input/StepperInput.js.map +1 -1
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js +54 -0
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-cjs/stepper-input/internal/utils.js +43 -0
- package/dist-cjs/stepper-input/internal/utils.js.map +1 -0
- package/dist-cjs/stepper-input/useStepperInput.js +88 -172
- package/dist-cjs/stepper-input/useStepperInput.js.map +1 -1
- package/dist-cjs/tabs/Tab.js +14 -12
- package/dist-cjs/tabs/Tab.js.map +1 -1
- package/dist-cjs/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-cjs/tabs/Tabstrip.js +2 -1
- package/dist-cjs/tabs/Tabstrip.js.map +1 -1
- package/dist-cjs/tabs/useTabs.js.map +1 -1
- package/dist-cjs/tabs-next/OverflowMenu.js +2 -2
- package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-cjs/tokenized-input/TokenizedInputBase.js +3 -3
- package/dist-cjs/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-cjs/tokenized-input/internal/InputPill.js +2 -2
- package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-cjs/tokenized-input-next/internal/InputPill.js +2 -2
- package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +2 -2
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js +3 -2
- package/dist-es/breadcrumbs/internal/BreadcrumbsCollapsed.js.map +1 -1
- package/dist-es/calendar/Calendar.css.js +1 -1
- package/dist-es/calendar/Calendar.js +60 -42
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarDateGrid.css.js +4 -0
- package/dist-es/calendar/CalendarDateGrid.css.js.map +1 -0
- package/dist-es/calendar/{internal/CalendarCarousel.js → CalendarDateGrid.js} +39 -16
- package/dist-es/calendar/CalendarDateGrid.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.css.js +4 -0
- package/dist-es/calendar/CalendarNavigation.js +310 -0
- package/dist-es/calendar/CalendarNavigation.js.map +1 -0
- package/dist-es/calendar/{internal/CalendarWeekHeader.js → CalendarWeekHeader.js} +6 -5
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-es/calendar/formatDate.js +51 -0
- package/dist-es/calendar/formatDate.js.map +1 -0
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +45 -33
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +3 -2
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/useFocusManagement.js +7 -4
- package/dist-es/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-es/calendar/internal/utils.js +29 -23
- package/dist-es/calendar/internal/utils.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +92 -45
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +20 -11
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +323 -0
- package/dist-es/calendar/useCalendarSelection.js.map +1 -0
- package/dist-es/carousel/Carousel.js +6 -6
- package/dist-es/carousel/Carousel.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js +3 -3
- package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-es/cascading-menu/internal/useMouseHandlers.js.map +1 -1
- package/dist-es/color-chooser/ColorChooser.js.map +1 -1
- package/dist-es/combo-box-deprecated/ComboBox.css.js +1 -1
- package/dist-es/common-hooks/useCollectionItems.js.map +1 -1
- package/dist-es/contact-details/ContactMetadata.js +3 -3
- package/dist-es/contact-details/ContactMetadata.js.map +1 -1
- package/dist-es/content-status/ContentStatus.css.js +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +353 -0
- package/dist-es/date-input/DateInputRange.js.map +1 -0
- package/dist-es/date-input/DateInputSingle.js +227 -0
- package/dist-es/date-input/DateInputSingle.js.map +1 -0
- package/dist-es/date-input/utils.js +57 -0
- package/dist-es/date-input/utils.js.map +1 -0
- package/dist-es/date-picker/DatePicker.js +77 -153
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.css.js +4 -0
- package/dist-es/date-picker/DatePickerActions.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerActions.js +102 -0
- package/dist-es/date-picker/DatePickerActions.js.map +1 -0
- package/dist-es/date-picker/DatePickerContext.js +22 -17
- package/dist-es/date-picker/DatePickerContext.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlay.css.js +4 -0
- package/dist-es/date-picker/DatePickerOverlay.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerOverlay.js +46 -0
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -0
- package/dist-es/date-picker/DatePickerOverlayProvider.js +100 -0
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -0
- package/dist-es/date-picker/DatePickerPanel.css.js +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +115 -0
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -0
- package/dist-es/date-picker/DatePickerRangePanel.js +222 -0
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerSingleInput.js +94 -0
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -0
- package/dist-es/date-picker/DatePickerSinglePanel.js +144 -0
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -0
- package/dist-es/date-picker/useDatePicker.js +203 -0
- package/dist-es/date-picker/useDatePicker.js.map +1 -0
- package/dist-es/dropdown/DropdownButton.js +6 -4
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/dropdown/useDropdown.js.map +1 -1
- package/dist-es/form-field-legacy/FormLabel.js.map +1 -1
- package/dist-es/index.js +19 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/List.js.map +1 -1
- package/dist-es/menu-button/MenuButtonTrigger.css.js +1 -1
- package/dist-es/menu-button/MenuButtonTrigger.js +3 -3
- package/dist-es/menu-button/MenuButtonTrigger.js.map +1 -1
- package/dist-es/query-input/QueryInput.css.js +1 -1
- package/dist-es/query-input/internal/CategoryListItem.js +3 -3
- package/dist-es/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-es/query-input/internal/ValueList.js +3 -3
- package/dist-es/query-input/internal/ValueList.js.map +1 -1
- package/dist-es/search-input/SearchInput.js +3 -2
- package/dist-es/search-input/SearchInput.js.map +1 -1
- package/dist-es/slider/Slider.css.js +1 -1
- package/dist-es/slider/Slider.js +55 -107
- package/dist-es/slider/Slider.js.map +1 -1
- package/dist-es/slider/internal/SliderContext.js +16 -0
- package/dist-es/slider/internal/SliderContext.js.map +1 -0
- package/dist-es/slider/internal/SliderMarks.js +27 -0
- package/dist-es/slider/internal/SliderMarks.js.map +1 -0
- package/dist-es/slider/internal/SliderSelection.js +17 -10
- package/dist-es/slider/internal/SliderSelection.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.js +73 -0
- package/dist-es/slider/internal/SliderThumb.js.map +1 -0
- package/dist-es/slider/internal/SliderTrack.js +87 -0
- package/dist-es/slider/internal/SliderTrack.js.map +1 -0
- package/dist-es/slider/internal/useKeyDownThumb.js +49 -0
- package/dist-es/slider/internal/useKeyDownThumb.js.map +1 -0
- package/dist-es/slider/internal/utils.js +70 -111
- package/dist-es/slider/internal/utils.js.map +1 -1
- package/dist-es/static-list/StaticList.css.js +4 -0
- package/dist-es/static-list/StaticList.css.js.map +1 -0
- package/dist-es/static-list/StaticList.js +28 -0
- package/dist-es/static-list/StaticList.js.map +1 -0
- package/dist-es/static-list/StaticListItem.css.js +4 -0
- package/dist-es/static-list/StaticListItem.css.js.map +1 -0
- package/dist-es/static-list/StaticListItem.js +29 -0
- package/dist-es/static-list/StaticListItem.js.map +1 -0
- package/dist-es/static-list/StaticListItemContent.css.js +4 -0
- package/dist-es/static-list/StaticListItemContent.css.js.map +1 -0
- package/dist-es/static-list/StaticListItemContent.js +26 -0
- package/dist-es/static-list/StaticListItemContent.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +9 -9
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-es/stepper-input/StepperInput.css.js +1 -1
- package/dist-es/stepper-input/StepperInput.js +216 -31
- package/dist-es/stepper-input/StepperInput.js.map +1 -1
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js +50 -0
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-es/stepper-input/internal/utils.js +32 -0
- package/dist-es/stepper-input/internal/utils.js.map +1 -0
- package/dist-es/stepper-input/useStepperInput.js +88 -172
- package/dist-es/stepper-input/useStepperInput.js.map +1 -1
- package/dist-es/tabs/Tab.js +15 -13
- package/dist-es/tabs/Tab.js.map +1 -1
- package/dist-es/tabs/TabActivationIndicator.css.js +1 -1
- package/dist-es/tabs/Tabstrip.js +4 -3
- package/dist-es/tabs/Tabstrip.js.map +1 -1
- package/dist-es/tabs/useTabs.js.map +1 -1
- package/dist-es/tabs-next/OverflowMenu.js +3 -3
- package/dist-es/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-es/tokenized-input/TokenizedInputBase.js +3 -3
- package/dist-es/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-es/tokenized-input/internal/InputPill.js +2 -2
- package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.js +3 -3
- package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-es/tokenized-input-next/internal/InputPill.js +2 -2
- package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js +3 -3
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +55 -11
- package/dist-types/calendar/CalendarDateGrid.d.ts +10 -0
- package/dist-types/calendar/CalendarNavigation.d.ts +57 -0
- package/dist-types/calendar/CalendarWeekHeader.d.ts +5 -0
- package/dist-types/calendar/formatDate.d.ts +14 -0
- package/dist-types/calendar/index.d.ts +5 -1
- package/dist-types/calendar/internal/CalendarDay.d.ts +2 -1
- package/dist-types/calendar/internal/CalendarMonth.d.ts +9 -1
- package/dist-types/calendar/internal/useFocusManagement.d.ts +2 -1
- package/dist-types/calendar/internal/utils.d.ts +7 -8
- package/dist-types/calendar/useCalendar.d.ts +100 -16
- package/dist-types/calendar/useCalendarDay.d.ts +38 -0
- package/dist-types/calendar/useCalendarSelection.d.ts +182 -0
- package/dist-types/date-input/DateInputRange.d.ts +150 -0
- package/dist-types/date-input/DateInputSingle.d.ts +117 -0
- package/dist-types/date-input/index.d.ts +3 -1
- package/dist-types/date-input/utils.d.ts +43 -0
- package/dist-types/date-picker/DatePicker.d.ts +20 -62
- package/dist-types/date-picker/DatePickerActions.d.ts +80 -0
- package/dist-types/date-picker/DatePickerContext.d.ts +180 -17
- package/dist-types/date-picker/DatePickerOverlay.d.ts +11 -0
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +67 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +7 -0
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +80 -0
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +7 -0
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +50 -0
- package/dist-types/date-picker/index.d.ts +7 -0
- package/dist-types/date-picker/useDatePicker.d.ts +112 -0
- package/dist-types/index.d.ts +1 -0
- package/dist-types/slider/Slider.d.ts +23 -10
- package/dist-types/slider/internal/SliderContext.d.ts +11 -0
- package/dist-types/slider/internal/SliderMarks.d.ts +7 -0
- package/dist-types/slider/internal/SliderSelection.d.ts +3 -3
- package/dist-types/slider/internal/SliderThumb.d.ts +8 -0
- package/dist-types/slider/internal/SliderTrack.d.ts +4 -0
- package/dist-types/slider/internal/index.d.ts +3 -0
- package/dist-types/slider/internal/useKeyDownThumb.d.ts +2 -0
- package/dist-types/slider/internal/utils.d.ts +18 -10
- package/dist-types/slider/types.d.ts +3 -1
- package/dist-types/static-list/StaticList.d.ts +8 -0
- package/dist-types/static-list/StaticListItem.d.ts +4 -0
- package/dist-types/static-list/StaticListItemContent.d.ts +8 -0
- package/dist-types/static-list/index.d.ts +3 -0
- package/dist-types/stepper-input/StepperInput.d.ts +66 -19
- package/dist-types/stepper-input/internal/useActivateWhileMouseDown.d.ts +5 -0
- package/dist-types/stepper-input/internal/utils.d.ts +8 -0
- package/dist-types/stepper-input/useStepperInput.d.ts +21 -8
- package/package.json +3 -3
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js +0 -6
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.css.js +0 -6
- package/dist-cjs/calendar/internal/CalendarNavigation.js +0 -218
- package/dist-cjs/calendar/internal/CalendarNavigation.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/dist-cjs/calendar/useSelection.js +0 -249
- package/dist-cjs/calendar/useSelection.js.map +0 -1
- package/dist-cjs/date-input/DateInput.js +0 -283
- package/dist-cjs/date-input/DateInput.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerPanel.js +0 -155
- package/dist-cjs/date-picker/DatePickerPanel.js.map +0 -1
- package/dist-cjs/slider/internal/SliderHandle.js +0 -44
- package/dist-cjs/slider/internal/SliderHandle.js.map +0 -1
- package/dist-cjs/slider/internal/SliderMarkLabels.js +0 -45
- package/dist-cjs/slider/internal/SliderMarkLabels.js.map +0 -1
- package/dist-cjs/slider/internal/SliderRail.js +0 -25
- package/dist-cjs/slider/internal/SliderRail.js.map +0 -1
- package/dist-cjs/slider/internal/SliderRailMarks.js +0 -48
- package/dist-cjs/slider/internal/SliderRailMarks.js.map +0 -1
- package/dist-cjs/slider/internal/styles.js +0 -99
- package/dist-cjs/slider/internal/styles.js.map +0 -1
- package/dist-cjs/slider/internal/useSliderKeyDown.js +0 -50
- package/dist-cjs/slider/internal/useSliderKeyDown.js.map +0 -1
- package/dist-cjs/slider/internal/useSliderMouseDown.js +0 -96
- package/dist-cjs/slider/internal/useSliderMouseDown.js.map +0 -1
- package/dist-cjs/stepper-input/internal/useSpinner.js +0 -33
- package/dist-cjs/stepper-input/internal/useSpinner.js.map +0 -1
- package/dist-es/calendar/internal/CalendarCarousel.css.js +0 -4
- package/dist-es/calendar/internal/CalendarCarousel.css.js.map +0 -1
- package/dist-es/calendar/internal/CalendarCarousel.js.map +0 -1
- package/dist-es/calendar/internal/CalendarNavigation.css.js +0 -4
- package/dist-es/calendar/internal/CalendarNavigation.js +0 -214
- package/dist-es/calendar/internal/CalendarNavigation.js.map +0 -1
- package/dist-es/calendar/internal/CalendarWeekHeader.js.map +0 -1
- package/dist-es/calendar/useSelection.js +0 -242
- package/dist-es/calendar/useSelection.js.map +0 -1
- package/dist-es/date-input/DateInput.js +0 -279
- package/dist-es/date-input/DateInput.js.map +0 -1
- package/dist-es/date-picker/DatePickerPanel.js +0 -151
- package/dist-es/date-picker/DatePickerPanel.js.map +0 -1
- package/dist-es/slider/internal/SliderHandle.js +0 -40
- package/dist-es/slider/internal/SliderHandle.js.map +0 -1
- package/dist-es/slider/internal/SliderMarkLabels.js +0 -41
- package/dist-es/slider/internal/SliderMarkLabels.js.map +0 -1
- package/dist-es/slider/internal/SliderRail.js +0 -21
- package/dist-es/slider/internal/SliderRail.js.map +0 -1
- package/dist-es/slider/internal/SliderRailMarks.js +0 -44
- package/dist-es/slider/internal/SliderRailMarks.js.map +0 -1
- package/dist-es/slider/internal/styles.js +0 -91
- package/dist-es/slider/internal/styles.js.map +0 -1
- package/dist-es/slider/internal/useSliderKeyDown.js +0 -46
- package/dist-es/slider/internal/useSliderKeyDown.js.map +0 -1
- package/dist-es/slider/internal/useSliderMouseDown.js +0 -92
- package/dist-es/slider/internal/useSliderMouseDown.js.map +0 -1
- package/dist-es/stepper-input/internal/useSpinner.js +0 -29
- package/dist-es/stepper-input/internal/useSpinner.js.map +0 -1
- package/dist-types/calendar/internal/CalendarCarousel.d.ts +0 -3
- package/dist-types/calendar/internal/CalendarNavigation.d.ts +0 -16
- package/dist-types/calendar/internal/CalendarWeekHeader.d.ts +0 -5
- package/dist-types/calendar/useSelection.d.ts +0 -78
- package/dist-types/date-input/DateInput.d.ts +0 -60
- package/dist-types/date-picker/DatePickerPanel.d.ts +0 -10
- package/dist-types/slider/internal/SliderHandle.d.ts +0 -11
- package/dist-types/slider/internal/SliderMarkLabels.d.ts +0 -7
- package/dist-types/slider/internal/SliderRail.d.ts +0 -1
- package/dist-types/slider/internal/SliderRailMarks.d.ts +0 -12
- package/dist-types/slider/internal/styles.d.ts +0 -10
- package/dist-types/slider/internal/useSliderKeyDown.d.ts +0 -4
- package/dist-types/slider/internal/useSliderMouseDown.d.ts +0 -4
- package/dist-types/stepper-input/internal/useSpinner.d.ts +0 -5
- /package/dist-cjs/calendar/{internal/CalendarNavigation.css.js.map → CalendarNavigation.css.js.map} +0 -0
- /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
- /package/dist-cjs/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
- /package/dist-es/calendar/{internal/CalendarNavigation.css.js.map → CalendarNavigation.css.js.map} +0 -0
- /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js → CalendarWeekHeader.css.js} +0 -0
- /package/dist-es/calendar/{internal/CalendarWeekHeader.css.js.map → CalendarWeekHeader.css.js.map} +0 -0
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { endOfMonth, startOfMonth } from '@internationalized/date';
|
|
3
|
-
import { makePrefixer, useFloatingComponent, useFormFieldProps, StackLayout, FlexItem, FormFieldHelperText, FlexLayout, FormFieldContext } from '@salt-ds/core';
|
|
4
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { clsx } from 'clsx';
|
|
7
|
-
import { forwardRef, useState, useEffect } from 'react';
|
|
8
|
-
import { Calendar } from '../calendar/Calendar.js';
|
|
9
|
-
import '../calendar/internal/CalendarContext.js';
|
|
10
|
-
import '../calendar/internal/utils.js';
|
|
11
|
-
import { isRangeOrOffsetSelectionWithStartDate } from '../calendar/useSelection.js';
|
|
12
|
-
import { useDatePickerContext } from './DatePickerContext.js';
|
|
13
|
-
import css_248z from './DatePickerPanel.css.js';
|
|
14
|
-
|
|
15
|
-
const withBaseName = makePrefixer("saltDatePickerPanel");
|
|
16
|
-
function getHoveredDate(date, compact, hoveredDate) {
|
|
17
|
-
return date && !compact && hoveredDate && hoveredDate.compare(endOfMonth(date)) > 0 ? endOfMonth(date) : hoveredDate;
|
|
18
|
-
}
|
|
19
|
-
const DatePickerPanel = forwardRef(function DatePickerPanel2(props, ref) {
|
|
20
|
-
var _a;
|
|
21
|
-
const {
|
|
22
|
-
className,
|
|
23
|
-
onSelect,
|
|
24
|
-
helperText,
|
|
25
|
-
CalendarProps,
|
|
26
|
-
visibleMonths,
|
|
27
|
-
...rest
|
|
28
|
-
} = props;
|
|
29
|
-
const targetWindow = useWindow();
|
|
30
|
-
useComponentCssInjection({
|
|
31
|
-
testId: "salt-date-picker-panel",
|
|
32
|
-
css: css_248z,
|
|
33
|
-
window: targetWindow
|
|
34
|
-
});
|
|
35
|
-
const { Component: FloatingComponent } = useFloatingComponent();
|
|
36
|
-
const [hoveredDate, setHoveredDate] = useState(null);
|
|
37
|
-
const {
|
|
38
|
-
openState,
|
|
39
|
-
selectedDate,
|
|
40
|
-
setSelectedDate,
|
|
41
|
-
startVisibleMonth,
|
|
42
|
-
setStartVisibleMonth,
|
|
43
|
-
endVisibleMonth,
|
|
44
|
-
setEndVisibleMonth,
|
|
45
|
-
setOpen,
|
|
46
|
-
context,
|
|
47
|
-
getPanelPosition,
|
|
48
|
-
selectionVariant
|
|
49
|
-
} = useDatePickerContext();
|
|
50
|
-
const { a11yProps } = useFormFieldProps();
|
|
51
|
-
const isRangePicker = isRangeOrOffsetSelectionWithStartDate(selectedDate) || selectionVariant === "range" && selectedDate === void 0;
|
|
52
|
-
const compact = visibleMonths === 1;
|
|
53
|
-
const setRangeDate = (event, newDate) => {
|
|
54
|
-
setSelectedDate(newDate);
|
|
55
|
-
onSelect == null ? void 0 : onSelect(event, newDate);
|
|
56
|
-
if (newDate.startDate && newDate.endDate) {
|
|
57
|
-
setOpen(false);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
const setSingleDate = (event, newDate) => {
|
|
61
|
-
setSelectedDate(newDate);
|
|
62
|
-
onSelect == null ? void 0 : onSelect(event, newDate);
|
|
63
|
-
setOpen(false);
|
|
64
|
-
};
|
|
65
|
-
const handleHoveredDateChange = (_, newHoveredDate) => {
|
|
66
|
-
setHoveredDate(newHoveredDate);
|
|
67
|
-
};
|
|
68
|
-
useEffect(() => {
|
|
69
|
-
if (isRangePicker) {
|
|
70
|
-
if (selectedDate == null ? void 0 : selectedDate.startDate) {
|
|
71
|
-
setStartVisibleMonth(selectedDate.startDate);
|
|
72
|
-
setEndVisibleMonth(selectedDate.startDate.add({ months: 1 }));
|
|
73
|
-
}
|
|
74
|
-
} else {
|
|
75
|
-
setStartVisibleMonth(selectedDate);
|
|
76
|
-
}
|
|
77
|
-
}, [selectedDate, setEndVisibleMonth, setStartVisibleMonth]);
|
|
78
|
-
const firstCalendarProps = isRangePicker ? {
|
|
79
|
-
selectionVariant: "range",
|
|
80
|
-
hoveredDate: getHoveredDate(
|
|
81
|
-
selectedDate == null ? void 0 : selectedDate.startDate,
|
|
82
|
-
compact,
|
|
83
|
-
hoveredDate
|
|
84
|
-
),
|
|
85
|
-
onHoveredDateChange: handleHoveredDateChange,
|
|
86
|
-
selectedDate,
|
|
87
|
-
onSelectedDateChange: setRangeDate,
|
|
88
|
-
maxDate: !compact && (selectedDate == null ? void 0 : selectedDate.startDate) ? endOfMonth(selectedDate == null ? void 0 : selectedDate.startDate) : void 0,
|
|
89
|
-
hideOutOfRangeDates: true
|
|
90
|
-
} : {
|
|
91
|
-
selectionVariant: "default",
|
|
92
|
-
selectedDate,
|
|
93
|
-
onSelectedDateChange: setSingleDate
|
|
94
|
-
};
|
|
95
|
-
return /* @__PURE__ */ jsx(FloatingComponent, {
|
|
96
|
-
open: openState,
|
|
97
|
-
className: clsx(withBaseName(), className),
|
|
98
|
-
"aria-modal": "true",
|
|
99
|
-
ref,
|
|
100
|
-
focusManagerProps: context ? {
|
|
101
|
-
context,
|
|
102
|
-
initialFocus: 4
|
|
103
|
-
} : void 0,
|
|
104
|
-
...getPanelPosition(),
|
|
105
|
-
...a11yProps,
|
|
106
|
-
...rest,
|
|
107
|
-
children: /* @__PURE__ */ jsxs(StackLayout, {
|
|
108
|
-
separators: true,
|
|
109
|
-
gap: 0,
|
|
110
|
-
className: withBaseName("container"),
|
|
111
|
-
children: [
|
|
112
|
-
helperText && /* @__PURE__ */ jsx(FlexItem, {
|
|
113
|
-
className: withBaseName("header"),
|
|
114
|
-
children: /* @__PURE__ */ jsx(FormFieldHelperText, {
|
|
115
|
-
children: helperText
|
|
116
|
-
})
|
|
117
|
-
}),
|
|
118
|
-
/* @__PURE__ */ jsx(FlexLayout, {
|
|
119
|
-
children: /* @__PURE__ */ jsxs(FormFieldContext.Provider, {
|
|
120
|
-
value: {},
|
|
121
|
-
children: [
|
|
122
|
-
/* @__PURE__ */ jsx(Calendar, {
|
|
123
|
-
visibleMonth: startVisibleMonth,
|
|
124
|
-
onVisibleMonthChange: (_, month) => setStartVisibleMonth(month),
|
|
125
|
-
...firstCalendarProps,
|
|
126
|
-
...CalendarProps
|
|
127
|
-
}),
|
|
128
|
-
isRangePicker && !compact && /* @__PURE__ */ jsx(Calendar, {
|
|
129
|
-
selectionVariant: "range",
|
|
130
|
-
hoveredDate,
|
|
131
|
-
onHoveredDateChange: handleHoveredDateChange,
|
|
132
|
-
selectedDate,
|
|
133
|
-
onSelectedDateChange: setRangeDate,
|
|
134
|
-
visibleMonth: endVisibleMonth,
|
|
135
|
-
onVisibleMonthChange: (_, month) => setEndVisibleMonth(month),
|
|
136
|
-
hideOutOfRangeDates: true,
|
|
137
|
-
minDate: (selectedDate == null ? void 0 : selectedDate.startDate) ? (_a = startOfMonth(selectedDate == null ? void 0 : selectedDate.startDate)) == null ? void 0 : _a.add({
|
|
138
|
-
months: 1
|
|
139
|
-
}) : void 0,
|
|
140
|
-
...CalendarProps
|
|
141
|
-
})
|
|
142
|
-
]
|
|
143
|
-
})
|
|
144
|
-
})
|
|
145
|
-
]
|
|
146
|
-
})
|
|
147
|
-
});
|
|
148
|
-
});
|
|
149
|
-
|
|
150
|
-
export { DatePickerPanel };
|
|
151
|
-
//# sourceMappingURL=DatePickerPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerPanel.js","sources":["../src/date-picker/DatePickerPanel.tsx"],"sourcesContent":["import {\n type DateValue,\n endOfMonth,\n startOfMonth,\n} from \"@internationalized/date\";\nimport {\n FlexItem,\n FlexLayout,\n FormFieldContext,\n type FormFieldContextValue,\n FormFieldHelperText,\n StackLayout,\n makePrefixer,\n useFloatingComponent,\n useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport {\n Calendar,\n type CalendarProps,\n type RangeSelectionValueType,\n type SingleSelectionValueType,\n type UseRangeSelectionCalendarProps,\n type UseSingleSelectionCalendarProps,\n isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport dateInputPanelCss from \"./DatePickerPanel.css\";\n\nexport interface DatePickerPanelProps<SelectionVariantType>\n extends ComponentPropsWithoutRef<\"div\"> {\n onSelect?: (\n event: SyntheticEvent,\n selectedDate?: SelectionVariantType,\n ) => void;\n helperText?: string;\n visibleMonths?: 1 | 2;\n CalendarProps?: Partial<\n Omit<\n CalendarProps,\n | \"selectionVariant\"\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectedDateChange\"\n >\n >;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nfunction getHoveredDate(\n date?: DateValue | null,\n compact?: boolean,\n hoveredDate?: DateValue | null,\n) {\n return date &&\n !compact &&\n hoveredDate &&\n hoveredDate.compare(endOfMonth(date)) > 0\n ? endOfMonth(date)\n : hoveredDate;\n}\n\nexport const DatePickerPanel = forwardRef<\n HTMLDivElement,\n DatePickerPanelProps<SingleSelectionValueType | RangeSelectionValueType>\n>(function DatePickerPanel(props, ref) {\n const {\n className,\n onSelect,\n helperText,\n CalendarProps,\n visibleMonths,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-panel\",\n css: dateInputPanelCss,\n window: targetWindow,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n const {\n openState,\n selectedDate,\n setSelectedDate,\n startVisibleMonth,\n setStartVisibleMonth,\n endVisibleMonth,\n setEndVisibleMonth,\n setOpen,\n context,\n getPanelPosition,\n selectionVariant,\n } = useDatePickerContext();\n\n const { a11yProps } = useFormFieldProps();\n const isRangePicker =\n isRangeOrOffsetSelectionWithStartDate(selectedDate) ||\n (selectionVariant === \"range\" && selectedDate === undefined);\n const compact = visibleMonths === 1;\n\n const setRangeDate: UseRangeSelectionCalendarProps[\"onSelectedDateChange\"] = (\n event,\n newDate,\n ) => {\n setSelectedDate(newDate);\n onSelect?.(event, newDate);\n if (newDate.startDate && newDate.endDate) {\n setOpen(false);\n }\n };\n const setSingleDate: UseSingleSelectionCalendarProps[\"onSelectedDateChange\"] =\n (event, newDate) => {\n setSelectedDate(newDate);\n onSelect?.(event, newDate);\n setOpen(false);\n };\n const handleHoveredDateChange: CalendarProps[\"onHoveredDateChange\"] = (\n _,\n newHoveredDate,\n ) => {\n setHoveredDate(newHoveredDate);\n };\n useEffect(() => {\n if (isRangePicker) {\n if (selectedDate?.startDate) {\n setStartVisibleMonth(selectedDate.startDate);\n setEndVisibleMonth(selectedDate.startDate.add({ months: 1 }));\n }\n } else {\n setStartVisibleMonth(selectedDate);\n }\n }, [selectedDate, setEndVisibleMonth, setStartVisibleMonth]);\n\n const firstCalendarProps: CalendarProps = isRangePicker\n ? {\n selectionVariant: \"range\",\n hoveredDate: getHoveredDate(\n selectedDate?.startDate,\n compact,\n hoveredDate,\n ),\n onHoveredDateChange: handleHoveredDateChange,\n selectedDate: selectedDate,\n onSelectedDateChange: setRangeDate,\n maxDate:\n !compact && selectedDate?.startDate\n ? endOfMonth(selectedDate?.startDate)\n : undefined,\n hideOutOfRangeDates: true,\n }\n : {\n selectionVariant: \"default\",\n selectedDate: selectedDate,\n onSelectedDateChange: setSingleDate,\n };\n return (\n <FloatingComponent\n open={openState}\n className={clsx(withBaseName(), className)}\n aria-modal=\"true\"\n ref={ref}\n focusManagerProps={\n context\n ? {\n context: context,\n initialFocus: 4,\n }\n : undefined\n }\n {...getPanelPosition()}\n {...a11yProps}\n {...rest}\n >\n <StackLayout separators gap={0} className={withBaseName(\"container\")}>\n {helperText && (\n <FlexItem className={withBaseName(\"header\")}>\n <FormFieldHelperText>{helperText}</FormFieldHelperText>\n </FlexItem>\n )}\n <FlexLayout>\n {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n <Calendar\n visibleMonth={startVisibleMonth}\n onVisibleMonthChange={(_, month) => setStartVisibleMonth(month)}\n {...firstCalendarProps}\n {...CalendarProps}\n />\n {isRangePicker && !compact && (\n <Calendar\n selectionVariant=\"range\"\n hoveredDate={hoveredDate}\n onHoveredDateChange={handleHoveredDateChange}\n selectedDate={selectedDate}\n onSelectedDateChange={setRangeDate}\n visibleMonth={endVisibleMonth}\n onVisibleMonthChange={(_, month) => setEndVisibleMonth(month)}\n hideOutOfRangeDates\n minDate={\n selectedDate?.startDate\n ? startOfMonth(selectedDate?.startDate)?.add({\n months: 1,\n })\n : undefined\n }\n {...CalendarProps}\n />\n )}\n </FormFieldContext.Provider>\n </FlexLayout>\n </StackLayout>\n </FloatingComponent>\n );\n});\n"],"names":["DatePickerPanel","dateInputPanelCss"],"mappings":"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"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, Tooltip } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { getSliderAriaLabel } from './utils.js';
|
|
5
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import css_248z from '../Slider.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltSliderHandle");
|
|
10
|
-
function SliderHandle(props) {
|
|
11
|
-
const { min, max, value, disabled, valueLength, index, style } = props;
|
|
12
|
-
const targetWindow = useWindow();
|
|
13
|
-
useComponentCssInjection({
|
|
14
|
-
testId: "salt-slider",
|
|
15
|
-
css: css_248z,
|
|
16
|
-
window: targetWindow
|
|
17
|
-
});
|
|
18
|
-
return /* @__PURE__ */ jsx(Tooltip, {
|
|
19
|
-
content: value,
|
|
20
|
-
placement: "top",
|
|
21
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
22
|
-
className: clsx(withBaseName(), {
|
|
23
|
-
[withBaseName("min")]: value === min,
|
|
24
|
-
[withBaseName("max")]: value === max
|
|
25
|
-
}),
|
|
26
|
-
style,
|
|
27
|
-
role: "slider",
|
|
28
|
-
"aria-valuemin": min,
|
|
29
|
-
"aria-valuemax": max,
|
|
30
|
-
"aria-valuenow": value,
|
|
31
|
-
"aria-disabled": disabled,
|
|
32
|
-
"aria-label": getSliderAriaLabel(valueLength, index),
|
|
33
|
-
tabIndex: 0,
|
|
34
|
-
"data-handle-index": index
|
|
35
|
-
})
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export { SliderHandle };
|
|
40
|
-
//# sourceMappingURL=SliderHandle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { Tooltip, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n min: number;\n max: number;\n value: number;\n index: number;\n disabled: boolean;\n valueLength: number;\n style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n const { min, max, value, disabled, valueLength, index, style } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n return (\n <Tooltip content={value} placement=\"top\">\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"min\")]: value === min,\n [withBaseName(\"max\")]: value === max,\n })}\n style={style}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n aria-label={getSliderAriaLabel(valueLength, index)}\n tabIndex={0}\n data-handle-index={index}\n />\n </Tooltip>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,SAAU,EAAA,KAAA;AAAA,IACjC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,QACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,OAClC,CAAA;AAAA,MACD,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,KAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,YAAA,EAAY,kBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,MACjD,QAAU,EAAA,CAAA;AAAA,MACV,mBAAmB,EAAA,KAAA;AAAA,KACrB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
|
-
import { createSliderMarkLabelsStyle, createSliderMarkLabelStyles } from './styles.js';
|
|
5
|
-
import { isLabeledMark } from './utils.js';
|
|
6
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
-
import { useWindow } from '@salt-ds/window';
|
|
8
|
-
import css_248z from '../Slider.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltSliderMarkLabels");
|
|
11
|
-
function SliderMarkLabels(props) {
|
|
12
|
-
const { min, max, marks } = props;
|
|
13
|
-
const targetWindow = useWindow();
|
|
14
|
-
useComponentCssInjection({
|
|
15
|
-
testId: "salt-slider",
|
|
16
|
-
css: css_248z,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
const style = useMemo(
|
|
20
|
-
() => createSliderMarkLabelsStyle(min, max, marks),
|
|
21
|
-
[min, max, marks]
|
|
22
|
-
);
|
|
23
|
-
const labelStyles = useMemo(
|
|
24
|
-
() => createSliderMarkLabelStyles(marks),
|
|
25
|
-
[marks]
|
|
26
|
-
);
|
|
27
|
-
return /* @__PURE__ */ jsx("div", {
|
|
28
|
-
className: withBaseName(),
|
|
29
|
-
style,
|
|
30
|
-
children: marks.map((mark, i) => {
|
|
31
|
-
return /* @__PURE__ */ jsx("div", {
|
|
32
|
-
className: withBaseName("label"),
|
|
33
|
-
style: labelStyles[i],
|
|
34
|
-
children: isLabeledMark(mark) ? mark.label : `${mark}`
|
|
35
|
-
}, isLabeledMark(mark) ? mark.value : mark);
|
|
36
|
-
})
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export { SliderMarkLabels };
|
|
41
|
-
//# sourceMappingURL=SliderMarkLabels.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderMarkLabels.js","sources":["../src/slider/internal/SliderMarkLabels.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useMemo } from \"react\";\nimport type { SliderMark } from \"./SliderRailMarks\";\nimport {\n createSliderMarkLabelStyles,\n createSliderMarkLabelsStyle,\n} from \"./styles\";\nimport { isLabeledMark } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarkLabels\");\n\nexport interface SliderMarkLabelsProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderMarkLabels(props: SliderMarkLabelsProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderMarkLabelsStyle(min, max, marks),\n [min, max, marks],\n );\n const labelStyles = useMemo(\n () => createSliderMarkLabelStyles(marks),\n [marks],\n );\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div\n key={isLabeledMark(mark) ? mark.value : mark}\n className={withBaseName(\"label\")}\n style={labelStyles[i]}\n >\n {isLabeledMark(mark) ? mark.label : `${mark}`}\n </div>\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAQjD,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,2BAAA,CAA4B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IACjD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,MAAM,4BAA4B,KAAK,CAAA;AAAA,IACvC,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,OAAO,WAAY,CAAA,CAAA,CAAA;AAAA,QAElB,QAAc,EAAA,aAAA,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAJlC,aAAc,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,IAK1C,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import css_248z from '../Slider.css.js';
|
|
6
|
-
|
|
7
|
-
const withBaseName = makePrefixer("saltSliderRail");
|
|
8
|
-
function SliderRail() {
|
|
9
|
-
const targetWindow = useWindow();
|
|
10
|
-
useComponentCssInjection({
|
|
11
|
-
testId: "salt-slider",
|
|
12
|
-
css: css_248z,
|
|
13
|
-
window: targetWindow
|
|
14
|
-
});
|
|
15
|
-
return /* @__PURE__ */ jsx("div", {
|
|
16
|
-
className: withBaseName()
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export { SliderRail };
|
|
21
|
-
//# sourceMappingURL=SliderRail.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderRail.js","sources":["../src/slider/internal/SliderRail.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRail\");\n\nexport function SliderRail() {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n return <div className={withBaseName()} />;\n}\n"],"names":["sliderCss"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,SAAS,UAAa,GAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AACzC;;;;"}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { useMemo } from 'react';
|
|
5
|
-
import { createSliderRailMarksStyle, createHandleStyles } from './styles.js';
|
|
6
|
-
import { isMarkAtMax, isLabeledMark } from './utils.js';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import { useWindow } from '@salt-ds/window';
|
|
9
|
-
import css_248z from '../Slider.css.js';
|
|
10
|
-
|
|
11
|
-
const withBaseName = makePrefixer("saltSliderRailMarks");
|
|
12
|
-
function SliderRailMarks(props) {
|
|
13
|
-
const { min, max, marks } = props;
|
|
14
|
-
const targetWindow = useWindow();
|
|
15
|
-
useComponentCssInjection({
|
|
16
|
-
testId: "salt-slider",
|
|
17
|
-
css: css_248z,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const style = useMemo(
|
|
21
|
-
() => createSliderRailMarksStyle(min, max, marks),
|
|
22
|
-
[min, max, marks]
|
|
23
|
-
);
|
|
24
|
-
const marksLength = marks.length;
|
|
25
|
-
const markStyles = useMemo(
|
|
26
|
-
() => createHandleStyles(marksLength),
|
|
27
|
-
[marksLength]
|
|
28
|
-
);
|
|
29
|
-
return /* @__PURE__ */ jsx("div", {
|
|
30
|
-
className: withBaseName(),
|
|
31
|
-
style,
|
|
32
|
-
children: marks.map((mark, i) => {
|
|
33
|
-
return /* @__PURE__ */ jsx("div", {
|
|
34
|
-
className: clsx(withBaseName("mark"), {
|
|
35
|
-
[withBaseName("max")]: isMarkAtMax(max, mark)
|
|
36
|
-
}),
|
|
37
|
-
style: markStyles[i]
|
|
38
|
-
}, isLabeledMark(mark) ? mark.value : mark);
|
|
39
|
-
})
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export { SliderRailMarks };
|
|
44
|
-
//# sourceMappingURL=SliderRailMarks.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, useMemo } from \"react\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isLabeledMark, isMarkAtMax } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n value: number;\n label: ReactNode;\n}\n\nexport type SliderMark = number | LabeledMark;\n\nexport interface SliderRailMarksProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderRailMarksStyle(min, max, marks),\n [min, max, marks],\n );\n const marksLength = marks.length;\n const markStyles = useMemo(\n () => createHandleStyles(marksLength),\n [marksLength],\n );\n\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div\n key={isLabeledMark(mark) ? mark.value : mark}\n className={clsx(withBaseName(\"mark\"), {\n [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n })}\n style={markStyles[i]}\n />\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,0BAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,mBAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UACpC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAA,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,aAAc,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,IAK1C,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { isLabeledMark } from './utils.js';
|
|
2
|
-
|
|
3
|
-
function widthToPercentage(w, range) {
|
|
4
|
-
return `${Math.round(1e3 * w / range) * 0.1}%`;
|
|
5
|
-
}
|
|
6
|
-
function createGridTemplateColumns(min, max, values) {
|
|
7
|
-
const range = max - min;
|
|
8
|
-
const colWidths = [];
|
|
9
|
-
let prev = min;
|
|
10
|
-
for (const v of values) {
|
|
11
|
-
colWidths.push(v - prev);
|
|
12
|
-
prev = v;
|
|
13
|
-
}
|
|
14
|
-
colWidths.push(max - prev);
|
|
15
|
-
let auto = false;
|
|
16
|
-
const colTemplates = colWidths.map((w) => {
|
|
17
|
-
if (w === 0) {
|
|
18
|
-
return "0";
|
|
19
|
-
}
|
|
20
|
-
if (!auto) {
|
|
21
|
-
auto = true;
|
|
22
|
-
return "auto";
|
|
23
|
-
}
|
|
24
|
-
return widthToPercentage(w, range);
|
|
25
|
-
});
|
|
26
|
-
return colTemplates.join(" ");
|
|
27
|
-
}
|
|
28
|
-
function createTrackStyle(min, max, value) {
|
|
29
|
-
const values = Array.isArray(value) ? value : [value];
|
|
30
|
-
return {
|
|
31
|
-
gridTemplateColumns: createGridTemplateColumns(min, max, values)
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
function createHandleStyles(count) {
|
|
35
|
-
return [...Array(count).keys()].map((i) => ({
|
|
36
|
-
gridColumnStart: `${i + 2}`
|
|
37
|
-
}));
|
|
38
|
-
}
|
|
39
|
-
function createSliderRailMarksStyle(min, max, marks) {
|
|
40
|
-
return {
|
|
41
|
-
gridTemplateColumns: createGridTemplateColumns(
|
|
42
|
-
min,
|
|
43
|
-
max,
|
|
44
|
-
marks.map((mark) => isLabeledMark(mark) ? mark.value : mark)
|
|
45
|
-
)
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
function createSliderMarkLabelsStyle(min, max, marks) {
|
|
49
|
-
const range = max - min;
|
|
50
|
-
const colWidths = [];
|
|
51
|
-
let prev = min;
|
|
52
|
-
for (const m of marks) {
|
|
53
|
-
const w = isLabeledMark(m) ? m.value : m;
|
|
54
|
-
colWidths.push(w - prev);
|
|
55
|
-
colWidths.push(0);
|
|
56
|
-
prev = w;
|
|
57
|
-
}
|
|
58
|
-
colWidths.push(max - prev);
|
|
59
|
-
let auto = false;
|
|
60
|
-
const colTemplates = colWidths.map((w) => {
|
|
61
|
-
if (w === 0) {
|
|
62
|
-
return "0";
|
|
63
|
-
}
|
|
64
|
-
if (!auto) {
|
|
65
|
-
auto = true;
|
|
66
|
-
return "auto";
|
|
67
|
-
}
|
|
68
|
-
return widthToPercentage(w, range);
|
|
69
|
-
});
|
|
70
|
-
return {
|
|
71
|
-
gridTemplateColumns: colTemplates.join(" ")
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
function createSliderMarkLabelStyles(marks) {
|
|
75
|
-
const styles = [];
|
|
76
|
-
marks.forEach((mark, i) => {
|
|
77
|
-
styles.push({
|
|
78
|
-
gridColumnStart: 2 * i + 2
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
if (marks.length > 0) {
|
|
82
|
-
styles[0].justifySelf = "left";
|
|
83
|
-
}
|
|
84
|
-
if (marks.length > 1) {
|
|
85
|
-
styles[marks.length - 1].justifySelf = "right";
|
|
86
|
-
}
|
|
87
|
-
return styles;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
export { createHandleStyles, createSliderMarkLabelStyles, createSliderMarkLabelsStyle, createSliderRailMarksStyle, createTrackStyle };
|
|
91
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../src/slider/internal/styles.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { SliderValue } from \"../types\";\nimport type { SliderMark } from \"./SliderRailMarks\";\nimport { isLabeledMark } from \"./utils\";\n\nfunction widthToPercentage(w: number, range: number) {\n return `${Math.round((1000 * w) / range) * 0.1}%`;\n}\n\nfunction createGridTemplateColumns(\n min: number,\n max: number,\n values: number[],\n): string {\n const range = max - min;\n const colWidths: number[] = [];\n let prev = min;\n for (const v of values) {\n colWidths.push(v - prev);\n prev = v;\n }\n colWidths.push(max - prev);\n let auto = false;\n const colTemplates = colWidths.map((w) => {\n if (w === 0) {\n return \"0\";\n }\n if (!auto) {\n auto = true;\n return \"auto\";\n }\n return widthToPercentage(w, range);\n });\n return colTemplates.join(\" \");\n}\n\nexport function createTrackStyle(\n min: number,\n max: number,\n value: SliderValue,\n): CSSProperties {\n const values = Array.isArray(value) ? value : [value];\n return {\n gridTemplateColumns: createGridTemplateColumns(min, max, values),\n };\n}\n\nexport function createHandleStyles(count: number) {\n return [...Array(count).keys()].map((i) => ({\n gridColumnStart: `${i + 2}`,\n }));\n}\n\nexport function createSliderRailMarksStyle(\n min: number,\n max: number,\n marks: SliderMark[],\n): CSSProperties {\n return {\n gridTemplateColumns: createGridTemplateColumns(\n min,\n max,\n marks.map((mark) => (isLabeledMark(mark) ? mark.value : mark)),\n ),\n };\n}\n\nexport function createSliderMarkLabelsStyle(\n min: number,\n max: number,\n marks: SliderMark[],\n): CSSProperties {\n const range = max - min;\n const colWidths: number[] = [];\n let prev = min;\n for (const m of marks) {\n const w = isLabeledMark(m) ? m.value : m;\n colWidths.push(w - prev);\n colWidths.push(0);\n prev = w;\n }\n colWidths.push(max - prev);\n let auto = false;\n const colTemplates = colWidths.map((w) => {\n if (w === 0) {\n return \"0\";\n }\n if (!auto) {\n auto = true;\n return \"auto\";\n }\n return widthToPercentage(w, range);\n });\n\n return {\n gridTemplateColumns: colTemplates.join(\" \"),\n };\n}\n\nexport function createSliderMarkLabelStyles(\n marks: SliderMark[],\n): CSSProperties[] {\n const styles: CSSProperties[] = [];\n marks.forEach((mark, i) => {\n styles.push({\n gridColumnStart: 2 * i + 2,\n });\n });\n if (marks.length > 0) {\n styles[0].justifySelf = \"left\";\n }\n if (marks.length > 1) {\n styles[marks.length - 1].justifySelf = \"right\";\n }\n return styles;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { getHandleIndex, roundValue, clampValue } from './utils.js';
|
|
2
|
-
|
|
3
|
-
function useSliderKeyDown(value, min, max, pageStep, step, updateValueItem, setValue, onChange) {
|
|
4
|
-
return (event) => {
|
|
5
|
-
const handleElement = event.target;
|
|
6
|
-
const handleIndex = getHandleIndex(handleElement);
|
|
7
|
-
let valueItem = Array.isArray(value) ? value[handleIndex] : value;
|
|
8
|
-
switch (event.key) {
|
|
9
|
-
case "Home":
|
|
10
|
-
valueItem = min;
|
|
11
|
-
break;
|
|
12
|
-
case "End":
|
|
13
|
-
valueItem = max;
|
|
14
|
-
break;
|
|
15
|
-
case "PageUp":
|
|
16
|
-
valueItem += pageStep;
|
|
17
|
-
break;
|
|
18
|
-
case "PageDown":
|
|
19
|
-
valueItem -= pageStep;
|
|
20
|
-
break;
|
|
21
|
-
case "ArrowUp":
|
|
22
|
-
case "ArrowRight":
|
|
23
|
-
valueItem += step;
|
|
24
|
-
break;
|
|
25
|
-
case "ArrowDown":
|
|
26
|
-
case "ArrowLeft":
|
|
27
|
-
valueItem -= step;
|
|
28
|
-
break;
|
|
29
|
-
default:
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
event.preventDefault();
|
|
33
|
-
valueItem = roundValue(valueItem, step);
|
|
34
|
-
valueItem = clampValue(valueItem, min, max);
|
|
35
|
-
const newValue = updateValueItem(value, handleIndex, valueItem);
|
|
36
|
-
if (newValue !== value) {
|
|
37
|
-
setValue(newValue);
|
|
38
|
-
if (onChange) {
|
|
39
|
-
onChange(newValue);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export { useSliderKeyDown };
|
|
46
|
-
//# sourceMappingURL=useSliderKeyDown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSliderKeyDown.js","sources":["../src/slider/internal/useSliderKeyDown.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nimport {\n type UpdateValueItem,\n clampValue,\n getHandleIndex,\n roundValue,\n} from \"./utils\";\n\nexport function useSliderKeyDown(\n value: SliderValue,\n min: number,\n max: number,\n pageStep: number,\n step: number,\n updateValueItem: UpdateValueItem,\n setValue: SliderChangeHandler,\n onChange?: SliderChangeHandler,\n) {\n return (event: KeyboardEvent) => {\n const handleElement = event.target as HTMLDivElement;\n const handleIndex = getHandleIndex(handleElement);\n let valueItem: number = Array.isArray(value) ? value[handleIndex] : value;\n switch (event.key) {\n case \"Home\":\n valueItem = min;\n break;\n case \"End\":\n valueItem = max;\n break;\n case \"PageUp\":\n valueItem += pageStep;\n break;\n case \"PageDown\":\n valueItem -= pageStep;\n break;\n case \"ArrowUp\":\n case \"ArrowRight\":\n valueItem += step;\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n valueItem -= step;\n break;\n default:\n return;\n }\n event.preventDefault();\n valueItem = roundValue(valueItem, step);\n valueItem = clampValue(valueItem, min, max);\n const newValue = updateValueItem(value, handleIndex, valueItem);\n if (newValue !== value) {\n setValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n }\n };\n}\n"],"names":[],"mappings":";;AASgB,SAAA,gBAAA,CACd,OACA,GACA,EAAA,GAAA,EACA,UACA,IACA,EAAA,eAAA,EACA,UACA,QACA,EAAA;AACA,EAAA,OAAO,CAAC,KAAyB,KAAA;AAC/B,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,eAAe,aAAa,CAAA,CAAA;AAChD,IAAA,IAAI,YAAoB,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,GAAI,MAAM,WAAe,CAAA,GAAA,KAAA,CAAA;AACpE,IAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,MACP,KAAA,MAAA;AACH,QAAY,SAAA,GAAA,GAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAY,SAAA,GAAA,GAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,QAAA;AACH,QAAa,SAAA,IAAA,QAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,UAAA;AACH,QAAa,SAAA,IAAA,QAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,SAAA,CAAA;AAAA,MACA,KAAA,YAAA;AACH,QAAa,SAAA,IAAA,IAAA,CAAA;AACb,QAAA,MAAA;AAAA,MACG,KAAA,WAAA,CAAA;AAAA,MACA,KAAA,WAAA;AACH,QAAa,SAAA,IAAA,IAAA,CAAA;AACb,QAAA,MAAA;AAAA,MAAA;AAEA,QAAA,OAAA;AAAA,KAAA;AAEJ,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAY,SAAA,GAAA,UAAA,CAAW,WAAW,IAAI,CAAA,CAAA;AACtC,IAAY,SAAA,GAAA,UAAA,CAAW,SAAW,EAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAC1C,IAAA,MAAM,QAAW,GAAA,eAAA,CAAgB,KAAO,EAAA,WAAA,EAAa,SAAS,CAAA,CAAA;AAC9D,IAAA,IAAI,aAAa,KAAO,EAAA;AACtB,MAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { useRef, useEffect, useCallback } from 'react';
|
|
2
|
-
import { roundValue, clampValue } from './utils.js';
|
|
3
|
-
|
|
4
|
-
const valueFromClientX = (context, x) => {
|
|
5
|
-
const { min, max, step, trackRef } = context;
|
|
6
|
-
const rect = trackRef.current.getBoundingClientRect();
|
|
7
|
-
const localX = x - rect.x;
|
|
8
|
-
let v = localX / rect.width * (max - min) + min;
|
|
9
|
-
v = roundValue(v, step);
|
|
10
|
-
v = clampValue(v, min, max);
|
|
11
|
-
return v;
|
|
12
|
-
};
|
|
13
|
-
function getNearestHandle(value, clickValue) {
|
|
14
|
-
if (!Array.isArray(value)) {
|
|
15
|
-
return 0;
|
|
16
|
-
}
|
|
17
|
-
let minDistance = Number.MAX_VALUE;
|
|
18
|
-
let handleIndex = -1;
|
|
19
|
-
value.forEach((v, i) => {
|
|
20
|
-
const d = Math.abs(clickValue - v);
|
|
21
|
-
if (d < minDistance) {
|
|
22
|
-
minDistance = d;
|
|
23
|
-
handleIndex = i;
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
return handleIndex;
|
|
27
|
-
}
|
|
28
|
-
function useSliderMouseDown(trackRef, value, min, max, step, updateValueItem, setValue, onChange) {
|
|
29
|
-
const mouseContext = useRef({
|
|
30
|
-
min,
|
|
31
|
-
max,
|
|
32
|
-
step,
|
|
33
|
-
value,
|
|
34
|
-
trackRef,
|
|
35
|
-
updateValueItem,
|
|
36
|
-
setValue,
|
|
37
|
-
onChange
|
|
38
|
-
});
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
const c = mouseContext.current;
|
|
41
|
-
c.min = min;
|
|
42
|
-
c.max = max;
|
|
43
|
-
c.step = step;
|
|
44
|
-
c.value = value;
|
|
45
|
-
c.updateValueItem = updateValueItem;
|
|
46
|
-
c.onChange = onChange;
|
|
47
|
-
c.setValue = setValue;
|
|
48
|
-
}, [min, max, step, value, setValue, updateValueItem, onChange]);
|
|
49
|
-
const onMouseMove = useCallback((event) => {
|
|
50
|
-
const { handleIndex, value: value2, updateValueItem: updateValueItem2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
|
|
51
|
-
if (handleIndex === void 0) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
const { clientX } = event;
|
|
55
|
-
const clickValue = valueFromClientX(mouseContext.current, clientX);
|
|
56
|
-
const newValue = updateValueItem2(value2, handleIndex, clickValue);
|
|
57
|
-
if (newValue !== value2) {
|
|
58
|
-
setValue2(newValue);
|
|
59
|
-
if (onChange2) {
|
|
60
|
-
onChange2(newValue);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}, []);
|
|
64
|
-
const onMouseUp = useCallback(() => {
|
|
65
|
-
document.removeEventListener("mouseup", onMouseUp);
|
|
66
|
-
document.removeEventListener("mousemove", onMouseMove);
|
|
67
|
-
mouseContext.current.handleIndex = void 0;
|
|
68
|
-
}, [onMouseMove]);
|
|
69
|
-
return useCallback(
|
|
70
|
-
(event) => {
|
|
71
|
-
const { value: value2, setValue: setValue2, onChange: onChange2 } = mouseContext.current;
|
|
72
|
-
document.addEventListener("mouseup", onMouseUp);
|
|
73
|
-
document.addEventListener("mousemove", onMouseMove);
|
|
74
|
-
const { clientX } = event;
|
|
75
|
-
const clickValue = valueFromClientX(mouseContext.current, clientX);
|
|
76
|
-
const handleIndex = getNearestHandle(value2, clickValue);
|
|
77
|
-
mouseContext.current.handleIndex = handleIndex;
|
|
78
|
-
const newValue = updateValueItem(value2, handleIndex, clickValue);
|
|
79
|
-
if (newValue !== value2) {
|
|
80
|
-
setValue2(newValue);
|
|
81
|
-
if (onChange2) {
|
|
82
|
-
onChange2(newValue);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
event.preventDefault();
|
|
86
|
-
},
|
|
87
|
-
[onMouseMove, onMouseUp]
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
export { useSliderMouseDown };
|
|
92
|
-
//# sourceMappingURL=useSliderMouseDown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSliderMouseDown.js","sources":["../src/slider/internal/useSliderMouseDown.ts"],"sourcesContent":["import {\n type MouseEvent as ReactMouseEvent,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nimport { type UpdateValueItem, clampValue, roundValue } from \"./utils\";\n\ninterface MouseContext {\n min: number;\n max: number;\n step: number;\n value: SliderValue;\n trackRef: RefObject<HTMLDivElement>;\n handleIndex?: number;\n updateValueItem: UpdateValueItem;\n setValue: SliderChangeHandler;\n onChange?: SliderChangeHandler;\n}\n\nconst valueFromClientX = (context: MouseContext, x: number) => {\n const { min, max, step, trackRef } = context;\n const rect = trackRef.current!.getBoundingClientRect();\n const localX = x - rect.x;\n let v = (localX / rect.width) * (max - min) + min;\n v = roundValue(v, step);\n v = clampValue(v, min, max);\n return v;\n};\n\nfunction getNearestHandle(value: SliderValue, clickValue: number): number {\n if (!Array.isArray(value)) {\n return 0;\n }\n let minDistance = Number.MAX_VALUE;\n let handleIndex = -1;\n value.forEach((v, i) => {\n const d = Math.abs(clickValue - v);\n if (d < minDistance) {\n minDistance = d;\n handleIndex = i;\n }\n });\n return handleIndex;\n}\n\nexport function useSliderMouseDown(\n trackRef: RefObject<HTMLDivElement>,\n value: SliderValue,\n min: number,\n max: number,\n step: number,\n updateValueItem: UpdateValueItem,\n setValue: SliderChangeHandler,\n onChange?: SliderChangeHandler,\n) {\n const mouseContext = useRef<MouseContext>({\n min,\n max,\n step,\n value,\n trackRef,\n updateValueItem,\n setValue,\n onChange,\n });\n\n useEffect(() => {\n const c = mouseContext.current;\n c.min = min;\n c.max = max;\n c.step = step;\n c.value = value;\n c.updateValueItem = updateValueItem;\n c.onChange = onChange;\n c.setValue = setValue;\n }, [min, max, step, value, setValue, updateValueItem, onChange]);\n\n const onMouseMove = useCallback((event: MouseEvent) => {\n const { handleIndex, value, updateValueItem, setValue, onChange } =\n mouseContext.current;\n if (handleIndex === undefined) {\n return;\n }\n const { clientX } = event;\n const clickValue = valueFromClientX(mouseContext.current, clientX);\n const newValue = updateValueItem(value, handleIndex, clickValue);\n if (newValue !== value) {\n setValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n }\n }, []);\n\n const onMouseUp = useCallback(() => {\n document.removeEventListener(\"mouseup\", onMouseUp);\n document.removeEventListener(\"mousemove\", onMouseMove);\n mouseContext.current.handleIndex = undefined;\n }, [onMouseMove]);\n\n return useCallback(\n (event: ReactMouseEvent) => {\n const { value, setValue, onChange } = mouseContext.current;\n document.addEventListener(\"mouseup\", onMouseUp);\n document.addEventListener(\"mousemove\", onMouseMove);\n\n const { clientX } = event;\n const clickValue = valueFromClientX(mouseContext.current, clientX);\n\n const handleIndex = getNearestHandle(value, clickValue);\n mouseContext.current.handleIndex = handleIndex;\n const newValue = updateValueItem(value, handleIndex, clickValue);\n\n if (newValue !== value) {\n setValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n }\n\n event.preventDefault();\n },\n [onMouseMove, onMouseUp],\n );\n}\n"],"names":["value","updateValueItem","setValue","onChange"],"mappings":"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"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
import { useInterval } from './useInterval.js';
|
|
3
|
-
|
|
4
|
-
const INTERVAL_DELAY = 300;
|
|
5
|
-
function useSpinner(activationFn, isAtLimit) {
|
|
6
|
-
const [buttonDown, setButtonDown] = useState(false);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
if (isAtLimit)
|
|
9
|
-
setButtonDown(false);
|
|
10
|
-
}, [isAtLimit]);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
const cancelInterval = () => setButtonDown(false);
|
|
13
|
-
window.addEventListener("keyup", cancelInterval);
|
|
14
|
-
window.addEventListener("mouseup", cancelInterval);
|
|
15
|
-
return () => {
|
|
16
|
-
window.removeEventListener("keyup", cancelInterval);
|
|
17
|
-
window.removeEventListener("mouseup", cancelInterval);
|
|
18
|
-
};
|
|
19
|
-
}, []);
|
|
20
|
-
const activate = () => {
|
|
21
|
-
activationFn();
|
|
22
|
-
setButtonDown(true);
|
|
23
|
-
};
|
|
24
|
-
useInterval(activationFn, buttonDown ? INTERVAL_DELAY : null);
|
|
25
|
-
return { activate, buttonDown };
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export { useSpinner };
|
|
29
|
-
//# sourceMappingURL=useSpinner.js.map
|