@vuu-ui/vuu-ui-controls 0.8.22-debug → 0.8.23-debug

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

@@ -5,8 +5,9 @@ import { DropdownBaseProps } from "../dropdown";
 import { ListProps } from "../list";
 export interface ComboBoxProps<Item = string, S extends SelectionStrategy = "default"> extends Omit<DropdownBaseProps, "triggerComponent" | "onBlur" | "onChange" | "onFocus">, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Omit<ComponentSelectionProps<Item, S>, "onSelect">, Pick<ListProps<Item, S>, "ListItem" | "itemToString" | "source" | "width"> {
     InputProps?: InputProps;
-    ListProps?: Omit<ListProps<Item>, "ListItem" | "itemToString" | "source">;
+    ListProps?: Omit<ListProps<Item>, "ListItem" | "itemToString" | "source" | "onSelect" | "onSelectionChange">;
     allowBackspaceClearsSelection?: boolean;
+    allowEnterCommitsText?: boolean;
     allowFreeText?: boolean;
     defaultValue?: string;
     getFilterRegex?: (inputValue: string) => RegExp;
@@ -14,6 +15,7 @@ export interface ComboBoxProps<Item = string, S extends SelectionStrategy = "def
     itemsToString?: (items: Item[]) => string;
     onDeselect?: () => void;
     onSetSelectedText?: (text: string) => void;
+    onListItemSelect?: ListProps<Item, S>["onSelect"];
     disableFilter?: boolean;
     value?: string;
 }

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

@@ -1,20 +1,20 @@
 import { InputProps } from "@salt-ds/core";
-import { RefObject } from "react";
+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" | "allowFreeText" | "defaultValue" | "initialHighlightedIndex" | "itemsToString" | "onDeselect" | "onSetSelectedText" | "value">, Omit<ComponentSelectionProps<Item, S>, "onSelect">, Omit<ListHookProps<Item, S>, "containerRef" | "defaultSelected" | "onSelect" | "selected"> {
+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;
-    listRef: RefObject<HTMLDivElement>;
 }
 export interface ComboboxHookResult<Item, S extends SelectionStrategy> extends Pick<ListHookResult<Item>, "focusVisible" | "highlightedIndex" | "listControlProps" | "listHandlers">, Partial<DropdownHookResult> {
-    inputProps: InputProps;
+    InputProps: InputProps;
     onOpenChange: OpenChangeHandler;
     selected?: S extends MultiSelectionStrategy ? Item[] : Item | null;
+    setContainerRef: RefCallback<HTMLDivElement>;
 }
-export declare const useCombobox: <Item, S extends SelectionStrategy>({ allowBackspaceClearsSelection, allowFreeText, ariaLabel, collectionHook, defaultIsOpen, defaultSelected, defaultValue, onBlur, onFocus, onChange, onDeselect, onSelect, id, initialHighlightedIndex, isOpen: isOpenProp, itemCount, itemsToString, itemToString, listRef, onOpenChange, onSelectionChange, onSetSelectedText, selected: selectedProp, selectionKeys, selectionStrategy, value: valueProp, InputProps: inputProps, }: ComboboxHookProps<Item, S>) => ComboboxHookResult<Item, S>;
+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/drag-drop/dragDropTypes.d.ts

