@vuu-ui/vuu-ui-controls 0.0.26

package/types/list/Highlighter.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+export interface HighlighterProps {
+    matchPattern?: RegExp | string;
+    text?: string;
+}
+export declare const Highlighter: (props: HighlighterProps) => ReactElement<HighlighterProps>;

package/types/list/List.d.ts

@@ -0,0 +1,6 @@
+import { ForwardedRef, ReactElement } from "react";
+import { SelectionStrategy } from "../common-hooks";
+import { ListProps } from "./listTypes";
+export declare const List: <Item = string, S extends SelectionStrategy = "default">(props: ListProps<Item, S> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReactElement<ListProps<Item, "default">, string | import("react").JSXElementConstructor<any>>;

package/types/list/ListItem.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { ListItemType } from "./listTypes";
+export declare const ListItemProxy: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    height?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ListItem: ListItemType<unknown>;

package/types/list/ListItemGroup.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export interface ListItemGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children?: JSX.Element | JSX.Element[];
+    label?: string;
+}
+export declare const ListItemGroup: (_: ListItemGroupProps) => null;

package/types/list/ListItemHeader.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+export interface ListItemHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+}
+export declare const ListItemHeader: (_: ListItemHeaderProps) => null;

package/types/list/RadioIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const RadioIcon: ({ checked, ...htmlAttributes }: {
+    [x: string]: any;
+    checked?: boolean | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,10 @@
+export * from "./keyUtils";
+export * from "./useCollapsibleGroups";
+export * from "./list-dom-utils";
+export * from "../../common-hooks/useCollectionItems";
+export * from "./useImperativeScrollingAPI";
+export * from "./useKeyboardNavigation";
+export * from "../../common-hooks/useSelection";
+export * from "./useTypeahead";
+export * from "./useViewportTracking";
+export * from "./utils";

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

@@ -0,0 +1,14 @@
+import React from "react";
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Home = "Home";
+export declare const End = "End";
+export declare const PageUp = "PageUp";
+export declare const PageDown = "PageDown";
+export declare const Space = " ";
+export declare const isCharacterKey: (evt: React.KeyboardEvent) => boolean;
+export declare const isNavigationKey: ({ key }: React.KeyboardEvent) => boolean;

package/types/list/common-hooks/list-dom-utils.d.ts

@@ -0,0 +1,5 @@
+export declare const listItemElement: (listEl: HTMLElement, listItemIdx: number) => Element | null;
+export declare function listItemIndex(listItemEl?: HTMLElement): number;
+export declare const listItemId: (el: HTMLElement | null) => string | undefined;
+export declare const closestListItemId: (el: HTMLElement) => string | undefined;
+export declare const closestListItemIndex: (el: HTMLElement) => number;

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

@@ -0,0 +1,14 @@
+import { ListHandlers } from "../../common-hooks";
+import { CollectionHookResult } from "../../common-hooks/collectionTypes";
+interface CollapsibleHookProps<Item> {
+    collapsibleHeaders?: boolean;
+    collectionHook: CollectionHookResult<Item>;
+    highlightedIdx: number;
+    onToggle?: (node: Item) => void;
+}
+interface CollapsibleHookResult {
+    onClick?: ListHandlers["onClick"];
+    onKeyDown?: ListHandlers["onKeyDown"];
+}
+export declare const useCollapsibleGroups: <Item>({ collapsibleHeaders, collectionHook, highlightedIdx, onToggle, }: CollapsibleHookProps<Item>) => CollapsibleHookResult;
+export {};

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

@@ -0,0 +1,14 @@
+import { ForwardedRef, MutableRefObject } from "react";
+import { CollectionHookResult, CollectionItem } from "../../common-hooks/collectionTypes";
+export interface ScrollingAPI<Item> {
+    scrollToIndex: (itemIndex: number) => void;
+    scrollToItem: (item: Item) => void;
+    scrollTo: (scrollOffset: number) => void;
+}
+export interface ScrollingAPIHook<Item> {
+    collectionHook: CollectionHookResult<Item>;
+    forwardedRef?: ForwardedRef<ScrollingAPI<Item>>;
+    scrollableRef: MutableRefObject<HTMLElement | null>;
+    scrollIntoView?: (item: CollectionItem<Item>) => void;
+}
+export declare const useImperativeScrollingAPI: <Item>({ collectionHook, forwardedRef, scrollableRef, scrollIntoView, }: ScrollingAPIHook<Item>) => void;

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

@@ -0,0 +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;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CollectionItem } from "../../common-hooks/collectionTypes";
+interface TypeaheadHookProps<Item> {
+    disableTypeToSelect?: boolean;
+    highlightedIdx: number;
+    highlightItemAtIndex: (idx: number) => void;
+    applyIncrementalSearch?: boolean;
+    typeToNavigate: boolean;
+    items: CollectionItem<Item>[];
+}
+interface TypeaheadHookResult {
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+export declare const useTypeahead: <Item>({ disableTypeToSelect, highlightedIdx, highlightItemAtIndex, typeToNavigate, items, applyIncrementalSearch, }: TypeaheadHookProps<Item>) => TypeaheadHookResult;
+export {};

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

@@ -0,0 +1,14 @@
+import { MutableRefObject, RefObject } from "react";
+import { CollectionItem } from "../../common-hooks/collectionTypes";
+export interface ViewportTrackingProps<Item> {
+    containerRef: RefObject<HTMLElement>;
+    contentRef?: RefObject<HTMLElement>;
+    highlightedIdx?: number;
+    indexPositions: CollectionItem<Item>[];
+    stickyHeaders?: boolean;
+}
+export interface ViewportTrackingResult<Item> {
+    isScrolling: MutableRefObject<boolean>;
+    scrollIntoView: (item: CollectionItem<Item>) => void;
+}
+export declare const useViewportTracking: <Item>({ containerRef, contentRef, highlightedIdx, indexPositions, stickyHeaders, }: ViewportTrackingProps<Item>) => ViewportTrackingResult<Item>;

package/types/list/common-hooks/utils/collection-item-utils.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from "react";
+import { CollectionItem, CollectionOptions } from "../../../common-hooks/collectionTypes";
+export declare const sourceItemHasProp: (item: unknown, propertyName: string) => boolean;
+export declare const isHeader: (item: unknown) => boolean;
+export declare const isGroupNode: (item: unknown) => boolean;
+export declare const isDisabled: (item: unknown) => boolean;
+export declare const isFocusable: (item: unknown) => boolean;
+export declare const countChildItems: <Item>(item: CollectionItem<Item>, items: CollectionItem<Item>[], idx: number) => number;
+export declare const getChildLabel: (element: ReactElement<{
+    children?: ReactNode;
+    label?: string;
+    title?: string;
+}>) => string | undefined;
+export declare const childIsGroup: (child: ReactElement) => boolean;
+export declare const getChildNodes: (element: ReactElement) => CollectionItem<ReactElement>[] | undefined;
+type CollectionItemWithoutId<T> = Omit<CollectionItem<T>, "id">;
+export declare const sourceItems: <T>(source?: readonly T[] | undefined, options?: CollectionOptions<T> | undefined) => CollectionItemWithoutId<T>[] | undefined;
+export declare const childItems: (children: ReactNode) => CollectionItem<ReactElement>[] | undefined;
+export declare const isParentPath: (parentPath: string, childPath: string) => boolean;
+export declare function replaceCollectionItem<Item>(nodes: CollectionItem<Item>[], id: string, props: Partial<CollectionItem<Item>>): CollectionItem<Item>[];
+export {};

package/types/list/common-hooks/utils/filter-utils.d.ts

@@ -0,0 +1,4 @@
+export type GetFilterRegex = (inputValue: string) => RegExp;
+export type FilterPredicate = (item: string) => boolean;
+export declare const getDefaultFilterRegex: GetFilterRegex;
+export declare const getDefaultFilter: (inputValue?: string, getFilterRegex?: GetFilterRegex) => (itemValue?: string) => boolean;

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

@@ -0,0 +1,4 @@
+export * from "./collection-item-utils";
+export * from "./filter-utils";
+export * from "./isSelected";
+export * from "../../../common-hooks/useControlled";

package/types/list/common-hooks/utils/isSelected.d.ts

@@ -0,0 +1,2 @@
+import { CollectionItem } from "../../../common-hooks/collectionTypes";
+export declare function isSelected<Item>(selectedId: string | string[] | null, item: CollectionItem<Item>): boolean;

package/types/list/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./common-hooks";
+export * from "./Highlighter";
+export * from "./ListItem";
+export * from "./List";
+export * from "./listTypes";
+export * from "./ListItemHeader";
+export * from "./ListItemGroup";
+export * from "./useList";
+export * from "./CheckboxIcon";
+export * from "./RadioIcon";

package/types/list/keyset.d.ts

@@ -0,0 +1,9 @@
+export declare class KeySet {
+    private keys;
+    private free;
+    private nextKeyValue;
+    constructor(from?: number, to?: number);
+    next(): number;
+    reset(from: number, to: number): void;
+    keyFor(rowIndex: number): number | undefined;
+}

package/types/list/listTypes.d.ts

@@ -0,0 +1,200 @@
+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";
+import { ViewportRange } from "./useScrollPosition";
+export type ComponentType<T = unknown> = (props: PropsWithChildren<T>) => JSX.Element;
+export type ListItemType<T = unknown> = ComponentType<ListItemProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}>;
+export type MoveItemHandler = (fromIndex: number, toIndex: number) => void;
+export interface ListItemProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    item?: T;
+    itemHeight?: number;
+    itemTextHighlightPattern?: RegExp | string;
+    label?: string;
+    showCheckbox?: boolean;
+    /**
+     * selectable is a marker, used by List, not used by ListItem itself
+     */
+    selectable?: boolean;
+    selected?: boolean;
+    /**
+     *  Will apply transform: translate style. Used for virtualised rendering,
+     *  supplied by VirtualisedList.
+     */
+    translate3d?: number;
+}
+export interface ListScrollHandles<Item> {
+    scrollToIndex: (itemIndex: number) => void;
+    scrollToItem: (item: Item) => void;
+    scrollTo: (scrollOffset: number) => void;
+}
+export interface ListProps<Item = string, S extends SelectionStrategy = "default"> extends ComponentSelectionProps<Item, S>, Omit<HTMLAttributes<HTMLDivElement>, "onDragStart" | "onDrop" | "onSelect" | "defaultValue"> {
+    /**
+     * The component used to render a ListItem instead of the default. This must itself render a ListItem,
+     * must implement props that extend ListItemProps and must forward ListItem props to the ListItem.
+     */
+    ListItem?: ListItemType<Item>;
+    /**
+     * The component used when there are no items.
+     */
+    ListPlaceholder?: ComponentType<HTMLAttributes<unknown>>;
+    /**
+     * ListItems can be re-ordered by drag drop.
+     */
+    allowDragDrop?: boolean | dragStrategy;
+    borderless?: boolean;
+    /**
+     * Adds checkbox to list. Defaults to true for multiselect strategy. Only supported for
+     * multiple select strategies (multi selection and extended selection)
+     */
+    checkable?: boolean;
+    className?: string;
+    collapsibleHeaders?: boolean;
+    defaultHighlightedIndex?: number;
+    disabled?: boolean;
+    disableFocus?: boolean;
+    /**
+     * Use to turn off typeahead search functionality within List. Defaulst to false;
+     */
+    disableTypeToSelect?: boolean;
+    displayedItemCount?: number;
+    emptyMessage?: string;
+    focusVisible?: number;
+    /**
+     * Used for providing customized item height. It should return a number or a string if item height
+     * is in percentage. .
+     *
+     * @param {number} index The item index.
+     */
+    getItemHeight?: (index: number) => number;
+    /**
+     * Used for providing customized item ids.
+     * deprecated
+     * @param {number} index The item index.
+     */
+    getItemId?: (index: number) => string;
+    /**
+     * Height of the component.
+     */
+    height?: number | string;
+    highlightedIndex?: number;
+    /**
+     * The total number of items.
+     *
+     * Used for keyboard navigation (when `End` key is pressed) and when the list is virtualized.
+     */
+    itemCount?: number;
+    /**
+     * Size of the gap between list items. Defaults to zero.
+     */
+    itemGapSize?: number;
+    /**
+     * Height of an item. I can be a number or a string if item height is in percentage. If omitted
+     * default height values from Salt theme will be used.
+     *
+     * Note that when using a percentage value, the list must have a height.
+     */
+    itemHeight?: number;
+    /**
+     * Used for providing text highlight.
+     *
+     * It can be a capturing regex or a string for a straightforward string matching.
+     */
+    itemTextHighlightPattern?: RegExp | string;
+    /**
+     * Item `toString` function when list is not used declaratively and its items are objects
+     * instead of strings. The string value is also used in tooltip when item text is truncated.
+     *
+     * If omitted, component will look for a `label` property on the data object.
+     *
+     * @param {object} item The item.
+     */
+    itemToString?: (item: Item) => string;
+    listHandlers?: ListHandlers;
+    /**
+     * Maximum list height.
+     */
+    maxHeight?: number | string;
+    /**
+     * Maximum list width.
+     */
+    maxWidth?: number | string;
+    /**
+     * Minimum list height.
+     */
+    minHeight?: number | string;
+    /**
+     * Minimum list width.
+     */
+    minWidth?: number | string;
+    onDragStart?: DragStartHandler;
+    /**
+     * Handle item dropped onto list. Note, this will not be triggered if a list item is
+     * dragged within its owning list - this will trigger the onMoveListItem callback.
+     */
+    onDrop?: DropHandler;
+    onHighlight?: (index: number) => void;
+    onMoveListItem?: MoveItemHandler;
+    onViewportScroll?: (firstVisibleRowIndex: number, lastVisibleRowIndex: number) => void;
+    /**
+     * If `true`, the component will remember the last keyboard-interacted position
+     * and highlight it when list is focused again.
+     */
+    restoreLastFocus?: boolean;
+    scrollingApiRef?: ForwardedRef<ScrollingAPI<Item>>;
+    showEmptyMessage?: boolean;
+    source?: ReadonlyArray<Item>;
+    stickyHeaders?: boolean;
+    /**
+     * When set to `true`, 'Tab' key selects current highlighted item before focus is blurred away
+     * from the component. This would be the desirable behaviour for any dropdown menu based
+     * components like dropdown, combobox.
+     *
+     * @default false
+     */
+    tabToSelect?: boolean;
+    /**
+     * Width of the component.
+     */
+    width?: number | string;
+}
+export interface ListControlProps {
+    "aria-activedescendant"?: string;
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onKeyDown: KeyboardEventHandler;
+    onMouseDown?: MouseEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+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>;
+    contentRef?: RefObject<HTMLElement>;
+    defaultHighlightedIndex?: number;
+    defaultSelected?: string[];
+    disableAriaActiveDescendant?: boolean;
+    disableHighlightOnFocus?: boolean;
+    disableTypeToSelect?: boolean;
+    focusVisible?: boolean;
+    highlightedIndex?: number;
+    label?: string;
+    listHandlers?: ListHandlers;
+    onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
+    onKeyDown?: (evt: KeyboardEvent) => void;
+    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>;
+    listControlProps: ListControlProps;
+    setHighlightedIndex: (index: number) => void;
+    setIgnoreFocus: (ignoreFocus: boolean) => void;
+}

