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

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

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

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

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

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

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