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

package/src/filter-clause/useFilterClause.js

@@ -0,0 +1,135 @@
+import { hasOpenOptionList } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { clauseIsNotFirst, focusNextElement, focusNextFocusableElement, navigateToNextItemIfAtBoundary, tabToPreviousFilterCombinator } from "./filterClauseFocusManagement.js";
+const useFilterClause = ({ filterClauseModel, onCancel, columnsByName, onFocusSave, onOpenChange, dropdownOnAutofocus = true })=>{
+    const [filterClause, setFilterClause] = useState(filterClauseModel.isValid ? filterClauseModel.asFilter() : {});
+    useMemo(()=>{
+        filterClauseModel.on("filterClause", (filterClause)=>{
+            setFilterClause(filterClause);
+        });
+    }, [
+        filterClauseModel
+    ]);
+    const columnRef = useRef(null);
+    const operatorRef = useRef(null);
+    const valueRef = useRef(null);
+    const filterTouched = useRef(false);
+    const setValueRef = useCallback((el)=>{
+        valueRef.current = el;
+        if (!filterClauseModel.isValid) el?.querySelector("input")?.focus();
+    }, [
+        filterClauseModel.isValid
+    ]);
+    const removeAndNavigateToNextInputIfAtBoundary = useCallback((evt)=>{
+        const input = evt.target;
+        if ("" === input.value) {
+            const field = input.closest("[data-field]");
+            switch(field?.dataset?.field){
+                case "operator":
+                    filterClauseModel.column = void 0;
+                    focusNextFocusableElement("bwd");
+                    break;
+                case "value":
+                    filterClauseModel.setOp(void 0);
+                    focusNextFocusableElement("bwd");
+                    break;
+                case "column":
+                    if (clauseIsNotFirst(input)) {
+                        evt.preventDefault();
+                        onCancel?.(filterClauseModel, "Backspace");
+                    }
+            }
+        }
+    }, [
+        filterClauseModel,
+        onCancel
+    ]);
+    const onSelectColumn = (evt, selectedColumn)=>{
+        if (selectedColumn) {
+            if (evt?.type === "keydown") {
+                const { key } = evt;
+                if ("Tab" === key) if (filterClauseModel.column === selectedColumn) return;
+                else evt.preventDefault();
+            }
+            filterClauseModel.column = selectedColumn;
+            setTimeout(()=>{
+                focusNextElement();
+            }, 100);
+        } else filterClauseModel.column = void 0;
+    };
+    const onSelectOperator = useCallback((_, selectedOp)=>{
+        filterClauseModel.setOp(selectedOp);
+        if (selectedOp) focusNextElement();
+    }, [
+        filterClauseModel
+    ]);
+    const handleChangeValue = useCallback((value, isFinal)=>filterClauseModel.setValue(value, isFinal), [
+        filterClauseModel
+    ]);
+    const handleDeselectValue = useCallback(()=>filterClauseModel.setValue(void 0), [
+        filterClauseModel
+    ]);
+    const handleKeyDownCaptureNavigation = useCallback((evt)=>{
+        if ([
+            "ArrowLeft",
+            "ArrowRight"
+        ].includes(evt.key)) navigateToNextItemIfAtBoundary(evt);
+        else if ("Backspace" === evt.key) removeAndNavigateToNextInputIfAtBoundary(evt);
+        else if ("Escape" === evt.key) {
+            if (!hasOpenOptionList(evt.target)) onCancel?.(filterClauseModel, "Escape");
+        } else if ("Tab" === evt.key && evt.shiftKey) {
+            evt.preventDefault();
+            tabToPreviousFilterCombinator(evt.target);
+        } else if ("Tab" === evt.key) {
+            if (filterClauseModel.isValid) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                onFocusSave?.();
+            }
+        }
+    }, [
+        filterClauseModel,
+        onCancel,
+        onFocusSave,
+        removeAndNavigateToNextInputIfAtBoundary
+    ]);
+    const handleOpenChange = useCallback((open, closeReason)=>{
+        const isMultiSelect = "in" === filterClauseModel.op;
+        const filterHasNoValue = !filterClauseModel.isValid && void 0 !== filterClauseModel.op && void 0 !== filterClauseModel.column;
+        if (!open && isMultiSelect && (filterClauseModel.isValid || filterHasNoValue)) filterClauseModel.commit();
+        onOpenChange?.(open, closeReason);
+    }, [
+        filterClauseModel,
+        onOpenChange
+    ]);
+    const inputProps = useMemo(()=>({
+            onKeyDownCapture: handleKeyDownCaptureNavigation,
+            tabIndex: -1,
+            onFocus: ()=>filterTouched.current = true
+        }), [
+        handleKeyDownCaptureNavigation
+    ]);
+    useEffect(()=>{
+        const inputRef = void 0 === filterClauseModel.column ? columnRef : void 0 === filterClauseModel.op ? operatorRef : null;
+        if (!filterClauseModel.isValid && inputRef) requestAnimationFrame(()=>{
+            inputRef.current?.querySelector("input")?.focus();
+        });
+    }, [
+        filterClauseModel
+    ]);
+    return {
+        inputProps,
+        columnRef,
+        filterClause,
+        onChangeValue: handleChangeValue,
+        onDeselectValue: handleDeselectValue,
+        onSelectColumn,
+        onSelectOperator,
+        onOpenChange: handleOpenChange,
+        operatorRef,
+        selectedColumn: columnsByName[filterClauseModel.column ?? ""],
+        valueRef: setValueRef,
+        showDropdownOnAutoFocus: dropdownOnAutofocus || filterTouched.current
+    };
+};
+export { useFilterClause };

