@vuu-ui/vuu-ui-controls 0.0.26

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

@@ -0,0 +1,78 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { ViewportRange } from "./dragDropTypes";
+import { Direction, Rect } from "./dragDropTypes";
+export declare const NOT_OVERFLOWED = ":not(.wrapped)";
+export declare const NOT_HIDDEN = ":not([aria-hidden=\"true\"])";
+export type MeasuredDropTarget = {
+    /**
+      The index position currently occupied by this item. If draggable
+      is dropped here, this will be the destination drop position.
+    */
+    currentIndex: number;
+    element: HTMLElement;
+    id: string;
+    index: number;
+    isDraggedItem: boolean;
+    isExternal?: boolean;
+    isLast?: boolean;
+    isOverflowIndicator?: boolean;
+    start: number;
+    end: number;
+    mid: number;
+    size: number;
+};
+export type targetType = {
+    element: HTMLElement | null;
+    index: number;
+    isLast?: boolean;
+};
+/** clones and removes id */
+export declare const cloneElement: <T extends HTMLElement>(element: T) => T;
+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: "clientX" | "clientY";
+    CLIENT_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    CONTRA: "width" | "height" | "x" | "y" | "left" | "top" | "right" | "bottom";
+    CONTRA_CLIENT_POS: "clientX" | "clientY";
+    CONTRA_END: "width" | "height";
+    CONTRA_POS: ElementPosition;
+    DIMENSION: "width" | "height";
+    END: "width" | "height" | "x" | "y" | "left" | "top" | "right" | "bottom";
+    POS: ElementPosition;
+    SCROLL_POS: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    SCROLL_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    START: "width" | "height" | "x" | "y" | "left" | "top" | "right" | "bottom";
+} | {
+    CLIENT_POS: "clientX" | "clientY";
+    CLIENT_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    CONTRA: "width" | "height" | "x" | "y" | "left" | "top" | "right" | "bottom";
+    CONTRA_CLIENT_POS: "clientX" | "clientY";
+    CONTRA_END: "width" | "height";
+    CONTRA_POS: ElementPosition;
+    DIMENSION: "width" | "height";
+    END: "width" | "height" | "x" | "y" | "left" | "top" | "right" | "bottom";
+    POS: ElementPosition;
+    SCROLL_POS: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    SCROLL_SIZE: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollLeft" | "scrollTop" | "scrollWidth";
+    START: "width" | "height" | "x" | "y" | "left" | "top" | "right" | "bottom";
+};
+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[];
+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;
+/**
+ * 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 dropTargetsDebugString: (dropTargets: MeasuredDropTarget[]) => string;
+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/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./dragDropTypes";
+export * from "./DragDropProvider";
+export * from "./DragDropState";
+export * from "./useDragDrop";
+export * from "./drop-target-utils";
+export * from "./useGlobalDragDrop";

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

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+export type ScrollStopHandler = (scrollDirection: "fwd" | "bwd", scrollPos: number, atEnd: boolean) => void;
+export declare const useAutoScroll: ({ containerRef, onScrollingStopped, orientation, }: {
+    containerRef: RefObject<HTMLElement>;
+    onScrollingStopped?: ScrollStopHandler | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
+}) => {
+    isScrolling: import("react").MutableRefObject<boolean>;
+    startScrolling: (direction: "fwd" | "bwd", scrollRate: number, scrollUnit?: any) => void;
+    stopScrolling: (atEnd?: any) => void;
+};

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

@@ -0,0 +1,17 @@
+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") => 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;
+/**
+ * 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'
+ * direction option should be used at drag start or following scroll.
+ */
+export declare const useDragDisplacers: DragDisplacersHook;

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

@@ -0,0 +1,2 @@
+import { DragDropHook } from "./dragDropTypes";
+export declare const useDragDrop: DragDropHook;

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { dropZone, MeasuredDropTarget } from "./drop-target-utils";
+export declare const SPACER_SIZE = 0;
+export type DropIndicatorHookResult = {
+    positionDropIndicator: (dropTarget: MeasuredDropTarget, dropZone: dropZone) => HTMLElement;
+    clearSpacer: () => void;
+};
+export type DropIndicatorHook = () => DropIndicatorHookResult;
+export declare const useDropIndicator: DropIndicatorHook;

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

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

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

