@vuu-ui/vuu-ui-controls 0.8.8-debug → 0.8.9-debug

package/types/vuu-popups/src/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export * from "./useTooltip";

package/types/vuu-popups/src/tooltip/useAnchoredPosition.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+export type TooltipPlacement = "above" | "right" | "below" | "left";
+export interface AnchoredPositionHookProps {
+    anchorElement: RefObject<HTMLElement>;
+    offsetLeft?: number;
+    offsetTop?: number;
+    placement: TooltipPlacement;
+}
+export declare const useAnchoredPosition: ({ anchorElement, offsetLeft, offsetTop, placement, }: AnchoredPositionHookProps) => {
+    left: number;
+    top: number;
+} | undefined;

package/types/vuu-popups/src/tooltip/useTooltip.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent, ReactNode } from "react";
+import { TooltipProps } from "./Tooltip";
+import { TooltipPlacement } from "./useAnchoredPosition";
+export interface TooltipHookProps {
+    id: string;
+    placement?: TooltipPlacement;
+    tooltipContent: ReactNode;
+}
+export declare const useTooltip: ({ id: idProp, placement, tooltipContent, }: TooltipHookProps) => {
+    anchorProps: {
+        "aria-describedby": string;
+        onMouseEnter: (evt: MouseEvent) => void;
+        onMouseLeave: () => void;
+    };
+    tooltipProps: TooltipProps | undefined;
+};

package/types/vuu-ui-controls/src/combo-box/ComboBox.d.ts