package/types/list/useList.d.ts

@@ -0,0 +1,3 @@
+import { SelectionStrategy } from "../common-hooks";
+import { ListHookProps, ListHookResult } from "./listTypes";
+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/useListDrop.d.ts

@@ -0,0 +1,15 @@
+import { CollectionHookResult } from "../common-hooks";
+import { DropHandler } from "../drag-drop";
+import { MoveItemHandler } from "./listTypes";
+export interface ListDropProps<Item = string> {
+    dataHook: CollectionHookResult<Item>;
+    onDrop?: DropHandler;
+    onMoveListItem?: MoveItemHandler;
+    selected: string[];
+    setHighlightedIndex: (idx: number) => void;
+    setSelected: (selected: string[]) => void;
+}
+export declare const useListDrop: <Item>({ dataHook, onDrop, onMoveListItem, selected, setHighlightedIndex, setSelected, }: ListDropProps<Item>) => {
+    handleDrop: DropHandler;
+    onDropSettle: (toIndex: number) => void;
+};

package/types/list/useListHeight.d.ts

@@ -0,0 +1,19 @@
+import { MeasuredSize } from "@vuu-ui/vuu-ui-controls";
+import { RefCallback } from "react";
+export interface ListHeightHookProps {
+    displayedItemCount: number;
+    getItemHeight?: (index: number) => number;
+    height?: number | string;
+    itemCount: number;
+    itemGapSize: number;
+    itemHeight?: number;
+    size: MeasuredSize | undefined;
+}
+export interface HeightHookResult {
+    computedListHeight: number | undefined;
+    contentHeight: number;
+    listClientHeight?: number;
+    listItemHeight: number;
+    rowHeightProxyRef: RefCallback<HTMLDivElement>;
+}
+export declare const useListHeight: ({ displayedItemCount, getItemHeight, height, itemCount, itemGapSize, itemHeight: itemHeightProp, size, }: ListHeightHookProps) => HeightHookResult;

