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

package/src/filter-clause/ExpandoCombobox.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ComboBox } from "@salt-ds/core";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import ExpandoCombobox_0 from "./ExpandoCombobox.css";
+const classBase = "vuuExpandoCombobox";
+const defaultItemToString = (item)=>{
+    if ("string" == typeof item) return item;
+    return item?.toString() ?? "";
+};
+const ExpandoCombobox_ExpandoCombobox = /*#__PURE__*/ forwardRef(function({ children, className, inputProps: inputPropsProp, itemToString = defaultItemToString, multiselect, onChange, onSelectionChange, onOpenChange, value: valueProp, dropdownOnAutofocus = true, ...props }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-expando-combobox",
+        css: ExpandoCombobox_0,
+        window: targetWindow
+    });
+    const [open, setOpen] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [value, setValue] = useState(void 0 === valueProp ? "" : valueProp.toString());
+    const handleChange = useCallback((evt)=>{
+        const value = evt.target.value;
+        onChange?.(evt);
+        setValue(value);
+        setSelected([]);
+    }, [
+        onChange
+    ]);
+    const handleSelectionChange = useCallback((evt, newSelected)=>{
+        if (multiselect) onSelectionChange?.(evt, newSelected);
+        else {
+            setSelected(newSelected);
+            const [selectedValue] = newSelected;
+            setTimeout(()=>{
+                onSelectionChange?.(evt, newSelected);
+                setValue(itemToString(selectedValue));
+            }, 100);
+        }
+    }, [
+        onSelectionChange,
+        itemToString,
+        multiselect
+    ]);
+    const handleOpenChange = useCallback((open, reason)=>{
+        onOpenChange?.(open, reason);
+        setOpen(open);
+    }, [
+        onOpenChange
+    ]);
+    const inputProps = useMemo(()=>({
+            autoComplete: "off",
+            ...inputPropsProp,
+            onFocus: (evt)=>{
+                inputPropsProp?.onFocus?.(evt);
+                if (!dropdownOnAutofocus) return;
+                setTimeout(()=>{
+                    setOpen(true);
+                    onOpenChange?.(true, "focus");
+                }, 100);
+            }
+        }), [
+        inputPropsProp,
+        dropdownOnAutofocus,
+        onOpenChange
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(classBase, className),
+        "data-text": value,
+        ref: forwardedRef,
+        children: /*#__PURE__*/ jsx(ComboBox, {
+            ...props,
+            inputProps: inputProps,
+            multiselect: multiselect,
+            onChange: handleChange,
+            onOpenChange: handleOpenChange,
+            onSelectionChange: handleSelectionChange,
+            open: open,
+            selected: selected,
+            value: value,
+            children: children
+        })
+    });
+});
+export { ExpandoCombobox_ExpandoCombobox as ExpandoCombobox };

package/src/filter-clause/FilterClause.css.js

@@ -0,0 +1,101 @@
+const css = `
+.vuuFilterClause {
+  --vuuExpandoInput-top: 0;
+  --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));
+  --vuuExpandoInput-height: var(--content-height);
+  --vuuExpandoCombobox-height: var(--content-height);
+  --saltButton-height: 16px;
+  --saltButton-width: 16px;
+  --salt-focused-outlineStyle: dotted;
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-editable-borderColor);
+  border-radius: var(--saltButton-borderRadius);
+  align-items: center;
+  gap: var(--salt-spacing-50);
+  height: calc(var(--salt-size-base) + var(--salt-size-spacing-100));
+  min-width: calc(var(--salt-size-base) * 4);
+  padding: 0 var(--salt-spacing-100);
+  border-style: solid;
+  border-width: 1px;
+  flex-direction: row;
+  width: fit-content;
+  display: flex;
+
+  & .vuuFilterClauseField {
+    flex: none;
+  }
+
+  & .vuuFilterClauseField:last-child {
+    flex: 1 0 auto;
+  }
+
+  & .vuuFilterClauseField.vuuExpandoInput {
+    align-items: flex-end;
+    display: inline-flex;
+  }
+
+  & .vuuExpandoCombobox {
+    flex: none;
+  }
+
+  &:focus-within {
+    border-color: var(--salt-editable-borderColor-active);
+  }
+
+  & .saltComboBox-focused, & .saltComboBox-focused:hover {
+    outline: none;
+  }
+
+  & .saltTokenizedInput {
+    height: 16px;
+    min-height: 16px;
+  }
+
+  & .saltTokenizedInput .saltInputPill {
+    --pill-fontSize: 12px;
+    --saltButton-borderStyle: none;
+    --pill-background: none;
+    height: 16px;
+    margin: 0;
+  }
+
+  & .saltTokenizedInput-pillGroup {
+    height: 16px;
+    padding: 0;
+  }
+
+  & .saltDateInput {
+    width: auto;
+  }
+}
+
+.salt-density-high .vuuFilterClause {
+  --salt-text-lineHeight: 12px;
+  --saltInputLegacy-fontSize: 12px;
+  --saltInputLegacy-minWidth: 12px;
+  gap: 4px;
+  padding: 4px 8px;
+}
+
+.salt-density-high .vuuFilterClause .saltInput {
+  height: 16px;
+  min-height: 16px;
+  padding: 0;
+}
+
+.vuuFilterClauseOperator-hidden {
+  display: none;
+}
+
+.vuuFilterClause .saltInput-focused, .vuuFilterClause .saltTokenizedInput-focused {
+  color: var(--salt-content-primary-foreground);
+  outline: none;
+}
+
+.vuuFilterClause-DatePicker {
+  border: none;
+}
+
+
+`;
+export default css;