@@ -47,8 +47,8 @@ export interface DragHookResult {
 export interface InternalDragHookResult extends Omit<DragHookResult, "isDragging" | "isScrolling"> {
     beginDrag: (dragElement: HTMLElement) => void;
     drag: (dragPos: number, mouseMoveDirection: "fwd" | "bwd") => void;
-    drop: () => void;
-    handleScrollStart?: () => 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
@@ -57,15 +57,16 @@ export interface InternalDragHookResult extends Omit<DragHookResult, "isDragging
     releaseDrag?: () => void;
 }
 export interface DropOptions {
-    fromIndex?: number;
+    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 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;
@@ -73,16 +74,20 @@ export interface DragDropProps {
     id?: string;
     isDragSource?: boolean;
     isDropTarget?: boolean;
+    itemQuery?: string;
     onDragStart?: DragStartHandler;
     onDrop: DropHandler;
     onDropSettle?: (toIndex: number) => void;
     orientation: orientationType;
-    containerRef: RefObject<HTMLElement>;
-    itemQuery?: string;
+    /**
+     * 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"> {
+export interface InternalDragDropProps extends Omit<DragDropProps, "draggableClassName" | "id" | "onDrop"> {
     isDragSource?: boolean;
     isDropTarget?: boolean;
     selected?: unknown;

package/types/drag-drop/drop-target-utils.d.ts

@@ -32,46 +32,37 @@ type Dimension = keyof Pick<DOMRect, "width" | "height">;
 type ElementPosition = "x" | "y";
 export declare const measureElementSizeAndPosition: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => number[];
 export declare const dimensions: (orientation: orientationType) => {
-    CLIENT_POS: "clientY" | "clientX";
-    CLIENT_SIZE: "scrollTop" | "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollLeft";
-    CONTRA: "width" | "height" | "left" | "right" | "top" | "bottom" | "x" | "y";
-    CONTRA_CLIENT_POS: "clientY" | "clientX";
+    CLIENT_POS: "clientX" | "clientY";
+    CLIENT_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    CONTRA: "width" | "height" | "left" | "right" | "bottom" | "top" | "x" | "y";
+    CONTRA_CLIENT_POS: "clientX" | "clientY";
     CONTRA_END: "width" | "height";
     CONTRA_POS: ElementPosition;
     DIMENSION: "width" | "height";
-    END: "width" | "height" | "left" | "right" | "top" | "bottom" | "x" | "y";
+    END: "width" | "height" | "left" | "right" | "bottom" | "top" | "x" | "y";
     POS: ElementPosition;
-    SCROLL_POS: "scrollTop" | "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollLeft";
-    SCROLL_SIZE: "scrollTop" | "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollLeft";
-    START: "width" | "height" | "left" | "right" | "top" | "bottom" | "x" | "y";
+    SCROLL_POS: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    SCROLL_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    START: "width" | "height" | "left" | "right" | "bottom" | "top" | "x" | "y";
 } | {
-    CLIENT_POS: "clientY" | "clientX";
-    CLIENT_SIZE: "scrollTop" | "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollLeft";
-    CONTRA: "width" | "height" | "left" | "right" | "top" | "bottom" | "x" | "y";
-    CONTRA_CLIENT_POS: "clientY" | "clientX";
+    CLIENT_POS: "clientX" | "clientY";
+    CLIENT_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    CONTRA: "width" | "height" | "left" | "right" | "bottom" | "top" | "x" | "y";
+    CONTRA_CLIENT_POS: "clientX" | "clientY";
     CONTRA_END: "width" | "height";
     CONTRA_POS: ElementPosition;
     DIMENSION: "width" | "height";
-    END: "width" | "height" | "left" | "right" | "top" | "bottom" | "x" | "y";
+    END: "width" | "height" | "left" | "right" | "bottom" | "top" | "x" | "y";
     POS: ElementPosition;
-    SCROLL_POS: "scrollTop" | "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollLeft";
-    SCROLL_SIZE: "scrollTop" | "scrollHeight" | "scrollWidth" | "clientHeight" | "clientWidth" | "scrollLeft";
-    START: "width" | "height" | "left" | "right" | "top" | "bottom" | "x" | "y";
+    SCROLL_POS: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    SCROLL_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    START: "width" | "height" | "left" | "right" | "bottom" | "top" | "x" | "y";
 };
 export declare const getItemById: (measuredItems: MeasuredDropTarget[], id: string) => MeasuredDropTarget | undefined;
 export declare const removeDraggedItem: (measuredItems: MeasuredDropTarget[], index: number) => void;
 export type dropZone = "start" | "end";
 export declare const measureDropTargets: (container: HTMLElement, orientation: orientationType, itemQuery?: string, viewportRange?: ViewportRange, draggedItemId?: string) => MeasuredDropTarget[];
-/**
-  The index of the dropped item is its array offset within the
-  dropTargets. If there is no scrolling involved, this will be
-  the same as the 'absolute' index position. If the dropTargets have
-  been scrolled, though, we will only have a window of the full
-  dataset, corresponding to the current scroll viewport. In that case
-  we need to determine the offset and factor that into the 'absolute'
-  index.
- */
-export declare const getIndexOfDraggedItem: (dropTargets: MeasuredDropTarget[], absoluteIndex?: boolean) => number;
+export declare const getIndexOfDraggedItem: (dropTargets: MeasuredDropTarget[]) => number;
 export declare const mutateDropTargetsSwitchDropTargetPosition: (dropTargets: MeasuredDropTarget[], direction: Direction) => void;
 export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, draggedItemSize: number, mouseMoveDirection: Direction) => MeasuredDropTarget;
 /**
@@ -81,6 +72,7 @@ export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos:
  */
 export declare function constrainRect(targetRect: Rect, constraintRect: Rect): Rect;
 export declare const dropTargetsDebugString: (dropTargets: MeasuredDropTarget[]) => string;
-export declare const getScrollableContainer: (container: HTMLElement, itemQuery: string) => HTMLElement;
-export declare const isContainerScrollable: (scrollableContainer: HTMLElement, orientation: orientationType) => boolean;
+export declare const getItemParentContainer: (container: HTMLElement | null, itemQuery: string) => HTMLElement | null;
+export declare const getScrollableContainer: (container: HTMLElement | null, itemQuery: string) => HTMLElement | null;
+export declare const isContainerScrollable: (scrollableContainer: HTMLElement | null, orientation: orientationType) => boolean;
 export {};

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

@@ -2,9 +2,11 @@ import type { orientationType } from "@vuu-ui/vuu-utils";
 import { Direction } from "./dragDropTypes";
 import { MeasuredDropTarget } from "./drop-target-utils";
 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;
+    displaceItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => number;
+    displaceLastItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => number;
     clearSpacers: (useAnimation?: boolean) => void;
+    /** Insert the sized spacer at start or end of collection */
+    setTerminalSpacer: (container: HTMLElement, position: "start" | "end", size: number) => void;
 };
 export type DragDisplacersHook = (orientation: orientationType) => DragDisplacersHookResult;
 /**

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

@@ -1,2 +1,6 @@
-import { InternalDragDropProps, InternalDragHookResult } from "./dragDropTypes";
+import type { InternalDragDropProps, InternalDragHookResult } from "./dragDropTypes";
+export declare const NULL_DROP_OPTIONS: {
+    readonly fromIndex: -1;
+    readonly toIndex: -1;
+};
 export declare const useDragDropCopy: ({ selected, viewportRange, }: InternalDragDropProps) => InternalDragHookResult;

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

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

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

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

package/types/dropdown/useDropdown.d.ts

@@ -10,4 +10,4 @@ export interface DropdownListHookResult<Item> extends Partial<ListHookResult<Ite
     onOpenChange: any;
     triggerLabel?: string;
 }
-export declare const useDropdown: <Item, S extends SelectionStrategy>({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, listRef, onHighlight, onOpenChange, onSelectionChange, onSelect, selected, selectionStrategy, }: DropdownListHookProps<Item, S>) => DropdownListHookResult<Item>;
+export declare const useDropdown: <Item, S extends SelectionStrategy>({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, onHighlight, onOpenChange, onSelectionChange, onSelect, selected, selectionStrategy, }: DropdownListHookProps<Item, S>) => DropdownListHookResult<Item>;

package/types/editable/editable-utils.d.ts

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

package/types/editable/useEditableText.d.ts

@@ -1,7 +1,6 @@
-import { DataItemCommitHandler } from "@vuu-ui/vuu-table-types";
+import { ClientSideValidationChecker, DataItemCommitHandler } from "@vuu-ui/vuu-table-types";
 import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
 import { FocusEventHandler, FormEventHandler, KeyboardEvent } from "react";
-import { ClientSideValidationChecker } from "./editable-utils";
 export declare const WarnCommit: () => Promise<true>;
 export interface EditableTextHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
     clientSideEditValidationCheck?: ClientSideValidationChecker;

package/types/index.d.ts

@@ -12,8 +12,13 @@ export * from "./inputs";
 export * from "./instrument-picker";
 export * from "./instrument-search";
 export * from "./list";
+export * from "./measured-container";
+export * from "./overflow-container";
 export * from "./price-ticker";
+export * from "./price-ticker";
+export * from "./split-button";
 export * from "./tabstrip";
+export * from "./toolbar";
 export * from "./tree";
 export * from "./utils";
 export * from "./vuu-input";

package/types/list/common-hooks/useCollapsibleGroups.d.ts

@@ -6,9 +6,9 @@ interface CollapsibleHookProps<Item> {
     highlightedIdx: number;
     onToggle?: (node: Item) => void;
 }
-interface CollapsibleHookResult<Item> {
+interface CollapsibleHookResult {
     onClick?: ListHandlers["onClick"];
     onKeyDown?: ListHandlers["onKeyDown"];
 }
-export declare const useCollapsibleGroups: <Item>({ collapsibleHeaders, collectionHook, highlightedIdx, onToggle, }: CollapsibleHookProps<Item>) => CollapsibleHookResult<Item>;
+export declare const useCollapsibleGroups: <Item>({ collapsibleHeaders, collectionHook, highlightedIdx, onToggle, }: CollapsibleHookProps<Item>) => CollapsibleHookResult;
 export {};

package/types/list/common-hooks/useKeyboardNavigation.d.ts

@@ -1,3 +1,3 @@
 import { NavigationHookProps, NavigationHookResult } from "../../common-hooks";
 export declare const LIST_FOCUS_VISIBLE = -2;
-export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIndex, disableHighlightOnFocus, highlightedIndex: highlightedIndexProp, itemCount, onHighlight, onKeyboardNavigation, restoreLastFocus, selected, viewportItemCount, }: NavigationHookProps) => NavigationHookResult;
+export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIndex, disableHighlightOnFocus, highlightedIndex: highlightedIndexProp, itemCount, onHighlight, onKeyboardNavigation, restoreLastFocus, selected, viewportItemCount: _, }: NavigationHookProps) => NavigationHookResult;

package/types/list/index.d.ts

@@ -6,6 +6,5 @@ export * from "./listTypes";
 export * from "./ListItemHeader";
 export * from "./ListItemGroup";
 export * from "./useList";
-export * from "./VirtualizedList";
 export * from "./CheckboxIcon";
 export * from "./RadioIcon";

package/types/list/listTypes.d.ts

@@ -1,4 +1,4 @@
-import React, { FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, PropsWithChildren, Ref, RefObject } from "react";
+import React, { FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, PropsWithChildren, Ref, RefCallback, RefObject } from "react";
 import { ScrollingAPI, ViewportTrackingResult } from "./common-hooks";
 import { CollectionHookResult, ComponentSelectionProps, ListHandlers, NavigationHookResult, SelectionHookResult, SelectionStrategy } from "../common-hooks";
 import { DragHookResult, DragStartHandler, dragStrategy, DropHandler } from "../drag-drop";
@@ -173,7 +173,6 @@ export interface ListControlProps {
 }
 export interface ListHookProps<Item = string, S extends SelectionStrategy = "default"> extends Pick<ListProps<Item, S>, "allowDragDrop" | "collapsibleHeaders" | "disabled" | "id" | "onClick" | "onDragStart" | "onDrop" | "onHighlight" | "onMoveListItem" | "onSelect" | "onSelectionChange" | "restoreLastFocus" | "selectionKeys" | "selectionStrategy" | "stickyHeaders" | "tabToSelect"> {
     collectionHook: CollectionHookResult<Item>;
-    containerRef: RefObject<HTMLElement>;
     contentRef?: RefObject<HTMLElement>;
     defaultHighlightedIndex?: number;
     defaultSelected?: string[];
@@ -186,11 +185,12 @@ export interface ListHookProps<Item = string, S extends SelectionStrategy = "def
     listHandlers?: ListHandlers;
     onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
     onKeyDown?: (evt: KeyboardEvent) => void;
-    scrollContainerRef?: RefObject<HTMLElement>;
     selected?: string[];
     viewportRange?: ViewportRange;
 }
 export interface ListHookResult<Item> extends Partial<ViewportTrackingResult<Item>>, Pick<SelectionHookResult, "selected" | "setSelected">, Partial<Omit<NavigationHookResult, "listProps">>, Omit<DragHookResult, "isDragging" | "isScrolling"> {
+    containerRef: RefObject<HTMLDivElement>;
+    setContainerRef: RefCallback<HTMLDivElement>;
     keyboardNavigation: RefObject<boolean>;
     listHandlers: ListHandlers;
     listItemHeaderHandlers: Partial<ListHandlers>;

package/types/list/useList.d.ts

@@ -1,3 +1,3 @@
 import { SelectionStrategy } from "../common-hooks";
 import { ListHookProps, ListHookResult } from "./listTypes";
-export declare const useList: <Item, S extends SelectionStrategy>({ allowDragDrop, collapsibleHeaders, collectionHook: dataHook, containerRef, contentRef, defaultHighlightedIndex, defaultSelected, disabled, disableAriaActiveDescendant, disableHighlightOnFocus, disableTypeToSelect, highlightedIndex: highlightedIndexProp, id, label, listHandlers: listHandlersProp, onClick: onClickProp, onDragStart, onDrop, onHighlight, onKeyboardNavigation, onKeyDown, onMoveListItem, onSelect, onSelectionChange, restoreLastFocus, scrollContainerRef, selected, selectionStrategy, selectionKeys, stickyHeaders, tabToSelect, viewportRange, }: ListHookProps<Item, S>) => ListHookResult<Item>;
+export declare const useList: <Item, S extends SelectionStrategy>({ allowDragDrop, collapsibleHeaders, collectionHook: dataHook, contentRef, defaultHighlightedIndex, defaultSelected, disabled, disableAriaActiveDescendant, disableHighlightOnFocus, disableTypeToSelect, highlightedIndex: highlightedIndexProp, id, label, listHandlers: listHandlersProp, onClick: onClickProp, onDragStart, onDrop, onHighlight, onKeyboardNavigation, onKeyDown, onMoveListItem, onSelect, onSelectionChange, restoreLastFocus, selected, selectionStrategy, selectionKeys, stickyHeaders, tabToSelect, viewportRange, }: ListHookProps<Item, S>) => ListHookResult<Item>;

package/types/list/useListHeight.d.ts

@@ -1,5 +1,4 @@
-import { MeasuredSize } from "@vuu-ui/vuu-layout";
-import { RefObject } from "react";
+import { MeasuredSize } from "@vuu-ui/vuu-ui-controls";
 export interface ListHeightHookProps {
     displayedItemCount: number;
     getItemHeight?: (index: number) => number;
@@ -7,7 +6,6 @@ export interface ListHeightHookProps {
     itemCount: number;
     itemGapSize: number;
     itemHeight?: number;
-    rootRef: RefObject<HTMLElement>;
     size: MeasuredSize | undefined;
 }
 export interface HeightHookResult {

package/types/measured-container/MeasuredContainer.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "react";
+import { MeasuredSize } from "./useMeasuredContainer";
+import "./MeasuredContainer.css";
+export interface MeasuredContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A numeric value for height will result in a fixed height. To adapt to container
+     * use either a percentage height or 'auto'. Always use 'auto' when rendering
+     * within a column based flex container, together with a flex value (use the
+     * --vuuMeasuredContainer-flex CSS custom property))
+     */
+    height?: number | string;
+    onResize?: (size: MeasuredSize) => void;
+    width?: number | string;
+}
+export declare const MeasuredContainer: import("react").ForwardRefExoticComponent<MeasuredContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/measured-container/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MeasuredContainer";
+export * from "./useMeasuredContainer";

