@salt-ds/lab 1.0.0-alpha.61 → 1.0.0-alpha.63
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 +102 -0
- package/css/salt-lab.css +623 -324
- package/dist-cjs/date-picker/DatePicker.js +4 -3
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlay.js +0 -4
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +65 -43
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +10 -26
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +8 -14
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/useDatePicker.js +10 -7
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/date-picker/useKeyboard.js +23 -0
- package/dist-cjs/date-picker/useKeyboard.js.map +1 -0
- package/dist-cjs/index.js +19 -8
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +6 -0
- package/dist-cjs/number-input/NumberInput.css.js.map +1 -0
- package/dist-cjs/{stepper-input/StepperInput.js → number-input/NumberInput.js} +15 -15
- package/dist-cjs/number-input/NumberInput.js.map +1 -0
- package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-cjs/number-input/internal/useInterval.js.map +1 -0
- package/dist-cjs/number-input/internal/utils.js.map +1 -0
- package/dist-cjs/{stepper-input/useStepperInput.js → number-input/useNumberInput.js} +3 -3
- package/dist-cjs/number-input/useNumberInput.js.map +1 -0
- package/dist-cjs/slider/RangeSlider.js +161 -0
- package/dist-cjs/slider/RangeSlider.js.map +1 -0
- package/dist-cjs/slider/Slider.js +104 -70
- package/dist-cjs/slider/Slider.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.css.js +6 -0
- package/dist-cjs/slider/internal/SliderThumb.css.js.map +1 -0
- package/dist-cjs/slider/internal/SliderThumb.js +136 -70
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTooltip.css.js +6 -0
- package/dist-cjs/slider/internal/SliderTooltip.css.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTooltip.js +43 -0
- package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTrack.css.js +6 -0
- package/dist-cjs/slider/internal/SliderTrack.css.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTrack.js +160 -80
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js +194 -0
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/useSliderThumb.js +123 -0
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/utils.js +97 -72
- package/dist-cjs/slider/internal/utils.js.map +1 -1
- package/dist-cjs/splitter/SplitHandle.css.js +6 -0
- package/dist-cjs/splitter/SplitHandle.css.js.map +1 -0
- package/dist-cjs/splitter/SplitHandle.js +60 -0
- package/dist-cjs/splitter/SplitHandle.js.map +1 -0
- package/dist-cjs/splitter/SplitPanel.css.js +6 -0
- package/dist-cjs/splitter/SplitPanel.css.js.map +1 -0
- package/dist-cjs/splitter/SplitPanel.js +37 -0
- package/dist-cjs/splitter/SplitPanel.js.map +1 -0
- package/dist-cjs/splitter/Splitter.js +31 -0
- package/dist-cjs/splitter/Splitter.js.map +1 -0
- package/dist-cjs/splitter/utils.js +18 -0
- package/dist-cjs/splitter/utils.js.map +1 -0
- package/dist-cjs/stepped-tracker/stepReducer.js +127 -81
- package/dist-cjs/stepped-tracker/stepReducer.js.map +1 -1
- package/dist-cjs/stepped-tracker/useStepReducer.js +6 -4
- package/dist-cjs/stepped-tracker/useStepReducer.js.map +1 -1
- package/dist-cjs/stepped-tracker/utils.js +44 -9
- package/dist-cjs/stepped-tracker/utils.js.map +1 -1
- package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.js +10 -16
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.js +3 -2
- package/dist-cjs/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-cjs/tabs-next/TabsNext.js +4 -51
- package/dist-cjs/tabs-next/TabsNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabsNextContext.js +1 -1
- package/dist-cjs/tabs-next/TabsNextContext.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useCollection.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useOverflow.js +48 -5
- package/dist-cjs/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js +93 -0
- package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js.map +1 -0
- package/dist-es/date-picker/DatePicker.js +4 -3
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js +1 -1
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerContext.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlay.js +0 -4
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +67 -45
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +10 -26
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +8 -14
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/useDatePicker.js +10 -7
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/date-picker/useKeyboard.js +21 -0
- package/dist-es/date-picker/useKeyboard.js.map +1 -0
- package/dist-es/index.js +9 -4
- package/dist-es/index.js.map +1 -1
- package/dist-es/number-input/NumberInput.css.js +4 -0
- package/dist-es/number-input/NumberInput.css.js.map +1 -0
- package/dist-es/{stepper-input/StepperInput.js → number-input/NumberInput.js} +14 -14
- package/dist-es/number-input/NumberInput.js.map +1 -0
- package/dist-es/number-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-es/number-input/internal/useInterval.js.map +1 -0
- package/dist-es/number-input/internal/utils.js.map +1 -0
- package/dist-es/{stepper-input/useStepperInput.js → number-input/useNumberInput.js} +3 -3
- package/dist-es/number-input/useNumberInput.js.map +1 -0
- package/dist-es/slider/RangeSlider.js +159 -0
- package/dist-es/slider/RangeSlider.js.map +1 -0
- package/dist-es/slider/Slider.js +107 -73
- package/dist-es/slider/Slider.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.css.js +4 -0
- package/dist-es/slider/internal/SliderThumb.css.js.map +1 -0
- package/dist-es/slider/internal/SliderThumb.js +138 -72
- package/dist-es/slider/internal/SliderThumb.js.map +1 -1
- package/dist-es/slider/internal/SliderTooltip.css.js +4 -0
- package/dist-es/slider/internal/SliderTooltip.css.js.map +1 -0
- package/dist-es/slider/internal/SliderTooltip.js +41 -0
- package/dist-es/slider/internal/SliderTooltip.js.map +1 -0
- package/dist-es/slider/internal/SliderTrack.css.js +4 -0
- package/dist-es/slider/internal/SliderTrack.css.js.map +1 -0
- package/dist-es/slider/internal/SliderTrack.js +164 -84
- package/dist-es/slider/internal/SliderTrack.js.map +1 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js +192 -0
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -0
- package/dist-es/slider/internal/useSliderThumb.js +121 -0
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -0
- package/dist-es/slider/internal/utils.js +91 -63
- package/dist-es/slider/internal/utils.js.map +1 -1
- package/dist-es/splitter/SplitHandle.css.js +4 -0
- package/dist-es/splitter/SplitHandle.css.js.map +1 -0
- package/dist-es/splitter/SplitHandle.js +58 -0
- package/dist-es/splitter/SplitHandle.js.map +1 -0
- package/dist-es/splitter/SplitPanel.css.js +4 -0
- package/dist-es/splitter/SplitPanel.css.js.map +1 -0
- package/dist-es/splitter/SplitPanel.js +35 -0
- package/dist-es/splitter/SplitPanel.js.map +1 -0
- package/dist-es/splitter/Splitter.js +27 -0
- package/dist-es/splitter/Splitter.js.map +1 -0
- package/dist-es/splitter/utils.js +15 -0
- package/dist-es/splitter/utils.js.map +1 -0
- package/dist-es/stepped-tracker/stepReducer.js +128 -82
- package/dist-es/stepped-tracker/stepReducer.js.map +1 -1
- package/dist-es/stepped-tracker/useStepReducer.js +7 -5
- package/dist-es/stepped-tracker/useStepReducer.js.map +1 -1
- package/dist-es/stepped-tracker/utils.js +43 -9
- package/dist-es/stepped-tracker/utils.js.map +1 -1
- package/dist-es/tabs-next/TabListNext.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.js +11 -17
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-es/tabs-next/TabOverflowList.js +4 -3
- package/dist-es/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-es/tabs-next/TabsNext.js +5 -52
- package/dist-es/tabs-next/TabsNext.js.map +1 -1
- package/dist-es/tabs-next/TabsNextContext.js +1 -1
- package/dist-es/tabs-next/TabsNextContext.js.map +1 -1
- package/dist-es/tabs-next/hooks/useCollection.js.map +1 -1
- package/dist-es/tabs-next/hooks/useOverflow.js +49 -6
- package/dist-es/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-es/tabs-next/hooks/useRestoreActiveTab.js +91 -0
- package/dist-es/tabs-next/hooks/useRestoreActiveTab.js.map +1 -0
- package/dist-types/date-picker/DatePicker.d.ts +6 -1
- package/dist-types/date-picker/DatePickerContext.d.ts +2 -1
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +18 -4
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +1 -1
- package/dist-types/date-picker/index.d.ts +1 -0
- package/dist-types/date-picker/useKeyboard.d.ts +14 -0
- package/dist-types/index.d.ts +5 -4
- package/dist-types/{stepper-input/StepperInput.d.ts → number-input/NumberInput.d.ts} +7 -7
- package/dist-types/number-input/index.d.ts +2 -0
- package/dist-types/{stepper-input/useStepperInput.d.ts → number-input/useNumberInput.d.ts} +2 -2
- package/dist-types/slider/RangeSlider.d.ts +91 -0
- package/dist-types/slider/Slider.d.ts +74 -15
- package/dist-types/slider/index.d.ts +1 -1
- package/dist-types/slider/internal/SliderThumb.d.ts +20 -7
- package/dist-types/slider/internal/SliderTooltip.d.ts +6 -0
- package/dist-types/slider/internal/SliderTrack.d.ts +23 -3
- package/dist-types/slider/internal/useRangeSliderThumb.d.ts +26 -0
- package/dist-types/slider/internal/useSliderThumb.d.ts +24 -0
- package/dist-types/slider/internal/utils.d.ts +17 -15
- package/dist-types/splitter/SplitHandle.d.ts +21 -0
- package/dist-types/splitter/SplitPanel.d.ts +10 -0
- package/dist-types/splitter/Splitter.d.ts +22 -0
- package/dist-types/splitter/index.d.ts +4 -0
- package/dist-types/splitter/utils.d.ts +4 -0
- package/dist-types/stepped-tracker/Step.types.d.ts +2 -4
- package/dist-types/stepped-tracker/stepReducer.types.d.ts +6 -4
- package/dist-types/stepped-tracker/utils.d.ts +6 -3
- package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
- package/dist-types/tabs-next/TabsNextContext.d.ts +1 -1
- package/dist-types/tabs-next/hooks/useOverflow.d.ts +1 -1
- package/dist-types/tabs-next/hooks/useRestoreActiveTab.d.ts +10 -0
- package/package.json +4 -3
- package/dist-cjs/slider/Slider.css.js +0 -6
- package/dist-cjs/slider/Slider.css.js.map +0 -1
- package/dist-cjs/slider/internal/SliderContext.js +0 -19
- package/dist-cjs/slider/internal/SliderContext.js.map +0 -1
- package/dist-cjs/slider/internal/SliderMarks.js +0 -29
- package/dist-cjs/slider/internal/SliderMarks.js.map +0 -1
- package/dist-cjs/slider/internal/SliderSelection.js +0 -33
- package/dist-cjs/slider/internal/SliderSelection.js.map +0 -1
- package/dist-cjs/slider/internal/useKeyDownThumb.js +0 -50
- package/dist-cjs/slider/internal/useKeyDownThumb.js.map +0 -1
- package/dist-cjs/stepper-input/StepperInput.css.js +0 -6
- package/dist-cjs/stepper-input/StepperInput.css.js.map +0 -1
- package/dist-cjs/stepper-input/StepperInput.js.map +0 -1
- package/dist-cjs/stepper-input/internal/useActivateWhileMouseDown.js.map +0 -1
- package/dist-cjs/stepper-input/internal/useInterval.js.map +0 -1
- package/dist-cjs/stepper-input/internal/utils.js.map +0 -1
- package/dist-cjs/stepper-input/useStepperInput.js.map +0 -1
- package/dist-es/slider/Slider.css.js +0 -4
- package/dist-es/slider/Slider.css.js.map +0 -1
- package/dist-es/slider/internal/SliderContext.js +0 -16
- package/dist-es/slider/internal/SliderContext.js.map +0 -1
- package/dist-es/slider/internal/SliderMarks.js +0 -27
- package/dist-es/slider/internal/SliderMarks.js.map +0 -1
- package/dist-es/slider/internal/SliderSelection.js +0 -31
- package/dist-es/slider/internal/SliderSelection.js.map +0 -1
- package/dist-es/slider/internal/useKeyDownThumb.js +0 -48
- package/dist-es/slider/internal/useKeyDownThumb.js.map +0 -1
- package/dist-es/stepper-input/StepperInput.css.js +0 -4
- package/dist-es/stepper-input/StepperInput.css.js.map +0 -1
- package/dist-es/stepper-input/StepperInput.js.map +0 -1
- package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map +0 -1
- package/dist-es/stepper-input/internal/useInterval.js.map +0 -1
- package/dist-es/stepper-input/internal/utils.js.map +0 -1
- package/dist-es/stepper-input/useStepperInput.js.map +0 -1
- package/dist-types/slider/internal/SliderContext.d.ts +0 -11
- package/dist-types/slider/internal/SliderMarks.d.ts +0 -7
- package/dist-types/slider/internal/SliderSelection.d.ts +0 -4
- package/dist-types/slider/internal/index.d.ts +0 -3
- package/dist-types/slider/internal/useKeyDownThumb.d.ts +0 -2
- package/dist-types/slider/types.d.ts +0 -4
- package/dist-types/stepper-input/index.d.ts +0 -2
- /package/dist-cjs/{stepper-input → number-input}/internal/useActivateWhileMouseDown.js +0 -0
- /package/dist-cjs/{stepper-input → number-input}/internal/useInterval.js +0 -0
- /package/dist-cjs/{stepper-input → number-input}/internal/utils.js +0 -0
- /package/dist-es/{stepper-input → number-input}/internal/useActivateWhileMouseDown.js +0 -0
- /package/dist-es/{stepper-input → number-input}/internal/useInterval.js +0 -0
- /package/dist-es/{stepper-input → number-input}/internal/utils.js +0 -0
- /package/dist-types/{stepper-input → number-input}/internal/useActivateWhileMouseDown.d.ts +0 -0
- /package/dist-types/{stepper-input → number-input}/internal/useInterval.d.ts +0 -0
- /package/dist-types/{stepper-input → number-input}/internal/utils.d.ts +0 -0
|
@@ -56,7 +56,7 @@ function useDatePicker(props, ref) {
|
|
|
56
56
|
const applySingle = react.useCallback(
|
|
57
57
|
(event, date) => {
|
|
58
58
|
setCancelled(false);
|
|
59
|
-
setOpen(false);
|
|
59
|
+
setOpen(false, event.nativeEvent, "apply");
|
|
60
60
|
if (selectionVariant === "single") {
|
|
61
61
|
onApply == null ? void 0 : onApply(event, date);
|
|
62
62
|
}
|
|
@@ -84,7 +84,7 @@ function useDatePicker(props, ref) {
|
|
|
84
84
|
const applyRange = react.useCallback(
|
|
85
85
|
(event, date) => {
|
|
86
86
|
setCancelled(false);
|
|
87
|
-
setOpen(false);
|
|
87
|
+
setOpen(false, event.nativeEvent, "apply");
|
|
88
88
|
if (selectionVariant === "range") {
|
|
89
89
|
onApply == null ? void 0 : onApply(event, date);
|
|
90
90
|
}
|
|
@@ -109,11 +109,14 @@ function useDatePicker(props, ref) {
|
|
|
109
109
|
setSelectedDate
|
|
110
110
|
]
|
|
111
111
|
);
|
|
112
|
-
const cancel = react.useCallback(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
const cancel = react.useCallback(
|
|
113
|
+
(event) => {
|
|
114
|
+
setCancelled(true);
|
|
115
|
+
setOpen(false, event, "cancel");
|
|
116
|
+
onCancel == null ? void 0 : onCancel();
|
|
117
|
+
},
|
|
118
|
+
[setCancelled, setOpen, onCancel]
|
|
119
|
+
);
|
|
117
120
|
const returnValue = {
|
|
118
121
|
state: {
|
|
119
122
|
selectionVariant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n /** If `true`, the component is disabled. */\n disabled?: boolean;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: TDate;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: TDate;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n}\n\n/**\n * Props for single date selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection<TDate> | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection<TDate> | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection<TDate> | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n TDate extends DateFrameworkType,\n SelectionVariant,\n> = SelectionVariant extends \"single\"\n ? UseDatePickerSingleProps<TDate>\n : SelectionVariant extends \"range\"\n ? UseDatePickerRangeProps<TDate>\n : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n>(\n props: UseDatePickerProps<TDate, SelectionVariant>,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n const {\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<TDate>();\n const {\n readOnly = false,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>();\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [enableApply, setEnableApply] = useState<boolean>(false);\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false);\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [setCancelled, setOpen, onApply],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details: DateInputSingleDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date) {\n applySingle(event, date);\n }\n },\n [\n applySingle,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false);\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [onApply, setCancelled, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date?.startDate && date?.endDate) {\n applyRange(event, date);\n }\n },\n [\n applyRange,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const cancel = useCallback(() => {\n setCancelled(true);\n setOpen(false);\n onCancel?.();\n }, [setCancelled, setOpen, onCancel]);\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n },\n helpers: {\n cancel,\n setEnableApply,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState<TDate>;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState<TDate>;\n}\n"],"names":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n /** If `true`, the component is disabled. */\n disabled?: boolean;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: TDate;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: TDate;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n}\n\n/**\n * Props for single date selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection<TDate> | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection<TDate> | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection<TDate> | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n TDate extends DateFrameworkType,\n SelectionVariant,\n> = SelectionVariant extends \"single\"\n ? UseDatePickerSingleProps<TDate>\n : SelectionVariant extends \"range\"\n ? UseDatePickerRangeProps<TDate>\n : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n>(\n props: UseDatePickerProps<TDate, SelectionVariant>,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n const {\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<TDate>();\n const {\n readOnly = false,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>();\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [enableApply, setEnableApply] = useState<boolean>(false);\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [setCancelled, setOpen, onApply],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details: DateInputSingleDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date) {\n applySingle(event, date);\n }\n },\n [\n applySingle,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [onApply, setCancelled, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && date?.startDate && date?.endDate) {\n applyRange(event, date);\n }\n },\n [\n applyRange,\n enableApply,\n onSelectionChange,\n selectionVariant,\n setSelectedDate,\n ],\n );\n\n const cancel = useCallback(\n (event?: Event) => {\n setCancelled(true);\n setOpen(false, event, \"cancel\");\n onCancel?.();\n },\n [setCancelled, setOpen, onCancel],\n );\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n },\n helpers: {\n cancel,\n setEnableApply,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState<TDate>;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState<TDate>;\n}\n"],"names":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
function useKeyboard(context, props) {
|
|
6
|
+
const { onOpenChange } = context;
|
|
7
|
+
const { enabled = true } = props;
|
|
8
|
+
const reference = react.useMemo(
|
|
9
|
+
() => ({
|
|
10
|
+
onKeyDown(event) {
|
|
11
|
+
if (event.key === "ArrowDown") {
|
|
12
|
+
event.preventDefault();
|
|
13
|
+
onOpenChange(true, event.nativeEvent, "reference-press");
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}),
|
|
17
|
+
[onOpenChange]
|
|
18
|
+
);
|
|
19
|
+
return react.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
exports.useKeyboard = useKeyboard;
|
|
23
|
+
//# sourceMappingURL=useKeyboard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useKeyboard.js","sources":["../src/date-picker/useKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nexport interface UseKeyboardProps {\n /**\n * Whether the hook is enabled\n * @default true\n */\n enabled?: boolean;\n}\n\n/**\n * Floating UI Interactions hook, that will open DatePicker on keydown\n * @param context\n * @param props\n */\nexport function useKeyboard(\n context: FloatingContext,\n props: UseKeyboardProps,\n): ElementProps {\n const { onOpenChange } = context;\n const { enabled = true } = props;\n const reference: ElementProps[\"reference\"] = useMemo(\n () => ({\n onKeyDown(event) {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n onOpenChange(true, event.nativeEvent, \"reference-press\");\n }\n },\n }),\n [onOpenChange],\n );\n\n return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":["useMemo"],"mappings":";;;;AAgBgB,SAAA,WAAA,CACd,SACA,KACc,EAAA;AACd,EAAM,MAAA,EAAE,cAAiB,GAAA,OAAA;AACzB,EAAM,MAAA,EAAE,OAAU,GAAA,IAAA,EAAS,GAAA,KAAA;AAC3B,EAAA,MAAM,SAAuC,GAAAA,aAAA;AAAA,IAC3C,OAAO;AAAA,MACL,UAAU,KAAO,EAAA;AACf,QAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAa,YAAA,CAAA,IAAA,EAAM,KAAM,CAAA,WAAA,EAAa,iBAAiB,CAAA;AAAA;AACzD;AACF,KACF,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAO,OAAAA,aAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAc,GAAA,EAAK,EAAA,CAAC,OAAS,EAAA,SAAS,CAAC,CAAA;AAC3E;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -65,6 +65,7 @@ var DatePicker = require('./date-picker/DatePicker.js');
|
|
|
65
65
|
var DatePickerActions = require('./date-picker/DatePickerActions.js');
|
|
66
66
|
var DatePickerContext = require('./date-picker/DatePickerContext.js');
|
|
67
67
|
var DatePickerOverlay = require('./date-picker/DatePickerOverlay.js');
|
|
68
|
+
var DatePickerOverlayProvider = require('./date-picker/DatePickerOverlayProvider.js');
|
|
68
69
|
var DatePickerRangeInput = require('./date-picker/DatePickerRangeInput.js');
|
|
69
70
|
var DatePickerRangePanel = require('./date-picker/DatePickerRangePanel.js');
|
|
70
71
|
var DatePickerSingleInput = require('./date-picker/DatePickerSingleInput.js');
|
|
@@ -78,10 +79,10 @@ var DropdownButton = require('./dropdown/DropdownButton.js');
|
|
|
78
79
|
var Dropdown = require('./dropdown/Dropdown.js');
|
|
79
80
|
var useDropdownBase = require('./dropdown/useDropdownBase.js');
|
|
80
81
|
var EditableLabel = require('./editable-label/EditableLabel.js');
|
|
81
|
-
var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
|
|
82
|
-
var FormLabel = require('./form-field-legacy/FormLabel.js');
|
|
83
82
|
var FormFieldLegacyContext = require('./form-field-context-legacy/FormFieldLegacyContext.js');
|
|
84
83
|
var useFormFieldLegacyProps = require('./form-field-context-legacy/useFormFieldLegacyProps.js');
|
|
84
|
+
var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
|
|
85
|
+
var FormLabel = require('./form-field-legacy/FormLabel.js');
|
|
85
86
|
var FormGroup = require('./form-group/FormGroup.js');
|
|
86
87
|
var FormattedInput = require('./formatted-input/FormattedInput.js');
|
|
87
88
|
var InputLegacy = require('./input-legacy/InputLegacy.js');
|
|
@@ -104,6 +105,8 @@ var MenuButton = require('./menu-button/MenuButton.js');
|
|
|
104
105
|
var Metric = require('./metric/Metric.js');
|
|
105
106
|
var MetricHeader = require('./metric/MetricHeader.js');
|
|
106
107
|
var MetricContent = require('./metric/MetricContent.js');
|
|
108
|
+
var useNumberInput = require('./number-input/useNumberInput.js');
|
|
109
|
+
var NumberInput = require('./number-input/NumberInput.js');
|
|
107
110
|
var OverlayHeader = require('./overlay/OverlayHeader.js');
|
|
108
111
|
var Portal = require('./portal/Portal.js');
|
|
109
112
|
var QueryInput = require('./query-input/QueryInput.js');
|
|
@@ -120,14 +123,16 @@ var overflowUtils = require('./responsive/overflowUtils.js');
|
|
|
120
123
|
var utils = require('./responsive/utils.js');
|
|
121
124
|
var SearchInput = require('./search-input/SearchInput.js');
|
|
122
125
|
var Slider = require('./slider/Slider.js');
|
|
126
|
+
var RangeSlider = require('./slider/RangeSlider.js');
|
|
127
|
+
var Splitter = require('./splitter/Splitter.js');
|
|
128
|
+
var SplitPanel = require('./splitter/SplitPanel.js');
|
|
129
|
+
var SplitHandle = require('./splitter/SplitHandle.js');
|
|
123
130
|
var StaticList = require('./static-list/StaticList.js');
|
|
124
131
|
var StaticListItem = require('./static-list/StaticListItem.js');
|
|
125
132
|
var StaticListItemContent = require('./static-list/StaticListItemContent.js');
|
|
126
133
|
var SteppedTracker = require('./stepped-tracker/SteppedTracker.js');
|
|
127
134
|
var Step = require('./stepped-tracker/Step.js');
|
|
128
135
|
var useStepReducer = require('./stepped-tracker/useStepReducer.js');
|
|
129
|
-
var useStepperInput = require('./stepper-input/useStepperInput.js');
|
|
130
|
-
var StepperInput = require('./stepper-input/StepperInput.js');
|
|
131
136
|
var SystemStatus = require('./system-status/SystemStatus.js');
|
|
132
137
|
var SystemStatusContent = require('./system-status/SystemStatusContent.js');
|
|
133
138
|
var SystemStatusActions = require('./system-status/SystemStatusActions.js');
|
|
@@ -233,6 +238,8 @@ exports.DateRangeSelectionContext = DatePickerContext.DateRangeSelectionContext;
|
|
|
233
238
|
exports.SingleDateSelectionContext = DatePickerContext.SingleDateSelectionContext;
|
|
234
239
|
exports.useDatePickerContext = DatePickerContext.useDatePickerContext;
|
|
235
240
|
exports.DatePickerOverlay = DatePickerOverlay.DatePickerOverlay;
|
|
241
|
+
exports.DatePickerOverlayProvider = DatePickerOverlayProvider.DatePickerOverlayProvider;
|
|
242
|
+
exports.useDatePickerOverlay = DatePickerOverlayProvider.useDatePickerOverlay;
|
|
236
243
|
exports.DatePickerRangeInput = DatePickerRangeInput.DatePickerRangeInput;
|
|
237
244
|
exports.defaultRangeValidator = DatePickerRangeInput.defaultRangeValidator;
|
|
238
245
|
exports.DatePickerRangePanel = DatePickerRangePanel.DatePickerRangePanel;
|
|
@@ -247,10 +254,10 @@ exports.DropdownButton = DropdownButton.DropdownButton;
|
|
|
247
254
|
exports.Dropdown = Dropdown.Dropdown;
|
|
248
255
|
exports.useDropdownBase = useDropdownBase.useDropdownBase;
|
|
249
256
|
exports.EditableLabel = EditableLabel.EditableLabel;
|
|
250
|
-
exports.FormField = FormFieldLegacy.FormFieldLegacy;
|
|
251
|
-
exports.FormLabel = FormLabel.FormLabel;
|
|
252
257
|
exports.FormFieldLegacyContext = FormFieldLegacyContext.FormFieldLegacyContext;
|
|
253
258
|
exports.useFormFieldLegacyProps = useFormFieldLegacyProps.useFormFieldLegacyProps;
|
|
259
|
+
exports.FormField = FormFieldLegacy.FormFieldLegacy;
|
|
260
|
+
exports.FormLabel = FormLabel.FormLabel;
|
|
254
261
|
exports.FormGroup = FormGroup.FormGroup;
|
|
255
262
|
exports.FormattedInput = FormattedInput.FormattedInput;
|
|
256
263
|
exports.Input = InputLegacy.InputLegacy;
|
|
@@ -277,6 +284,8 @@ exports.MenuButton = MenuButton.MenuButton;
|
|
|
277
284
|
exports.Metric = Metric.Metric;
|
|
278
285
|
exports.MetricHeader = MetricHeader.MetricHeader;
|
|
279
286
|
exports.MetricContent = MetricContent.MetricContent;
|
|
287
|
+
exports.useNumberInput = useNumberInput.useNumberInput;
|
|
288
|
+
exports.NumberInput = NumberInput.NumberInput;
|
|
280
289
|
exports.OverlayHeader = OverlayHeader.OverlayHeader;
|
|
281
290
|
exports.Portal = Portal.Portal;
|
|
282
291
|
exports.QueryInput = QueryInput.QueryInput;
|
|
@@ -318,14 +327,16 @@ exports.isResponsiveAttribute = utils.isResponsiveAttribute;
|
|
|
318
327
|
exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
|
|
319
328
|
exports.SearchInput = SearchInput.SearchInput;
|
|
320
329
|
exports.Slider = Slider.Slider;
|
|
330
|
+
exports.RangeSlider = RangeSlider.RangeSlider;
|
|
331
|
+
exports.Splitter = Splitter.Splitter;
|
|
332
|
+
exports.SplitPanel = SplitPanel.SplitPanel;
|
|
333
|
+
exports.SplitHandle = SplitHandle.SplitHandle;
|
|
321
334
|
exports.StaticList = StaticList.StaticList;
|
|
322
335
|
exports.StaticListItem = StaticListItem.StaticListItem;
|
|
323
336
|
exports.StaticListItemContent = StaticListItemContent.StaticListItemContent;
|
|
324
337
|
exports.SteppedTracker = SteppedTracker.SteppedTracker;
|
|
325
338
|
exports.Step = Step.Step;
|
|
326
339
|
exports.useStepReducer = useStepReducer.useStepReducer;
|
|
327
|
-
exports.useStepperInput = useStepperInput.useStepperInput;
|
|
328
|
-
exports.StepperInput = StepperInput.StepperInput;
|
|
329
340
|
exports.SystemStatus = SystemStatus.SystemStatus;
|
|
330
341
|
exports.SystemStatusContent = SystemStatusContent.SystemStatusContent;
|
|
331
342
|
exports.SystemStatusActions = SystemStatusActions.SystemStatusActions;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: none;\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-editable-borderStyle);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-border);\n\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n width: 100%;\n box-sizing: border-box;\n\n gap: var(--salt-spacing-50);\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--numberInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-active);\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--numberInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-active: var(--salt-editable-primary-background-active);\n --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-active: var(--salt-editable-secondary-background-active);\n --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-background-active: var(--salt-status-error-background);\n --numberInput-background-hover: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-background-active: var(--salt-status-warning-background);\n --numberInput-background-hover: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-background-active: var(--salt-status-success-background);\n --numberInput-background-hover: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n.saltNumberInput-inputContainer {\n display: flex;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n border: var(--numberInput-border);\n box-sizing: border-box;\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n overflow: hidden;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n flex-grow: 1;\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltNumberInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltNumberInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --numberInput-borderWidth: var(--salt-size-border);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --numberInput-borderWidth: var(--salt-size-border);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--numberInput-borderWidth) var(--numberInput-borderStyle) var(--numberInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-readOnly .saltNumberInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n text-align: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n text-align: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-size-border-strong);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);\n --saltButton-width: var(--salt-size-base);\n}\n\n.saltNumberInput-numberButtonIncrement {\n --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=NumberInput.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NumberInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -7,12 +7,12 @@ var window = require('@salt-ds/window');
|
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var react = require('react');
|
|
9
9
|
var utils = require('./internal/utils.js');
|
|
10
|
-
var
|
|
11
|
-
var
|
|
10
|
+
var NumberInput$1 = require('./NumberInput.css.js');
|
|
11
|
+
var useNumberInput = require('./useNumberInput.js');
|
|
12
12
|
|
|
13
|
-
const withBaseName = core.makePrefixer("
|
|
14
|
-
const
|
|
15
|
-
function
|
|
13
|
+
const withBaseName = core.makePrefixer("saltNumberInput");
|
|
14
|
+
const NumberInput = react.forwardRef(
|
|
15
|
+
function NumberInput2({
|
|
16
16
|
bordered,
|
|
17
17
|
className: classNameProp,
|
|
18
18
|
decimalPlaces = 0,
|
|
@@ -39,8 +39,8 @@ const StepperInput = react.forwardRef(
|
|
|
39
39
|
}, ref) {
|
|
40
40
|
const targetWindow = window.useWindow();
|
|
41
41
|
styles.useComponentCssInjection({
|
|
42
|
-
testId: "salt-
|
|
43
|
-
css:
|
|
42
|
+
testId: "salt-number-input",
|
|
43
|
+
css: NumberInput$1,
|
|
44
44
|
window: targetWindow
|
|
45
45
|
});
|
|
46
46
|
const { IncreaseIcon, DecreaseIcon } = core.useIcon();
|
|
@@ -72,7 +72,7 @@ const StepperInput = react.forwardRef(
|
|
|
72
72
|
const [value, setValue] = core.useControlled({
|
|
73
73
|
controlled: valueProp,
|
|
74
74
|
default: typeof defaultValueProp === "number" ? utils.toFixedDecimalPlaces(defaultValueProp, decimalPlaces) : defaultValueProp,
|
|
75
|
-
name: "
|
|
75
|
+
name: "NumberInput",
|
|
76
76
|
state: "value"
|
|
77
77
|
});
|
|
78
78
|
const [focused, setFocused] = react.useState(false);
|
|
@@ -83,7 +83,7 @@ const StepperInput = react.forwardRef(
|
|
|
83
83
|
decrementValue,
|
|
84
84
|
incrementButtonProps,
|
|
85
85
|
incrementValue
|
|
86
|
-
} =
|
|
86
|
+
} = useNumberInput.useNumberInput({
|
|
87
87
|
inputRef,
|
|
88
88
|
setValue,
|
|
89
89
|
decimalPlaces,
|
|
@@ -225,8 +225,8 @@ const StepperInput = react.forwardRef(
|
|
|
225
225
|
core.Button,
|
|
226
226
|
{
|
|
227
227
|
className: clsx.clsx(
|
|
228
|
-
withBaseName("
|
|
229
|
-
withBaseName("
|
|
228
|
+
withBaseName("numberButton"),
|
|
229
|
+
withBaseName("numberButtonIncrement")
|
|
230
230
|
),
|
|
231
231
|
...incrementButtonProps,
|
|
232
232
|
children: /* @__PURE__ */ jsxRuntime.jsx(IncreaseIcon, { "aria-hidden": true })
|
|
@@ -236,8 +236,8 @@ const StepperInput = react.forwardRef(
|
|
|
236
236
|
core.Button,
|
|
237
237
|
{
|
|
238
238
|
className: clsx.clsx(
|
|
239
|
-
withBaseName("
|
|
240
|
-
withBaseName("
|
|
239
|
+
withBaseName("numberButton"),
|
|
240
|
+
withBaseName("numberButtonDecrement")
|
|
241
241
|
),
|
|
242
242
|
...decrementButtonProps,
|
|
243
243
|
children: /* @__PURE__ */ jsxRuntime.jsx(DecreaseIcon, { "aria-hidden": true })
|
|
@@ -250,5 +250,5 @@ const StepperInput = react.forwardRef(
|
|
|
250
250
|
}
|
|
251
251
|
);
|
|
252
252
|
|
|
253
|
-
exports.
|
|
254
|
-
//# sourceMappingURL=
|
|
253
|
+
exports.NumberInput = NumberInput;
|
|
254
|
+
//# sourceMappingURL=NumberInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n Button,\n StatusAdornment,\n type ValidationStatus,\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport {\n isAllowedNonNumeric,\n isOutOfRange,\n sanitizedInput,\n toFixedDecimalPlaces,\n toFloat,\n} from \"./internal/utils\";\n\nimport numberInputCss from \"./NumberInput.css\";\nimport { useNumberInput } from \"./useNumberInput\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * A boolean. When `true`, the input will receive a full border.\n */\n bordered?: boolean;\n /**\n * The number of decimal places to display.\n */\n decimalPlaces?: number;\n /**\n * Sets the initial default value of the component.\n */\n defaultValue?: number | string;\n /**\n * If `true`, the number input will be disabled.\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n * @default '—'\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * Whether to hide the number buttons. Defaults to `false`.\n * @default false\n */\n hideButtons?: boolean;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * Callback when number input value is changed.\n * @param event - the event triggers value change, could be undefined during increment / decrement button long press\n */\n onChange?: (\n event: SyntheticEvent | undefined,\n value: number | string,\n ) => void;\n /**\n * A string. Displayed in a dimmed color when the input value is empty.\n */\n placeholder?: string | undefined;\n /**\n * A boolean. If `true`, the component is not editable by the user.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * The amount to increment or decrement the value by when using the number buttons or Up Arrow and Down Arrow keys. Default to 1.\n * @default 1\n */\n step?: number;\n /**\n * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.\n * Defaults to 10.\n * @default 10\n */\n stepBlock?: number;\n /**\n * Alignment of text within container. Defaults to \"left\".\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n /**\n * Styling variant. Defaults to \"primary\".\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The value of the number input. The component will be controlled if this prop is provided.\n */\n value?: number | string | undefined;\n}\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n function NumberInput(\n {\n bordered,\n className: classNameProp,\n decimalPlaces = 0,\n defaultValue: defaultValueProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hideButtons,\n inputProps: inputPropsProp = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange: onChangeProp,\n placeholder,\n readOnly: readOnlyProp,\n startAdornment,\n step = 1,\n stepBlock = 10,\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n value: valueProp,\n variant = \"primary\",\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-number-input\",\n css: numberInputCss,\n window: targetWindow,\n });\n\n const { IncreaseIcon, DecreaseIcon } = useIcon();\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onChange: inputOnChange,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputPropsProp;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default:\n typeof defaultValueProp === \"number\"\n ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces)\n : defaultValueProp,\n name: \"NumberInput\",\n state: \"value\",\n });\n\n // Won't be needed when `:has` css can be used\n const [focused, setFocused] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedInputRef = useForkRef(inputRef, inputRefProp);\n\n const {\n decrementButtonProps,\n decrementValue,\n incrementButtonProps,\n incrementValue,\n } = useNumberInput({\n inputRef,\n setValue,\n decimalPlaces,\n disabled,\n max,\n min,\n onChange: onChangeProp,\n readOnly: isReadOnly,\n step,\n stepBlock,\n value,\n });\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n\n inputOnFocus?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setFocused(false);\n\n if (value === undefined) return;\n\n const floatValue = toFloat(value);\n if (Number.isNaN(floatValue)) {\n // Keep original value if NaN\n setValue(value);\n onChangeProp?.(event, value);\n } else {\n const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);\n\n if (value !== \"\" && !isAllowedNonNumeric(value)) {\n setValue(roundedValue);\n }\n\n onChangeProp?.(event, roundedValue);\n }\n\n inputOnBlur?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const changedValue = event.target.value;\n\n setValue(sanitizedInput(changedValue));\n\n onChangeProp?.(event, sanitizedInput(changedValue));\n inputOnChange?.(event);\n };\n\n const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n switch (event.key) {\n case \"ArrowUp\": {\n event.preventDefault();\n const block = event.shiftKey;\n incrementValue(event, block);\n break;\n }\n case \"ArrowDown\": {\n event.preventDefault();\n const block = event.shiftKey;\n decrementValue(event, block);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n setValue(min);\n onChangeProp?.(event, min);\n break;\n }\n case \"End\": {\n event.preventDefault();\n setValue(max);\n onChangeProp?.(event, max);\n break;\n }\n case \"PageUp\": {\n event.preventDefault();\n incrementValue(event, true);\n break;\n }\n case \"PageDown\": {\n event.preventDefault();\n decrementValue(event, true);\n break;\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n return (\n <div\n className={clsx(withBaseName(), classNameProp)}\n {...restProps}\n ref={ref}\n >\n <div\n className={clsx(\n withBaseName(\"inputContainer\"),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n )}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n aria-invalid={\n !isReadOnly ? isOutOfRange(value, min, max) : undefined\n }\n aria-valuemax={\n !isReadOnly\n ? toFloat(toFixedDecimalPlaces(max, decimalPlaces))\n : undefined\n }\n aria-valuemin={\n !isReadOnly\n ? toFloat(toFixedDecimalPlaces(min, decimalPlaces))\n : undefined\n }\n aria-valuenow={\n value && !Number.isNaN(toFloat(value)) && !isReadOnly\n ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces))\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={!isDisabled ? handleInputFocus : undefined}\n onKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={forkedInputRef}\n required={isRequired}\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n tabIndex={isDisabled ? -1 : 0}\n value={value}\n {...restInputProps}\n />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n\n {!hideButtons && !isReadOnly && (\n <div className={withBaseName(\"buttonContainer\")}>\n <Button\n className={clsx(\n withBaseName(\"numberButton\"),\n withBaseName(\"numberButtonIncrement\"),\n )}\n {...incrementButtonProps}\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n className={clsx(\n withBaseName(\"numberButton\"),\n withBaseName(\"numberButtonDecrement\"),\n )}\n {...decrementButtonProps}\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","NumberInput","useWindow","useComponentCssInjection","numberInputCss","useIcon","useFormFieldProps","useControlled","toFixedDecimalPlaces","useState","useRef","useForkRef","useNumberInput","toFloat","isAllowedNonNumeric","sanitizedInput","jsxs","clsx","jsx","isOutOfRange","capitalize","StatusAdornment","Button"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/number-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n activationFn: (event?: SyntheticEvent) => void,\n isAtLimit: boolean,\n) {\n const [buttonDown, setButtonDown] = useState(false);\n const [delay, setDelay] = useState(INITIAL_DELAY);\n\n const cancelInterval = useCallback(() => {\n setButtonDown(false);\n setDelay(INITIAL_DELAY);\n }, []);\n\n useEffect(() => {\n if (isAtLimit) cancelInterval();\n }, [isAtLimit, cancelInterval]);\n\n const targetWindow = useWindow();\n\n useEffect(() => {\n if (targetWindow) {\n targetWindow.addEventListener(\"mouseup\", cancelInterval);\n }\n return () => {\n if (targetWindow) {\n targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n }\n };\n }, [cancelInterval, targetWindow]);\n\n const activate = (event: SyntheticEvent) => {\n activationFn(event);\n if (event.type === \"mousedown\") {\n setButtonDown(true);\n }\n };\n\n useInterval(\n () => {\n if (!buttonDown) return;\n activationFn();\n if (delay === INITIAL_DELAY) {\n setDelay(INTERVAL_DELAY);\n }\n },\n buttonDown ? delay : null,\n );\n\n return { activate, buttonDown };\n}\n"],"names":["useState","useCallback","useEffect","useWindow","useInterval"],"mappings":";;;;;;AAIA,MAAM,aAAgB,GAAA,GAAA;AACtB,MAAM,cAAiB,GAAA,GAAA;AAEP,SAAA,yBAAA,CACd,cACA,SACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,aAAa,CAAA;AAEhD,EAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAA0B,cAAA,EAAA;AAAA,GAC7B,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAa,YAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA;AAAA;AAEzD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAc,EAAA;AAChB,QAAa,YAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA;AAAA;AAC5D,KACF;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA;AAEjC,EAAM,MAAA,QAAA,GAAW,CAAC,KAA0B,KAAA;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAI,IAAA,KAAA,CAAM,SAAS,WAAa,EAAA;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA;AACpB,GACF;AAEA,EAAAE,uBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAY,EAAA;AACjB,MAAa,YAAA,EAAA;AACb,MAAA,IAAI,UAAU,aAAe,EAAA;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA;AACzB,KACF;AAAA,IACA,aAAa,KAAQ,GAAA;AAAA,GACvB;AAEA,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA;AAChC;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInterval.js","sources":["../src/number-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n const savedCallback = useRef<IntervalFunction | null>(null);\n\n useEffect(() => {\n savedCallback.current = callback;\n });\n\n useEffect(() => {\n function tick() {\n if (savedCallback.current !== null) {\n savedCallback.current();\n }\n }\n\n if (delay !== null) {\n const id = setInterval(tick, delay);\n return () => clearInterval(id);\n }\n return;\n }, [delay]);\n}\n\nexport { useInterval };\n"],"names":["useRef","useEffect"],"mappings":";;;;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgBA,aAAgC,IAAI,CAAA;AAE1D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA;AAAA,GACzB,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA;AAAA;AACxB;AAGF,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA;AAAA;AAE/B,IAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/number-input/internal/utils.ts"],"sourcesContent":["// The input should only accept numbers, decimal points, and plus/minus symbols\nexport const ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nexport const toFixedDecimalPlaces = (\n inputNumber: number,\n decimalPlaces: number,\n) => inputNumber.toFixed(decimalPlaces);\n\nexport const isAllowedNonNumeric = (inputCharacter: number | string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n inputCharacter === \"\"\n );\n};\n\nexport const toFloat = (inputValue: number | string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return Number.parseFloat(inputValue.toString());\n};\n\nexport const sanitizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nexport const isAtMax = (value: number | string | undefined, max: number) => {\n if (value === undefined) return true;\n return toFloat(value) >= max;\n};\n\nexport const isAtMin = (value: number | string | undefined, min: number) => {\n if (value === undefined) return true;\n return toFloat(value) <= min;\n};\n\nexport const isOutOfRange = (\n value: number | string | undefined,\n min: number,\n max: number,\n) => {\n if (value === undefined) return true;\n const floatValue = toFloat(value);\n return floatValue > max || floatValue < min;\n};\n"],"names":[],"mappings":";;AACO,MAAM,YAAe,GAAA;AAErB,MAAM,uBAAuB,CAClC,WAAA,EACA,aACG,KAAA,WAAA,CAAY,QAAQ,aAAa;AAEzB,MAAA,mBAAA,GAAsB,CAAC,cAAoC,KAAA;AACtE,EAAI,IAAA,OAAO,mBAAmB,QAAU,EAAA;AACxC,EAAA,OACG,KAAK,QAAS,CAAA,cAAc,KAAK,cAAe,CAAA,MAAA,KAAW,KAC5D,cAAmB,KAAA,EAAA;AAEvB;AAEa,MAAA,OAAA,GAAU,CAAC,UAAgC,KAAA;AAEtD,EAAI,IAAA,mBAAA,CAAoB,UAAU,CAAA,EAAU,OAAA,CAAA;AAC5C,EAAA,OAAO,MAAO,CAAA,UAAA,CAAW,UAAW,CAAA,QAAA,EAAU,CAAA;AAChD;AAEa,MAAA,cAAA,GAAiB,CAAC,YAAA,KAAA,CAC5B,YAAa,CAAA,KAAA,CAAM,YAAY,CAAK,IAAA,EAAI,EAAA,IAAA,CAAK,EAAE;AAErC,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEa,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA;AAC3B;AAEO,MAAM,YAAe,GAAA,CAC1B,KACA,EAAA,GAAA,EACA,GACG,KAAA;AACH,EAAI,IAAA,KAAA,KAAU,QAAkB,OAAA,IAAA;AAChC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAK,CAAA;AAChC,EAAO,OAAA,UAAA,GAAa,OAAO,UAAa,GAAA,GAAA;AAC1C;;;;;;;;;;;"}
|
|
@@ -4,7 +4,7 @@ var react = require('react');
|
|
|
4
4
|
var useActivateWhileMouseDown = require('./internal/useActivateWhileMouseDown.js');
|
|
5
5
|
var utils = require('./internal/utils.js');
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const useNumberInput = ({
|
|
8
8
|
decimalPlaces = 0,
|
|
9
9
|
disabled,
|
|
10
10
|
inputRef,
|
|
@@ -95,5 +95,5 @@ const useStepperInput = ({
|
|
|
95
95
|
};
|
|
96
96
|
};
|
|
97
97
|
|
|
98
|
-
exports.
|
|
99
|
-
//# sourceMappingURL=
|
|
98
|
+
exports.useNumberInput = useNumberInput;
|
|
99
|
+
//# sourceMappingURL=useNumberInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useNumberInput.js","sources":["../src/number-input/useNumberInput.ts"],"sourcesContent":["import {\n type Dispatch,\n type MouseEvent,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n} from \"react\";\nimport type { NumberInputProps } from \"./NumberInput\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport {\n isAtMax,\n isAtMin,\n toFixedDecimalPlaces,\n toFloat,\n} from \"./internal/utils\";\n\n/**\n * Manages increment / decrement logic\n */\nexport const useNumberInput = ({\n decimalPlaces = 0,\n disabled,\n inputRef,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n readOnly,\n setValue,\n step = 1,\n stepBlock = 10,\n value,\n}: Pick<\n NumberInputProps,\n | \"decimalPlaces\"\n | \"disabled\"\n | \"inputRef\"\n | \"max\"\n | \"min\"\n | \"onChange\"\n | \"readOnly\"\n | \"step\"\n | \"stepBlock\"\n | \"value\"\n> & {\n setValue: Dispatch<SetStateAction<string | number | undefined>>;\n inputRef: MutableRefObject<HTMLInputElement | null>;\n}) => {\n const setValueInRange = useCallback(\n (event: SyntheticEvent | undefined, modifiedValue: number) => {\n if (readOnly) return;\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (Number.isNaN(toFloat(roundedValue))) return;\n\n setValue(roundedValue);\n\n onChange?.(event, roundedValue);\n },\n [decimalPlaces, min, max, onChange, readOnly, setValue],\n );\n\n const decrementValue = useCallback(\n (event?: SyntheticEvent, block?: boolean) => {\n if (value === undefined || isAtMin(value, min)) return;\n const decrementStep = block ? stepBlock : step;\n const nextValue =\n value === \"\" ? -decrementStep : toFloat(value) - decrementStep;\n setValueInRange(event, nextValue);\n },\n [value, min, step, stepBlock, setValueInRange],\n );\n\n const incrementValue = useCallback(\n (event?: SyntheticEvent, block?: boolean) => {\n if (value === undefined || isAtMax(value, max)) return;\n const incrementStep = block ? stepBlock : step;\n const nextValue =\n value === \"\" ? incrementStep : toFloat(value) + incrementStep;\n setValueInRange(event, nextValue);\n },\n [value, max, step, stepBlock, setValueInRange],\n );\n\n const { activate: decrementSpinner } = useActivateWhileMouseDown(\n (event?: SyntheticEvent) => decrementValue(event),\n isAtMin(value, min),\n );\n\n const { activate: incrementSpinner } = useActivateWhileMouseDown(\n (event?: SyntheticEvent) => incrementValue(event),\n isAtMax(value, max),\n );\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const commonButtonProps = {\n \"aria-hidden\": true,\n tabIndex: -1,\n onMouseUp: handleButtonMouseUp,\n };\n\n const incrementButtonProps = {\n ...commonButtonProps,\n \"aria-label\": \"increment value\",\n disabled: disabled || isAtMax(value, max),\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n if (event.nativeEvent.button !== 0) {\n // To match closely with <input type='input'>\n return;\n }\n incrementSpinner(event);\n },\n };\n\n const decrementButtonProps = {\n ...commonButtonProps,\n \"aria-label\": \"decrement value\",\n disabled: disabled || isAtMin(value, min),\n onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n if (event.nativeEvent.button !== 0) {\n // To match closely with <input type='input'>\n return;\n }\n decrementSpinner(event);\n },\n };\n\n return {\n incrementButtonProps,\n decrementButtonProps,\n incrementValue,\n decrementValue,\n };\n};\n"],"names":["useCallback","toFixedDecimalPlaces","toFloat","isAtMin","isAtMax","useActivateWhileMouseDown"],"mappings":"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"}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var core = require('@salt-ds/core');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var SliderThumb = require('./internal/SliderThumb.js');
|
|
8
|
+
var SliderTrack = require('./internal/SliderTrack.js');
|
|
9
|
+
var useRangeSliderThumb = require('./internal/useRangeSliderThumb.js');
|
|
10
|
+
var utils = require('./internal/utils.js');
|
|
11
|
+
|
|
12
|
+
const RangeSlider = react.forwardRef(
|
|
13
|
+
function RangeSlider2({
|
|
14
|
+
"aria-label": ariaLabel,
|
|
15
|
+
"aria-labelledby": ariaLabelledBy,
|
|
16
|
+
"aria-valuetext": ariaValueText,
|
|
17
|
+
decimalPlaces = 2,
|
|
18
|
+
disabled: disabledProp = false,
|
|
19
|
+
format,
|
|
20
|
+
marks,
|
|
21
|
+
max = 10,
|
|
22
|
+
min = 0,
|
|
23
|
+
maxLabel,
|
|
24
|
+
minLabel,
|
|
25
|
+
onChange,
|
|
26
|
+
onChangeEnd,
|
|
27
|
+
restrictToMarks = false,
|
|
28
|
+
showTooltip = true,
|
|
29
|
+
step = 1,
|
|
30
|
+
stepMultiplier = 2,
|
|
31
|
+
value: valueProp,
|
|
32
|
+
defaultValue = [min, min + (max - min) / 2],
|
|
33
|
+
...rest
|
|
34
|
+
}, ref) {
|
|
35
|
+
const [valueState, setValue] = core.useControlled({
|
|
36
|
+
controlled: valueProp,
|
|
37
|
+
default: defaultValue,
|
|
38
|
+
name: "RangeSlider",
|
|
39
|
+
state: "value"
|
|
40
|
+
});
|
|
41
|
+
const lastValueRef = react.useRef(valueState);
|
|
42
|
+
const {
|
|
43
|
+
a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
|
|
44
|
+
disabled: formFieldDisabled
|
|
45
|
+
} = core.useFormFieldProps();
|
|
46
|
+
const disabled = formFieldDisabled || disabledProp;
|
|
47
|
+
const value = utils.clampRange(
|
|
48
|
+
valueState,
|
|
49
|
+
max,
|
|
50
|
+
min,
|
|
51
|
+
step,
|
|
52
|
+
decimalPlaces,
|
|
53
|
+
marks,
|
|
54
|
+
restrictToMarks
|
|
55
|
+
);
|
|
56
|
+
const progressPercentageStart = utils.calculatePercentage(value[0], max, min);
|
|
57
|
+
const progressPercentageEnd = utils.calculatePercentage(value[1], max, min);
|
|
58
|
+
const thumbProps = {
|
|
59
|
+
"aria-label": ariaLabel,
|
|
60
|
+
"aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy),
|
|
61
|
+
"aria-valuemax": max,
|
|
62
|
+
"aria-valuemin": min,
|
|
63
|
+
"aria-valuetext": ariaValueText,
|
|
64
|
+
disabled,
|
|
65
|
+
format,
|
|
66
|
+
max,
|
|
67
|
+
maxLabel,
|
|
68
|
+
min,
|
|
69
|
+
minLabel,
|
|
70
|
+
showTooltip,
|
|
71
|
+
step,
|
|
72
|
+
stepMultiplier,
|
|
73
|
+
sliderValue: value
|
|
74
|
+
};
|
|
75
|
+
const handleInputChange = (event, thumbIndex) => {
|
|
76
|
+
const parsedValue = utils.toFloat(event.target.value);
|
|
77
|
+
const values = preventThumbOverlap(parsedValue, value, thumbIndex);
|
|
78
|
+
const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
|
|
79
|
+
if (haveValuesChanged) {
|
|
80
|
+
const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
|
|
81
|
+
setValue(values2);
|
|
82
|
+
onChange == null ? void 0 : onChange(event, values2);
|
|
83
|
+
onChangeEnd == null ? void 0 : onChangeEnd(event, values2);
|
|
84
|
+
lastValueRef.current = values2;
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const {
|
|
88
|
+
handleKeydownOnThumb,
|
|
89
|
+
handlePointerDownOnThumb,
|
|
90
|
+
handlePointerDownOnTrack,
|
|
91
|
+
isDragging,
|
|
92
|
+
sliderRef,
|
|
93
|
+
thumbIndexState,
|
|
94
|
+
preventThumbOverlap
|
|
95
|
+
} = useRangeSliderThumb.useRangeSliderThumb({
|
|
96
|
+
decimalPlaces,
|
|
97
|
+
handleInputChange,
|
|
98
|
+
marks,
|
|
99
|
+
min,
|
|
100
|
+
max,
|
|
101
|
+
step,
|
|
102
|
+
value,
|
|
103
|
+
onChange,
|
|
104
|
+
onChangeEnd,
|
|
105
|
+
restrictToMarks,
|
|
106
|
+
setValue,
|
|
107
|
+
stepMultiplier
|
|
108
|
+
});
|
|
109
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
110
|
+
SliderTrack.SliderTrack,
|
|
111
|
+
{
|
|
112
|
+
disabled,
|
|
113
|
+
format,
|
|
114
|
+
handlePointerDown: handlePointerDownOnTrack,
|
|
115
|
+
isDragging,
|
|
116
|
+
isRange: true,
|
|
117
|
+
marks,
|
|
118
|
+
min,
|
|
119
|
+
minLabel,
|
|
120
|
+
max,
|
|
121
|
+
maxLabel,
|
|
122
|
+
progressPercentageRange: [
|
|
123
|
+
progressPercentageStart,
|
|
124
|
+
progressPercentageEnd
|
|
125
|
+
],
|
|
126
|
+
ref,
|
|
127
|
+
sliderRef,
|
|
128
|
+
...rest,
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
131
|
+
SliderThumb.SliderThumb,
|
|
132
|
+
{
|
|
133
|
+
index: 0,
|
|
134
|
+
handleInputChange: (event) => handleInputChange(event, 0),
|
|
135
|
+
handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
|
|
136
|
+
handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
|
|
137
|
+
offsetPercentage: `${utils.calculatePercentage(value[0], max, min)}%`,
|
|
138
|
+
trackDragging: isDragging && thumbIndexState === 0,
|
|
139
|
+
...thumbProps
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
143
|
+
SliderThumb.SliderThumb,
|
|
144
|
+
{
|
|
145
|
+
index: 1,
|
|
146
|
+
handleInputChange: (event) => handleInputChange(event, 1),
|
|
147
|
+
handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
|
|
148
|
+
handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
|
|
149
|
+
offsetPercentage: `${utils.calculatePercentage(value[1], max, min)}%`,
|
|
150
|
+
trackDragging: isDragging && thumbIndexState === 1,
|
|
151
|
+
...thumbProps
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
|
|
160
|
+
exports.RangeSlider = RangeSlider;
|
|
161
|
+
//# sourceMappingURL=RangeSlider.js.map
|