@vuu-ui/vuu-ui-controls 0.0.26

package/types/toolbar/index.d.ts

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

package/types/toolbar/toolbar-dom-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const getIndexOfItem: (container: HTMLElement | null, query: string) => number;
+export declare const getIndexOfSelectedTab: (container: HTMLElement | null) => number;
+export declare const getIndexOfEditedItem: (container: HTMLElement | null) => number;

package/types/toolbar/useKeyboardNavigation.d.ts

@@ -0,0 +1,32 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { FocusEvent, FocusEventHandler, KeyboardEvent, MouseEvent as ReactMouseEvent, MouseEventHandler, RefObject } from "react";
+import { NavigationOutOfBoundsHandler } from "./Toolbar";
+import { PopupCloseCallback } from "@vuu-ui/vuu-popups";
+export interface ContainerNavigationProps {
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+interface ToolbarNavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;
+    orientation: orientationType;
+}
+interface ToolbarNavigationHookResult {
+    containerProps: ContainerNavigationProps;
+    focusableIdx: number;
+    highlightedIdx: number;
+    focusItem: (itemIndex: number, immediateFocus?: boolean, withKeyboard?: boolean, delay?: number) => void;
+    focusVisible: number;
+    focusIsWithinComponent: boolean;
+    onClick: (evt: ReactMouseEvent, tabIndex: number) => void;
+    onFocus: (evt: FocusEvent<HTMLElement>) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    onOverflowMenuClose?: PopupCloseCallback;
+    setHighlightedIdx: (highlightedIndex: number) => void;
+}
+export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, onNavigateOutOfBounds, orientation, }: ToolbarNavigationHookProps) => ToolbarNavigationHookResult;
+export {};

package/types/toolbar/useSelection.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent, RefObject } from "react";
+import { SelectionStrategy, SpecialKeyMultipleSelection } from "../common-hooks";
+export interface SelectionHookProps {
+    containerRef: RefObject<HTMLElement>;
+    defaultSelected?: number[];
+    highlightedIdx: number;
+    itemQuery: string;
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    selected?: number[];
+    selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection;
+}
+export interface ItemHandlers {
+    onClick?: (e: MouseEvent, itemIndex: number) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+}
+export interface SelectionHookResult {
+    activateItem: (tabIndex: number) => void;
+    itemHandlers: ItemHandlers;
+    isControlled: boolean;
+    selected: number[];
+}
+export declare const useSelection: ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp, selectionStrategy, }: SelectionHookProps) => SelectionHookResult;

package/types/toolbar/useToolbar.d.ts

@@ -0,0 +1,28 @@
+import { KeyboardEvent, MouseEvent as ReactMouseEvent, RefObject } from "react";
+import { OverflowItem } from "../overflow-container";
+import { ToolbarProps } from "./Toolbar";
+export interface ToolbarHookProps extends Pick<ToolbarProps, "activeItemIndex" | "defaultActiveItemIndex" | "onActiveChange" | "onNavigateOutOfBounds">, Required<Pick<ToolbarProps, "orientation" | "selectionStrategy">> {
+    containerRef: RefObject<HTMLElement>;
+    itemQuery?: string;
+}
+export declare const useToolbar: ({ activeItemIndex: activeItemIndexProp, defaultActiveItemIndex, containerRef, itemQuery, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, }: ToolbarHookProps) => {
+    activeItemIndex: number[];
+    focusableIdx: number;
+    focusVisible: number;
+    containerProps: {
+        onSwitchWrappedItemIntoView: (item: OverflowItem) => void;
+        onBlur: import("react").FocusEventHandler<Element>;
+        onFocus: import("react").FocusEventHandler<Element>;
+        onMouseDownCapture: import("react").MouseEventHandler<Element>;
+        onMouseLeave: import("react").MouseEventHandler<Element>;
+        PopupMenuProps: {
+            onKeyDown: (evt: KeyboardEvent) => void;
+            onMenuClose: import("packages/vuu-popups/src").PopupCloseCallback | undefined;
+        };
+    };
+    itemProps: {
+        onClick: (evt: ReactMouseEvent<HTMLElement>) => void;
+        onFocus: (evt: import("react").FocusEvent<HTMLElement, Element>) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+    };
+};

