@salt-ds/core 1.42.0 → 1.44.0

package/dist-types/index.d.ts

@@ -50,6 +50,7 @@ export * from "./text";
 export * from "./theme";
 export * from "./toast";
 export * from "./salt-provider";
+export * from "./slider";
 export * from "./split-layout";
 export * from "./switch";
 export * from "./tag";

package/dist-types/overlay/OverlayHeader.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface OverlayHeaderProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Description text is displayed just below the header
+     **/
+    description?: ReactNode;
+    /**
+     * Actions to be displayed in header
+     */
+    actions?: ReactNode;
+    /**
+     * Header text
+     */
+    header?: ReactNode;
+    /**
+     * Preheader text is displayed just above the header
+     **/
+    preheader?: ReactNode;
+}
+export declare const OverlayHeader: import("react").ForwardRefExoticComponent<OverlayHeaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/overlay/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Overlay";
 export * from "./OverlayTrigger";
 export * from "./OverlayPanel";
+export * from "./OverlayHeader";
 export * from "./OverlayPanelCloseButton";
 export * from "./OverlayPanelContent";

package/dist-types/slider/RangeSlider.d.ts

@@ -0,0 +1,99 @@
+import { type HTMLAttributes } from "react";
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * Accessible text to announce maximum value label.
+     */
+    accessibleMaxText?: string;
+    /**
+     * Accessible text to announce minimum value label.
+     */
+    accessibleMinText?: string;
+    /**
+     * When minimum and maximum labels are defined, ensure
+     * they are confined within the boundary of the slider.
+     */
+    constrainLabelPosition?: boolean;
+    /**
+     * The number of allowed decimal places
+     * @default 2
+     */
+    decimalPlaces?: number;
+    /**
+     * The default value. Use when the component is not controlled.
+     * @default [min, min + (max - min) / 2]
+     */
+    defaultValue?: [number, number];
+    /**
+     * Disable the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Show visual ticks above the marks.
+     */
+    showTicks?: boolean;
+    /**
+     * A callback to format the display value in the tooltip, min and max labels
+     * and the `aria-valuetext` attribute.
+     */
+    format?: (value: number) => string | number;
+    /**
+     * Marks that are displayed under the track.
+     */
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    /**
+     * Maximum slider value.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Minimum slider value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Label for maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * Label for minimum value.
+     */
+    minLabel?: string;
+    /**
+     * Callback called when slider value is changed.
+     * It provides a generic event and the current value of the slider.
+     */
+    onChange?: (event: Event, value: [number, number]) => void;
+    /**
+     * Callback called when the slider is stopped from being dragged or
+     * its value is changed from the keyboard. It provides a generic
+     * event and the current value of the slider.
+     */
+    onChangeEnd?: (event: Event, value: [number, number]) => void;
+    /**
+     * Restrict slider value to marks only. The step will be ignored.
+     */
+    restrictToMarks?: boolean;
+    /**
+     * Show the slider value in a tooltip when the thumb is hovered.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Minimum interval the slider thumb can move.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Maximum interval the slider thumb can move when using PageUp and PageDown keys.
+     * @default 2
+     */
+    stepMultiplier?: number;
+    /**
+     * Value of the slider, to be used when in a controlled state.
+     */
+    value?: [number, number];
+}
+export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/slider/Slider.d.ts

