@vuu-ui/vuu-data-react 0.13.45 → 0.13.46

package/types/vuu-ui-controls/src/tabs-next/TabsNextContext.d.ts

@@ -0,0 +1,21 @@
+import { type Dispatch, type MutableRefObject, type SetStateAction, type SyntheticEvent } from "react";
+import type { useCollection } from "./hooks/useCollection";
+export interface Item {
+    id: string;
+    value: string;
+    element: HTMLElement;
+}
+export interface TabsNextContextValue extends Omit<ReturnType<typeof useCollection>, "registerItem"> {
+    registerTab: (item: Item) => () => void;
+    registerPanel: (id: string, value: string) => () => void;
+    getPanelId: (value: string) => string | undefined;
+    getTabId: (value: string) => string | undefined;
+    selected?: string;
+    setSelected: (event: SyntheticEvent, value: string) => void;
+    activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
+    returnFocus: MutableRefObject<string | undefined>;
+    menuOpen: boolean;
+    setMenuOpen: Dispatch<SetStateAction<boolean>>;
+}
+export declare const TabsNextContext: import("react").Context<TabsNextContextValue>;
+export declare function useTabsNext(): TabsNextContextValue;

package/types/vuu-ui-controls/src/tabs-next/hooks/useCollection.d.ts

@@ -0,0 +1,18 @@
+export interface Item {
+    id: string;
+    element?: HTMLElement | null;
+    value: string;
+}
+interface UseCollectionProps {
+    wrap: boolean;
+}
+export declare function useCollection({ wrap }: UseCollectionProps): {
+    registerItem: (item: Item) => () => import("react").RefObject<Item[]>;
+    item: (id?: string | null) => Item | null;
+    getNext: (current: string) => Item | null;
+    getPrevious: (current: string) => Item | null;
+    getFirst: () => Item | null;
+    getLast: () => Item | null;
+    items: Item[];
+};
+export {};

package/types/vuu-ui-controls/src/tabs-next/hooks/useFocusOutside.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useFocusOutside(elementRef: RefObject<HTMLElement | null>, onFocusOutside: () => void, enabled: boolean, ignore?: string): void;

