@vuu-ui/vuu-ui-controls 0.0.26

package/types/combo-box/index.d.ts

@@ -0,0 +1 @@
+export * from "./ComboBox";

package/types/combo-box/useCombobox.d.ts

@@ -0,0 +1,20 @@
+import { InputProps } from "@salt-ds/core";
+import { RefCallback } from "react";
+import { ComponentSelectionProps, MultiSelectionStrategy, SelectionStrategy } from "../common-hooks";
+import { DropdownHookProps, DropdownHookResult, OpenChangeHandler } from "../dropdown";
+import { ListHookProps, ListHookResult } from "../list";
+import { ComboBoxProps } from "./ComboBox";
+export interface ComboboxHookProps<Item = string, S extends SelectionStrategy = "default"> extends Partial<Omit<DropdownHookProps, "id" | "onKeyDown">>, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Pick<ComboBoxProps<Item>, "allowBackspaceClearsSelection" | "allowEnterCommitsText" | "allowFreeText" | "defaultValue" | "initialHighlightedIndex" | "itemsToString" | "onDeselect" | "onSetSelectedText" | "onListItemSelect" | "value">, Omit<ComponentSelectionProps<Item, S>, "onSelect">, Omit<ListHookProps<Item, S>, "containerRef" | "defaultSelected" | "onSelect" | "selected"> {
+    InputProps?: InputProps;
+    ariaLabel?: string;
+    id: string;
+    itemCount: number;
+    itemToString?: (item: Item) => string;
+}
+export interface ComboboxHookResult<Item, S extends SelectionStrategy> extends Pick<ListHookResult<Item>, "focusVisible" | "highlightedIndex" | "listControlProps" | "listHandlers">, Partial<DropdownHookResult> {
+    InputProps: InputProps;
+    onOpenChange: OpenChangeHandler;
+    selected?: S extends MultiSelectionStrategy ? Item[] : Item | null;
+    setContainerRef: RefCallback<HTMLDivElement>;
+}
+export declare const useCombobox: <Item, S extends SelectionStrategy>({ allowBackspaceClearsSelection, allowEnterCommitsText, allowFreeText, ariaLabel, collectionHook, defaultIsOpen, defaultSelected, defaultValue, onBlur, onFocus, onChange, onDeselect, onSelect, id, initialHighlightedIndex, isOpen: isOpenProp, itemCount, itemsToString, itemToString, onListItemSelect, onOpenChange, onSelectionChange, onSetSelectedText, selected: selectedProp, selectionKeys, selectionStrategy, value: valueProp, InputProps, }: ComboboxHookProps<Item, S>) => ComboboxHookResult<Item, S>;

package/types/common-hooks/collectionProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { CollectionHookResult } from "./collectionTypes";
+export interface collectionContext<T> {
+    collection: CollectionHookResult<T>;
+}
+export declare const CollectionContext: import("react").Context<CollectionHookResult<any> | undefined>;
+interface ContextProviderProps<Item> {
+    children: ReactElement;
+    collectionHook: CollectionHookResult<Item>;
+}
+export declare function CollectionProvider<Item>({ children, collectionHook, ...props }: ContextProviderProps<Item>): JSX.Element;
+export declare function useCollection<Item>(): CollectionHookResult<Item> | undefined;
+export {};

package/types/common-hooks/collectionTypes.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from "react";
+export interface CollectionIndexer {
+    value: number;
+}
+export interface CollectionItemBase<T> {
+    id: string;
+    description?: string;
+    disabled?: boolean;
+    focusable?: false | undefined;
+    index?: number;
+    label?: string;
+    value: T | null;
+}
+export interface CollectionItem<T> extends CollectionItemBase<T> {
+    childNodes?: CollectionItem<T>[];
+    count?: number;
+    expanded?: boolean;
+    header?: boolean;
+    level?: number;
+    selectable?: boolean;
+}
+export interface SourceGroup<T> {
+    childNodes: T[];
+}
+export type CollectionOptions<T> = {
+    collapsibleHeaders?: boolean;
+    defaultExpanded?: boolean;
+    disableFilter?: boolean;
+    filterPattern?: string;
+    getFilterRegex?: (inputValue: string) => RegExp;
+    getItemId?: (indexOfItem: number) => string;
+    noChildrenLabel?: string;
+    itemToString?: (item: T) => string;
+    revealSelected?: boolean | T | T[];
+};
+export type CollectionHookProps<T> = {
+    children?: ReactNode;
+    id: string;
+    label?: string;
+    source?: ReadonlyArray<T>;
+    options?: CollectionOptions<T>;
+};
+export type CollectionHookResult<T> = {
+    /** set expanded to false for target */
+    collapseGroupItem: (item: CollectionItem<T>) => void;
+    /** data items from the collection to be rendered */
+    data: CollectionItem<T>[];
+    /** set expanded to true for target */
+    expandGroupItem: (item: CollectionItem<T>) => void;
+    setFilterPattern: (pattern: undefined | string) => void;
+    indexOfItemById: (id: string) => number;
+    itemById: (id: string) => T | never;
+    itemToCollectionItem: (item: T) => CollectionItem<T> | CollectionItem<T>[] | null | undefined;
+    itemToCollectionItemId: (item?: T | T[]) => string[] | undefined;
+    stringToCollectionItem: (item: string | null | undefined) => CollectionItem<T> | null | CollectionItem<T>[] | undefined;
+    toCollectionItem: (item: T) => CollectionItem<T>;
+    itemToId: (item: T) => string;
+};

