@vuu-ui/vuu-ui-controls 4.0.0-alpha.2 → 4.0.0-alpha.21

package/types/split-pane/SplitPane.d.ts

@@ -0,0 +1,44 @@
+import { type FlexAlignment, type FlexContentAlignment, type ResponsiveProp } from "@salt-ds/core";
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type SplitPaneDirection, type SplitterMovedHandler } from "./useSplitPane";
+export interface SplitPaneProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Defines the default behavior for how flex items are laid out along the cross axis, default is "stretch".
+     */
+    align?: FlexAlignment | "stretch" | "baseline";
+    /**
+     * Exactly two children, typically Salt `FlexItem` components. A Splitter
+     * will be rendered between them. A single child is also accepted (e.g. when
+     * one pane is conditionally rendered), in which case no Splitter is rendered.
+     */
+    children: ReactElement | [ReactNode, ReactNode];
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "row".
+     */
+    direction?: ResponsiveProp<SplitPaneDirection>;
+    /**
+     * Controls the space between each item and the Splitter, default is 0.
+     */
+    gap?: ResponsiveProp<number | string>;
+    /**
+     * Defines the alignment along the main axis, default is "start".
+     */
+    justify?: FlexContentAlignment;
+    /**
+     * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.
+     */
+    margin?: ResponsiveProp<number | string>;
+    /**
+     * Invoked when user has finished moving the Splitter, receives the new sizes (px) of both panes.
+     */
+    onSplitterMoved?: SplitterMovedHandler;
+    /**
+     * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.
+     */
+    padding?: ResponsiveProp<number | string>;
+    /**
+     * Size (thickness) of the Splitter, in px. Default is 3.
+     */
+    splitterSize?: number;
+}
+export declare const SplitPane: import("react").ForwardRefExoticComponent<SplitPaneProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/split-pane/Splitter.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+import type { SplitPaneDirection } from "./useSplitPane";
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
+    direction: SplitPaneDirection;
+    onResizeStart: () => boolean;
+    onResize: (distance: number) => void;
+    onResizeEnd: () => void;
+    position?: number;
+}
+export declare const Splitter: ({ className, direction, onResize, onResizeEnd, onResizeStart, position, ...htmlAttributes }: SplitterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from "./SplitPane";
+export type { SplitPaneDirection, SplitPaneSizes, SplitterMovedHandler, } from "./useSplitPane";

package/types/split-pane/useSplitPane.d.ts

@@ -0,0 +1,18 @@
+export type SplitPaneDirection = "row" | "column";
+/**
+ * Sizes (in px) of the two panes, measured along the main axis.
+ */
+export type SplitPaneSizes = [number, number];
+export type SplitterMovedHandler = (sizes: SplitPaneSizes) => void;
+export interface SplitPaneHookProps {
+    direction: SplitPaneDirection;
+    onSplitterMoved?: SplitterMovedHandler;
+    paneCount: number;
+}
+export declare const useSplitPane: ({ direction, onSplitterMoved, paneCount, }: SplitPaneHookProps) => {
+    beginResize: () => boolean;
+    endResize: () => void;
+    resize: (distance: number) => void;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    splitterPosition: number | undefined;
+};

package/types/table-search/SearchCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const SearchCell: ({ column, dataRow, searchPattern, }: TableCellRendererProps) => import("react").JSX.Element;
+export declare const SearchCell: ({ column, dataRow, searchPattern, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element;

package/types/table-search/TableSearch.d.ts

@@ -6,4 +6,4 @@ export interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {
     placeHolder?: string;
     searchColumns: string[];
 }
-export declare const TableSearch: ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus, className, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => import("react").JSX.Element;
+export declare const TableSearch: ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus, className, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabstrip/TabMenu.d.ts

@@ -20,4 +20,4 @@ export interface TabMenuProps {
      */
     controlledComponentTitle?: string;
 }
-export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => import("react").JSX.Element;
+export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabstrip/Tabstrip.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import type { 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) => React.JSX.Element;
+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/time-input/MaskedInput.d.ts

@@ -1,13 +1,32 @@
-import { EventEmitter, TimeString, TimeUnit } from "@vuu-ui/vuu-utils";
+import { EventEmitter, TimeString, TimeStringMillis, 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 TimeValue = TimeString | TimeStringMillis;
+export declare const invalidClassName = "vuuTimeInput-invalid";
+export interface MaskedInputOptions {
+    /**
+     * When true, value includes milliseconds, hh:mm:ss.SSS
+     */
+    milliseconds?: boolean;
+}
 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);
+    constructor(defaultValue: TimeValue | undefined, inputEl?: HTMLInputElement | null, { milliseconds }?: MaskedInputOptions);
+    get milliseconds(): boolean;
+    private get zeroValue();
+    /**
+     * Length of the formatted value, hh:mm:ss or hh:mm:ss.SSS
+     */
+    get length(): 8 | 12;
+    private normalise;
+    /**
+     * Attach (or re-attach) the input element. Re-attaching the same element
+     * is a no-op, attaching a different element detaches the previous one.
+     */
+    set input(el: HTMLInputElement | null);
     /**
      * The change event is fired programatically. This will only be handled
      * by a native event handler ( not a React handler). We handle this event
@@ -21,25 +40,56 @@ export declare class MaskedInput extends EventEmitter<MaskedInputEvents> {
     set selectionStart(value: number);
     get selectionEnd(): number;
     set selectionEnd(value: number);
+    private nextUnit;
+    private previousUnit;
+    private get firstUnit();
+    private get lastUnit();
     private setValue;
-    private setUnitValue;
     private getUnitValue;
-    get value(): TimeString;
+    private setUnitValue;
+    private setInvalid;
+    get value(): TimeValue;
     /**
-     * Setting the value this way invokes 'controlled' mode
+     * Setting the value this way invokes 'controlled' mode. Value
+     * will be normalised to the configured precision.
      */
-    set value(value: TimeString);
+    set value(value: TimeValue);
     clear(unit: TimeUnit): void;
-    select(unit: TimeUnit, halfUnit?: boolean): void;
+    /**
+     * Select a unit. If digitIndex > 0, only the digits of the unit
+     * not yet entered are selected.
+     */
+    select(unit: TimeUnit, digitIndex?: number): void;
     removeSelection(): void;
     restoreSelection(): void;
-    advanceSelection(): void;
+    selectFirst(): void;
+    selectLast(): void;
     moveFocus(direction: "left" | "right"): void;
-    pasteValue(value: TimeString): void;
+    /**
+     * Replace the entire value, e.g. from a paste. Values with or without
+     * milliseconds are accepted and converted to the configured precision.
+     * Invalid values are ignored. Returns true if value was accepted.
+     */
+    pasteValue(value: string): boolean;
     private getUnitAtCursorPos;
+    private get activeUnit();
     incrementValue(): void;
     decrementValue(): void;
+    /**
+     * If a full unit is selected, it is cleared and selection moves to the
+     * previous unit. If we are midway through entering a unit, the unit is
+     * cleared and remains selected.
+     */
     backspace(): void;
+    /**
+     * Typing the first digit of a unit sets the unit to that digit followed
+     * by zeros, e.g '1' => '10' and selection moves to the next digit. If
+     * the digit cannot be the first digit of a valid unit, e.g '3' for hours,
+     * the unit is zero padded, e.g '03', and selection advances to the next unit.
+     * Typing the last digit completes the unit and selection advances to the
+     * next unit. A digit which would produce an invalid value is rejected and
+     * the input is marked as invalid.
+     */
     update(key: Digit): void;
     private getSelection;
     click(): void;

package/types/time-input/TimeInput.d.ts

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

package/types/time-input/useTimeInput.d.ts

@@ -1,16 +1,34 @@
-import { type CommitHandler, DateStringISO, type TimeString } from "@vuu-ui/vuu-utils";
+import { type CommitHandler, DateStringISO, type TimeString, type TimeStringMillis } from "@vuu-ui/vuu-utils";
 import { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefCallback } from "react";
-export interface TimeInputHookProps {
+interface TimeInputCommonProps {
     date?: Date | DateStringISO;
-    defaultValue?: TimeString;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export interface TimeInputSecondsProps extends TimeInputCommonProps {
+    defaultValue?: TimeString;
+    /**
+     * When true, time is entered and displayed with millisecond
+     * precision, hh:mm:ss.SSS
+     */
+    milliseconds?: false;
     onCommit: CommitHandler<HTMLInputElement, TimeString>;
     value?: TimeString;
 }
-export declare const useTimeInput: ({ defaultValue, onChange, onCommit, value, }: TimeInputHookProps) => {
+export interface TimeInputMillisecondsProps extends TimeInputCommonProps {
+    defaultValue?: TimeStringMillis;
+    /**
+     * When true, time is entered and displayed with millisecond
+     * precision, hh:mm:ss.SSS
+     */
+    milliseconds: true;
+    onCommit: CommitHandler<HTMLInputElement, TimeStringMillis>;
+    value?: TimeStringMillis;
+}
+export type TimeInputHookProps = TimeInputSecondsProps | TimeInputMillisecondsProps;
+export declare const useTimeInput: ({ defaultValue, milliseconds, onChange, onCommit: onCommitProp, value, }: TimeInputHookProps) => {
     inputRef: RefCallback<HTMLInputElement>;
     eventHandlers: {
-        onBlur: (() => void) | undefined;
+        onBlur: () => void;
         onDoubleClick: () => void;
         onFocus: FocusEventHandler<HTMLInputElement>;
         onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -19,3 +37,4 @@ export declare const useTimeInput: ({ defaultValue, onChange, onCommit, value, }
         onPaste: ClipboardEventHandler<HTMLInputElement>;
     };
 };
+export {};

package/types/toolbar/Toolbar.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { OverflowContainerProps } from "../overflow-container";
 import { SelectionStrategy, SpecialKeyMultipleSelection } from "../common-hooks";
 export type ActiveItemChangeHandler = (itemIndex: number[]) => void;
@@ -17,4 +16,4 @@ export interface ToolbarProps extends OverflowContainerProps {
     selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;
     showSeparators?: boolean;
 }
-export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, alignItems, defaultActiveItemIndex, children, className, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, showSeparators, ...props }: ToolbarProps) => React.JSX.Element;
+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-date-picker/VuuDatePicker.d.ts

@@ -1,7 +1,23 @@
-import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { type CommitHandler, EpochTimestamp, type TimeZoneSpec } 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"> & {
+export interface VuuDatePickerProps extends Omit<DatePickerProps<SingleSelectionValueType>, "defaultSelectedDate" | "onChange"> {
+    /**
+     * Invoked when user selects a date from the calendar, or enters a valid date and
+     * presses Enter. Value is epoch millis at the start of the selected day, in timeZone.
+     */
     onCommit?: CommitHandler<HTMLElement, number>;
     preserveFocusOnSelect?: boolean;
-}) => import("react").JSX.Element;
+    /**
+     * The time zone used to convert between epoch values and calendar dates.
+     * Defaults to the application default time zone (see setDefaultTimeZone).
+     */
+    timeZone?: TimeZoneSpec;
+    /**
+     * An epoch value (millis as number, or millis/nanos as EpochTimestamp). An
+     * alternative to selectedDate, when the date is derived from a timestamp. The
+     * calendar date is determined in timeZone.
+     */
+    value?: EpochTimestamp | number;
+}
+export declare const VuuDatePicker: ({ className, onSelectionChange, onCommit, preserveFocusOnSelect, selectedDate: selectedDateProp, timeZone, value, ...props }: VuuDatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,9 @@
-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;
+import { TimeInputMillisecondsProps, TimeInputSecondsProps } from "../time-input/TimeInput";
+type VuuTimePickerHtmlAttributes = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "value">;
+type TimePickerInputProps = "defaultValue" | "milliseconds" | "onChange" | "onCommit" | "value";
+export type VuuTimePickerSecondsProps = Pick<TimeInputSecondsProps, TimePickerInputProps> & VuuTimePickerHtmlAttributes;
+export type VuuTimePickerMillisecondsProps = Pick<TimeInputMillisecondsProps, TimePickerInputProps> & VuuTimePickerHtmlAttributes;
+export type VuuTimePickerProps = VuuTimePickerSecondsProps | VuuTimePickerMillisecondsProps;
+export declare const VuuTimePicker: ({ className, defaultValue, milliseconds, onChange, onCommit, value, ...htmlAttributes }: VuuTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -3,4 +3,4 @@ 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;
+export declare const VuuTypeaheadInput: ({ allowFreeInput, className, column, freeTextWarning, highlightFirstSuggestion, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions, onCommit, selectOnTab, table, }: VuuTypeaheadInputProps) => import("react/jsx-runtime").JSX.Element;

package/src/modal-provider/ModalProvider.js

@@ -1,147 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Dialog, DialogActions, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
-import { Prompt } from "../prompt/Prompt.js";
-const useDialogHost = ()=>{
-    const [dialogState, setDialogState] = useState();
-    const [promptState, setPromptState] = useState();
-    const closePrompt = useCallback(()=>{
-        setPromptState(void 0);
-    }, []);
-    const closeDialog = useCallback(()=>{
-        setDialogState(void 0);
-    }, []);
-    const handleOpenChange = useCallback((open)=>{
-        if (true !== open) closeDialog();
-    }, [
-        closeDialog
-    ]);
-    const dialog = dialogState ? /*#__PURE__*/ jsxs(Dialog, {
-        open: true,
-        onOpenChange: handleOpenChange,
-        children: [
-            /*#__PURE__*/ jsx(DialogHeader, {
-                header: dialogState.title
-            }),
-            /*#__PURE__*/ jsx(DialogContent, {
-                children: dialogState.content
-            }),
-            true !== dialogState.hideCloseButton ? /*#__PURE__*/ jsx(DialogCloseButton, {
-                "data-embedded": true,
-                "data-icon": "close",
-                onClick: closeDialog
-            }) : null,
-            dialogState.actions ? /*#__PURE__*/ jsx(DialogActions, {
-                children: dialogState.actions
-            }) : null
-        ]
-    }) : null;
-    const handleOpenChangePrompt = useCallback((open)=>{
-        if (true !== open) closePrompt();
-        promptState?.promptProps.onOpenChange?.(open);
-    }, [
-        closePrompt,
-        promptState
-    ]);
-    const prompt = promptState ? /*#__PURE__*/ jsx(Prompt, {
-        ...promptState.promptProps,
-        onClose: closePrompt,
-        onOpenChange: handleOpenChangePrompt,
-        open: true,
-        children: promptState.content
-    }) : null;
-    return {
-        dialog,
-        prompt,
-        setDialogState,
-        setPromptState
-    };
-};
-const defaultShowDialog = ()=>{
-    console.warn("No DialogProvider in place");
-};
-const defaultCloseDialog = ()=>{
-    console.warn("No DialogProvider in place");
-};
-const defaultShowPrompt = ()=>{
-    console.warn("No DialogProvider in place");
-};
-const defaultClosePrompt = ()=>{
-    console.warn("No DialogProvider in place");
-};
-class DialogContextObject {
-    showDialog = defaultShowDialog;
-    closeDialog = defaultCloseDialog;
-    showPrompt = defaultShowPrompt;
-    closePrompt = defaultClosePrompt;
-    setDispatchers = (showDialog, closeDialog, showPrompt, closePrompt)=>{
-        this.showDialog = showDialog;
-        this.closeDialog = closeDialog;
-        this.showPrompt = showPrompt;
-        this.closePrompt = closePrompt;
-    };
-}
-const DialogContext = /*#__PURE__*/ createContext(new DialogContextObject());
-const DialogHost = ({ context })=>{
-    const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();
-    const showDialog = useCallback((dialogContent, title, actionButtons, hideCloseButton)=>{
-        setDialogState({
-            actions: actionButtons,
-            content: dialogContent,
-            title,
-            hideCloseButton
-        });
-    }, [
-        setDialogState
-    ]);
-    const closeDialog = useCallback(()=>{
-        setDialogState(void 0);
-    }, [
-        setDialogState
-    ]);
-    const showPrompt = useCallback((content, promptProps)=>{
-        setPromptState({
-            content,
-            promptProps
-        });
-    }, [
-        setPromptState
-    ]);
-    const closePrompt = useCallback(()=>{
-        setPromptState(void 0);
-    }, [
-        setPromptState
-    ]);
-    useMemo(()=>{
-        context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);
-    }, [
-        closeDialog,
-        closePrompt,
-        context,
-        showDialog,
-        showPrompt
-    ]);
-    return dialog ?? prompt;
-};
-const ModalProvider = ({ children })=>{
-    const context = useContext(DialogContext);
-    return /*#__PURE__*/ jsxs(DialogContext.Provider, {
-        value: context,
-        children: [
-            /*#__PURE__*/ jsx(DialogHost, {
-                context: context
-            }),
-            children
-        ]
-    });
-};
-const useModal = ()=>{
-    const { closeDialog, closePrompt, showDialog, showPrompt } = useContext(DialogContext);
-    return {
-        showDialog,
-        closeDialog,
-        showPrompt,
-        closePrompt
-    };
-};
-export { ModalProvider, useModal };