package/types/vuu-ui-controls/src/tabs-next/hooks/useOverflow.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type RefObject } from "react";
+import type { Item } from "./useCollection";
+interface UseOverflowProps {
+    container: RefObject<HTMLElement | null>;
+    selected?: string;
+    children: ReactNode;
+    tabs: Item[];
+    overflowButton: RefObject<HTMLButtonElement | null>;
+}
+export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[], (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[], false] | readonly [(string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[], readonly [], true];
+export {};

package/types/vuu-ui-controls/src/tabs-next/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./TabNext";
+export * from "./TabListNext";
+export * from "./TabsNext";
+export * from "./TabNextPanel";
+export * from "./TabBar";
+export * from "./TabNextTrigger";
+export * from "./TabNextAction";

package/types/vuu-ui-controls/src/tabstrip/Tab.d.ts

@@ -0,0 +1,27 @@
+import { KeyboardEvent, MouseEvent } from "react";
+import { EditableLabelProps } from "../editable-label";
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
+    ariaControls?: import("react").AriaAttributes["aria-controls"];
+    closeable?: boolean;
+    draggable?: boolean;
+    dragging?: boolean;
+    editable?: boolean;
+    editing?: EditableLabelProps["editing"];
+    focused?: boolean;
+    focusVisible?: boolean;
+    focusedChildIndex?: number;
+    location?: string;
+    selected?: boolean;
+    showMenuButton?: boolean;
+    index?: number;
+    label?: EditableLabelProps["defaultValue"];
+    onClick?: (e: MouseEvent<HTMLElement>, index: number) => void;
+    onClose?: (index: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: import("./TabsTypes").exitEditHandler;
+    onKeyUp?: (e: KeyboardEvent, index: number) => void;
+    onMenuAction?: MenuActionHandler;
+    onMenuClose?: () => void;
+    orientation?: "horizontal" | "vertical";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/vuu-ui-controls/src/tabstrip/TabMenu.d.ts

@@ -0,0 +1,23 @@
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+export type TabContextMenuOptions = {
+    controlledComponentId?: string;
+    controlledComponentTitle?: string;
+    tabIndex: number;
+};
+export interface TabMenuProps {
+    allowClose: boolean;
+    allowRename: boolean;
+    index: number;
+    location?: string;
+    onMenuAction: MenuActionHandler;
+    onMenuClose?: () => void;
+    /**
+     * The id of associated component, if available
+     */
+    controlledComponentId?: string;
+    /**
+     * The label of Tab, if available
+     */
+    controlledComponentTitle?: string;
+}
+export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/vuu-ui-controls/src/tabstrip/TabMenuOptions.d.ts

@@ -0,0 +1,10 @@
+import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-context-menu";
+export type MenuOptions = {
+    [key: string]: unknown;
+};
+export interface TabMenuOptions {
+    tabIndex: number;
+}
+export declare const isTabMenuOptions: (options: unknown) => options is TabMenuOptions;
+export declare const closeCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
+export declare const renameCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;

package/types/vuu-ui-controls/src/tabstrip/TabsTypes.d.ts

@@ -0,0 +1,127 @@
+import type { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import type { orientationType } from "@vuu-ui/vuu-utils";
+import type { AriaAttributes, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement } from "react";
+import type { EditableLabelProps } from "../editable-label";
+export type ExitTabEditModeHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface FocusAPI {
+    focus: () => void;
+}
+export type navigationProps = Pick<TabProps, "onFocus" | "onKeyDown">;
+export type composableTabProps = navigationProps & Pick<TabProps, "onClick" | "onEnterEditMode" | "onExitEditMode" | "onMouseDown">;
+export type TabstripVariant = "primary" | "tertiary";
+export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     *  index value of Active Tab.
+     */
+    activeTabIndex: number;
+    /**
+     * Boolean that enables add new tab
+     */
+    allowAddTab?: boolean;
+    /**
+     * when true Tabs may be re-arranged by dragging individual Tabs to new position within Tabstrip.
+     */
+    allowDragDrop?: boolean;
+    /**
+     * when true Tabs may be closed by user. This can be overridden on each individual Tab
+     */
+    allowCloseTab?: boolean;
+    /**
+     * when true Tab labels may be edited by user. This can be overridden on each individual Tab
+     */
+    allowRenameTab?: boolean;
+    animateSelectionThumb?: boolean;
+    /**
+     * Boolean that indicates if tabs are centered on the container
+     */
+    centered?: boolean;
+    /**
+     *  index value of Selected Tab, used in uncontrolled mode
+     */
+    defaultActiveTabIndex?: number;
+    editing?: boolean;
+    keyBoardActivation?: "manual" | "automatic";
+    /**
+     * A custom context menu location for TabMenu, applied to all tabs
+     */
+    location?: string;
+    /**
+     * callback that fires when user has clicked Add Tab button.
+     * client is responsible for re-render with additional tab.
+     * It is also responsibility of client to select tne new tab
+     * by setting activeTabIndex, if that is the desired behaviour.
+     */
+    onAddTab?: () => void;
+    /**
+     * callback that fires when tab selection changes
+     */
+    onActiveChange?: (tabIndex: number) => void;
+    /**
+     * callback that fires when user has opted to remove tab.
+     * client is responsible for re-render with tab removed.
+     * It is also responsibility of client to select tne new tab
+     * by setting activeTabIndex, a suggested value for this is
+     * provided by newActiveTabIndex.
+     */
+    onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    /**
+     * vertical or horizontal (default)
+     */
+    orientation?: orientationType;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: ExitTabEditModeHandler;
+    /**
+     * Boolean that indicates whether to enable overflow dropdown or not
+     */
+    overflowMenu?: boolean;
+    promptForNewTabName?: boolean;
+    /**
+     * Should each tab render a popup menu. Default is false if tab is
+     * not closeable, not renameable and has no tab-location , otherwise true.
+     */
+    showTabMenuButton?: boolean;
+    /**
+     * An optional classname that will be added to each tab
+     */
+    tabClassName?: string;
+    /**
+     * An optional classifier, used to create a classname, intended
+     * for promary vs secondary bavigation.
+     */
+    variant?: "primary" | "secondary";
+}
+export type exitEditHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface responsiveDataAttributes {
+    "data-index": number;
+    "data-overflowed"?: boolean;
+    "data-priority": number;
+}
+export type TabProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
+    ariaControls?: AriaAttributes["aria-controls"];
+    closeable?: boolean;
+    draggable?: boolean;
+    dragging?: boolean;
+    editable?: boolean;
+    editing?: EditableLabelProps["editing"];
+    focused?: boolean;
+    focusVisible?: boolean;
+    focusedChildIndex?: number;
+    location?: string;
+    selected?: boolean;
+    showMenuButton?: boolean;
+    /**
+     * index is injected by the Tabstrip is need not be specified by client
+     */
+    index?: number;
+    label?: EditableLabelProps["defaultValue"];
+    onClick?: (e: MouseEvent<HTMLElement>, index: number) => void;
+    onClose?: (index: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: exitEditHandler;
+    onKeyUp?: (e: KeyboardEvent, index: number) => void;
+    onMenuAction?: MenuActionHandler;
+    onMenuClose?: () => void;
+    orientation?: "horizontal" | "vertical";
+};
+export type TabElement = ReactElement<TabProps>;

package/types/vuu-ui-controls/src/tabstrip/Tabstrip.d.ts

@@ -0,0 +1,2 @@
+import { TabstripProps } from "./TabsTypes";
+export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, tabClassName, variant, ...htmlAttributes }: TabstripProps) => import("react/jsx-runtime").JSX.Element;