package/types/measured-container/useMeasuredContainer.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, RefObject } from "react";
+import { MeasuredContainerProps } from "./MeasuredContainer";
+export interface ClientSize {
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface MeasuredProps extends Pick<MeasuredContainerProps, "height" | "onResize" | "width"> {
+    defaultHeight?: number;
+    defaultWidth?: number;
+}
+export type CssSize = Pick<CSSProperties, "height" | "width">;
+export interface MeasuredSize {
+    height: number;
+    width: number;
+}
+export interface MeasuredContainerHookResult {
+    containerRef: RefObject<HTMLDivElement>;
+    cssSize: CssSize;
+    outerSize: CssSize;
+    innerSize?: MeasuredSize;
+}
+export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, onResize: onResizeProp, width, }: MeasuredProps) => MeasuredContainerHookResult;

package/types/measured-container/useResizeObserver.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+export declare const WidthHeight: string[];
+export declare const WidthOnly: 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: readonly string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/types/overflow-container/OverflowContainer.d.ts

@@ -0,0 +1,17 @@
+import { PopupMenuProps } from "@vuu-ui/vuu-popups";
+import { orientationType } from "@vuu-ui/vuu-utils";
+import React, { HTMLAttributes } from "react";
+import { OverflowItem } from "./overflow-utils";
+import "./OverflowContainer.css";
+export interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {
+    PopupMenuProps?: Partial<PopupMenuProps>;
+    allowDragDrop?: boolean;
+    debugId?: string;
+    height: number;
+    onMoveItem?: (fromIndex: number, toIndex: number) => void;
+    onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
+    orientation?: orientationType;
+    overflowIcon?: string;
+    overflowPosition?: "start" | "end" | number;
+}
+export declare const OverflowContainer: React.ForwardRefExoticComponent<OverflowContainerProps & React.RefAttributes<HTMLDivElement>>;

