@vuu-ui/vuu-filters 3.5.14 → 3.5.16

package/README.md

@@ -15,6 +15,46 @@ Vuu also supports `MultiValueFilterClause`
 
 ## ColumnFilter
 
+Set `showOperatorPicker` to render a compact operator dropdown before the value.
+It is opt-in; existing fixed-operator filters are unchanged.
+
+```tsx
+<ColumnFilter
+  column={{ name: "price", serverDataType: "double" }}
+  showOperatorPicker
+  operators={["=", ">", ">=", "between-inclusive"]}
+  defaultValue=""
+  onCommit={handleCommit}
+/>
+```
+
+`operators` replaces the default options and preserves their order. Numeric
+(including scaled-decimal) and temporal columns default to `=`, `!=`, `>`, `>=`,
+`<`, `<=`; text columns to `=`, `!=`, `starts`, `ends`, `contains`; boolean
+columns to `=`, `!=`. Numeric and temporal filters can also opt into `between`
+and `between-inclusive`. Multi-value `in` filters are not supported by this
+control. Empty lists, incompatible operators, and selections outside the list
+raise an error.
+
+Use `defaultOperator` for an uncontrolled picker, or `operator` together with
+`onOperatorChange(event, operator)` for a controlled picker. The initial operator
+is `=` if allowed, otherwise the first option. Operator control is independent
+of value control (`value` / `defaultValue`).
+
+Selecting a different operator preserves the value and immediately commits a
+populated, valid filter using the new operator. An already empty value only changes the
+selection. Switching to a range retains the lower value and starts with an empty
+upper value; switching back retains the lower value (and clears a filter if only
+the upper value was populated). Incomplete ranges use the
+existing partial-range commit behaviour. The operator picker respects
+`InputProps.disabled` and `InputProps.readOnly`.
+
+`FilterContainerColumnFilter` accepts the same picker options, manages selection
+internally, and restores operators and values from externally loaded or saved
+filters. A loaded operator must be included in the configured options. Clearing
+an external filter resets the operator to its default; clearing a value locally
+keeps the selected operator.
+
 onCommit is a `ColumnFilterCommitHandler`
 
 ```typescript

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.14",
+  "version": "3.5.16",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,19 +10,19 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.5.14",
-    "@vuu-ui/vuu-protocol-types": "3.5.14",
-    "@vuu-ui/vuu-table-types": "3.5.14",
-    "@vuu-ui/vuu-filter-types": "3.5.14"
+    "@vuu-ui/vuu-data-types": "3.5.16",
+    "@vuu-ui/vuu-protocol-types": "3.5.16",
+    "@vuu-ui/vuu-table-types": "3.5.16",
+    "@vuu-ui/vuu-filter-types": "3.5.16"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.14",
-    "@vuu-ui/vuu-data-react": "3.5.14",
-    "@vuu-ui/vuu-filter-parser": "3.5.14",
-    "@vuu-ui/vuu-popups": "3.5.14",
-    "@vuu-ui/vuu-ui-controls": "3.5.14",
-    "@vuu-ui/vuu-table": "3.5.14",
-    "@vuu-ui/vuu-utils": "3.5.14",
+    "@vuu-ui/vuu-context-menu": "3.5.16",
+    "@vuu-ui/vuu-data-react": "3.5.16",
+    "@vuu-ui/vuu-filter-parser": "3.5.16",
+    "@vuu-ui/vuu-popups": "3.5.16",
+    "@vuu-ui/vuu-ui-controls": "3.5.16",
+    "@vuu-ui/vuu-table": "3.5.16",
+    "@vuu-ui/vuu-utils": "3.5.16",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

package/src/FilterAggregator.js

@@ -1,4 +1,4 @@
-import { EpochTimestamp, getTemporalInfo, getTypedValueForDescriptor, isAndFilter, isBetweenFilter, isExtendedFilter, isMultiClauseFilter, isSingleValueFilter } from "@vuu-ui/vuu-utils";
+import { EpochTimestamp, getTemporalInfo, getTypedValueForDescriptor, isAndFilter, isBetweenFilter, isBetweenOperator, isExtendedFilter, isMultiClauseFilter, isSingleValueFilter } from "@vuu-ui/vuu-utils";
 import { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause.js";
 function installExtendedFilters(filter, throwIfUndefined = false) {
     if (void 0 !== filter) if (isExtendedFilter(filter)) {
@@ -52,7 +52,11 @@ const singleValueOps = [
     "starts",
     "ends"
 ];
-const asSingleValueOp = (op)=>singleValueOps.includes(op) ? op : "=";
+const asSingleValueOp = (op)=>{
+    const operator = singleValueOps.find((candidate)=>candidate === op);
+    if (void 0 === operator) throw Error(`[FilterAggregator] unsupported single-value operator ${op}`);
+    return operator;
+};
 class FilterAggregator {
     #filters = new Map();
     constructor(filter){
@@ -87,7 +91,7 @@ class FilterAggregator {
         } else {
             const typedValue = getFilterValue(column, value.toString(), temporalInfo, options, true);
             if (void 0 === typedValue) this.#filters.delete(column.name);
-            else this.#filters.set(column.name, createClause(temporalInfo ? asSingleValueOp(op) : "=", typedValue));
+            else this.#filters.set(column.name, createClause(isBetweenOperator(op) ? "=" : asSingleValueOp(op), typedValue));
         }
     }
     has({ name }) {

package/src/column-filter/ColumnFilter.css.js

@@ -51,6 +51,29 @@ const css = `
   border-color: red;
 }
 