package/types/vuu-ui-controls/src/tabstrip/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Tabstrip";
+export * from "./Tab";
+export * from "./TabsTypes";
+export * from "./tabstrip-dom-utils";
+export type { TabContextMenuOptions } from "./TabMenu";

package/types/vuu-ui-controls/src/tabstrip/tabstrip-dom-utils.d.ts

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

package/types/vuu-ui-controls/src/tabstrip/useAnimatedSelectionThumb.d.ts

@@ -0,0 +1,7 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { CSSProperties, RefObject } from "react";
+export declare const useAnimatedSelectionThumb: (containerRef: RefObject<HTMLElement | null>, activeTabIndex: number, orientation?: orientationType) => {
+    containerStyle: CSSProperties;
+    resumeAnimation: () => void;
+    suspendAnimation: () => void;
+};

package/types/vuu-ui-controls/src/tabstrip/useKeyboardNavigation.d.ts

@@ -0,0 +1,29 @@
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { FocusEvent, FocusEventHandler, KeyboardEvent, MouseEvent as ReactMouseEvent, MouseEventHandler, RefObject } from "react";
+export interface ContainerNavigationProps {
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+interface TabstripNavigationHookProps {
+    containerRef: RefObject<HTMLElement | null>;
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    keyBoardActivation?: "manual" | "automatic";
+    orientation: orientationType;
+    selectedIndex: number | null;
+}
+interface TabstripNavigationHookResult {
+    containerProps: ContainerNavigationProps;
+    highlightedIdx: number;
+    focusTab: (tabIndex: 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;
+    setHighlightedIdx: (highlightedIndex: number) => void;
+}
+export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, keyBoardActivation, orientation, selectedIndex: selectedTabIndex, }: TabstripNavigationHookProps) => TabstripNavigationHookResult;
+export {};

package/types/vuu-ui-controls/src/tabstrip/useSelection.d.ts

@@ -0,0 +1,13 @@
+import { KeyboardEvent, MouseEvent } from "react";
+export declare const useSelection: ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp, }: {
+    defaultSelected?: number;
+    highlightedIdx: number;
+    onSelectionChange?: (tabIndex: number) => void;
+    selected?: number;
+}) => {
+    activateTab: (tabIndex: number) => void;
+    isControlled: boolean;
+    onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    selected: number;
+};

package/types/vuu-ui-controls/src/tabstrip/useTabstrip.d.ts