package/types/overflow-container/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./OverflowContainer";
+export * from "./overflow-utils";

package/types/overflow-container/overflow-utils.d.ts

@@ -0,0 +1,49 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+export type OverflowItem = {
+    index: string;
+    label: string;
+    overflowPriority: string;
+};
+export declare const isOverflowElement: (element: HTMLElement | null) => boolean;
+export declare const sortByScreenOrder: (elements: HTMLElement[]) => HTMLElement[];
+export declare const NO_WRAPPED_ITEMS: OverflowItem[];
+/**
+    Identify wrapped items by comparing position of each item. Any item
+    not to the right of preceeding item has wrapped. Note: on-screen
+    position of items does not necessarily match document position, due
+    to use of css order. This is taken into account by sorting.
+    TODO support Vertical orientation
+ */
+export declare const getNonWrappedAndWrappedItems: (container: HTMLElement, orientation?: orientationType) => [OverflowItem[], OverflowItem[]];
+export declare const applyOverflowClassToWrappedItems: (container: HTMLElement, overflowedItems: OverflowItem[], classBase?: string) => void;
+export declare const overflowIndicatorHasWrappedButShouldNotHave: (wrappedItems: OverflowItem[]) => boolean;
+export declare const highPriorityItemsHaveWrappedButShouldNotHave: (nonWrappedItems: OverflowItem[], wrappedItems: OverflowItem[]) => boolean;
+/**
+  An edge case that may occur when reducing width from unwrapped to
+  wrapped, or on first render.
+  We overflow one or more items. Then, when the overflowIndicator assumes
+  full width, it may itself overflow.
+*/
+export declare const correctForWrappedOverflowIndicator: (container: HTMLElement, overflowedItems: OverflowItem[]) => Promise<OverflowItem[]>;
+/**
+  An edge case that may occur when reducing width from unwrapped to
+  wrapped, or on first render.
+  We overflow one or more items. Then, when the overflowIndicator assumes
+  full width, it may itself overflow.
+*/
+export declare const correctForWrappedHighPriorityItems: (container: HTMLElement, nonWrapped: OverflowItem[], wrapped: OverflowItem[]) => Promise<[OverflowItem[], OverflowItem[]]>;
+export declare const markElementAsWrapped: (container: HTMLElement, item: OverflowItem) => void;
+export declare const getElementsMarkedAsWrapped: (container: HTMLElement) => HTMLElement[];
+export declare const unmarkItemsWhichAreNoLongerWrapped: (container: HTMLElement, wrappedItems: OverflowItem[]) => void;
+/**
+    An edge case. If container has grown but we still have one
+    wrapped item - could the wrapped item return to the fold if the overflow
+    indicaor were removed ?
+ */
+export declare const removeOverflowIndicatorIfNoLongerNeeded: (container: HTMLElement) => boolean;
+/**
+ * This is used both when an overflow menu is used to select an overflowed item
+ * and when a high priority item has overflowed, whilst lower priority items
+ * remain in view.
+ */
+export declare const switchWrappedItemIntoView: (container: HTMLElement, overflowItem: OverflowItem) => [OverflowItem[], OverflowItem[]];