package/types/common-hooks/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./collectionProvider";
+export * from "./collectionTypes";
+export * from "./itemToString";
+export * from "./useCollectionItems";
+export * from "./useControlled";
+export * from "./use-resize-observer";
+export * from "./navigationTypes";
+export * from "./selectionTypes";
+export * from "./useStateRef";

package/types/common-hooks/isPlainObject.d.ts

@@ -0,0 +1 @@
+export declare const isPlainObject: (obj: unknown) => boolean;

package/types/common-hooks/itemToString.d.ts

@@ -0,0 +1,2 @@
+export type ItemToStringFunction = (item: any) => string;
+export declare function itemToString(item: unknown): string;

package/types/common-hooks/navigationTypes.d.ts

@@ -0,0 +1,36 @@
+import { FocusEvent, KeyboardEvent, RefObject } from "react";
+export interface NavigationProps {
+    cycleFocus?: boolean;
+    defaultHighlightedIndex?: number;
+    disableHighlightOnFocus?: boolean;
+    focusOnHighlight?: boolean;
+    focusVisible?: number;
+    highlightedIndex?: number;
+    itemCount: number;
+    onHighlight?: (idx: number) => void;
+    onKeyboardNavigation?: (evt: KeyboardEvent, idx: number) => void;
+    restoreLastFocus?: boolean;
+    viewportItemCount: number;
+}
+export interface NavigationHookProps extends NavigationProps {
+    containerRef: RefObject<HTMLElement>;
+    label?: string;
+    selected?: string[];
+}
+export interface KeyboardHookContainerProps {
+    onBlur: (evt: FocusEvent) => void;
+    onFocus: (evt: FocusEvent) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    onMouseDownCapture: () => void;
+    onMouseMove: () => void;
+    onMouseLeave: () => void;
+}
+export interface NavigationHookResult {
+    focusVisible: number;
+    controlledHighlighting: boolean;
+    highlightedIndex: number;
+    setHighlightedIndex: (idx: number) => void;
+    keyboardNavigation: RefObject<boolean>;
+    containerProps: KeyboardHookContainerProps;
+    setIgnoreFocus: (ignoreFocus: boolean) => void;
+}

package/types/common-hooks/selectionTypes.d.ts