package/types/tree/Tree.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from "react";
+import type { TreeSourceNode } from "./treeTypes";
+import { GroupSelection, TreeSelection } from "./use-selection";
+export interface TreeNodeProps extends HTMLAttributes<HTMLLIElement> {
+    idx?: number;
+}
+export declare const TreeNode: ({ children, idx, ...props }: TreeNodeProps) => JSX.Element;
+export interface TreeProps extends HTMLAttributes<HTMLUListElement> {
+    allowDragDrop?: boolean;
+    defaultSelected?: any;
+    groupSelection?: GroupSelection;
+    onHighlight?: (index: number) => void;
+    onSelectionChange?: (selected: TreeSourceNode[]) => void;
+    revealSelected?: boolean;
+    selected?: string[];
+    selection?: TreeSelection;
+    source: TreeSourceNode[];
+}
+export declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLUListElement>>;

package/types/tree/hierarchical-data-utils.d.ts

@@ -0,0 +1,8 @@
+import { NormalisedTreeSourceNode } from "./treeTypes";
+export declare const getNodeParentPath: ({ id }: NormalisedTreeSourceNode) => string | null | undefined;
+export declare const isGroupNode: (node: NormalisedTreeSourceNode) => boolean;
+export declare const isCollapsibleGroupNode: (node: NormalisedTreeSourceNode) => boolean;
+export declare const isHeader: (node: NormalisedTreeSourceNode) => boolean;
+export declare const getNodeById: (nodes: NormalisedTreeSourceNode[], id: string) => NormalisedTreeSourceNode | undefined;
+export declare const getIndexOfNode: (treeNodes: NormalisedTreeSourceNode[], node: NormalisedTreeSourceNode) => number | undefined;
+export declare const replaceNode: (nodes: NormalisedTreeSourceNode[], id: string, props: Partial<NormalisedTreeSourceNode>) => NormalisedTreeSourceNode[];

package/types/tree/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Tree";
+export * from "./Tree";
+export * from "./treeTypes";
+export * from "./use-items-with-ids";

package/types/tree/key-code.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEvent } from "react";
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const Backspace = "Backspace";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Delete = "Delete";
+export declare const isCharacterKey: (evt: KeyboardEvent) => boolean | undefined;
+export declare const isNavigationKey: ({ key }: KeyboardEvent, orientation?: string) => boolean;

package/types/tree/list-dom-utils.d.ts

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

package/types/tree/treeTypeUtils.d.ts

@@ -0,0 +1,2 @@
+import type { NonLeafNode, NormalisedTreeSourceNode } from "./treeTypes";
+export declare const isExpanded: (node: NormalisedTreeSourceNode) => node is NonLeafNode;

package/types/tree/treeTypes.d.ts

@@ -0,0 +1,17 @@
+export interface TreeSourceNode {
+    id: string;
+    icon?: string;
+    header?: boolean;
+    label: string;
+    childNodes?: TreeSourceNode[];
+}
+export interface NormalisedTreeSourceNode extends TreeSourceNode {
+    childNodes?: NormalisedTreeSourceNode[];
+    count: number;
+    expanded?: boolean;
+    index: number;
+    level: number;
+}
+export interface NonLeafNode extends NormalisedTreeSourceNode {
+    childNodes: NormalisedTreeSourceNode[];
+}

package/types/tree/use-collapsible-groups.d.ts