package/src/filter-clause/value-editors/FilterClauseValueEditor.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { FilterClauseValueEditorNumber } from "./FilterClauseValueEditorNumber.js";
+import { FilterClauseValueEditorText } from "./FilterClauseValueEditorText.js";
+import { isDateTimeDataValue, isTimeDataValue } from "@vuu-ui/vuu-utils";
+import { forwardRef } from "react";
+import { FilterClauseValueEditorDate } from "./FilterClauseValueEditorDate.js";
+import { FilterClauseValueEditorTime } from "./FilterClauseValueEditorTime.js";
+const classBase = "vuuFilterClause";
+const FilterClauseValueEditor_FilterClauseValueEditor = /*#__PURE__*/ forwardRef(function({ selectedColumn, operator, inputProps, onChangeValue, onDeselectValue, onOpenChange, table, value, dropdownOnAutofocus = true }, forwardedRef) {
+    if (void 0 === selectedColumn || void 0 === operator) return null;
+    if (isDateTimeDataValue(selectedColumn)) return /*#__PURE__*/ jsx(FilterClauseValueEditorDate, {
+        inputProps: inputProps,
+        className: clsx(`${classBase}Field`, `${classBase}Value`),
+        value: value,
+        operator: operator,
+        onChangeValue: onChangeValue
+    });
+    if (isTimeDataValue(selectedColumn)) return /*#__PURE__*/ jsx(FilterClauseValueEditorTime, {
+        inputProps: inputProps,
+        className: clsx(`${classBase}Field`, `${classBase}Value`),
+        value: value,
+        operator: operator,
+        onChangeValue: onChangeValue
+    });
+    switch(selectedColumn.serverDataType){
+        case "string":
+        case "char":
+            return /*#__PURE__*/ jsx(FilterClauseValueEditorText, {
+                inputProps: inputProps,
+                className: clsx(`${classBase}Field`, `${classBase}Value`),
+                column: selectedColumn,
+                dropdownOnAutofocus: dropdownOnAutofocus,
+                onDeselect: onDeselectValue,
+                onChangeValue: onChangeValue,
+                onOpenChange: onOpenChange,
+                operator: operator,
+                ref: forwardedRef,
+                table: table,
+                value: void 0 === value ? "" : Array.isArray(value) ? value.map((val)=>val.toString()) : value.toString()
+            });
+        case "int":
+        case "long":
+        case "double":
+            return /*#__PURE__*/ jsx(FilterClauseValueEditorNumber, {
+                inputProps: inputProps,
+                className: clsx(`${classBase}Field`, `${classBase}Value`),
+                column: selectedColumn,
+                "data-field": "value",
+                onChangeValue: onChangeValue,
+                operator: operator,
+                ref: forwardedRef
+            });
+        default:
+            console.log("returning null");
+            return null;
+    }
+});
+export { FilterClauseValueEditor_FilterClauseValueEditor as FilterClauseValueEditor };