@@ -0,0 +1,70 @@
+import { MouseEventHandler, RefObject, SyntheticEvent } from "react";
+export type SelectionDisallowed = "none";
+export type SingleSelectionStrategy = "default" | "deselectable";
+export type MultiSelectionStrategy = "multiple" | "extended" | "extended-multi-range";
+/**
+ * SpecialKeyMultiple works as deselectable unless a special key
+ * (default SHIFT) is also pressed, then it allows multiple selection.
+ * Useful for column sorting, filters etc
+ */
+export type SpecialKeyMultipleSelection = "multiple-special-key";
+export type SelectionStrategy = SelectionDisallowed | SingleSelectionStrategy | MultiSelectionStrategy;
+export declare const isSingleSelection: (s?: SelectionStrategy) => s is SingleSelectionStrategy;
+export declare const isMultiSelection: (s?: SelectionStrategy) => s is MultiSelectionStrategy;
+export type SelectHandler<Item = string> = (event: SyntheticEvent, selectedItem: Item) => void;
+export declare const selectionIsDisallowed: (selection?: SelectionStrategy | SpecialKeyMultipleSelection) => selection is "none";
+export declare const allowMultipleSelection: (selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection, specialKey?: boolean) => boolean;
+export declare const deselectionIsAllowed: (selection?: SelectionStrategy | SpecialKeyMultipleSelection) => selection is "deselectable" | MultiSelectionStrategy;
+export declare const hasSelection: <Item = unknown>(selected?: Item[] | undefined) => boolean;
+export declare const getFirstSelectedItem: <Item = unknown>(selected: Item[]) => Item;
+interface SelectionProps {
+    defaultSelected?: string[];
+    onSelect?: SelectHandler;
+    onSelectionChange?: MultiSelectionHandler;
+    selected?: string[];
+    selectionStrategy?: SelectionStrategy;
+}
+export interface ListHandlers {
+    onClick?: (event: React.MouseEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
+    onMouseMove?: (event: React.MouseEvent) => void;
+}
+export interface SelectionHookProps extends SelectionProps {
+    containerRef: RefObject<HTMLElement>;
+    disableSelection?: boolean;
+    highlightedIndex: number;
+    itemQuery: string;
+    label?: string;
+    onClick?: MouseEventHandler;
+    selectionKeys?: string[];
+    tabToSelect?: boolean;
+}
+export interface SelectionHookResult {
+    listHandlers: ListHandlers;
+    selected: string[];
+    setSelected: (selected: string[]) => void;
+}
+/**
+ * evt is only null in the special case of a selection fired from a multi-select
+ * host on tab or selection based on freeform text in combobox
+ */
+export type MultiSelectionHandler<Item = string> = (event: SyntheticEvent | null, selected: Item[]) => void;
+/**
+ * evt is only null in the special case of freeform text in combobox
+ */
+export type SingleSelectionHandler<Item = string> = (event: SyntheticEvent | null, selected: Item) => void;
+export type SelectionType<I, S extends SelectionStrategy> = S extends MultiSelectionStrategy ? I[] : I | null;
+export interface ComponentSelectionProps<Item = string, S extends SelectionStrategy = "default"> {
+    defaultSelected?: S extends MultiSelectionStrategy ? Item[] : Item;
+    onSelect?: SelectHandler<Item>;
+    onSelectionChange?: S extends MultiSelectionStrategy ? MultiSelectionHandler<Item> : SingleSelectionHandler<Item>;
+    selected?: SelectionType<Item, S>;
+    selectionStrategy?: S;
+    /**
+     * The keyboard keys used to effect selection, defaults to SPACE and ENTER
+     * TODO maybe this belongs on the SelectionProps interface ?
+     */
+    selectionKeys?: string[];
+}
+export {};

package/types/common-hooks/use-resize-observer.d.ts

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

package/types/common-hooks/useCollectionItems.d.ts

@@ -0,0 +1,2 @@
+import { CollectionHookProps, CollectionHookResult } from "./collectionTypes";
+export declare const useCollectionItems: <Item>({ children, id: idRoot, options, source, }: CollectionHookProps<Item>) => CollectionHookResult<Item>;

package/types/common-hooks/useControlled.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from "react";
+export interface UseControlledProps<T> {
+    /**
+     * Holds the component value when it's controlled.
+     */
+    controlled?: T;
+    /**
+     * The default value when uncontrolled.
+     */
+    default: T;
+    /**
+     * The component name displayed in warnings.
+     */
+    name: string;
+    /**
+     * The name of the state variable displayed in warnings.
+     */
+    state?: string;
+}
+/**
+ * Copied from MUI (v5) useControlled hook with one additional returned value
+ * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js
+ */
+export declare function useControlled<S>({ controlled, default: defaultProp, name, state, }: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean];

package/types/common-hooks/useSelection.d.ts

@@ -0,0 +1,8 @@
+import { SelectionHookProps, SelectionHookResult } from "./selectionTypes";
+export declare const CHECKBOX = "checkbox";
+export declare const GROUP_SELECTION_NONE = "none";
+export declare const GROUP_SELECTION_SINGLE = "single";
+export declare const GROUP_SELECTION_CASCADE = "cascade";
+export type GroupSelectionMode = "none" | "single" | "cascade";
+export declare const groupSelectionEnabled: (groupSelection: GroupSelectionMode) => boolean;
+export declare const useSelection: ({ containerRef, defaultSelected, disableSelection, highlightedIndex, itemQuery, onClick, onSelect, onSelectionChange, selected: selectedProp, selectionStrategy, selectionKeys, tabToSelect, }: SelectionHookProps) => SelectionHookResult;

package/types/common-hooks/useStateRef.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
+export declare const useStateRef: <T = string>(initialValue: T) => [MutableRefObject<T>, Dispatch<SetStateAction<T>>];

package/types/cycle-state-button/CycleStateButton.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from "@salt-ds/core";
+import type { CommitResponse } from "@vuu-ui/vuu-table-types";
+import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { SyntheticEvent } from "react";
+export type CycleStateCommitHandler = (evt: SyntheticEvent, value: VuuRowDataItemType) => CommitResponse;
+export interface CycleStateButtonProps extends Omit<ButtonProps, "onChange"> {
+    onChange?: (value: VuuRowDataItemType) => void;
+    onCommit?: CycleStateCommitHandler;
+    values: string[];
+    value: string;
+}
+export declare const CycleStateButton: import("react").ForwardRefExoticComponent<CycleStateButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/cycle-state-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./CycleStateButton";

package/types/date-input/DateInput.d.ts

@@ -0,0 +1,12 @@
+import { DateValue } from "@internationalized/date";
+import { HTMLAttributes } from "react";
+import { CalendarProps } from "../calendar/Calendar";
+export interface DateInputProps extends Pick<CalendarProps, "hideOutOfRangeDates" | "hideYearDropdown">, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    inputProps?: Partial<HTMLAttributes<HTMLInputElement>>;
+    onChange: (selected: DateValue, source: "input" | "calendar") => void;
+    selectedDate: DateValue | undefined;
+    closeOnSelection?: boolean;
+    onBlur?: () => void;
+    className?: string;
+}
+export declare const DateInput: ({ inputProps, selectedDate, onChange, onBlur, className, ...htmlAttributes }: DateInputProps) => JSX.Element;