@@ -0,0 +1,18 @@
+import { KeyboardEvent, MouseEvent } from "react";
+import { NormalisedTreeSourceNode } from "./treeTypes";
+export interface CollapsibleGroupsHookProps {
+    collapsibleHeaders?: boolean;
+    highlightedIdx: number;
+    treeNodes: NormalisedTreeSourceNode[];
+    setVisibleData: (nodes: NormalisedTreeSourceNode[]) => void;
+    source: NormalisedTreeSourceNode[];
+}
+export interface CollapsibleHookResult {
+    listHandlers: {
+        onKeyDown?: (e: KeyboardEvent) => void;
+    };
+    listItemHandlers: {
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export declare const useCollapsibleGroups: ({ collapsibleHeaders, highlightedIdx, treeNodes, setVisibleData, source, }: CollapsibleGroupsHookProps) => CollapsibleHookResult;

package/types/tree/use-hierarchical-data.d.ts

@@ -0,0 +1,6 @@
+import { NormalisedTreeSourceNode } from "./treeTypes";
+export declare const useHierarchicalData: (source: NormalisedTreeSourceNode[]) => {
+    data: NormalisedTreeSourceNode[];
+    indexPositions: NormalisedTreeSourceNode[];
+    setData: (value: NormalisedTreeSourceNode[]) => void;
+};

package/types/tree/use-items-with-ids.d.ts

@@ -0,0 +1,8 @@
+import { NormalisedTreeSourceNode, TreeSourceNode } from "./treeTypes";
+type SourceItemById = (id: string, target?: NormalisedTreeSourceNode[]) => TreeSourceNode | undefined;
+export declare const useItemsWithIds: (sourceProp: TreeSourceNode[], idRoot?: string, { collapsibleHeaders, defaultExpanded, revealSelected, }?: {
+    collapsibleHeaders?: undefined;
+    defaultExpanded?: boolean | undefined;
+    revealSelected?: boolean | undefined;
+}) => [number, NormalisedTreeSourceNode[], SourceItemById];
+export {};

package/types/tree/use-keyboard-navigation.d.ts

@@ -0,0 +1,26 @@
+import { KeyboardEvent } from "react";
+import { NormalisedTreeSourceNode } from "./treeTypes";
+export interface KeyboardNavigationHookProps {
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    onHighlight?: (highlightedIdx: number) => void;
+    onKeyboardNavigation?: (evt: KeyboardEvent, nextIdx: number) => void;
+    selected: string[];
+    treeNodes: NormalisedTreeSourceNode[];
+}
+export declare const useKeyboardNavigation: ({ defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, treeNodes, onHighlight, onKeyboardNavigation, selected, }: KeyboardNavigationHookProps) => {
+    focusVisible: number;
+    controlledHighlighting: boolean;
+    highlightedIdx: number;
+    hiliteItemAtIndex: (idx: any) => void;
+    keyBoardNavigation: import("react").MutableRefObject<boolean>;
+    listProps: {
+        onBlur: () => void;
+        onFocus: () => void;
+        onKeyDown: (e: any) => void;
+        onMouseDownCapture: () => void;
+        onMouseMove: () => void;
+        onMouseLeave: () => void;
+    };
+    setIgnoreFocus: (value: boolean) => boolean;
+};

package/types/tree/use-selection.d.ts

@@ -0,0 +1,31 @@
+import { KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
+import { NormalisedTreeSourceNode } from "./treeTypes";
+export type TreeSelection = "none" | "single" | "checkbox" | "multi" | "extended";
+export declare const SINGLE = "single";
+export declare const CHECKBOX = "checkbox";
+export declare const MULTI = "multi";
+export declare const EXTENDED = "extended";
+export type GroupSelection = "none" | "single" | "cascade";
+export type TreeNodeSelectionHandler = (evt: SyntheticEvent, selected: string[]) => void;
+export declare const groupSelectionEnabled: (groupSelection: GroupSelection) => boolean;
+export interface SelectionHookProps {
+    defaultSelected?: string[];
+    highlightedIdx: number;
+    onChange: TreeNodeSelectionHandler;
+    selected?: string[];
+    selection: TreeSelection;
+    selectionKeys?: string[];
+    treeNodes: NormalisedTreeSourceNode[];
+}
+export interface SelectionHookResult {
+    listHandlers: {
+        onKeyDown?: (evt: KeyboardEvent) => void;
+        onKeyboardNavigation?: (evt: KeyboardEvent, currentIndex: number) => void;
+    };
+    listItemHandlers: {
+        onClick?: (evt: MouseEvent) => void;
+    };
+    selected: string[];
+    setSelected: (selected: string[]) => void;
+}
+export declare const useSelection: ({ defaultSelected, highlightedIdx, treeNodes, onChange, selected: selectedProp, selection, selectionKeys, }: SelectionHookProps) => SelectionHookResult;

package/types/tree/use-tree-keyboard-navigation.d.ts

@@ -0,0 +1,12 @@
+import { NormalisedTreeSourceNode } from "./treeTypes";
+export interface TreeKeyboardNavigationHookProps {
+    highlightedIdx: number;
+    hiliteItemAtIndex: (idx: number) => void;
+    indexPositions: NormalisedTreeSourceNode[];
+    source: NormalisedTreeSourceNode[];
+}
+export declare const useTreeKeyboardNavigation: ({ highlightedIdx, hiliteItemAtIndex, indexPositions, source, }: TreeKeyboardNavigationHookProps) => {
+    listHandlers: {
+        onKeyDown: (e: any) => void;
+    };
+};

package/types/tree/use-viewport-tracking.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare const useViewportTracking: (root: RefObject<HTMLElement>, highlightedIdx: number, stickyHeaders?: boolean) => import("react").MutableRefObject<boolean>;

package/types/tree/useTree.d.ts

@@ -0,0 +1,30 @@
+import { GroupSelection, TreeNodeSelectionHandler, TreeSelection } from "./use-selection";
+import type { NormalisedTreeSourceNode } from "./treeTypes";
+export interface TreeHookProps {
+    defaultSelected?: string[];
+    groupSelection: GroupSelection;
+    onChange: TreeNodeSelectionHandler;
+    onHighlight?: (index: number) => void;
+    selected?: string[];
+    selection: TreeSelection;
+    sourceWithIds: NormalisedTreeSourceNode[];
+}
+export declare const useTree: ({ defaultSelected, sourceWithIds, onChange, onHighlight: onHighlightProp, selected: selectedProp, selection, }: TreeHookProps) => {
+    focusVisible: number;
+    highlightedIdx: number;
+    hiliteItemAtIndex: (idx: any) => void;
+    listProps: {
+        "aria-activedescendant": string | undefined;
+        onBlur: () => void;
+        onFocus: () => void;
+        onKeyDown: (evt: any) => void;
+        onMouseDownCapture: () => void;
+        onMouseLeave: () => void;
+        onMouseMove: () => void;
+    };
+    listItemHandlers: {
+        onClick: (evt: any) => void;
+    };
+    selected: string[];
+    visibleData: NormalisedTreeSourceNode[];
+};

package/types/utils/escapeRegExp.d.ts

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

package/types/utils/forwardCallbackProps.d.ts

@@ -0,0 +1,3 @@
+type Props = Record<string, unknown>;
+export declare const forwardCallbackProps: <P1 extends Props, P2 extends Props>(ownProps: P1, overrideProps: P2) => P1 & P2;
+export {};

package/types/utils/index.d.ts

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

package/types/utils/isOverflowElement.d.ts

@@ -0,0 +1 @@
+export declare const isOverflowElement: (element: HTMLElement | null) => boolean;

package/types/vuu-input/VuuInput.d.ts

@@ -0,0 +1,16 @@
+import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { InputProps } from "@salt-ds/core";
+import { ForwardedRef, ReactElement, SyntheticEvent } from "react";
+export type Commithandler<T extends VuuRowDataItemType = string> = (evt: SyntheticEvent<HTMLInputElement>, value: T) => void;
+export interface VuuInputProps<T extends VuuRowDataItemType = string> extends InputProps {
+    errorMessage?: string;
+    onCommit: Commithandler<T>;
+    type?: T;
+}
+/**
+ * A variant of Salt Input that provides a commit callback prop,
+ * TODO along with cancel behaviour ?
+ */
+export declare const VuuInput: <T extends VuuRowDataItemType = string>(props: VuuInputProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReactElement<VuuInputProps<T>, string | import("react").JSXElementConstructor<any>>;

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

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