@salt-ds/lab 1.0.0-alpha.70 → 1.0.0-alpha.71

package/dist-types/number-input/NumberInput.d.ts

@@ -2,33 +2,40 @@ import { type ValidationStatus } from "@salt-ds/core";
 import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode, type Ref, type SyntheticEvent } from "react";
 export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /**
-     * A boolean. When `true`, the input will receive a full border.
+     * Styling variant with full border.
+     * @default false
      */
     bordered?: boolean;
     /**
-     * The number of decimal places to display.
+     * A boolean that, when true, ensures the input value is clamped within the specified min and max range upon losing focus.
+     * @default false
      */
-    decimalPlaces?: number;
+    clamp?: boolean;
     /**
-     * Sets the initial default value of the component.
+     * The default value. Use when the component is uncontrolled.
      */
     defaultValue?: number | string;
     /**
-     * If `true`, the number input will be disabled.
+     * Disable the `NumberInput`.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The marker to use in an empty read only Input.
-     * Use `''` to disable this feature. Defaults to '—'.
-     * @default '—'
+     * Use `''` to disable this feature.
+     * @default "—"
      */
     emptyReadOnlyMarker?: string;
     /**
-     * End adornment component
+     * End adornment component.
      */
     endAdornment?: ReactNode;
     /**
-     * Whether to hide the number buttons. Defaults to `false`.
+     * A callback to format the value of the `NumberInput`.
+     */
+    format?: (value: number | string) => string | number;
+    /**
+     * Hide the number buttons.
      * @default false
      */
     hideButtons?: boolean;
@@ -37,49 +44,64 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<"div">,
      */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
-     * Optional ref for the input component
+     * Optional ref for the input component.
      */
     inputRef?: Ref<HTMLInputElement>;
     /**
-     * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.
+     * The maximum value that can be selected.
      * @default Number.MAX_SAFE_INTEGER
      */
     max?: number;
     /**
-     * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.
+     * The minimum value that can be selected.
      * @default Number.MIN_SAFE_INTEGER
      */
     min?: number;
     /**
-     * Callback when number input value is changed.
-     * @param event - the event triggers value change, could be undefined during increment / decrement button long press
+     * Callback function that is triggered when the value of the `NumberInput` changes.
+     *
+     * @param event - The event that triggers the value change. This may be `undefined` during a long press on the increment or decrement buttons.
+     * @param value - The new value of the `NumberInput`, which can be a number or a string.
      */
     onChange?: (event: SyntheticEvent | undefined, value: number | string) => void;
     /**
-     * A string. Displayed in a dimmed color when the input value is empty.
+     *
+     * A callback to parse the value of the `NumberInput`. To be used alongside
+     * the `format` callback.
+     */
+    parse?: (value: number | string) => string | number;
+    /**
+     * A string displayed in a dimmed color when the `NumberInput` value is empty.
+     */
+    placeholder?: string;
+    /**
+     * The number of decimal places allowed. Defaults to the decimal scale of either the initial value provided or the step, whichever is greater.
      */
-    placeholder?: string | undefined;
+    decimalScale?: number;
     /**
-     * A boolean. If `true`, the component is not editable by the user.
+     * A boolean property that controls the editability of the `NumberInput`.
+     * - When set to `true`, the `NumberInput` becomes read-only, preventing user edits.
+     * - When set to `false` or omitted, the `NumberInput` is editable by the user.
      */
     readOnly?: boolean;
     /**
-     * Start adornment component
+     * Start adornment component.
      */
     startAdornment?: ReactNode;
     /**
-     * The amount to increment or decrement the value by when using the number buttons or Up Arrow and Down Arrow keys. Default to 1.
+     * The amount to increment or decrement the value by when using the `NumberInput` buttons or Up Arrow and Down Arrow keys.
      * @default 1
      */
     step?: number;
     /**
-     * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.
-     * Defaults to 10.
-     * @default 10
+     * Defines the factor by which the step value is multiplied to determine the maximum increment or decrement when the Shift key
+     * is held while pressing the Up Arrow or Down Arrow keys for faster adjustments of the value.
+     * @default 2
      */
