@vuu-ui/vuu-filters 0.8.27-debug → 0.8.28-debug

package/esm/index.js

@@ -17,10 +17,225 @@ var __privateSet = (obj, member, value, setter) => {
   return value;
 };
 
+// src/FilterModel.ts
+import {
+  EventEmitter,
+  isMultiClauseFilter,
+  isMultiValueFilter,
+  isSingleValueFilter
+} from "@vuu-ui/vuu-utils";
+var hasValues = ({ values }) => Array.isArray(values) && values.length > 0;
+var isValidFilterClause = (filterClause) => {
+  if (filterClause.op === void 0 || filterClause.column === void 0) {
+    return false;
+  } else if (isMultiValueFilter(filterClause)) {
+    return hasValues(filterClause);
+  } else if (isSingleValueFilter(filterClause)) {
+    return filterClause.value !== void 0 && filterClause.value !== "";
+  }
+  throw Error("isValidFilterClause should never reach this far");
+};
+var isValidFilter = (filter) => {
+  if (filter === void 0) {
+    return false;
+  } else if (isMultiClauseFilter(filter)) {
+    return filter.filters.every(isValidFilter);
+  } else {
+    return isValidFilterClause(filter);
+  }
+};
+var isValidFilterModel = (filterModel) => {
+  if (filterModel.isMultiClauseFilter) {
+    return filterModel.filterClauses.every((f) => f.isValid);
+  } else {
+    return filterModel.filterClauses.length === 1 && filterModel.filterClauses[0].isValid;
+  }
+};
+var _filterClause, _isValid;
+var FilterClauseModel = class extends EventEmitter {
+  constructor(filterClause) {
+    super();
+    __privateAdd(this, _filterClause, void 0);
+    __privateAdd(this, _isValid, void 0);
+    __privateSet(this, _filterClause, filterClause);
+    __privateSet(this, _isValid, isValidFilterClause(filterClause));
+  }
+  get isValid() {
+    return __privateGet(this, _isValid);
+  }
+  setIsValid(isValid) {
+    __privateSet(this, _isValid, isValid);
+    this.emit("isValid", isValid);
+  }
+  get column() {
+    return __privateGet(this, _filterClause).column;
+  }
+  set column(column) {
+    __privateSet(this, _filterClause, {
+      column
+    });
+    const isValid = isValidFilterClause(__privateGet(this, _filterClause));
+    this.emit("filterClause", __privateGet(this, _filterClause), isValid);
+    if (isValid !== __privateGet(this, _isValid)) {
+      this.setIsValid(isValid);
+    }
+  }
+  get op() {
+    return __privateGet(this, _filterClause).op;
+  }
+  setOp(op) {
+    __privateSet(this, _filterClause, {
+      ...__privateGet(this, _filterClause),
+      op
+    });
+    const isValid = isValidFilterClause(__privateGet(this, _filterClause));
+    this.emit("filterClause", __privateGet(this, _filterClause), isValid);
+    if (isValid !== __privateGet(this, _isValid)) {
+      this.setIsValid(isValid);
+    }
+  }
+  setValue(value, isFinal = true) {
+    console.log(`setValue ${value} isFinal(${isFinal})`);
+    if (isSingleValueFilter(__privateGet(this, _filterClause))) {
+      __privateSet(this, _filterClause, {
+        ...__privateGet(this, _filterClause),
+        value
+      });
+    } else if (Array.isArray(value)) {
+      __privateSet(this, _filterClause, {
+        ...__privateGet(this, _filterClause),
+        values: value
+      });
+    }
+    const isValid = isValidFilterClause(__privateGet(this, _filterClause));
+    if (isValid !== __privateGet(this, _isValid)) {
+      this.setIsValid(isValid);
+    }
+    if (isFinal) {
+      this.emit("filterClause", __privateGet(this, _filterClause), isValid);
+    }
+  }
+  asFilter(throwIfInvalid = true) {
+    if (throwIfInvalid && !__privateGet(this, _isValid)) {
+      throw Error("Invalid filter model cannot be returned as Filter");
+    }
+    return __privateGet(this, _filterClause);
+  }
+};
+_filterClause = new WeakMap();
+_isValid = new WeakMap();
+var _children, _isValid2, _op;
+var FilterModel = class extends EventEmitter {
+  constructor(filter) {
+    super();
+    __privateAdd(this, _children, []);
+    __privateAdd(this, _isValid2, void 0);
+    __privateAdd(this, _op, void 0);
+    this.onFilterClauseChange = () => {
+      this.emit("filter", this.asFilter(false), __privateGet(this, _isValid2));
+    };
+    this.onFilterClauseStatusChange = (isValid) => {
+      if (!isValid && __privateGet(this, _isValid2)) {
+        this.setIsValid(false);
+      } else {
+        this.checkValidStatus();
+      }
+    };
+    if (isMultiClauseFilter(filter)) {
+      __privateSet(this, _op, filter.op);
+      filter.filters.forEach((f) => this.addFilterClause(f));
+    } else if (filter) {
+      this.addFilterClause(filter);
+    } else {
+      this.addNewFilterClause();
+    }
+    __privateSet(this, _isValid2, isValidFilter(filter));
+  }
+  get isValid() {
+    return __privateGet(this, _isValid2);
+  }
+  setIsValid(isValid) {
+    __privateSet(this, _isValid2, isValid);
+    this.emit("isValid", isValid);
+  }
+  addNewFilterClause(operator) {
+    const count = __privateGet(this, _children).length;
+    if (!operator && !__privateGet(this, _op) && count === 1) {
+      __privateSet(this, _op, "and");
+    } else if (operator && !__privateGet(this, _op) && count === 1) {
+      __privateSet(this, _op, operator);
+    } else if (operator && __privateGet(this, _op) && operator !== __privateGet(this, _op)) {
+      throw Error(
+        "FilterModel: use setOp to change the Filter combinator operator"
+      );
+    }
+    const filterClauseModel = new FilterClauseModel({});
+    filterClauseModel.on("isValid", this.onFilterClauseStatusChange);
+    filterClauseModel.on("filterClause", this.onFilterClauseChange);
+    __privateGet(this, _children).push(filterClauseModel);
+    this.setIsValid(false);
+  }
+  addFilterClause(filterClause = {}) {
+    const filterClauseModel = new FilterClauseModel(filterClause);
+    filterClauseModel.on("isValid", this.onFilterClauseStatusChange);
+    filterClauseModel.on("filterClause", this.onFilterClauseChange);
+    __privateGet(this, _children).push(filterClauseModel);
+  }
+  removeFilterClause(filterClause) {
+    if (this.isMultiClauseFilter) {
+      const doomedFilter = this.filterClauses.indexOf(filterClause);
+      if (doomedFilter !== -1) {
+        this.filterClauses.splice(doomedFilter, 1);
+        if (this.filterClauses.length === 1) {
+          __privateSet(this, _op, void 0);
+        }
+        this.checkValidStatus();
+      }
+    }
+  }
+  checkValidStatus() {
+    const nowValid = isValidFilterModel(this);
+    if (nowValid !== __privateGet(this, _isValid2)) {
+      this.setIsValid(nowValid);
+    }
+  }
+  getFilterClause(index) {
+    return __privateGet(this, _children)[index];
+  }
+  get op() {
+    return __privateGet(this, _op);
+  }
+  setOp(op) {
+    __privateSet(this, _op, op);
+    this.emit("filter", this.asFilter(false), __privateGet(this, _isValid2));
+  }
+  get filterClauses() {
+    return __privateGet(this, _children);
+  }
+  get isMultiClauseFilter() {
+    return __privateGet(this, _op) === "and" || __privateGet(this, _op) === "or";
+  }
+  asFilter(throwIfInvalid = true) {
+    if (throwIfInvalid && !__privateGet(this, _isValid2)) {
+      throw Error("Invalid filter model cannot be returned as Filter");
+    }
+    if (__privateGet(this, _op) === "and" || __privateGet(this, _op) === "or") {
+      return {
+        op: __privateGet(this, _op),
+        filters: __privateGet(this, _children).map((f) => f.asFilter(throwIfInvalid))
+      };
+    } else {
+      return __privateGet(this, _children)[0].asFilter(throwIfInvalid);
+    }
+  }
+};
+_children = new WeakMap();
+_isValid2 = new WeakMap();
+_op = new WeakMap();
+
 // src/filter-bar/FilterBar.tsx
-import { Prompt } from "@vuu-ui/vuu-popups";
-import { Toolbar } from "@vuu-ui/vuu-ui-controls";
-import { Button as Button2 } from "@salt-ds/core";
+import { PopupComponent as Popup, Portal, Prompt } from "@vuu-ui/vuu-popups";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -46,55 +261,11 @@ var clsx_default = clsx;
 // src/filter-bar/FilterBar.tsx
 import { useRef as useRef6 } from "react";
 
-// src/filter-builder-menu/FilterBuilderMenu.tsx
-import { useCallback, useRef } from "react";
-import { PopupComponent as Popup, Portal } from "@vuu-ui/vuu-popups";
-import { List, ListItem } from "@vuu-ui/vuu-ui-controls";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var classBase = "vuuFilterBuilderMenu";
-var FilterBuilderMenu = ({
-  ListProps: ListProps2,
-  onMenuAction
-}) => {
-  const ref = useRef(null);
-  const listRef = useCallback((el) => {
-    if (el) {
-      requestAnimationFrame(() => {
-        el.focus();
-      });
-    }
-  }, []);
-  const handleSelect = useCallback(
-    (evt, selected) => {
-      const {
-        props: { "data-action": action }
-      } = selected;
-      onMenuAction({ type: "menu-action", menuId: action, options: {} });
-    },
-    [onMenuAction]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: `${classBase}-trigger`, ref }),
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popup, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ jsxs(
-      List,
-      {
-        ...ListProps2,
-        className: `${classBase}List`,
-        defaultHighlightedIndex: 0,
-        itemHeight: 22,
-        ref: listRef,
-        onSelect: handleSelect,
-        style: { position: "relative" },
-        width: 100,
-        children: [
-          /* @__PURE__ */ jsx(ListItem, { "data-action": "apply-save", children: /* @__PURE__ */ jsx("span", { className: "vuuMenuButton", children: "APPLY AND SAVE" }) }),
-          /* @__PURE__ */ jsx(ListItem, { "data-action": "and-clause", children: "AND" }),
-          /* @__PURE__ */ jsx(ListItem, { "data-action": "or-clause", children: "OR" })
-        ]
-      }
-    ) }) })
-  ] });
-};
+// src/filter-editor/FilterEditor.tsx
+import { SplitButton } from "@vuu-ui/vuu-ui-controls";
+
+// src/filter-clause/FilterClause.tsx
+import { useMemo as useMemo4 } from "react";
 
 // src/filter-clause/ExpandoCombobox.tsx
 import { itemToString as defaultToString } from "@vuu-ui/vuu-utils";