@@ -0,0 +1,55 @@
+import type { OverflowItem } from "@vuu-ui/vuu-ui-controls";
+import { orientationType } from "@vuu-ui/vuu-utils";
+import { KeyboardEvent, MouseEvent as ReactMouseEvent, RefObject } from "react";
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+export type ExitEditModeHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface TabstripHookProps {
+    activeTabIndex: number;
+    allowDragDrop: boolean;
+    animateSelectionThumb: boolean;
+    containerRef: RefObject<HTMLElement | null>;
+    onActiveChange?: (tabIndex: number) => void;
+    onAddTab?: () => void;
+    onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;
+    onExitEditMode?: ExitEditModeHandler;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    orientation: orientationType;
+    keyBoardActivation?: "manual" | "automatic";
+}
+type InteractedTabState = {
+    index: number;
+    state: "rename";
+};
+export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDragDrop, animateSelectionThumb, containerRef, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, keyBoardActivation, }: TabstripHookProps) => {
+    draggable?: import("react").ReactElement;
+    dropIndicator?: import("react").ReactElement;
+    draggedItemIndex?: number;
+    isDragging: boolean;
+    isScrolling: RefObject<boolean>;
+    revealOverflowedItems?: boolean;
+    activeTabIndex: number;
+    containerProps: {
+        onSwitchWrappedItemIntoView: (item: OverflowItem) => void;
+        onBlur: import("react").FocusEventHandler;
+        onFocus: import("react").FocusEventHandler;
+        onMouseDownCapture: import("react").MouseEventHandler;
+        onMouseLeave: import("react").MouseEventHandler;
+    };
+    containerStyle: import("react").CSSProperties;
+    focusVisible: number;
+    interactedTabState: InteractedTabState | undefined;
+    navigationProps: {
+        onFocus: (evt: import("react").FocusEvent<HTMLElement>) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+    };
+    onClickAddTab: () => void;
+    tabProps: {
+        onClick: (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+        onExitEditMode: ExitEditModeHandler;
+        onMenuAction: MenuActionHandler;
+        onMenuClose: () => void;
+        onMouseDown: import("react").MouseEventHandler | undefined;
+    };
+};
+export {};

package/types/vuu-ui-controls/src/time-input/MaskedInput.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter, TimeString, TimeUnit } from "@vuu-ui/vuu-utils";
+import { ChangeEventHandler } from "react";
+export type Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+export type MaskedInputEvents = {
+    change: ChangeEventHandler<HTMLInputElement>;
+};
+export declare class MaskedInput extends EventEmitter<MaskedInputEvents> {
+    #private;
+    constructor(defaultValue: TimeString | undefined, inputEl?: HTMLInputElement | null);
+    set input(el: HTMLInputElement);
+    /**
+     * The change event is fired programatically. This will only be handled
+     * by a native event handler ( not a React handler). We handle this event
+     * and convert to a React (Synthetic) event.
+     */
+    private emitSyntheticChangeEvent;
+    get cursorPos(): number;
+    set cursorPos(value: number);
+    get isFocused(): boolean;
+    get selectionStart(): number;
+    set selectionStart(value: number);
+    get selectionEnd(): number;
+    set selectionEnd(value: number);
+    private setValue;
+    private setUnitValue;
+    private getUnitValue;
+    get value(): TimeString;
+    /**
+     * Setting the value this way invokes 'controlled' mode
+     */
+    set value(value: TimeString);
+    clear(unit: TimeUnit): void;
+    select(unit: TimeUnit, halfUnit?: boolean): void;
+    removeSelection(): void;
+    restoreSelection(): void;
+    advanceSelection(): void;
+    moveFocus(direction: "left" | "right"): void;
+    pasteValue(value: TimeString): void;
+    private getUnitAtCursorPos;
+    incrementValue(): void;
+    decrementValue(): void;
+    backspace(): void;
+    update(key: Digit): void;
+    private getSelection;
+    click(): void;
+    doubleClick(): void;
+    focus: () => void;
+    blur: () => void;
+}

package/types/vuu-ui-controls/src/time-input/TimeInput.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+import { TimeInputHookProps } from "./useTimeInput";
+export interface TimeInputProps extends TimeInputHookProps, Omit<HTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value">, Partial<Pick<HTMLInputElement, "placeholder">> {
+}
+export declare const TimeInput: import("react").ForwardRefExoticComponent<TimeInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/types/vuu-ui-controls/src/time-input/useTimeInput.d.ts

@@ -0,0 +1,21 @@
+import { type CommitHandler, DateStringISO, type TimeString } from "@vuu-ui/vuu-utils";
+import { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefCallback } from "react";
+export interface TimeInputHookProps {
+    date?: Date | DateStringISO;
+    defaultValue?: TimeString;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onCommit: CommitHandler<HTMLInputElement, TimeString>;
+    value?: TimeString;
+}
+export declare const useTimeInput: ({ defaultValue, onChange, onCommit, value, }: TimeInputHookProps) => {
+    inputRef: RefCallback<HTMLInputElement>;
+    eventHandlers: {
+        onBlur: (() => void) | undefined;
+        onDoubleClick: () => void;
+        onFocus: FocusEventHandler<HTMLInputElement>;
+        onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+        onMouseDown: MouseEventHandler;
+        onMouseUp: MouseEventHandler<HTMLInputElement>;
+        onPaste: ClipboardEventHandler<HTMLInputElement>;
+    };
+};

package/types/vuu-ui-controls/src/toolbar/Toolbar.d.ts