@@ -0,0 +1,100 @@
+import { type HTMLAttributes } from "react";
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /**
+     * Accessible text to announce maximum value label.
+     */
+    accessibleMaxText?: string;
+    /**
+     * Accessible text to announce minimum value label.
+     */
+    accessibleMinText?: string;
+    /**
+     * When minimum and maximum labels are defined, ensure
+     * they are confined within the boundary of the slider.
+     * @default false
+     */
+    constrainLabelPosition?: boolean;
+    /**
+     * The number of allowed decimal places
+     * @default 2
+     */
+    decimalPlaces?: number;
+    /**
+     * The default value. Use when the component is not controlled.
+     * @default min + (max - min) / 2,
+     */
+    defaultValue?: number;
+    /**
+     * Disable the slider.
+     */
+    disabled?: boolean;
+    /**
+     * A callback to format the display value in the tooltip, min and max labels
+     * and the `aria-valuetext` attribute.
+     */
+    format?: (value: number) => string | number;
+    /**
+     * Marks that are displayed under the track.
+     */
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    /**
+     * Maximum slider value.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Minimum slider value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Label for maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * Label for the minimum value.
+     */
+    minLabel?: string;
+    /**
+     * Callback called when slider value is changed.
+     * It provides a generic event and the current value of the slider.
+     */
+    onChange?: (event: Event, value: number) => void;
+    /**
+     * Callback called when the slider is stopped from being dragged or
+     * its value is changed from the keyboard. It provides a generic
+     * event and the current value of the slider.
+     */
+    onChangeEnd?: (event: Event, value: number) => void;
+    /**
+     * Restrict slider value to marks only. The step will be ignored.
+     */
+    restrictToMarks?: boolean;
+    /**
+     * Show visual ticks above the marks.
+     */
+    showTicks?: boolean;
+    /**
+     * Show the slider value in a tooltip when the thumb is hovered.
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Minimum interval the slider thumb can move.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Maximum interval the slider thumb can move when using PageUp and PageDown keys.
+     * @default 2
+     */
+    stepMultiplier?: number;
+    /**
+     * Value of the slider, to be used when in a controlled state.
+     */
+    value?: number;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Slider";
+export * from "./RangeSlider";

package/dist-types/slider/internal/SliderThumb.d.ts

@@ -0,0 +1,26 @@
+import { type ChangeEvent, type ComponentPropsWithoutRef, type RefObject } from "react";
+interface SliderThumbProps extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "defaultValue" | "min" | "max"> {
+    accessibleMaxText?: string;
+    accessibleMinText?: string;
+    disabled: boolean;
+    format?: (value: number) => number | string;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
+    handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    index?: number;
+    inputRef?: RefObject<HTMLInputElement>;
+    isFocusVisible: boolean;
+    max: number;
+    maxLabel?: string;
+    min: number;
+    minLabel?: string;
+    offsetPercentage?: string;
+    restrictToMarks?: boolean;
+    showTooltip?: boolean;
+    sliderValue: [number, number] | number;
+    step: number;
+    stepMultiplier: number;
+    trackDragging: boolean;
+}
+export declare const SliderThumb: ({ "aria-label": ariaLabel, "aria-valuetext": ariaValueText, "aria-labelledby": ariaLabelledBy, accessibleMaxText, accessibleMinText, disabled, format, 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;
+export {};

package/dist-types/slider/internal/SliderTooltip.d.ts

@@ -0,0 +1,6 @@
+interface SliderTooltipProps {
+    value: number | string;
+    open?: boolean;
+}
+export declare const SliderTooltip: ({ value, open }: SliderTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-types/slider/internal/SliderTrack.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type RefObject } from "react";
+interface SliderTrackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    children: React.ReactNode;
+    constrainLabelPosition?: boolean;
+    disabled: boolean;
+    showTicks?: boolean;
+    format?: (value: number) => string | number;
+    handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    isRange?: boolean;
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    max: number;
+    maxLabel?: number | string;
+    min: number;
+    minLabel?: number | string;
+    progressPercentage?: number;
+    progressPercentageRange?: [number, number];
+    sliderRef: RefObject<HTMLDivElement>;
+}
+export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/slider/internal/useRangeSliderThumb.d.ts

@@ -0,0 +1,30 @@
+import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { SliderProps } from "../Slider";
+declare type UseRangeSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
+    decimalPlaces: number;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>, thumbIndex: number) => void;
+    inputRefs: RefObject<HTMLInputElement>[];
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    onChange?: (event: Event, value: [number, number]) => void;
+    onChangeEnd?: (event: Event, value: [number, number]) => void;
+    restrictToMarks?: boolean;
+    setValue: Dispatch<SetStateAction<[number, number]>>;
+    stepMultiplier: number;
+    value: [number, number];
+};
+export declare const useRangeSliderThumb: ({ decimalPlaces, handleInputChange, inputRefs, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseRangeSliderThumbProps) => {
+    handleBlur: (thumbIndex: number) => void;
+    handleFocus: (thumbIndex: number) => void;
+    handleKeydownOnThumb: (event: React.KeyboardEvent, thumbIndex: number) => void;
+    handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => void;
+    handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    isFocusVisible: boolean;
+    preventThumbOverlap: (currentValue: number, value: [number, number], thumbIndex: number) => [number, number];
+    sliderRef: RefObject<HTMLDivElement>;
+    thumbIndexState: number;
+};
+export {};

package/dist-types/slider/internal/useSliderThumb.d.ts

@@ -0,0 +1,28 @@
+import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { SliderProps } from "../Slider";
+declare type UseSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
+    decimalPlaces: number;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputRef: RefObject<HTMLInputElement>;
+    marks?: {
+        label: string;
+        value: number;
+    }[];
+    onChange?: (event: Event, value: number) => void;
+    onChangeEnd?: (event: Event, value: number) => void;
+    restrictToMarks?: boolean;
+    setValue: Dispatch<SetStateAction<number>>;
+    stepMultiplier: number;
+    value: number;
+};
+export declare const useSliderThumb: ({ decimalPlaces, handleInputChange, inputRef, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseSliderThumbProps) => {
+    handleBlur: () => void;
+    handleFocus: () => void;
+    handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
+    handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+    isFocusVisible: boolean;
+    sliderRef: RefObject<HTMLDivElement>;
+};
+export {};

package/dist-types/slider/internal/utils.d.ts

@@ -0,0 +1,20 @@
+import type { RefObject } from "react";
+export declare const toFloat: (value: number | string) => number;
+export declare const calculateMarkPosition: (value: number | string, max: number, min: number) => number;
+export declare const calculatePercentage: (value: number, max: number, min: number) => number;
+export declare const clamp: (value: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
+    value: number;
+    label: string;
+}[] | undefined, restrictToMarks?: boolean | undefined) => number;
+export declare const clampRange: (range: [number, number], max: number, min: number, step: number, decimalPlaces: number, marks?: {
+    value: number;
+    label: string;
+}[] | undefined, restrictToMarks?: boolean | undefined) => [number, number];
+export declare const getClickedPosition: (sliderRef: RefObject<HTMLDivElement>, clientX: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
+    label: string;
+    value: number;
+}[] | undefined, restrictToMarks?: boolean | undefined) => number | undefined;
+export declare const getKeyboardValue: (event: React.KeyboardEvent, value: number, step: number, stepMultiplier: number, max: number, min: number, restrictToMarks?: boolean | undefined, marks?: {
+    label: string;
+    value: number;
+}[] | undefined) => number;