-    stepBlock?: number;
+    stepMultiplier?: number;
     /**
-     * Alignment of text within container. Defaults to "left".
+     * Specifies the alignment of the text within the `NumberInput`.
+     *
      * @default "left"
      */
     textAlign?: "left" | "center" | "right";
@@ -88,13 +110,13 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<"div">,
      */
     validationStatus?: Extract<ValidationStatus, "error" | "warning" | "success">;
     /**
-     * Styling variant. Defaults to "primary".
+     * Styling variant.
      * @default "primary"
      */
     variant?: "primary" | "secondary";
     /**
-     * The value of the number input. The component will be controlled if this prop is provided.
+     * Value of the `NumberInput`, to be used when in a controlled state.
      */
-    value?: number | string | undefined;
+    value?: number | string;
 }
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/number-input/internal/useCaret.d.ts

@@ -0,0 +1,5 @@
+import { type MutableRefObject } from "react";
+declare const useCaret: ({ inputRef, }: {
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+}) => (() => void)[];
+export default useCaret;

package/dist-types/number-input/internal/useInterval.d.ts

@@ -1,3 +1,3 @@
-declare type IntervalFunction = () => void;
+type IntervalFunction = () => void;
 declare function useInterval(callback: IntervalFunction, delay: number | null): void;
 export { useInterval };

package/dist-types/number-input/internal/utils.d.ts

@@ -1,8 +1,8 @@
-export declare const ACCEPT_INPUT: RegExp;
-export declare const toFixedDecimalPlaces: (inputNumber: number, decimalPlaces: number) => string;
 export declare const isAllowedNonNumeric: (inputCharacter: number | string) => boolean | undefined;
 export declare const toFloat: (inputValue: number | string) => number;
-export declare const sanitizedInput: (numberString: string) => string;
-export declare const isAtMax: (value: number | string | undefined, max: number) => boolean;
-export declare const isAtMin: (value: number | string | undefined, min: number) => boolean;
+export declare const isValidNumber: (num: string | number) => boolean;
+export declare const sanitizeInput: (value: string | number) => string | number;
 export declare const isOutOfRange: (value: number | string | undefined, min: number, max: number) => boolean;
+export declare const clampToRange: (min: number, max: number, value: number) => number;
+export declare const getNumberPrecision: (number: string | number) => number;
+export declare const isEmpty: (value: number | string) => value is "";

package/dist-types/number-input/useNumberInput.d.ts

@@ -1,12 +1,17 @@
 import { type Dispatch, type MouseEvent, type MutableRefObject, type SetStateAction, type SyntheticEvent } from "react";
 import type { NumberInputProps } from "./NumberInput";
+export interface UseNumberInputProps extends Pick<NumberInputProps, "decimalScale" | "disabled" | "format" | "inputRef" | "max" | "min" | "onChange" | "parse" | "readOnly" | "step" | "stepMultiplier"> {
+    clampAndFix: (value: number) => string | number;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    isAdjustingRef: MutableRefObject<boolean>;
+    setIsEditing: Dispatch<SetStateAction<boolean>>;
+    setValue: Dispatch<SetStateAction<string | number>>;
+    value: string | number;
+}
 /**
  * Manages increment / decrement logic
  */