package/types/overflow-container/useOverflowContainer.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { OverflowItem } from "./overflow-utils";
+import { OverflowContainerProps } from "./OverflowContainer";
+export interface OverflowContainerHookProps extends Pick<OverflowContainerProps, "allowDragDrop" | "onMoveItem" | "orientation"> {
+    itemCount: number;
+    onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
+}
+export declare const useOverflowContainer: ({ allowDragDrop, itemCount, onMoveItem, onSwitchWrappedItemIntoView, orientation, }: OverflowContainerHookProps) => {
+    draggable?: JSX.Element | undefined;
+    dropIndicator?: JSX.Element | undefined;
+    draggedItemIndex?: number | undefined;
+    isDragging: boolean;
+    isScrolling: import("react").RefObject<boolean>;
+    revealOverflowedItems?: boolean | undefined;
+    menuActionHandler: MenuActionHandler;
+    menuBuilder: MenuBuilder<string, unknown>;
+    onItemMouseDown: import("react").MouseEventHandler<Element> | undefined;
+    rootRef: (el: HTMLDivElement | null) => void;
+};

package/types/split-button/SplitButton.d.ts

@@ -0,0 +1,11 @@
+import { PopupMenuProps } from "@vuu-ui/vuu-popups";
+import { ButtonProps } from "@salt-ds/core";
+import { HTMLAttributes } from "react";
+import "./SplitButton.css";
+export interface SplitButtonProps extends HTMLAttributes<HTMLDivElement> {
+    ButtonProps?: Partial<ButtonProps>;
+    PopupMenuProps?: Partial<PopupMenuProps>;
+    buttonText: string;
+    segmented?: boolean;
+}
+export declare const SplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuProps: PopupMenuPropsProp, buttonText, onClick, segmented, ...htmlAttributes }: SplitButtonProps) => JSX.Element;

package/types/split-button/index.d.ts

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