package/src/filter-clause/FilterClause.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { ColumnPicker } from "./column-picker/ColumnPicker.js";
+import { useFilterClause } from "./useFilterClause.js";
+import { FilterClauseValueEditor } from "./value-editors/FilterClauseValueEditor.js";
+import FilterClause from "./FilterClause.css";
+import { OperatorPicker } from "./operator-picker/OperatorPicker.js";
+const classBase = "vuuFilterClause";
+const FilterClause_FilterClause = ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus = true, ...htmlAttributes })=>{
+    const { inputProps, columnRef, filterClause, onChangeValue, onSelectColumn, onSelectOperator, onDeselectValue, onOpenChange, operatorRef, selectedColumn, valueRef, showDropdownOnAutoFocus } = useFilterClause({
+        filterClauseModel,
+        onCancel,
+        onFocusSave,
+        columnsByName,
+        dropdownOnAutofocus
+    });
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-clause",
+        css: FilterClause,
+        window: targetWindow
+    });
+    const columns = useMemo(()=>Object.values(columnsByName), [
+        columnsByName
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(classBase, className),
+        ...htmlAttributes,
+        tabIndex: 0,
+        children: [
+            /*#__PURE__*/ jsx(ColumnPicker, {
+                inputProps: inputProps,
+                className: clsx(`${classBase}Field`, `${classBase}Column`),
+                columns: columns,
+                dropdownOnAutofocus: showDropdownOnAutoFocus,
+                onSelect: onSelectColumn,
+                ref: columnRef,
+                value: filterClauseModel.column ?? ""
+            }, "column-field"),
+            selectedColumn?.name ? /*#__PURE__*/ jsx(OperatorPicker, {
+                column: selectedColumn,
+                inputProps: inputProps,
+                className: clsx(`${classBase}Field`, `${classBase}Operator`, {
+                    [`${classBase}Operator-hidden`]: null === selectedColumn
+                }),
+                dropdownOnAutofocus: showDropdownOnAutoFocus,
+                onSelect: onSelectOperator,
+                ref: operatorRef,
+                value: filterClauseModel.op ?? ""
+            }, "operator-field") : null,
+            filterClauseModel.op ? /*#__PURE__*/ jsx(FilterClauseValueEditor, {
+                dropdownOnAutofocus: showDropdownOnAutoFocus,
+                inputProps: inputProps,
+                onChangeValue: onChangeValue,
+                onOpenChange: onOpenChange,
+                onDeselectValue: onDeselectValue,
+                operator: filterClauseModel.op,
+                ref: valueRef,
+                selectedColumn: selectedColumn,
+                table: vuuTable,
+                value: filterClause?.values ?? filterClause?.value
+            }, "value-field") : null
+        ]
+    });
+};
+export { FilterClause_FilterClause as FilterClause };

package/src/filter-clause/column-picker/ColumnPicker.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { ExpandoCombobox } from "../ExpandoCombobox.js";
+import { Option, useForkRef } from "@salt-ds/core";
+import { forwardRef } from "react";
+import { useColumnPicker } from "./useColumnPicker.js";
+const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ className, columns, dropdownOnAutofocus = true, inputProps, onSelect, value: valueProp }, forwardedRef) {
+    const { ref, ...comboProps } = useColumnPicker({
+        onSelect,
+        value: valueProp?.toString() ?? ""
+    });
+    return /*#__PURE__*/ jsx(ExpandoCombobox, {
+        ...comboProps,
+        className: className,
+        "data-field": "column",
+        dropdownOnAutofocus: dropdownOnAutofocus,
+        inputProps: inputProps,
+        ref: useForkRef(forwardedRef, ref),
+        title: "column",
+        children: columns.filter(({ name })=>name.toLowerCase().includes(comboProps.value.toLowerCase())).map(({ name, label = name })=>/*#__PURE__*/ jsx(Option, {
+                value: name,
+                children: label
+            }, name))
+    });
+});
+export { ColumnPicker_ColumnPicker as ColumnPicker };