package/dist-types/switch/Switch.d.ts

@@ -2,16 +2,16 @@ import { type ChangeEventHandler, type ComponentPropsWithoutRef, type FocusEvent
 import type { DataAttributes } from "../types";
 export interface SwitchProps extends Omit<ComponentPropsWithoutRef<"label">, "children" | "onFocus" | "onBlur" | "onChange"> {
     /**
-     * If `true`, the checkbox will be checked.
+     * If `true`, the switch will be checked.
      */
     checked?: boolean;
     /**
-     * Whether the checkbox component is checked by default
+     * Whether the switch component is checked by default
      * This will be disregarded if checked is already set.
      */
     defaultChecked?: boolean;
     /**
-     * If `true`, the checkbox will be disabled.
+     * If `true`, the switch will be disabled.
      */
     disabled?: boolean;
     /**
@@ -19,7 +19,7 @@ export interface SwitchProps extends Omit<ComponentPropsWithoutRef<"label">, "ch
      */
     inputProps?: Partial<ComponentPropsWithoutRef<"input">> & DataAttributes;
     /**
-     * The label to be shown next to the checkbox.
+     * The label to be shown next to the switch.
      */
     label?: ReactNode;
     /**
@@ -27,7 +27,7 @@ export interface SwitchProps extends Omit<ComponentPropsWithoutRef<"label">, "ch
      */
     name?: string;
     /**
-     * Callback when checkbox loses focus.
+     * Callback when switch loses focus.
      */
     onBlur?: FocusEventHandler<HTMLInputElement>;
     /**
@@ -35,11 +35,11 @@ export interface SwitchProps extends Omit<ComponentPropsWithoutRef<"label">, "ch
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
-     * Callback when checkbox gains focus.
+     * Callback when switch gains focus.
      */
     onFocus?: FocusEventHandler<HTMLInputElement>;
     /**
-     * The value of the checkbox.
+     * The value of the switch.
      */
     value?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",