package/src/filter-clause/value-editors/FilterClauseValueEditorDate.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { getLocalTimeZone } from "@internationalized/date";
+import { toCalendarDate } from "@vuu-ui/vuu-utils";
+import { VuuDatePicker } from "@vuu-ui/vuu-ui-controls";
+const FilterClauseValueEditorDate = (props)=>{
+    const { inputProps, className, onChangeValue, operator, value } = props;
+    const toEpochMilliS = getEpochMillisConverter(operator);
+    const [date, setDate] = useState(()=>getInitialState(value));
+    const handleCommit = useCallback((e, selectedDateInputValue)=>{
+        console.log("change date");
+        if (selectedDateInputValue) {
+            const dateValue = toCalendarDate(new Date(selectedDateInputValue));
+            setDate(dateValue);
+            if (selectedDateInputValue) onChangeValue(toEpochMilliS(dateValue));
+        }
+    }, [
+        onChangeValue,
+        toEpochMilliS
+    ]);
+    const onBlur = useCallback(()=>{
+        date && onChangeValue(toEpochMilliS(date));
+    }, [
+        date,
+        onChangeValue,
+        toEpochMilliS
+    ]);
+    return /*#__PURE__*/ jsx(VuuDatePicker, {
+        "data-field": "value",
+        inputProps: inputProps,
+        className: className,
+        onBlur: onBlur,
+        onCommit: handleCommit,
+        selectedDate: date
+    });
+};
+function getInitialState(value) {
+    return value ? toCalendarDate(new Date(value)) : void 0;
+}
+const getEpochMillisConverter = (op)=>(date, timezone = getLocalTimeZone())=>{
+        const d = date.toDate(timezone);
+        switch(op){
+            case ">":
+            case "<=":
+                d.setHours(23, 59, 59, 999);
+                return d.getTime();
+            case ">=":
+            case "<":
+            case "=":
+            case "!=":
+                d.setHours(0, 0, 0, 0);
+                return d.getTime();
+        }
+    };
+export { FilterClauseValueEditorDate };

package/src/filter-clause/value-editors/FilterClauseValueEditorNumber.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } from "react";
+import { ExpandoInput } from "@vuu-ui/vuu-ui-controls";
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+const FilterClauseValueEditorNumber = /*#__PURE__*/ forwardRef(function({ inputProps, className, "data-field": dataField, onChangeValue, value: valueProp }, forwardedRef) {
+    const [value, setValue] = useState(isValidNumber(valueProp) ? valueProp.toString() : "");
+    const handleChange = useCallback((evt)=>{
+        const { value } = evt.target;
+        const numericValue = parseFloat(value);
+        if (isValidNumber(numericValue)) console.log("its valid");
+        setValue(value);
+    }, []);
+    const handleKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key || "Tab" === evt.key) {
+            const { value } = evt.target;
+            const numericValue = parseFloat(value);
+            if (isValidNumber(numericValue)) onChangeValue(numericValue);
+        }
+    }, [
+        onChangeValue
+    ]);
+    return /*#__PURE__*/ jsx(ExpandoInput, {
+        inputProps: inputProps,
+        className: className,
+        "data-field": dataField,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: forwardedRef,
+        value: value
+    });
+});
+export { FilterClauseValueEditorNumber };

package/src/filter-clause/value-editors/FilterClauseValueEditorText.js

