@salt-ds/lab 1.0.0-alpha.62 → 1.0.0-alpha.64
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 +45 -0
- package/css/salt-lab.css +480 -413
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- 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 +9 -26
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +7 -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 +13 -12
- 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 +182 -0
- package/dist-cjs/slider/RangeSlider.js.map +1 -0
- package/dist-cjs/slider/Slider.js +118 -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 +130 -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 +58 -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 +155 -80
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js +233 -0
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/useSliderThumb.js +162 -0
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/utils.js +99 -72
- package/dist-cjs/slider/internal/utils.js.map +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.js +2 -1
- package/dist-cjs/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +1 -1
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- 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 +9 -26
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +7 -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 +6 -6
- 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 +180 -0
- package/dist-es/slider/RangeSlider.js.map +1 -0
- package/dist-es/slider/Slider.js +121 -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 +132 -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 +56 -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 +159 -84
- package/dist-es/slider/internal/SliderTrack.js.map +1 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js +231 -0
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -0
- package/dist-es/slider/internal/useSliderThumb.js +160 -0
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -0
- package/dist-es/slider/internal/utils.js +93 -63
- package/dist-es/slider/internal/utils.js.map +1 -1
- package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
- package/dist-es/tabs-next/TabOverflowList.js +3 -2
- package/dist-es/tabs-next/TabOverflowList.js.map +1 -1
- 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 +4 -6
- 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 +99 -0
- package/dist-types/slider/Slider.d.ts +81 -14
- package/dist-types/slider/index.d.ts +1 -1
- package/dist-types/slider/internal/SliderThumb.d.ts +27 -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 +30 -0
- package/dist-types/slider/internal/useSliderThumb.d.ts +28 -0
- package/dist-types/slider/internal/utils.d.ts +17 -15
- package/package.json +2 -2
- package/dist-cjs/dialog/DialogHeader.css.js +0 -6
- package/dist-cjs/dialog/DialogHeader.css.js.map +0 -1
- package/dist-cjs/dialog/DialogHeader.js +0 -63
- package/dist-cjs/dialog/DialogHeader.js.map +0 -1
- package/dist-cjs/overlay/OverlayHeader.css.js +0 -6
- package/dist-cjs/overlay/OverlayHeader.css.js.map +0 -1
- package/dist-cjs/overlay/OverlayHeader.js +0 -35
- package/dist-cjs/overlay/OverlayHeader.js.map +0 -1
- 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/dialog/DialogHeader.css.js +0 -4
- package/dist-es/dialog/DialogHeader.css.js.map +0 -1
- package/dist-es/dialog/DialogHeader.js +0 -61
- package/dist-es/dialog/DialogHeader.js.map +0 -1
- package/dist-es/overlay/OverlayHeader.css.js +0 -4
- package/dist-es/overlay/OverlayHeader.css.js.map +0 -1
- package/dist-es/overlay/OverlayHeader.js +0 -33
- package/dist-es/overlay/OverlayHeader.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/dialog/DialogHeader.d.ts +0 -28
- package/dist-types/dialog/index.d.ts +0 -1
- package/dist-types/overlay/OverlayHeader.d.ts +0 -20
- package/dist-types/overlay/index.d.ts +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
|
@@ -1,8 +1,28 @@
|
|
|
1
|
-
import { type ComponentPropsWithoutRef } from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { type ChangeEvent, type ComponentPropsWithoutRef, type RefObject } from "react";
|
|
2
|
+
interface SliderThumbProps extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "defaultValue" | "min" | "max"> {
|
|
3
|
+
accessibleMaxText?: string;
|
|
4
|
+
accessibleMinText?: string;
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
format?: (value: number) => number | string;
|
|
7
|
+
handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
8
|
+
handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
|
|
9
|
+
handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
10
|
+
index?: number;
|
|
11
|
+
inputRef?: RefObject<HTMLInputElement>;
|
|
12
|
+
isFocusVisible: boolean;
|
|
13
|
+
max: number;
|
|
14
|
+
maxLabel?: string;
|
|
15
|
+
min: number;
|
|
16
|
+
minLabel?: string;
|
|
17
|
+
offsetPercentage?: string;
|
|
18
|
+
onBlur: () => void;
|
|
19
|
+
onFocus: () => void;
|
|
20
|
+
restrictToMarks?: boolean;
|
|
21
|
+
showTooltip?: boolean;
|
|
22
|
+
sliderValue: [number, number] | number;
|
|
23
|
+
step: number;
|
|
24
|
+
stepMultiplier: number;
|
|
25
|
+
trackDragging: boolean;
|
|
7
26
|
}
|
|
8
|
-
export declare
|
|
27
|
+
export declare const SliderThumb: ({ "aria-label": ariaLabel, "aria-valuetext": ariaValueText, "aria-labelledby": ariaLabelledBy, accessibleMaxText, accessibleMinText, disabled, format, onBlur, onFocus, handleInputChange, handleKeydownOnThumb, handlePointerDown, index, inputRef, isFocusVisible, max, maxLabel, min, minLabel, offsetPercentage, restrictToMarks, showTooltip, sliderValue, step, stepMultiplier, trackDragging, ...rest }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export {};
|
|
@@ -1,4 +1,24 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
|
|
1
|
+
import { type HTMLAttributes, type RefObject } from "react";
|
|
2
|
+
interface SliderTrackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
constrainLabelPosition?: boolean;
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
showTicks?: boolean;
|
|
7
|
+
format?: (value: number) => string | number;
|
|
8
|
+
handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
9
|
+
isDragging: boolean;
|
|
10
|
+
isRange?: boolean;
|
|
11
|
+
marks?: {
|
|
12
|
+
label: string;
|
|
13
|
+
value: number;
|
|
14
|
+
}[];
|
|
15
|
+
max: number;
|
|
16
|
+
maxLabel?: number | string;
|
|
17
|
+
min: number;
|
|
18
|
+
minLabel?: number | string;
|
|
19
|
+
progressPercentage?: number;
|
|
20
|
+
progressPercentageRange?: [number, number];
|
|
21
|
+
sliderRef: RefObject<HTMLDivElement>;
|
|
3
22
|
}
|
|
4
|
-
export declare const SliderTrack: (
|
|
23
|
+
export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
|
|
2
|
+
import type { SliderProps } from "../Slider";
|
|
3
|
+
declare type UseRangeSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
|
|
4
|
+
decimalPlaces: number;
|
|
5
|
+
handleInputChange: (event: ChangeEvent<HTMLInputElement>, thumbIndex: number) => void;
|
|
6
|
+
inputRefs: RefObject<HTMLInputElement>[];
|
|
7
|
+
marks?: {
|
|
8
|
+
label: string;
|
|
9
|
+
value: number;
|
|
10
|
+
}[];
|
|
11
|
+
onChange?: (event: Event, value: [number, number]) => void;
|
|
12
|
+
onChangeEnd?: (event: Event, value: [number, number]) => void;
|
|
13
|
+
restrictToMarks?: boolean;
|
|
14
|
+
setValue: Dispatch<SetStateAction<[number, number]>>;
|
|
15
|
+
stepMultiplier: number;
|
|
16
|
+
value: [number, number];
|
|
17
|
+
};
|
|
18
|
+
export declare const useRangeSliderThumb: ({ decimalPlaces, handleInputChange, inputRefs, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseRangeSliderThumbProps) => {
|
|
19
|
+
handleBlur: (thumbIndex: number) => void;
|
|
20
|
+
handleFocus: (thumbIndex: number) => void;
|
|
21
|
+
handleKeydownOnThumb: (event: React.KeyboardEvent, thumbIndex: number) => void;
|
|
22
|
+
handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => void;
|
|
23
|
+
handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
24
|
+
isDragging: boolean;
|
|
25
|
+
isFocusVisible: boolean;
|
|
26
|
+
preventThumbOverlap: (currentValue: number, value: [number, number], thumbIndex: number) => [number, number];
|
|
27
|
+
sliderRef: RefObject<HTMLDivElement>;
|
|
28
|
+
thumbIndexState: number;
|
|
29
|
+
};
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
|
|
2
|
+
import type { SliderProps } from "../Slider";
|
|
3
|
+
declare type UseSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
|
|
4
|
+
decimalPlaces: number;
|
|
5
|
+
handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
6
|
+
inputRef: RefObject<HTMLInputElement>;
|
|
7
|
+
marks?: {
|
|
8
|
+
label: string;
|
|
9
|
+
value: number;
|
|
10
|
+
}[];
|
|
11
|
+
onChange?: (event: Event, value: number) => void;
|
|
12
|
+
onChangeEnd?: (event: Event, value: number) => void;
|
|
13
|
+
restrictToMarks?: boolean;
|
|
14
|
+
setValue: Dispatch<SetStateAction<number>>;
|
|
15
|
+
stepMultiplier: number;
|
|
16
|
+
value: number;
|
|
17
|
+
};
|
|
18
|
+
export declare const useSliderThumb: ({ decimalPlaces, handleInputChange, inputRef, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseSliderThumbProps) => {
|
|
19
|
+
handleBlur: () => void;
|
|
20
|
+
handleFocus: () => void;
|
|
21
|
+
handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
|
|
22
|
+
handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
23
|
+
handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
24
|
+
isDragging: boolean;
|
|
25
|
+
isFocusVisible: boolean;
|
|
26
|
+
sliderRef: RefObject<HTMLDivElement>;
|
|
27
|
+
};
|
|
28
|
+
export {};
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import type { RefObject } from "react";
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export declare const
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
export declare const toFloat: (value: number | string) => number;
|
|
3
|
+
export declare const calculateMarkPosition: (value: number | string, max: number, min: number) => number;
|
|
4
|
+
export declare const calculatePercentage: (value: number, max: number, min: number) => number;
|
|
5
|
+
export declare const clamp: (value: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
|
|
6
|
+
value: number;
|
|
7
|
+
label: string;
|
|
8
|
+
}[] | undefined, restrictToMarks?: boolean | undefined) => number;
|
|
9
|
+
export declare const clampRange: (range: [number, number], max: number, min: number, step: number, decimalPlaces: number, marks?: {
|
|
10
|
+
value: number;
|
|
11
|
+
label: string;
|
|
12
|
+
}[] | undefined, restrictToMarks?: boolean | undefined) => [number, number];
|
|
13
|
+
export declare const getClickedPosition: (sliderRef: RefObject<HTMLDivElement>, clientX: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
|
|
14
|
+
label: string;
|
|
15
|
+
value: number;
|
|
16
|
+
}[] | undefined, restrictToMarks?: boolean | undefined) => number | undefined;
|
|
17
|
+
export declare const getKeyboardValue: (event: React.KeyboardEvent, value: number, step: number, stepMultiplier: number, max: number, min: number, restrictToMarks?: boolean | undefined, marks?: {
|
|
12
18
|
label: string;
|
|
13
19
|
value: number;
|
|
14
|
-
|
|
15
|
-
}[];
|
|
16
|
-
export declare const getNearestIndex: (value: SliderValue, newValue: number) => ThumbIndex;
|
|
17
|
-
export declare const preventOverlappingValues: (value: SliderValue, newValue: number, index: ThumbIndex) => number;
|
|
18
|
-
export declare const parseValueProp: (value: number[] | undefined, min: number, max: number) => SliderValue | undefined;
|
|
20
|
+
}[] | undefined) => number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.64",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@floating-ui/react": "^0.26.28",
|
|
24
|
-
"@salt-ds/core": "^1.
|
|
24
|
+
"@salt-ds/core": "^1.43.0",
|
|
25
25
|
"@salt-ds/date-adapters": "0.1.0-alpha.3",
|
|
26
26
|
"@salt-ds/icons": "^1.13.2",
|
|
27
27
|
"@salt-ds/styles": "0.2.1",
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n padding-bottom: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n box-sizing: border-box;\n}\n.saltDialogHeader-header {\n margin: 0;\n}\n\n.saltDialogHeader-container {\n flex-grow: 1;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-50);\n padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n.saltDialogHeader-header > .saltText {\n margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n --icon-size: var(--salt-text-h2-lineHeight);\n padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: var(--salt-spacing-300);\n width: var(--salt-size-bar);\n background: var(--salt-accent-background);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=DialogHeader.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var DialogHeader$1 = require('./DialogHeader.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltDialogHeader");
|
|
12
|
-
const DialogHeader = react.forwardRef(
|
|
13
|
-
function DialogHeader2(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
className,
|
|
16
|
-
description,
|
|
17
|
-
disableAccent,
|
|
18
|
-
actions,
|
|
19
|
-
header,
|
|
20
|
-
preheader,
|
|
21
|
-
status: statusProp,
|
|
22
|
-
...rest
|
|
23
|
-
} = props;
|
|
24
|
-
const { status: statusContext, id } = core.useDialogContext();
|
|
25
|
-
const targetWindow = window.useWindow();
|
|
26
|
-
styles.useComponentCssInjection({
|
|
27
|
-
testId: "salt-dialog-header",
|
|
28
|
-
css: DialogHeader$1,
|
|
29
|
-
window: targetWindow
|
|
30
|
-
});
|
|
31
|
-
const status = statusProp ?? statusContext;
|
|
32
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
33
|
-
"div",
|
|
34
|
-
{
|
|
35
|
-
id,
|
|
36
|
-
className: clsx.clsx(
|
|
37
|
-
withBaseName(),
|
|
38
|
-
{
|
|
39
|
-
[withBaseName("withAccent")]: !disableAccent && !status,
|
|
40
|
-
[withBaseName(status ?? "")]: !!status
|
|
41
|
-
},
|
|
42
|
-
className
|
|
43
|
-
),
|
|
44
|
-
ref,
|
|
45
|
-
...rest,
|
|
46
|
-
children: [
|
|
47
|
-
status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, { status }),
|
|
48
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("container"), children: [
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.H2, { className: withBaseName("header"), children: [
|
|
50
|
-
preheader && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { color: "primary", children: preheader }),
|
|
51
|
-
header
|
|
52
|
-
] }),
|
|
53
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { color: "secondary", className: withBaseName("description"), children: description })
|
|
54
|
-
] }),
|
|
55
|
-
actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("actionsContainer"), children: actions })
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
exports.DialogHeader = DialogHeader;
|
|
63
|
-
//# sourceMappingURL=DialogHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import {\n H2,\n StatusIndicator,\n Text,\n type ValidationStatus,\n makePrefixer,\n useDialogContext,\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 dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader(props, ref) {\n const {\n className,\n description,\n disableAccent,\n actions,\n header,\n preheader,\n status: statusProp,\n ...rest\n } = props;\n const { status: statusContext, id } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogHeaderCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? statusContext;\n\n return (\n <div\n id={id}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status ?? \"\")]: !!status,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div className={withBaseName(\"container\")}>\n <H2 className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n {description && (\n <Text color=\"secondary\" className={withBaseName(\"description\")}>\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogHeader","useDialogContext","useWindow","useComponentCssInjection","dialogHeaderCss","jsxs","clsx","jsx","StatusIndicator","H2","Text"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAOC,qBAAiB,EAAA;AAEvD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAc,IAAA,aAAA;AAE7B,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAa,CAAA,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAU,MAAA,oBAAAC,cAAA,CAACC,wBAAgB,MAAgB,EAAA,CAAA;AAAA,0BAC3CH,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAACI,OAAG,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CACjC,EAAA,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAcF,cAAA,CAAAG,SAAA,EAAA,EAAK,KAAM,EAAA,SAAA,EAAW,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,cAC9C;AAAA,aACH,EAAA,CAAA;AAAA,YACC,WAAA,mCACEA,SAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,UACC,2BACEH,cAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA;AAAA;AAAA,KAE/D;AAAA;AAGN;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltOverlayHeader {\n padding: var(--salt-spacing-100);\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: stretch;\n gap: var(--salt-spacing-100);\n box-sizing: border-box;\n}\n\n.saltOverlayHeader-container {\n flex-grow: 1;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-50);\n}\n\n.saltOverlayHeader-header {\n margin: 0;\n}\n\n.saltOverlayHeader-actionsContainer {\n align-self: flex-start;\n}\n\n/* Overrides */\n.saltOverlayHeader ~ .saltOverlayPanelContent {\n padding-top: 0;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=OverlayHeader.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var OverlayHeader$1 = require('./OverlayHeader.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltOverlayHeader");
|
|
12
|
-
const OverlayHeader = react.forwardRef(
|
|
13
|
-
function OverlayHeader2(props, ref) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-overlay-header",
|
|
17
|
-
css: OverlayHeader$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const { className, description, header, actions, preheader, ...rest } = props;
|
|
21
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref, children: [
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("container"), children: [
|
|
23
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.H2, { styleAs: "h4", className: withBaseName("header"), children: [
|
|
24
|
-
preheader && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { color: "primary", children: preheader }),
|
|
25
|
-
header
|
|
26
|
-
] }),
|
|
27
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { color: "secondary", className: withBaseName("description"), children: description })
|
|
28
|
-
] }),
|
|
29
|
-
actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("actionsContainer"), children: actions })
|
|
30
|
-
] });
|
|
31
|
-
}
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
exports.OverlayHeader = OverlayHeader;
|
|
35
|
-
//# sourceMappingURL=OverlayHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { H2, Text, makePrefixer } 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 overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n /**\n * Header text\n */\n header?: ReactNode;\n /**\n * Preheader text is displayed just above the header\n **/\n preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n function OverlayHeader(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-header\",\n css: overlayHeaderCss,\n window: targetWindow,\n });\n\n const { className, description, header, actions, preheader, ...rest } =\n props;\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n <div className={withBaseName(\"container\")}>\n <H2 styleAs=\"h4\" className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n {description && (\n <Text color=\"secondary\" className={withBaseName(\"description\")}>\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","OverlayHeader","useWindow","useComponentCssInjection","overlayHeaderCss","jsxs","clsx","H2","jsx","Text"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAqB9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAW,WAAa,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAC7D,GAAA,KAAA;AAEF,IACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GACzD,EAAA,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAACE,WAAG,OAAQ,EAAA,IAAA,EAAK,SAAW,EAAA,YAAA,CAAa,QAAQ,CAC9C,EAAA,QAAA,EAAA;AAAA,UAAA,SAAA,oBAAcC,cAAA,CAAAC,SAAA,EAAA,EAAK,KAAM,EAAA,SAAA,EAAW,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,UAC9C;AAAA,SACH,EAAA,CAAA;AAAA,QACC,WAAA,mCACEA,SAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,2BACED,cAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA,KAE/D,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltSlider {\n display: grid;\n gap: var(--salt-spacing-100);\n grid-template-columns: auto 1fr auto;\n user-select: none;\n}\n\n.saltSlider-label {\n height: var(--salt-size-base);\n display: flex;\n align-items: center;\n}\n\n.saltSlider-bottomLabel {\n grid-template-columns: 1fr;\n gap: 0;\n}\n.saltSlider-bottomLabel .saltSlider-label {\n height: auto;\n}\n\n.saltSlider-labelMinBottom {\n grid-row: 2;\n grid-column: 1;\n justify-self: start;\n width: min-content;\n}\n\n.saltSlider-labelMaxBottom {\n grid-row: 2;\n grid-column: 1;\n justify-self: end;\n width: min-content;\n}\n\n.saltSliderTrack {\n display: flex;\n position: relative;\n cursor: pointer;\n align-items: center;\n height: var(--salt-size-base);\n}\n\n.saltSliderTrack-rail {\n height: var(--salt-size-bar);\n background: var(--salt-track-borderColor);\n width: 100%;\n position: absolute;\n}\n\n.saltSliderTrack:active {\n cursor: grabbing;\n}\n\n.saltSliderThumb-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: translate(-50%, 0%);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n}\n\n.saltSliderThumb-tooltip {\n background: var(--salt-container-primary-background);\n border-color: var(--salt-status-info-borderColor);\n border-style: var(--salt-container-borderStyle);\n border-width: var(--salt-size-border);\n line-height: var(--salt-text-lineHeight);\n box-shadow: var(--salt-overlayable-shadow-popout);\n color: var(--salt-content-primary-foreground);\n max-width: var(--saltTooltip-maxWidth, 230px);\n padding: var(--saltTooltip-padding, var(--salt-size-unit));\n position: absolute;\n z-index: var(--salt-zIndex-flyover);\n transform: translate(0, -100%);\n display: none;\n}\n\n.saltSliderThumb-tooltip-arrow {\n position: absolute;\n pointer-events: none;\n top: 100%;\n left: 50%;\n transform: translate(-50%, 0);\n stroke: none;\n fill: var(--salt-container-primary-background);\n stroke: var(--salt-status-info-borderColor);\n stroke-width: var(--salt-size-border);\n width: var(--salt-size-icon);\n height: var(--salt-size-icon);\n}\n\n.saltSliderThumb-tooltip-visible {\n display: block;\n}\n\n.saltSliderThumb-container:hover .saltSliderThumb-tooltip {\n display: block;\n}\n\n.saltSliderThumb {\n position: relative;\n width: var(--salt-size-indicator);\n height: var(--salt-size-selectable);\n background: var(--salt-accent-borderColor);\n}\n\n.saltSliderThumb:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: var(--salt-focused-outlineOffset);\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderSelection {\n height: var(--salt-size-bar);\n background: var(--salt-accent-borderColor);\n align-items: start;\n position: absolute;\n}\n\n.saltSliderSelection-range {\n align-items: center;\n}\n\n.saltSliderMarks {\n position: relative;\n}\n\n.saltSliderMarks-mark {\n position: absolute;\n transform: translate(-50%);\n line-height: var(--salt-text-lineHeight);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=Slider.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
|
|
5
|
-
const SliderContext = react.createContext({
|
|
6
|
-
min: 0,
|
|
7
|
-
max: 10,
|
|
8
|
-
step: 1,
|
|
9
|
-
value: [0],
|
|
10
|
-
onChange: () => null,
|
|
11
|
-
ariaLabel: "slider"
|
|
12
|
-
});
|
|
13
|
-
function useSliderContext() {
|
|
14
|
-
return react.useContext(SliderContext);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
exports.SliderContext = SliderContext;
|
|
18
|
-
exports.useSliderContext = useSliderContext;
|
|
19
|
-
//# sourceMappingURL=SliderContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderContext.js","sources":["../src/slider/internal/SliderContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nexport interface SliderContextValue {\n min: number;\n max: number;\n step: number;\n value: SliderValue;\n onChange: SliderChangeHandler;\n ariaLabel: string | undefined;\n}\n\nexport const SliderContext = createContext<SliderContextValue>({\n min: 0,\n max: 10,\n step: 1,\n value: [0],\n onChange: () => null,\n ariaLabel: \"slider\",\n});\n\nexport function useSliderContext() {\n return useContext(SliderContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAWO,MAAM,gBAAgBA,mBAAkC,CAAA;AAAA,EAC7D,GAAK,EAAA,CAAA;AAAA,EACL,GAAK,EAAA,EAAA;AAAA,EACL,IAAM,EAAA,CAAA;AAAA,EACN,KAAA,EAAO,CAAC,CAAC,CAAA;AAAA,EACT,UAAU,MAAM,IAAA;AAAA,EAChB,SAAW,EAAA;AACb,CAAC;AAEM,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAOC,iBAAW,aAAa,CAAA;AACjC;;;;;"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var utils = require('./utils.js');
|
|
6
|
-
|
|
7
|
-
const withBaseName = core.makePrefixer("saltSliderMarks");
|
|
8
|
-
function SliderMarks({
|
|
9
|
-
min,
|
|
10
|
-
max,
|
|
11
|
-
step,
|
|
12
|
-
...rest
|
|
13
|
-
}) {
|
|
14
|
-
const marks = utils.getMarkStyles(min, max, step);
|
|
15
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName(), ...rest, children: marks.map((mark) => {
|
|
16
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
-
core.Label,
|
|
18
|
-
{
|
|
19
|
-
className: withBaseName("mark"),
|
|
20
|
-
style: { left: mark.position },
|
|
21
|
-
children: mark.label
|
|
22
|
-
},
|
|
23
|
-
mark.value
|
|
24
|
-
);
|
|
25
|
-
}) });
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
exports.SliderMarks = SliderMarks;
|
|
29
|
-
//# sourceMappingURL=SliderMarks.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderMarks.js","sources":["../src/slider/internal/SliderMarks.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { getMarkStyles } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarks\");\n\nexport interface SliderMarksProps extends ComponentPropsWithoutRef<\"div\"> {\n min: number;\n max: number;\n step: number;\n}\n\nexport function SliderMarks({\n min,\n max,\n step,\n ...rest\n}: SliderMarksProps): JSX.Element {\n const marks = getMarkStyles(min, max, step);\n return (\n <div className={withBaseName()} {...rest}>\n {marks.map((mark) => {\n return (\n <Label\n className={withBaseName(\"mark\")}\n key={mark.value}\n style={{ left: mark.position }}\n >\n {mark.label}\n </Label>\n );\n })}\n </div>\n );\n}\n"],"names":["makePrefixer","getMarkStyles","jsx","Label"],"mappings":";;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAQ5C,SAAS,WAAY,CAAA;AAAA,EAC1B,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAkC,EAAA;AAChC,EAAA,MAAM,KAAQ,GAAAC,mBAAA,CAAc,GAAK,EAAA,GAAA,EAAK,IAAI,CAAA;AAC1C,EACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,EAAA,EAAI,GAAG,IACjC,EAAA,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AACnB,IACE,uBAAAA,cAAA;AAAA,MAACC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAE9B,KAAO,EAAA,EAAE,IAAM,EAAA,IAAA,CAAK,QAAS,EAAA;AAAA,QAE5B,QAAK,EAAA,IAAA,CAAA;AAAA,OAAA;AAAA,MAHD,IAAK,CAAA;AAAA,KAIZ;AAAA,GAEH,CACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
var SliderContext = require('./SliderContext.js');
|
|
7
|
-
var utils = require('./utils.js');
|
|
8
|
-
|
|
9
|
-
const withBaseName = core.makePrefixer("saltSliderSelection");
|
|
10
|
-
function SliderSelection({
|
|
11
|
-
...props
|
|
12
|
-
}) {
|
|
13
|
-
const { min, max, value } = SliderContext.useSliderContext();
|
|
14
|
-
const thumbPosition = value.map((value2) => {
|
|
15
|
-
return utils.getPercentage(min, max, value2);
|
|
16
|
-
});
|
|
17
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18
|
-
"div",
|
|
19
|
-
{
|
|
20
|
-
className: clsx.clsx(withBaseName(), {
|
|
21
|
-
[withBaseName("range")]: Array.isArray(value)
|
|
22
|
-
}),
|
|
23
|
-
style: {
|
|
24
|
-
left: value.length > 1 ? `${thumbPosition[0]}%` : 0,
|
|
25
|
-
width: value.length > 1 ? `${thumbPosition[1] - thumbPosition[0]}%` : `${thumbPosition[0]}%`
|
|
26
|
-
},
|
|
27
|
-
...props
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
exports.SliderSelection = SliderSelection;
|
|
33
|
-
//# sourceMappingURL=SliderSelection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderSelection.js","sources":["../src/slider/internal/SliderSelection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderSelection\");\n\nexport interface SliderSelectionProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport function SliderSelection({\n ...props\n}: SliderSelectionProps): JSX.Element {\n const { min, max, value } = useSliderContext();\n\n const thumbPosition = value.map((value) => {\n return getPercentage(min, max, value);\n });\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"range\")]: Array.isArray(value),\n })}\n style={{\n left: value.length > 1 ? `${thumbPosition[0]}%` : 0,\n width:\n value.length > 1\n ? `${thumbPosition[1] - thumbPosition[0]}%`\n : `${thumbPosition[0]}%`,\n }}\n {...props}\n />\n );\n}\n"],"names":["makePrefixer","useSliderContext","value","getPercentage","jsx","clsx"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAIhD,SAAS,eAAgB,CAAA;AAAA,EAC9B,GAAG;AACL,CAAsC,EAAA;AACpC,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,KAAUC,8BAAiB,EAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,GAAI,CAAA,CAACC,MAAU,KAAA;AACzC,IAAO,OAAAC,mBAAA,CAAc,GAAK,EAAA,GAAA,EAAKD,MAAK,CAAA;AAAA,GACrC,CAAA;AAED,EACE,uBAAAE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAa,CAAA,OAAO,CAAC,GAAG,KAAA,CAAM,QAAQ,KAAK;AAAA,OAC7C,CAAA;AAAA,MACD,KAAO,EAAA;AAAA,QACL,IAAA,EAAM,MAAM,MAAS,GAAA,CAAA,GAAI,GAAG,aAAc,CAAA,CAAC,CAAC,CAAM,CAAA,CAAA,GAAA,CAAA;AAAA,QAClD,KACE,EAAA,KAAA,CAAM,MAAS,GAAA,CAAA,GACX,GAAG,aAAc,CAAA,CAAC,CAAI,GAAA,aAAA,CAAc,CAAC,CAAC,CAAA,CAAA,CAAA,GACtC,CAAG,EAAA,aAAA,CAAc,CAAC,CAAC,CAAA,CAAA;AAAA,OAC3B;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var utils = require('./utils.js');
|
|
4
|
-
|
|
5
|
-
const supportedKeys = [
|
|
6
|
-
"Home",
|
|
7
|
-
"End",
|
|
8
|
-
"ArrowUp",
|
|
9
|
-
"ArrowRight",
|
|
10
|
-
"ArrowDown",
|
|
11
|
-
"ArrowLeft"
|
|
12
|
-
];
|
|
13
|
-
const getValueFromKeyName = (keyName, value, min, max, step) => {
|
|
14
|
-
switch (keyName) {
|
|
15
|
-
case "Home":
|
|
16
|
-
return min;
|
|
17
|
-
case "End":
|
|
18
|
-
return max;
|
|
19
|
-
case "ArrowUp":
|
|
20
|
-
case "ArrowRight":
|
|
21
|
-
return value + step;
|
|
22
|
-
case "ArrowDown":
|
|
23
|
-
case "ArrowLeft":
|
|
24
|
-
return value - step;
|
|
25
|
-
default:
|
|
26
|
-
return value;
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
const useKeyDownThumb = (min, max, step, value, onChange, index) => {
|
|
30
|
-
return (event) => {
|
|
31
|
-
if (!supportedKeys.includes(event.key)) return;
|
|
32
|
-
event.preventDefault();
|
|
33
|
-
const targetValue = value[index];
|
|
34
|
-
const rawValue = getValueFromKeyName(
|
|
35
|
-
event.key,
|
|
36
|
-
targetValue,
|
|
37
|
-
min,
|
|
38
|
-
max,
|
|
39
|
-
step
|
|
40
|
-
);
|
|
41
|
-
const roundedToStep = utils.roundToStep(rawValue, step);
|
|
42
|
-
const rounded = Number(roundedToStep.toFixed(1));
|
|
43
|
-
const clamped = utils.clampValue(rounded, [min, max]);
|
|
44
|
-
const newValue = utils.preventOverlappingValues(value, clamped, index);
|
|
45
|
-
utils.setValue(value, newValue, index, onChange);
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
exports.useKeyDownThumb = useKeyDownThumb;
|
|
50
|
-
//# sourceMappingURL=useKeyDownThumb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyDownThumb.js","sources":["../src/slider/internal/useKeyDownThumb.ts"],"sourcesContent":["import type { SliderChangeHandler, SliderValue, ThumbIndex } from \"../types\";\nimport {\n clampValue,\n preventOverlappingValues,\n roundToStep,\n setValue,\n} from \"./utils\";\n\nconst supportedKeys = [\n \"Home\",\n \"End\",\n \"ArrowUp\",\n \"ArrowRight\",\n \"ArrowDown\",\n \"ArrowLeft\",\n];\n\nconst getValueFromKeyName = (\n keyName: string,\n value: number,\n min: number,\n max: number,\n step: number,\n) => {\n switch (keyName) {\n case \"Home\":\n return min;\n case \"End\":\n return max;\n case \"ArrowUp\":\n case \"ArrowRight\":\n return value + step;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n return value - step;\n default:\n return value;\n }\n};\n\nexport const useKeyDownThumb = (\n min: number,\n max: number,\n step: number,\n value: SliderValue,\n onChange: SliderChangeHandler,\n index: ThumbIndex,\n) => {\n return (event: React.KeyboardEvent) => {\n if (!supportedKeys.includes(event.key)) return;\n event.preventDefault();\n const targetValue = value[index];\n const rawValue = getValueFromKeyName(\n event.key,\n targetValue as number,\n min,\n max,\n step,\n );\n\n const roundedToStep = roundToStep(rawValue, step);\n const rounded = Number(roundedToStep.toFixed(1));\n const clamped = clampValue(rounded, [min, max]);\n const newValue = preventOverlappingValues(value, clamped, index);\n\n setValue(value, newValue, index, onChange);\n };\n};\n"],"names":["roundToStep","clampValue","preventOverlappingValues","setValue"],"mappings":";;;;AAQA,MAAM,aAAgB,GAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,sBAAsB,CAC1B,OAAA,EACA,KACA,EAAA,GAAA,EACA,KACA,IACG,KAAA;AACH,EAAA,QAAQ,OAAS;AAAA,IACf,KAAK,MAAA;AACH,MAAO,OAAA,GAAA;AAAA,IACT,KAAK,KAAA;AACH,MAAO,OAAA,GAAA;AAAA,IACT,KAAK,SAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAQ,GAAA,IAAA;AAAA,IACjB,KAAK,WAAA;AAAA,IACL,KAAK,WAAA;AACH,MAAA,OAAO,KAAQ,GAAA,IAAA;AAAA,IACjB;AACE,MAAO,OAAA,KAAA;AAAA;AAEb,CAAA;AAEO,MAAM,kBAAkB,CAC7B,GAAA,EACA,KACA,IACA,EAAA,KAAA,EACA,UACA,KACG,KAAA;AACH,EAAA,OAAO,CAAC,KAA+B,KAAA;AACrC,IAAA,IAAI,CAAC,aAAA,CAAc,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AACxC,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAM,MAAA,WAAA,GAAc,MAAM,KAAK,CAAA;AAC/B,IAAA,MAAM,QAAW,GAAA,mBAAA;AAAA,MACf,KAAM,CAAA,GAAA;AAAA,MACN,WAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAM,MAAA,aAAA,GAAgBA,iBAAY,CAAA,QAAA,EAAU,IAAI,CAAA;AAChD,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,aAAc,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAC/C,IAAA,MAAM,UAAUC,gBAAW,CAAA,OAAA,EAAS,CAAC,GAAA,EAAK,GAAG,CAAC,CAAA;AAC9C,IAAA,MAAM,QAAW,GAAAC,8BAAA,CAAyB,KAAO,EAAA,OAAA,EAAS,KAAK,CAAA;AAE/D,IAASC,cAAA,CAAA,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,GAC3C;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Styles applied to stepper container */\n.saltStepperInput {\n --stepperInput-border: none;\n --stepperInput-borderColor: var(--salt-editable-borderColor);\n --stepperInput-borderStyle: var(--salt-editable-borderStyle);\n --stepperInput-outlineColor: var(--salt-focused-outlineColor);\n --stepperInput-borderWidth: var(--salt-size-border);\n\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n width: 100%;\n box-sizing: border-box;\n\n gap: var(--salt-spacing-50);\n}\n\n.saltStepperInput:hover {\n --stepperInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --stepperInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--stepperInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltStepperInput:active {\n --stepperInput-borderColor: var(--salt-editable-borderColor-active);\n --stepperInput-borderStyle: var(--salt-editable-borderStyle-active);\n --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--stepperInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltStepperInput-primary {\n --stepperInput-background: var(--salt-editable-primary-background);\n --stepperInput-background-active: var(--salt-editable-primary-background-active);\n --stepperInput-background-hover: var(--salt-editable-primary-background-hover);\n --stepperInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --stepperInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltStepperInput-secondary {\n --stepperInput-background: var(--salt-editable-secondary-background);\n --stepperInput-background-active: var(--salt-editable-secondary-background-active);\n --stepperInput-background-hover: var(--salt-editable-secondary-background-active);\n --stepperInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --stepperInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltStepperInput-error,\n.saltStepperInput-error:hover {\n --stepperInput-background: var(--salt-status-error-background);\n --stepperInput-background-active: var(--salt-status-error-background);\n --stepperInput-background-hover: var(--salt-status-error-background);\n --stepperInput-borderColor: var(--salt-status-error-borderColor);\n --stepperInput-outlineColor: var(--salt-status-error-borderColor);\n --stepperInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltStepperInput-warning,\n.saltStepperInput-warning:hover {\n --stepperInput-background: var(--salt-status-warning-background);\n --stepperInput-background-active: var(--salt-status-warning-background);\n --stepperInput-background-hover: var(--salt-status-warning-background);\n --stepperInput-borderColor: var(--salt-status-warning-borderColor);\n --stepperInput-outlineColor: var(--salt-status-warning-borderColor);\n --stepperInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltStepperInput-success,\n.saltStepperInput-success:hover {\n --stepperInput-background: var(--salt-status-success-background);\n --stepperInput-background-active: var(--salt-status-success-background);\n --stepperInput-background-hover: var(--salt-status-success-background);\n --stepperInput-borderColor: var(--salt-status-success-borderColor);\n --stepperInput-outlineColor: var(--salt-status-success-borderColor);\n --stepperInput-background-readonly: var(--salt-status-success-background);\n}\n\n.saltStepperInput-inputContainer {\n display: flex;\n background: var(--stepperInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n border: var(--stepperInput-border);\n box-sizing: border-box;\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n overflow: hidden;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n flex-grow: 1;\n}\n\n/* Style applied to inner input component */\n.saltStepperInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltStepperInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--stepperInput-textAlign);\n width: 100%;\n}\n\n.saltStepperInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltStepperInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltStepperInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltStepperInput-focused {\n --stepperInput-borderColor: var(--stepperInput-outlineColor);\n --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltStepperInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--stepperInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltStepperInput-readOnly {\n --stepperInput-borderColor: var(--salt-editable-borderColor-readonly);\n --stepperInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --stepperInput-borderWidth: var(--salt-size-border);\n\n background: var(--stepperInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltStepperInput-focused.saltStepperInput-disabled {\n --stepperInput-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltStepperInput-focused.saltStepperInput-readOnly {\n --stepperInput-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltStepperInput-disabled .saltStepperInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltStepperInput-disabled,\n.saltStepperInput-disabled:hover,\n.saltStepperInput-disabled:active {\n --stepperInput-borderColor: var(--salt-editable-borderColor-disabled);\n --stepperInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --stepperInput-borderWidth: var(--salt-size-border);\n\n background: var(--stepperInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltStepperInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltStepperInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--stepperInput-borderWidth) var(--stepperInput-borderStyle) var(--stepperInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltStepperInput-bordered {\n --stepperInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--stepperInput-borderColor);\n --stepperInput-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltStepperInput-bordered.saltStepperInput-focused,\n.saltStepperInput-bordered:active {\n --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltStepperInput-bordered.saltStepperInput-readOnly,\n.saltStepperInput-bordered.saltStepperInput-disabled:hover {\n --stepperInput-borderWidth: 0;\n}\n\n/* Style applied to start adornments */\n.saltStepperInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltStepperInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltStepperInput-readOnly .saltStepperInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltStepperInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltStepperInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltStepperInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltStepperInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltStepperInput-startAdornmentContainer > .saltButton,\n.saltStepperInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltStepperInput-inputTextAlignLeft {\n text-align: left;\n}\n\n.saltStepperInput-inputTextAlignCenter {\n text-align: center;\n}\n\n.saltStepperInput-inputTextAlignRight {\n text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n --stepperInput-buttonGap: var(--salt-size-border-strong);\n display: flex;\n flex-direction: column;\n gap: var(--stepperInput-buttonGap);\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n --saltButton-height: calc((var(--salt-size-base) - var(--stepperInput-buttonGap)) * 0.5);\n --saltButton-width: var(--salt-size-base);\n}\n\n.saltStepperInput-stepperButtonIncrement {\n --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltStepperInput-stepperButtonDecrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=StepperInput.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepperInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import {\n Button,\n StatusAdornment,\n type ValidationStatus,\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useFormFieldProps,\n useIcon,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport {\n isAllowedNonNumeric,\n isOutOfRange,\n sanitizedInput,\n toFixedDecimalPlaces,\n toFloat,\n} from \"./internal/utils\";\n\nimport stepperInputCss from \"./StepperInput.css\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * A boolean. When `true`, the input will receive a full border.\n */\n bordered?: boolean;\n /**\n * The number of decimal places to display.\n */\n decimalPlaces?: number;\n /**\n * Sets the initial default value of the component.\n */\n defaultValue?: number | string;\n /**\n * If `true`, the stepper input will be disabled.\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n * @default '—'\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * Whether to hide the stepper buttons. Defaults to `false`.\n * @default false\n */\n hideButtons?: boolean;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * Callback when stepper input value is changed.\n * @param event - the event triggers value change, could be undefined during increment / decrement button long press\n */\n onChange?: (\n event: SyntheticEvent | undefined,\n value: number | string,\n ) => void;\n /**\n * A string. Displayed in a dimmed color when the input value is empty.\n */\n placeholder?: string | undefined;\n /**\n * A boolean. If `true`, the component is not editable by the user.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys. Default to 1.\n * @default 1\n */\n step?: number;\n /**\n * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.\n * Defaults to 10.\n * @default 10\n */\n stepBlock?: number;\n /**\n * Alignment of text within container. Defaults to \"left\".\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n /**\n * Styling variant. Defaults to \"primary\".\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The value of the stepper input. The component will be controlled if this prop is provided.\n */\n value?: number | string | undefined;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n function StepperInput(\n {\n bordered,\n className: classNameProp,\n decimalPlaces = 0,\n defaultValue: defaultValueProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hideButtons,\n inputProps: inputPropsProp = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange: onChangeProp,\n placeholder,\n readOnly: readOnlyProp,\n startAdornment,\n step = 1,\n stepBlock = 10,\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n value: valueProp,\n variant = \"primary\",\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stepper-input\",\n css: stepperInputCss,\n window: targetWindow,\n });\n\n const { IncreaseIcon, DecreaseIcon } = useIcon();\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onChange: inputOnChange,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputPropsProp;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default:\n typeof defaultValueProp === \"number\"\n ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces)\n : defaultValueProp,\n name: \"StepperInput\",\n state: \"value\",\n });\n\n // Won't be needed when `:has` css can be used\n const [focused, setFocused] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const forkedInputRef = useForkRef(inputRef, inputRefProp);\n\n const {\n decrementButtonProps,\n decrementValue,\n incrementButtonProps,\n incrementValue,\n } = useStepperInput({\n inputRef,\n setValue,\n decimalPlaces,\n disabled,\n max,\n min,\n onChange: onChangeProp,\n readOnly: isReadOnly,\n step,\n stepBlock,\n value,\n });\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setFocused(true);\n\n inputOnFocus?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setFocused(false);\n\n if (value === undefined) return;\n\n const floatValue = toFloat(value);\n if (Number.isNaN(floatValue)) {\n // Keep original value if NaN\n setValue(value);\n onChangeProp?.(event, value);\n } else {\n const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);\n\n if (value !== \"\" && !isAllowedNonNumeric(value)) {\n setValue(roundedValue);\n }\n\n onChangeProp?.(event, roundedValue);\n }\n\n inputOnBlur?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const changedValue = event.target.value;\n\n setValue(sanitizedInput(changedValue));\n\n onChangeProp?.(event, sanitizedInput(changedValue));\n inputOnChange?.(event);\n };\n\n const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n switch (event.key) {\n case \"ArrowUp\": {\n event.preventDefault();\n const block = event.shiftKey;\n incrementValue(event, block);\n break;\n }\n case \"ArrowDown\": {\n event.preventDefault();\n const block = event.shiftKey;\n decrementValue(event, block);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n setValue(min);\n onChangeProp?.(event, min);\n break;\n }\n case \"End\": {\n event.preventDefault();\n setValue(max);\n onChangeProp?.(event, max);\n break;\n }\n case \"PageUp\": {\n event.preventDefault();\n incrementValue(event, true);\n break;\n }\n case \"PageDown\": {\n event.preventDefault();\n decrementValue(event, true);\n break;\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n return (\n <div\n className={clsx(withBaseName(), classNameProp)}\n {...restProps}\n ref={ref}\n >\n <div\n className={clsx(\n withBaseName(\"inputContainer\"),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n )}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n aria-invalid={\n !isReadOnly ? isOutOfRange(value, min, max) : undefined\n }\n aria-valuemax={\n !isReadOnly\n ? toFloat(toFixedDecimalPlaces(max, decimalPlaces))\n : undefined\n }\n aria-valuemin={\n !isReadOnly\n ? toFloat(toFixedDecimalPlaces(min, decimalPlaces))\n : undefined\n }\n aria-valuenow={\n value && !Number.isNaN(toFloat(value)) && !isReadOnly\n ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces))\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={!isDisabled ? handleInputFocus : undefined}\n onKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={forkedInputRef}\n required={isRequired}\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n tabIndex={isDisabled ? -1 : 0}\n value={value}\n {...restInputProps}\n />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n\n {!hideButtons && !isReadOnly && (\n <div className={withBaseName(\"buttonContainer\")}>\n <Button\n className={clsx(\n withBaseName(\"stepperButton\"),\n withBaseName(\"stepperButtonIncrement\"),\n )}\n {...incrementButtonProps}\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n className={clsx(\n withBaseName(\"stepperButton\"),\n withBaseName(\"stepperButtonDecrement\"),\n )}\n {...decrementButtonProps}\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useWindow","useComponentCssInjection","stepperInputCss","useIcon","useFormFieldProps","useControlled","toFixedDecimalPlaces","useState","useRef","useForkRef","useStepperInput","toFloat","isAllowedNonNumeric","sanitizedInput","jsxs","clsx","jsx","isOutOfRange","capitalize","StatusAdornment","Button"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/stepper-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n activationFn: (event?: SyntheticEvent) => void,\n isAtLimit: boolean,\n) {\n const [buttonDown, setButtonDown] = useState(false);\n const [delay, setDelay] = useState(INITIAL_DELAY);\n\n const cancelInterval = useCallback(() => {\n setButtonDown(false);\n setDelay(INITIAL_DELAY);\n }, []);\n\n useEffect(() => {\n if (isAtLimit) cancelInterval();\n }, [isAtLimit, cancelInterval]);\n\n const targetWindow = useWindow();\n\n useEffect(() => {\n if (targetWindow) {\n targetWindow.addEventListener(\"mouseup\", cancelInterval);\n }\n return () => {\n if (targetWindow) {\n targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n }\n };\n }, [cancelInterval, targetWindow]);\n\n const activate = (event: SyntheticEvent) => {\n activationFn(event);\n if (event.type === \"mousedown\") {\n setButtonDown(true);\n }\n };\n\n useInterval(\n () => {\n if (!buttonDown) return;\n activationFn();\n if (delay === INITIAL_DELAY) {\n setDelay(INTERVAL_DELAY);\n }\n },\n buttonDown ? delay : null,\n );\n\n return { activate, buttonDown };\n}\n"],"names":["useState","useCallback","useEffect","useWindow","useInterval"],"mappings":";;;;;;AAIA,MAAM,aAAgB,GAAA,GAAA;AACtB,MAAM,cAAiB,GAAA,GAAA;AAEP,SAAA,yBAAA,CACd,cACA,SACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,aAAa,CAAA;AAEhD,EAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAA0B,cAAA,EAAA;AAAA,GAC7B,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAa,YAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA;AAAA;AAEzD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAc,EAAA;AAChB,QAAa,YAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA;AAAA;AAC5D,KACF;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA;AAEjC,EAAM,MAAA,QAAA,GAAW,CAAC,KAA0B,KAAA;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAI,IAAA,KAAA,CAAM,SAAS,WAAa,EAAA;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA;AACpB,GACF;AAEA,EAAAE,uBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAY,EAAA;AACjB,MAAa,YAAA,EAAA;AACb,MAAA,IAAI,UAAU,aAAe,EAAA;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA;AACzB,KACF;AAAA,IACA,aAAa,KAAQ,GAAA;AAAA,GACvB;AAEA,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA;AAChC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useInterval.js","sources":["../src/stepper-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n const savedCallback = useRef<IntervalFunction | null>(null);\n\n useEffect(() => {\n savedCallback.current = callback;\n });\n\n useEffect(() => {\n function tick() {\n if (savedCallback.current !== null) {\n savedCallback.current();\n }\n }\n\n if (delay !== null) {\n const id = setInterval(tick, delay);\n return () => clearInterval(id);\n }\n return;\n }, [delay]);\n}\n\nexport { useInterval };\n"],"names":["useRef","useEffect"],"mappings":";;;;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgBA,aAAgC,IAAI,CAAA;AAE1D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA;AAAA,GACzB,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA;AAAA;AACxB;AAGF,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA;AAAA;AAE/B,IAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;;;;"}
|