package/types/list/useScrollPosition.d.ts

@@ -0,0 +1,19 @@
+import { UIEvent } from "react";
+export type ViewportRange = {
+    atEnd: boolean;
+    atStart: boolean;
+    from: number;
+    to: number;
+};
+interface ScrollPositionHookProps {
+    containerSize: number;
+    itemCount: number;
+    itemGapSize?: number;
+    itemSize: number;
+    onViewportScroll?: (firstVisibleItemIndex: number, lastVisibleitemIndex: number) => void;
+}
+export declare const useScrollPosition: ({ containerSize: listHeight, itemCount: listItemCount, itemGapSize: listItemGapSize, itemSize: listItemHeight, onViewportScroll, }: ScrollPositionHookProps) => {
+    onVerticalScroll: (e: UIEvent<HTMLElement>) => void;
+    viewportRange: ViewportRange;
+};
+export {};

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+import { MeasuredSize } from "./useMeasuredContainer";
+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,15 @@
+import { PopupMenuProps } from "@vuu-ui/vuu-popups";
+import { orientationType } from "@vuu-ui/vuu-utils";
+import React, { HTMLAttributes } from "react";
+import { OverflowItem } from "./overflow-utils";
+export interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {
+    PopupMenuProps?: Partial<PopupMenuProps>;
+    allowDragDrop?: boolean;
+    debugId?: string;
+    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,48 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+export type OverflowItem = {
+    index: string;
+    label: string;
+    overflowPriority: string;
+};
+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[], orientation: orientationType) => 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[], orientation: orientationType) => 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, orientation: orientationType) => 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, orientation: orientationType) => [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">, Required<Pick<OverflowContainerProps, "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/price-ticker/PriceTicker.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {
+    decimals?: number;
+    price?: number;
+    showArrow?: boolean;
+}
+export declare const PriceTicker: import("react").MemoExoticComponent<({ className, decimals, price, showArrow, ...htmlAttributes }: PriceTickerProps) => JSX.Element>;

package/types/price-ticker/index.d.ts

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