package/types/date-input/DateRangeInput.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import { CalendarProps, RangeSelectionValueType } from "../calendar";
+import "./DateInput.css";
+export interface DateRangeInputProps extends Pick<CalendarProps, "hideOutOfRangeDates" | "hideYearDropdown">, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    onChange: (selectedDateRange: RangeSelectionValueType) => void;
+    selectedDateRange: RangeSelectionValueType | undefined;
+    closeOnSelection?: boolean;
+    onBlur?: () => void;
+    className?: string;
+}
+export declare const DateRangeInput: ({ selectedDateRange, onChange, className, onBlur, }: DateRangeInputProps) => JSX.Element;

package/types/date-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DateInput";
+export * from "./DateRangeInput";

package/types/date-input/types.d.ts

@@ -0,0 +1,16 @@
+import { DateValue } from "@internationalized/date";
+import { CalendarProps } from "../calendar/Calendar";
+import { RangeSelectionValueType } from "../calendar";
+import { HTMLAttributes } from "react";
+export type PickerSelectionType = DateValue | RangeSelectionValueType;
+export interface BaseDatePickerProps<T = PickerSelectionType> extends Pick<CalendarProps, "hideOutOfRangeDates" | "hideYearDropdown">, HTMLAttributes<HTMLDivElement> {
+    onSelectedDateChange: (selected: T) => void;
+    selectedDate: T | undefined;
+    closeOnSelection?: boolean;
+    onBlur?: () => void;
+    className?: string;
+}
+export interface BaseDatePickerDropdownProps<T = PickerSelectionType> extends BaseDatePickerProps<T> {
+    visibleMonth: DateValue | undefined;
+    onVisibleMonthChange: (d: DateValue) => void;
+}

package/types/date-input/useBaseDatePickerDropdown.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DateValue } from "@internationalized/date";
+import { PickerSelectionType } from "./types";
+import { BaseDatePickerDropdownProps } from "./types";
+type Props<T extends PickerSelectionType> = Pick<BaseDatePickerDropdownProps<T>, "onSelectedDateChange" | "onVisibleMonthChange"> & {
+    shouldCloseOnSelectionChange: (v: T) => boolean;
+};
+export declare function useBaseDatePickerDropdown<T extends PickerSelectionType>({ onVisibleMonthChange, onSelectedDateChange, shouldCloseOnSelectionChange, }: Props<T>): {
+    isOpen: boolean;
+    handleOpenChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    triggererRef: import("react").RefObject<HTMLButtonElement>;
+    handleVisibleMonthChange: (_: React.SyntheticEvent, d: DateValue) => void;
+    handleDateSelection: (_: React.SyntheticEvent, d: T) => void;
+};
+export {};