@@ -0,0 +1,3 @@
+export declare const useTransition: () => {
+    applyTransition: (element: HTMLElement, property: string, value: string) => void;
+};

package/types/dropdown/Dropdown.d.ts

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

package/types/dropdown/DropdownBase.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DropdownBaseProps } from "./dropdownTypes";
+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/dropdown/DropdownButton.d.ts

@@ -0,0 +1,41 @@
+import { ButtonProps } from "@salt-ds/core";
+import { AriaAttributes } from "react";
+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/dropdown/dropdownTypes.d.ts

@@ -0,0 +1,51 @@
+import type { PopupComponentProps, PopupPlacement } from "@vuu-ui/vuu-popups";
+import { HTMLAttributes, KeyboardEvent, ReactElement, Ref, RefObject } from "react";
+export type DropdownOpenKey = "Enter" | "ArrowDown" | " ";
+export type CloseReason = "blur" | "Escape" | "click-away" | "select" | "script" | "Tab" | "toggle";
+export type OpenChangeHandler = <T extends boolean>(open: T, closeReason?: T extends false ? CloseReason : never) => void;
+export type DropdownCloseHandler = (closeReason?: CloseReason) => void;
+export interface DropdownBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    PopupProps?: Pick<PopupComponentProps, "minWidth">;
+    defaultIsOpen?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    isOpen?: boolean;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    openKeys?: DropdownOpenKey[];
+    onOpenChange?: OpenChangeHandler;
+    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 & {
+        ref?: Ref<any>;
+    };
+    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/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/dropdown/useClickAway.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from "react";
+import { CloseReason } from "./dropdownTypes";
+export type ClickawayHook = (props: {
+    popperRef: RefObject<HTMLElement>;
+    rootRef: RefObject<HTMLElement>;
+    isOpen: boolean;
+    onClose: (reason: CloseReason) => void;
+}) => void;
+export declare const targetWithinSubPopup: (source: HTMLElement | null, target: HTMLElement) => boolean;
+export declare const useClickAway: ClickawayHook;

package/types/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, S extends SelectionStrategy = "default"> extends Partial<Omit<DropdownHookProps, "onKeyDown">>, Omit<ListHookProps<Item, S>, "containerRef"> {
+    itemToString?: (item: Item) => string;
+    listRef: RefObject<HTMLDivElement>;
+}
+export interface DropdownListHookResult<Item> extends Partial<ListHookResult<Item>>, Partial<DropdownHookResult> {
+    onOpenChange: any;
+    triggerLabel?: string;
+}
+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/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/editable/editable-utils.d.ts

@@ -0,0 +1,2 @@
+import { ClientSideValidationChecker, EditValidationRule } from "@vuu-ui/vuu-table-types";
+export declare const buildValidationChecker: (rules: EditValidationRule[]) => ClientSideValidationChecker;

package/types/editable/index.d.ts

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

package/types/editable/useEditableText.d.ts

@@ -0,0 +1,19 @@
+import { ClientSideValidationChecker, DataItemCommitHandler } from "@vuu-ui/vuu-table-types";
+import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { FocusEventHandler, FormEventHandler, KeyboardEvent } from "react";
+export declare const WarnCommit: () => Promise<true>;
+export interface EditableTextHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
+    clientSideEditValidationCheck?: ClientSideValidationChecker;
+    initialValue?: T;
+    onCommit: DataItemCommitHandler<T>;
+    type?: "string" | "number" | "boolean";
+}
+export declare const useEditableText: <T extends string | number = string>({ clientSideEditValidationCheck, initialValue, onCommit, type, }: EditableTextHookProps<T>) => {
+    inputProps: {
+        onBlur: FocusEventHandler<HTMLElement>;
+        onKeyDown: (evt: KeyboardEvent<HTMLElement>) => void;
+    };
+    onChange: FormEventHandler<Element>;
+    value: string | T;
+    warningMessage: string | undefined;
+};

package/types/editable-label/EditableLabel.d.ts