@@ -0,0 +1,18 @@
+import { InputProps } from "@salt-ds/core";
+import { ForwardedRef, ReactElement } from "react";
+import { SelectionProps, SelectionStrategy } from "../common-hooks";
+import { DropdownBaseProps } from "../dropdown";
+import { ListProps } from "../list";
+export interface ComboBoxProps<Item = string, Selection extends SelectionStrategy = "default"> extends Omit<DropdownBaseProps, "triggerComponent" | "onBlur" | "onChange" | "onFocus">, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Pick<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source" | "width">, Pick<SelectionProps<Item, Selection>, "onSelectionChange" | "selectionStrategy"> {
+    InputProps?: InputProps;
+    ListProps?: Omit<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source">;
+    allowFreeText?: boolean;
+    defaultValue?: string;
+    getFilterRegex?: (inputValue: string) => RegExp;
+    initialHighlightedIndex?: number;
+    stringToItem?: (value?: string) => Item | null | undefined;
+    value?: string;
+}
+export declare const ComboBox: <Item, Selection_1 extends SelectionStrategy = "default">(props: ComboBoxProps<Item, Selection_1> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReactElement<ComboBoxProps<Item, Selection_1>, string | import("react").JSXElementConstructor<any>>;

package/types/vuu-ui-controls/src/combo-box/index.d.ts

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

package/types/vuu-ui-controls/src/combo-box/useCombobox.d.ts

@@ -0,0 +1,22 @@
+import { InputProps } from "@salt-ds/core";
+import { RefObject } from "react";
+import { SelectionStrategy } from "../common-hooks";
+import { DropdownHookProps, DropdownHookResult } from "../dropdown";
+import { ListHookProps, ListHookResult } from "../list";
+export interface ComboboxHookProps<Item, Strategy extends SelectionStrategy> extends Partial<Omit<DropdownHookProps, "id" | "onKeyDown">>, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Omit<ListHookProps<Item, Strategy>, "containerRef" | "defaultSelected" | "selected" | "onSelect"> {
+    InputProps?: InputProps;
+    allowFreeText?: boolean;
+    ariaLabel?: string;
+    defaultValue?: string;
+    id: string;
+    initialHighlightedIndex?: number;
+    itemToString?: (item: Item) => string;
+    listRef: RefObject<HTMLDivElement>;
+    stringToItem?: (value?: string) => Item | null | undefined;
+    value?: string;
+}
+export interface ComboboxHookResult<Item, Selection extends SelectionStrategy> extends Pick<ListHookResult<Item, Selection>, "focusVisible" | "highlightedIndex" | "listControlProps" | "listHandlers" | "selected">, Partial<DropdownHookResult> {
+    inputProps: InputProps;
+    onOpenChange: (isOpen: boolean) => void;
+}
+export declare const useCombobox: <Item, Selection_1 extends SelectionStrategy = "default">({ allowFreeText, ariaLabel, collectionHook, defaultIsOpen, defaultValue, onBlur, onFocus, onChange, onSelect, id, initialHighlightedIndex, isOpen: isOpenProp, itemToString, listRef, onOpenChange, onSelectionChange, selectionStrategy, stringToItem, value: valueProp, InputProps: inputProps, }: ComboboxHookProps<Item, Selection_1>) => ComboboxHookResult<Item, Selection_1>;

package/types/{list → vuu-ui-controls/src}/common-hooks/collectionTypes.d.ts

@@ -50,6 +50,7 @@ export type CollectionHookResult<T> = {
     setFilterPattern: (pattern: undefined | string) => void;
     itemById: (id: string) => T | never;
     itemToCollectionItem: <Selection extends SelectionStrategy, U extends T | T[] | null | undefined>(item: U) => Selection extends SingleSelectionStrategy ? CollectionItem<T> | null : CollectionItem<T>[];
+    itemToCollectionItemId: <Selection extends SelectionStrategy, U extends T | T[] | null | undefined>(item: U) => (Selection extends SingleSelectionStrategy ? string | null : string[]) | undefined;
     stringToCollectionItem: <Selection extends SelectionStrategy>(item: string | null | undefined) => Selection extends SingleSelectionStrategy ? CollectionItem<T> | null : CollectionItem<T>[];
     toCollectionItem: (item: T) => CollectionItem<T>;
     itemToId: (item: T) => string;

package/types/vuu-ui-controls/src/common-hooks/index.d.ts

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

package/types/{list → vuu-ui-controls/src}/common-hooks/navigationTypes.d.ts

@@ -9,16 +9,18 @@ export interface NavigationProps<Item = unknown> {
     focusVisible?: number;
     highlightedIndex?: number;
     indexPositions: CollectionItem<Item>[];
+    itemCount: number;
     onHighlight?: (idx: number) => void;
     onKeyboardNavigation?: (evt: KeyboardEvent, idx: number) => void;
     restoreLastFocus?: boolean;
+    viewportItemCount: number;
 }
 export interface NavigationHookProps<Item, Selection extends SelectionStrategy> extends NavigationProps<Item> {
     containerRef: RefObject<HTMLElement>;
     label?: string;
-    selected?: Selection extends SingleSelectionStrategy ? CollectionItem<Item> | null : CollectionItem<Item>[];
+    selected?: Selection extends SingleSelectionStrategy ? string | null : string[];
 }
-export interface KeyboardHookListProps {
+export interface KeyboardHookContainerProps {
     onBlur: (evt: FocusEvent) => void;
     onFocus: (evt: FocusEvent) => void;
     onKeyDown: (evt: KeyboardEvent) => void;
@@ -32,6 +34,6 @@ export interface NavigationHookResult {
     highlightedIndex: number;
     setHighlightedIndex: (idx: number) => void;
     keyboardNavigation: RefObject<boolean>;
-    listProps: KeyboardHookListProps;
+    containerProps: KeyboardHookContainerProps;
     setIgnoreFocus: (ignoreFocus: boolean) => void;
 }

package/types/{list → vuu-ui-controls/src}/common-hooks/selectionTypes.d.ts

@@ -1,17 +1,20 @@
-import { SyntheticEvent } from "react";
-import { CollectionItem } from "./collectionTypes";
-export declare const SINGLE = "default";
-export declare const MULTIPLE = "multiple";
-export declare const EXTENDED = "extended";
-export declare const DESELECTABLE = "deselectable";
+import { 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 type selectedType<Item, Selection extends SelectionStrategy> = Selection extends MultiSelectionStrategy ? Item[] : Item | null;
 export type SelectHandler<Item = string> = (event: SyntheticEvent, selectedItem: Item) => void;
 export type SelectionChangeHandler<Item = string, Selection extends SelectionStrategy = "default"> = (event: SyntheticEvent, selected: Selection extends SingleSelectionStrategy ? Item | null : Item[]) => void;
-export declare const selectionIsDisallowed: (selection?: SelectionStrategy) => selection is "none";
+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 | Item[] | null) => selected is Item | Item[];
 export declare const getFirstSelectedItem: <Item = unknown>(selected: Item | Item[] | null) => Item | null;
 export interface SelectionProps<Item, Selection extends SelectionStrategy = "default"> {
@@ -27,16 +30,17 @@ export interface ListHandlers {
     onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
     onMouseMove?: (event: React.MouseEvent) => void;
 }
-export interface SelectionHookProps<Item, Selection extends SelectionStrategy = "default"> extends SelectionProps<CollectionItem<Item>, Selection> {
+export interface SelectionHookProps<Selection extends SelectionStrategy = "default"> extends SelectionProps<string, Selection> {
+    containerRef: RefObject<HTMLElement>;
     disableSelection?: boolean;
     highlightedIdx: number;
-    indexPositions: CollectionItem<Item>[];
+    itemQuery: string;
     label?: string;
     selectionKeys?: string[];
     tabToSelect?: boolean;
 }
-export interface SelectionHookResult<Item, Selection extends SelectionStrategy = "default"> {
+export interface SelectionHookResult<Selection extends SelectionStrategy = "default"> {
     listHandlers: ListHandlers;
-    selected: Selection extends SingleSelectionStrategy ? CollectionItem<Item> | null : CollectionItem<Item>[];
-    setSelected: (selected: Selection extends SingleSelectionStrategy ? CollectionItem<Item> | null : CollectionItem<Item>[]) => void;
+    selected: Selection extends SingleSelectionStrategy ? string | null : string[];
+    setSelected: (selected: Selection extends SingleSelectionStrategy ? string | null : string[]) => void;
 }

package/types/{list → vuu-ui-controls/src}/common-hooks/useCollectionItems.d.ts

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

package/types/vuu-ui-controls/src/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/{list → vuu-ui-controls/src}/common-hooks/useSelection.d.ts

@@ -5,4 +5,4 @@ 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: <Item, Selection_1 extends SelectionStrategy = "default">({ defaultSelected, disableSelection, highlightedIdx, indexPositions, onSelect, onSelectionChange, selected: selectedProp, selectionStrategy, selectionKeys, tabToSelect, }: SelectionHookProps<Item, Selection_1>) => SelectionHookResult<Item, Selection_1>;
+export declare const useSelection: <Selection_1 extends SelectionStrategy = "default">({ containerRef, defaultSelected, disableSelection, highlightedIdx, itemQuery, onSelect, onSelectionChange, selected: selectedProp, selectionStrategy, selectionKeys, tabToSelect, }: SelectionHookProps<Selection_1>) => SelectionHookResult<Selection_1>;

package/types/vuu-ui-controls/src/drag-drop/DragDropProvider.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { DragDropState } from "./DragDropState";
+import { ResumeDragHandler } from "./useGlobalDragDrop";
+export type DragOutHandler = (id: string, dragDropState: DragDropState) => boolean;
+export type DragDropRegistrationFn = (id: string, resumeDrag?: ResumeDragHandler) => 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[];
+    };
+};
+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/vuu-ui-controls/src/drag-drop/DragDropState.d.ts

@@ -0,0 +1,15 @@
+import { MouseOffset } from "./dragDropTypesNext";
+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(evt: MouseEvent, 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 → vuu-ui-controls/src/drag-drop}/dragDropTypesNext.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler, RefObject } from "react";
 import { orientationType } from "@vuu-ui/vuu-utils";
+import { DragDropState } from "./DragDropState";
 export type ViewportRange = {
     atEnd: boolean;
     atStart: boolean;
@@ -40,22 +41,36 @@ export interface DragHookResult {
     revealOverflowedItems: boolean;
 }
 export interface InternalDragHookResult extends Omit<DragHookResult, "isDragging" | "isScrolling"> {
-    beginDrag: (evt: MouseEvent) => void;
+    beginDrag: (dragElement: HTMLElement) => void;
     drag: (dragPos: number, mouseMoveDirection: "fwd" | "bwd") => void;
     drop: () => void;
     handleScrollStart: () => 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 = (fromIndex: number, toIndex: number, options: DropOptions) => void;
 export interface DragDropProps {
     allowDragDrop?: boolean | dragStrategy;
     /** 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;
-    onDragStart?: () => void;
-    onDrop: (fromIndex: number, toIndex: number) => void;
+    onDragStart?: DragStartHandler;
+    onDrop: DropHandler;
     onDropSettle?: (toIndex: number) => void;
     orientation: orientationType;
     containerRef: RefObject<HTMLElement>;
@@ -63,10 +78,14 @@ export interface DragDropProps {
     viewportRange?: ViewportRange;
 }
 export type DragDropHook = (props: DragDropProps) => DragHookResult;
-export interface InternalDragDropProps extends Omit<DragDropProps, "draggableClassName"> {
-    draggableRef: RefObject<HTMLDivElement>;
+export interface InternalDragDropProps extends Omit<DragDropProps, "draggableClassName" | "id"> {
     isDragSource?: boolean;
     isDropTarget?: boolean;
     selected?: unknown;
 }
+export type DragDropContext = {
+    dragElement: HTMLElement;
+    dragPayload: unknown;
+    mouseOffset: MouseOffset;
+};
 export {};

package/types/{drag-drop → vuu-ui-controls/src/drag-drop}/drop-target-utils.d.ts

@@ -9,11 +9,11 @@ export type MeasuredDropTarget = {
       is dropped here, this will be the destination drop position.
     */
     currentIndex: number;
-    dataIndex?: number;
     element: HTMLElement;
     id: string;
     index: number;
     isDraggedItem: boolean;
+    isExternal?: boolean;
     isLast?: boolean;
     isOverflowIndicator?: boolean;
     start: number;
@@ -34,29 +34,29 @@ export declare const measureElementSizeAndPosition: (element: HTMLElement, dimen
 export declare const dimensions: (orientation: orientationType) => {
     CLIENT_POS: "clientX" | "clientY";
     CLIENT_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
-    CONTRA: "x" | "y" | "width" | "left" | "right" | "top" | "bottom" | "height";
+    CONTRA: "width" | "height" | "x" | "y" | "left" | "right" | "bottom" | "top";
     CONTRA_CLIENT_POS: "clientX" | "clientY";
     CONTRA_END: "width" | "height";
     CONTRA_POS: ElementPosition;
     DIMENSION: "width" | "height";
-    END: "x" | "y" | "width" | "left" | "right" | "top" | "bottom" | "height";
+    END: "width" | "height" | "x" | "y" | "left" | "right" | "bottom" | "top";
     POS: ElementPosition;
     SCROLL_POS: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
     SCROLL_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
-    START: "x" | "y" | "width" | "left" | "right" | "top" | "bottom" | "height";
+    START: "width" | "height" | "x" | "y" | "left" | "right" | "bottom" | "top";
 } | {
     CLIENT_POS: "clientX" | "clientY";
     CLIENT_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
-    CONTRA: "x" | "y" | "width" | "left" | "right" | "top" | "bottom" | "height";
+    CONTRA: "width" | "height" | "x" | "y" | "left" | "right" | "bottom" | "top";
     CONTRA_CLIENT_POS: "clientX" | "clientY";
     CONTRA_END: "width" | "height";
     CONTRA_POS: ElementPosition;
     DIMENSION: "width" | "height";
-    END: "x" | "y" | "width" | "left" | "right" | "top" | "bottom" | "height";
+    END: "width" | "height" | "x" | "y" | "left" | "right" | "bottom" | "top";
     POS: ElementPosition;
     SCROLL_POS: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
     SCROLL_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
-    START: "x" | "y" | "width" | "left" | "right" | "top" | "bottom" | "height";
+    START: "width" | "height" | "x" | "y" | "left" | "right" | "bottom" | "top";
 };
 export declare const getItemById: (measuredItems: MeasuredDropTarget[], id: string) => MeasuredDropTarget | undefined;
 export declare const removeDraggedItem: (measuredItems: MeasuredDropTarget[], index: number) => void;
@@ -73,13 +73,12 @@ export declare const measureDropTargets: (container: HTMLElement, orientation: o
  */
 export declare const getIndexOfDraggedItem: (dropTargets: MeasuredDropTarget[], absoluteIndex?: boolean) => number;
 export declare const mutateDropTargetsSwitchDropTargetPosition: (dropTargets: MeasuredDropTarget[], direction: Direction) => void;
-export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, mouseMoveDirection: Direction) => MeasuredDropTarget;
+export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, draggedItemSize: number, mouseMoveDirection: Direction) => MeasuredDropTarget;
 /**
  * An item within a scrollable container might have a width or height greater than that of
  * the container. If we drag such an item, we don't want the draggable to be larger than
  * the container.
  */
 export declare function constrainRect(targetRect: Rect, constraintRect: Rect): Rect;
-export declare const moveItem: <T = unknown>(items: T[], fromIndex: number, toIndex: number) => T[];
 export declare const dropTargetsDebugString: (dropTargets: MeasuredDropTarget[]) => string;
 export {};

package/types/{drag-drop → vuu-ui-controls/src/drag-drop}/useDragDisplacers.d.ts

@@ -1,11 +1,12 @@
 import { MeasuredDropTarget } from "./drop-target-utils";
 import { Direction } from "./dragDropTypesNext";
+import { orientationType } from "packages/vuu-utils/src";
 export type DragDisplacersHookResult = {
     displaceItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => void;
     displaceLastItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => void;
-    clearSpacers: () => void;
+    clearSpacers: (useAnimation?: boolean) => void;
 };
-export type DragDisplacersHook = () => DragDisplacersHookResult;
+export type DragDisplacersHook = (orientation: orientationType) => DragDisplacersHookResult;
 /**
  * Manage a pair of displacer elements to smoothly display a moving gap between
  * list items of any kind. Designed to be used in a drag drop operation. The 'static'

package/types/vuu-ui-controls/src/drag-drop/useDragDropIndicator.d.ts

@@ -0,0 +1,2 @@
+import { InternalDragDropProps, InternalDragHookResult } from "./dragDropTypesNext";
+export declare const useDragDropIndicator: ({ onDrop, orientation, containerRef, itemQuery, selected, viewportRange, }: InternalDragDropProps) => InternalDragHookResult;

package/types/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovementNext.d.ts

@@ -0,0 +1,2 @@
+import { InternalDragDropProps, InternalDragHookResult } from "./dragDropTypesNext";
+export declare const useDragDropNaturalMovement: ({ onDrop, orientation, containerRef, itemQuery, selected, viewportRange, }: InternalDragDropProps) => InternalDragHookResult;

package/types/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MeasuredTarget } from "./DragDropProvider";
+import { DragDropState } from "./DragDropState";
+export type ResumeDragHandler = (dragDropState: DragDropState) => boolean;
+export declare const useGlobalDragDrop: ({ onDragOverDropTarget, }: {
+    onDragOverDropTarget: (dropTargetId: string, dragDropState: DragDropState) => boolean;
+}) => {
+    measuredDropTargetsRef: import("react").MutableRefObject<Record<string, MeasuredTarget> | undefined>;
+    resumeDrag: ResumeDragHandler;
+};

package/types/vuu-ui-controls/src/dropdown/Dropdown.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef, ReactElement } from "react";
+import { SelectionProps, SelectionStrategy } from "../common-hooks";
+import { ListProps } from "../list";
+import { DropdownBaseProps } from "./dropdownTypes";
+export interface DropdownProps<Item = string, Selection extends SelectionStrategy = "default"> extends DropdownBaseProps, Pick<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source" | "width">, SelectionProps<Item, Selection> {
+    ListProps?: Omit<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source">;
+}
+export declare const Dropdown: <Item, Selection_1 extends SelectionStrategy = "default">(props: DropdownProps<Item, Selection_1> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReactElement<DropdownProps<Item, Selection_1>, string | import("react").JSXElementConstructor<any>>;

package/types/vuu-ui-controls/src/dropdown/DropdownBase.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DropdownBaseProps } from "./dropdownTypes";
+import "./Dropdown.css";
+export type MaybeChildProps = {
+    className?: string;
+    id?: string;
+    role?: string;
+    width: number | string;
+};
+export declare const DropdownBase: import("react").ForwardRefExoticComponent<DropdownBaseProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/vuu-ui-controls/src/dropdown/DropdownButton.d.ts

@@ -0,0 +1,42 @@
+import { ButtonProps } from "@salt-ds/core";
+import { AriaAttributes } from "react";
+import "./DropdownButton.css";
+export interface DropdownButtonProps extends ButtonProps {
+    /**
+     * Replace the default Icon component
+     */
+    icon?: string;
+    /**
+     * Whether the dropdown button should hide role='option' via 'aria-hidden'
+     */
+    ariaHideOptionRole?: boolean;
+    /**
+     * If, `true`, the Dropdown button will occupy the full width of it's container
+     */
+    fullWidth?: boolean;
+    /**
+     * Is the dropdown list open
+     */
+    isOpen?: boolean;
+    /**
+     * Label for the dropdown button
+     */
+    label?: string;
+    /**
+     * Id for the label. This is needed for ARIA attributes.
+     */
+    labelId?: string;
+    /**
+     * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value
+     * **/
+    posInSet?: number;
+    /**
+     * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value
+     * **/
+    setSize?: number;
+    /**
+     *
+     * **/
+    labelAriaAttributes?: Pick<AriaAttributes, "aria-posinset" | "aria-setsize" | "aria-selected">;
+}
+export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/types/vuu-ui-controls/src/dropdown/dropdownTypes.d.ts

@@ -0,0 +1,45 @@
+import { PopupPlacement } from "packages/vuu-popups/src";
+import { HTMLAttributes, KeyboardEvent, ReactElement, RefObject } from "react";
+export type DropdownOpenKey = "Enter" | "ArrowDown" | " ";
+export interface DropdownBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    defaultIsOpen?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    isOpen?: boolean;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    openKeys?: DropdownOpenKey[];
+    onOpenChange?: (isOpen: boolean) => void;
+    openOnFocus?: boolean;
+    placement?: PopupPlacement;
+    popupWidth?: number;
+    triggerComponent?: JSX.Element;
+    width?: number | string;
+}
+export interface DropdownHookProps extends Pick<DropdownBaseProps, "defaultIsOpen" | "disabled" | "fullWidth" | "isOpen" | "onOpenChange" | "onKeyDown" | "openKeys" | "openOnFocus" | "popupWidth" | "width"> {
+    ariaLabelledBy?: string;
+    id: string;
+    popupComponent: ReactElement;
+    rootRef: RefObject<HTMLDivElement>;
+}
+export interface DropdownHookTriggerProps {
+    "aria-expanded"?: boolean;
+    "aria-labelledby"?: string;
+    "aria-owns"?: string;
+    id: string;
+    onClick?: (e: MouseEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    role: string;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    style?: any;
+}
+interface ComponentProps extends HTMLAttributes<HTMLElement> {
+    width?: number | string;
+}
+export interface DropdownHookResult {
+    componentProps: ComponentProps;
+    isOpen: boolean;
+    label: string;
+    popupComponentRef: React.Ref<HTMLElement>;
+    triggerProps: DropdownHookTriggerProps;
+}
+export {};

package/types/vuu-ui-controls/src/dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./DropdownBase";
+export * from "./DropdownButton";
+export * from "./Dropdown";
+export * from "./dropdownTypes";
+export * from "./useDropdownBase";

package/types/vuu-ui-controls/src/dropdown/useClickAway.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+export type ClickawayHook = (props: {
+    popperRef: RefObject<HTMLElement>;
+    rootRef: RefObject<HTMLElement>;
+    isOpen: boolean;
+    onClose: () => void;
+}) => void;
+export declare const useClickAway: ClickawayHook;

package/types/vuu-ui-controls/src/dropdown/useDropdown.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+import { ListHookProps, ListHookResult } from "../list";
+import { DropdownHookResult, DropdownHookProps } from "./dropdownTypes";
+import { SelectionStrategy } from "../common-hooks";
+export interface DropdownListHookProps<Item, Strategy extends SelectionStrategy> extends Partial<Omit<DropdownHookProps, "onKeyDown">>, Omit<ListHookProps<Item, Strategy>, "containerRef"> {
+    itemToString?: (item: Item) => string;
+    listRef: RefObject<HTMLDivElement>;
+}
+export interface DropdownListHookResult<Item, Selection extends SelectionStrategy> extends Partial<ListHookResult<Item, Selection>>, Partial<DropdownHookResult> {
+    onOpenChange: any;
+    triggerLabel?: string;
+}
+export declare const useDropdown: <Item, Selection_1 extends SelectionStrategy = "default">({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, listRef, onHighlight, onOpenChange, onSelectionChange, onSelect, selected, selectionStrategy, }: DropdownListHookProps<Item, Selection_1>) => DropdownListHookResult<Item, Selection_1>;

package/types/vuu-ui-controls/src/dropdown/useDropdownBase.d.ts

@@ -0,0 +1,2 @@
+import { DropdownHookProps, DropdownHookResult } from "./dropdownTypes";
+export declare const useDropdownBase: ({ defaultIsOpen, disabled, fullWidth: fullWidthProp, id, isOpen: isOpenProp, onOpenChange, onKeyDown: onKeyDownProp, openKeys, openOnFocus, popupComponent, popupWidth: popupWidthProp, rootRef, width, }: DropdownHookProps) => DropdownHookResult;

package/types/vuu-ui-controls/src/editable/editable-utils.d.ts

@@ -0,0 +1,4 @@
+import { EditValidationRule } from "@vuu-ui/vuu-datagrid-types";
+import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+export type ClientSideValidationChecker = (value: VuuRowDataItemType) => string | false | undefined;
+export declare const buildValidationChecker: (rules: EditValidationRule[]) => ClientSideValidationChecker;

package/types/vuu-ui-controls/src/editable/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./editable-utils";
+export * from "./useEditableText";

package/types/vuu-ui-controls/src/editable/useEditableText.d.ts

@@ -0,0 +1,16 @@
+import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
+import { FormEventHandler, KeyboardEvent } from "react";
+import { ClientSideValidationChecker } from "./editable-utils";
+export interface EditableTextHookProps<T extends VuuColumnDataType = VuuColumnDataType> {
+    clientSideEditValidationCheck?: ClientSideValidationChecker;
+    initialValue: T;
+    onCommit: (value: T) => boolean;
+}
+export declare const dispatchCommitEvent: (el: HTMLElement) => void;
+export declare const useEditableText: <T extends VuuColumnDataType = VuuColumnDataType>({ clientSideEditValidationCheck, initialValue, onCommit, }: EditableTextHookProps<T>) => {
+    onBlur: () => void;
+    onChange: FormEventHandler<Element>;
+    onKeyDown: (evt: KeyboardEvent<HTMLElement>) => void;
+    value: T;
+    warningMessage: string | undefined;
+};

package/types/vuu-ui-controls/src/expando-input/ExpandoInput.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InputProps } from "@salt-ds/core";
+import "./ExpandoInput.css";
+export declare const ExpandoInput: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;