package/types/date-input/useDatePicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DatePickerHookProps {
+    onBlur?: () => void;
+}
+export declare function useDatePicker({ onBlur }: DatePickerHookProps): {
+    handleOnBlur: import("react").FocusEventHandler<HTMLDivElement>;
+};

package/types/date-popup/DatePopup.d.ts

@@ -0,0 +1,12 @@
+import { DateValue } from "@internationalized/date";
+import { HTMLAttributes } from "react";
+import { CalendarProps } from "../calendar";
+import { DropdownCloseHandler } from "../dropdown";
+export interface DatePopupProps extends Pick<CalendarProps, "selectionVariant">, Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onKeyDown"> {
+    "data-embedded"?: boolean;
+    selectedDate?: DateValue;
+    onPopupClose?: DropdownCloseHandler;
+    onPopupOpen?: () => void;
+    onChange: (date: DateValue) => void;
+}
+export declare const DatePopup: import("react").ForwardRefExoticComponent<DatePopupProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/date-popup/index.d.ts

@@ -0,0 +1 @@
+export * from "./DatePopup";

package/types/date-popup/useDatePopup.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { OpenChangeHandler } from "../dropdown";
+import { DateValue } from "@internationalized/date";
+import { DatePopupProps } from "./DatePopup";
+type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+export interface DatePopupHookProps extends Pick<DatePopupProps, "onPopupClose" | "onPopupOpen">, WithRequired<DatePopupProps, "onChange" | "selectedDate"> {
+}
+export declare const useDatePopup: ({ onChange, onPopupClose, onPopupOpen, selectedDate, }: DatePopupHookProps) => {
+    calendarRef: import("react").RefObject<HTMLDivElement>;
+    date: DateValue;
+    handleOpenChange: OpenChangeHandler;
+    isOpen: boolean;
+    onSelectedDateChange: (e: any, date: any) => void;
+    onVisibleMonthChange: (e: any, date: any) => void;
+    triggererRef: import("react").RefObject<HTMLButtonElement>;
+    visibleMonth: DateValue;
+};
+export {};

package/types/drag-drop/DragDropProvider.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import { DragDropState } from "./DragDropState";
+import { GlobalDropHandler, ResumeDragHandler } from "./useGlobalDragDrop";
+export type DragOutHandler = (id: string, dragDropState: DragDropState) => boolean;
+export type DragDropRegistrationFn = (id: string, resumeDrag: ResumeDragHandler | false, onDrop?: GlobalDropHandler) => void;
+export type EndOfDragOperationHandler = (id: string) => void;
+export interface DragDropContextProps {
+    dragSources?: Map<string, string[]>;
+    dropTargets?: Map<string, string[]>;
+    onDragOut?: DragOutHandler;
+    onEndOfDragOperation?: EndOfDragOperationHandler;
+    registerDragDropParty: DragDropRegistrationFn;
+}
+export type DragSources = {
+    [key: string]: {
+        dropTargets: string | string[];
+        payloadType?: string;
+    };
+};
+export interface DragDropProviderProps {
+    children: ReactNode;
+    dragSources: DragSources;
+}
+export type MeasuredTarget = {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+};
+export declare const DragDropProvider: ({ children, dragSources: dragSourcesProp, }: DragDropProviderProps) => JSX.Element;
+export interface DragDropProviderResult {
+    isDragSource?: boolean;
+    isDropTarget?: boolean;
+    onDragOut?: DragOutHandler;
+    onEndOfDragOperation?: (id: string) => void;
+    register: DragDropRegistrationFn;
+}
+export declare const useDragDropProvider: (id?: string) => DragDropProviderResult;

package/types/drag-drop/DragDropState.d.ts

@@ -0,0 +1,15 @@
+import { MouseOffset, MousePosition } from "./dragDropTypes";
+export declare class DragDropState {
+    /** Distance between start (top | left) of dragged element and point where user pressed to drag */
+    readonly mouseOffset: MouseOffset;
+    /** Element where the initial mousedown triggered the drag operation */
+    readonly initialDragElement: HTMLElement;
+    /** Element being dragged, (initial element cloned and rendered in portal). */
+    draggableElement: HTMLElement | null;
+    payload: unknown;
+    constructor(mousePosition: MousePosition, dragElement: HTMLElement);
+    /** Used to capture a ref to the Draggable JSX.Element */
+    setDraggable: (el: HTMLElement | null) => void;
+    setPayload(payload: unknown): void;
+    private getMouseOffset;
+}

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