@@ -103,13 +274,13 @@ import {
 } from "@vuu-ui/vuu-ui-controls";
 import {
   forwardRef,
-  useCallback as useCallback2,
+  useCallback,
   useMemo,
-  useRef as useRef2,
+  useRef,
   useState
 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var classBase2 = "vuuExpandoCombobox";
+import { jsx } from "react/jsx-runtime";
+var classBase = "vuuExpandoCombobox";
 var NO_INPUT_PROPS = {};
 var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
   className: classNameProp,
@@ -126,8 +297,8 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
 }, forwardedRef) {
   const [text, setText] = useState(value);
   const { itemToString = defaultToString } = props;
-  const initialValue = useRef2(value);
-  const itemsToString = useCallback2(
+  const initialValue = useRef(value);
+  const itemsToString = useCallback(
     (items) => {
       const [first, ...rest] = items;
       if (rest.length) {
@@ -138,7 +309,7 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
     },
     [itemToString]
   );
-  const handleInputChange = useCallback2(
+  const handleInputChange = useCallback(
     (evt) => {
       const { value: value2 } = evt.target;
       setText(value2);
@@ -146,15 +317,15 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
     },
     [onInputChange]
   );
-  const handleSetSelectedText = useCallback2((text2) => {
+  const handleSetSelectedText = useCallback((text2) => {
     setText(text2);
   }, []);
-  const [InputProps, ListProps2] = useMemo(() => {
+  const [InputProps, ListProps] = useMemo(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
         ...restInputProps,
-        className: `${classBase2}-Input`,
+        className: `${classBase}-Input`,
         endAdornment: null,
         inputProps: {
           ...inputProps,
@@ -176,7 +347,7 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
       }
     ];
   }, [InputPropsProp, handleInputChange, ListPropsProp]);
-  const handleSelectionChange = useCallback2(
+  const handleSelectionChange = useCallback(
     (_, selected) => {
       if (Array.isArray(selected)) {
         onSelectionChange == null ? void 0 : onSelectionChange(
@@ -193,7 +364,7 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
     },
     [itemToString, onSelectionChange]
   );
-  const getDefaultSelected = () => {
+  const getSelected = () => {
     if (initialValue.current === void 0) {
       return void 0;
     } else if (Array.isArray(initialValue.current)) {
@@ -209,23 +380,23 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
   const popupProps = {
     minWidth: "fit-content"
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx_default(classBase2, classNameProp),
+      className: clsx_default(classBase, classNameProp),
       "data-text": text,
       ref: forwardedRef,
       style,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx(
         ComboBox,
         {
           ...props,
           PopupProps: popupProps,
-          allowEnterCommitsText: true,
-          defaultSelected: getDefaultSelected(),
+          className: "vuuEmbedded",
+          defaultSelected: getSelected(),
           defaultValue: Array.isArray(initialValue.current) ? itemsToString(initialValue.current) : initialValue.current,
           fullWidth: true,
-          ListProps: ListProps2,
+          ListProps,
           InputProps,
           itemsToString,
           onSelectionChange: handleSelectionChange,
@@ -238,79 +409,65 @@ var ExpandoCombobox = forwardRef(function ExpandoCombobox2({
   );
 });
 
-// src/filter-clause/FilterClauseEditor.tsx
-import { Button } from "@salt-ds/core";
-import { useMemo as useMemo4 } from "react";
-
-// src/filter-clause/operator-utils.ts
-import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
-var textOperators = ["=", "in", "!=", "starts", "ends"];
-var numericperators = ["=", "!=", ">", ">=", "<", "<="];
-var getOperators = (column) => {
-  if (isTextColumn(column)) {
-    return textOperators;
-  } else if (isNumericColumn(column)) {
-    return numericperators;
-  } else {
-    throw Error("getOperators only supports text and numeric columns");
-  }
-};
-
-// src/filter-clause/NumericInput.tsx
+// src/filter-clause/value-editors/FilterClauseValueEditorNumber.tsx
 import {
   forwardRef as forwardRef2,
   useState as useState2,
-  useCallback as useCallback3
+  useCallback as useCallback2
 } from "react";
 import { ExpandoInput } from "@vuu-ui/vuu-ui-controls";
 import { isValidNumber } from "@vuu-ui/vuu-utils";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var NumericInput = forwardRef2(function NumericInput2({
-  InputProps,
-  className,
-  onInputComplete,
-  value: valueProp
-}, forwardedRef) {
-  const [value, setValue] = useState2(
-    isValidNumber(valueProp) ? valueProp.toString() : ""
-  );
-  const handleChange = useCallback3((evt) => {
-    const { value: value2 } = evt.target;
-    const numericValue = parseFloat(value2);
-    if (isValidNumber(numericValue)) {
-      console.log("its valid");
-    }
-    setValue(value2);
-  }, []);
-  const handleKeyDown = useCallback3(
-    (evt) => {
-      if (evt.key === "Enter") {
-        const { value: value2 } = evt.target;
-        const numericValue = parseFloat(value2);
-        if (isValidNumber(numericValue)) {
-          onInputComplete(numericValue);
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FilterClauseValueEditorNumber = forwardRef2(
+  function FilterClauseNumericValueEditor({
+    InputProps,
+    className,
+    "data-field": dataField,
+    onChangeValue,
+    value: valueProp
+  }, forwardedRef) {
+    const [value, setValue] = useState2(
+      isValidNumber(valueProp) ? valueProp.toString() : ""
+    );
+    const handleChange = useCallback2((evt) => {
+      const { value: value2 } = evt.target;
+      const numericValue = parseFloat(value2);
+      if (isValidNumber(numericValue)) {
+        console.log("its valid");
+      }
+      setValue(value2);
+    }, []);
+    const handleKeyDown = useCallback2(
+      (evt) => {
+        if (evt.key === "Enter" || evt.key === "Tab") {
+          const { value: value2 } = evt.target;
+          const numericValue = parseFloat(value2);
+          if (isValidNumber(numericValue)) {
+            onChangeValue(numericValue);
+          }
         }
+      },
+      [onChangeValue]
+    );
+    return /* @__PURE__ */ jsx2(
+      ExpandoInput,
+      {
+        ...InputProps,
+        className,
+        "data-field": dataField,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: forwardedRef,
+        value
       }
-    },
-    [onInputComplete]
-  );
-  return /* @__PURE__ */ jsx3(
-    ExpandoInput,
-    {
-      ...InputProps,
-      className,
-      value,
-      ref: forwardedRef,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown
-    }
-  );
-});
+    );
+  }
+);
 
-// src/filter-clause/FilterClauseTextValueEditor.tsx
+// src/filter-clause/value-editors/FilterClauseValueEditorText.tsx
 import {
   forwardRef as forwardRef3,
-  useCallback as useCallback4,
+  useCallback as useCallback3,
   useEffect,
   useMemo as useMemo2,
   useState as useState3
@@ -319,7 +476,7 @@ import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
 import {
   ExpandoInput as ExpandoInput2
 } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var selectionKeys = ["Enter", " "];
 var getVuuTable = (schemaTable) => {
   if (schemaTable.session) {
@@ -330,170 +487,186 @@ var getVuuTable = (schemaTable) => {
   }
 };
 var NO_DATA_MATCH = ["No matching data"];
-var FilterClauseTextValueEditor = forwardRef3(function TextInput({
-  InputProps: InputPropsProp = {},
-  className,
-  column,
-  "data-field": dataField,
-  onDeselect,
-  onInputComplete,
-  operator,
-  suggestionProvider = useTypeaheadSuggestions,
-  table,
-  value
-}, forwardedRef) {
-  var _a;
-  const isMultiValue = operator === "in";
-  const [valueInputValue, setValueInputValue] = useState3(
-    (_a = value == null ? void 0 : value.toString()) != null ? _a : ""
-  );
-  const [typeaheadValues, setTypeaheadValues] = useState3([]);
-  const getSuggestions = suggestionProvider();
-  const handleSingleValueSelectionChange = useCallback4(
-    (_, value2) => onInputComplete(value2),
-    [onInputComplete]
-  );
-  const handleMultiValueSelectionChange = useCallback4(
-    (_, values) => onInputComplete(values),
-    [onInputComplete]
-  );
-  useEffect(() => {
-    if (table) {
-      const vuuTable = getVuuTable(table);
-      const params = valueInputValue && !isMultiValue ? [vuuTable, column.name, valueInputValue] : [vuuTable, column.name];
-      getSuggestions(params).then((suggestions) => {
-        if (suggestions.length === 0 && valueInputValue) {
-          setTypeaheadValues(NO_DATA_MATCH);
+var FilterClauseValueEditorText = forwardRef3(
+  function FilterClauseTextValueEditor({
+    InputProps: InputPropsProp = {},
+    className,
+    column,
+    "data-field": dataField,
+    onDeselect,
+    onChangeValue,
+    operator,
+    suggestionProvider = useTypeaheadSuggestions,
+    table,
+    value
+  }, forwardedRef) {
+    var _a;
+    const isMultiValue = operator === "in";
+    const [valueInputValue, setValueInputValue] = useState3(
+      (_a = value == null ? void 0 : value.toString()) != null ? _a : ""
+    );
+    const [typeaheadValues, setTypeaheadValues] = useState3([]);
+    const getSuggestions = suggestionProvider();
+    const handleSingleValueSelectionChange = useCallback3(
+      (_, value2) => onChangeValue(value2),
+      [onChangeValue]
+    );
+    const handleMultiValueSelectionChange = useCallback3(
+      (_, values) => onChangeValue(values),
+      [onChangeValue]
+    );
+    useEffect(() => {
+      if (table) {
+        const vuuTable = getVuuTable(table);
+        const params = valueInputValue && !isMultiValue ? [vuuTable, column.name, valueInputValue] : [vuuTable, column.name];
+        getSuggestions(params).then((suggestions) => {
+          if (suggestions.length === 0 && valueInputValue) {
+            setTypeaheadValues(NO_DATA_MATCH);
+          } else {
+            setTypeaheadValues(suggestions);
+          }
+        }).catch((err) => {
+          console.error("Error getting suggestions", err);
+        });
+      }
+    }, [table, column, valueInputValue, getSuggestions, isMultiValue]);
+    const handleInputChange = useCallback3(
+      (evt) => {
+        const { value: value2 } = evt.target;
+        console.log(`handleInputChange "${value2}"`);
+        setValueInputValue(value2);
+        if (operator === "starts" || operator === "ends") {
+          onChangeValue(value2, false);
+        }
+      },
+      [onChangeValue, operator]
+    );
+    const handleKeyDownFreeTextInput = useCallback3(
+      (evt) => {
+        var _a2, _b;
+        console.log(`handleKeyDownFreeTextInput ${valueInputValue}`);
+        if ((evt.key === "Enter" || evt.key === "Tab") && valueInputValue !== "") {
+          evt.stopPropagation();
+          evt.preventDefault();
+          console.log(`call onInputComplete ${valueInputValue}`);
+          onChangeValue(valueInputValue);
         } else {
-          setTypeaheadValues(suggestions);
+          (_b = (_a2 = InputPropsProp == null ? void 0 : InputPropsProp.inputProps) == null ? void 0 : _a2.onKeyDown) == null ? void 0 : _b.call(_a2, evt);
         }
-      }).catch((err) => {
-        console.error("Error getting suggestions", err);
-      });
-    }
-  }, [table, column, valueInputValue, getSuggestions, isMultiValue]);
-  const handleInputChange = useCallback4((evt) => {
-    const { value: value2 } = evt.target;
-    setValueInputValue(value2);
-  }, []);
-  const InputProps = useMemo2(() => {
-    if (operator !== "in") {
-      const { inputProps, ...restInputProps } = InputPropsProp;
-      return {
-        ...restInputProps,
-        inputProps: {
-          ...inputProps,
-          onKeyDown: (evt) => {
-            var _a2;
-            if (evt.key === "Enter" && valueInputValue !== "") {
-              evt.stopPropagation();
-              evt.preventDefault();
-              onInputComplete(valueInputValue);
-            } else {
-              (_a2 = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a2.call(inputProps, evt);
-            }
+      },
+      [InputPropsProp, onChangeValue, valueInputValue]
+    );
+    const InputProps = useMemo2(() => {
+      if (operator === "starts" || operator === "ends") {
+        const { inputProps, ...restInputProps } = InputPropsProp;
+        return {
+          ...restInputProps,
+          inputProps: {
+            ...inputProps,
+            onKeyDown: handleKeyDownFreeTextInput
           }
+        };
+      } else {
+        return InputPropsProp;
+      }
+    }, [InputPropsProp, handleKeyDownFreeTextInput, operator]);
+    const getValueInputField = useCallback3(() => {
+      switch (operator) {
+        case "in":
+          return /* @__PURE__ */ jsx3(
+            ExpandoCombobox,
+            {
+              InputProps,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              source: typeaheadValues,
+              onInputChange: handleInputChange,
+              onSelectionChange: handleMultiValueSelectionChange,
+              ref: forwardedRef,
+              selectionStrategy: "multiple",
+              selectionKeys,
+              value
+            }
+          );
+        case "starts": {
+          return /* @__PURE__ */ jsx3(
+            ExpandoCombobox,
+            {
+              InputProps,
+              ListProps: {
+                className: "vuuIllustrationsOnly",
+                disabled: true
+              },
+              allowEnterCommitsText: true,
+              allowFreeText: true,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              disableFilter: typeaheadValues === NO_DATA_MATCH && (valueInputValue == null ? void 0 : valueInputValue.length) > 0,
+              source: typeaheadValues,
+              onInputChange: handleInputChange,
+              onSelectionChange: handleSingleValueSelectionChange,
+              ref: forwardedRef,
+              value
+            }
+          );
         }
-      };
-    } else {
-      return InputPropsProp;
-    }
-  }, [InputPropsProp, onInputComplete, operator, valueInputValue]);
-  const getValueInputField = useCallback4(() => {
-    switch (operator) {
-      case "in":
-        return /* @__PURE__ */ jsx4(
-          ExpandoCombobox,
-          {
-            InputProps,
-            className,
-            "data-field": dataField,
-            initialHighlightedIndex: 0,
-            source: typeaheadValues,
-            onInputChange: handleInputChange,
-            onSelectionChange: handleMultiValueSelectionChange,
-            ref: forwardedRef,
-            selectionStrategy: "multiple",
-            selectionKeys,
-            value
-          }
-        );
-      case "starts": {
-        return /* @__PURE__ */ jsx4(
-          ExpandoCombobox,
-          {
-            InputProps,
-            ListProps: {
-              className: "vuuIllustrationsOnly",
-              disabled: true
-            },
-            allowFreeText: true,
-            className,
-            "data-field": dataField,
-            initialHighlightedIndex: 0,
-            disableFilter: typeaheadValues === NO_DATA_MATCH && (valueInputValue == null ? void 0 : valueInputValue.length) > 0,
-            source: typeaheadValues,
-            onInputChange: handleInputChange,
-            onSelectionChange: handleSingleValueSelectionChange,
-            ref: forwardedRef,
-            value
-          }
-        );
+        case "ends":
+          return /* @__PURE__ */ jsx3(
+            ExpandoInput2,
+            {
+              ...InputProps,
+              className,
+              "data-field": dataField,
+              value: valueInputValue,
+              ref: forwardedRef,
+              onChange: handleInputChange
+            }
+          );
+        default:
+          return typeaheadValues.length > 0 ? /* @__PURE__ */ jsx3(
+            ExpandoCombobox,
+            {
+              InputProps,
+              allowBackspaceClearsSelection: true,
+              allowFreeText: true,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              source: typeaheadValues,
+              title: "value",
+              onInputChange: handleInputChange,
+              onDeselect,
+              onSelectionChange: handleSingleValueSelectionChange,
+              ref: forwardedRef,
+              value
+            }
+          ) : null;
       }
-      case "ends":
-        return /* @__PURE__ */ jsx4(
-          ExpandoInput2,
-          {
-            ...InputProps,
-            className,
-            "data-field": dataField,
-            value: valueInputValue,
-            ref: forwardedRef,
-            onChange: handleInputChange
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx4(
-          ExpandoCombobox,
-          {
-            InputProps,
-            allowBackspaceClearsSelection: true,
-            allowFreeText: true,
-            className,
-            "data-field": dataField,
-            initialHighlightedIndex: 0,
-            source: typeaheadValues,
-            title: "value",
-            onInputChange: handleInputChange,
-            onDeselect,
-            onSelectionChange: handleSingleValueSelectionChange,
-            ref: forwardedRef,
-            value
-          }
-        );
-    }
-  }, [
-    InputProps,
-    operator,
-    className,
-    dataField,
-    typeaheadValues,
-    handleInputChange,
-    handleMultiValueSelectionChange,
-    forwardedRef,
-    value,
-    valueInputValue,
-    onDeselect,
-    handleSingleValueSelectionChange
-  ]);
-  return getValueInputField();
-});
+    }, [
+      InputProps,
+      operator,
+      className,
+      dataField,
+      typeaheadValues,
+      handleInputChange,
+      handleMultiValueSelectionChange,
+      forwardedRef,
+      value,
+      valueInputValue,
+      onDeselect,
+      handleSingleValueSelectionChange
+    ]);
+    return getValueInputField();
+  }
+);
 
-// src/filter-clause/FilterClauseValueEditor.tsx
+// src/filter-clause/value-editors/FilterClauseValueEditor.tsx
 import { isDateTimeColumn } from "@vuu-ui/vuu-utils";
 
-// src/filter-clause/DateInput.tsx
-import { useCallback as useCallback5, useState as useState4 } from "react";
+// src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
+import { useCallback as useCallback4, useState as useState4 } from "react";
 
 // ../../node_modules/@internationalized/date/dist/import.mjs
 var $14e0f24ef4ac5c92$var$localTimeZone = null;
@@ -520,31 +693,52 @@ var $7c5f6fbf42389787$var$MONTH_DAYS = 29;
 var $7c5f6fbf42389787$var$MONTH_FRACT = 12 * $7c5f6fbf42389787$var$HOUR_PARTS + 793;
 var $7c5f6fbf42389787$var$MONTH_PARTS = $7c5f6fbf42389787$var$MONTH_DAYS * $7c5f6fbf42389787$var$DAY_PARTS + $7c5f6fbf42389787$var$MONTH_FRACT;
 
-// src/filter-clause/DateInput.tsx
-import { DatePicker } from "@vuu-ui/vuu-ui-controls";
-import { toCalendarDate } from "@vuu-ui/vuu-utils";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var DateInput = (props) => {
-  const { value, onInputComplete, operator } = props;
+// src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
+import { DateInput } from "@vuu-ui/vuu-ui-controls";
+import { queryClosest, toCalendarDate } from "@vuu-ui/vuu-utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FilterClauseValueEditorDate = (props) => {
+  const { InputProps, className, onChangeValue, operator, value } = props;
   const toEpochMilliS = getEpochMillisConverter(operator);
   const [date, setDate] = useState4(
     () => getInitialState(value)
   );
-  const onSelectedDateChange = useCallback5((d) => {
-    setDate(d);
-  }, []);
-  const onBlur = useCallback5(() => {
-    date && onInputComplete(toEpochMilliS(date));
-  }, [date, onInputComplete, toEpochMilliS]);
-  return /* @__PURE__ */ jsx5(
-    DatePicker,
+  const onSelectedDateChange = useCallback4(
+    (d, source) => {
+      setDate(d);
+      if (d && source === "calendar") {
+        onChangeValue(toEpochMilliS(d));
+      }
+    },
+    [onChangeValue, toEpochMilliS]
+  );
+  const onBlur = useCallback4(() => {
+    date && onChangeValue(toEpochMilliS(date));
+  }, [date, onChangeValue, toEpochMilliS]);
+  const handleKeyDown = useCallback4(
+    (evt) => {
+      if (evt.key === "Enter") {
+        if (date) {
+          const popup = queryClosest(evt.target, ".vuuDatePopup");
+          if (popup === null) {
+            onChangeValue(toEpochMilliS(date));
+          }
+        }
+      } else if (evt.key === "Tab") {
+        console.log("better handle tab");
+      }
+    },
+    [date, onChangeValue, toEpochMilliS]
+  );
+  return /* @__PURE__ */ jsx4(
+    DateInput,
     {
-      className: "vuuFilterClause-DatePicker",
+      inputProps: InputProps == null ? void 0 : InputProps.inputProps,
+      className: clsx_default("vuuFilterClause-DatePicker", className),
       selectedDate: date,
       onBlur,
-      onSelectedDateChange,
-      closeOnSelection: true,
-      hideOutOfRangeDates: true
+      onChange: onSelectedDateChange,
+      onKeyDown: handleKeyDown
     }
   );
 };
@@ -567,9 +761,9 @@ var getEpochMillisConverter = (op) => (date, timezone = $14e0f24ef4ac5c92$export
   }
 };
 
-// src/filter-clause/FilterClauseValueEditor.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var classBase3 = "vuuFilterClause";
+// src/filter-clause/value-editors/FilterClauseValueEditor.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var classBase2 = "vuuFilterClause";
 var FilterClauseValueEditor = ({
   selectedColumn,
   operator,
@@ -584,27 +778,31 @@ var FilterClauseValueEditor = ({
     return null;
   }
   if (isDateTimeColumn(selectedColumn)) {
-    return /* @__PURE__ */ jsx6(
-      DateInput,
+    console.log(`return DateInput`);
+    return /* @__PURE__ */ jsx5(
+      FilterClauseValueEditorDate,
       {
+        InputProps,
+        className: clsx_default(`${classBase2}Field`, `${classBase2}Value`),
+        "data-field": "value",
         value,
         operator,
-        onInputComplete: onChangeValue
+        onChangeValue
       }
     );
   }
   switch (selectedColumn.serverDataType) {
     case "string":
     case "char":
-      return /* @__PURE__ */ jsx6(
-        FilterClauseTextValueEditor,
+      return /* @__PURE__ */ jsx5(
+        FilterClauseValueEditorText,
         {
           InputProps,
-          className: clsx_default(`${classBase3}Field`, `${classBase3}Value`),
+          className: clsx_default(`${classBase2}Field`, `${classBase2}Value`),
           column: selectedColumn,
           "data-field": "value",
           onDeselect: onDeselectValue,
-          onInputComplete: onChangeValue,
+          onChangeValue,
           operator,
           suggestionProvider,
           table,
@@ -614,13 +812,14 @@ var FilterClauseValueEditor = ({
     case "int":
     case "long":
     case "double":
-      return /* @__PURE__ */ jsx6(
-        NumericInput,
+      return /* @__PURE__ */ jsx5(
+        FilterClauseValueEditorNumber,
         {
           InputProps,
-          className: clsx_default(`${classBase3}Field`, `${classBase3}Value`),
+          className: clsx_default(`${classBase2}Field`, `${classBase2}Value`),
           column: selectedColumn,
-          onInputComplete: onChangeValue,
+          "data-field": "value",
+          onChangeValue,
           operator
         }
       );
@@ -630,34 +829,93 @@ var FilterClauseValueEditor = ({
   }
 };
 
-// src/filter-clause/useFilterClauseEditor.ts
-import {
-  isMultiValueFilter,
-  isSingleValueFilter,
-  isValidFilterClauseOp
-} from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback6,
-  useEffect as useEffect2,
-  useMemo as useMemo3,
-  useRef as useRef3,
+// src/filter-clause/operator-utils.ts
+import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
+var textOperators = ["=", "in", "!=", "starts", "ends"];
+var numericperators = ["=", "!=", ">", ">=", "<", "<="];
+var getOperators = (column) => {
+  if (isTextColumn(column)) {
+    return textOperators;
+  } else if (isNumericColumn(column)) {
+    return numericperators;
+  } else {
+    throw Error("getOperators only supports text and numeric columns");
+  }
+};
+
+// src/filter-clause/useFilterClause.ts
+import { isValidFilterClauseOp } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect2,
+  useMemo as useMemo3,
+  useRef as useRef2,
   useState as useState5
 } from "react";
-var cursorAtTextStart = (input) => input.selectionStart === 0;
-var cursorAtTextEnd = (input) => input.selectionStart === input.value.length;
-var getFieldName = (field) => (field == null ? void 0 : field.classList.contains("vuuFilterClauseColumn")) ? "column" : (field == null ? void 0 : field.classList.contains("vuuFilterClauseOperator")) ? "operator" : "value";
-var getFocusedField = () => {
-  const activeElement = document.activeElement;
-  if (activeElement == null ? void 0 : activeElement.classList.contains("vuuFilterClause-clearButton")) {
-    return activeElement;
+
+// src/filter-clause/filterClauseFocusManagement.ts
+import { getElementDataIndex, queryClosest as queryClosest2 } from "@vuu-ui/vuu-utils";
+var getFilterClauseElement = (possiblyDescendant) => possiblyDescendant == null ? void 0 : possiblyDescendant.closest(".vuuFilterClause");
+var getFilterClauseFieldElement = (possiblyDescendant) => possiblyDescendant == null ? void 0 : possiblyDescendant.closest(".vuuFilterClauseField");
+var mapFilterFieldToClassName = {
+  column: "vuuFilterClauseColumn",
+  operator: "vuuFilterClauseOperator",
+  value: "vuuFilterClauseValue"
+};
+var getFilterClauseDetails = ({ classList }) => {
+  if (classList.contains("vuuFilterClauseColumn")) {
+    return "column";
+  } else if (classList.contains("vuuFilterClauseOperator")) {
+    return "operator";
+  } else if (classList.contains("vuuFilterClauseValue")) {
+    return "value";
+  } else {
+    throw Error(
+      "getFilterClauseField, filterClauseElemnent is missing required class name"
+    );
+  }
+};
+var getFocusedFieldDetails = () => {
+  const el = document.activeElement;
+  const field = queryClosest2(el, ".vuuFilterClauseField");
+  const filterClause = queryClosest2(field, ".vuuFilterClause");
+  if (filterClause && field) {
+    return [getElementDataIndex(filterClause), getFilterClauseDetails(field)];
   } else {
-    return activeElement == null ? void 0 : activeElement.closest(".vuuFilterClauseField");
+    return [];
   }
 };
+var focusField = (fieldOrClause) => {
+  const input = fieldOrClause == null ? void 0 : fieldOrClause.querySelector("input");
+  if (input) {
+    input.focus();
+    requestAnimationFrame(() => {
+      input == null ? void 0 : input.select();
+    });
+  }
+};
+var elementIsFilterCombinator = (element) => element !== null && element.classList.contains("vuuFilterClauseCombinator");
+var elementIsFilterClause = (element) => element !== null && element.classList.contains("vuuFilterClause");
+var focusFilterClauseField = (filterEditor, filterClauseIndex, fieldName = "value") => {
+  if (filterEditor) {
+    const fieldClassName = mapFilterFieldToClassName[fieldName];
+    const field = filterEditor.querySelector(
+      `.vuuFilterClause[data-index="${filterClauseIndex}"] .${fieldClassName}`
+    );
+    focusField(field);
+  }
+};
+var focusLastClauseValue = (filterEditor) => {
+  console.log("focusLastClauseValue");
+  const field = Array.from(
+    filterEditor == null ? void 0 : filterEditor.querySelectorAll(".vuuFilterClauseField")
+  ).at(-1);
+  focusField(field);
+};
 var focusNextFocusableElement = (direction = "fwd") => {
   var _a;
   const activeField = getFocusedField();
-  const filterClause = activeField == null ? void 0 : activeField.closest(".vuuFilterClause");
+  const filterClause = getFilterClauseElement(activeField);
   if (direction === "fwd" && (filterClause == null ? void 0 : filterClause.lastChild) === activeField) {
     requestAnimationFrame(() => {
       focusNextFocusableElement();
@@ -667,20 +925,17 @@ var focusNextFocusableElement = (direction = "fwd") => {
     (_a = nextField == null ? void 0 : nextField.querySelector("input")) == null ? void 0 : _a.focus();
   }
 };
-var clauseIsNotFirst = (el) => {
-  var _a;
-  const clause = el.closest("[data-index]");
-  if (clause) {
-    const index = clause.dataset.index;
-    const previousClause = (_a = clause == null ? void 0 : clause.parentElement) == null ? void 0 : _a.querySelector(
-      `[data-index]:has(.vuuFilterClause):has(+[data-index="${index}"])`
-    );
-    return previousClause !== null;
+var getFocusedField = () => {
+  const activeElement = document.activeElement;
+  if (activeElement == null ? void 0 : activeElement.classList.contains("vuuFilterClause-clearButton")) {
+    return activeElement;
+  } else {
+    return getFilterClauseFieldElement(activeElement);
   }
 };
 var focusNextElement = () => {
   const filterClauseField = getFocusedField();
-  const filterClause = filterClauseField == null ? void 0 : filterClauseField.closest(".vuuFilterClause");
+  const filterClause = getFilterClauseElement(filterClauseField);
   if (filterClause && filterClauseField) {
     if (filterClauseField.classList.contains("vuuFilterClauseValue")) {
       const clearButton = filterClause.querySelector(
@@ -692,119 +947,170 @@ var focusNextElement = () => {
     }
   }
 };
-var navigateToNextInputIfAtBoundary = (evt) => {
+var cursorAtTextStart = (input) => input.selectionStart === 0;
+var cursorAtTextEnd = (input) => input.selectionStart === input.value.length;
+var getFieldName = (field) => (field == null ? void 0 : field.classList.contains("vuuFilterClauseColumn")) ? "column" : (field == null ? void 0 : field.classList.contains("vuuFilterClauseOperator")) ? "operator" : "value";
+var clauseIsNotFirst = (el) => {
+  const clause = getFilterClauseElement(el);
+  if (clause) {
+    const index = getElementDataIndex(clause);
+    return index > 0;
+  }
+};
+var clauseIsNotLast = (el) => {
+  const clause = getFilterClauseElement(el);
+  const nextClause = clause == null ? void 0 : clause.nextElementSibling;
+  return nextClause == null ? void 0 : nextClause.classList.contains("vuuFilterClauseCombinator");
+};
+var tabToPreviousFilterCombinator = (currentElement) => {
+  const filterClause = getFilterClauseElement(currentElement);
+  const nextItem = filterClause.previousSibling;
+  console.log(`tab to previous combinator`);
+  nextItem == null ? void 0 : nextItem.focus();
+};
+var navigateToNextFilterClause = (currentElement, direction = "fwd") => {
+  if (direction === "bwd") {
+    if (elementIsFilterCombinator(currentElement)) {
+      const nextClause = currentElement.previousElementSibling;
+      if (elementIsFilterClause(nextClause)) {
+        const nextField = nextClause.querySelector(
+          ".vuuFilterClauseValue"
+        );
+        console.log(`focus field Value ${nextField == null ? void 0 : 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);
+  }
+};
+var navigateToNextItemIfAtBoundary = (evt) => {
   const input = evt.target;
-  const cursorAtStart = cursorAtTextStart(input);
-  const cursorAtEnd = cursorAtTextEnd(input);
-  const field = input.closest(".vuuFilterClauseField");
+  const field = getFilterClauseFieldElement(input);
   if (evt.key === "ArrowLeft") {
-    if (cursorAtStart) {
+    if (cursorAtTextStart(input)) {
       const fieldName = getFieldName(field);
       if (fieldName === "column") {
-        return;
+        if (clauseIsNotFirst(input)) {
+          const filterClause = getFilterClauseElement(field);
+          const combinator = filterClause.previousElementSibling;
+          combinator == null ? void 0 : combinator.focus();
+        }
       } else {
-        const nextField = field.previousSibling;
-        const nextInput = nextField == null ? void 0 : nextField.querySelector("input");
         evt.preventDefault();
-        nextInput == null ? void 0 : nextInput.focus();
-        requestAnimationFrame(() => {
-          nextInput == null ? void 0 : nextInput.select();
-        });
+        focusField(field.previousSibling);
       }
     }
     evt.stopPropagation();
   } else if (evt.key === "ArrowRight") {
-    if (cursorAtEnd) {
+    if (cursorAtTextEnd(input)) {
       const fieldName = getFieldName(field);
       if (fieldName === "value") {
+        if (clauseIsNotLast(input)) {
+          const filterClause = getFilterClauseElement(field);
+          const combinator = filterClause.nextElementSibling;
+          combinator == null ? void 0 : combinator.focus();
+        }
         return;
       } else {
-        const nextField = field.nextSibling;
-        const nextInput = nextField == null ? void 0 : nextField.querySelector("input");
         evt.preventDefault();
-        nextInput == null ? void 0 : nextInput.focus();
-        requestAnimationFrame(() => {
-          nextInput == null ? void 0 : nextInput.select();
-        });
+        focusField(field.nextSibling);
       }
     }
     evt.stopPropagation();
   }
 };
-var getFilterClauseValue = (filterClause) => {
-  if (isMultiValueFilter(filterClause)) {
-    return filterClause.values;
-  } else if (isSingleValueFilter(filterClause)) {
-    return filterClause.value;
-  } else {
-    return void 0;
+var 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 == null ? void 0 : input.select();
+      input == null ? void 0 : input.focus();
+    }, 100);
   }
 };
-var useFilterClauseEditor = ({
-  filterClause,
+
+// src/filter-clause/useFilterClause.ts
+var useFilterClause = ({
+  filterClauseModel,
   onCancel,
-  onChange,
   columnsByName
 }) => {
-  const columnRef = useRef3(null);
-  const operatorRef = useRef3(null);
-  const [selectedColumn, setSelectedColumn] = useState5(filterClause.column ? columnsByName[filterClause.column] : void 0);
-  const [operator, _setOperator] = useState5(
-    filterClause.op
-  );
-  const setOperator = useCallback6((op) => {
-    _setOperator(op);
-  }, []);
-  const [value, setValue] = useState5(
-    getFilterClauseValue(filterClause)
-  );
-  const handleColumnSelect = useCallback6(
-    (_, column) => {
-      setSelectedColumn(column != null ? column : void 0);
-      setOperator(void 0);
-      setValue(void 0);
-      setTimeout(() => {
-        focusNextElement();
-      }, 100);
-    },
-    [setOperator]
+  var _a;
+  const [filterClause, setFilterClause] = useState5(
+    filterClauseModel.isValid ? filterClauseModel.asFilter() : {}
   );
-  const removeAndNavigateToNextInputIfAtBoundary = useCallback6(
+  useMemo3(() => {
+    filterClauseModel.on("filterClause", (filterClause2) => {
+      setFilterClause(filterClause2);
+    });
+  }, [filterClauseModel]);
+  const columnRef = useRef2(null);
+  const operatorRef = useRef2(null);
+  const removeAndNavigateToNextInputIfAtBoundary = useCallback5(
     (evt) => {
-      var _a;
+      var _a2;
       const input = evt.target;
       if (input.value === "") {
-        const field = input.closest(
-          ".vuuFilterClauseField,[data-field]"
-        );
-        switch ((_a = field == null ? void 0 : field.dataset) == null ? void 0 : _a.field) {
+        const field = input.closest("[data-field]");
+        switch ((_a2 = field == null ? void 0 : field.dataset) == null ? void 0 : _a2.field) {
           case "operator": {
-            setOperator(void 0);
-            setSelectedColumn(void 0);
+            filterClauseModel.column = void 0;
             focusNextFocusableElement("bwd");
             break;
           }
           case "value": {
-            setOperator(void 0);
+            filterClauseModel.setOp(void 0);
             focusNextFocusableElement("bwd");
             break;
           }
           case "column": {
             if (clauseIsNotFirst(input)) {
-              console.log("This is NOT the first clause");
-              onCancel == null ? void 0 : onCancel("Backspace");
+              evt.preventDefault();
+              onCancel == null ? void 0 : onCancel(filterClauseModel, "Backspace");
             }
           }
         }
       }
     },
-    [onCancel, setOperator]
+    [filterClauseModel, onCancel]
   );
-  const handleOperatorSelect = useCallback6(
+  const handleColumnSelect = useCallback5(
+    (evt, column) => {
+      var _a2;
+      if ((evt == null ? void 0 : evt.type) === "keydown") {
+        const { key } = evt;
+        if (key === "Tab") {
+          if (filterClauseModel.column === column.name) {
+            return;
+          } else {
+            evt.preventDefault();
+          }
+        }
+      }
+      filterClauseModel.column = (_a2 = column == null ? void 0 : column.name) != null ? _a2 : void 0;
+      setTimeout(() => {
+        focusNextElement();
+      }, 100);
+    },
+    [filterClauseModel]
+  );
+  const handleOperatorSelect = useCallback5(
     (_, selected) => {
       const op = selected;
       if (op === void 0 || isValidFilterClauseOp(op)) {
-        setOperator(op);
+        filterClauseModel.setOp(op);
         focusNextElement();
       } else {
         throw Error(
@@ -812,198 +1118,515 @@ var useFilterClauseEditor = ({
         );
       }
     },
-    [setOperator]
+    [filterClauseModel]
   );
-  const handleChangeValue = useCallback6(
-    (value2) => {
-      setValue(value2);
-      if (value2 !== null && value2 !== "") {
-        if (Array.isArray(value2)) {
-          onChange({
-            column: selectedColumn == null ? void 0 : selectedColumn.name,
-            op: operator,
-            values: value2
-          });
-        } else {
-          onChange({
-            column: selectedColumn == null ? void 0 : selectedColumn.name,
-            op: operator,
-            value: value2
-          });
-        }
-      }
-    },
-    [onChange, operator, selectedColumn == null ? void 0 : selectedColumn.name]
+  const handleChangeValue = useCallback5(
+    (value, isFinal) => filterClauseModel.setValue(value, isFinal),
+    [filterClauseModel]
   );
-  const handleDeselectValue = useCallback6(() => {
-    setValue(void 0);
-  }, []);
-  const handleKeyDownCaptureInput = useCallback6(
+  const handleDeselectValue = useCallback5(
+    () => filterClauseModel.setValue(void 0),
+    [filterClauseModel]
+  );
+  const handleKeyDownCaptureNavigation = useCallback5(
     (evt) => {
       if (["ArrowLeft", "ArrowRight"].includes(evt.key)) {
-        navigateToNextInputIfAtBoundary(evt);
+        navigateToNextItemIfAtBoundary(evt);
       } else if (evt.key === "Backspace") {
         removeAndNavigateToNextInputIfAtBoundary(evt);
+      } else if (evt.key === "Escape") {
+        onCancel == null ? void 0 : onCancel(filterClauseModel, "Escape");
+      } else if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        tabToPreviousFilterCombinator(evt.target);
       }
     },
-    [removeAndNavigateToNextInputIfAtBoundary]
-  );
-  const handleClear = useCallback6(
-    (e) => {
-      var _a;
-      const button = e.target;
-      const firstInput = (_a = button.closest(".vuuFilterClause")) == null ? void 0 : _a.querySelector("input");
-      setSelectedColumn(void 0);
-      setOperator(void 0);
-      setValue(void 0);
-      setTimeout(() => {
-        firstInput.select();
-        firstInput == null ? void 0 : firstInput.focus();
-      }, 100);
-    },
-    [setOperator]
+    [filterClauseModel, onCancel, removeAndNavigateToNextInputIfAtBoundary]
   );
-  const handleClearKeyDown = useCallback6((e) => {
-    e.stopPropagation();
-    if (e.key === "Backspace") {
-      focusNextFocusableElement("bwd");
+  const handleFocus = useCallback5((evt) => {
+    if (elementIsFilterClause(evt.target)) {
+      focusField(evt.target);
     }
   }, []);
   const InputProps = useMemo3(
     () => ({
       inputProps: {
-        onKeyDownCapture: handleKeyDownCaptureInput
+        onKeyDownCapture: handleKeyDownCaptureNavigation,
+        tabIndex: -1
       }
     }),
-    [handleKeyDownCaptureInput]
+    [handleKeyDownCaptureNavigation]
   );
   useEffect2(() => {
-    var _a;
-    const columnInput = (_a = columnRef.current) == null ? void 0 : _a.querySelector("input");
-    columnInput == null ? void 0 : columnInput.focus();
-  }, []);
+    if (filterClauseModel.column === void 0) {
+      requestAnimationFrame(() => {
+        var _a2;
+        const columnInput = (_a2 = columnRef == null ? void 0 : columnRef.current) == null ? void 0 : _a2.querySelector("input");
+        columnInput == null ? void 0 : columnInput.focus();
+      });
+    }
+  }, [filterClauseModel]);
   return {
     InputProps,
     columnRef,
+    filterClause,
     onChangeValue: handleChangeValue,
-    onClear: handleClear,
-    onClearKeyDown: handleClearKeyDown,
     onDeselectValue: handleDeselectValue,
     onColumnSelect: handleColumnSelect,
+    onFocus: handleFocus,
     onOperatorSelect: handleOperatorSelect,
-    operator,
     operatorRef,
-    selectedColumn,
-    value
+    selectedColumn: columnsByName[(_a = filterClause.column) != null ? _a : ""]
   };
 };
 
-// src/filter-clause/FilterClauseEditor.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var classBase4 = "vuuFilterClause";
-var FilterClauseEditor = ({
+// src/filter-clause/FilterClause.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var classBase3 = "vuuFilterClause";
+var FilterClause = ({
   className,
   columnsByName,
   onCancel,
-  onChange,
   onDropdownClose,
   onDropdownOpen,
-  filterClause,
+  filterClauseModel,
   suggestionProvider,
   tableSchema,
   ...htmlAttributes
 }) => {
-  var _a;
+  var _a, _b;
   const {
     InputProps,
     columnRef,
+    filterClause,
     onChangeValue,
-    onClear,
-    onClearKeyDown,
-    onDeselectValue,
     onColumnSelect,
+    onFocus,
+    onDeselectValue,
     onOperatorSelect,
-    operator,
     operatorRef,
-    selectedColumn,
-    value
-  } = useFilterClauseEditor({
-    filterClause,
+    selectedColumn
+  } = useFilterClause({
+    filterClauseModel,
     onCancel,
-    onChange,
     columnsByName
   });
   const columns = useMemo4(() => Object.values(columnsByName), [columnsByName]);
-  return /* @__PURE__ */ jsxs2("div", { className: clsx_default(classBase4, className), ...htmlAttributes, tabIndex: 0, children: [
-    /* @__PURE__ */ jsx7(
-      ExpandoCombobox,
-      {
-        InputProps,
-        allowBackspaceClearsSelection: true,
-        className: clsx_default(`${classBase4}Field`, `${classBase4}Column`),
-        "data-field": "column",
-        initialHighlightedIndex: 0,
-        itemToString: (column) => column.name,
-        onListItemSelect: onColumnSelect,
-        ref: columnRef,
-        source: columns,
-        title: "column",
-        value: (_a = selectedColumn == null ? void 0 : selectedColumn.name) != null ? _a : ""
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default(classBase3, className),
+      ...htmlAttributes,
+      onFocus,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx6(
+          ExpandoCombobox,
+          {
+            InputProps,
+            allowBackspaceClearsSelection: true,
+            className: clsx_default(`${classBase3}Field`, `${classBase3}Column`),
+            "data-field": "column",
+            initialHighlightedIndex: 0,
+            itemToString: (column) => column.name,
+            onListItemSelect: onColumnSelect,
+            ref: columnRef,
+            source: columns,
+            title: "column",
+            value: filterClause.column
+          },
+          "column-field"
+        ),
+        (selectedColumn == null ? void 0 : selectedColumn.name) ? /* @__PURE__ */ jsx6(
+          ExpandoCombobox,
+          {
+            InputProps,
+            allowBackspaceClearsSelection: true,
+            className: clsx_default(`${classBase3}Field`, `${classBase3}Operator`, {
+              [`${classBase3}Operator-hidden`]: selectedColumn === null
+            }),
+            "data-field": "operator",
+            initialHighlightedIndex: 0,
+            onListItemSelect: onOperatorSelect,
+            ref: operatorRef,
+            source: getOperators(selectedColumn),
+            title: "operator",
+            value: (_a = filterClause.op) != null ? _a : ""
+          },
+          "operator-field"
+        ) : null,
+        /* @__PURE__ */ jsx6(
+          FilterClauseValueEditor,
+          {
+            InputProps,
+            onChangeValue,
+            onDeselectValue,
+            operator: filterClause.op,
+            selectedColumn,
+            suggestionProvider,
+            table: tableSchema.table,
+            value: (_b = filterClause == null ? void 0 : filterClause.values) != null ? _b : filterClause == null ? void 0 : filterClause.value
+          },
+          "value-field"
+        )
+      ]
+    }
+  );
+};
+
+// src/filter-editor/FilterClauseCombinator.tsx
+import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
+import { useCallback as useCallback6 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var classBase4 = "vuuFilterClauseCombinator";
+var FilterClauseCombinator = ({
+  onChange,
+  onKeyDown,
+  operator
+}) => {
+  const handleChange = useCallback6(
+    (value) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx7(
+    CycleStateButton,
+    {
+      className: classBase4,
+      onChange: handleChange,
+      onKeyDown,
+      value: operator,
+      values: ["and", "or"],
+      variant: "primary"
+    }
+  );
+};
+
+// src/filter-editor/useFilterEditor.ts
+import {
+  useCallback as useCallback7,
+  useMemo as useMemo5,
+  useRef as useRef3,
+  useState as useState6
+} from "react";
+var useFilterEditor = ({
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave
+}) => {
+  const filterModel = useMemo5(() => {
+    return new FilterModel(filter);
+  }, [filter]);
+  const [_, forceRefresh] = useState6({});
+  const [isValid, setIsValid] = useState6(filterModel.isValid);
+  const clauseCombinatorRef = useRef3(void 0);
+  const saveButtonRef = useRef3(null);
+  const containerRef = useRef3(null);
+  const setContainer = useCallback7((el) => {
+    containerRef.current = el;
+    if (el) {
+      focusFirstClauseIfAllClausesValid(el);
+    }
+  }, []);
+  const saveButtonMenuBuilder = useCallback7((_2, options) => {
+    switch (clauseCombinatorRef.current) {
+      case "and":
+        return [{ action: "and-clause", label: "AND", options }];
+      case "or":
+        return [{ action: "or-clause", label: "OR", options }];
+      default:
+        return [
+          { action: "and-clause", label: "AND", options },
+          { action: "or-clause", label: "OR", options }
+        ];
+    }
+  }, []);
+  const columnsByName = useMemo5(
+    () => columnDescriptorsByName(columnDescriptors),
+    [columnDescriptors]
+  );
+  const isLastFilterClause = useCallback7(
+    (index) => index !== void 0 && filterModel.filterClauses.length === index + 1,
+    [filterModel]
+  );
+  useMemo5(() => {
+    const setValid = (isValid2) => {
+      setIsValid(isValid2);
+    };
+    const valueChanged = (_filter2, isValid2) => {
+      if (isValid2) {
+        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();
+        if (fieldName === "value" && isLastFilterClause(filterClauseIndex)) {
+          requestAnimationFrame(() => {
+            var _a;
+            (_a = saveButtonRef.current) == null ? void 0 : _a.focus();
+          });
+        }
       }
-    ),
-    (selectedColumn == null ? void 0 : selectedColumn.name) ? /* @__PURE__ */ jsx7(
-      ExpandoCombobox,
-      {
-        InputProps,
-        allowBackspaceClearsSelection: true,
-        className: clsx_default(`${classBase4}Field`, `${classBase4}Operator`, {
-          [`${classBase4}Operator-hidden`]: selectedColumn === null
-        }),
-        "data-field": "operator",
-        initialHighlightedIndex: 0,
-        onListItemSelect: onOperatorSelect,
-        ref: operatorRef,
-        source: getOperators(selectedColumn),
-        title: "operator",
-        value: operator != null ? operator : ""
+    };
+    filterModel.on("isValid", setValid);
+    filterModel.on("filter", valueChanged);
+  }, [filterModel, isLastFilterClause]);
+  const handleCancelFilterClause = useCallback7(
+    (filterClause, reason) => {
+      if (reason === "Backspace") {
+        const indexOfFilterClause = filterModel.filterClauses.indexOf(filterClause);
+        filterModel.removeFilterClause(filterClause);
+        forceRefresh({});
+        if (reason === "Backspace" && containerRef.current) {
+          if (indexOfFilterClause > 0) {
+            focusFilterClauseField(
+              containerRef.current,
+              indexOfFilterClause - 1
+            );
+          }
+        }
+      } else {
+        console.log(
+          `cancel because of Escape valid clause ${filterClause.isValid}`
+        );
+        onCancel(filter);
       }
-    ) : null,
-    /* @__PURE__ */ jsx7(
-      FilterClauseValueEditor,
-      {
-        InputProps,
-        onChangeValue,
-        onDeselectValue,
-        operator,
-        selectedColumn,
-        suggestionProvider,
-        table: tableSchema == null ? void 0 : tableSchema.table,
-        value
+    },
+    [filter, filterModel, onCancel]
+  );
+  const invokeMenuAction = useCallback7(
+    ({ menuId }) => {
+      switch (menuId) {
+        case "save": {
+          const savedFilter = filterModel.asFilter();
+          const newOrUpdatedFilter = (filter == null ? void 0 : filter.name) ? {
+            ...savedFilter,
+            name: filter.name
+          } : savedFilter;
+          onSave(newOrUpdatedFilter);
+          return true;
+        }
+        case "and-clause": {
+          clauseCombinatorRef.current = "and";
+          filterModel.addNewFilterClause("and");
+          return true;
+        }
+        case "or-clause":
+          clauseCombinatorRef.current = "or";
+          filterModel.addNewFilterClause("or");
+          return true;
+        default:
+          return false;
       }
-    ),
-    value !== void 0 ? /* @__PURE__ */ jsx7(
-      Button,
-      {
-        className: `${classBase4}-clearButton`,
-        onClick: onClear,
-        onKeyDown: onClearKeyDown,
-        "data-icon": "close"
+    },
+    [filter == null ? void 0 : filter.name, filterModel, onSave]
+  );
+  const handleKeyDownSaveButton = useCallback7(
+    (evt) => {
+      if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        const target = evt.target;
+        const filterEditor = target.closest(".vuuFilterEditor");
+        focusLastClauseValue(filterEditor);
+      } else if (evt.key === "Escape") {
+        onCancel(filter);
       }
-    ) : null
+    },
+    [filter, onCancel]
+  );
+  const handleKeyDownNavigationFromCombinator = useCallback7((evt) => {
+    const { target, key, shiftKey } = evt;
+    if (key === "ArrowLeft") {
+      evt.preventDefault();
+      navigateToNextFilterClause(target, "bwd");
+    } else if (key === "ArrowRight") {
+      evt.preventDefault();
+      navigateToNextFilterClause(target, "fwd");
+    } else if (key === "Tab" && shiftKey) {
+      evt.preventDefault();
+      navigateToNextFilterClause(target, "bwd");
+    }
+  }, []);
+  const handleClickSaveButton = useMemo5(
+    () => () => invokeMenuAction({
+      menuId: "save",
+      options: {},
+      type: "menu-action"
+    }),
+    [invokeMenuAction]
+  );
+  const saveButtonProps = {
+    PopupMenuProps: {
+      icon: "more-vert",
+      menuBuilder: saveButtonMenuBuilder,
+      menuActionHandler: invokeMenuAction,
+      menuLocation: "filter-save-menu"
+    },
+    onClick: handleClickSaveButton,
+    onKeyDown: handleKeyDownSaveButton
+  };
+  const onChangeFilterCombinator = useCallback7(
+    (op) => {
+      filterModel.setOp(op);
+      clauseCombinatorRef.current = op;
+      forceRefresh({});
+    },
+    [filterModel]
+  );
+  const handleCancelFilterEdit = useCallback7(() => {
+    onCancel(filter);
+  }, [filter, onCancel]);
+  return {
+    columnsByName,
+    filterModel,
+    isValid,
+    onCancelFilterClause: handleCancelFilterClause,
+    onCancelFilterEdit: handleCancelFilterEdit,
+    onChangeFilterCombinator,
+    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,
+    saveButtonProps,
+    saveButtonRef,
+    setContainer
+  };
+};
+function columnDescriptorsByName(columns) {
+  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
+}
+
+// src/filter-editor/FilterEditor.tsx
+import { Button } from "@salt-ds/core";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { createElement } from "react";
+var classBase5 = "vuuFilterEditor";
+var FilterEditor = ({
+  FilterClauseEditorProps,
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave,
+  tableSchema,
+  ...htmlAttributes
+}) => {
+  const {
+    columnsByName,
+    filterModel,
+    setContainer,
+    onCancelFilterClause,
+    onCancelFilterEdit,
+    onChangeFilterCombinator,
+    onKeyDownCombinator,
+    saveButtonRef,
+    saveButtonProps
+  } = useFilterEditor({
+    columnDescriptors,
+    filter,
+    onCancel,
+    onSave
+  });
+  const getContents = () => {
+    const { op } = filterModel;
+    const content = [];
+    filterModel.filterClauses.forEach((filterClauseModel, i) => {
+      if (i > 0 && op) {
+        content.push(
+          /* @__PURE__ */ jsx8(
+            FilterClauseCombinator,
+            {
+              onChange: onChangeFilterCombinator,
+              onKeyDown: onKeyDownCombinator,
+              operator: op
+            },
+            `filter-operator-${i}`
+          )
+        );
+      }
+      content.push(
+        /* @__PURE__ */ createElement(
+          FilterClause,
+          {
+            ...FilterClauseEditorProps,
+            columnsByName,
+            "data-index": i,
+            filterClauseModel,
+            key: `editor-${i}`,
+            onCancel: onCancelFilterClause,
+            tableSchema
+          }
+        )
+      );
+    });
+    return content;
+  };
+  return /* @__PURE__ */ jsxs2("div", { ...htmlAttributes, className: classBase5, ref: setContainer, children: [
+    getContents(),
+    /* @__PURE__ */ createElement(
+      SplitButton,
+      {
+        ...saveButtonProps,
+        disabled: !filterModel.isValid,
+        key: "save-button",
+        ref: saveButtonRef
+      },
+      "Save"
+    ),
+    /* @__PURE__ */ jsx8(Button, { onClick: onCancelFilterEdit, variant: "secondary", children: "Cancel" })
   ] });
 };
 
 // src/filter-pill/FilterPill.tsx
-import { Tooltip, useTooltip } from "@vuu-ui/vuu-popups";
-import { EditableLabel } from "@vuu-ui/vuu-ui-controls";
+import {
+  Tooltip,
+  useTooltip
+} from "@vuu-ui/vuu-popups";
+import {
+  EditableLabel,
+  SplitStateButton
+} from "@vuu-ui/vuu-ui-controls";
 import { useId } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback7, useMemo as useMemo6, useRef as useRef4 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo6, useRef as useRef4 } from "react";
 
-// src/filter-pill-menu/FilterPillMenu.tsx
-import { PopupMenu } from "@vuu-ui/vuu-popups";
-import { useMemo as useMemo5 } from "react";
+// src/filter-pill/filterAsReactNode.tsx
+import { isMultiClauseFilter as isMultiClauseFilter3, isMultiValueFilter as isMultiValueFilter2 } from "@vuu-ui/vuu-utils";
+
+// src/filter-pill/getFilterLabel.ts
+import { isMultiClauseFilter as isMultiClauseFilter2 } from "@vuu-ui/vuu-utils";
+var getColumnLabel = (filter, columnsByName) => {
+  var _a;
+  const column = columnsByName == null ? void 0 : columnsByName[filter.column];
+  if (column) {
+    return (_a = column.label) != null ? _a : column.name;
+  } else {
+    return filter.column;
+  }
+};
+var getFilterLabel = (columnsByName) => (filter) => {
+  if (isMultiClauseFilter2(filter)) {
+    return filter.filters.map((f) => getFilterLabel(columnsByName)(f)).join(", ");
+  } else {
+    return getColumnLabel(filter, columnsByName);
+  }
+};
+
+// src/filter-pill/filterAsReactNode.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var filterAsReactNode = (f, getLabel = getFilterLabel()) => {
+  if (isMultiClauseFilter3(f)) {
+    const heading = f.op === "and" ? "Match all ..." : "Match any ...";
+    return /* @__PURE__ */ jsxs3("ul", { children: [
+      /* @__PURE__ */ jsx9("span", { children: heading }),
+      f.filters.map((f2, i) => /* @__PURE__ */ jsx9("li", { children: filterAsReactNode(f2, getLabel) }, i))
+    ] });
+  } else if (isMultiValueFilter2(f)) {
+    if (f.values.length > 3) {
+      const values = f.values.slice(0, 3);
+      return `${getLabel({ ...f, values }).slice(0, -1)},...]`;
+    } else {
+      return getLabel(f);
+    }
+  } else {
+    return getLabel(f);
+  }
+};
 
-// src/filter-pill-menu/FilterPillMenuOptions.ts
+// src/filter-pill/FilterPillMenuOptions.ts
 var closeCommand = (options) => ({
   label: `Close`,
   location: "filter",
@@ -1012,83 +1635,29 @@ var closeCommand = (options) => ({
 });
 var deleteCommand = (options) => ({
   label: `Delete`,
-  location: "filter",
-  action: `delete-filter`,
-  options
-});
-var renameCommand = (options) => ({
-  label: `Rename`,
-  location: "filter",
-  action: `rename-filter`,
-  options
-});
-var editCommand = (options) => ({
-  label: `Edit`,
-  location: "filter",
-  action: "edit-filter",
-  options
-});
-
-// src/filter-pill-menu/FilterPillMenu.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var classBase5 = "vuuFilterPillMenu";
-var FilterPillMenu = ({
-  allowClose = true,
-  allowDelete = true,
-  allowEdit = true,
-  allowRename = true,
-  filter,
-  location,
-  onMenuAction,
-  onMenuClose
-}) => {
-  const [menuBuilder, menuOptions] = useMemo5(
-    () => [
-      (_location, options) => {
-        const menuItems = [];
-        if (allowRename) {
-          menuItems.push(renameCommand(options));
-        }
-        if (allowEdit) {
-          menuItems.push(editCommand(options));
-        }
-        if (allowClose) {
-          menuItems.push(closeCommand(options));
-        }
-        if (allowDelete) {
-          menuItems.push(deleteCommand(options));
-        }
-        return menuItems;
-      },
-      {
-        filter
-      }
-    ],
-    [allowClose, allowDelete, allowEdit, allowRename, filter]
-  );
-  return /* @__PURE__ */ jsx8(
-    PopupMenu,
-    {
-      className: classBase5,
-      menuBuilder,
-      menuActionHandler: onMenuAction,
-      menuLocation: clsx_default("filter", location),
-      menuOptions,
-      onMenuClose,
-      tabIndex: -1
-    }
-  );
-};
-
-// src/filter-pill/filterAsReactNode.tsx
-import { isMultiClauseFilter as isMultiClauseFilter3, isMultiValueFilter as isMultiValueFilter3 } from "@vuu-ui/vuu-utils";
+  location: "filter",
+  action: `delete-filter`,
+  options
+});
+var renameCommand = (options) => ({
+  label: `Rename`,
+  location: "filter",
+  action: `rename-filter`,
+  options
+});
+var editCommand = (options) => ({
+  label: `Edit`,
+  location: "filter",
+  action: "edit-filter",
+  options
+});
 
-// src/filter-pill/getFilterLabel.ts
+// src/filter-pill/getFilterTooltipText.ts
 import {
   filterAsQuery,
   formatDate,
   isDateTimeColumn as isDateTimeColumn2,
-  isMultiClauseFilter as isMultiClauseFilter2,
+  isMultiClauseFilter as isMultiClauseFilter5,
   dateTimePattern,
   defaultPatternsByType
 } from "@vuu-ui/vuu-utils";
@@ -1098,9 +1667,8 @@ import {
   extractFilterForColumn,
   isAndFilter,
   isInFilter,
-  isMultiClauseFilter,
-  isMultiValueFilter as isMultiValueFilter2,
-  isNotNullOrUndefined,
+  isMultiClauseFilter as isMultiClauseFilter4,
+  isMultiValueFilter as isMultiValueFilter3,
   isOrFilter,
   isSingleValueFilter as isSingleValueFilter2,
   partition
@@ -1115,7 +1683,7 @@ var ENDS_WITH = "ends";
 var IN = "in";
 var filterClauses = (filter, clauses = []) => {
   if (filter) {
-    if (isMultiClauseFilter(filter)) {
+    if (isMultiClauseFilter4(filter)) {
       filter.filters.forEach((f) => clauses.push(...filterClauses(f)));
     } else {
       clauses.push(filter);
@@ -1138,7 +1706,7 @@ var removeLastClause = (filter) => {
   }
 };
 var addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
-  if (isMultiClauseFilter(existingFilter) && existingFilter.op === combineWith) {
+  if (isMultiClauseFilter4(existingFilter) && existingFilter.op === combineWith) {
     return {
       ...existingFilter,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1152,41 +1720,17 @@ var addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FIL
     };
   }
 };
-var replaceClause = (existingFilter, clause, idx) => {
-  if (existingFilter === void 0)
-    return clause;
-  return findAndReplaceClauseAtGivenIndex(existingFilter, clause, idx).filter;
-};
-function findAndReplaceClauseAtGivenIndex(existingFilter, clause, idx, currIdx = 0) {
-  if (isMultiClauseFilter(existingFilter)) {
-    let i = currIdx;
-    const filters = existingFilter.filters.map((f) => {
-      const res = findAndReplaceClauseAtGivenIndex(f, clause, idx, i);
-      i = res.nextIdx;
-      return res.filter;
-    });
-    return { filter: { ...existingFilter, filters }, nextIdx: i };
-  } else if (idx !== currIdx) {
-    return { filter: existingFilter, nextIdx: currIdx + 1 };
-  } else {
-    const { name } = existingFilter;
-    return {
-      filter: { ...isNotNullOrUndefined(name) ? { name } : {}, ...clause },
-      nextIdx: currIdx + 1
-    };
-  }
-}
 var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
   var _a;
   if (includesNoValues(filter)) {
-    if (isMultiClauseFilter(filter)) {
+    if (isMultiClauseFilter4(filter)) {
     } else {
       existingFilter = removeFilterForColumn(existingFilter, {
         name: filter.column
       });
     }
   } else if (includesAllValues(filter)) {
-    if (isMultiClauseFilter(filter)) {
+    if (isMultiClauseFilter4(filter)) {
     }
     return removeFilterForColumn(existingFilter, { name: (_a = filter.column) != null ? _a : "" });
   }
@@ -1315,7 +1859,7 @@ var splitFilterOnColumn = (columnName, filter) => {
   return filters.length === 1 ? [columnFilter, filters[0]] : [columnFilter, { op: AND, filters }];
 };
 var overrideColName = (filter, column) => {
-  if (isMultiClauseFilter(filter)) {
+  if (isMultiClauseFilter4(filter)) {
     return {
       op: filter.op,
       filters: filter.filters.map((f) => overrideColName(f, column))
@@ -1376,7 +1920,7 @@ var filterEquals = (f1, f2, strict = false) => {
     return true;
   }
   if (f1 && f2 && canMerge(f1, f2)) {
-    return f1.op === f2.op && (isSingleValueFilter2(f1) && isSingleValueFilter2(f2) && f1.value === f2.value || isMultiValueFilter2(f1) && isMultiValueFilter2(f2) && sameValues(f1.values, f2.values));
+    return f1.op === f2.op && (isSingleValueFilter2(f1) && isSingleValueFilter2(f2) && f1.value === f2.value || isMultiValueFilter3(f1) && isMultiValueFilter3(f2) && sameValues(f1.values, f2.values));
   }
   return false;
 };
@@ -1435,7 +1979,7 @@ var getNumericFilter = (column, op, value) => {
   return { column, op, value };
 };
 
-// src/filter-pill/getFilterLabel.ts
+// src/filter-pill/getFilterTooltipText.ts
 function applyFormatter(filter, formatter) {
   if ("value" in filter) {
     return { ...filter, value: formatter(filter.value) };
@@ -1460,8 +2004,8 @@ function formatFilterValue(filter, columnsByName) {
   }
   return filter;
 }
-var getFilterLabel = (columnsByName) => (filter) => {
-  if (isMultiClauseFilter2(filter)) {
+var getFilterTooltipText = (columnsByName) => (filter) => {
+  if (isMultiClauseFilter5(filter)) {
     const [firstClause] = filterClauses(filter);
     const formattedFilter = formatFilterValue(
       firstClause,
@@ -1473,44 +2017,28 @@ var getFilterLabel = (columnsByName) => (filter) => {
   }
 };
 
-// src/filter-pill/filterAsReactNode.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
-var filterAsReactNode = (f, getLabel = getFilterLabel()) => {
-  if (isMultiClauseFilter3(f)) {
-    const heading = f.op === "and" ? "Match all ..." : "Match any ...";
-    return /* @__PURE__ */ jsxs3("ul", { children: [
-      /* @__PURE__ */ jsx9("span", { children: heading }),
-      f.filters.map((f2, i) => /* @__PURE__ */ jsx9("li", { children: filterAsReactNode(f2, getLabel) }, i))
-    ] });
-  } else if (isMultiValueFilter3(f)) {
-    if (f.values.length > 3) {
-      const values = f.values.slice(0, 3);
-      return `${getLabel({ ...f, values }).slice(0, -1)},...]`;
-    } else {
-      return getLabel(f);
-    }
-  } else {
-    return getLabel(f);
-  }
-};
-
 // src/filter-pill/FilterPill.tsx
 import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var classBase6 = "vuuFilterPill";
 var FilterPill = ({
+  allowClose = true,
+  allowDelete = true,
+  allowEdit = true,
+  allowRename = true,
   className: classNameProp,
   columnsByName,
   editable = true,
+  editing = false,
+  editLabelApiRef,
   filter,
   id: idProp,
   onBeginEdit,
   onExitEditMode,
   onMenuAction,
-  showMenu = true,
   ...htmlAttributes
 }) => {
   const rootRef = useRef4(null);
-  const handleEnterEditMode = useCallback7(() => {
+  const handleEnterEditMode = useCallback8(() => {
     onBeginEdit == null ? void 0 : onBeginEdit(filter);
   }, [filter, onBeginEdit]);
   const getLabel = getFilterLabel(columnsByName);
@@ -1521,8 +2049,9 @@ var FilterPill = ({
     },
     [getLabel, filter]
   );
+  const getTooltipTextl = getFilterTooltipText(columnsByName);
   const id = useId(idProp);
-  const handleMenuClose = useCallback7((reason) => {
+  const handleMenuClose = useCallback8((reason) => {
     if ((reason == null ? void 0 : reason.type) === "escape") {
       requestAnimationFrame(() => {
         if (rootRef.current) {
@@ -1531,16 +2060,71 @@ var FilterPill = ({
       });
     }
   }, []);
-  const { anchorProps, tooltipProps } = useTooltip({
+  const popupMenuProps = useMemo6(
+    () => ({
+      icon: "more-vert",
+      menuBuilder: (_location, options) => {
+        const menuItems = [];
+        if (allowRename) {
+          menuItems.push(renameCommand(options));
+        }
+        if (allowEdit) {
+          menuItems.push(editCommand(options));
+        }
+        if (allowClose) {
+          menuItems.push(closeCommand(options));
+        }
+        if (allowDelete) {
+          menuItems.push(deleteCommand(options));
+        }
+        return menuItems;
+      },
+      menuActionHandler: onMenuAction,
+      menuLocation: "filter-pill-menu",
+      menuOptions: {
+        filter
+      },
+      onMenuClose: handleMenuClose
+    }),
+    [
+      allowClose,
+      allowDelete,
+      allowEdit,
+      allowRename,
+      filter,
+      handleMenuClose,
+      onMenuAction
+    ]
+  );
+  const handleExitEditMode = useCallback8(
+    (originalValue, newValue) => {
+      onExitEditMode == null ? void 0 : onExitEditMode(originalValue, newValue);
+      requestAnimationFrame(() => {
+        var _a, _b;
+        (_b = (_a = rootRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
+      });
+    },
+    [onExitEditMode]
+  );
+  const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({
+    anchorQuery: ".vuuFilterPill",
     id,
-    placement: "below",
-    tooltipContent: filterAsReactNode(filter, getLabel)
+    placement: ["above", "below"],
+    tooltipContent: filterAsReactNode(filter, getTooltipTextl)
   });
+  const buttonProps = {
+    onBlur: hideTooltip,
+    onFocus: useCallback8(() => {
+      showTooltip(rootRef);
+    }, [showTooltip])
+  };
   return /* @__PURE__ */ jsxs4(
-    "div",
+    SplitStateButton,
     {
       ...anchorProps,
       ...htmlAttributes,
+      ButtonProps: buttonProps,
+      PopupMenuProps: popupMenuProps,
       className: clsx_default(classBase6, classNameProp),
       "data-text": label,
       ref: rootRef,
@@ -1549,45 +2133,58 @@ var FilterPill = ({
           EditableLabel,
           {
             defaultValue: label,
+            editing,
+            editLabelApiRef,
             onEnterEditMode: handleEnterEditMode,
-            onExitEditMode
+            onExitEditMode: handleExitEditMode
           },
           label
-        ) : /* @__PURE__ */ jsx10("span", { className: `${classBase6}-label`, children: label }),
-        showMenu && onMenuAction ? /* @__PURE__ */ jsx10(
-          FilterPillMenu,
-          {
-            filter,
-            onMenuAction,
-            onMenuClose: handleMenuClose
-          }
-        ) : null,
-        tooltipProps && /* @__PURE__ */ jsx10(Tooltip, { ...tooltipProps })
+        ) : label,
+        tooltipProps && /* @__PURE__ */ jsx10(Tooltip, { className: `${classBase6}-tooltip`, ...tooltipProps })
       ]
     }
   );
 };
 
 // src/filter-bar/FilterBarMenu.tsx
-import { PopupMenu as PopupMenu2 } from "@vuu-ui/vuu-popups";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var FilterBarMenu = () => {
   const classBase9 = "vuuFilterBarMenu";
-  return /* @__PURE__ */ jsx11("div", { className: classBase9, children: /* @__PURE__ */ jsx11(PopupMenu2, { icon: "tune", menuLocation: "filter-bar-menu", tabIndex: -1 }) });
+  return /* @__PURE__ */ jsx11("div", { className: classBase9, children: /* @__PURE__ */ jsx11(PopupMenu, { icon: "tune", menuLocation: "filter-bar-menu", tabIndex: -1 }) });
 };
 
 // src/filter-bar/useFilterBar.ts
-import { dispatchMouseEvent, isMultiClauseFilter as isMultiClauseFilter4 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback10,
+  NullEditAPI
+} from "@vuu-ui/vuu-ui-controls";
+import { getElementDataIndex as getElementDataIndex3, queryClosest as queryClosest4 } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback11,
   useMemo as useMemo7,
   useRef as useRef5,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/filter-bar/useFilterState.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { useControlled } from "@vuu-ui/vuu-ui-controls";
+var getActiveIndices = (indices, toggledIndex, preserveExisting) => {
+  const isActive = indices.includes(toggledIndex);
+  if (isActive) {
+    if (preserveExisting) {
+      return indices.filter((i) => i !== toggledIndex);
+    } else {
+      return [];
+    }
+  } else {
+    if (preserveExisting) {
+      return indices.concat(toggledIndex);
+    } else {
+      return [toggledIndex];
+    }
+  }
+};
 var useFilterState = ({
   defaultFilterState,
   onFilterDeleted,
@@ -1601,14 +2198,14 @@ var useFilterState = ({
     name: "useFilterState",
     state: "FilterState"
   });
-  const handleFilterStateChange = useCallback8(
+  const handleFilterStateChange = useCallback9(
     (s) => {
       setFilterState(s);
       onFilterStateChanged == null ? void 0 : onFilterStateChanged(s);
     },
     [onFilterStateChanged, setFilterState]
   );
-  const handleAddFilter = useCallback8(
+  const handleAddFilter = useCallback9(
     (filter) => {
       const index = filterState.filters.length;
       const newFilters = filterState.filters.concat(filter);
@@ -1621,7 +2218,7 @@ var useFilterState = ({
     },
     [filterState, handleFilterStateChange]
   );
-  const handleDeleteFilter = useCallback8(
+  const handleDeleteFilter = useCallback9(
     (filter) => {
       let index = -1;
       const newFilters = filterState.filters.filter((f, i) => {
@@ -1650,7 +2247,7 @@ var useFilterState = ({
       onFilterDeleted
     ]
   );
-  const handleRenameFilter = useCallback8(
+  const handleRenameFilter = useCallback9(
     (filter, name) => {
       let index = -1;
       const newFilters = filterState.filters.map((f, i) => {
@@ -1667,7 +2264,7 @@ var useFilterState = ({
     },
     [filterState, handleFilterStateChange, onFilterRenamed]
   );
-  const handleChangeFilter = useCallback8(
+  const handleChangeFilter = useCallback9(
     (oldFilter, newFilter) => {
       let index = -1;
       const newFilters = filterState.filters.map((f, i) => {
@@ -1683,14 +2280,23 @@ var useFilterState = ({
     },
     [filterState, handleFilterStateChange]
   );
-  const handleActiveIndicesChange = useCallback8(
-    (indices) => handleFilterStateChange({ ...filterState, activeIndices: indices }),
+  const handleToggleFilterActive = useCallback9(
+    (filterIndex, preserveRemainingFilters = false) => {
+      handleFilterStateChange({
+        ...filterState,
+        activeIndices: getActiveIndices(
+          filterState.activeIndices,
+          filterIndex,
+          preserveRemainingFilters
+        )
+      });
+    },
     [filterState, handleFilterStateChange]
   );
   return {
     activeFilterIndex: filterState.activeIndices,
     filters: filterState.filters,
-    onChangeActiveFilterIndex: handleActiveIndicesChange,
+    onToggleFilterActive: handleToggleFilterActive,
     onAddFilter: handleAddFilter,
     onChangeFilter: handleChangeFilter,
     onDeleteFilter: handleDeleteFilter,
@@ -1707,7 +2313,7 @@ var removeIndexAndDecrementLarger = (indices, idxToRemove) => {
 };
 
 // src/filter-bar/useApplyFilterOnChange.ts
-import { useCallback as useCallback9, useEffect as useEffect3 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect3 } from "react";
 import { filterAsQuery as filterAsQuery2 } from "@vuu-ui/vuu-utils";
 function useApplyFilterOnChange({
   activeFilterIndex,
@@ -1715,7 +2321,7 @@ function useApplyFilterOnChange({
   filters,
   onApplyFilter
 }) {
-  const applyFilter = useCallback9(
+  const applyFilter = useCallback10(
     (filter) => {
       const query = filter ? filterAsQuery2(filter, { columnsByName }) : "";
       onApplyFilter({ filter: query, filterStruct: filter });
@@ -1735,8 +2341,42 @@ function useApplyFilterOnChange({
   }, [activeFilterIndex, applyFilter, filters]);
 }
 
+// src/filter-bar/filterBarFocusManagement.ts
+import {
+  getElementByDataIndex,
+  getElementDataIndex as getElementDataIndex2,
+  queryClosest as queryClosest3
+} from "@vuu-ui/vuu-utils";
+var navigateToNextItem = (el, direction = "fwd") => {
+  const pill = queryClosest3(el, ".vuuFilterPill");
+  if (pill) {
+    const index = getElementDataIndex2(pill);
+    if (typeof index === "number") {
+      const target = direction === "fwd" ? getElementByDataIndex(pill.parentElement, index + 1) : getElementByDataIndex(pill.parentElement, index - 1);
+      if (target) {
+        target.focus();
+      } else if (direction === "fwd") {
+        console.log("to the button");
+        const filterBar = queryClosest3(el, ".vuuFilterBar");
+        const addButton = filterBar == null ? void 0 : filterBar.querySelector(
+          ".vuuFilterBar-add"
+        );
+        addButton == null ? void 0 : addButton.focus();
+      }
+    }
+  } else {
+    const button = queryClosest3(el, ".vuuFilterBar-add");
+    if (button) {
+      const filterBar = queryClosest3(el, ".vuuFilterBar");
+      const target = filterBar == null ? void 0 : filterBar.querySelector(
+        ".vuuFilterPill:last-child"
+      );
+      target == null ? void 0 : target.focus();
+    }
+  }
+};
+
 // src/filter-bar/useFilterBar.ts
-var EMPTY_FILTER_CLAUSE = {};
 var useFilterBar = ({
   columnDescriptors,
   containerRef,
@@ -1745,16 +2385,14 @@ var useFilterBar = ({
   onApplyFilter,
   onFilterDeleted,
   onFilterRenamed,
-  onFilterStateChanged,
-  showMenu: showMenuProp
+  onFilterStateChanged
 }) => {
   const addButtonRef = useRef5(null);
-  const editingFilter = useRef5();
-  const [showMenu, setShowMenu] = useState6(showMenuProp);
-  const [editFilter, setEditFilter] = useState6();
-  const [promptProps, setPromptProps] = useState6(null);
+  const [interactedFilterState, setInteractedFilterState] = useState7();
+  const [promptProps, setPromptProps] = useState7(null);
+  const editPillLabelAPI = useRef5(NullEditAPI);
   const columnsByName = useMemo7(
-    () => columnDescriptorsByName(columnDescriptors),
+    () => columnDescriptorsByName2(columnDescriptors),
     [columnDescriptors]
   );
   const {
@@ -1764,7 +2402,7 @@ var useFilterBar = ({
     onChangeFilter,
     onDeleteFilter,
     onRenameFilter,
-    onChangeActiveFilterIndex
+    onToggleFilterActive
   } = useFilterState({
     defaultFilterState,
     filterState,
@@ -1778,47 +2416,21 @@ var useFilterBar = ({
     filters,
     onApplyFilter
   });
-  const editPillLabel = useCallback10(
-    (index) => {
-      requestAnimationFrame(() => {
-        var _a;
-        const pills = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(
-          ".vuuFilterPill"
-        );
-        if (pills == null ? void 0 : pills[index]) {
-          const editableLabel = pills[index].querySelector(
-            ".vuuEditableLabel"
-          );
-          if (editableLabel) {
-            dispatchMouseEvent(editableLabel, "dblclick");
-          }
-        }
+  const editPillLabel = useCallback11((index, filter) => {
+    setTimeout(() => {
+      setInteractedFilterState({
+        filter,
+        index,
+        state: "rename"
       });
-    },
-    [containerRef]
-  );
-  const focusFilterClause = useCallback10(
-    (_ = 0) => {
+    }, 100);
+  }, []);
+  const focusFilterPill = useCallback11(
+    (index = 0) => {
       requestAnimationFrame(() => {
         var _a;
-        const input = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
-          ".vuuFilterClause .saltInput-input"
-        );
-        if (input) {
-          input.focus();
-        }
-      });
-    },
-    [containerRef]
-  );
-  const focusFilterPill = useCallback10(
-    (index) => {
-      requestAnimationFrame(() => {
-        var _a, _b;
-        const target = typeof index === "number" ? (_a = containerRef.current) == null ? void 0 : _a.querySelector(
-          `.vuuOverflowContainer-item[data-index="${index}"] .vuuFilterPill`
-        ) : (_b = containerRef.current) == null ? void 0 : _b.querySelector(
-          ".vuuFilterPill[tabindex]"
+        const target = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+          `.vuuFilterPill[data-index="${index}"] button`
         );
         if (target) {
           target.focus();
@@ -1827,7 +2439,7 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const deleteConfirmed = useCallback10(
+  const deleteConfirmed = useCallback11(
     (filter) => {
       onDeleteFilter(filter);
       requestAnimationFrame(() => {
@@ -1860,7 +2472,7 @@ var useFilterBar = ({
     },
     [deleteConfirmed, focusFilterPill]
   );
-  const deleteFilter = useCallback10(
+  const deleteFilter = useCallback11(
     (filter, withPrompt) => {
       if (withPrompt) {
         setPromptProps(getDeletePrompt(filter));
@@ -1870,23 +2482,19 @@ var useFilterBar = ({
     },
     [deleteConfirmed, getDeletePrompt]
   );
-  const handleBeginEditFilterName = useCallback10((filter) => {
-    editingFilter.current = filter;
-  }, []);
-  const handleExitEditFilterName = useCallback10(
+  const handleExitEditFilterName = useCallback11(
     (_, editedValue = "") => {
-      if (editingFilter.current) {
-        const indexOfEditedFilter = onRenameFilter(
-          editingFilter.current,
-          editedValue
-        );
-        editingFilter.current = void 0;
+      if ((interactedFilterState == null ? void 0 : interactedFilterState.state) === "rename" && interactedFilterState.filter) {
+        const { filter } = interactedFilterState;
+        const indexOfEditedFilter = onRenameFilter(filter, editedValue);
+        setInteractedFilterState(void 0);
         focusFilterPill(indexOfEditedFilter);
       }
+      setInteractedFilterState(void 0);
     },
-    [focusFilterPill, onRenameFilter]
+    [focusFilterPill, interactedFilterState, onRenameFilter]
   );
-  const handlePillMenuAction = useCallback10(
+  const handlePillMenuAction = useCallback11(
     ({ menuId, options }) => {
       switch (menuId) {
         case "delete-filter": {
@@ -1897,201 +2505,125 @@ var useFilterBar = ({
         case "rename-filter": {
           const { filter } = options;
           const index = filters.indexOf(filter);
-          editPillLabel(index);
+          editPillLabel(index, filter);
           return true;
         }
         case "edit-filter": {
           const { filter } = options;
-          editingFilter.current = filter;
-          setEditFilter(filter);
-          focusFilterClause();
+          setInteractedFilterState({
+            filter,
+            index: filters.indexOf(filter),
+            state: "edit"
+          });
           return true;
         }
         default:
           return false;
       }
     },
-    [deleteFilter, editPillLabel, filters, focusFilterClause]
+    [deleteFilter, editPillLabel, filters]
   );
-  const addIfNewElseUpdate = useCallback10(
-    (edited, existing) => {
+  const handlePillKeyDown = useCallback11((e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      navigateToNextItem(e.target, e.key === "ArrowLeft" ? "bwd" : "fwd");
+    }
+  }, []);
+  const addIfNewElseUpdate = useCallback11(
+    (newOrUpdatedFilter, existing) => {
       if (existing === void 0) {
-        const idx = onAddFilter(edited);
-        editPillLabel(idx);
+        const idx = onAddFilter(newOrUpdatedFilter);
+        focusFilterPill(idx);
+        editPillLabel(idx, newOrUpdatedFilter);
       } else {
-        onChangeFilter(existing, edited);
+        const idx = onChangeFilter(existing, newOrUpdatedFilter);
+        focusFilterPill(idx);
       }
     },
-    [editPillLabel, onAddFilter, onChangeFilter]
+    [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter]
   );
-  const handleMenuAction = useCallback10(
-    ({ menuId }) => {
-      switch (menuId) {
-        case "apply-save": {
-          const editedFilter = editFilter;
-          addIfNewElseUpdate(editedFilter, editingFilter.current);
-          setEditFilter(void 0);
-          editingFilter.current = void 0;
-          setShowMenu(false);
-          return true;
-        }
-        case "and-clause": {
-          const newFilter = addClause(
-            editFilter,
-            EMPTY_FILTER_CLAUSE
-          );
-          setEditFilter(newFilter);
-          setShowMenu(false);
-          return true;
+  const filterSaveHandler = useCallback11(
+    (filter) => {
+      if (interactedFilterState) {
+        const { filter: existingFilter } = interactedFilterState;
+        setInteractedFilterState(void 0);
+        addIfNewElseUpdate(filter, existingFilter);
+      }
+    },
+    [addIfNewElseUpdate, interactedFilterState]
+  );
+  const handlePillClick = useCallback11(
+    (e) => {
+      const isEditing = e.target.querySelector(
+        ".vuuEditableLabel-editing"
+      );
+      if (!isEditing) {
+        const pill = queryClosest4(e.target, ".vuuFilterPill");
+        if (pill) {
+          const index = getElementDataIndex3(pill);
+          onToggleFilterActive(index, e.shiftKey);
         }
-        case "or-clause":
-          setEditFilter(
-            (filter) => addClause(filter, EMPTY_FILTER_CLAUSE, {
-              combineWith: "or"
-            })
-          );
-          setShowMenu(false);
-          return true;
-        default:
-          return false;
       }
     },
-    [editFilter, addIfNewElseUpdate]
+    [onToggleFilterActive]
   );
-  const handleClickAddFilter = useCallback10(() => {
-    setEditFilter({});
-  }, [setEditFilter]);
-  const handleClickRemoveFilter = useCallback10(() => {
-    setEditFilter(void 0);
-  }, []);
   const pillProps = {
-    onBeginEdit: handleBeginEditFilterName,
+    editLabelApiRef: editPillLabelAPI,
+    // onBeginEdit: handleBeginEditFilterName,
+    onClick: handlePillClick,
+    onKeyDown: handlePillKeyDown,
     onMenuAction: handlePillMenuAction,
     onExitEditMode: handleExitEditFilterName
   };
-  const handleChangeFilterClause = useCallback10(
-    (idx) => (filterClause) => {
-      if (filterClause !== void 0) {
-        setEditFilter((ef) => replaceClause(ef, filterClause, idx));
-        setShowMenu(true);
-      }
-    },
-    []
-  );
-  const handleCancelFilterClause = useCallback10(
-    (reason) => {
-      if (reason === "Backspace" && isMultiClauseFilter4(editFilter)) {
-        setEditFilter(removeLastClause(editFilter));
-      }
-    },
-    [editFilter]
-  );
-  const handleBlurFilterClause = useCallback10((e) => {
-    const target = e.target;
-    const relatedTarget = e.relatedTarget;
-    const filterClause = target.closest(".vuuFilterClause");
-    if (filterClause == null ? void 0 : filterClause.contains(relatedTarget)) {
-    } else {
-      const dropdownId = target.getAttribute("aria-owns");
-      const dropDown = dropdownId ? document.getElementById(dropdownId) : null;
-      if (dropDown == null ? void 0 : dropDown.contains(relatedTarget)) {
-      } else {
-        setShowMenu(true);
-      }
-    }
-  }, []);
-  const handleFocusFilterClause = useCallback10(() => {
-    setShowMenu(false);
+  const handleClickAddButton = useCallback11(() => {
+    setInteractedFilterState({
+      index: -1,
+      state: "create"
+    });
   }, []);
-  const handleKeyDownFilterbar = useCallback10(
-    (evt) => {
-      if (evt.key === "Escape" && editFilter !== void 0) {
-        setEditFilter(void 0);
-        requestAnimationFrame(() => {
-        });
-      }
-    },
-    [editFilter]
-  );
-  const handleKeyDownMenu = useCallback10(
-    (evt) => {
-      var _a;
-      const { current: container } = containerRef;
-      if (evt.key === "Backspace" && container) {
-        evt.preventDefault();
-        const fields = Array.from(
-          container.querySelectorAll(".vuuFilterClauseField")
-        );
-        if (fields.length > 0) {
-          const field = fields.at(-1);
-          (_a = field == null ? void 0 : field.querySelector("input")) == null ? void 0 : _a.focus();
-        }
-        setShowMenu(false);
-      } else if (evt.key === "Tab") {
-        if (evt.shiftKey && container) {
-          const clearButtons = Array.from(
-            container.querySelectorAll(".vuuFilterClause-clearButton")
-          );
-          if (clearButtons.length > 0) {
-            const clearButton = clearButtons.at(-1);
-            setTimeout(() => {
-              clearButton.focus();
-            }, 100);
-          }
-        } else {
-          console.log("apply current selection");
-        }
-      }
-    },
-    [containerRef]
-  );
-  const handleAddButtonKeyDown = useCallback10((evt) => {
+  const handleKeyDownAddButton = useCallback11((evt) => {
     if (evt.key === "ArrowLeft") {
-      console.log("navgiate to the Toolbar");
+      navigateToNextItem(evt.target, "bwd");
     }
   }, []);
-  const handlePillNavigationOutOfBounds = useCallback10((direction) => {
+  const handleCancelEdit = useCallback11(() => {
     var _a;
-    if (direction === "end") {
-      (_a = addButtonRef.current) == null ? void 0 : _a.focus();
+    if (interactedFilterState) {
+      const { index } = interactedFilterState;
+      if (index === -1) {
+        (_a = addButtonRef.current) == null ? void 0 : _a.focus();
+      } else {
+        focusFilterPill(index);
+      }
+      setInteractedFilterState(void 0);
     }
-  }, []);
+  }, [focusFilterPill, interactedFilterState]);
   const addButtonProps = {
     ref: addButtonRef,
-    onKeyDown: handleAddButtonKeyDown
+    onClick: handleClickAddButton,
+    onKeyDown: handleKeyDownAddButton
   };
   return {
     activeFilterIndex,
     addButtonProps,
     columnsByName,
-    editFilter,
     filters,
-    onBlurFilterClause: handleBlurFilterClause,
-    onCancelFilterClause: handleCancelFilterClause,
-    onChangeActiveFilterIndex,
-    onClickAddFilter: handleClickAddFilter,
-    onClickRemoveFilter: handleClickRemoveFilter,
-    onChangeFilterClause: handleChangeFilterClause,
-    onFocusFilterClause: handleFocusFilterClause,
-    onKeyDownFilterbar: handleKeyDownFilterbar,
-    onKeyDownMenu: handleKeyDownMenu,
-    onMenuAction: handleMenuAction,
-    onNavigateOutOfBounds: handlePillNavigationOutOfBounds,
+    interactedFilterState,
+    onCancelEdit: handleCancelEdit,
+    onSave: filterSaveHandler,
     pillProps,
-    promptProps,
-    showMenu
+    promptProps
   };
 };
-function columnDescriptorsByName(columns) {
+function columnDescriptorsByName2(columns) {
   return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
 }
 
 // src/filter-bar/FilterBar.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-import { createElement } from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
 var classBase7 = "vuuFilterBar";
 var FilterBar = ({
-  FilterClauseEditorProps: FilterClauseEditorProps2,
+  FilterClauseEditorProps,
   className: classNameProp,
   columnDescriptors,
   defaultFilterState,
@@ -2100,7 +2632,6 @@ var FilterBar = ({
   onFilterDeleted,
   onFilterRenamed,
   onFilterStateChanged,
-  showMenu: showMenuProp = false,
   tableSchema,
   ...htmlAttributes
 }) => {
@@ -2109,22 +2640,12 @@ var FilterBar = ({
     activeFilterIndex,
     addButtonProps,
     columnsByName,
-    editFilter,
     filters,
-    onBlurFilterClause,
-    onCancelFilterClause,
-    onClickAddFilter,
-    onClickRemoveFilter,
-    onChangeFilterClause,
-    onChangeActiveFilterIndex,
-    onFocusFilterClause,
-    onNavigateOutOfBounds,
-    onKeyDownFilterbar,
-    onKeyDownMenu,
-    onMenuAction,
+    interactedFilterState,
+    onCancelEdit,
+    onSave,
     pillProps,
-    promptProps,
-    showMenu
+    promptProps
   } = useFilterBar({
     containerRef: rootRef,
     columnDescriptors,
@@ -2133,126 +2654,85 @@ var FilterBar = ({
     onApplyFilter,
     onFilterStateChanged,
     onFilterDeleted,
-    onFilterRenamed,
-    showMenu: showMenuProp
-  });
-  const className = clsx_default(classBase7, classNameProp, {
-    [`${classBase7}-display`]: editFilter === void 0,
-    [`${classBase7}-edit`]: editFilter !== void 0
+    onFilterRenamed
   });
+  const className = clsx_default(classBase7, classNameProp);
+  const indexOfFilterBeingRenamed = (interactedFilterState == null ? void 0 : interactedFilterState.state) === "rename" ? interactedFilterState.index : -1;
+  const filterModel = (interactedFilterState == null ? void 0 : interactedFilterState.state) === "edit" || (interactedFilterState == null ? void 0 : interactedFilterState.state) === "create" ? new FilterModel(interactedFilterState.filter) : void 0;
   const getChildren2 = () => {
     const items = [];
-    if (editFilter === void 0) {
-      filters.forEach((filter, i) => {
-        items.push(
-          /* @__PURE__ */ createElement(
-            FilterPill,
-            {
-              ...pillProps,
-              columnsByName,
-              filter,
-              key: `filter-${i}`
-            }
-          )
-        );
-      });
-      return items;
-    } else if (editFilter) {
-      const filterClauses2 = filterClauses(editFilter);
+    filters.forEach((filter, i) => {
       items.push(
-        /* @__PURE__ */ jsx12("div", { className: `${classBase7}-Editor`, children: filterClauses2.map((f, i) => /* @__PURE__ */ createElement(
-          FilterClauseEditor,
+        /* @__PURE__ */ createElement2(
+          FilterPill,
           {
-            ...FilterClauseEditorProps2,
+            ...pillProps,
+            editing: indexOfFilterBeingRenamed === i,
             columnsByName,
-            filterClause: f,
-            key: `editor-${i}`,
-            onCancel: onCancelFilterClause,
-            onChange: onChangeFilterClause(i),
-            onBlur: onBlurFilterClause,
-            onFocus: onFocusFilterClause,
-            tableSchema
+            "data-index": i,
+            filter,
+            key: `filter-${i}`,
+            selected: activeFilterIndex.includes(i)
           }
-        )) }, `editor`)
-      );
-      if (showMenu) {
-        items.push(
-          /* @__PURE__ */ jsx12(
-            FilterBuilderMenu,
-            {
-              onMenuAction,
-              ListProps: { onKeyDownCapture: onKeyDownMenu }
-            },
-            "menu"
-          )
-        );
-      }
-      items.push(
-        /* @__PURE__ */ jsx12(
-          Button2,
-          {
-            className: `${classBase7}-remove`,
-            "data-align": "right",
-            "data-icon": "cross",
-            onClick: onClickRemoveFilter,
-            variant: "primary"
-          },
-          "filter-remove"
         )
       );
-      return items;
-    }
+    });
+    return items;
   };
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      ...htmlAttributes,
-      className,
-      onKeyDown: onKeyDownFilterbar,
-      ref: rootRef,
-      children: [
-        /* @__PURE__ */ jsx12(FilterBarMenu, {}),
-        /* @__PURE__ */ jsx12(
-          Toolbar,
-          {
-            activeItemIndex: activeFilterIndex,
-            onActiveChange: onChangeActiveFilterIndex,
-            onNavigateOutOfBounds,
-            selectionStrategy: "multiple-special-key",
-            children: getChildren2()
-          }
-        ),
-        editFilter === void 0 ? /* @__PURE__ */ createElement(
-          Button2,
-          {
-            ...addButtonProps,
-            className: `${classBase7}-add`,
-            "data-icon": "plus",
-            "data-selectable": false,
-            key: "filter-add",
-            onClick: onClickAddFilter,
-            tabIndex: 0,
-            variant: "primary"
-          }
-        ) : null,
-        promptProps ? /* @__PURE__ */ jsx12(
-          Prompt,
+  return /* @__PURE__ */ jsxs5("div", { ...htmlAttributes, className, ref: rootRef, children: [
+    /* @__PURE__ */ jsx12(FilterBarMenu, {}),
+    /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx12("div", { className: `${classBase7}-filters`, children: getChildren2() }),
+      /* @__PURE__ */ createElement2(
+        IconButton,
+        {
+          ...addButtonProps,
+          className: clsx_default("vuuIconButton", `${classBase7}-add`),
+          "data-selectable": false,
+          icon: "plus",
+          key: "filter-add",
+          tabIndex: 0,
+          variant: "primary"
+        }
+      )
+    ] }),
+    filterModel && tableSchema && /* @__PURE__ */ jsx12(Portal, { children: /* @__PURE__ */ jsx12(
+      Popup,
+      {
+        anchorElement: rootRef,
+        offsetTop: -10,
+        offsetLeft: 20,
+        placement: "below",
+        children: /* @__PURE__ */ jsx12(
+          FilterEditor,
           {
-            ...promptProps,
-            PopupProps: {
-              anchorElement: rootRef,
-              offsetTop: 16,
-              placement: "below-center"
-            }
-          }
-        ) : null
-      ]
-    }
-  );
+            FilterClauseEditorProps,
+            columnDescriptors,
+            onCancel: onCancelEdit,
+            onSave,
+            filter: interactedFilterState == null ? void 0 : interactedFilterState.filter,
+            tableSchema
+          },
+          "filter-editor"
+        )
+      }
+    ) }),
+    promptProps ? /* @__PURE__ */ jsx12(
+      Prompt,
+      {
+        ...promptProps,
+        PopupProps: {
+          anchorElement: rootRef,
+          offsetTop: 16,
+          placement: "below-center"
+        }
+      }
+    ) : null
+  ] });
 };
 
 // src/filter-input/FilterInput.tsx
-import { Button as Button3 } from "@salt-ds/core";
+import { Button as Button2 } from "@salt-ds/core";
 
 // src/filter-input/useCodeMirrorEditor.ts
 import {
@@ -5252,7 +5732,7 @@ var parser = LRParser.deserialize({
 
 // ../vuu-filter-parser/src/FilterTreeWalker.ts
 import {
-  isMultiClauseFilter as isMultiClauseFilter5,
+  isMultiClauseFilter as isMultiClauseFilter6,
   isMultiValueFilter as isMultiValueFilter4,
   isSingleValueFilter as isSingleValueFilter3
 } from "@vuu-ui/vuu-utils";
@@ -5262,7 +5742,7 @@ var FilterExpression = class {
     __privateAdd(this, _filter, void 0);
   }
   setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter5(filter) && filter.op === op) {
+    if (isMultiClauseFilter6(filter) && filter.op === op) {
       return;
     } else {
       __privateSet(this, _filter, {
@@ -5274,14 +5754,14 @@ var FilterExpression = class {
   add(filter) {
     if (__privateGet(this, _filter) === void 0) {
       __privateSet(this, _filter, filter);
-    } else if (isMultiClauseFilter5(__privateGet(this, _filter))) {
+    } else if (isMultiClauseFilter6(__privateGet(this, _filter))) {
       __privateGet(this, _filter).filters.push(filter);
     } else {
       throw Error(`Invalid filter passed to FilterExpression`);
     }
   }
   setColumn(column, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter5(filter)) {
+    if (isMultiClauseFilter6(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setColumn(column, target);
@@ -5291,7 +5771,7 @@ var FilterExpression = class {
     }
   }
   setOp(value, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter5(filter)) {
+    if (isMultiClauseFilter6(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setOp(value, target);
@@ -5302,7 +5782,7 @@ var FilterExpression = class {
   }
   setValue(value, filter = __privateGet(this, _filter)) {
     var _a;
-    if (isMultiClauseFilter5(filter)) {
+    if (isMultiClauseFilter6(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setValue(value, target);
@@ -5492,7 +5972,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback11 } from "react";
+import { useCallback as useCallback12 } from "react";
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -5562,7 +6042,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = useCallback11(
+  const makeSuggestions = useCallback12(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -5573,7 +6053,7 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return useCallback11(
+  return useCallback12(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -5874,7 +6354,7 @@ var FilterInput = ({
   });
   return /* @__PURE__ */ jsxs6("div", { ...props, className: classBase8, children: [
     /* @__PURE__ */ jsx13(
-      Button3,
+      Button2,
       {
         className: `${classBase8}-FilterButton`,
         "data-icon": iconName,
@@ -5883,7 +6363,7 @@ var FilterInput = ({
     ),
     /* @__PURE__ */ jsx13("div", { className: `${classBase8}-Editor`, ref: editorRef }),
     /* @__PURE__ */ jsx13(
-      Button3,
+      Button2,
       {
         className: `${classBase8}-ClearButton`,
         "data-icon": "close-circle",
@@ -5906,7 +6386,7 @@ import {
   getTypeaheadParams,
   useTypeaheadSuggestions as useTypeaheadSuggestions2
 } from "@vuu-ui/vuu-data-react";
-import { useCallback as useCallback12, useRef as useRef8 } from "react";
+import { useCallback as useCallback13, useRef as useRef8 } from "react";
 
 // src/filter-input/filterInfo.ts
 import { createEl } from "@vuu-ui/vuu-utils";
@@ -6004,7 +6484,7 @@ var useFilterSuggestionProvider = ({
 }) => {
   const latestSuggestionsRef = useRef8();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = useCallback12(
+  const getSuggestions = useCallback13(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -6094,7 +6574,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = useCallback12(
+  const isPartialMatch = useCallback13(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0
@@ -6140,10 +6620,12 @@ export {
   EQUALS,
   ExpandoCombobox,
   FilterBar,
-  FilterBuilderMenu,
-  FilterClauseEditor,
-  FilterClauseTextValueEditor,
+  FilterClause,
+  FilterClauseModel,
+  FilterClauseValueEditorText,
+  FilterEditor,
   FilterInput,
+  FilterModel,
   FilterPill,
   GREATER_THAN,
   IN,
@@ -6162,7 +6644,6 @@ export {
   overrideColName,
   removeFilter,
   removeLastClause,
-  replaceClause,
   saveLocalEntity,
   splitFilterOnColumn,
   updateFilter,