package/src/filter-clause/column-picker/useColumnPicker.js

@@ -0,0 +1,42 @@
+import { useCallback, useRef, useState } from "react";
+import { dispatchKeyboardEvent } from "@vuu-ui/vuu-utils";
+const useColumnPicker = ({ onSelect, value: valueProp })=>{
+    const ref = useRef(null);
+    const openRef = useRef(false);
+    const [value, setValue] = useState(valueProp);
+    const highlightFirstOption = useCallback(()=>{
+        if (ref.current) {
+            const input = ref.current?.querySelector('input[role="combobox"]');
+            if (input) requestAnimationFrame(()=>{
+                dispatchKeyboardEvent(input, "keydown", "ArrowDown");
+            });
+        }
+    }, []);
+    const handleChange = useCallback((event)=>{
+        const value = event.target.value;
+        setValue(value);
+        if (openRef.current && "" === value) highlightFirstOption();
+    }, [
+        highlightFirstOption
+    ]);
+    const handleSelectionChange = useCallback((evt, [newSelected])=>{
+        onSelect?.(evt, newSelected);
+        setValue(newSelected ?? "");
+    }, [
+        onSelect
+    ]);
+    const handleOpenChange = useCallback((isOpen, reason)=>{
+        openRef.current = isOpen;
+        if (isOpen && "focus" === reason) highlightFirstOption();
+    }, [
+        highlightFirstOption
+    ]);
+    return {
+        onChange: handleChange,
+        onOpenChange: handleOpenChange,
+        onSelectionChange: handleSelectionChange,
+        ref,
+        value: value.toString().trim()
+    };
+};
+export { useColumnPicker };

package/src/filter-clause/filterClauseFocusManagement.js

