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

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

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from "react";
+import { CollectionItem, CollectionOptions } from "../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,3 @@
+export * from "./collection-item-utils";
+export * from "./filter-utils";
+export * from "./isSelected";

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

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

package/types/list/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./Highlighter";
+export * from "./ListItem";
+export * from "./List";
+export * from "./listTypes";
+export * from "./ListItemHeader";
+export * from "./ListItemGroup";
+export * from "./useList";
+export * from "./VirtualizedList";

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,206 @@
+import React, { FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, PropsWithChildren, Ref, RefObject } from "react";
+import { CollectionHookResult, CollectionItem, ListHandlers, NavigationHookResult, ScrollingAPI, SelectHandler, SelectionChangeHandler, SelectionHookResult, SelectionProps, SelectionStrategy, ViewportTrackingResult } from "./common-hooks";
+import { DragHookResult, dragStrategy } 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 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, Selection extends SelectionStrategy = "default"> extends SelectionProps<Item, Selection>, Omit<HTMLAttributes<HTMLDivElement>, "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;
+    onHighlight?: (index: number) => void;
+    onMoveListItem?: (fromIndex: number, toIndex: number) => void;
+    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>>;
+    /**
+     * The keyboard keys used to effect selection, defaults to SPACE and ENTER
+     * TODO maybe this belongs on the SelectionProps interface ?
+     */
+    selectionKeys?: string[];
+    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, Selection extends SelectionStrategy> extends Omit<SelectionProps<CollectionItem<Item>, Selection>, "onSelect" | "onSelectionChange"> {
+    allowDragDrop?: boolean | dragStrategy;
+    collapsibleHeaders?: boolean;
+    collectionHook: CollectionHookResult<Item>;
+    containerRef: RefObject<HTMLElement>;
+    contentRef?: RefObject<HTMLElement>;
+    defaultHighlightedIndex?: number;
+    disabled?: boolean;
+    disableAriaActiveDescendant?: boolean;
+    disableHighlightOnFocus?: boolean;
+    disableTypeToSelect?: boolean;
+    focusVisible?: boolean;
+    highlightedIndex?: number;
+    id?: string;
+    label?: string;
+    listHandlers?: ListHandlers;
+    onHighlight?: (index: number) => void;
+    onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
+    onKeyDown?: (evt: KeyboardEvent) => void;
+    onMoveListItem?: (fromIndex: number, toIndex: number) => void;
+    onSelect?: SelectHandler<Item>;
+    onSelectionChange?: SelectionChangeHandler<Item, Selection>;
+    restoreLastFocus?: boolean;
+    selectionKeys?: string[];
+    stickyHeaders?: boolean;
+    tabToSelect?: boolean;
+    viewportRange?: ViewportRange;
+}
+export interface ListHookResult<Item, Selection extends SelectionStrategy> extends Partial<ViewportTrackingResult<Item>>, Pick<SelectionHookResult<Item, Selection>, "selected" | "setSelected">, Partial<Omit<NavigationHookResult, "listProps">>, Omit<DragHookResult, "isDragging" | "isScrolling"> {
+    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, Selection_1 extends SelectionStrategy = "default">({ allowDragDrop, collapsibleHeaders, collectionHook: dataHook, containerRef, contentRef, defaultHighlightedIndex, defaultSelected, disabled, disableAriaActiveDescendant, disableHighlightOnFocus, disableTypeToSelect, highlightedIndex: highlightedIndexProp, id, label, listHandlers: listHandlersProp, onHighlight, onKeyboardNavigation, onKeyDown, onMoveListItem, onSelect, onSelectionChange, restoreLastFocus, selected, selectionStrategy, selectionKeys, stickyHeaders, tabToSelect, viewportRange, }: ListHookProps<Item, Selection_1>) => ListHookResult<Item, Selection_1>;

package/types/list/useListHeight.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+export interface ListHeightHookProps {
+    borderless?: boolean;
+    displayedItemCount: number;
+    getItemHeight?: (index: number) => number;
+    height?: number | string;
+    itemCount: number;
+    itemGapSize: number;
+    itemHeight?: number;
+    rootRef: RefObject<HTMLElement>;
+    rowHeightRef: RefObject<HTMLElement | null>;
+}
+export interface HeightHookResult {
+    contentHeight: number;
+    listClientHeight?: number;
+    listItemHeight: number;
+    listHeight: number | string;
+}
+export declare const useListHeight: ({ borderless, displayedItemCount, getItemHeight, height, itemCount, itemGapSize, itemHeight: itemHeightProp, rootRef, rowHeightRef, }: 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/list/useVirtualization.d.ts

@@ -0,0 +1,15 @@
+import { CollectionItem } from "./common-hooks";
+import { ViewportRange } from "./useScrollPosition";
+/**
+ * [ item key, total height before the item, next row index, CollectionItem<Item>]
+ * e.g. first item: [0, 0, 1, data[0]]
+ */
+export type Row<Item> = [number, number, number, CollectionItem<Item>];
+interface VirtualizationHookProps<Item> {
+    data: CollectionItem<Item>[];
+    listItemGapSize?: number;
+    listItemHeight: number;
+    viewportRange: ViewportRange;
+}
+export declare const useVirtualization: <Item>({ data, listItemGapSize, listItemHeight, viewportRange, }: VirtualizationHookProps<Item>) => Row<Item>[];
+export {};

package/types/utils/escapeRegExp.d.ts

@@ -0,0 +1 @@
+export declare function escapeRegExp(string: string): string;

package/types/utils/index.d.ts

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