@vuu-ui/vuu-ui-controls 3.3.9 → 3.3.10

package/types/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/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/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: {
+        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;
+        };
+        onSwitchWrappedItemIntoView: (item: OverflowItem) => void;
+    };
+    itemProps: {
+        onClick: (evt: ReactMouseEvent<HTMLElement>) => void;
+        onFocus: (evt: import("react").FocusEvent<HTMLElement>) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+    };
+};

package/types/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/src/utils/escapeRegExp.d.ts

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

package/types/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/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/src/utils/isOverflowElement.d.ts

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

package/types/src/utils/isPlainObject.d.ts

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

package/types/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.Element;

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

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

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

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

package/types/src/vuu-time-picker/VuuTimePicker.d.ts

@@ -0,0 +1,7 @@
+import { CommitHandler, TimeString } from "@vuu-ui/vuu-utils";
+import { HTMLAttributes } from "react";
+import { TimeInputProps } from "../time-input/TimeInput";
+export interface VuuTimePickerProps extends Pick<TimeInputProps, "defaultValue" | "onChange" | "value">, Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "value"> {
+    onCommit: CommitHandler<HTMLInputElement, TimeString>;
+}
+export declare const VuuTimePicker: ({ className, defaultValue, onChange, onCommit, value, ...htmlAttributes }: VuuTimePickerProps) => import("react").JSX.Element;

package/types/src/vuu-typeahead-input/VuuTypeaheadInput.d.ts

@@ -0,0 +1,6 @@
+import { ComboBoxProps } from "@salt-ds/core";
+import { VuuTypeaheadInputHookProps } from "./useVuuTypeaheadInput";
+export interface VuuTypeaheadInputProps extends VuuTypeaheadInputHookProps, Pick<ComboBoxProps, "selectOnTab"> {
+    className?: string;
+}
+export declare const VuuTypeaheadInput: ({ allowFreeInput, className, column, freeTextWarning, highlightFirstSuggestion, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions, onCommit, selectOnTab, table, }: VuuTypeaheadInputProps) => import("react").JSX.Element;

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

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

package/types/src/vuu-typeahead-input/useVuuTypeaheadInput.d.ts

@@ -0,0 +1,49 @@
+import { PillInputProps } from "@salt-ds/core/dist-types/pill-input";
+import { TableSchemaTable } from "@vuu-ui/vuu-data-types";
+import { type CommitHandler } from "@vuu-ui/vuu-utils";
+import { KeyboardEventHandler, type ChangeEventHandler, type RefCallback, type SyntheticEvent } from "react";
+export interface VuuTypeaheadInputHookProps {
+    /**
+     * Allows a text string to be submitted that does not match any suggestion
+     * Defaults to true
+     */
+    allowFreeInput?: boolean;
+    column: string;
+    /**
+     * A warning to display to the user if allowFreeText is false and they attempt
+     * to commit text which does not match any suggestions. A default message will
+     * be shown if not provided
+     */
+    freeTextWarning?: string;
+    /**
+     * When suggestions are displayed, should first option be highlighted ?
+     * Highlighted option will be selected if Enter pressed. If this option
+     * is not applied and no suggestion is highlighted, Enter will commit
+     * current text. This will be desirable if filter operator  will be
+     * 'contains', not if filter operator will be '='.
+     */
+    highlightFirstSuggestion?: boolean;
+    inputProps?: PillInputProps["inputProps"];
+    /**
+     * If zero, suggestions will be shown even without any text input.
+     * Suggestions will be displayed on click, or, if focused via keynoard,
+     * on ArrowDown.
+     * If n, where n > 0, then n characters must be typed before suggestion
+     * list will be fetched.
+     */
+    minCharacterCountToTriggerSuggestions?: 0 | 1 | 2 | 3;
+    onCommit: CommitHandler<HTMLInputElement>;
+    table: TableSchemaTable;
+}
+export declare const useVuuTypeaheadInput: ({ allowFreeInput, column, freeTextWarning, highlightFirstSuggestion, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions, onCommit, table, }: VuuTypeaheadInputHookProps) => {
+    inputProps: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">;
+    noFreeText: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onOpenChange: (newOpen: boolean) => void;
+    onSelectionChange: (evt: SyntheticEvent, [newSelected]: string[]) => void;
+    open: boolean;
+    ref: RefCallback<HTMLDivElement>;
+    typeaheadValues: string[];
+    value: string;
+};