@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
|
@@ -50,13 +50,14 @@ const DatePickerMain = react.forwardRef(
|
|
|
50
50
|
}
|
|
51
51
|
);
|
|
52
52
|
const DatePicker = react.forwardRef(function DatePicker2(props, ref) {
|
|
53
|
-
const { open,
|
|
53
|
+
const { defaultOpen, open, openOnClick, onOpenChange, readOnly, ...rest } = props;
|
|
54
54
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
55
|
DatePickerOverlayProvider.DatePickerOverlayProvider,
|
|
56
56
|
{
|
|
57
|
-
open,
|
|
58
57
|
defaultOpen,
|
|
59
|
-
|
|
58
|
+
open,
|
|
59
|
+
openOnClick,
|
|
60
|
+
onOpenChange,
|
|
60
61
|
readOnly,
|
|
61
62
|
children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerMain, { ...rest, readOnly, ref })
|
|
62
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport {\n DateRangeSelectionContext,\n type RangeDatePickerState,\n type SingleDatePickerState,\n SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport { DatePickerOverlayProvider
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport {\n DateRangeSelectionContext,\n type RangeDatePickerState,\n type SingleDatePickerState,\n SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport {\n type DatePickerOpenChangeReason,\n DatePickerOverlayProvider,\n} from \"./DatePickerOverlayProvider\";\nimport {\n type UseDatePickerRangeProps,\n type UseDatePickerSingleProps,\n useDatePicker,\n} from \"./useDatePicker\";\n\n/**\n * Base props for DatePicker.\n */\nexport interface DatePickerBaseProps {\n className?: string;\n children?: ReactNode;\n /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */\n open?: boolean;\n /** When `open` is uncontrolled, set this to `true` to open on click */\n openOnClick?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n * @param event - event that triggered the state change\n * @param reason - reason for the the state change\n */\n onOpenChange?: (\n newOpen: boolean,\n event?: Event,\n reason?: DatePickerOpenChangeReason,\n ) => void;\n /**\n * the initial open/close state of the overlay, when the open/close state is un-controlled.\n */\n defaultOpen?: DatePickerBaseProps[\"open\"];\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `single`.\n * @template T\n */\nexport interface DatePickerSingleProps<TDate extends DateFrameworkType>\n extends DatePickerBaseProps,\n UseDatePickerSingleProps<TDate> {\n selectionVariant: \"single\";\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `range`.\n * @template T\n */\nexport interface DatePickerRangeProps<TDate extends DateFrameworkType>\n extends DatePickerBaseProps,\n UseDatePickerRangeProps<TDate> {\n selectionVariant: \"range\";\n}\n\n/**\n * Props for the DatePicker component.\n * @template T\n */\nexport type DatePickerProps<TDate extends DateFrameworkType> =\n | DatePickerSingleProps<TDate>\n | DatePickerRangeProps<TDate>;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps<any>>(\n <TDate extends DateFrameworkType>(\n props: DatePickerProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const {\n children,\n readOnly,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n onApply,\n minDate,\n maxDate,\n onCancel,\n ...rest\n } = props;\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useDatePickerProps: any = {\n readOnly,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n onApply,\n minDate,\n maxDate,\n onCancel,\n };\n\n if (props.selectionVariant === \"range\") {\n const stateAndHelpers = useDatePicker<TDate, \"range\">(\n useDatePickerProps,\n ref,\n ) as RangeDatePickerState<TDate>;\n return (\n <DateRangeSelectionContext.Provider value={stateAndHelpers}>\n <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n {children}\n </div>\n </DateRangeSelectionContext.Provider>\n );\n }\n const stateAndHelpers = useDatePicker(\n useDatePickerProps,\n ref,\n ) as SingleDatePickerState<TDate>;\n\n return (\n <SingleDateSelectionContext.Provider value={stateAndHelpers}>\n <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n {children}\n </div>\n </SingleDateSelectionContext.Provider>\n );\n },\n);\n\nexport const DatePicker = forwardRef(function DatePicker<\n TDate extends DateFrameworkType,\n>(props: DatePickerProps<TDate>, ref: React.Ref<HTMLDivElement>) {\n const { defaultOpen, open, openOnClick, onOpenChange, readOnly, ...rest } =\n props;\n\n return (\n <DatePickerOverlayProvider\n defaultOpen={defaultOpen}\n open={open}\n openOnClick={openOnClick}\n onOpenChange={onOpenChange}\n readOnly={readOnly}\n >\n <DatePickerMain {...rest} readOnly={readOnly} ref={ref} />\n </DatePickerOverlayProvider>\n );\n});\n"],"names":["forwardRef","stateAndHelpers","useDatePicker","DateRangeSelectionContext","SingleDateSelectionContext","jsx","DatePicker","DatePickerOverlayProvider"],"mappings":";;;;;;;;AAyEO,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,CACE,OACA,GACG,KAAA;AA7EP,IAAA,IAAA,EAAA,EAAA,EAAA;AA8EI,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,kBAA0B,GAAA;AAAA,MAC9B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,MAAA,MAAMC,gBAAkB,GAAAC,2BAAA;AAAA,QACtB,kBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,sCACGC,2CAA0B,CAAA,QAAA,EAA1B,EAAmC,KAAOF,EAAAA,gBAAAA,EACzC,yCAAC,KAAI,EAAA,EAAA,GAAA,EAAA,CAAK,KAAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,iBAAiB,KAAjB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,cAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGJ,IAAA,MAAM,eAAkB,GAAAC,2BAAA;AAAA,MACtB,kBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,sCACGE,4CAA2B,CAAA,QAAA,EAA3B,EAAoC,KAAA,EAAO,iBAC1C,QAAC,kBAAAC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,EAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGN;AAEO,MAAM,UAAa,GAAAL,gBAAA,CAAW,SAASM,WAAAA,CAE5C,OAA+B,GAAgC,EAAA;AAC/D,EAAM,MAAA,EAAE,aAAa,IAAM,EAAA,WAAA,EAAa,cAAc,QAAU,EAAA,GAAG,MACjE,GAAA,KAAA;AAEF,EACE,uBAAAD,cAAA;AAAA,IAACE,mDAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MAEA,QAAC,kBAAAF,cAAA,CAAA,cAAA,EAAA,EAAgB,GAAG,IAAA,EAAM,UAAoB,GAAU,EAAA;AAAA;AAAA,GAC1D;AAEJ,CAAC;;;;;"}
|
|
@@ -48,7 +48,7 @@ const DatePickerActions = react.forwardRef(function DatePickerRangeInput(props,
|
|
|
48
48
|
}, [setEnableApply]);
|
|
49
49
|
const handleCancel = (event) => {
|
|
50
50
|
var _a;
|
|
51
|
-
cancel();
|
|
51
|
+
cancel(event);
|
|
52
52
|
(_a = CancelButtonProps == null ? void 0 : CancelButtonProps.onClick) == null ? void 0 : _a.call(CancelButtonProps, event);
|
|
53
53
|
onCancel == null ? void 0 : onCancel(event);
|
|
54
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerActions.js","sources":["../src/date-picker/DatePickerActions.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEventHandler,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n type RangeDatePickerState,\n type SingleDatePickerState,\n useDatePickerContext,\n} from \"./DatePickerContext\";\nimport \"./DatePickerActions.css\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport datePickerActions from \"./DatePickerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerActions\");\n\n/**\n * Base props for DatePicker actions component.\n */\nexport interface DatePickerActionsBaseProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Callback fired when the cancel action is triggered.\n * @param _event - The synthetic event.\n */\n onCancel?: (_event: SyntheticEvent) => void;\n /**\n * Ref to apply button\n */\n applyButtonRef?: Ref<HTMLButtonElement>;\n /**\n * Props for the apply button.\n */\n ApplyButtonProps?: ButtonProps;\n /**\n * Props for the cancel button.\n */\n CancelButtonProps?: ButtonProps;\n /**\n * Ref to cancel button\n */\n cancelButtonRef?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the DatePicker actions component.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type DatePickerActionsProps<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n> = SelectionVariant extends \"single\"\n ? DatePickerActionsBaseProps & {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n /**\n * Callback fired when the apply action is triggered.\n * @param _event - The synthetic event.\n * @param date - The selected single date or null.\n */\n onApply?: (\n _event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n }\n : DatePickerActionsBaseProps & {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n /**\n * Callback fired when the apply action is triggered.\n * @param _event - The synthetic event.\n * @param date - The selected date range or null.\n */\n onApply?: (\n _event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n };\n\nexport const DatePickerActions = forwardRef(function DatePickerRangeInput<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerActionsProps<TDate, \"single\" | \"range\">,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n applyButtonRef,\n ApplyButtonProps,\n cancelButtonRef,\n children,\n className,\n CancelButtonProps,\n onApply,\n onCancel,\n selectionVariant,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-actions\",\n css: datePickerActions,\n window: targetWindow,\n });\n\n // biome-ignore lint/suspicious/noExplicitAny: state and helpers coerced based on selectionVariant\n let stateAndHelpers: any;\n if (selectionVariant === \"range\") {\n stateAndHelpers = useDatePickerContext({\n selectionVariant: \"range\",\n }) as RangeDatePickerState<TDate>;\n } else {\n stateAndHelpers = useDatePickerContext({\n selectionVariant: \"single\",\n }) as SingleDatePickerState<TDate>;\n }\n\n const {\n state: { selectedDate },\n helpers: { cancel, apply, setEnableApply },\n } = stateAndHelpers;\n\n useEffect(() => {\n setEnableApply(true);\n }, [setEnableApply]);\n\n const handleCancel: MouseEventHandler<HTMLButtonElement> = (event) => {\n cancel();\n CancelButtonProps?.onClick?.(event);\n onCancel?.(event);\n };\n\n const handleApply: MouseEventHandler<HTMLButtonElement> = (event) => {\n apply(event, selectedDate);\n onApply?.(event, selectedDate);\n ApplyButtonProps?.onClick?.(event);\n };\n\n return (\n <div className={clsx(className, withBaseName())} ref={ref} {...rest}>\n <div className={withBaseName(\"body\")}>{children}</div>\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n ref={cancelButtonRef}\n {...CancelButtonProps}\n onClick={handleCancel}\n className={clsx(withBaseName(\"action\"), CancelButtonProps?.className)}\n >\n Cancel\n </Button>\n <Button\n appearance=\"solid\"\n sentiment=\"accented\"\n ref={applyButtonRef}\n {...ApplyButtonProps}\n onClick={handleApply}\n className={clsx(withBaseName(\"action\"), ApplyButtonProps?.className)}\n >\n Apply\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","datePickerActions","useDatePickerContext","useEffect","jsxs","clsx","jsx","Button"],"mappings":";;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAqElD,MAAM,iBAAoB,GAAAC,gBAAA,CAAW,SAAS,oBAAA,CAGnD,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAGD,EAAI,IAAA,eAAA;AACJ,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,eAAA,GAAkBC,sCAAqB,CAAA;AAAA,MACrC,gBAAkB,EAAA;AAAA,KACnB,CAAA;AAAA,GACI,MAAA;AACL,IAAA,eAAA,GAAkBA,sCAAqB,CAAA;AAAA,MACrC,gBAAkB,EAAA;AAAA,KACnB,CAAA;AAAA;AAGH,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,YAAa,EAAA;AAAA,IACtB,OAAS,EAAA,EAAE,MAAQ,EAAA,KAAA,EAAO,cAAe;AAAA,GACvC,GAAA,eAAA;AAEJ,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,GACrB,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAzIxE,IAAA,IAAA,EAAA;AA0II,
|
|
1
|
+
{"version":3,"file":"DatePickerActions.js","sources":["../src/date-picker/DatePickerActions.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEventHandler,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n type RangeDatePickerState,\n type SingleDatePickerState,\n useDatePickerContext,\n} from \"./DatePickerContext\";\nimport \"./DatePickerActions.css\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport datePickerActions from \"./DatePickerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerActions\");\n\n/**\n * Base props for DatePicker actions component.\n */\nexport interface DatePickerActionsBaseProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Callback fired when the cancel action is triggered.\n * @param _event - The synthetic event.\n */\n onCancel?: (_event: SyntheticEvent) => void;\n /**\n * Ref to apply button\n */\n applyButtonRef?: Ref<HTMLButtonElement>;\n /**\n * Props for the apply button.\n */\n ApplyButtonProps?: ButtonProps;\n /**\n * Props for the cancel button.\n */\n CancelButtonProps?: ButtonProps;\n /**\n * Ref to cancel button\n */\n cancelButtonRef?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the DatePicker actions component.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type DatePickerActionsProps<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n> = SelectionVariant extends \"single\"\n ? DatePickerActionsBaseProps & {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n /**\n * Callback fired when the apply action is triggered.\n * @param _event - The synthetic event.\n * @param date - The selected single date or null.\n */\n onApply?: (\n _event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n }\n : DatePickerActionsBaseProps & {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n /**\n * Callback fired when the apply action is triggered.\n * @param _event - The synthetic event.\n * @param date - The selected date range or null.\n */\n onApply?: (\n _event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n };\n\nexport const DatePickerActions = forwardRef(function DatePickerRangeInput<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerActionsProps<TDate, \"single\" | \"range\">,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n applyButtonRef,\n ApplyButtonProps,\n cancelButtonRef,\n children,\n className,\n CancelButtonProps,\n onApply,\n onCancel,\n selectionVariant,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-actions\",\n css: datePickerActions,\n window: targetWindow,\n });\n\n // biome-ignore lint/suspicious/noExplicitAny: state and helpers coerced based on selectionVariant\n let stateAndHelpers: any;\n if (selectionVariant === \"range\") {\n stateAndHelpers = useDatePickerContext({\n selectionVariant: \"range\",\n }) as RangeDatePickerState<TDate>;\n } else {\n stateAndHelpers = useDatePickerContext({\n selectionVariant: \"single\",\n }) as SingleDatePickerState<TDate>;\n }\n\n const {\n state: { selectedDate },\n helpers: { cancel, apply, setEnableApply },\n } = stateAndHelpers;\n\n useEffect(() => {\n setEnableApply(true);\n }, [setEnableApply]);\n\n const handleCancel: MouseEventHandler<HTMLButtonElement> = (event) => {\n cancel(event);\n CancelButtonProps?.onClick?.(event);\n onCancel?.(event);\n };\n\n const handleApply: MouseEventHandler<HTMLButtonElement> = (event) => {\n apply(event, selectedDate);\n onApply?.(event, selectedDate);\n ApplyButtonProps?.onClick?.(event);\n };\n\n return (\n <div className={clsx(className, withBaseName())} ref={ref} {...rest}>\n <div className={withBaseName(\"body\")}>{children}</div>\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n ref={cancelButtonRef}\n {...CancelButtonProps}\n onClick={handleCancel}\n className={clsx(withBaseName(\"action\"), CancelButtonProps?.className)}\n >\n Cancel\n </Button>\n <Button\n appearance=\"solid\"\n sentiment=\"accented\"\n ref={applyButtonRef}\n {...ApplyButtonProps}\n onClick={handleApply}\n className={clsx(withBaseName(\"action\"), ApplyButtonProps?.className)}\n >\n Apply\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","datePickerActions","useDatePickerContext","useEffect","jsxs","clsx","jsx","Button"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type Context, type Ref, type SyntheticEvent, useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\n\n/**\n * Interface representing the base state for a DatePicker.\n */\ninterface DatePickerBaseState<TDate extends DateFrameworkType> {\n /**\n * The state properties of the DatePicker.\n */\n state: {\n /**\n * If `true`, the DatePicker is disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the DatePicker is read-only.\n */\n readOnly?: boolean;\n /**\n * If `true`, the DatePicker has been cancelled.\n */\n cancelled?: boolean;\n /**\n * If `true`, the apply action is enabled.\n */\n enableApply?: boolean;\n /**\n * The minimum selectable date.\n */\n minDate?: TDate;\n /**\n * The maximum selectable date.\n */\n maxDate?: TDate;\n /**\n * Reference to the container element.\n */\n containerRef: Ref<HTMLDivElement>;\n };\n /**\n * Helper functions for managing the DatePicker state.\n */\n helpers: {\n /**\n * Cancels the DatePicker action.\n */\n cancel: () => void;\n /**\n * Sets the enableApply state.\n * @param newEnableApply - The new value for enableApply.\n */\n setEnableApply: (newEnableApply: boolean) => void;\n };\n}\n\n/**\n * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState<TDate extends DateFrameworkType>\n extends DatePickerBaseState<TDate> {\n /**\n * The state properties of the single date picker.\n */\n state: DatePickerBaseState<TDate>[\"state\"] & {\n /**\n * The selected date.\n */\n selectedDate: SingleDateSelection<TDate> | null;\n /**\n * The default selected date.\n */\n defaultSelectedDate?: SingleDateSelection<TDate>;\n };\n /**\n * Helper functions for managing the single date picker state.\n */\n helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n /**\n * Apply the selected single date.\n * @param event - The synthetic event.\n * @param date - The new applied date.\n */\n apply: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n /**\n * Select a single date.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - Details of selection, such as errors and original value.\n */\n select: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState<TDate extends DateFrameworkType>\n extends DatePickerBaseState<TDate> {\n /**\n * The state properties of the range date picker.\n */\n state: DatePickerBaseState<TDate>[\"state\"] & {\n /**\n * The selected date range.\n */\n selectedDate: DateRangeSelection<TDate> | null;\n /**\n * The default selected date range.\n */\n defaultSelectedDate?: DateRangeSelection<TDate>;\n };\n /**\n * Helper functions for managing the range date picker state.\n */\n helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n /**\n * Apply the selected date range.\n * @param event - The synthetic event.\n * @param date - The new applied date range\n */\n apply: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n /**\n * Select a date range.\n * @param event - The synthetic event.\n * @param date - The selected date.\n * @param details - Details of selection, such as errors and original value. */\n select: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n };\n}\n\n/**\n * Type representing the state of a date picker, either single or range.\n */\nexport type DatePickerState<TDate extends DateFrameworkType> =\n | SingleDatePickerState<TDate>\n | RangeDatePickerState<TDate>;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n SingleDatePickerState<any> | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n RangeDatePickerState<any> | undefined\n>(\"DateRangeSelectionContext\", undefined);\n\n/**\n * Props for using the date picker context.\n */\nexport interface UseDatePickerContextProps {\n /**\n * The selection variant, either \"single\" or \"range\".\n */\n selectionVariant: \"single\" | \"range\";\n}\n\n// Overloads\n\n/**\n * Hook to use the date picker context for single date selection.\n * @param props - The props for the hook.\n * @returns The state of the single date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n selectionVariant: \"single\";\n}): SingleDatePickerState<TDate>;\n\n/**\n * Hook to use the date picker context for range date selection.\n * @param props - The props for the hook.\n * @returns The state of the range date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n selectionVariant: \"range\";\n}): RangeDatePickerState<TDate>;\n\nexport function useDatePickerContext<TDate extends DateFrameworkType>({\n selectionVariant,\n}: UseDatePickerContextProps): DatePickerState<TDate> {\n if (selectionVariant === \"range\") {\n const context = useContext(\n DateRangeSelectionContext as Context<\n RangeDatePickerState<TDate> | undefined\n >,\n );\n if (!context) {\n throw new Error(\n 'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n );\n }\n return context;\n }\n const context = useContext(\n SingleDateSelectionContext as Context<\n SingleDatePickerState<TDate> | undefined\n >,\n );\n if (!context) {\n throw new Error(\n 'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n );\n }\n return context;\n}\n"],"names":["createContext","context","useContext"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type Context, type Ref, type SyntheticEvent, useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\n\n/**\n * Interface representing the base state for a DatePicker.\n */\ninterface DatePickerBaseState<TDate extends DateFrameworkType> {\n /**\n * The state properties of the DatePicker.\n */\n state: {\n /**\n * If `true`, the DatePicker is disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the DatePicker is read-only.\n */\n readOnly?: boolean;\n /**\n * If `true`, the DatePicker has been cancelled.\n */\n cancelled?: boolean;\n /**\n * If `true`, the apply action is enabled.\n */\n enableApply?: boolean;\n /**\n * The minimum selectable date.\n */\n minDate?: TDate;\n /**\n * The maximum selectable date.\n */\n maxDate?: TDate;\n /**\n * Reference to the container element.\n */\n containerRef: Ref<HTMLDivElement>;\n };\n /**\n * Helper functions for managing the DatePicker state.\n */\n helpers: {\n /**\n * Cancels the DatePicker action.\n * @param event - event that triggered the state change\n */\n cancel: (event?: Event) => void;\n /**\n * Sets the enableApply state.\n * @param newEnableApply - The new value for enableApply.\n */\n setEnableApply: (newEnableApply: boolean) => void;\n };\n}\n\n/**\n * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState<TDate extends DateFrameworkType>\n extends DatePickerBaseState<TDate> {\n /**\n * The state properties of the single date picker.\n */\n state: DatePickerBaseState<TDate>[\"state\"] & {\n /**\n * The selected date.\n */\n selectedDate: SingleDateSelection<TDate> | null;\n /**\n * The default selected date.\n */\n defaultSelectedDate?: SingleDateSelection<TDate>;\n };\n /**\n * Helper functions for managing the single date picker state.\n */\n helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n /**\n * Apply the selected single date.\n * @param event - The synthetic event.\n * @param date - The new applied date.\n */\n apply: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n /**\n * Select a single date.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - Details of selection, such as errors and original value.\n */\n select: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState<TDate extends DateFrameworkType>\n extends DatePickerBaseState<TDate> {\n /**\n * The state properties of the range date picker.\n */\n state: DatePickerBaseState<TDate>[\"state\"] & {\n /**\n * The selected date range.\n */\n selectedDate: DateRangeSelection<TDate> | null;\n /**\n * The default selected date range.\n */\n defaultSelectedDate?: DateRangeSelection<TDate>;\n };\n /**\n * Helper functions for managing the range date picker state.\n */\n helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n /**\n * Apply the selected date range.\n * @param event - The synthetic event.\n * @param date - The new applied date range\n */\n apply: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n /**\n * Select a date range.\n * @param event - The synthetic event.\n * @param date - The selected date.\n * @param details - Details of selection, such as errors and original value. */\n select: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n };\n}\n\n/**\n * Type representing the state of a date picker, either single or range.\n */\nexport type DatePickerState<TDate extends DateFrameworkType> =\n | SingleDatePickerState<TDate>\n | RangeDatePickerState<TDate>;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n SingleDatePickerState<any> | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n RangeDatePickerState<any> | undefined\n>(\"DateRangeSelectionContext\", undefined);\n\n/**\n * Props for using the date picker context.\n */\nexport interface UseDatePickerContextProps {\n /**\n * The selection variant, either \"single\" or \"range\".\n */\n selectionVariant: \"single\" | \"range\";\n}\n\n// Overloads\n\n/**\n * Hook to use the date picker context for single date selection.\n * @param props - The props for the hook.\n * @returns The state of the single date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n selectionVariant: \"single\";\n}): SingleDatePickerState<TDate>;\n\n/**\n * Hook to use the date picker context for range date selection.\n * @param props - The props for the hook.\n * @returns The state of the range date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n selectionVariant: \"range\";\n}): RangeDatePickerState<TDate>;\n\nexport function useDatePickerContext<TDate extends DateFrameworkType>({\n selectionVariant,\n}: UseDatePickerContextProps): DatePickerState<TDate> {\n if (selectionVariant === \"range\") {\n const context = useContext(\n DateRangeSelectionContext as Context<\n RangeDatePickerState<TDate> | undefined\n >,\n );\n if (!context) {\n throw new Error(\n 'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n );\n }\n return context;\n }\n const context = useContext(\n SingleDateSelectionContext as Context<\n SingleDatePickerState<TDate> | undefined\n >,\n );\n if (!context) {\n throw new Error(\n 'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n );\n }\n return context;\n}\n"],"names":["createContext","context","useContext"],"mappings":";;;;;AAkKa,MAAA,0BAAA,GAA6BA,kBAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA;AAK5B,MAAA,yBAAA,GAA4BA,kBAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA;AAgCjC,SAAS,oBAAsD,CAAA;AAAA,EACpE;AACF,CAAsD,EAAA;AACpD,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,MAAMC,QAAU,GAAAC,gBAAA;AAAA,MACd;AAAA,KAGF;AACA,IAAA,IAAI,CAACD,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAEF,IAAOA,OAAAA,QAAAA;AAAA;AAET,EAAA,MAAM,OAAU,GAAAC,gBAAA;AAAA,IACd;AAAA,GAGF;AACA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;;"}
|
|
@@ -35,10 +35,6 @@ const DatePickerOverlay = react.forwardRef(function DatePickerOverlay2({ classNa
|
|
|
35
35
|
role: "dialog",
|
|
36
36
|
"aria-modal": "true",
|
|
37
37
|
ref: floatingRef,
|
|
38
|
-
focusManagerProps: (floatingUIResult == null ? void 0 : floatingUIResult.context) ? {
|
|
39
|
-
context: floatingUIResult.context,
|
|
40
|
-
initialFocus: 4
|
|
41
|
-
} : void 0,
|
|
42
38
|
...getFloatingProps ? getFloatingProps({
|
|
43
39
|
...a11yProps,
|
|
44
40
|
...rest
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerOverlay.js","sources":["../src/date-picker/DatePickerOverlay.tsx"],"sourcesContent":["import {\n makePrefixer,\n useFloatingComponent,\n useForkRef,\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 ReactNode,\n forwardRef,\n} from \"react\";\nimport datePickerOverlayCss from \"./DatePickerOverlay.css\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerOverlay\");\n\n/**\n * Props for the DatePickerOverlay component.\n */\nexport interface DatePickerOverlayProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content to be rendered inside the overlay.\n */\n children: ReactNode;\n}\n\nexport const DatePickerOverlay = forwardRef<\n HTMLDivElement,\n DatePickerOverlayProps\n>(function DatePickerOverlay({ className, children, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-overlay\",\n css: datePickerOverlayCss,\n window: targetWindow,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { a11yProps } = useFormFieldProps();\n\n const {\n state: { open, floatingUIResult },\n helpers: { getFloatingProps },\n } = useDatePickerOverlay();\n\n const floatingRef = useForkRef<HTMLDivElement>(\n ref,\n floatingUIResult?.floating,\n );\n\n return (\n <FloatingComponent\n className={clsx(withBaseName(), className)}\n open={open || false}\n role=\"dialog\"\n aria-modal=\"true\"\n ref={floatingRef}\n
|
|
1
|
+
{"version":3,"file":"DatePickerOverlay.js","sources":["../src/date-picker/DatePickerOverlay.tsx"],"sourcesContent":["import {\n makePrefixer,\n useFloatingComponent,\n useForkRef,\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 ReactNode,\n forwardRef,\n} from \"react\";\nimport datePickerOverlayCss from \"./DatePickerOverlay.css\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerOverlay\");\n\n/**\n * Props for the DatePickerOverlay component.\n */\nexport interface DatePickerOverlayProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content to be rendered inside the overlay.\n */\n children: ReactNode;\n}\n\nexport const DatePickerOverlay = forwardRef<\n HTMLDivElement,\n DatePickerOverlayProps\n>(function DatePickerOverlay({ className, children, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-overlay\",\n css: datePickerOverlayCss,\n window: targetWindow,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { a11yProps } = useFormFieldProps();\n\n const {\n state: { open, floatingUIResult },\n helpers: { getFloatingProps },\n } = useDatePickerOverlay();\n\n const floatingRef = useForkRef<HTMLDivElement>(\n ref,\n floatingUIResult?.floating,\n );\n\n return (\n <FloatingComponent\n className={clsx(withBaseName(), className)}\n open={open || false}\n role=\"dialog\"\n aria-modal=\"true\"\n ref={floatingRef}\n {...(getFloatingProps\n ? getFloatingProps({\n ...a11yProps,\n ...rest,\n })\n : rest)}\n >\n {children}\n </FloatingComponent>\n );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerOverlay","useWindow","useComponentCssInjection","datePickerOverlayCss","useFloatingComponent","useFormFieldProps","useDatePickerOverlay","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAa5C,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBAAkB,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA;AAE9D,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,sBAAkB,EAAA;AAExC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAiB,EAAA;AAAA,IAChC,OAAA,EAAS,EAAE,gBAAiB;AAAA,MAC1BC,8CAAqB,EAAA;AAEzB,EAAA,MAAM,WAAc,GAAAC,eAAA;AAAA,IAClB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,MAAM,IAAQ,IAAA,KAAA;AAAA,MACd,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,MAAA;AAAA,MACX,GAAK,EAAA,WAAA;AAAA,MACJ,GAAI,mBACD,gBAAiB,CAAA;AAAA,QACf,GAAG,SAAA;AAAA,QACH,GAAG;AAAA,OACJ,CACD,GAAA,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -4,65 +4,78 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var react$1 = require('@floating-ui/react');
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
6
|
var react = require('react');
|
|
7
|
+
var useKeyboard = require('./useKeyboard.js');
|
|
7
8
|
|
|
8
9
|
const DatePickerOverlayContext = core.createContext("DatePickerOverlayContext", void 0);
|
|
9
|
-
const DatePickerOverlayProvider = ({
|
|
10
|
-
|
|
10
|
+
const DatePickerOverlayProvider = ({
|
|
11
|
+
open: openProp,
|
|
12
|
+
openOnClick,
|
|
13
|
+
defaultOpen,
|
|
14
|
+
onOpenChange,
|
|
15
|
+
children,
|
|
16
|
+
interactions,
|
|
17
|
+
readOnly
|
|
18
|
+
}) => {
|
|
19
|
+
const [open, setOpenState, isOpenControlled] = core.useControlled({
|
|
11
20
|
controlled: openProp,
|
|
12
21
|
default: Boolean(defaultOpen),
|
|
13
22
|
name: "DatePicker",
|
|
14
23
|
state: "openDatePickerOverlay"
|
|
15
24
|
});
|
|
16
|
-
const
|
|
25
|
+
const [disableFocus, setDisableFocus] = react.useState(true);
|
|
26
|
+
const triggeringElementRef = react.useRef(null);
|
|
17
27
|
const onDismissCallback = react.useRef();
|
|
18
|
-
react.
|
|
19
|
-
|
|
20
|
-
const trigger = triggeringElement.current;
|
|
21
|
-
if (trigger) {
|
|
22
|
-
trigger.focus();
|
|
23
|
-
}
|
|
24
|
-
if (trigger instanceof HTMLInputElement) {
|
|
25
|
-
setTimeout(() => {
|
|
26
|
-
trigger.setSelectionRange(0, trigger.value.length);
|
|
27
|
-
}, 0);
|
|
28
|
-
}
|
|
29
|
-
triggeringElement.current = null;
|
|
30
|
-
}
|
|
31
|
-
}, [open]);
|
|
32
|
-
const setOpen = react.useCallback(
|
|
33
|
-
(newOpen, _event, reason) => {
|
|
28
|
+
const handleOpenChange = react.useCallback(
|
|
29
|
+
(newOpen, event, reason) => {
|
|
34
30
|
var _a;
|
|
35
31
|
if (newOpen) {
|
|
36
32
|
if (readOnly) {
|
|
37
33
|
return;
|
|
38
34
|
}
|
|
39
|
-
|
|
35
|
+
triggeringElementRef.current = document.activeElement;
|
|
36
|
+
setDisableFocus(reason === "click");
|
|
37
|
+
} else if (!isOpenControlled) {
|
|
38
|
+
const trigger = triggeringElementRef.current;
|
|
39
|
+
if (trigger) {
|
|
40
|
+
trigger.focus();
|
|
41
|
+
}
|
|
42
|
+
if (trigger instanceof HTMLInputElement) {
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
trigger.setSelectionRange(0, trigger.value.length);
|
|
45
|
+
}, 1);
|
|
46
|
+
}
|
|
47
|
+
triggeringElementRef.current = null;
|
|
40
48
|
}
|
|
41
49
|
setOpenState(newOpen);
|
|
42
|
-
|
|
50
|
+
onOpenChange == null ? void 0 : onOpenChange(newOpen, event, reason);
|
|
43
51
|
if (reason === "escape-key" || reason === "outside-press" && onDismissCallback.current) {
|
|
44
52
|
(_a = onDismissCallback == null ? void 0 : onDismissCallback.current) == null ? void 0 : _a.call(onDismissCallback);
|
|
45
53
|
}
|
|
46
54
|
},
|
|
47
|
-
[
|
|
55
|
+
[onOpenChange, readOnly]
|
|
48
56
|
);
|
|
57
|
+
const openState = open && !readOnly;
|
|
49
58
|
const floatingUIResult = core.useFloatingUI({
|
|
50
|
-
open,
|
|
51
|
-
onOpenChange:
|
|
59
|
+
open: openState,
|
|
60
|
+
onOpenChange: handleOpenChange,
|
|
52
61
|
placement: "bottom-start",
|
|
53
62
|
middleware: [react$1.flip({ fallbackStrategy: "initialPlacement" })]
|
|
54
63
|
});
|
|
55
64
|
const {
|
|
56
|
-
getFloatingProps:
|
|
57
|
-
getReferenceProps:
|
|
58
|
-
} = react$1.useInteractions(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
getFloatingProps: getFloatingPropsCallback,
|
|
66
|
+
getReferenceProps: getReferencePropsCallback
|
|
67
|
+
} = react$1.useInteractions(
|
|
68
|
+
interactions ? interactions(floatingUIResult.context) : [
|
|
69
|
+
react$1.useDismiss(floatingUIResult.context),
|
|
70
|
+
useKeyboard.useKeyboard(floatingUIResult.context, {
|
|
71
|
+
enabled: !readOnly
|
|
72
|
+
}),
|
|
73
|
+
react$1.useClick(floatingUIResult.context, {
|
|
74
|
+
enabled: !!openOnClick && !readOnly,
|
|
75
|
+
toggle: false,
|
|
76
|
+
keyboardHandlers: false
|
|
77
|
+
})
|
|
78
|
+
]
|
|
66
79
|
);
|
|
67
80
|
const getFloatingProps = react.useCallback(
|
|
68
81
|
(userProps) => {
|
|
@@ -74,17 +87,26 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, childr
|
|
|
74
87
|
position: strategy,
|
|
75
88
|
width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
|
|
76
89
|
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
|
|
77
|
-
...getFloatingPropsCallback(userProps)
|
|
90
|
+
...getFloatingPropsCallback(userProps),
|
|
91
|
+
focusManagerProps: {
|
|
92
|
+
disabled: disableFocus,
|
|
93
|
+
returnFocus: false,
|
|
94
|
+
context: floatingUIResult.context,
|
|
95
|
+
initialFocus: 4
|
|
96
|
+
}
|
|
78
97
|
};
|
|
79
98
|
},
|
|
80
|
-
[getFloatingPropsCallback, floatingUIResult]
|
|
99
|
+
[getFloatingPropsCallback, floatingUIResult, disableFocus]
|
|
100
|
+
);
|
|
101
|
+
const setOnDismiss = react.useCallback(
|
|
102
|
+
(dismissCallback) => {
|
|
103
|
+
onDismissCallback.current = dismissCallback;
|
|
104
|
+
},
|
|
105
|
+
[]
|
|
81
106
|
);
|
|
82
|
-
const setOnDismiss = react.useCallback((dismissCallback) => {
|
|
83
|
-
onDismissCallback.current = dismissCallback;
|
|
84
|
-
}, []);
|
|
85
107
|
const state = react.useMemo(
|
|
86
108
|
() => ({
|
|
87
|
-
open,
|
|
109
|
+
open: openState,
|
|
88
110
|
floatingUIResult
|
|
89
111
|
}),
|
|
90
112
|
[open, floatingUIResult]
|
|
@@ -92,11 +114,11 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, childr
|
|
|
92
114
|
const helpers = react.useMemo(
|
|
93
115
|
() => ({
|
|
94
116
|
getFloatingProps,
|
|
95
|
-
getReferenceProps,
|
|
96
|
-
setOpen,
|
|
117
|
+
getReferenceProps: getReferencePropsCallback,
|
|
118
|
+
setOpen: handleOpenChange,
|
|
97
119
|
setOnDismiss
|
|
98
120
|
}),
|
|
99
|
-
[getFloatingProps,
|
|
121
|
+
[getFloatingProps, getReferencePropsCallback, handleOpenChange]
|
|
100
122
|
);
|
|
101
123
|
const contextValue = react.useMemo(() => ({ state, helpers }), [state, helpers]);
|
|
102
124
|
return /* @__PURE__ */ jsxRuntime.jsx(DatePickerOverlayContext.Provider, { value: contextValue, children });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import {\n type OpenChangeReason,\n flip,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { createContext, useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\n\n/**\n * Interface representing the state for a DatePicker overlay.\n */\ninterface DatePickerOverlayState {\n /**\n * If `true`, the overlay is open.\n */\n open: boolean;\n /**\n * The result of the floating UI calculations.\n */\n floatingUIResult: ReturnType<typeof useFloatingUI>;\n}\n\n/**\n * Interface representing the helper functions for a DatePicker overlay.\n */\ninterface DatePickerOverlayHelpers {\n /**\n * Function to get the props for the floating element.\n */\n getFloatingProps: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n /**\n * Function to get the props for the reference element.\n */\n getReferenceProps: ReturnType<typeof useInteractions>[\"getReferenceProps\"];\n /**\n * Sets the open state of the overlay.\n * @param newOpen - The new value for the open state.\n */\n setOpen: (newOpen: boolean) => void;\n /**~\n * Register a callback for when onDismiss is called\n * @param onDismissCallback\n */\n setOnDismiss: (onDismissCallback: () => void) => void;\n}\n\n/**\n * Interface representing the context type for a DatePicker overlay.\n */\ninterface DatePickerOverlayContextType {\n /**\n * The state of the DatePicker overlay.\n */\n state: DatePickerOverlayState;\n /**\n * The helper functions for the DatePicker overlay.\n */\n helpers: DatePickerOverlayHelpers;\n}\n\n/**\n * Context for the DatePicker overlay.\n */\nconst DatePickerOverlayContext = createContext<\n DatePickerOverlayContextType | undefined\n>(\"DatePickerOverlayContext\", undefined);\n\n/**\n * Props for the DatePickerOverlayProvider component.\n */\ninterface DatePickerOverlayProviderProps {\n /**\n * If `true`, the overlay is open.\n */\n open?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n */\n onOpen?: (newOpen: boolean) => void;\n /**\n * The default open state of the overlay.\n */\n defaultOpen?: boolean;\n /**\n * The content to be rendered inside the overlay provider.\n */\n children: ReactNode;\n /**\n * When true, shouldn't open the overlay.\n */\n readOnly?: boolean;\n}\n\nexport const DatePickerOverlayProvider: React.FC<\n DatePickerOverlayProviderProps\n> = ({ open: openProp, defaultOpen, onOpen, children, readOnly }) => {\n const [open, setOpenState] = useControlled({\n controlled: openProp,\n default: Boolean(defaultOpen),\n name: \"DatePicker\",\n state: \"openDatePickerOverlay\",\n });\n const triggeringElement = useRef<HTMLElement | null>(null);\n const onDismissCallback = useRef<() => void>();\n\n useEffect(() => {\n if (!open) {\n const trigger = triggeringElement.current as HTMLElement;\n if (trigger) {\n trigger.focus();\n }\n if (trigger instanceof HTMLInputElement) {\n setTimeout(() => {\n trigger.setSelectionRange(0, trigger.value.length);\n }, 0);\n }\n triggeringElement.current = null;\n }\n }, [open]);\n\n const setOpen = useCallback(\n (\n newOpen: boolean,\n _event?: Event | undefined,\n reason?: OpenChangeReason | undefined,\n ) => {\n if (newOpen) {\n if (readOnly) {\n // When not open overlay when readOnly\n return;\n }\n triggeringElement.current = document.activeElement as HTMLElement;\n }\n setOpenState(newOpen);\n onOpen?.(newOpen);\n if (\n reason === \"escape-key\" ||\n (reason === \"outside-press\" && onDismissCallback.current)\n ) {\n onDismissCallback?.current?.();\n }\n },\n [onOpen, readOnly],\n );\n\n const floatingUIResult = useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n });\n\n const {\n getFloatingProps: _getFloatingPropsCallback,\n getReferenceProps: _getReferenceProps,\n } = useInteractions([useDismiss(floatingUIResult.context)]);\n const getFloatingPropsCallback = useMemo(\n () => _getFloatingPropsCallback,\n [_getFloatingPropsCallback],\n );\n const getReferenceProps = useMemo(\n () => _getReferenceProps,\n [_getReferenceProps],\n );\n\n const getFloatingProps = useCallback(\n (userProps: React.HTMLProps<HTMLElement> | undefined) => {\n const { x, y, strategy, elements } = floatingUIResult;\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n ...getFloatingPropsCallback(userProps),\n };\n },\n [getFloatingPropsCallback, floatingUIResult],\n );\n const setOnDismiss = useCallback((dismissCallback: () => void) => {\n onDismissCallback.current = dismissCallback;\n }, []);\n\n const state: DatePickerOverlayState = useMemo(\n () => ({\n open,\n floatingUIResult,\n }),\n [open, floatingUIResult],\n );\n\n const helpers: DatePickerOverlayHelpers = useMemo(\n () => ({\n getFloatingProps,\n getReferenceProps,\n setOpen,\n setOnDismiss,\n }),\n [getFloatingProps, getReferenceProps, setOpen],\n );\n const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);\n\n return (\n <DatePickerOverlayContext.Provider value={contextValue}>\n {children}\n </DatePickerOverlayContext.Provider>\n );\n};\n\nexport const useDatePickerOverlay = (): DatePickerOverlayContextType => {\n const context = useContext(DatePickerOverlayContext);\n if (!context) {\n throw new Error(\n \"useDatePickerOverlay must be used within a DatePickerOverlayProvider\",\n );\n }\n return context;\n};\n"],"names":["createContext","useControlled","useRef","useEffect","useCallback","useFloatingUI","flip","useInteractions","useDismiss","useMemo","useContext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import {\n type ElementProps,\n type FloatingContext,\n type OpenChangeReason as FloatingUIOpenChangeReason,\n flip,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { createContext, useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useKeyboard } from \"./useKeyboard\";\n\n/** Reason for overlay state change, can be a custom reason */\nexport type DatePickerOpenChangeReason =\n | FloatingUIOpenChangeReason\n | \"apply\"\n | \"cancel\"\n | string;\n/**\n * Interface representing the state for a DatePicker overlay.\n */\ninterface DatePickerOverlayState {\n /**\n * If `true`, the overlay is open.\n */\n open: boolean;\n /**\n * The result of the floating UI calculations.\n */\n floatingUIResult: ReturnType<typeof useFloatingUI>;\n}\n\n/**\n * Interface representing the helper functions for a DatePicker overlay.\n */\ninterface DatePickerOverlayHelpers {\n /**\n * Function to get the props for the floating element.\n */\n getFloatingProps: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n /**\n * Function to get the props for the reference element.\n */\n getReferenceProps: ReturnType<typeof useInteractions>[\"getReferenceProps\"];\n /**\n * Sets the open state of the overlay.\n * @param newOpen - The new value for the open state.\n * @param event - event that triggered the state change\n * @param reason - reason for the the state change\n */\n setOpen: (\n newOpen: boolean,\n event?: Event,\n reason?: DatePickerOpenChangeReason,\n ) => void;\n /**~\n * Register a callback for when onDismiss is called\n * @param onDismissCallback\n */\n setOnDismiss: (onDismissCallback: (event?: Event) => void) => void;\n}\n\n/**\n * Interface representing the context type for a DatePicker overlay.\n */\ninterface DatePickerOverlayContextType {\n /**\n * The state of the DatePicker overlay.\n */\n state: DatePickerOverlayState;\n /**\n * The helper functions for the DatePicker overlay.\n */\n helpers: DatePickerOverlayHelpers;\n}\n\n/**\n * Context for the DatePicker overlay.\n */\nconst DatePickerOverlayContext = createContext<\n DatePickerOverlayContextType | undefined\n>(\"DatePickerOverlayContext\", undefined);\n\n/**\n * Props for the DatePickerOverlayProvider component.\n */\ninterface DatePickerOverlayProviderProps {\n /**\n * If `true`, the overlay is open.\n */\n open?: boolean;\n /**\n * When `open` is uncontrolled, set this to `true` to open on click\n */\n openOnClick?: boolean;\n /**\n * Handler for when open state changes\n * @param newOpen - true when opened\n * @param event - event that triggered the state change\n * @param reason - reason for the the state change\n */\n onOpenChange?: (\n newOpen: boolean,\n event?: Event,\n reason?: DatePickerOpenChangeReason,\n ) => void;\n /**\n * The default open state of the overlay.\n */\n defaultOpen?: boolean;\n /**\n * The content to be rendered inside the overlay provider.\n */\n children: ReactNode;\n /**\n * A factory method to create a set of interaction, if provided overrides the default interactions\n */\n interactions?: (context: FloatingContext) => Array<ElementProps>;\n /**\n * When true, shouldn't open the overlay.\n */\n readOnly?: boolean;\n}\n\nexport const DatePickerOverlayProvider: React.FC<\n DatePickerOverlayProviderProps\n> = ({\n open: openProp,\n openOnClick,\n defaultOpen,\n onOpenChange,\n children,\n interactions,\n readOnly,\n}) => {\n const [open, setOpenState, isOpenControlled] = useControlled({\n controlled: openProp,\n default: Boolean(defaultOpen),\n name: \"DatePicker\",\n state: \"openDatePickerOverlay\",\n });\n const [disableFocus, setDisableFocus] = useState<boolean>(true);\n const triggeringElementRef = useRef<HTMLElement | null>(null);\n const onDismissCallback = useRef<(event?: Event) => void>();\n const handleOpenChange = useCallback(\n (newOpen: boolean, event?: Event, reason?: DatePickerOpenChangeReason) => {\n if (newOpen) {\n if (readOnly) {\n return;\n }\n triggeringElementRef.current = document.activeElement as HTMLElement;\n setDisableFocus(reason === \"click\"); // prevent the overlay taking focus on click\n } else if (!isOpenControlled) {\n const trigger = triggeringElementRef.current as HTMLElement;\n if (trigger) {\n trigger.focus();\n }\n if (trigger instanceof HTMLInputElement) {\n setTimeout(() => {\n trigger.setSelectionRange(0, trigger.value.length);\n }, 1);\n }\n triggeringElementRef.current = null;\n }\n setOpenState(newOpen);\n onOpenChange?.(newOpen, event, reason);\n\n if (\n reason === \"escape-key\" ||\n (reason === \"outside-press\" && onDismissCallback.current)\n ) {\n onDismissCallback?.current?.();\n }\n },\n [onOpenChange, readOnly],\n );\n\n const openState = open && !readOnly;\n const floatingUIResult = useFloatingUI({\n open: openState,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n });\n\n const {\n getFloatingProps: getFloatingPropsCallback,\n getReferenceProps: getReferencePropsCallback,\n } = useInteractions(\n interactions\n ? interactions(floatingUIResult.context)\n : [\n useDismiss(floatingUIResult.context),\n useKeyboard(floatingUIResult.context, {\n enabled: !readOnly,\n }),\n useClick(floatingUIResult.context, {\n enabled: !!openOnClick && !readOnly,\n toggle: false,\n keyboardHandlers: false,\n }),\n ],\n );\n\n const getFloatingProps = useCallback(\n (userProps: React.HTMLProps<HTMLElement> | undefined) => {\n const { x, y, strategy, elements } = floatingUIResult;\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n ...getFloatingPropsCallback(userProps),\n focusManagerProps: {\n disabled: disableFocus,\n returnFocus: false,\n context: floatingUIResult.context,\n initialFocus: 4,\n },\n };\n },\n [getFloatingPropsCallback, floatingUIResult, disableFocus],\n );\n const setOnDismiss = useCallback(\n (dismissCallback: (event?: Event) => void) => {\n onDismissCallback.current = dismissCallback;\n },\n [],\n );\n\n const state: DatePickerOverlayState = useMemo(\n () => ({\n open: openState,\n floatingUIResult,\n }),\n [open, floatingUIResult],\n );\n\n const helpers: DatePickerOverlayHelpers = useMemo(\n () => ({\n getFloatingProps,\n getReferenceProps: getReferencePropsCallback,\n setOpen: handleOpenChange,\n setOnDismiss,\n }),\n [getFloatingProps, getReferencePropsCallback, handleOpenChange],\n );\n const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);\n\n return (\n <DatePickerOverlayContext.Provider value={contextValue}>\n {children}\n </DatePickerOverlayContext.Provider>\n );\n};\n\nexport const useDatePickerOverlay = (): DatePickerOverlayContextType => {\n const context = useContext(DatePickerOverlayContext);\n if (!context) {\n throw new Error(\n \"useDatePickerOverlay must be used within a DatePickerOverlayProvider\",\n );\n }\n return context;\n};\n"],"names":["createContext","useControlled","useState","useRef","useCallback","useFloatingUI","flip","useInteractions","useDismiss","useKeyboard","useClick","useMemo","useContext"],"mappings":"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"}
|
|
@@ -60,9 +60,8 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
|
|
|
60
60
|
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
61
61
|
const {
|
|
62
62
|
className,
|
|
63
|
-
endInputProps
|
|
64
|
-
startInputProps
|
|
65
|
-
onKeyDown,
|
|
63
|
+
endInputProps,
|
|
64
|
+
startInputProps,
|
|
66
65
|
defaultValue,
|
|
67
66
|
format,
|
|
68
67
|
value: valueProp,
|
|
@@ -87,9 +86,13 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
|
|
|
87
86
|
name: "DatePickerRangeInput",
|
|
88
87
|
state: "dateValue"
|
|
89
88
|
});
|
|
90
|
-
const handleCalendarButton = react.useCallback(
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
const handleCalendarButton = react.useCallback(
|
|
90
|
+
(event) => {
|
|
91
|
+
setOpen(!open, event.nativeEvent, "click");
|
|
92
|
+
event.stopPropagation();
|
|
93
|
+
},
|
|
94
|
+
[open, setOpen]
|
|
95
|
+
);
|
|
93
96
|
const handleDateChange = react.useCallback(
|
|
94
97
|
(event, date, details) => {
|
|
95
98
|
const validatedDetails = validate ? validate(date, details) : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);
|
|
@@ -114,26 +117,6 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
|
|
|
114
117
|
setValue(previousValue.current);
|
|
115
118
|
}
|
|
116
119
|
}, [cancelled]);
|
|
117
|
-
const startInputProps = {
|
|
118
|
-
onKeyDown: (event) => {
|
|
119
|
-
var _a;
|
|
120
|
-
if (event.key === "ArrowDown") {
|
|
121
|
-
setOpen(true);
|
|
122
|
-
}
|
|
123
|
-
(_a = startInputPropsProp == null ? void 0 : startInputPropsProp.onKeyDown) == null ? void 0 : _a.call(startInputPropsProp, event);
|
|
124
|
-
},
|
|
125
|
-
...startInputPropsProp
|
|
126
|
-
};
|
|
127
|
-
const endInputProps = {
|
|
128
|
-
onKeyDown: (event) => {
|
|
129
|
-
var _a;
|
|
130
|
-
if (event.key === "ArrowDown") {
|
|
131
|
-
setOpen(true);
|
|
132
|
-
}
|
|
133
|
-
(_a = endInputPropsProp == null ? void 0 : endInputPropsProp.onKeyDown) == null ? void 0 : _a.call(endInputPropsProp, event);
|
|
134
|
-
},
|
|
135
|
-
...endInputPropsProp
|
|
136
|
-
};
|
|
137
120
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
138
121
|
DateInputRange.DateInputRange,
|
|
139
122
|
{
|
|
@@ -146,6 +129,7 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
|
|
|
146
129
|
startInputProps,
|
|
147
130
|
endInputProps,
|
|
148
131
|
readOnly,
|
|
132
|
+
disabled,
|
|
149
133
|
ref,
|
|
150
134
|
onDateChange: handleDateChange,
|
|
151
135
|
onDateValueChange: handleDateValueChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useIcon } from \"@salt-ds/core\";\nimport {\n DateDetailError,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { clsx } from \"clsx\";\nimport {\n type KeyboardEvent,\n type KeyboardEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n DateInputRange,\n type DateInputRangeDetails,\n type DateInputRangeProps,\n type DateInputRangeValue,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerRangeInput\");\n\n/**\n * Props for the DatePickerRangeInput component.\n */\nexport interface DatePickerRangeInputProps<TDate extends DateFrameworkType>\n extends DateInputRangeProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputRangeDetails details\n */\n validate?: (\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => DateInputRangeDetails;\n}\n\nexport function defaultRangeValidator<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n minDate: TDate | undefined,\n maxDate: TDate | undefined,\n): DateInputRangeDetails {\n const { startDate, endDate } = date || {};\n\n if (!startDate) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: DateDetailError.UNSET,\n message: \"no start date defined\",\n });\n }\n if (!endDate) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: DateDetailError.UNSET,\n message: \"no end date defined\",\n });\n }\n\n // If startDate is after endDate\n if (\n dateAdapter.isValid(startDate) &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(startDate, endDate) > 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"greater-than-end-date\",\n message: \"start date after end date\",\n });\n }\n // If startDate is before minDate\n if (\n minDate &&\n dateAdapter.isValid(startDate) &&\n dateAdapter.compare(startDate, minDate) < 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n }\n // If endDate is after maxDate\n if (\n maxDate &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(endDate, maxDate) > 0\n ) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n return details;\n}\n\nexport const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerRangeInputProps<SingleDateSelection<TDate>>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n className,\n endInputProps: endInputPropsProp,\n startInputProps: startInputPropsProp,\n onKeyDown,\n defaultValue,\n format,\n value: valueProp,\n validate,\n onChange,\n onDateValueChange,\n ...rest\n } = props;\n\n const { CalendarIcon } = useIcon();\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"range\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerRangeInput\",\n state: \"dateValue\",\n });\n\n const handleCalendarButton = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);\n select(event, date, validatedDetails);\n },\n [select, minDate, maxDate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: DateInputRangeValue) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue.current);\n }\n }, [cancelled]);\n\n const startInputProps: {\n onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n } = {\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n }\n startInputPropsProp?.onKeyDown?.(event);\n },\n ...startInputPropsProp,\n };\n const endInputProps: {\n onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n } = {\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n }\n endInputPropsProp?.onKeyDown?.(event);\n },\n ...endInputPropsProp,\n };\n\n return (\n <DateInputRange\n value={\n value ?? {\n startDate: dateAdapter.format(value, format),\n endDate: dateAdapter.format(value, format),\n }\n }\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n startInputProps={startInputProps}\n endInputProps={endInputProps}\n readOnly={readOnly}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n onChange={onChange}\n endAdornment={\n !readOnly && (\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n )\n }\n format={format}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","DateDetailError","forwardRef","DatePickerRangeInput","useLocalization","useIcon","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputRange","clsx","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useIcon } from \"@salt-ds/core\";\nimport {\n DateDetailError,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { clsx } from \"clsx\";\nimport {\n type MouseEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n DateInputRange,\n type DateInputRangeDetails,\n type DateInputRangeProps,\n type DateInputRangeValue,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerRangeInput\");\n\n/**\n * Props for the DatePickerRangeInput component.\n */\nexport interface DatePickerRangeInputProps<TDate extends DateFrameworkType>\n extends DateInputRangeProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputRangeDetails details\n */\n validate?: (\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => DateInputRangeDetails;\n}\n\nexport function defaultRangeValidator<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n minDate?: TDate,\n maxDate?: TDate,\n): DateInputRangeDetails {\n const { startDate, endDate } = date || {};\n\n if (!startDate) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: DateDetailError.UNSET,\n message: \"no start date defined\",\n });\n }\n if (!endDate) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: DateDetailError.UNSET,\n message: \"no end date defined\",\n });\n }\n\n // If startDate is after endDate\n if (\n dateAdapter.isValid(startDate) &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(startDate, endDate) > 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"greater-than-end-date\",\n message: \"start date after end date\",\n });\n }\n // If startDate is before minDate\n if (\n minDate &&\n dateAdapter.isValid(startDate) &&\n dateAdapter.compare(startDate, minDate) < 0\n ) {\n details.startDate = details.startDate || {};\n details.startDate.errors = details.startDate.errors || [];\n details.startDate.errors.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n }\n // If endDate is after maxDate\n if (\n maxDate &&\n dateAdapter.isValid(endDate) &&\n dateAdapter.compare(endDate, maxDate) > 0\n ) {\n details.endDate = details.endDate || {};\n details.endDate.errors = details.endDate.errors || [];\n details.endDate.errors.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n return details;\n}\n\nexport const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerRangeInputProps<SingleDateSelection<TDate>>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { dateAdapter } = useLocalization<TDate>();\n const {\n className,\n endInputProps,\n startInputProps,\n defaultValue,\n format,\n value: valueProp,\n validate,\n onChange,\n onDateValueChange,\n ...rest\n } = props;\n\n const { CalendarIcon } = useIcon();\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"range\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerRangeInput\",\n state: \"dateValue\",\n });\n\n const handleCalendarButton: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n setOpen(!open, event.nativeEvent, \"click\");\n event.stopPropagation();\n },\n [open, setOpen],\n );\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);\n select(event, date, validatedDetails);\n },\n [select, minDate, maxDate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: DateInputRangeValue) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue.current);\n }\n }, [cancelled]);\n\n return (\n <DateInputRange\n value={\n value ?? {\n startDate: dateAdapter.format(value, format),\n endDate: dateAdapter.format(value, format),\n }\n }\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n startInputProps={startInputProps}\n endInputProps={endInputProps}\n readOnly={readOnly}\n disabled={disabled}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n onChange={onChange}\n endAdornment={\n !readOnly && (\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n )\n }\n format={format}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","DateDetailError","forwardRef","DatePickerRangeInput","useLocalization","useIcon","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputRange","clsx","Button"],"mappings":"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"}
|
|
@@ -49,7 +49,6 @@ const DatePickerSingleInput = react.forwardRef(
|
|
|
49
49
|
validate,
|
|
50
50
|
defaultValue,
|
|
51
51
|
onDateValueChange,
|
|
52
|
-
onKeyDown,
|
|
53
52
|
...rest
|
|
54
53
|
} = props;
|
|
55
54
|
const {
|
|
@@ -67,9 +66,13 @@ const DatePickerSingleInput = react.forwardRef(
|
|
|
67
66
|
name: "DatePickerSingleInput",
|
|
68
67
|
state: "value"
|
|
69
68
|
});
|
|
70
|
-
const handleCalendarButton = react.useCallback(
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
const handleCalendarButton = react.useCallback(
|
|
70
|
+
(event) => {
|
|
71
|
+
setOpen(!open, event.nativeEvent, "click");
|
|
72
|
+
event.stopPropagation();
|
|
73
|
+
},
|
|
74
|
+
[open, setOpen]
|
|
75
|
+
);
|
|
73
76
|
const handleDateChange = react.useCallback(
|
|
74
77
|
(event, date, details) => {
|
|
75
78
|
const validatedDetails = validate ? validate(date, details) : defaultSingleValidation(
|
|
@@ -90,15 +93,6 @@ const DatePickerSingleInput = react.forwardRef(
|
|
|
90
93
|
},
|
|
91
94
|
[onDateValueChange]
|
|
92
95
|
);
|
|
93
|
-
const handleOnKeyDown = react.useCallback(
|
|
94
|
-
(event) => {
|
|
95
|
-
if (event.key === "ArrowDown") {
|
|
96
|
-
setOpen(true);
|
|
97
|
-
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
[onKeyDown]
|
|
101
|
-
);
|
|
102
96
|
react.useEffect(() => {
|
|
103
97
|
if (open) {
|
|
104
98
|
previousValue.current = value;
|
|
@@ -116,6 +110,7 @@ const DatePickerSingleInput = react.forwardRef(
|
|
|
116
110
|
className: clsx.clsx(withBaseName(), className),
|
|
117
111
|
date: selectedDate ?? null,
|
|
118
112
|
readOnly,
|
|
113
|
+
disabled,
|
|
119
114
|
ref,
|
|
120
115
|
onDateChange: handleDateChange,
|
|
121
116
|
onDateValueChange: handleDateValueChange,
|
|
@@ -130,7 +125,6 @@ const DatePickerSingleInput = react.forwardRef(
|
|
|
130
125
|
children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarIcon, {})
|
|
131
126
|
}
|
|
132
127
|
),
|
|
133
|
-
onKeyDown: handleOnKeyDown,
|
|
134
128
|
...rest
|
|
135
129
|
}
|
|
136
130
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailError,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type
|
|
1
|
+
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailError,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type MouseEventHandler,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n DateInputSingle,\n type DateInputSingleDetails,\n type DateInputSingleProps,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps<TDate extends DateFrameworkType>\n extends DateInputSingleProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputSingleDetails details\n */\n validate?: (\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => DateInputSingleDetails;\n}\n\nfunction defaultSingleValidation<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: TDate,\n details: DateInputSingleDetails,\n minDate?: TDate,\n maxDate?: TDate,\n): DateInputSingleDetails {\n if (!date) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: DateDetailError.UNSET,\n message: \"no date defined\",\n });\n } else {\n if (\n minDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, minDate) < 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n } else if (\n maxDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, maxDate) > 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n }\n return details;\n}\n\nexport const DatePickerSingleInput = forwardRef<\n HTMLDivElement,\n DatePickerSingleInputProps<any>\n>(\n <TDate extends DateFrameworkType>(\n props: DatePickerSingleInputProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n className,\n onFocus,\n onBlur,\n value: valueProp,\n validate,\n defaultValue,\n onDateValueChange,\n ...rest\n } = props;\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"single\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerSingleInput\",\n state: \"value\",\n });\n\n const handleCalendarButton: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n setOpen(!open, event.nativeEvent, \"click\");\n event.stopPropagation();\n },\n [open, setOpen],\n );\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultSingleValidation<TDate>(\n dateAdapter,\n date,\n details,\n minDate,\n maxDate,\n );\n select(event, date, validatedDetails);\n },\n [select, validate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: string) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue?.current);\n }\n }, [cancelled]);\n\n return (\n <DateInputSingle\n value={value ?? \"\"}\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n readOnly={readOnly}\n disabled={disabled}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n endAdornment={\n !readOnly && (\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n )\n }\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","DateDetailError","forwardRef","useLocalization","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputSingle","clsx","Button","CalendarIcon"],"mappings":"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"}
|