@@ -0,0 +1,156 @@
+import { getElementDataIndex, queryClosest } from "@vuu-ui/vuu-utils";
+const getFilterClauseElement = (possiblyDescendant)=>possiblyDescendant?.closest(".vuuFilterClause");
+const getFilterClauseFieldElement = (possiblyDescendant)=>possiblyDescendant?.closest(".vuuFilterClauseField");
+const mapFilterFieldToClassName = {
+    column: "vuuFilterClauseColumn",
+    operator: "vuuFilterClauseOperator",
+    value: "vuuFilterClauseValue"
+};
+const getFilterClauseDetails = ({ classList })=>{
+    if (classList.contains("vuuFilterClauseColumn")) return "column";
+    if (classList.contains("vuuFilterClauseOperator")) return "operator";
+    if (classList.contains("vuuFilterClauseValue")) return "value";
+    throw Error("getFilterClauseField, filterClauseElemnent is missing required class name");
+};
+const getFocusedFieldDetails = ()=>{
+    const el = document.activeElement;
+    const field = queryClosest(el, ".vuuFilterClauseField,.saltCalendar");
+    if (field?.matches(".vuuFilterClauseField")) {
+        const filterClause = queryClosest(field, ".vuuFilterClause");
+        if (filterClause && field) return [
+            getElementDataIndex(filterClause),
+            getFilterClauseDetails(field)
+        ];
+    } else if (field?.matches(".saltCalendar")) console.log("its in a calendar");
+    return [];
+};
+const focusField = (fieldOrClause)=>{
+    const input = fieldOrClause?.querySelector("input");
+    if (input) {
+        input.focus();
+        requestAnimationFrame(()=>{
+            input?.select();
+        });
+    }
+};
+const elementIsFilterCombinator = (element)=>null !== element && element.classList.contains("vuuFilterClauseCombinator");
+const elementIsFilterClause = (element)=>null !== element && element.classList.contains("vuuFilterClause");
+const focusFilterClauseField = (filterEditor, filterClauseIndex, fieldName = "value")=>{
+    if (filterEditor) {
+        const fieldClassName = mapFilterFieldToClassName[fieldName];
+        const field = filterEditor.querySelector(`.vuuFilterClause[data-index="${filterClauseIndex}"] .${fieldClassName}`);
+        focusField(field);
+    }
+};
+const focusLastClauseValue = (filterEditor)=>{
+    const field = Array.from(filterEditor?.querySelectorAll(".vuuFilterClauseField")).at(-1);
+    focusField(field);
+};
+const focusNextFocusableElement = (direction = "fwd")=>{
+    const activeField = getFocusedField();
+    const filterClause = getFilterClauseElement(activeField);
+    if ("fwd" === direction && filterClause?.lastChild === activeField) requestAnimationFrame(()=>{
+        focusNextFocusableElement();
+    });
+    else {
+        const nextField = "fwd" === direction ? activeField?.nextElementSibling : activeField?.previousElementSibling;
+        nextField?.querySelector("input")?.focus();
+    }
+};
+const getFocusedField = ()=>{
+    const activeElement = document.activeElement;
+    if (activeElement?.classList.contains("vuuFilterClause-clearButton")) return activeElement;
+    return getFilterClauseFieldElement(activeElement);
+};
+const focusNextElement = ()=>{
+    const filterClauseField = getFocusedField();
+    const filterClause = getFilterClauseElement(filterClauseField);
+    if (filterClause && filterClauseField) if (filterClauseField.classList.contains("vuuFilterClauseValue")) {
+        const clearButton = filterClause.querySelector(".vuuFilterClause-clearButton");
+        clearButton?.focus();
+    } else focusNextFocusableElement();
+};
+const cursorAtTextStart = (input)=>0 === input.selectionStart;
+const cursorAtTextEnd = (input)=>input.selectionStart === input.value.length;
+const getFieldName = (field)=>field?.classList.contains("vuuFilterClauseColumn") ? "column" : field?.classList.contains("vuuFilterClauseOperator") ? "operator" : "value";
+const clauseIsNotFirst = (el)=>{
+    const clause = getFilterClauseElement(el);
+    if (clause) {
+        const index = getElementDataIndex(clause);
+        return index > 0;
+    }
+};
+const clauseIsNotLast = (el)=>{
+    const clause = getFilterClauseElement(el);
+    const nextClause = clause?.nextElementSibling;
+    return nextClause?.classList.contains("vuuFilterClauseCombinator");
+};
+const tabToPreviousFilterCombinator = (currentElement)=>{
+    const filterClause = getFilterClauseElement(currentElement);
+    const nextItem = filterClause.previousSibling;
+    console.log("tab to previous combinator");
+    nextItem?.focus();
+};
+const navigateToNextFilterClause = (currentElement, direction = "fwd")=>{
+    if ("bwd" === direction) if (elementIsFilterCombinator(currentElement)) {
+        const nextClause = currentElement.previousElementSibling;
+        if (elementIsFilterClause(nextClause)) {
+            const nextField = nextClause.querySelector(".vuuFilterClauseValue");
+            console.log(`focus field Value ${nextField?.classList}`);
+            focusField(nextField);
+        }
+    } else {
+        const filterClause = getFilterClauseElement(currentElement);
+        const nextClause = filterClause.previousSibling;
+        const nextField = nextClause.querySelector(".vuuFilterClauseValue");
+        focusField(nextField);
+    }
+    else {
+        const nextClause = currentElement.nextSibling;
+        focusField(nextClause);
+    }
+};
+const navigateToNextItemIfAtBoundary = (evt)=>{
+    const input = evt.target;
+    const field = getFilterClauseFieldElement(input);
+    if ("ArrowLeft" === evt.key) {
+        if (cursorAtTextStart(input)) {
+            const fieldName = getFieldName(field);
+            if ("column" === fieldName) {
+                if (clauseIsNotFirst(input)) {
+                    const filterClause = getFilterClauseElement(field);
+                    const combinator = filterClause.previousElementSibling;
+                    combinator?.focus();
+                }
+            } else {
+                evt.preventDefault();
+                focusField(field.previousSibling);
+            }
+        }
+        evt.stopPropagation();
+    } else if ("ArrowRight" === evt.key) {
+        if (cursorAtTextEnd(input)) {
+            const fieldName = getFieldName(field);
+            if ("value" === fieldName) {
+                if (clauseIsNotLast(input)) {
+                    const filterClause = getFilterClauseElement(field);
+                    const combinator = filterClause.nextElementSibling;
+                    combinator?.focus();
+                }
+                return;
+            }
+            evt.preventDefault();
+            focusField(field.nextSibling);
+        }
+        evt.stopPropagation();
+    }
+};
+const focusFirstClauseIfAllClausesValid = (filterEditor)=>{
+    const columInput = Array.from(filterEditor.querySelectorAll(".vuuFilterClauseColumn input"));
+    if (columInput.every((input)=>input.value.length > 0)) setTimeout(()=>{
+        const input = columInput.at(0);
+        input?.select();
+        input?.focus();
+    }, 100);
+};
+export { clauseIsNotFirst, elementIsFilterClause, elementIsFilterCombinator, focusFilterClauseField, focusFirstClauseIfAllClausesValid, focusLastClauseValue, focusNextElement, focusNextFocusableElement, getFocusedFieldDetails, navigateToNextFilterClause, navigateToNextItemIfAtBoundary, tabToPreviousFilterCombinator };