@@ -0,0 +1,19 @@
+import { ForwardedRef, HTMLAttributes } from "react";
+export type ExitEditModeHandler = (originalLabel: string | undefined, editedLabel: string | undefined, allowDeactivation?: boolean, editCancelled?: boolean) => void;
+export interface EditAPI {
+    beginEdit: () => void;
+}
+export declare const NullEditAPI: EditAPI;
+export interface EditableLabelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    className?: string;
+    defaultEditing?: boolean;
+    defaultValue?: string;
+    editLabelApiRef?: ForwardedRef<EditAPI>;
+    editing?: boolean;
+    onEnterEditMode: () => void;
+    onChange?: (value: string) => void;
+    onExitEditMode: ExitEditModeHandler;
+    defaultIsEditing?: boolean;
+    value?: string;
+}
+export declare const EditableLabel: import("react").ForwardRefExoticComponent<EditableLabelProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/editable-label/index.d.ts

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

package/types/expando-input/ExpandoInput.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VuuInputProps } from "../vuu-input";
+export interface ExpandoInputProps extends Omit<VuuInputProps, "onCommit"> {
+    onCommit?: VuuInputProps["onCommit"];
+}
+export declare const ExpandoInput: import("react").ForwardRefExoticComponent<ExpandoInputProps & import("react").RefAttributes<HTMLDivElement>>;

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

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

package/types/icon-button/Icon.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    size?: number;
+}
+export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => JSX.Element;

package/types/icon-button/IconButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ButtonProps } from "@salt-ds/core";
+export interface IconButtonProps extends Omit<ButtonProps, "children"> {
+    icon: string;
+    size?: number;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export * from "./Icon";
+export * from "./IconButton";

package/types/index.d.ts

@@ -0,0 +1,27 @@
+export * from "./calendar";
+export * from "./combo-box";
+export * from "./common-hooks";
+export * from "./cycle-state-button";
+export * from "./date-input";
+export * from "./drag-drop";
+export * from "./date-popup";
+export * from "./drag-drop";
+export * from "./dropdown";
+export * from "./editable";
+export * from "./editable-label";
+export * from "./expando-input";
+export * from "./icon-button";
+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/inputs/Checkbox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type CheckboxProps = {
+    onToggle: () => void;
+    className?: string;
+    checked: boolean;
+    label: string;
+};
+export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+export {};

package/types/inputs/RadioButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type RadioButtonProps = {
+    onClick: () => void;
+    checked: boolean;
+    label: string;
+    groupName: string;
+};
+export declare const RadioButton: (props: RadioButtonProps) => JSX.Element;
+export {};

package/types/inputs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Checkbox";
+export * from "./RadioButton";

package/types/instrument-picker/InstrumentPicker.d.ts

@@ -0,0 +1,24 @@
+import { DataSourceRowObject, TableSchema } from "@vuu-ui/vuu-data-types";
+import { TableProps } from "@vuu-ui/vuu-table";
+import { ColumnMap } from "@vuu-ui/vuu-utils";
+import { HTMLAttributes } from "react";
+import { OpenChangeHandler } from "../dropdown";
+export interface InstrumentPickerProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect">, Pick<TableProps, "onSelect"> {
+    TableProps: Pick<TableProps, "config" | "dataSource">;
+    columnMap: ColumnMap;
+    disabled?: boolean;
+    /**
+     * Used to form the display value to render in input following selection. If
+     * not provided, default will be the values from rendered columns.
+     *
+     * @param row DataSourceRow
+     * @returns string
+     */
+    itemToString?: (row: DataSourceRowObject) => string;
+    onClose?: () => void;
+    onOpenChange?: OpenChangeHandler;
+    schema: TableSchema;
+    searchColumns: string[];
+    width?: number;
+}
+export declare const InstrumentPicker: import("react").ForwardRefExoticComponent<InstrumentPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/instrument-picker/SearchCell.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+export declare const SearchCell: ({ column, columnMap, row, }: TableCellRendererProps) => JSX.Element;

package/types/instrument-picker/index.d.ts

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

package/types/instrument-picker/moving-window.d.ts

@@ -0,0 +1,14 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export declare class MovingWindow {
+    data: DataSourceRow[];
+    rowCount: number;
+    private range;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange({ from, to }: VuuRange): void;
+    getSelectedRows(): DataSourceRow[];
+}

package/types/instrument-picker/useDataSource.d.ts

@@ -0,0 +1,6 @@
+import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data-types";
+export interface DataSourceHookProps {
+    dataSource: DataSource;
+    instruments: string[];
+}
+export declare const useDataSource: ({ dataSource }: DataSourceHookProps) => DataSourceRow[];

