@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.2

package/src/vuu-input/VuuInput.js

@@ -0,0 +1,85 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { isValidNumber, useId } from "@vuu-ui/vuu-utils";
+import { Input, Tooltip } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback } from "react";
+import VuuInput_0 from "./VuuInput.css";
+const classBase = "vuuInput";
+const VuuInput_VuuInput = /*#__PURE__*/ forwardRef(function({ className, commitOnBlur = true, commitWhenCleared = false, errorMessage, id: idProp, onCommit, onKeyDown, type, ...props }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-input",
+        css: VuuInput_0,
+        window: targetWindow
+    });
+    const id = useId(idProp);
+    const commitValue = useCallback((evt, value)=>{
+        if ("number" === type) {
+            const numericValue = parseFloat(value);
+            if (isValidNumber(numericValue)) onCommit(evt, numericValue, "text-input");
+            else throw Error("Invalid value");
+        } else "boolean" === type ? onCommit(evt, Boolean(value), "text-input") : onCommit(evt, value, "text-input");
+    }, [
+        onCommit,
+        type
+    ]);
+    const handleChange = useCallback((evt)=>{
+        const value = evt.target.value;
+        if ("" === value.trim() && commitWhenCleared) onCommit?.(evt, value);
+        props.inputProps?.onChange?.(evt);
+    }, [
+        commitWhenCleared,
+        onCommit,
+        props.inputProps
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            const { value } = evt.target;
+            commitValue(evt, value);
+        }
+        onKeyDown?.(evt);
+    }, [
+        commitValue,
+        onKeyDown
+    ]);
+    const handleBlur = useCallback((evt)=>{
+        if (commitOnBlur) {
+            const { value } = evt.target;
+            commitValue(evt, value);
+        }
+    }, [
+        commitOnBlur,
+        commitValue
+    ]);
+    const endAdornment = errorMessage ? /*#__PURE__*/ jsx(Tooltip, {
+        content: errorMessage,
+        status: "error",
+        children: /*#__PURE__*/ jsx("span", {
+            className: `${classBase}-errorIcon`,
+            "data-icon": "error"
+        })
+    }) : void 0;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Input, {
+            ...props,
+            endAdornment: endAdornment,
+            id: id,
+            inputProps: {
+                autoComplete: "off",
+                ...props.inputProps,
+                onChange: handleChange
+            },
+            className: clsx(classBase, className, {
+                [`${classBase}-error`]: errorMessage
+            }),
+            onBlur: handleBlur,
+            ref: forwardedRef,
+            onKeyDown: handleKeyDown
+        })
+    });
+});
+export { VuuInput_VuuInput as VuuInput };

package/src/vuu-input/index.js

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

package/src/vuu-time-picker/VuuTimePicker.css.js

@@ -0,0 +1,14 @@
+const css = `
+.vuuTimePicker {
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+
+  & .TimeInput {
+    outline: none;
+  }
+}
+
+
+`;
+export default css;

package/src/vuu-time-picker/VuuTimePicker.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { TimeInput } from "../time-input/TimeInput.js";
+import VuuTimePicker from "./VuuTimePicker.css";
+const classBase = "vuuTimePicker";
+const VuuTimePicker_VuuTimePicker = ({ className, defaultValue, onChange, onCommit, value, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-time-picker",
+        css: VuuTimePicker,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: /*#__PURE__*/ jsx(TimeInput, {
+            defaultValue: defaultValue,
+            onChange: onChange,
+            onCommit: onCommit,
+            value: value
+        })
+    });
+};
+export { VuuTimePicker_VuuTimePicker as VuuTimePicker };

package/src/vuu-typeahead-input/VuuTypeaheadInput.css.js

@@ -0,0 +1,49 @@
+const css = `
+.vuuTypeaheadInput {
+  & .saltPillInput-activationIndicator {
+    display: none;
+  }
+
+  & .saltPillInput-endAdornmentContainer {
+    padding: 0;
+  }
+
+  & .saltButton {
+    --vuuButton-borderColor: transparent;
+    width: 24px;
+    height: 24px;
+  }
+
+  & .saltButton:before {
+    content: "";
+    background-color: var(--salt-separable-secondary-borderColor);
+    height: 100%;
+    left: calc(-1 * var(--salt-spacing-100));
+    width: 1px;
+    position: absolute;
+  }
+
+  & .saltButton:after {
+    --vuu-icon-color: var(--salt-content-primary-foreground);
+    --vuu-icon-size: 10px;
+    --vuu-icon-transform: rotate(45deg);
+    content: "";
+    background-color: var(--vuu-icon-color);
+    height: var(--vuu-icon-size);
+    mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)
+      var(--vuu-icon-size);
+    transform: var(--vuu-icon-transform, none);
+    width: var(--vuu-icon-size);
+    position: absolute;
+    top: 3px;
+    mask-repeat: no-repeat;
+  }
+}
+
+.vuuTypeaheadOption[aria-disabled="true"] {
+  color: var(--salt-content-secondary-foreground);
+}
+
+
+`;
+export default css;

package/src/vuu-typeahead-input/VuuTypeaheadInput.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { ComboBox, Option } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { NO_DATA_MATCH } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useVuuTypeaheadInput } from "./useVuuTypeaheadInput.js";
+import VuuTypeaheadInput from "./VuuTypeaheadInput.css";
+const classBase = "vuuTypeaheadInput";
+const [noMatchingData] = NO_DATA_MATCH;
+const VuuTypeaheadInput_VuuTypeaheadInput = ({ allowFreeInput, className, column, freeTextWarning, highlightFirstSuggestion, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions, onCommit, selectOnTab, table })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-typeahead-input",
+        css: VuuTypeaheadInput,
+        window: targetWindow
+    });
+    const { inputProps, noFreeText, onChange, onKeyDown, onOpenChange, onSelectionChange, open, ref, typeaheadValues, value } = useVuuTypeaheadInput({
+        allowFreeInput,
+        column,
+        freeTextWarning,
+        highlightFirstSuggestion,
+        inputProps: inputPropsProp,
+        minCharacterCountToTriggerSuggestions,
+        onCommit,
+        table
+    });
+    return /*#__PURE__*/ jsx(ComboBox, {
+        className: clsx(classBase, className),
+        inputProps: inputProps,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        onOpenChange: onOpenChange,
+        onSelectionChange: onSelectionChange,
+        open: open,
+        ref: ref,
+        selectOnTab: selectOnTab,
+        value: value,
+        children: typeaheadValues.map((state)=>/*#__PURE__*/ jsx(Option, {
+                className: "vuuTypeaheadOption",
+                value: state,
+                disabled: state === noMatchingData || state === noFreeText
+            }, state))
+    });
+};
+export { VuuTypeaheadInput_VuuTypeaheadInput as VuuTypeaheadInput };

package/src/vuu-typeahead-input/index.js

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

package/src/vuu-typeahead-input/useVuuTypeaheadInput.js

@@ -0,0 +1,140 @@
+import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
+import { NO_DATA_MATCH, dispatchKeyboardEvent, getVuuTable, useStateRef } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const meetsMinTextLengthThreshold = (value, minLength)=>value.length >= minLength;
+const defaultFreeTextWarning = "Please select a value from the list of suggestions. If no suggestions match your text, then the value is not valid. If you believe this should be a valid value, please reach out to the support team";
+const useVuuTypeaheadInput = ({ allowFreeInput = true, column, freeTextWarning, highlightFirstSuggestion = true, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions = 1, onCommit, table })=>{
+    const NO_FREE_TEXT = useMemo(()=>[
+            freeTextWarning ?? defaultFreeTextWarning
+        ], [
+        freeTextWarning
+    ]);
+    const [valueRef, setValue] = useStateRef("");
+    const [open, setOpen] = useState(false);
+    const inputRef = useRef(null);
+    const rootRef = useRef(null);
+    const [typeaheadValues, setTypeaheadValues] = useState([]);
+    const getSuggestions = useTypeaheadSuggestions();
+    const pendingListFocusRef = useRef(false);
+    const { current: value } = valueRef;
+    useMemo(()=>{
+        if (inputPropsProp?.value !== void 0 && inputPropsProp?.value !== valueRef.current) setValue(`${inputPropsProp.value}`);
+    }, [
+        inputPropsProp?.value,
+        setValue,
+        valueRef
+    ]);
+    const commitTimeout = useRef(null);
+    const handleKeyDown = useCallback((evt)=>{
+        const { current: value } = valueRef;
+        if ("Enter" === evt.key && "" !== value) if (allowFreeInput) commitTimeout.current = setTimeout(()=>{
+            onCommit?.(evt, value, "text-input");
+            setOpen(false);
+            commitTimeout.current = null;
+        }, 200);
+        else setTypeaheadValues(NO_FREE_TEXT);
+        else if ("Enter" === evt.key && "" === value) console.log("ENTER no value");
+    }, [
+        NO_FREE_TEXT,
+        allowFreeInput,
+        onCommit,
+        valueRef
+    ]);
+    const callbackRef = useCallback((el)=>{
+        rootRef.current = el;
+        const input = el?.querySelector("input") ?? null;
+        inputRef.current = input;
+    }, []);
+    const refreshSuggestions = useCallback(()=>{
+        if (table) {
+            const vuuTable = getVuuTable(table);
+            if (meetsMinTextLengthThreshold(value, minCharacterCountToTriggerSuggestions)) {
+                const params = value ? [
+                    vuuTable,
+                    column,
+                    value
+                ] : [
+                    vuuTable,
+                    column
+                ];
+                getSuggestions(params).then((suggestions)=>{
+                    if (false === suggestions) setTypeaheadValues([]);
+                    else if (0 === suggestions.length && value) setTypeaheadValues((values)=>values === NO_FREE_TEXT ? NO_FREE_TEXT : NO_DATA_MATCH);
+                    else {
+                        setTypeaheadValues(suggestions);
+                        if (pendingListFocusRef.current && inputRef.current) setTimeout(()=>{
+                            if (inputRef.current) dispatchKeyboardEvent(inputRef.current, "keydown", "ArrowDown");
+                        }, 60);
+                    }
+                    pendingListFocusRef.current = false;
+                }).catch((err)=>{
+                    console.error("Error getting suggestions", err);
+                });
+            } else setTypeaheadValues([]);
+        }
+    }, [
+        NO_FREE_TEXT,
+        column,
+        getSuggestions,
+        minCharacterCountToTriggerSuggestions,
+        table,
+        value
+    ]);
+    useEffect(()=>{
+        refreshSuggestions();
+    }, [
+        refreshSuggestions
+    ]);
+    const handleChange = useCallback((evt)=>{
+        const { value: newValue } = evt.target;
+        const { current: value } = valueRef;
+        if ("" === value && newValue) {
+            setOpen(true);
+            const input = rootRef.current?.querySelector("input");
+            if (input && highlightFirstSuggestion) pendingListFocusRef.current = true;
+        } else if ("" === newValue && value) onCommit(evt, "");
+        setValue(newValue);
+    }, [
+        highlightFirstSuggestion,
+        onCommit,
+        setValue,
+        valueRef
+    ]);
+    const handleSelectionChange = (evt, [newSelected])=>{
+        if (commitTimeout.current) {
+            clearTimeout(commitTimeout.current);
+            commitTimeout.current = null;
+        }
+        setValue(newSelected);
+        onCommit(evt, newSelected, "typeahead-suggestion");
+    };
+    const handleOpenChange = (newOpen)=>{
+        newOpen && valueRef.current, setOpen(newOpen);
+    };
+    const handleInputFocus = useCallback((e)=>{
+        inputPropsProp?.onFocus?.(e);
+        refreshSuggestions();
+    }, [
+        inputPropsProp,
+        refreshSuggestions
+    ]);
+    const inputProps = {
+        ...inputPropsProp,
+        autoComplete: "off",
+        onFocus: handleInputFocus
+    };
+    const [noFreeText] = NO_FREE_TEXT;
+    return {
+        inputProps,
+        noFreeText,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onOpenChange: handleOpenChange,
+        onSelectionChange: handleSelectionChange,
+        open,
+        ref: callbackRef,
+        typeaheadValues,
+        value: valueRef.current
+    };
+};
+export { useVuuTypeaheadInput };

package/types/calendar/useCalendar.d.ts