package/src/filter-clause/index.js

@@ -0,0 +1,5 @@
+export * from "./column-picker/ColumnPicker.js";
+export * from "./ExpandoCombobox.js";
+export * from "./FilterClause.js";
+export * from "./value-editors/FilterClauseValueEditorText.js";
+export { OperatorPicker } from "./operator-picker/OperatorPicker.js";

package/src/filter-clause/operator-picker/OperatorPicker.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Option, useForkRef } from "@salt-ds/core";
+import { forwardRef } from "react";
+import { ExpandoCombobox } from "../ExpandoCombobox.js";
+import { getOperators } from "./operator-utils.js";
+import { useOperatorPicker } from "./useOperatorPicker.js";
+const OperatorPicker_OperatorPicker = /*#__PURE__*/ forwardRef(function({ className, column, dropdownOnAutofocus = true, inputProps, onSelect, value: valueProp }, forwardedRef) {
+    const { ref, ...comboProps } = useOperatorPicker({
+        onSelect,
+        value: valueProp?.toString() ?? ""
+    });
+    return /*#__PURE__*/ jsx(ExpandoCombobox, {
+        ...comboProps,
+        className: className,
+        "data-field": "operator",
+        dropdownOnAutofocus: dropdownOnAutofocus,
+        inputProps: inputProps,
+        ref: useForkRef(forwardedRef, ref),
+        title: "operator",
+        children: getOperators(column).filter((op)=>op.toLowerCase().includes(comboProps.value.toLowerCase())).map((op)=>/*#__PURE__*/ jsx(Option, {
+                value: op
+            }, op))
+    });
+});
+export { OperatorPicker_OperatorPicker as OperatorPicker };

package/src/filter-clause/operator-picker/operator-utils.js

@@ -0,0 +1,23 @@
+import { isNumericColumn, isTextColumn, isTimestampColumn } from "@vuu-ui/vuu-utils";
+const textOperators = [
+    "=",
+    "in",
+    "!=",
+    "starts",
+    "ends",
+    "contains"
+];
+const numericOperators = [
+    "=",
+    "!=",
+    ">",
+    ">=",
+    "<",
+    "<="
+];
+const getOperators = (column)=>{
+    if (isTextColumn(column)) return textOperators;
+    if (isNumericColumn(column) || isTimestampColumn(column)) return numericOperators;
+    throw Error("getOperators only supports text and numeric columns");
+};
+export { getOperators, numericOperators, textOperators };

package/src/filter-clause/operator-picker/useOperatorPicker.js

@@ -0,0 +1,42 @@
+import { useCallback, useRef, useState } from "react";
+import { dispatchKeyboardEvent } from "@vuu-ui/vuu-utils";
+const useOperatorPicker = ({ onSelect, value: valueProp })=>{
+    const ref = useRef(null);
+    const openRef = useRef(false);
+    const [value, setValue] = useState(valueProp);
+    const highlightFirstOption = useCallback(()=>{
+        if (ref.current) {
+            const input = ref.current?.querySelector('input[role="combobox"]');
+            if (input) requestAnimationFrame(()=>{
+                dispatchKeyboardEvent(input, "keydown", "ArrowDown");
+            });
+        }
+    }, []);
+    const handleChange = useCallback((event)=>{
+        const value = event.target.value;
+        setValue(value);
+        if (openRef.current && "" === value) highlightFirstOption();
+    }, [
+        highlightFirstOption
+    ]);
+    const handleSelectionChange = useCallback((evt, [newSelected])=>{
+        onSelect?.(evt, newSelected);
+        setValue(newSelected ?? "");
+    }, [
+        onSelect
+    ]);
+    const handleOpenChange = useCallback((isOpen, reason)=>{
+        openRef.current = isOpen;
+        if (isOpen && "focus" === reason) highlightFirstOption();
+    }, [
+        highlightFirstOption
+    ]);
+    return {
+        onChange: handleChange,
+        onOpenChange: handleOpenChange,
+        onSelectionChange: handleSelectionChange,
+        ref,
+        value: value.toString().trim()
+    };
+};
+export { useOperatorPicker };