package/types/instrument-picker/useInstrumentPicker.d.ts

@@ -0,0 +1,28 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { ColumnDescriptor, TableRowSelectHandler } from "@vuu-ui/vuu-table-types";
+import { ChangeEvent } from "react";
+import { OpenChangeHandler } from "../dropdown";
+import { InstrumentPickerProps } from "./InstrumentPicker";
+export interface InstrumentPickerHookProps extends Pick<InstrumentPickerProps, "columnMap" | "itemToString" | "onOpenChange" | "onSelect" | "searchColumns"> {
+    columns: ColumnDescriptor[];
+    dataSource: DataSource;
+    defaultIsOpen?: boolean;
+    isOpen?: boolean;
+}
+export declare const useInstrumentPicker: ({ dataSource, defaultIsOpen, isOpen: isOpenProp, itemToString, onOpenChange, onSelect, searchColumns, }: InstrumentPickerHookProps) => {
+    highlightedIndex: number | undefined;
+    inputProps: {
+        inputProps: {
+            autoComplete: string;
+            onKeyDown: import("react").KeyboardEventHandler<Element>;
+        };
+        onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
+    };
+    isOpen: boolean;
+    onOpenChange: OpenChangeHandler;
+    tableHandlers: {
+        onSelect: TableRowSelectHandler;
+    };
+    tableRef: import("react").RefObject<HTMLDivElement>;
+    value: string;
+};

package/types/instrument-search/InstrumentSearch.d.ts

@@ -0,0 +1,11 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { TableProps } from "@vuu-ui/vuu-table";
+import { HTMLAttributes } from "react";
+export interface InstrumentSearchProps extends HTMLAttributes<HTMLDivElement> {
+    TableProps?: Partial<TableProps>;
+    autoFocus?: boolean;
+    dataSource: DataSource;
+    placeHolder?: string;
+    searchColumns?: string[];
+}
+export declare const InstrumentSearch: ({ TableProps, autoFocus, className, dataSource: dataSourceProp, placeHolder, searchColumns, ...htmlAttributes }: InstrumentSearchProps) => JSX.Element;

package/types/instrument-search/SearchCell.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+export declare const SearchCell: ({ column, columnMap, row, }: TableCellRendererProps) => JSX.Element;

package/types/instrument-search/index.d.ts

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

package/types/instrument-search/moving-window.d.ts

@@ -0,0 +1,14 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export declare class MovingWindow {
+    data: DataSourceRow[];
+    rowCount: number;
+    private range;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange({ from, to }: VuuRange): void;
+    getSelectedRows(): DataSourceRow[];
+}

package/types/instrument-search/useDataSource.d.ts

@@ -0,0 +1,6 @@
+import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data-types";
+export interface DataSourceHookProps {
+    dataSource: DataSource;
+    instruments: string[];
+}
+export declare const useDataSource: ({ dataSource }: DataSourceHookProps) => DataSourceRow[];

package/types/instrument-search/useInstrumentSearch.d.ts

@@ -0,0 +1,13 @@
+import { FormEventHandler } from "react";
+import { InstrumentSearchProps } from "./InstrumentSearch";
+export interface InstrumentSearchHookProps extends Pick<InstrumentSearchProps, "dataSource" | "searchColumns"> {
+    label?: string;
+}
+export declare const useInstrumentSearch: ({ dataSource, searchColumns, }: InstrumentSearchHookProps) => {
+    dataSource: import("packages/vuu-data-types").DataSource;
+    onChange: FormEventHandler<Element>;
+    searchState: {
+        searchText: string;
+        filter: string;
+    };
+};

package/types/list/CheckboxIcon.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {
+    checked?: boolean;
+    disabled?: boolean;
+}
+export declare const CheckboxIcon: ({ checked, disabled, ...htmlAttributes }: CheckboxIconProps) => JSX.Element;

package/types/list/ChevronIcon.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+type Direction = "up" | "down" | "left" | "right";
+interface ChevronProps extends HTMLAttributes<HTMLSpanElement> {
+    direction: Direction;
+}
+export declare const ChevronIcon: (props: ChevronProps) => JSX.Element;
+export {};