+.vuuColumnFilter.vuuColumnFilter-withOperator {
+  max-width: none;
+
+  & [data-field="operator"] {
+    border-right: 1px solid var(--salt-separable-primary-borderColor);
+    margin-right: var(--salt-spacing-100);
+    align-self: stretch;
+    display: flex;
+  }
+
+  & .vuuColumnFilter-operator {
+    background: none;
+    border: none;
+    width: auto;
+    min-width: 60px;
+
+    &.saltDropdown .saltDropdown-toggle {
+      flex-shrink: 0;
+      display: block;
+    }
+  }
+}
+
 
 `;
 export default css;

package/src/column-filter/ColumnFilter.js

@@ -1,15 +1,18 @@
-import { jsxs } from "react/jsx-runtime";
-import { SegmentedButtonGroup } from "@salt-ds/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentedButtonGroup, useForkRef } from "@salt-ds/core";
 import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
 import clsx from "clsx";
-import { forwardRef as external_react_forwardRef, useMemo } from "react";
+import { forwardRef as external_react_forwardRef, useMemo, useRef } from "react";
 import { useColumnFilter } from "./useColumnFilter.js";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import ColumnFilter_0 from "./ColumnFilter.css";
 import { isBetweenOperator, withDateTimePattern } from "@vuu-ui/vuu-utils";
+import { OperatorPicker } from "../filter-clause/operator-picker/OperatorPicker.js";
 const classBase = "vuuColumnFilter";
-const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, labels, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, defaultOperator, extendedFilterOptions, labels, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, onOperatorChange, operator: operatorProp, operators: operatorsProp, showOperatorPicker = false, pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+    const rootRef = useRef(null);
+    const ref = useForkRef(rootRef, forwardRef);
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-filter-editor",
@@ -25,25 +28,45 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
         date,
         time
     ]);
-    const { InputProps, InputPropsRange, isInvalid, onCommit, onCommitRange } = useColumnFilter({
+    const { InputProps, InputPropsRange, isInvalid, onCommit, onCommitRange, operator, operators, onOperatorSelect } = useColumnFilter({
         InputProps: InputPropsProp,
         column: controlDescriptor,
         defaultValue,
+        defaultOperator,
         extendedFilterOptions,
         onColumnFilterChange,
         onColumnRangeFilterChange,
         onCommit: onCommitProp,
-        operator,
+        onOperatorChange,
+        operator: operatorProp,
+        operators: operatorsProp,
+        showOperatorPicker,
         value: valueProp
     });
     return /*#__PURE__*/ jsxs(SegmentedButtonGroup, {
         ...buttonGroupProps,
         className: clsx(classBase, className, {
             [`${classBase}-invalid`]: isInvalid,
-            [`${classBase}-toggle`]: "toggle" === variant
+            [`${classBase}-toggle`]: "toggle" === variant,
+            [`${classBase}-withOperator`]: showOperatorPicker
         }),
-        ref: forwardRef,
+        ref: ref,
         children: [
+            operators ? /*#__PURE__*/ jsx(OperatorPicker, {
+                "aria-label": `${column.label ?? column.name} operator`,
+                className: `${classBase}-operator`,
+                disabled: InputProps?.disabled,
+                readOnly: InputProps?.readOnly,
+                operators: operators,
+                onSelect: (event, operator)=>{
+                    onOperatorSelect(event, operator);
+                    requestAnimationFrame(()=>{
+                        rootRef.current?.querySelector("input:not(:disabled)")?.focus();
+                    });
+                },
+                value: operator,
+                variant: "dropdown"
+            }) : null,
             getDataItemEditControl({
                 InputProps,
                 TypeaheadProps,

package/src/column-filter/column-filter-utils.js

@@ -0,0 +1,40 @@
+import { extractFilterForColumn, isBetweenFilter, isBetweenOperator, isNumericColumn, isSingleValueFilter, isTemporalColumn, isTextColumn } from "@vuu-ui/vuu-utils";
+import { numericOperators, textOperators } from "../filter-clause/operator-picker/operator-utils.js";
+const getColumnFilterOperators = (column, operators)=>{
+    let supported;
+    if (isTextColumn(column)) supported = textOperators.filter((op)=>"in" !== op);
+    else if (isNumericColumn(column) || isTemporalColumn(column) || column.serverDataType?.startsWith("scaleddecimal")) supported = [
+        ...numericOperators,
+        "between",
+        "between-inclusive"
+    ];
+    else if ("boolean" === column.serverDataType) supported = [
+        "=",
+        "!="
+    ];
+    else throw Error(`[ColumnFilter] unsupported column type for ${column.name}`);
+    if (operators) {
+        if (0 === operators.length || operators.some((op)=>!supported.includes(op))) throw Error(`[ColumnFilter] invalid operators for ${column.name}`);
+        return operators;
+    }
+    return supported.filter((op)=>!isBetweenOperator(op));
+};
+const getDefaultColumnFilterOperator = (operators, operator)=>{
+    const selected = void 0 === operator ? operators.find((op)=>"=" === op) ?? operators[0] : operators.find((op)=>op === operator);
+    if (void 0 === selected) throw Error(`[ColumnFilter] operator ${operator} is not in the configured operators`);
+    return selected;
+};
+const getColumnFilterOperator = (column, filter)=>{
+    const clause = getColumnFilterClause(column, filter);
+    if (isBetweenFilter(clause)) return ">=" === clause.filters[0].op ? "between-inclusive" : "between";
+    if (isSingleValueFilter(clause)) return clause.op;
+};
+const getColumnFilterClause = (column, filter)=>{
+    const clause = extractFilterForColumn(filter, column.name);
+    return isSingleValueFilter(clause) || isBetweenFilter(clause) ? clause : void 0;
+};
+const normalizeColumnFilterValue = (operator, value = "")=>isBetweenOperator(operator) ? Array.isArray(value) ? value : [
+        `${value}`,
+        ""
+    ] : Array.isArray(value) ? value[0] : value;
+export { getColumnFilterClause, getColumnFilterOperator, getColumnFilterOperators, getDefaultColumnFilterOperator, normalizeColumnFilterValue };

package/src/column-filter/useColumnFilter.js

@@ -1,6 +1,7 @@
 import { useControlled } from "@salt-ds/core";
 import { useCallback, useMemo, useState } from "react";
 import { isBetweenOperator, isValidRange } from "@vuu-ui/vuu-utils";
+import { getColumnFilterOperators, getDefaultColumnFilterOperator, normalizeColumnFilterValue } from "./column-filter-utils.js";
 const injectInputProps = (InputProps, inputProps)=>{
     if (void 0 === InputProps) return {
         inputProps
@@ -13,20 +14,59 @@ const injectInputProps = (InputProps, inputProps)=>{
         }
     };
 };
-const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator = "=", value: valueProp })=>{
+const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, defaultOperator, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, onOperatorChange, operator: operatorProp, operators: operatorsProp, showOperatorPicker = false, value: valueProp })=>{
     const [isInvalid, setIsInvalid] = useState(false);
-    const [value, setValue] = useControlled({
+    const operators = useMemo(()=>showOperatorPicker ? getColumnFilterOperators(column, operatorsProp) : void 0, [
+        column,
+        operatorsProp,
+        showOperatorPicker
+    ]);
+    const [selectedOperator, setOperator] = useControlled({
+        controlled: operatorProp,
+        default: operators ? getDefaultColumnFilterOperator(operators, defaultOperator) : defaultOperator ?? "=",
+        name: "ColumnFilter",
+        state: "operator"
+    });
+    const operator = operators ? getDefaultColumnFilterOperator(operators, selectedOperator) : selectedOperator;
+    const [rawValue, setValue] = useControlled({
         controlled: valueProp,
         default: defaultValue,
-        name: "ColumnFilterNext",
+        name: "ColumnFilter",
         state: "value"
     });
+    const value = showOperatorPicker ? normalizeColumnFilterValue(operator, rawValue) : rawValue;
+    const handleOperatorSelect = useCallback((event, newOperator)=>{
+        if (newOperator === operator) return;
+        const newValue = normalizeColumnFilterValue(newOperator, value);
+        setOperator(newOperator);
+        setValue(newValue);
+        setIsInvalid(false);
+        onOperatorChange?.(event, newOperator);
+        const hadValue = Array.isArray(value) ? value.some((v)=>"" !== v) : void 0 !== value && "" !== value;
+        if (hadValue) {
+            const valid = !Array.isArray(newValue) || isValidRange(newValue);
+            setIsInvalid(!valid);
+            if (valid) onCommit(column, newOperator, newValue, extendedFilterOptions);
+        }
+    }, [
+        column,
+        extendedFilterOptions,
+        onCommit,
+        onOperatorChange,
+        operator,
+        setOperator,
+        setValue,
+        value
+    ]);
     const handleCommit = useCallback((_e, newValue = "")=>{
         if (Array.isArray(value)) if (isBetweenOperator(operator)) {
-            setValue([
+            const newRange = [
                 `${newValue}`,
                 value[1]
-            ]);
+            ];
+            setValue(newRange);
+            if (showOperatorPicker && !isValidRange(newRange)) return void setIsInvalid(true);
+            setIsInvalid(false);
             onCommit?.(column, operator, [
                 `${newValue}`,
                 value[1]
@@ -42,7 +82,8 @@ const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, ext
         setValue,
         onCommit,
         column,
-        extendedFilterOptions
+        extendedFilterOptions,
+        showOperatorPicker
     ]);
     const handleRangeCommit = useCallback((_e, newValue = "")=>{
         if (Array.isArray(value)) {
@@ -79,29 +120,37 @@ const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, ext
     ]);
     const onChange = useCallback((e)=>{
         const { value = "" } = e.target;
-        setValue((v)=>Array.isArray(v) ? [
+        setValue((v)=>{
+            const current = showOperatorPicker ? normalizeColumnFilterValue(operator, v) : v;
+            return Array.isArray(current) ? [
                 value,
-                v[1]
-            ] : value);
+                current[1]
+            ] : value;
+        });
         onColumnFilterChange?.(e.target.value, column, operator);
     }, [
         column,
         onColumnFilterChange,
         operator,
-        setValue
+        setValue,
+        showOperatorPicker
     ]);
     const onRangeInputChange = useCallback((e)=>{
         const { value = "" } = e.target;
-        setValue((v)=>Array.isArray(v) ? [
-                v[0],
+        setValue((v)=>{
+            const current = showOperatorPicker ? normalizeColumnFilterValue(operator, v) : v;
+            return Array.isArray(current) ? [
+                current[0],
                 value
-            ] : value);
+            ] : value;
+        });
         onColumnRangeFilterChange?.(value, column, operator);
     }, [
         setValue,
         onColumnRangeFilterChange,
         column,
-        operator
+        operator,
+        showOperatorPicker
     ]);
     const InputProps = useMemo(()=>injectInputProps(InputPropsProp, {
             onChange,
@@ -122,9 +171,12 @@ const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, ext
     return {
         InputProps,
         InputPropsRange,
-        isInvalid,
+        isInvalid: showOperatorPicker ? Array.isArray(value) && !isValidRange(value) : isInvalid,
         onCommit: handleCommit,
-        onCommitRange: handleRangeCommit
+        onCommitRange: handleRangeCommit,
+        operator,
+        operators,
+        onOperatorSelect: handleOperatorSelect
     };
 };
 export { useColumnFilter };

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

@@ -1,10 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { Option, useForkRef } from "@salt-ds/core";
+import { Dropdown, 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 OperatorPicker_OperatorPicker = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
+    if ("dropdown" === props.variant) {
+        const { operators, value, onSelect, variant: _variant, ...dropdownProps } = props;
+        return /*#__PURE__*/ jsx("div", {
+            ref: forwardedRef,
+            "data-field": "operator",
+            children: /*#__PURE__*/ jsx(Dropdown, {
+                ...dropdownProps,
+                value: value,
+                selected: [
+                    value
+                ],
+                onSelectionChange: (evt, [operator])=>{
+                    if (void 0 !== operator) onSelect(evt, operator);
+                },
+                children: operators.map((op)=>/*#__PURE__*/ jsx(Option, {
+                        value: op,
+                        children: op
+                    }, op))
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(OperatorPicker_OperatorCombobox, {
+        ...props,
+        ref: forwardedRef
+    });
+});
+const OperatorPicker_OperatorCombobox = /*#__PURE__*/ forwardRef(function({ className, column, dropdownOnAutofocus = true, inputProps, onSelect, operators, value: valueProp }, forwardedRef) {
     const { ref, ...comboProps } = useOperatorPicker({
         onSelect,
         value: valueProp?.toString() ?? ""
@@ -17,7 +44,7 @@ const OperatorPicker_OperatorPicker = /*#__PURE__*/ forwardRef(function({ classN
         inputProps: inputProps,
         ref: useForkRef(forwardedRef, ref),
         title: "operator",
-        children: getOperators(column).filter((op)=>op.toLowerCase().includes(comboProps.value.toLowerCase())).map((op)=>/*#__PURE__*/ jsx(Option, {
+        children: (operators ?? getOperators(column)).filter((op)=>op.toLowerCase().includes(comboProps.value.toLowerCase())).map((op)=>/*#__PURE__*/ jsx(Option, {
                 value: op
             }, op))
     });

package/src/filter-container/FilterContainer.js

@@ -3,14 +3,16 @@ import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ColumnFilterContext, useFilterContainer, useFilterContext } from "./useFilterContainer.js";
 import { ColumnFilter } from "../column-filter/ColumnFilter.js";
-import { filterDescriptorHasFilter, isNullFilter, useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
+import { UNSAVED_FILTER, filterDescriptorHasFilter, isNullFilter, useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
 import { filtersAreEqual, getColumnValueFromFilter, getDefaultTimeRange, isBetweenOperator, isTimeDataValue, withDateTimePattern } from "@vuu-ui/vuu-utils";
+import { useControlled } from "@salt-ds/core";
+import { getColumnFilterClause, getColumnFilterOperator, getColumnFilterOperators, getDefaultColumnFilterOperator, normalizeColumnFilterValue } from "../column-filter/column-filter-utils.js";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import FilterContainer from "./FilterContainer.css";
 const classBase = "vuuFilterContainer";
 const notEmpty = (value)=>Array.isArray(value) ? "" !== value[0] && "" !== value[1] : "" !== value;
-const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", pattern: patternProp, variant, ...props })=>{
+const FilterContainerColumnFilter = ({ column: columnProp, operator: operatorProp, defaultOperator, showOperatorPicker = false, operators, onOperatorChange, pattern: patternProp, variant, ...props })=>{
     const { getColumnFilterPattern } = useColumnFilterRegistry();
     const pattern = patternProp ?? getColumnFilterPattern(columnProp);
     const { date, time } = pattern ?? {};
@@ -22,7 +24,20 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         date,
         time
     ]);
-    const { filterProviderKey, onChange: onFilterContextChange, onCommit: onFilterContextCommit, register } = useFilterContext(column, true);
+    const { filter: containerFilter, getFilter, filterProviderKey, onChange: onFilterContextChange, onCommit: onFilterContextCommit, register } = useFilterContext(column, true);
+    const availableOperators = useMemo(()=>showOperatorPicker ? getColumnFilterOperators(column, operators) : void 0, [
+        column,
+        operators,
+        showOperatorPicker
+    ]);
+    const [initialOperator] = useState(()=>availableOperators ? getDefaultColumnFilterOperator(availableOperators, operatorProp ?? getColumnFilterOperator(column, containerFilter) ?? defaultOperator) : defaultOperator ?? "=");
+    const [selectedOperator, setOperator] = useControlled({
+        controlled: operatorProp,
+        default: initialOperator,
+        name: "FilterContainerColumnFilter",
+        state: "operator"
+    });
+    const operator = selectedOperator;
     const { registerColumnFilterColumn } = useColumnFilterRegistry(filterProviderKey);
     useEffect(()=>registerColumnFilterColumn(column), [
         column,
@@ -35,10 +50,50 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
     ]);
     const [value, setValue] = useState(initialValue);
     const valueRef = useRef(initialValue);
+    if (showOperatorPicker) {
+        const normalizedValue = normalizeColumnFilterValue(operator, value);
+        if (normalizedValue !== value) {
+            valueRef.current = normalizedValue;
+            setValue(normalizedValue);
+        }
+    }
     const { currentFilter } = useSavedFilters(filterProviderKey);
     const currentFilterRef = useRef(currentFilter);
+    const containerFilterRef = useRef(containerFilter);
+    const localFilterRef = useRef(containerFilter);
+    useMemo(()=>{
+        if (!showOperatorPicker) return;
+        const containerChanged = !filtersAreEqual(containerFilterRef.current, containerFilter);
+        const savedChanged = currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter);
+        if (containerChanged || savedChanged) {
+            const savedIdChanged = currentFilterRef.current.id !== currentFilter.id;
+            const filter = containerChanged ? containerFilter : currentFilter.filter ?? void 0;
+            containerFilterRef.current = containerFilter;
+            currentFilterRef.current = currentFilter;
+            const savedFilterActivated = savedIdChanged && filterDescriptorHasFilter(currentFilter) && currentFilter.id !== UNSAVED_FILTER;
+            const clause = getColumnFilterClause(column, filter);
+            if (savedFilterActivated || !filtersAreEqual(clause, getColumnFilterClause(column, localFilterRef.current))) {
+                const nextOperator = operatorProp ?? (availableOperators ? getDefaultColumnFilterOperator(availableOperators, getColumnFilterOperator(column, filter) ?? defaultOperator) : operator);
+                const nextValue = normalizeColumnFilterValue(nextOperator, getColumnValueFromFilter(column, nextOperator, clause));
+                setOperator(nextOperator);
+                valueRef.current = nextValue;
+                setValue(nextValue);
+                localFilterRef.current = filter;
+            }
+        }
+    }, [
+        availableOperators,
+        column,
+        containerFilter,
+        currentFilter,
+        defaultOperator,
+        operator,
+        operatorProp,
+        setOperator,
+        showOperatorPicker
+    ]);
     useMemo(()=>{
-        if (currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter)) {
+        if (!showOperatorPicker && (currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter))) {
             currentFilterRef.current = currentFilter;
             if (isNullFilter(currentFilter) && notEmpty(valueRef.current)) {
                 if (Array.isArray(valueRef.current)) if (isTimeDataValue(column)) valueRef.current = getDefaultTimeRange(column);
@@ -66,13 +121,16 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         }
     }, [
         column,
-        currentFilter
+        currentFilter,
+        showOperatorPicker
     ]);
     const handleCommit = useCallback((column, op, value, extendedFilterOptions)=>{
         valueRef.current = value;
         setValue(value);
         onFilterContextCommit(column, op, value, extendedFilterOptions);
+        localFilterRef.current = getFilter();
     }, [
+        getFilter,
         onFilterContextCommit
     ]);
     const handleColumnFilterChange = useCallback((value, column, op)=>{
@@ -83,7 +141,9 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         ] : value;
         setValue(valueRef.current);
         onFilterContextChange(valueRef.current, column, op);
+        localFilterRef.current = getFilter();
     }, [
+        getFilter,
         onFilterContextChange
     ]);
     const handleColumnRangeFilterChange = useCallback((value, column, op)=>{
@@ -94,7 +154,9 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         ] : value;
         setValue(valueRef.current);
         onFilterContextChange(valueRef.current, column, op);
+        localFilterRef.current = getFilter();
     }, [
+        getFilter,
         onFilterContextChange
     ]);
     return /*#__PURE__*/ jsx(ColumnFilter, {
@@ -104,6 +166,14 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         onColumnRangeFilterChange: handleColumnRangeFilterChange,
         onCommit: handleCommit,
         operator: operator,
+        onOperatorChange: (event, op)=>{
+            setOperator(op);
+            valueRef.current = normalizeColumnFilterValue(op, valueRef.current);
+            setValue(valueRef.current);
+            onOperatorChange?.(event, op);
+        },
+        operators: operators,
+        showOperatorPicker: showOperatorPicker,
         value: value,
         variant: variant
     });

package/src/filter-container/useFilterContainer.js

@@ -7,6 +7,8 @@ const ColumnFilterContext = createContext({
 function useFilterContext(column, throwIfNoContainer = false) {
     const ctx = useContext(ColumnFilterContext);
     if (ctx) return {
+        filter: ctx.filter,
+        getFilter: ctx.getFilter,
         filterProviderKey: ctx.filterProviderKey,
         register: ctx.register,
         getValue: ctx.getValue,
@@ -29,6 +31,9 @@ const useFilterContainer = ({ filter, filterProviderKey = "GLOBAL", onFilterAppl
     const filterAggregator = useMemo(()=>new FilterAggregator(filter), [
         filter
     ]);
+    const getFilter = useCallback(()=>filterAggregator.filter, [
+        filterAggregator
+    ]);
     const register = useCallback((column, op)=>valueRef.current[column.name] = getColumnValueFromFilter(column, op, filterRef.current), []);
     const getValue = useCallback((column, fallbackValue)=>{
         const value = valueRef.current[column.name];
@@ -72,6 +77,8 @@ const useFilterContainer = ({ filter, filterProviderKey = "GLOBAL", onFilterAppl
     ]);
     return {
         filterContainerInstalled: true,
+        filter,
+        getFilter,
         filterProviderKey,
         onChange: handleInputChange,
         onCommit: handleCommit,

package/types/column-filter/column-filter-utils.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnFilterOp, ColumnFilterValue, FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export type SelectableColumnFilterOp = Exclude<ColumnFilterOp, "in">;
+export declare const getColumnFilterOperators: (column: ColumnDescriptor, operators?: readonly SelectableColumnFilterOp[]) => readonly SelectableColumnFilterOp[];
+export declare const getDefaultColumnFilterOperator: (operators: readonly SelectableColumnFilterOp[], operator?: ColumnFilterOp) => SelectableColumnFilterOp;
+export declare const getColumnFilterOperator: (column: ColumnDescriptor, filter?: FilterContainerFilter) => SelectableColumnFilterOp | undefined;
+export declare const getColumnFilterClause: (column: ColumnDescriptor, filter?: FilterContainerFilter) => FilterContainerFilter | undefined;
+export declare const normalizeColumnFilterValue: (operator: ColumnFilterOp, value?: ColumnFilterValue) => ColumnFilterValue;

package/types/column-filter/useColumnFilter.d.ts

@@ -1,8 +1,10 @@
 import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, ColumnFilterValue, ExtendedFilterOptions } from "@vuu-ui/vuu-filter-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { InputProps } from "@salt-ds/core";
+import { SyntheticEvent } from "react";
 import { CommitHandler } from "@vuu-ui/vuu-utils";
 import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
+import { type SelectableColumnFilterOp } from "./column-filter-utils";
 export interface ColumnFilterHookProps extends Pick<DataItemEditControlProps, "InputProps"> {
     column: ColumnDescriptor;
     /**
@@ -27,17 +29,29 @@ export interface ColumnFilterHookProps extends Pick<DataItemEditControlProps, "I
      * tabbing away from control or making selection from list
      */
     onCommit: ColumnFilterCommitHandler;
+    /** Controlled operator. Defaults to '=' when the picker is hidden. */
     operator?: ColumnFilterOp;
+    /** Initial operator for an uncontrolled picker. Defaults to '=' or the first option. */
+    defaultOperator?: ColumnFilterOp;
+    /** Render an operator dropdown before the value. Defaults to false. */
+    showOperatorPicker?: boolean;
+    /** Ordered operator options, replacing the column-type defaults. 'in' is not supported. */
+    operators?: readonly SelectableColumnFilterOp[];
+    /** Called before committing the current value with the newly selected operator. */
+    onOperatorChange?: (event: SyntheticEvent, operator: ColumnFilterOp) => void;
     /**
      * Filter value. Pair of values expected when operator is
      * 'between'. If provided, component is controlled.
      */
     value?: ColumnFilterValue;
 }
-export declare const useColumnFilter: ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator, value: valueProp, }: ColumnFilterHookProps) => {
+export declare const useColumnFilter: ({ InputProps: InputPropsProp, column, defaultValue, defaultOperator, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, onOperatorChange, operator: operatorProp, operators: operatorsProp, showOperatorPicker, value: valueProp, }: ColumnFilterHookProps) => {
     InputProps: InputProps;
     InputPropsRange: InputProps;
     isInvalid: boolean;
     onCommit: CommitHandler<HTMLElement>;
     onCommitRange: CommitHandler<HTMLElement>;
+    operator: "in" | SelectableColumnFilterOp;
+    operators: readonly SelectableColumnFilterOp[] | undefined;
+    onOperatorSelect: (event: SyntheticEvent, newOperator: ColumnFilterOp) => void;
 };

package/types/filter-clause/operator-picker/OperatorPicker.d.ts

@@ -1,14 +1,24 @@
-import type { FilterClauseOp } from "@vuu-ui/vuu-filter-types";
+import type { ColumnFilterOp, FilterClauseOp } from "@vuu-ui/vuu-filter-types";
 import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { ComboBoxProps } from "@salt-ds/core";
 import { SyntheticEvent } from "react";
-export type OperatorPickerProps = Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
+type OperatorComboboxProps = Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
     column: ColumnDescriptor;
     onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
     dropdownOnAutofocus?: boolean;
+    variant?: "combobox";
+    operators?: readonly FilterClauseOp[];
 };
-export declare const OperatorPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps, "value" | "className" | "inputProps"> & {
-    column: ColumnDescriptor;
-    onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
-    dropdownOnAutofocus?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+type OperatorDropdownProps = {
+    variant: "dropdown";
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    operators: readonly ColumnFilterOp[];
+    value: ColumnFilterOp;
+    onSelect: (evt: SyntheticEvent, operator: ColumnFilterOp) => void;
+    "aria-label"?: string;
+};
+export type OperatorPickerProps = OperatorComboboxProps | OperatorDropdownProps;
+export declare const OperatorPicker: import("react").ForwardRefExoticComponent<OperatorPickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/types/filter-container/FilterContainer.d.ts

@@ -16,7 +16,7 @@ export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps
      */
     pattern?: DateTimePattern;
 }
-export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator: operatorProp, defaultOperator, showOperatorPicker, operators, onOperatorChange, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * FilterContainer is a generic UI container for a collection of Filter
  * controls. Each control manages a single filter clause and the Filter

package/types/filter-container/useFilterContainer.d.ts

@@ -2,6 +2,8 @@ import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, C
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 export interface ColumnFilterContextProps {
     filterContainerInstalled: boolean;
+    filter?: FilterContainerFilter;
+    getFilter?: () => FilterContainerFilter | undefined;
     filterProviderKey?: string;
     onChange?: ColumnFilterChangeHandler;
     onCommit?: ColumnFilterCommitHandler;
@@ -10,7 +12,7 @@ export interface ColumnFilterContextProps {
 }
 export declare const ColumnFilterContext: import("react").Context<ColumnFilterContextProps>;
 export declare function useFilterContext(column: ColumnDescriptor, throwIfNoContainer?: false): ColumnFilterContextProps;
-export declare function useFilterContext(column: ColumnDescriptor, throwIfNoContainer: true): Required<ColumnFilterContextProps>;
+export declare function useFilterContext(column: ColumnDescriptor, throwIfNoContainer: true): Required<Omit<ColumnFilterContextProps, "filter">> & Pick<ColumnFilterContextProps, "filter">;
 export type FilterAppliedHandler<F extends Filter = Filter> = (filter: F) => void;
 export type ColumnFilterContainerHookProps = {
     filter?: FilterContainerFilter;

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export { ColumnFilter, type ColumnFilterProps, } from "./column-filter/ColumnFilter";
+export type { SelectableColumnFilterOp } from "./column-filter/column-filter-utils";
 export * from "./filter-bar";
 export * from "./filter-clause";
 export { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause";