@vuu-ui/vuu-ui-controls 2.1.19-beta.1 → 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 };