@@ -16,16 +16,16 @@ interface BaseUseCalendarProps {
 export type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
 export declare function useCalendar(props: useCalendarProps): {
     state: {
-        selectedDate: DateValue | import("./useSelection").RangeSelectionValueType | {
+        selectedDate: DateValue[] | {
             startDate?: DateValue;
             endDate?: DateValue;
-        } | DateValue[] | null | undefined;
+        } | import("./useSelection").RangeSelectionValueType | DateValue | null | undefined;
         hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
         visibleMonth: DateValue;
         focusedDate: DateValue;
         minDate: DateValue | undefined;
         maxDate: DateValue | undefined;
-        selectionVariant: "offset" | "range" | "multiselect" | "default";
+        selectionVariant: "default" | "multiselect" | "offset" | "range";
         hideOutOfRangeDates: boolean | undefined;
         calendarFocused: boolean;
     };

package/types/calendar/useSelection.d.ts

@@ -38,7 +38,7 @@ export declare function isRangeOrOffsetSelectionValue(selectionValue?: AllSelect
 export declare function isRangeOrOffsetSelectionWithStartDate(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
 export declare function useSelectionCalendar(props: useSelectionCalendarProps): {
     state: {
-        selectedDate: DateValue | RangeSelectionValueType | OffsetSelectionValueType | MultiSelectionValueType | null | undefined;
+        selectedDate: MultiSelectionValueType | OffsetSelectionValueType | RangeSelectionValueType | DateValue | null | undefined;
         hoveredDate: CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
     };
     helpers: {

package/types/date-input/DateInput.d.ts

@@ -57,4 +57,4 @@ export interface DateInputProps<SelectionVariantType> extends Omit<ComponentProp
      */
     onChange?: SelectionVariantType extends SingleSelectionValueType ? (event: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => void : (event: ChangeEvent<HTMLInputElement>, startDateInputValue?: string, endDateInputValue?: string) => void;
 }
-export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps<RangeSelectionValueType | DateValue> & import("react").RefAttributes<HTMLDivElement>>;

package/types/date-picker/DatePicker.d.ts

@@ -63,4 +63,4 @@ export interface DatePickerProps<SelectionVariantType> extends DateInputProps<Se
      */
     visibleMonths?: 1 | 2;
 }
-export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps<RangeSelectionValueType | DateValue> & import("react").RefAttributes<HTMLDivElement>>;

package/types/date-picker/DatePickerContext.d.ts

@@ -15,5 +15,5 @@ export interface DatePickerContextValue<SelectionVariantType> extends Partial<Pi
     selectionVariant: "default" | "range";
     getPanelPosition: () => Record<string, unknown>;
 }
-export declare const DatePickerContext: import("react").Context<DatePickerContextValue<DateValue | RangeSelectionValueType>>;
-export declare function useDatePickerContext(): DatePickerContextValue<DateValue | RangeSelectionValueType>;
+export declare const DatePickerContext: import("react").Context<DatePickerContextValue<RangeSelectionValueType | DateValue>>;
+export declare function useDatePickerContext(): DatePickerContextValue<RangeSelectionValueType | DateValue>;

package/types/date-picker/DatePickerPanel.d.ts

@@ -7,4 +7,4 @@ export interface DatePickerPanelProps<SelectionVariantType> extends ComponentPro
     visibleMonths?: 1 | 2;
     CalendarProps?: Partial<Omit<CalendarProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange">>;
 }
-export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps<RangeSelectionValueType | DateValue> & import("react").RefAttributes<HTMLDivElement>>;

package/types/instrument-picker/useTablePicker.d.ts

@@ -10,13 +10,9 @@ export declare const useTablePicker: ({ TableProps, onSelect, rowToString, schem
     dataSource: import("@vuu-ui/vuu-data-types").DataSource;
     highlightedIndex: number | undefined;
     floatingUIProps: {
-        reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
-        floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
-        x: number;
-        y: number;
         isPositioned: boolean;
         update: () => void;
         floatingStyles: React.CSSProperties;
@@ -26,6 +22,10 @@ export declare const useTablePicker: ({ TableProps, onSelect, rowToString, schem
             setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
             setFloating: (node: HTMLElement | null) => void;
         } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
+        floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+        x: number;
+        y: number;
     };
     inputProps: {
         inputProps: {