@@ -0,0 +1,182 @@
+import { jsx } from "react/jsx-runtime";
+import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
+import { ExpandoInput } from "@vuu-ui/vuu-ui-controls";
+import { NO_DATA_MATCH, dispatchKeyboardEvent, getVuuTable } from "@vuu-ui/vuu-utils";
+import { Option, useForkRef } from "@salt-ds/core";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ExpandoCombobox } from "../ExpandoCombobox.js";
+const FilterClauseValueEditorText = /*#__PURE__*/ forwardRef(function({ inputProps: inputPropsProp, className, column, onChangeValue, onOpenChange, operator, table, value, dropdownOnAutofocus = true }, forwardedRef) {
+    const isMultiValue = "in" === operator;
+    const expandoRef = useRef(null);
+    const combinedRef = useForkRef(forwardedRef, expandoRef);
+    const [valueInputValue, setValueInputValue] = useState(value?.toString() ?? "");
+    const [typeaheadValues, setTypeaheadValues] = useState([]);
+    const getSuggestions = useTypeaheadSuggestions();
+    const handleSingleValueSelectionChange = useCallback((_, [value])=>onChangeValue(value), [
+        onChangeValue
+    ]);
+    const handleMultiValueSelectionChange = useCallback((_, values)=>onChangeValue(values, false), [
+        onChangeValue
+    ]);
+    const highlightFirstOption = useCallback(()=>{
+        if (expandoRef.current) {
+            const input = expandoRef.current?.querySelector('input[role="combobox"]');
+            if (input) requestAnimationFrame(()=>{
+                dispatchKeyboardEvent(input, "keydown", "ArrowDown");
+            });
+        }
+    }, []);
+    const handleOpenChange = useCallback((open, reason)=>{
+        if (open && "focus" === reason && expandoRef.current) highlightFirstOption();
+    }, [
+        highlightFirstOption
+    ]);
+    useEffect(()=>{
+        if (table) {
+            const vuuTable = getVuuTable(table);
+            const params = valueInputValue && !isMultiValue ? [
+                vuuTable,
+                column.name,
+                valueInputValue
+            ] : [
+                vuuTable,
+                column.name
+            ];
+            getSuggestions(params).then((suggestions)=>{
+                if (false === suggestions) setTypeaheadValues(false);
+                else 0 === suggestions.length && valueInputValue ? setTypeaheadValues(NO_DATA_MATCH) : setTypeaheadValues(suggestions);
+            }).catch((err)=>{
+                console.error("Error getting suggestions", err);
+            });
+        }
+    }, [
+        table,
+        column,
+        valueInputValue,
+        getSuggestions,
+        isMultiValue
+    ]);
+    const handleInputChange = useCallback((evt)=>{
+        const { value } = evt.target;
+        setValueInputValue(value);
+        if ("starts" === operator || "ends" === operator || "contains" === operator) onChangeValue(value, false);
+    }, [
+        onChangeValue,
+        operator
+    ]);
+    const handleInputCommit = useCallback((_, value = "")=>{
+        if ("string" == typeof value) onChangeValue(value);
+    }, [
+        onChangeValue
+    ]);
+    const handleKeyDownFreeTextInput = useCallback((evt)=>{
+        if (("Enter" === evt.key || "Tab" === evt.key) && "" !== valueInputValue) {
+            evt.stopPropagation();
+            evt.preventDefault();
+            onChangeValue(valueInputValue);
+        } else inputPropsProp?.onKeyDown?.(evt);
+    }, [
+        inputPropsProp,
+        onChangeValue,
+        valueInputValue
+    ]);
+    const inputProps = useMemo(()=>{
+        if ("starts" === operator || "ends" === operator) return {
+            ...inputPropsProp,
+            onKeyDown: handleKeyDownFreeTextInput
+        };
+        return inputPropsProp;
+    }, [
+        inputPropsProp,
+        handleKeyDownFreeTextInput,
+        operator
+    ]);
+    const getValueInputField = useCallback(()=>{
+        if (false === typeaheadValues) return /*#__PURE__*/ jsx(ExpandoInput, {
+            inputProps: inputProps,
+            className: className,
+            "data-field": "value",
+            value: valueInputValue,
+            ref: forwardedRef,
+            onChange: handleInputChange,
+            onCommit: handleInputCommit
+        });
+        switch(operator){
+            case "in":
+                return /*#__PURE__*/ jsx(ExpandoCombobox, {
+                    inputProps: inputProps,
+                    className: className,
+                    "data-field": "value",
+                    onChange: handleInputChange,
+                    onOpenChange: onOpenChange,
+                    onSelectionChange: handleMultiValueSelectionChange,
+                    ref: forwardedRef,
+                    multiselect: true,
+                    truncate: true,
+                    value: value,
+                    dropdownOnAutofocus: dropdownOnAutofocus,
+                    children: typeaheadValues.map((state)=>/*#__PURE__*/ jsx(Option, {
+                            value: state
+                        }, state))
+                });
+            case "starts":
+                return /*#__PURE__*/ jsx(ExpandoCombobox, {
+                    inputProps: inputProps,
+                    className: className,
+                    "data-field": "value",
+                    dropdownOnAutofocus: dropdownOnAutofocus,
+                    onChange: handleInputChange,
+                    onSelectionChange: handleSingleValueSelectionChange,
+                    ref: forwardedRef,
+                    value: value,
+                    children: typeaheadValues.map((state)=>/*#__PURE__*/ jsx(Option, {
+                            value: state,
+                            disabled: true
+                        }, state))
+                });
+            case "ends":
+                return /*#__PURE__*/ jsx(ExpandoInput, {
+                    inputProps: inputProps,
+                    className: className,
+                    "data-field": "value",
+                    value: valueInputValue,
+                    ref: forwardedRef,
+                    onChange: handleInputChange
+                });
+            default:
+                return typeaheadValues.length > 0 ? /*#__PURE__*/ jsx(ExpandoCombobox, {
+                    className: className,
+                    "data-field": "value",
+                    dropdownOnAutofocus: dropdownOnAutofocus,
+                    inputProps: inputProps,
+                    onChange: handleInputChange,
+                    onOpenChange: handleOpenChange,
+                    onSelectionChange: handleSingleValueSelectionChange,
+                    ref: combinedRef,
+                    title: "value",
+                    value: value,
+                    children: typeaheadValues.map((state)=>/*#__PURE__*/ jsx(Option, {
+                            value: state
+                        }, state))
+                }) : null;
+        }
+    }, [
+        typeaheadValues,
+        operator,
+        inputProps,
+        className,
+        valueInputValue,
+        forwardedRef,
+        handleInputChange,
+        handleInputCommit,
+        onOpenChange,
+        handleMultiValueSelectionChange,
+        value,
+        dropdownOnAutofocus,
+        handleSingleValueSelectionChange,
+        handleOpenChange,
+        combinedRef
+    ]);
+    return getValueInputField();
+});
+export { FilterClauseValueEditorText };

