@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.4

package/types/list/listTypes.d.ts

@@ -1,200 +0,0 @@
-import React, { FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, PropsWithChildren, ReactElement, 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>) => ReactElement;
-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 | null>;
-    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 | null>;
-    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

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

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

@@ -1,19 +0,0 @@
-import { RefCallback } from "react";
-import { MeasuredSize } from "../measured-container";
-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

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

@@ -1,14 +0,0 @@
-import { HTMLAttributes } from "react";
-import { MeasuredSize } from "./useMeasuredContainer";
-export interface MeasuredContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
-    /**
-     * 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

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

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

@@ -1,23 +0,0 @@
-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 | null>;
-    cssSize: CssSize;
-    outerSize: CssSize;
-    innerSize?: MeasuredSize;
-}
-export declare const reduceSizeHeight: (size: MeasuredSize, value: number) => MeasuredSize;
-export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, onResize: onResizeProp, width, }: MeasuredProps) => MeasuredContainerHookResult;

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

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

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

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

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

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

@@ -1,19 +0,0 @@
-import { OverflowItem } from "./overflow-utils";
-import { OverflowContainerProps } from "./OverflowContainer";
-import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-context-menu";
-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?: import("react").ReactElement;
-    dropIndicator?: import("react").ReactElement;
-    draggedItemIndex?: number;
-    isDragging: boolean;
-    isScrolling: import("react").RefObject<boolean>;
-    revealOverflowedItems?: boolean;
-    menuActionHandler: MenuActionHandler;
-    menuBuilder: MenuBuilder;
-    onItemMouseDown: import("react").MouseEventHandler | undefined;
-    rootRef: (el: HTMLDivElement | null) => void;
-};

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

@@ -1,7 +0,0 @@
-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) => import("react/jsx-runtime").JSX.Element>;

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

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

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

@@ -1,11 +0,0 @@
-import { PopupMenuProps } from "@vuu-ui/vuu-popups";
-import { ButtonProps } from "@salt-ds/core";
-import { HTMLAttributes } from "react";
-export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick">, Pick<ButtonProps, "onClick"> {
-    ButtonProps?: Partial<Omit<ButtonProps, "onClick" | "variant">>;
-    PopupMenuProps?: Partial<PopupMenuProps>;
-    disabled?: boolean;
-    segmented?: boolean;
-    variant?: ButtonProps["variant"];
-}
-export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +0,0 @@
-import { SplitButtonProps } from "./SplitButton";
-export interface SplitStateButtonProps extends SplitButtonProps {
-    selected: boolean;
-}
-export declare const SplitStateButton: import("react").ForwardRefExoticComponent<SplitStateButtonProps & import("react").RefAttributes<HTMLDivElement>>;

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

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