@@ -0,0 +1,19 @@
+import { OverflowContainerProps } from "../overflow-container";
+import { SelectionStrategy, SpecialKeyMultipleSelection } from "../common-hooks";
+export type ActiveItemChangeHandler = (itemIndex: number[]) => void;
+export type NavigationOutOfBoundsHandler = (direction: "start" | "end") => void;
+export interface ToolbarProps extends OverflowContainerProps {
+    activeItemIndex?: number[];
+    alignItems?: "start" | "center" | "end";
+    defaultActiveItemIndex?: number[];
+    onActiveChange?: ActiveItemChangeHandler;
+    /**
+     * Indicates that user has used Arrow key navigation to move beyond the
+     * last or before the first item. A higher level component may want to
+     * use this to implement a seamless navigation across components.
+     */
+    onNavigateOutOfBounds?: NavigationOutOfBoundsHandler;
+    selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;
+    showSeparators?: boolean;
+}
+export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, alignItems, defaultActiveItemIndex, children, className, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, showSeparators, ...props }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/types/vuu-ui-controls/src/toolbar/index.d.ts

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

package/types/vuu-ui-controls/src/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/vuu-ui-controls/src/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 { MenuCloseHandler } from "@vuu-ui/vuu-popups";
+export interface ContainerNavigationProps {
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+interface ToolbarNavigationHookProps {
+    containerRef: RefObject<HTMLElement | null>;
+    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?: MenuCloseHandler;
+    setHighlightedIdx: (highlightedIndex: number) => void;
+}
+export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, onNavigateOutOfBounds, orientation, }: ToolbarNavigationHookProps) => ToolbarNavigationHookResult;
+export {};

package/types/vuu-ui-controls/src/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 | null>;
+    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/vuu-ui-controls/src/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 | null>;
+    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;
+        onFocus: import("react").FocusEventHandler;
+        onMouseDownCapture: import("react").MouseEventHandler;
+        onMouseLeave: import("react").MouseEventHandler;
+        PopupMenuProps: {
+            onKeyDown: (evt: KeyboardEvent) => void;
+            onMenuClose: import("@vuu-ui/vuu-popups").MenuCloseHandler | undefined;
+        };
+    };
+    itemProps: {
+        onClick: (evt: ReactMouseEvent<HTMLElement>) => void;
+        onFocus: (evt: import("react").FocusEvent<HTMLElement>) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+    };
+};

package/types/vuu-ui-controls/src/utils/deprecated-types.d.ts

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

package/types/vuu-ui-controls/src/utils/escapeRegExp.d.ts

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

package/types/vuu-ui-controls/src/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/vuu-ui-controls/src/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./escapeRegExp";
+export * from "./isOverflowElement";
+export * from "./isPlainObject";
+export * from "./forwardCallbackProps";
+export * from "./deprecated-types";

package/types/vuu-ui-controls/src/utils/isOverflowElement.d.ts

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

package/types/vuu-ui-controls/src/utils/isPlainObject.d.ts

@@ -0,0 +1 @@
+export declare const isPlainObject: (obj: Record<never, never>) => boolean;

package/types/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.d.ts

@@ -0,0 +1,7 @@
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { SingleSelectionValueType } from "../calendar";
+import { DatePickerProps } from "../date-picker";
+export declare const VuuDatePicker: ({ className, onSelectionChange, selectedDate: selectedDateProp, onCommit, preserveFocusOnSelect, ...props }: Omit<DatePickerProps<SingleSelectionValueType>, "defaultSelectedDate"> & {
+    onCommit?: CommitHandler<HTMLElement, number>;
+    preserveFocusOnSelect?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/types/vuu-ui-controls/src/vuu-date-picker/index.d.ts

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

package/types/vuu-ui-controls/src/vuu-input/VuuInput.d.ts

@@ -0,0 +1,18 @@
+import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { InputProps } from "@salt-ds/core";
+import { ForwardedRef, ReactElement, ReactNode } from "react";
+export interface VuuInputProps<T extends VuuRowDataItemType = string> extends Omit<InputProps, "validationStatus"> {
+    commitOnBlur?: boolean;
+    commitWhenCleared?: boolean;
+    errorMessage?: ReactNode;
+    onCommit: CommitHandler;
+    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>;
+}) => ReactElement<VuuInputProps<T>>;

package/types/vuu-ui-controls/src/vuu-input/index.d.ts

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