package/src/filter-clause/value-editors/FilterClauseValueEditorTime.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { getLocalTimeZone } from "@internationalized/date";
+import { toCalendarDate } from "@vuu-ui/vuu-utils";
+import { VuuTimePicker } from "@vuu-ui/vuu-ui-controls";
+const FilterClauseValueEditorTime = (props)=>{
+    const { className, onChangeValue, operator, value } = props;
+    const toEpochMilliS = getEpochMillisConverter(operator);
+    const [date, setDate] = useState(()=>getInitialState(value));
+    const handleCommit = useCallback((e, selectedDateInputValue)=>{
+        console.log("change time");
+        if (selectedDateInputValue) {
+            const dateValue = toCalendarDate(new Date(selectedDateInputValue));
+            setDate(dateValue);
+            if (selectedDateInputValue) onChangeValue(toEpochMilliS(dateValue));
+        }
+    }, [
+        onChangeValue,
+        toEpochMilliS
+    ]);
+    const onBlur = useCallback(()=>{
+        date && onChangeValue(toEpochMilliS(date));
+    }, [
+        date,
+        onChangeValue,
+        toEpochMilliS
+    ]);
+    return /*#__PURE__*/ jsx(VuuTimePicker, {
+        "data-field": "value",
+        className: className,
+        onBlur: onBlur,
+        onCommit: handleCommit
+    });
+};
+function getInitialState(value) {
+    return value ? toCalendarDate(new Date(value)) : void 0;
+}
+const getEpochMillisConverter = (op)=>(date, timezone = getLocalTimeZone())=>{
+        const d = date.toDate(timezone);
+        switch(op){
+            case ">":
+            case "<=":
+                d.setHours(23, 59, 59, 999);
+                return d.getTime();
+            case ">=":
+            case "<":
+            case "=":
+            case "!=":
+                d.setHours(0, 0, 0, 0);
+                return d.getTime();
+        }
+    };
+export { FilterClauseValueEditorTime };

package/src/filter-container/ExtendedSingleValueFilterClause.js

@@ -0,0 +1,35 @@
+import { Time, isValidTimeString } from "@vuu-ui/vuu-utils";
+const isTimeToday = (options)=>"TimeString" === options.type && "today" === options.date;
+class ExtendedSingleValueFilterClause {
+    column;
+    op;
+    value;
+    #options;
+    constructor(column, op, value, extendedOptions){
+        this.column = column;
+        this.op = op;
+        this.value = value;
+        this.#options = extendedOptions;
+    }
+    name;
+    asQuery() {
+        const { column, op, value } = this;
+        if (isTimeToday(this.#options)) if (isValidTimeString(value)) {
+            const timeValue = +Time(value).asDate();
+            if (">=" === op) return `${column} > ${timeValue - 1}`;
+            if ("<=" === op) return `${column} < ${timeValue + 1}`;
+            return `${column} ${op} ${timeValue}`;
+        } else throw Error(`[ExtendedSingleValueFilterClause] invalid TimeStrong ${value}`);
+        throw Error("[ExtendedSingleValueFilterClause] unhandled extended filter type");
+    }
+    toJSON() {
+        const { column, op, value } = this;
+        return {
+            column,
+            op,
+            value,
+            extendedOptions: this.#options
+        };
+    }
+}
+export { ExtendedSingleValueFilterClause, isTimeToday };

package/src/filter-container/FilterContainer.css.js

@@ -0,0 +1,13 @@
+const css = `
+.vuuFilterContainer {
+  display: var(--vuuFilterContainer-display, flex);
+  flex: var(--vuuFilterContainer-flex);
+  flex-direction: var(--vuuFilterContainer-flexDirection, column);
+  gap: var(--salt-spacing-100);
+  height: var(--vuuFilterContainer-height);
+  overflow: auto;
+}
+
+
+`;
+export default css;