-export declare const useNumberInput: ({ decimalPlaces, disabled, inputRef, max, min, onChange, readOnly, setValue, step, stepBlock, value, }: Pick<NumberInputProps, "value" | "max" | "min" | "onChange" | "disabled" | "readOnly" | "step" | "inputRef" | "decimalPlaces" | "stepBlock"> & {
-    setValue: Dispatch<SetStateAction<string | number | undefined>>;
-    inputRef: MutableRefObject<HTMLInputElement | null>;
-}) => {
+export declare const useNumberInput: ({ clampAndFix, decimalScale, disabled, format, inputRef, isAdjustingRef, max, min, onChange, parse, readOnly, setIsEditing, setValue, step, stepMultiplier, value, }: UseNumberInputProps) => {
     incrementButtonProps: {
         "aria-label": string;
         disabled: boolean;
@@ -23,6 +28,6 @@ export declare const useNumberInput: ({ decimalPlaces, disabled, inputRef, max,
         tabIndex: number;
         onMouseUp: () => void | undefined;
     };
-    incrementValue: (event?: SyntheticEvent<Element, Event> | undefined, block?: boolean | undefined) => void;
-    decrementValue: (event?: SyntheticEvent<Element, Event> | undefined, block?: boolean | undefined) => void;
+    incrementValue: (event?: SyntheticEvent, block?: boolean) => void;
+    decrementValue: (event?: SyntheticEvent, block?: boolean) => void;
 };

package/dist-types/query-input/useQueryInput.d.ts

@@ -2,7 +2,7 @@ import { type FocusEventHandler, type ForwardedRef, type Ref } from "react";
 import type { QueryInputProps } from "./QueryInput";
 import type { QueryInputBodyProps } from "./internal/QueryInputBody";
 import type { ValueSelectorProps } from "./internal/ValueSelector";
-export declare type BooleanOperator = "or" | "and";
+export type BooleanOperator = "or" | "and";
 export interface UseQueryInputResult {
     queryInputProps: {
         onFocus: FocusEventHandler<HTMLDivElement>;

package/dist-types/responsive/OverflowReducer.d.ts

@@ -27,7 +27,7 @@ interface RemoveItemAction {
 }
 interface MultiItemAction {
     type: "update-items" | "update-items-remove-overflow-indicator";
-    overflowItems: Partial<Omit<OverflowItem, "id">> & Pick<OverflowItem, "id">[];
+    overflowItems: (Partial<Omit<OverflowItem, "id">> & Pick<OverflowItem, "id">)[];
 }
 interface SingleItemAction {
     type: "add-overflow-indicator" | "replace-item" | "collapsing-item" | "uncollapse-dynamic-item" | "collapse-instant-item";
@@ -46,9 +46,9 @@ interface DynamicCollapseAction extends Omit<SingleItemAction, "type"> {
     collapsedSize: number;
     minSize: number;
 }
-export declare type OverflowAction = AddChildAction | CombinedItemAction | DynamicCollapseAction | EmptyPayloadAction | InitAction | MultiItemAction | RemoveItemAction | SingleItemAction | SourceAction;
-export declare type OverflowReducer = Reducer<OverflowItems, OverflowAction>;
-export declare type OverflowReducerInitialisationProps = {
+export type OverflowAction = AddChildAction | CombinedItemAction | DynamicCollapseAction | EmptyPayloadAction | InitAction | MultiItemAction | RemoveItemAction | SingleItemAction | SourceAction;
+export type OverflowReducer = Reducer<OverflowItems, OverflowAction>;
+export type OverflowReducerInitialisationProps = {
     children?: ReactNode;
     source?: OverflowSource[];
     injectedItems?: any[];

package/dist-types/responsive/overflowTypes.d.ts

@@ -1,22 +1,22 @@
 import type { ReactElement, ReactNode, RefObject } from "react";
 import type { OverflowAction as overflowAction2 } from "./OverflowReducer";
-declare type dimension = "width" | "height" | "scrollWidth" | "scrollHeight";
-declare type dimensions = {
+type dimension = "width" | "height" | "scrollWidth" | "scrollHeight";
+type dimensions = {
     size: dimension;
     depth: dimension;
     scrollDepth: dimension;
 };
-export declare type dimensionsType = {
+export type dimensionsType = {
     horizontal: dimensions;
     vertical: dimensions;
 };
-export declare type orientationType = keyof dimensionsType;
-export declare type collapsibleType = "instant" | "dynamic";
+export type orientationType = keyof dimensionsType;
+export type collapsibleType = "instant" | "dynamic";
 interface NonNullableRefObject<T> {
     current: T;
 }
-export declare type FilterPredicate = (item: OverflowItem) => boolean;
-export declare type ElementRef = RefObject<HTMLDivElement>;
+export type FilterPredicate = (item: OverflowItem) => boolean;
+export type ElementRef = RefObject<HTMLDivElement>;
 export interface OverflowSource {
     id?: string;
     label: string;
@@ -25,15 +25,15 @@ export interface OverflowSource {
     position?: number;
     priority?: number;
 }
-export declare type InjectedSourceItem = {
+export type InjectedSourceItem = {
     source: OverflowSource;
 };
-export declare type InjectedChildItem = {
+export type InjectedChildItem = {
     element: JSX.Element;
 };
-export declare type InjectedItem = InjectedChildItem | InjectedSourceItem;
-export declare type overflowItemType = "source" | "child";
-export declare type OverflowItem<T extends overflowItemType = "child"> = {
+export type InjectedItem = InjectedChildItem | InjectedSourceItem;
+export type overflowItemType = "source" | "child";
+export type OverflowItem<T extends overflowItemType = "child"> = {
     collapsed?: boolean;
     collapsible?: collapsibleType;
     collapsing?: boolean;
@@ -57,24 +57,24 @@ export declare type OverflowItem<T extends overflowItemType = "child"> = {
     editable?: boolean;
     closeable?: boolean;
 };
-export declare type OverflowItems = OverflowItem<"source" | "child">[];
-export declare type ManagedListRef = NonNullableRefObject<OverflowItem[]>;
-export declare type overflowState = {
+export type OverflowItems = OverflowItem<"source" | "child">[];
+export type ManagedListRef = NonNullableRefObject<OverflowItem[]>;
+export type overflowState = {
     overflowIndicatorSize: number;
     visibleItems: OverflowItem[];
 };
-export declare type overflowAction = {
+export type overflowAction = {
     type: string;
     managedItems?: OverflowItem[];
     managedItem?: OverflowItem;
 };
-export declare type overflowDispatch = (action: overflowAction2) => void;
-export declare type OverflowCollectionOptions = {
+export type overflowDispatch = (action: overflowAction2) => void;
+export type OverflowCollectionOptions = {
     closeable?: boolean;
     editable?: boolean;
     getPriority?: (item: any, index: number) => number | undefined;
 };
-export declare type OverflowCollectionHookProps = {
+export type OverflowCollectionHookProps = {
     children?: ReactNode;
     defaultSource?: OverflowSource[];
     id: string;
@@ -84,7 +84,7 @@ export declare type OverflowCollectionHookProps = {
     orientation: orientationType;
     source?: OverflowSource[];
 };
-export declare type OverflowCollectionHookResult = {
+export type OverflowCollectionHookResult = {
     data: OverflowItem[];
     dispatch: (action: overflowAction2 | {
         type: "reset";

package/dist-types/responsive/overflowUtils.d.ts

@@ -1,7 +1,7 @@
 import type { ElementRef, OverflowItem, orientationType } from "./overflowTypes";
 export declare const DropdownPlaceholder: () => null;
 export declare const getDropdownPlaceholder: () => import("react/jsx-runtime").JSX.Element;
-export declare type heightOrWidth = "width" | "height";
+export type heightOrWidth = "width" | "height";
 export declare const NO_DATA: {};
 export declare const allExceptOverflowIndicator: (sum: number, m: OverflowItem) => number;
 export declare const isCollapsed: (item: OverflowItem) => boolean;
@@ -28,11 +28,11 @@ export declare const measureContainerOverflow: (ref: ElementRef, orientation?: o
  **/
 export declare function measureElementSize(element: HTMLElement, dimension?: heightOrWidth, includeAutoMargin?: boolean): number;
 export declare const byDescendingPriority: (m1: OverflowItem, m2: OverflowItem) => number;
-export declare const getOverflowIndicator: (managedItems: OverflowItem[]) => OverflowItem<"child"> | undefined;
+export declare const getOverflowIndicator: (managedItems: OverflowItem[]) => OverflowItem | undefined;
 export declare const popNextItemByPriority: (items: OverflowItem[]) => OverflowItem | null;
 export declare const measureOverflowItems: (items: OverflowItem[], dimension: heightOrWidth) => OverflowItem[];
 export declare const addAll: (sum: number, m: OverflowItem) => number;
 export declare const getElementForItem: (ref: ElementRef, item: OverflowItem) => HTMLElement;
-declare type dimension = "left" | "right" | "top" | "bottom";
+type dimension = "left" | "right" | "top" | "bottom";
 export declare const getRuntimePadding: (el: HTMLElement, ...dimensions: dimension[]) => number[];
 export {};

package/dist-types/responsive/useOverflowCollectionItems.d.ts

@@ -1,4 +1,4 @@
 import type { OverflowCollectionHookProps, OverflowCollectionHookResult } from "./overflowTypes";
-declare type OverflowCollectionHook = (props: OverflowCollectionHookProps) => OverflowCollectionHookResult;
+type OverflowCollectionHook = (props: OverflowCollectionHookProps) => OverflowCollectionHookResult;
 export declare const useOverflowCollectionItems: OverflowCollectionHook;
 export {};

package/dist-types/responsive/useOverflowLayout.d.ts

@@ -1,4 +1,4 @@
 import type { ElementRef, OverflowItem, OverflowLayoutHookProps } from "./overflowTypes";
-declare type overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;
+type overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;
 export declare const useOverflowLayout: ({ collectionHook, id, orientation, label, disableOverflow, }: OverflowLayoutHookProps) => [ElementRef, overflowUpdate];
 export {};

package/dist-types/responsive/useResizeObserver.d.ts

@@ -2,11 +2,11 @@ import { type RefObject } from "react";
 export declare const WidthHeight: string[];
 export declare const HeightOnly: string[];
 export declare const WidthOnly: string[];
-export declare type measurements<T = string | number> = {
+export type measurements<T = string | number> = {
     height?: T;
     scrollHeight?: T;
     scrollWidth?: T;
     width?: T;
 };
-export declare type ResizeHandler = (measurements: measurements<number>) => void;
+export type ResizeHandler = (measurements: measurements<number>) => void;
 export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/dist-types/responsive/utils.d.ts

@@ -1,7 +1,7 @@
-export declare type dataPadDirection = "data-pad-start" | "data-pad-end";
+export type dataPadDirection = "data-pad-start" | "data-pad-end";
 export declare const isResponsiveAttribute: (propName: string) => boolean;
-declare type AnyProps = Record<string, unknown>;
-declare type ResponsivePropsTuple = [AnyProps, AnyProps];
+type AnyProps = Record<string, unknown>;
+type ResponsivePropsTuple = [AnyProps, AnyProps];
 /**
  * data- attributes can be used to manage item overflow behaviour. Users may
  * speficy these attributes directly on a Toolbar component, which ultimately

package/dist-types/tabs/Tab.d.ts

@@ -1,22 +1,23 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
+import { type EditableLabelProps } from "../editable-label";
 export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onKeyUp" | "onClick"> & {
-    ariaControls?: string | undefined;
-    closeable?: boolean | undefined;
-    draggable?: boolean | undefined;
-    dragging?: boolean | undefined;
-    editable?: boolean | undefined;
-    editing?: boolean | undefined;
-    focused?: boolean | undefined;
-    focusVisible?: boolean | undefined;
-    focusedChildIndex?: number | undefined;
-    selected?: boolean | undefined;
-    index?: number | undefined;
-    label?: string | undefined;
-    onClick?: ((e: MouseEvent<Element, globalThis.MouseEvent>, index: number) => void) | undefined;
-    onClose?: ((index: number) => void) | undefined;
-    onEnterEditMode?: (() => void) | undefined;
-    onExitEditMode?: import("./TabsTypes").exitEditHandler | undefined;
-    onKeyUp?: ((e: KeyboardEvent<Element>, index: number) => void) | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
-    tabChildIndex?: number | undefined;
+    ariaControls?: import("react").AriaAttributes["aria-controls"];
+    closeable?: boolean;
+    draggable?: boolean;
+    dragging?: boolean;
+    editable?: boolean;
+    editing?: EditableLabelProps["editing"];
+    focused?: boolean;
+    focusVisible?: boolean;
+    focusedChildIndex?: number;
+    selected?: boolean;
+    index?: number;
+    label?: EditableLabelProps["defaultValue"];
+    onClick?: (e: MouseEvent, index: number) => void;
+    onClose?: (index: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: import("./TabsTypes").exitEditHandler;
+    onKeyUp?: (e: KeyboardEvent, index: number) => void;
+    orientation?: "horizontal" | "vertical";
+    tabChildIndex?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import type { FocusAPI, TabstripProps } from "./TabsTypes";
-export declare type TabsProps = Omit<TabstripProps, "defaultSource">;
+export type TabsProps = Omit<TabstripProps, "defaultSource">;
 export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<FocusAPI>>;

package/dist-types/tabs/TabsTypes.d.ts

@@ -8,10 +8,10 @@ export interface FocusAPI {
 export interface TabDescriptor extends OverflowSource {
     element?: JSX.Element;
 }
-export declare type TabsSource = string[] | TabDescriptor[];
-export declare type navigationProps = Pick<TabProps, "onFocus" | "onKeyDown">;
-export declare type composableTabProps = navigationProps & Pick<TabProps, "onClick" | "onEnterEditMode" | "onExitEditMode" | "onMouseDown">;
-export declare type TabstripVariant = "primary" | "tertiary";
+export type TabsSource = string[] | TabDescriptor[];
+export type navigationProps = Pick<TabProps, "onFocus" | "onKeyDown">;
+export type composableTabProps = navigationProps & Pick<TabProps, "onClick" | "onEnterEditMode" | "onExitEditMode" | "onMouseDown">;
+export type TabstripVariant = "primary" | "tertiary";
 export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * when true Tabs may be re-arranged by dragging individual Tabs to new position within Tabstrip.
@@ -64,13 +64,13 @@ export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
      */
     variant?: TabstripVariant;
 }
-export declare type exitEditHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export type exitEditHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
 export interface responsiveDataAttributes {
     "data-index": number;
     "data-overflowed"?: boolean;
     "data-priority": number;
 }
-export declare type TabProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
+export type TabProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
     ariaControls?: AriaAttributes["aria-controls"];
     closeable?: boolean;
     draggable?: boolean;
@@ -91,4 +91,4 @@ export declare type TabProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "on
     orientation?: "horizontal" | "vertical";
     tabChildIndex?: number;
 };
-export declare type TabElement = ReactElement<TabProps>;
+export type TabElement = ReactElement<TabProps>;

package/dist-types/tabs/drag-drop/Draggable.d.ts

@@ -4,6 +4,6 @@ export declare const Draggable: import("react").ForwardRefExoticComponent<{
     wrapperClassName: string;
     element: HTMLElement;
     rect: Rect;
-    scale?: number | undefined;
+    scale?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export declare const createDragSpacer: (transitioning?: MutableRefObject<boolean> | undefined) => HTMLElement;
+export declare const createDragSpacer: (transitioning?: MutableRefObject<boolean>) => HTMLElement;

package/dist-types/tabs/drag-drop/DropIndicator.d.ts

@@ -1,5 +1,5 @@
 import type { Rect } from "./dragDropTypes";
 export declare const DropIndicator: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     rect: Rect;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/tabs/drag-drop/drag-utils.d.ts

@@ -1,6 +1,6 @@
 import type { orientationType } from "../../responsive";
 import { type Direction } from "./dragDropTypes";
-export declare type MeasuredDropTarget = {
+export type MeasuredDropTarget = {
     currentIndex: number;
     dataIndex?: number;
     element: HTMLElement;
@@ -12,37 +12,41 @@ export declare type MeasuredDropTarget = {
     mid: number;
     size: number;
 };
-export declare type targetType = {
+export type targetType = {
     element: HTMLElement | null;
     index: number;
     isLast?: boolean;
 };
-declare type Dimension = keyof Pick<DOMRect, "width" | "height">;
+type MousePosKey = keyof Pick<MouseEvent, "clientX" | "clientY">;
+type DOMRectKey = keyof Omit<DOMRect, "toJSON">;
+type DOMRectDimensionKey = keyof Pick<DOMRect, "width" | "height">;
+type Dimension = keyof Pick<DOMRect, "width" | "height">;
+type ElementDimension = keyof Pick<HTMLElement, "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft">;
 export declare const measureElementSizeAndPosition: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => number[];
 export declare const dimensions: (orientation: orientationType) => {
-    CLIENT_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
-    CONTRA: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
-    CONTRA_POS: "clientX" | "clientY";
-    DIMENSION: "height" | "width";
-    END: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
-    POS: "clientX" | "clientY";
-    SCROLL_POS: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
-    SCROLL_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
-    START: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
+    CLIENT_SIZE: ElementDimension;
+    CONTRA: DOMRectKey;
+    CONTRA_POS: MousePosKey;
+    DIMENSION: DOMRectDimensionKey;
+    END: DOMRectKey;
+    POS: MousePosKey;
+    SCROLL_POS: ElementDimension;
+    SCROLL_SIZE: ElementDimension;
+    START: DOMRectKey;
 } | {
-    CLIENT_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
-    CONTRA: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
-    CONTRA_POS: "clientX" | "clientY";
-    DIMENSION: "height" | "width";
-    END: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
-    POS: "clientX" | "clientY";
-    SCROLL_POS: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
-    SCROLL_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
-    START: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
+    CLIENT_SIZE: ElementDimension;
+    CONTRA: DOMRectKey;
+    CONTRA_POS: MousePosKey;
+    DIMENSION: DOMRectDimensionKey;
+    END: DOMRectKey;
+    POS: MousePosKey;
+    SCROLL_POS: ElementDimension;
+    SCROLL_SIZE: ElementDimension;
+    START: DOMRectKey;
 };
 export declare const getDraggedItem: (measuredItems: MeasuredDropTarget[]) => MeasuredDropTarget;
 export declare const moveDragItem: (measuredItems: MeasuredDropTarget[], dropTarget: MeasuredDropTarget) => MeasuredDropTarget[];
 export declare const isDraggedElement: (item: MeasuredDropTarget) => boolean;
-export declare const measureDropTargets: (container: HTMLElement, orientation: orientationType, draggedItem: HTMLElement, itemQuery?: string | undefined) => MeasuredDropTarget[];
+export declare const measureDropTargets: (container: HTMLElement, orientation: orientationType, draggedItem: HTMLElement, itemQuery?: string) => MeasuredDropTarget[];
 export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, direction: Direction) => MeasuredDropTarget | null;
 export {};

package/dist-types/tabs/drag-drop/dragDropTypes.d.ts

@@ -1,16 +1,16 @@
 import type { MouseEventHandler, RefObject } from "react";
 import type { orientationType } from "../../responsive";
-export declare type dragStrategy = "drop-indicator" | "natural-movement";
-export declare type Direction = "fwd" | "bwd";
+export type dragStrategy = "drop-indicator" | "natural-movement";
+export type Direction = "fwd" | "bwd";
 export declare const FWD: Direction;
 export declare const BWD: Direction;
-export declare type Rect = {
+export type Rect = {
     height: number;
     left: number;
     top: number;
     width: number;
 };
-export declare type DragHookResult = {
+export type DragHookResult = {
     draggable: JSX.Element | null;
     dropIndicator: JSX.Element | null;
     draggedItemIndex?: number;
@@ -18,7 +18,7 @@ export declare type DragHookResult = {
     onMouseDown?: MouseEventHandler;
     revealOverflowedItems: boolean;
 };
-export declare type DragDropHook = (props: {
+export type DragDropHook = (props: {
     allowDragDrop?: boolean | dragStrategy;
     extendedDropZone?: boolean;
     onDrop: (fromIndex: number, toIndex: number) => void;

package/dist-types/tabs/drag-drop/useDragSpacers.d.ts

@@ -1,7 +1,7 @@
 import type { MeasuredDropTarget } from "./drag-utils";
 import type { Direction } from "./dragDropTypes";
 export declare const useDragSpacers: () => {
-    displaceItem: (item: MeasuredDropTarget | null, size: number, useTransition?: boolean, direction?: Direction | undefined) => void;
+    displaceItem: (item: MeasuredDropTarget | null, size: number, useTransition?: boolean, direction?: Direction) => void;
     displaceLastItem: (item: MeasuredDropTarget, size: number, useTransition?: boolean) => void;
     clearSpacers: () => void;
 };

package/dist-types/tabs/useActivationIndicator.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from "react";
 import { type orientationType } from "../responsive";
-declare type activationIndicatorStyles = {
+type activationIndicatorStyles = {
     height?: number;
     left?: number;
     top?: number;