@@ -0,0 +1,13 @@
+import { CSSProperties, HTMLAttributes, MutableRefObject, TransitionEventHandler } from "react";
+export interface DraggableProps extends HTMLAttributes<HTMLDivElement> {
+    wrapperClassName: string;
+    element: HTMLElement;
+    onDropped?: () => void;
+    onTransitionEnd?: TransitionEventHandler;
+    scale?: number;
+    style: CSSProperties;
+}
+export declare const Draggable: import("react").ForwardRefExoticComponent<DraggableProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const createDragSpacer: (transitioning?: MutableRefObject<boolean>) => HTMLElement;
+export declare const createDropIndicatorPosition: () => HTMLElement;
+export declare const createDropIndicator: (transitioning?: MutableRefObject<boolean>) => HTMLElement;

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

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

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

@@ -0,0 +1,100 @@
+import { MouseEventHandler, RefObject } from "react";
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { DragDropState } from "./DragDropState";
+export type ViewportRange = {
+    atEnd: boolean;
+    atStart: boolean;
+    from: number;
+    to: number;
+};
+type dimension = "width" | "height" | "scrollWidth" | "scrollHeight";
+type dimensions = {
+    size: dimension;
+    depth: dimension;
+    scrollDepth: dimension;
+};
+export type dimensionsType = {
+    horizontal: dimensions;
+    vertical: dimensions;
+};
+export type dragStrategy = "drop-indicator" | "natural-movement" | "drag-copy" | "drop-only";
+export type Direction = "fwd" | "bwd";
+export declare const FWD: Direction;
+export declare const BWD: Direction;
+export interface MousePosition {
+    clientX: number;
+    clientY: number;
+}
+export interface MouseOffset {
+    x: number;
+    y: number;
+}
+export type Rect = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export interface DragHookResult {
+    draggable?: JSX.Element;
+    dropIndicator?: JSX.Element;
+    draggedItemIndex?: number;
+    isDragging: boolean;
+    isScrolling: RefObject<boolean>;
+    onMouseDown?: MouseEventHandler;
+    revealOverflowedItems?: boolean;
+}
+export interface InternalDragHookResult extends Omit<DragHookResult, "isDragging" | "isScrolling"> {
+    beginDrag: (dragElement: HTMLElement) => void;
+    drag: (dragPos: number, mouseMoveDirection: "fwd" | "bwd") => void;
+    drop: () => DropOptions;
+    handleScrollStart?: (scrollDirection: "fwd" | "bwd") => void;
+    handleScrollStop?: (scrollDirection: "fwd" | "bwd", _scrollPos: number, atEnd: boolean) => void;
+    /**
+     * Draggable item has been dragged out of container. Remove any local drop
+     * indicators. Dragged element itself should not yet be removed from DOM.
+     */
+    releaseDrag?: () => void;
+}
+export interface DropOptions {
+    fromIndex: number;
+    toIndex: number;
+    isExternal?: boolean;
+    payload?: unknown;
+}
+export type DragStartHandler = (dragDropState: DragDropState) => void;
+export type DropHandler = (options: DropOptions) => void;
+export interface DragDropProps {
+    allowDragDrop?: boolean | dragStrategy;
+    containerRef: RefObject<HTMLElement>;
+    /** this is the className that will be assigned during drag to the dragged element  */
+    draggableClassName: string;
+    extendedDropZone?: boolean;
+    getDragPayload?: (dragElement: HTMLElement) => unknown;
+    id?: string;
+    isDragSource?: boolean;
+    isDropTarget?: boolean;
+    itemQuery?: string;
+    onDragStart?: DragStartHandler;
+    onDrop: DropHandler;
+    onDropSettle?: (toIndex: number) => void;
+    orientation: orientationType;
+    /**
+     * The scrolling container does not necessarily have to be a
+     * descendant of the container, it may be an ancestor element;
+     */
+    scrollingContainerRef?: RefObject<HTMLElement>;
+    viewportRange?: ViewportRange;
+}
+export type DragDropHook = (props: DragDropProps) => DragHookResult;
+export interface InternalDragDropProps extends Omit<DragDropProps, "draggableClassName" | "id" | "onDrop"> {
+    isDragSource?: boolean;
+    isDropTarget?: boolean;
+    selected?: unknown;
+}
+export type DragDropContext = {
+    dragElement: HTMLElement;
+    dragPayload: unknown;
+    mouseOffset: MouseOffset;
+};
+export {};