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

package/cjs/index.js

@@ -43,10 +43,12 @@ __export(src_exports, {
   EQUALS: () => EQUALS,
   ExpandoCombobox: () => ExpandoCombobox,
   FilterBar: () => FilterBar,
-  FilterBuilderMenu: () => FilterBuilderMenu,
-  FilterClauseEditor: () => FilterClauseEditor,
-  FilterClauseTextValueEditor: () => FilterClauseTextValueEditor,
+  FilterClause: () => FilterClause,
+  FilterClauseModel: () => FilterClauseModel,
+  FilterClauseValueEditorText: () => FilterClauseValueEditorText,
+  FilterEditor: () => FilterEditor,
   FilterInput: () => FilterInput,
+  FilterModel: () => FilterModel,
   FilterPill: () => FilterPill,
   GREATER_THAN: () => GREATER_THAN,
   IN: () => IN,
@@ -65,7 +67,6 @@ __export(src_exports, {
   overrideColName: () => overrideColName,
   removeFilter: () => removeFilter,
   removeLastClause: () => removeLastClause,
-  replaceClause: () => replaceClause,
   saveLocalEntity: () => saveLocalEntity,
   splitFilterOnColumn: () => splitFilterOnColumn,
   updateFilter: () => updateFilter,
@@ -74,10 +75,220 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/FilterModel.ts
+var import_vuu_utils = require("@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 ((0, import_vuu_utils.isMultiValueFilter)(filterClause)) {
+    return hasValues(filterClause);
+  } else if ((0, import_vuu_utils.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 ((0, import_vuu_utils.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 import_vuu_utils.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 ((0, import_vuu_utils.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 import_vuu_utils.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 ((0, import_vuu_utils.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
-var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
-var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
-var import_core2 = require("@salt-ds/core");
+var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
+var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -101,66 +312,22 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/filter-bar/FilterBar.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
-// src/filter-builder-menu/FilterBuilderMenu.tsx
-var import_react = require("react");
-var import_vuu_popups = require("@vuu-ui/vuu-popups");
-var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime = require("react/jsx-runtime");
-var classBase = "vuuFilterBuilderMenu";
-var FilterBuilderMenu = ({
-  ListProps: ListProps2,
-  onMenuAction
-}) => {
-  const ref = (0, import_react.useRef)(null);
-  const listRef = (0, import_react.useCallback)((el) => {
-    if (el) {
-      requestAnimationFrame(() => {
-        el.focus();
-      });
-    }
-  }, []);
-  const handleSelect = (0, import_react.useCallback)(
-    (evt, selected) => {
-      const {
-        props: { "data-action": action }
-      } = selected;
-      onMenuAction({ type: "menu-action", menuId: action, options: {} });
-    },
-    [onMenuAction]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${classBase}-trigger`, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vuu_popups.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vuu_popups.PopupComponent, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_vuu_ui_controls.List,
-      {
-        ...ListProps2,
-        className: `${classBase}List`,
-        defaultHighlightedIndex: 0,
-        itemHeight: 22,
-        ref: listRef,
-        onSelect: handleSelect,
-        style: { position: "relative" },
-        width: 100,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vuu_ui_controls.ListItem, { "data-action": "apply-save", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "vuuMenuButton", children: "APPLY AND SAVE" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vuu_ui_controls.ListItem, { "data-action": "and-clause", children: "AND" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vuu_ui_controls.ListItem, { "data-action": "or-clause", children: "OR" })
-        ]
-      }
-    ) }) })
-  ] });
-};
+// src/filter-editor/FilterEditor.tsx
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+
+// src/filter-clause/FilterClause.tsx
+var import_react6 = require("react");
 
 // src/filter-clause/ExpandoCombobox.tsx
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var classBase2 = "vuuExpandoCombobox";
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var classBase = "vuuExpandoCombobox";
 var NO_INPUT_PROPS = {};
-var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
+var ExpandoCombobox = (0, import_react.forwardRef)(function ExpandoCombobox2({
   className: classNameProp,
   InputProps: InputPropsProp = NO_INPUT_PROPS,
   ListProps: ListPropsProp,
@@ -173,10 +340,10 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
   value = "",
   ...props
 }, forwardedRef) {
-  const [text, setText] = (0, import_react2.useState)(value);
-  const { itemToString = import_vuu_utils.itemToString } = props;
-  const initialValue = (0, import_react2.useRef)(value);
-  const itemsToString = (0, import_react2.useCallback)(
+  const [text, setText] = (0, import_react.useState)(value);
+  const { itemToString = import_vuu_utils2.itemToString } = props;
+  const initialValue = (0, import_react.useRef)(value);
+  const itemsToString = (0, import_react.useCallback)(
     (items) => {
       const [first, ...rest] = items;
       if (rest.length) {
@@ -187,7 +354,7 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
     },
     [itemToString]
   );
-  const handleInputChange = (0, import_react2.useCallback)(
+  const handleInputChange = (0, import_react.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
       setText(value2);
@@ -195,15 +362,15 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
     },
     [onInputChange]
   );
-  const handleSetSelectedText = (0, import_react2.useCallback)((text2) => {
+  const handleSetSelectedText = (0, import_react.useCallback)((text2) => {
     setText(text2);
   }, []);
-  const [InputProps, ListProps2] = (0, import_react2.useMemo)(() => {
+  const [InputProps, ListProps] = (0, import_react.useMemo)(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
         ...restInputProps,
-        className: `${classBase2}-Input`,
+        className: `${classBase}-Input`,
         endAdornment: null,
         inputProps: {
           ...inputProps,
@@ -225,7 +392,7 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
       }
     ];
   }, [InputPropsProp, handleInputChange, ListPropsProp]);
-  const handleSelectionChange = (0, import_react2.useCallback)(
+  const handleSelectionChange = (0, import_react.useCallback)(
     (_, selected) => {
       if (Array.isArray(selected)) {
         onSelectionChange == null ? void 0 : onSelectionChange(
@@ -242,7 +409,7 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
     },
     [itemToString, onSelectionChange]
   );
-  const getDefaultSelected = () => {
+  const getSelected = () => {
     if (initialValue.current === void 0) {
       return void 0;
     } else if (Array.isArray(initialValue.current)) {
@@ -258,23 +425,23 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
   const popupProps = {
     minWidth: "fit-content"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default(classBase2, classNameProp),
+      className: clsx_default(classBase, classNameProp),
       "data-text": text,
       ref: forwardedRef,
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_vuu_ui_controls2.ComboBox,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_vuu_ui_controls.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,
@@ -287,76 +454,62 @@ var ExpandoCombobox = (0, import_react2.forwardRef)(function ExpandoCombobox2({
   );
 });
 
-// src/filter-clause/FilterClauseEditor.tsx
-var import_core = require("@salt-ds/core");
-var import_react7 = require("react");
-
-// src/filter-clause/operator-utils.ts
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var textOperators = ["=", "in", "!=", "starts", "ends"];
-var numericperators = ["=", "!=", ">", ">=", "<", "<="];
-var getOperators = (column) => {
-  if ((0, import_vuu_utils2.isTextColumn)(column)) {
-    return textOperators;
-  } else if ((0, import_vuu_utils2.isNumericColumn)(column)) {
-    return numericperators;
-  } else {
-    throw Error("getOperators only supports text and numeric columns");
-  }
-};
-
-// src/filter-clause/NumericInput.tsx
-var import_react3 = require("react");
-var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+// src/filter-clause/value-editors/FilterClauseValueEditorNumber.tsx
+var import_react2 = require("react");
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var NumericInput = (0, import_react3.forwardRef)(function NumericInput2({
-  InputProps,
-  className,
-  onInputComplete,
-  value: valueProp
-}, forwardedRef) {
-  const [value, setValue] = (0, import_react3.useState)(
-    (0, import_vuu_utils3.isValidNumber)(valueProp) ? valueProp.toString() : ""
-  );
-  const handleChange = (0, import_react3.useCallback)((evt) => {
-    const { value: value2 } = evt.target;
-    const numericValue = parseFloat(value2);
-    if ((0, import_vuu_utils3.isValidNumber)(numericValue)) {
-      console.log("its valid");
-    }
-    setValue(value2);
-  }, []);
-  const handleKeyDown = (0, import_react3.useCallback)(
-    (evt) => {
-      if (evt.key === "Enter") {
-        const { value: value2 } = evt.target;
-        const numericValue = parseFloat(value2);
-        if ((0, import_vuu_utils3.isValidNumber)(numericValue)) {
-          onInputComplete(numericValue);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FilterClauseValueEditorNumber = (0, import_react2.forwardRef)(
+  function FilterClauseNumericValueEditor({
+    InputProps,
+    className,
+    "data-field": dataField,
+    onChangeValue,
+    value: valueProp
+  }, forwardedRef) {
+    const [value, setValue] = (0, import_react2.useState)(
+      (0, import_vuu_utils3.isValidNumber)(valueProp) ? valueProp.toString() : ""
+    );
+    const handleChange = (0, import_react2.useCallback)((evt) => {
+      const { value: value2 } = evt.target;
+      const numericValue = parseFloat(value2);
+      if ((0, import_vuu_utils3.isValidNumber)(numericValue)) {
+        console.log("its valid");
+      }
+      setValue(value2);
+    }, []);
+    const handleKeyDown = (0, import_react2.useCallback)(
+      (evt) => {
+        if (evt.key === "Enter" || evt.key === "Tab") {
+          const { value: value2 } = evt.target;
+          const numericValue = parseFloat(value2);
+          if ((0, import_vuu_utils3.isValidNumber)(numericValue)) {
+            onChangeValue(numericValue);
+          }
         }
+      },
+      [onChangeValue]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_vuu_ui_controls2.ExpandoInput,
+      {
+        ...InputProps,
+        className,
+        "data-field": dataField,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: forwardedRef,
+        value
       }
-    },
-    [onInputComplete]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_vuu_ui_controls3.ExpandoInput,
-    {
-      ...InputProps,
-      className,
-      value,
-      ref: forwardedRef,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown
-    }
-  );
-});
+    );
+  }
+);
 
-// src/filter-clause/FilterClauseTextValueEditor.tsx
-var import_react4 = require("react");
+// src/filter-clause/value-editors/FilterClauseValueEditorText.tsx
+var import_react3 = require("react");
 var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
-var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var selectionKeys = ["Enter", " "];
 var getVuuTable = (schemaTable) => {
   if (schemaTable.session) {
@@ -367,170 +520,186 @@ var getVuuTable = (schemaTable) => {
   }
 };
 var NO_DATA_MATCH = ["No matching data"];
-var FilterClauseTextValueEditor = (0, import_react4.forwardRef)(function TextInput({
-  InputProps: InputPropsProp = {},
-  className,
-  column,
-  "data-field": dataField,
-  onDeselect,
-  onInputComplete,
-  operator,
-  suggestionProvider = import_vuu_data_react.useTypeaheadSuggestions,
-  table,
-  value
-}, forwardedRef) {
-  var _a;
-  const isMultiValue = operator === "in";
-  const [valueInputValue, setValueInputValue] = (0, import_react4.useState)(
-    (_a = value == null ? void 0 : value.toString()) != null ? _a : ""
-  );
-  const [typeaheadValues, setTypeaheadValues] = (0, import_react4.useState)([]);
-  const getSuggestions = suggestionProvider();
-  const handleSingleValueSelectionChange = (0, import_react4.useCallback)(
-    (_, value2) => onInputComplete(value2),
-    [onInputComplete]
-  );
-  const handleMultiValueSelectionChange = (0, import_react4.useCallback)(
-    (_, values) => onInputComplete(values),
-    [onInputComplete]
-  );
-  (0, import_react4.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 = (0, import_react3.forwardRef)(
+  function FilterClauseTextValueEditor({
+    InputProps: InputPropsProp = {},
+    className,
+    column,
+    "data-field": dataField,
+    onDeselect,
+    onChangeValue,
+    operator,
+    suggestionProvider = import_vuu_data_react.useTypeaheadSuggestions,
+    table,
+    value
+  }, forwardedRef) {
+    var _a;
+    const isMultiValue = operator === "in";
+    const [valueInputValue, setValueInputValue] = (0, import_react3.useState)(
+      (_a = value == null ? void 0 : value.toString()) != null ? _a : ""
+    );
+    const [typeaheadValues, setTypeaheadValues] = (0, import_react3.useState)([]);
+    const getSuggestions = suggestionProvider();
+    const handleSingleValueSelectionChange = (0, import_react3.useCallback)(
+      (_, value2) => onChangeValue(value2),
+      [onChangeValue]
+    );
+    const handleMultiValueSelectionChange = (0, import_react3.useCallback)(
+      (_, values) => onChangeValue(values),
+      [onChangeValue]
+    );
+    (0, import_react3.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 = (0, import_react3.useCallback)(
+      (evt) => {
+        const { value: value2 } = evt.target;
+        console.log(`handleInputChange "${value2}"`);
+        setValueInputValue(value2);
+        if (operator === "starts" || operator === "ends") {
+          onChangeValue(value2, false);
+        }
+      },
+      [onChangeValue, operator]
+    );
+    const handleKeyDownFreeTextInput = (0, import_react3.useCallback)(
+      (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 = (0, import_react4.useCallback)((evt) => {
-    const { value: value2 } = evt.target;
-    setValueInputValue(value2);
-  }, []);
-  const InputProps = (0, import_react4.useMemo)(() => {
-    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 = (0, import_react3.useMemo)(() => {
+      if (operator === "starts" || operator === "ends") {
+        const { inputProps, ...restInputProps } = InputPropsProp;
+        return {
+          ...restInputProps,
+          inputProps: {
+            ...inputProps,
+            onKeyDown: handleKeyDownFreeTextInput
           }
+        };
+      } else {
+        return InputPropsProp;
+      }
+    }, [InputPropsProp, handleKeyDownFreeTextInput, operator]);
+    const getValueInputField = (0, import_react3.useCallback)(() => {
+      switch (operator) {
+        case "in":
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ExpandoCombobox,
+            {
+              InputProps,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              source: typeaheadValues,
+              onInputChange: handleInputChange,
+              onSelectionChange: handleMultiValueSelectionChange,
+              ref: forwardedRef,
+              selectionStrategy: "multiple",
+              selectionKeys,
+              value
+            }
+          );
+        case "starts": {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            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 = (0, import_react4.useCallback)(() => {
-    switch (operator) {
-      case "in":
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          ExpandoCombobox,
-          {
-            InputProps,
-            className,
-            "data-field": dataField,
-            initialHighlightedIndex: 0,
-            source: typeaheadValues,
-            onInputChange: handleInputChange,
-            onSelectionChange: handleMultiValueSelectionChange,
-            ref: forwardedRef,
-            selectionStrategy: "multiple",
-            selectionKeys,
-            value
-          }
-        );
-      case "starts": {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          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__ */ (0, import_jsx_runtime3.jsx)(
+            import_vuu_ui_controls3.ExpandoInput,
+            {
+              ...InputProps,
+              className,
+              "data-field": dataField,
+              value: valueInputValue,
+              ref: forwardedRef,
+              onChange: handleInputChange
+            }
+          );
+        default:
+          return typeaheadValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            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__ */ (0, import_jsx_runtime4.jsx)(
-          import_vuu_ui_controls4.ExpandoInput,
-          {
-            ...InputProps,
-            className,
-            "data-field": dataField,
-            value: valueInputValue,
-            ref: forwardedRef,
-            onChange: handleInputChange
-          }
-        );
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          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
 var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 
-// src/filter-clause/DateInput.tsx
-var import_react5 = require("react");
+// src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
+var import_react4 = require("react");
 
 // ../../node_modules/@internationalized/date/dist/import.mjs
 var $14e0f24ef4ac5c92$var$localTimeZone = null;
@@ -557,31 +726,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
-var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+// src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DateInput = (props) => {
-  const { value, onInputComplete, operator } = props;
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FilterClauseValueEditorDate = (props) => {
+  const { InputProps, className, onChangeValue, operator, value } = props;
   const toEpochMilliS = getEpochMillisConverter(operator);
-  const [date, setDate] = (0, import_react5.useState)(
+  const [date, setDate] = (0, import_react4.useState)(
     () => getInitialState(value)
   );
-  const onSelectedDateChange = (0, import_react5.useCallback)((d) => {
-    setDate(d);
-  }, []);
-  const onBlur = (0, import_react5.useCallback)(() => {
-    date && onInputComplete(toEpochMilliS(date));
-  }, [date, onInputComplete, toEpochMilliS]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_vuu_ui_controls5.DatePicker,
-    {
-      className: "vuuFilterClause-DatePicker",
-      selectedDate: date,
+  const onSelectedDateChange = (0, import_react4.useCallback)(
+    (d, source) => {
+      setDate(d);
+      if (d && source === "calendar") {
+        onChangeValue(toEpochMilliS(d));
+      }
+    },
+    [onChangeValue, toEpochMilliS]
+  );
+  const onBlur = (0, import_react4.useCallback)(() => {
+    date && onChangeValue(toEpochMilliS(date));
+  }, [date, onChangeValue, toEpochMilliS]);
+  const handleKeyDown = (0, import_react4.useCallback)(
+    (evt) => {
+      if (evt.key === "Enter") {
+        if (date) {
+          const popup = (0, import_vuu_utils4.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__ */ (0, import_jsx_runtime4.jsx)(
+    import_vuu_ui_controls4.DateInput,
+    {
+      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
     }
   );
 };
@@ -604,9 +794,9 @@ var getEpochMillisConverter = (op) => (date, timezone = $14e0f24ef4ac5c92$export
   }
 };
 
-// src/filter-clause/FilterClauseValueEditor.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var classBase3 = "vuuFilterClause";
+// src/filter-clause/value-editors/FilterClauseValueEditor.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase2 = "vuuFilterClause";
 var FilterClauseValueEditor = ({
   selectedColumn,
   operator,
@@ -621,27 +811,31 @@ var FilterClauseValueEditor = ({
     return null;
   }
   if ((0, import_vuu_utils5.isDateTimeColumn)(selectedColumn)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      DateInput,
+    console.log(`return DateInput`);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      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__ */ (0, import_jsx_runtime6.jsx)(
-        FilterClauseTextValueEditor,
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        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,
@@ -651,13 +845,14 @@ var FilterClauseValueEditor = ({
     case "int":
     case "long":
     case "double":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        NumericInput,
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        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
         }
       );
@@ -667,24 +862,87 @@ var FilterClauseValueEditor = ({
   }
 };
 
-// src/filter-clause/useFilterClauseEditor.ts
+// src/filter-clause/operator-utils.ts
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_react6 = require("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;
+var textOperators = ["=", "in", "!=", "starts", "ends"];
+var numericperators = ["=", "!=", ">", ">=", "<", "<="];
+var getOperators = (column) => {
+  if ((0, import_vuu_utils6.isTextColumn)(column)) {
+    return textOperators;
+  } else if ((0, import_vuu_utils6.isNumericColumn)(column)) {
+    return numericperators;
+  } else {
+    throw Error("getOperators only supports text and numeric columns");
+  }
+};
+
+// src/filter-clause/useFilterClause.ts
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_react5 = require("react");
+
+// src/filter-clause/filterClauseFocusManagement.ts
+var import_vuu_utils7 = require("@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 = (0, import_vuu_utils7.queryClosest)(el, ".vuuFilterClauseField");
+  const filterClause = (0, import_vuu_utils7.queryClosest)(field, ".vuuFilterClause");
+  if (filterClause && field) {
+    return [(0, import_vuu_utils7.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();
@@ -694,20 +952,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(
@@ -719,119 +974,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 = (0, import_vuu_utils7.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 ((0, import_vuu_utils6.isMultiValueFilter)(filterClause)) {
-    return filterClause.values;
-  } else if ((0, import_vuu_utils6.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 = (0, import_react6.useRef)(null);
-  const operatorRef = (0, import_react6.useRef)(null);
-  const [selectedColumn, setSelectedColumn] = (0, import_react6.useState)(filterClause.column ? columnsByName[filterClause.column] : void 0);
-  const [operator, _setOperator] = (0, import_react6.useState)(
-    filterClause.op
-  );
-  const setOperator = (0, import_react6.useCallback)((op) => {
-    _setOperator(op);
-  }, []);
-  const [value, setValue] = (0, import_react6.useState)(
-    getFilterClauseValue(filterClause)
-  );
-  const handleColumnSelect = (0, import_react6.useCallback)(
-    (_, column) => {
-      setSelectedColumn(column != null ? column : void 0);
-      setOperator(void 0);
-      setValue(void 0);
-      setTimeout(() => {
-        focusNextElement();
-      }, 100);
-    },
-    [setOperator]
+  var _a;
+  const [filterClause, setFilterClause] = (0, import_react5.useState)(
+    filterClauseModel.isValid ? filterClauseModel.asFilter() : {}
   );
-  const removeAndNavigateToNextInputIfAtBoundary = (0, import_react6.useCallback)(
+  (0, import_react5.useMemo)(() => {
+    filterClauseModel.on("filterClause", (filterClause2) => {
+      setFilterClause(filterClause2);
+    });
+  }, [filterClauseModel]);
+  const columnRef = (0, import_react5.useRef)(null);
+  const operatorRef = (0, import_react5.useRef)(null);
+  const removeAndNavigateToNextInputIfAtBoundary = (0, import_react5.useCallback)(
     (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 handleColumnSelect = (0, import_react5.useCallback)(
+    (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 = (0, import_react6.useCallback)(
+  const handleOperatorSelect = (0, import_react5.useCallback)(
     (_, selected) => {
       const op = selected;
-      if (op === void 0 || (0, import_vuu_utils6.isValidFilterClauseOp)(op)) {
-        setOperator(op);
+      if (op === void 0 || (0, import_vuu_utils8.isValidFilterClauseOp)(op)) {
+        filterClauseModel.setOp(op);
         focusNextElement();
       } else {
         throw Error(
@@ -839,198 +1145,504 @@ var useFilterClauseEditor = ({
         );
       }
     },
-    [setOperator]
+    [filterClauseModel]
   );
-  const handleChangeValue = (0, import_react6.useCallback)(
-    (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 = (0, import_react5.useCallback)(
+    (value, isFinal) => filterClauseModel.setValue(value, isFinal),
+    [filterClauseModel]
   );
-  const handleDeselectValue = (0, import_react6.useCallback)(() => {
-    setValue(void 0);
-  }, []);
-  const handleKeyDownCaptureInput = (0, import_react6.useCallback)(
+  const handleDeselectValue = (0, import_react5.useCallback)(
+    () => filterClauseModel.setValue(void 0),
+    [filterClauseModel]
+  );
+  const handleKeyDownCaptureNavigation = (0, import_react5.useCallback)(
     (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 = (0, import_react6.useCallback)(
-    (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 = (0, import_react6.useCallback)((e) => {
-    e.stopPropagation();
-    if (e.key === "Backspace") {
-      focusNextFocusableElement("bwd");
+  const handleFocus = (0, import_react5.useCallback)((evt) => {
+    if (elementIsFilterClause(evt.target)) {
+      focusField(evt.target);
     }
   }, []);
-  const InputProps = (0, import_react6.useMemo)(
+  const InputProps = (0, import_react5.useMemo)(
     () => ({
       inputProps: {
-        onKeyDownCapture: handleKeyDownCaptureInput
+        onKeyDownCapture: handleKeyDownCaptureNavigation,
+        tabIndex: -1
       }
     }),
-    [handleKeyDownCaptureInput]
+    [handleKeyDownCaptureNavigation]
   );
-  (0, import_react6.useEffect)(() => {
-    var _a;
-    const columnInput = (_a = columnRef.current) == null ? void 0 : _a.querySelector("input");
-    columnInput == null ? void 0 : columnInput.focus();
-  }, []);
+  (0, import_react5.useEffect)(() => {
+    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
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase4 = "vuuFilterClause";
-var FilterClauseEditor = ({
+// src/filter-clause/FilterClause.tsx
+var import_jsx_runtime6 = require("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 = (0, import_react7.useMemo)(() => Object.values(columnsByName), [columnsByName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: clsx_default(classBase4, className), ...htmlAttributes, tabIndex: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      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 : ""
+  const columns = (0, import_react6.useMemo)(() => Object.values(columnsByName), [columnsByName]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: clsx_default(classBase3, className),
+      ...htmlAttributes,
+      onFocus,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          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__ */ (0, import_jsx_runtime6.jsx)(
+          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__ */ (0, import_jsx_runtime6.jsx)(
+          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
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase4 = "vuuFilterClauseCombinator";
+var FilterClauseCombinator = ({
+  onChange,
+  onKeyDown,
+  operator
+}) => {
+  const handleChange = (0, import_react7.useCallback)(
+    (value) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_vuu_ui_controls5.CycleStateButton,
+    {
+      className: classBase4,
+      onChange: handleChange,
+      onKeyDown,
+      value: operator,
+      values: ["and", "or"],
+      variant: "primary"
+    }
+  );
+};
+
+// src/filter-editor/useFilterEditor.ts
+var import_react8 = require("react");
+var useFilterEditor = ({
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave
+}) => {
+  const filterModel = (0, import_react8.useMemo)(() => {
+    return new FilterModel(filter);
+  }, [filter]);
+  const [_, forceRefresh] = (0, import_react8.useState)({});
+  const [isValid, setIsValid] = (0, import_react8.useState)(filterModel.isValid);
+  const clauseCombinatorRef = (0, import_react8.useRef)(void 0);
+  const saveButtonRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react8.useRef)(null);
+  const setContainer = (0, import_react8.useCallback)((el) => {
+    containerRef.current = el;
+    if (el) {
+      focusFirstClauseIfAllClausesValid(el);
+    }
+  }, []);
+  const saveButtonMenuBuilder = (0, import_react8.useCallback)((_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 = (0, import_react8.useMemo)(
+    () => columnDescriptorsByName(columnDescriptors),
+    [columnDescriptors]
+  );
+  const isLastFilterClause = (0, import_react8.useCallback)(
+    (index) => index !== void 0 && filterModel.filterClauses.length === index + 1,
+    [filterModel]
+  );
+  (0, import_react8.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime7.jsx)(
-      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 = (0, import_react8.useCallback)(
+    (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__ */ (0, import_jsx_runtime7.jsx)(
-      FilterClauseValueEditor,
-      {
-        InputProps,
-        onChangeValue,
-        onDeselectValue,
-        operator,
-        selectedColumn,
-        suggestionProvider,
-        table: tableSchema == null ? void 0 : tableSchema.table,
-        value
+    },
+    [filter, filterModel, onCancel]
+  );
+  const invokeMenuAction = (0, import_react8.useCallback)(
+    ({ 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__ */ (0, import_jsx_runtime7.jsx)(
-      import_core.Button,
-      {
-        className: `${classBase4}-clearButton`,
-        onClick: onClear,
-        onKeyDown: onClearKeyDown,
-        "data-icon": "close"
+    },
+    [filter == null ? void 0 : filter.name, filterModel, onSave]
+  );
+  const handleKeyDownSaveButton = (0, import_react8.useCallback)(
+    (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 = (0, import_react8.useCallback)((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 = (0, import_react8.useMemo)(
+    () => () => 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 = (0, import_react8.useCallback)(
+    (op) => {
+      filterModel.setOp(op);
+      clauseCombinatorRef.current = op;
+      forceRefresh({});
+    },
+    [filterModel]
+  );
+  const handleCancelFilterEdit = (0, import_react8.useCallback)(() => {
+    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
+var import_core = require("@salt-ds/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react9 = require("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__ */ (0, import_jsx_runtime8.jsx)(
+            FilterClauseCombinator,
+            {
+              onChange: onChangeFilterCombinator,
+              onKeyDown: onKeyDownCombinator,
+              operator: op
+            },
+            `filter-operator-${i}`
+          )
+        );
+      }
+      content.push(
+        /* @__PURE__ */ (0, import_react9.createElement)(
+          FilterClause,
+          {
+            ...FilterClauseEditorProps,
+            columnsByName,
+            "data-index": i,
+            filterClauseModel,
+            key: `editor-${i}`,
+            onCancel: onCancelFilterClause,
+            tableSchema
+          }
+        )
+      );
+    });
+    return content;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...htmlAttributes, className: classBase5, ref: setContainer, children: [
+    getContents(),
+    /* @__PURE__ */ (0, import_react9.createElement)(
+      import_vuu_ui_controls6.SplitButton,
+      {
+        ...saveButtonProps,
+        disabled: !filterModel.isValid,
+        key: "save-button",
+        ref: saveButtonRef
+      },
+      "Save"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core.Button, { onClick: onCancelFilterEdit, variant: "secondary", children: "Cancel" })
   ] });
 };
 
 // src/filter-pill/FilterPill.tsx
-var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_popups = require("@vuu-ui/vuu-popups");
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react10 = require("react");
+
+// src/filter-pill/filterAsReactNode.tsx
 var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var import_react9 = require("react");
 
-// src/filter-pill-menu/FilterPillMenu.tsx
-var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_react8 = require("react");
+// src/filter-pill/getFilterLabel.ts
+var import_vuu_utils9 = require("@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 ((0, import_vuu_utils9.isMultiClauseFilter)(filter)) {
+    return filter.filters.map((f) => getFilterLabel(columnsByName)(f)).join(", ");
+  } else {
+    return getColumnLabel(filter, columnsByName);
+  }
+};
+
+// src/filter-pill/filterAsReactNode.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var filterAsReactNode = (f, getLabel = getFilterLabel()) => {
+  if ((0, import_vuu_utils10.isMultiClauseFilter)(f)) {
+    const heading = f.op === "and" ? "Match all ..." : "Match any ...";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: heading }),
+      f.filters.map((f2, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: filterAsReactNode(f2, getLabel) }, i))
+    ] });
+  } else if ((0, import_vuu_utils10.isMultiValueFilter)(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",
@@ -1049,72 +1661,18 @@ var renameCommand = (options) => ({
   action: `rename-filter`,
   options
 });
-var editCommand = (options) => ({
-  label: `Edit`,
-  location: "filter",
-  action: "edit-filter",
-  options
-});
-
-// src/filter-pill-menu/FilterPillMenu.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase5 = "vuuFilterPillMenu";
-var FilterPillMenu = ({
-  allowClose = true,
-  allowDelete = true,
-  allowEdit = true,
-  allowRename = true,
-  filter,
-  location,
-  onMenuAction,
-  onMenuClose
-}) => {
-  const [menuBuilder, menuOptions] = (0, import_react8.useMemo)(
-    () => [
-      (_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__ */ (0, import_jsx_runtime8.jsx)(
-    import_vuu_popups2.PopupMenu,
-    {
-      className: classBase5,
-      menuBuilder,
-      menuActionHandler: onMenuAction,
-      menuLocation: clsx_default("filter", location),
-      menuOptions,
-      onMenuClose,
-      tabIndex: -1
-    }
-  );
-};
-
-// src/filter-pill/filterAsReactNode.tsx
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var editCommand = (options) => ({
+  label: `Edit`,
+  location: "filter",
+  action: "edit-filter",
+  options
+});
 
-// src/filter-pill/getFilterLabel.ts
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+// src/filter-pill/getFilterTooltipText.ts
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 
 // src/filter-utils.ts
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
 var AND = "and";
 var EQUALS = "=";
 var GREATER_THAN = ">";
@@ -1125,7 +1683,7 @@ var ENDS_WITH = "ends";
 var IN = "in";
 var filterClauses = (filter, clauses = []) => {
   if (filter) {
-    if ((0, import_vuu_utils7.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils11.isMultiClauseFilter)(filter)) {
       filter.filters.forEach((f) => clauses.push(...filterClauses(f)));
     } else {
       clauses.push(filter);
@@ -1148,7 +1706,7 @@ var removeLastClause = (filter) => {
   }
 };
 var addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
-  if ((0, import_vuu_utils7.isMultiClauseFilter)(existingFilter) && existingFilter.op === combineWith) {
+  if ((0, import_vuu_utils11.isMultiClauseFilter)(existingFilter) && existingFilter.op === combineWith) {
     return {
       ...existingFilter,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1162,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 ((0, import_vuu_utils7.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: { ...(0, import_vuu_utils7.isNotNullOrUndefined)(name) ? { name } : {}, ...clause },
-      nextIdx: currIdx + 1
-    };
-  }
-}
 var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
   var _a;
   if (includesNoValues(filter)) {
-    if ((0, import_vuu_utils7.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils11.isMultiClauseFilter)(filter)) {
     } else {
       existingFilter = removeFilterForColumn(existingFilter, {
         name: filter.column
       });
     }
   } else if (includesAllValues(filter)) {
-    if ((0, import_vuu_utils7.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils11.isMultiClauseFilter)(filter)) {
     }
     return removeFilterForColumn(existingFilter, { name: (_a = filter.column) != null ? _a : "" });
   }
@@ -1231,10 +1765,10 @@ var includesNoValues = (filter) => {
   if (!filter) {
     return false;
   }
-  if ((0, import_vuu_utils7.isInFilter)(filter) && filter.values.length === 0) {
+  if ((0, import_vuu_utils11.isInFilter)(filter) && filter.values.length === 0) {
     return true;
   }
-  return (0, import_vuu_utils7.isAndFilter)(filter) && filter.filters.some((f) => includesNoValues(f));
+  return (0, import_vuu_utils11.isAndFilter)(filter) && filter.filters.some((f) => includesNoValues(f));
 };
 var includesAllValues = (filter) => {
   if (!filter) {
@@ -1252,7 +1786,7 @@ var merge = (f1, f2) => {
   if (includesNoValues(f2)) {
     return f2;
   }
-  if ((0, import_vuu_utils7.isInFilter)(f1) && (0, import_vuu_utils7.isInFilter)(f2)) {
+  if ((0, import_vuu_utils11.isInFilter)(f1) && (0, import_vuu_utils11.isInFilter)(f2)) {
     return {
       ...f1,
       values: [
@@ -1262,7 +1796,7 @@ var merge = (f1, f2) => {
         )
       ]
     };
-  } else if ((0, import_vuu_utils7.isInFilter)(f1) && f2.op === EQUALS) {
+  } else if ((0, import_vuu_utils11.isInFilter)(f1) && f2.op === EQUALS) {
     return {
       ...f1,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1318,14 +1852,14 @@ var splitFilterOnColumn = (columnName, filter) => {
   if (filter.op !== AND) {
     return [void 0, filter];
   }
-  const [[columnFilter = void 0], filters] = (0, import_vuu_utils7.partition)(
+  const [[columnFilter = void 0], filters] = (0, import_vuu_utils11.partition)(
     filter.filters,
     (f) => f.column === columnName
   );
   return filters.length === 1 ? [columnFilter, filters[0]] : [columnFilter, { op: AND, filters }];
 };
 var overrideColName = (filter, column) => {
-  if ((0, import_vuu_utils7.isMultiClauseFilter)(filter)) {
+  if ((0, import_vuu_utils11.isMultiClauseFilter)(filter)) {
     return {
       op: filter.op,
       filters: filter.filters.map((f) => overrideColName(f, column))
@@ -1354,7 +1888,7 @@ var removeFilterForColumn = (sourceFilter, column) => {
   if (sourceFilter.column === colName) {
     return void 0;
   }
-  if ((0, import_vuu_utils7.isAndFilter)(sourceFilter) || (0, import_vuu_utils7.isOrFilter)(sourceFilter)) {
+  if ((0, import_vuu_utils11.isAndFilter)(sourceFilter) || (0, import_vuu_utils11.isOrFilter)(sourceFilter)) {
     const { op } = sourceFilter;
     const filters = sourceFilter.filters;
     const otherColFilters = filters.filter((f) => f.column !== colName);
@@ -1386,7 +1920,7 @@ var filterEquals = (f1, f2, strict = false) => {
     return true;
   }
   if (f1 && f2 && canMerge(f1, f2)) {
-    return f1.op === f2.op && ((0, import_vuu_utils7.isSingleValueFilter)(f1) && (0, import_vuu_utils7.isSingleValueFilter)(f2) && f1.value === f2.value || (0, import_vuu_utils7.isMultiValueFilter)(f1) && (0, import_vuu_utils7.isMultiValueFilter)(f2) && sameValues(f1.values, f2.values));
+    return f1.op === f2.op && ((0, import_vuu_utils11.isSingleValueFilter)(f1) && (0, import_vuu_utils11.isSingleValueFilter)(f2) && f1.value === f2.value || (0, import_vuu_utils11.isMultiValueFilter)(f1) && (0, import_vuu_utils11.isMultiValueFilter)(f2) && sameValues(f1.values, f2.values));
   }
   return false;
 };
@@ -1403,7 +1937,7 @@ var updateFilter = (filter, newFilter, mode) => {
     }
     const { column: columnName } = newFilter;
     if (columnName) {
-      const existingClause = newFilter.column ? (0, import_vuu_utils7.extractFilterForColumn)(filter, columnName) : void 0;
+      const existingClause = newFilter.column ? (0, import_vuu_utils11.extractFilterForColumn)(filter, columnName) : void 0;
       if (existingClause && columnName) {
         const result = removeFilterForColumn(filter, { name: columnName });
         return updateFilter(result, newFilter, "add");
@@ -1445,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) };
@@ -1455,11 +1989,11 @@ function applyFormatter(filter, formatter) {
 }
 function formatFilterValue(filter, columnsByName) {
   const column = columnsByName == null ? void 0 : columnsByName[filter.column];
-  if (column && (0, import_vuu_utils8.isDateTimeColumn)(column)) {
-    const pattern = (0, import_vuu_utils8.dateTimePattern)(column.type);
+  if (column && (0, import_vuu_utils12.isDateTimeColumn)(column)) {
+    const pattern = (0, import_vuu_utils12.dateTimePattern)(column.type);
     const formatter = (n) => {
       var _a;
-      return (0, import_vuu_utils8.formatDate)({ date: (_a = pattern.date) != null ? _a : import_vuu_utils8.defaultPatternsByType.date })(
+      return (0, import_vuu_utils12.formatDate)({ date: (_a = pattern.date) != null ? _a : import_vuu_utils12.defaultPatternsByType.date })(
         new Date(n)
       );
     };
@@ -1470,37 +2004,16 @@ function formatFilterValue(filter, columnsByName) {
   }
   return filter;
 }
-var getFilterLabel = (columnsByName) => (filter) => {
-  if ((0, import_vuu_utils8.isMultiClauseFilter)(filter)) {
+var getFilterTooltipText = (columnsByName) => (filter) => {
+  if ((0, import_vuu_utils12.isMultiClauseFilter)(filter)) {
     const [firstClause] = filterClauses(filter);
     const formattedFilter = formatFilterValue(
       firstClause,
       columnsByName
     );
-    return `${(0, import_vuu_utils8.filterAsQuery)(formattedFilter)} ${filter.op} ...`;
-  } else {
-    return (0, import_vuu_utils8.filterAsQuery)(formatFilterValue(filter, columnsByName));
-  }
-};
-
-// src/filter-pill/filterAsReactNode.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var filterAsReactNode = (f, getLabel = getFilterLabel()) => {
-  if ((0, import_vuu_utils9.isMultiClauseFilter)(f)) {
-    const heading = f.op === "and" ? "Match all ..." : "Match any ...";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: heading }),
-      f.filters.map((f2, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: filterAsReactNode(f2, getLabel) }, i))
-    ] });
-  } else if ((0, import_vuu_utils9.isMultiValueFilter)(f)) {
-    if (f.values.length > 3) {
-      const values = f.values.slice(0, 3);
-      return `${getLabel({ ...f, values }).slice(0, -1)},...]`;
-    } else {
-      return getLabel(f);
-    }
+    return `${(0, import_vuu_utils12.filterAsQuery)(formattedFilter)} ${filter.op} ...`;
   } else {
-    return getLabel(f);
+    return (0, import_vuu_utils12.filterAsQuery)(formatFilterValue(filter, columnsByName));
   }
 };
 
@@ -1508,31 +2021,37 @@ var filterAsReactNode = (f, getLabel = getFilterLabel()) => {
 var import_jsx_runtime10 = require("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 = (0, import_react9.useRef)(null);
-  const handleEnterEditMode = (0, import_react9.useCallback)(() => {
+  const rootRef = (0, import_react10.useRef)(null);
+  const handleEnterEditMode = (0, import_react10.useCallback)(() => {
     onBeginEdit == null ? void 0 : onBeginEdit(filter);
   }, [filter, onBeginEdit]);
   const getLabel = getFilterLabel(columnsByName);
-  const label = (0, import_react9.useMemo)(
+  const label = (0, import_react10.useMemo)(
     () => {
       var _a;
       return (_a = filter.name) != null ? _a : getLabel(filter);
     },
     [getLabel, filter]
   );
-  const id = (0, import_vuu_utils10.useId)(idProp);
-  const handleMenuClose = (0, import_react9.useCallback)((reason) => {
+  const getTooltipTextl = getFilterTooltipText(columnsByName);
+  const id = (0, import_vuu_utils13.useId)(idProp);
+  const handleMenuClose = (0, import_react10.useCallback)((reason) => {
     if ((reason == null ? void 0 : reason.type) === "escape") {
       requestAnimationFrame(() => {
         if (rootRef.current) {
@@ -1541,58 +2060,124 @@ var FilterPill = ({
       });
     }
   }, []);
-  const { anchorProps, tooltipProps } = (0, import_vuu_popups3.useTooltip)({
+  const popupMenuProps = (0, import_react10.useMemo)(
+    () => ({
+      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 = (0, import_react10.useCallback)(
+    (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 } = (0, import_vuu_popups.useTooltip)({
+    anchorQuery: ".vuuFilterPill",
     id,
-    placement: "below",
-    tooltipContent: filterAsReactNode(filter, getLabel)
+    placement: ["above", "below"],
+    tooltipContent: filterAsReactNode(filter, getTooltipTextl)
   });
+  const buttonProps = {
+    onBlur: hideTooltip,
+    onFocus: (0, import_react10.useCallback)(() => {
+      showTooltip(rootRef);
+    }, [showTooltip])
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "div",
+    import_vuu_ui_controls7.SplitStateButton,
     {
       ...anchorProps,
       ...htmlAttributes,
+      ButtonProps: buttonProps,
+      PopupMenuProps: popupMenuProps,
       className: clsx_default(classBase6, classNameProp),
       "data-text": label,
       ref: rootRef,
       children: [
         editable && onExitEditMode ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_vuu_ui_controls6.EditableLabel,
+          import_vuu_ui_controls7.EditableLabel,
           {
             defaultValue: label,
+            editing,
+            editLabelApiRef,
             onEnterEditMode: handleEnterEditMode,
-            onExitEditMode
+            onExitEditMode: handleExitEditMode
           },
           label
-        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-label`, children: label }),
-        showMenu && onMenuAction ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          FilterPillMenu,
-          {
-            filter,
-            onMenuAction,
-            onMenuClose: handleMenuClose
-          }
-        ) : null,
-        tooltipProps && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vuu_popups3.Tooltip, { ...tooltipProps })
+        ) : label,
+        tooltipProps && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vuu_popups.Tooltip, { className: `${classBase6}-tooltip`, ...tooltipProps })
       ]
     }
   );
 };
 
 // src/filter-bar/FilterBarMenu.tsx
-var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var FilterBarMenu = () => {
   const classBase9 = "vuuFilterBarMenu";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: classBase9, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_vuu_popups4.PopupMenu, { icon: "tune", menuLocation: "filter-bar-menu", tabIndex: -1 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: classBase9, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_vuu_popups2.PopupMenu, { icon: "tune", menuLocation: "filter-bar-menu", tabIndex: -1 }) });
 };
 
 // src/filter-bar/useFilterBar.ts
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
-var import_react12 = require("react");
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_react13 = require("react");
 
 // src/filter-bar/useFilterState.ts
-var import_react10 = require("react");
-var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_react11 = require("react");
+var import_vuu_ui_controls8 = require("@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,
@@ -1600,20 +2185,20 @@ var useFilterState = ({
   onFilterStateChanged,
   filterState: filterStateProp
 }) => {
-  const [filterState, setFilterState] = (0, import_vuu_ui_controls7.useControlled)({
+  const [filterState, setFilterState] = (0, import_vuu_ui_controls8.useControlled)({
     controlled: filterStateProp,
     default: defaultFilterState != null ? defaultFilterState : { filters: [], activeIndices: [] },
     name: "useFilterState",
     state: "FilterState"
   });
-  const handleFilterStateChange = (0, import_react10.useCallback)(
+  const handleFilterStateChange = (0, import_react11.useCallback)(
     (s) => {
       setFilterState(s);
       onFilterStateChanged == null ? void 0 : onFilterStateChanged(s);
     },
     [onFilterStateChanged, setFilterState]
   );
-  const handleAddFilter = (0, import_react10.useCallback)(
+  const handleAddFilter = (0, import_react11.useCallback)(
     (filter) => {
       const index = filterState.filters.length;
       const newFilters = filterState.filters.concat(filter);
@@ -1626,7 +2211,7 @@ var useFilterState = ({
     },
     [filterState, handleFilterStateChange]
   );
-  const handleDeleteFilter = (0, import_react10.useCallback)(
+  const handleDeleteFilter = (0, import_react11.useCallback)(
     (filter) => {
       let index = -1;
       const newFilters = filterState.filters.filter((f, i) => {
@@ -1655,7 +2240,7 @@ var useFilterState = ({
       onFilterDeleted
     ]
   );
-  const handleRenameFilter = (0, import_react10.useCallback)(
+  const handleRenameFilter = (0, import_react11.useCallback)(
     (filter, name) => {
       let index = -1;
       const newFilters = filterState.filters.map((f, i) => {
@@ -1672,7 +2257,7 @@ var useFilterState = ({
     },
     [filterState, handleFilterStateChange, onFilterRenamed]
   );
-  const handleChangeFilter = (0, import_react10.useCallback)(
+  const handleChangeFilter = (0, import_react11.useCallback)(
     (oldFilter, newFilter) => {
       let index = -1;
       const newFilters = filterState.filters.map((f, i) => {
@@ -1688,14 +2273,23 @@ var useFilterState = ({
     },
     [filterState, handleFilterStateChange]
   );
-  const handleActiveIndicesChange = (0, import_react10.useCallback)(
-    (indices) => handleFilterStateChange({ ...filterState, activeIndices: indices }),
+  const handleToggleFilterActive = (0, import_react11.useCallback)(
+    (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,
@@ -1712,22 +2306,22 @@ var removeIndexAndDecrementLarger = (indices, idxToRemove) => {
 };
 
 // src/filter-bar/useApplyFilterOnChange.ts
-var import_react11 = require("react");
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_react12 = require("react");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 function useApplyFilterOnChange({
   activeFilterIndex,
   columnsByName,
   filters,
   onApplyFilter
 }) {
-  const applyFilter = (0, import_react11.useCallback)(
+  const applyFilter = (0, import_react12.useCallback)(
     (filter) => {
-      const query = filter ? (0, import_vuu_utils11.filterAsQuery)(filter, { columnsByName }) : "";
+      const query = filter ? (0, import_vuu_utils14.filterAsQuery)(filter, { columnsByName }) : "";
       onApplyFilter({ filter: query, filterStruct: filter });
     },
     [columnsByName, onApplyFilter]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const activeFilters = activeFilterIndex.map((i) => filters[i]);
     if (activeFilters.length === 0) {
       applyFilter();
@@ -1740,8 +2334,38 @@ function useApplyFilterOnChange({
   }, [activeFilterIndex, applyFilter, filters]);
 }
 
+// src/filter-bar/filterBarFocusManagement.ts
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var navigateToNextItem = (el, direction = "fwd") => {
+  const pill = (0, import_vuu_utils15.queryClosest)(el, ".vuuFilterPill");
+  if (pill) {
+    const index = (0, import_vuu_utils15.getElementDataIndex)(pill);
+    if (typeof index === "number") {
+      const target = direction === "fwd" ? (0, import_vuu_utils15.getElementByDataIndex)(pill.parentElement, index + 1) : (0, import_vuu_utils15.getElementByDataIndex)(pill.parentElement, index - 1);
+      if (target) {
+        target.focus();
+      } else if (direction === "fwd") {
+        console.log("to the button");
+        const filterBar = (0, import_vuu_utils15.queryClosest)(el, ".vuuFilterBar");
+        const addButton = filterBar == null ? void 0 : filterBar.querySelector(
+          ".vuuFilterBar-add"
+        );
+        addButton == null ? void 0 : addButton.focus();
+      }
+    }
+  } else {
+    const button = (0, import_vuu_utils15.queryClosest)(el, ".vuuFilterBar-add");
+    if (button) {
+      const filterBar = (0, import_vuu_utils15.queryClosest)(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,
@@ -1750,16 +2374,14 @@ var useFilterBar = ({
   onApplyFilter,
   onFilterDeleted,
   onFilterRenamed,
-  onFilterStateChanged,
-  showMenu: showMenuProp
+  onFilterStateChanged
 }) => {
-  const addButtonRef = (0, import_react12.useRef)(null);
-  const editingFilter = (0, import_react12.useRef)();
-  const [showMenu, setShowMenu] = (0, import_react12.useState)(showMenuProp);
-  const [editFilter, setEditFilter] = (0, import_react12.useState)();
-  const [promptProps, setPromptProps] = (0, import_react12.useState)(null);
-  const columnsByName = (0, import_react12.useMemo)(
-    () => columnDescriptorsByName(columnDescriptors),
+  const addButtonRef = (0, import_react13.useRef)(null);
+  const [interactedFilterState, setInteractedFilterState] = (0, import_react13.useState)();
+  const [promptProps, setPromptProps] = (0, import_react13.useState)(null);
+  const editPillLabelAPI = (0, import_react13.useRef)(import_vuu_ui_controls9.NullEditAPI);
+  const columnsByName = (0, import_react13.useMemo)(
+    () => columnDescriptorsByName2(columnDescriptors),
     [columnDescriptors]
   );
   const {
@@ -1769,7 +2391,7 @@ var useFilterBar = ({
     onChangeFilter,
     onDeleteFilter,
     onRenameFilter,
-    onChangeActiveFilterIndex
+    onToggleFilterActive
   } = useFilterState({
     defaultFilterState,
     filterState,
@@ -1783,47 +2405,21 @@ var useFilterBar = ({
     filters,
     onApplyFilter
   });
-  const editPillLabel = (0, import_react12.useCallback)(
-    (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) {
-            (0, import_vuu_utils12.dispatchMouseEvent)(editableLabel, "dblclick");
-          }
-        }
+  const editPillLabel = (0, import_react13.useCallback)((index, filter) => {
+    setTimeout(() => {
+      setInteractedFilterState({
+        filter,
+        index,
+        state: "rename"
       });
-    },
-    [containerRef]
-  );
-  const focusFilterClause = (0, import_react12.useCallback)(
-    (_ = 0) => {
+    }, 100);
+  }, []);
+  const focusFilterPill = (0, import_react13.useCallback)(
+    (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 = (0, import_react12.useCallback)(
-    (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();
@@ -1832,7 +2428,7 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const deleteConfirmed = (0, import_react12.useCallback)(
+  const deleteConfirmed = (0, import_react13.useCallback)(
     (filter) => {
       onDeleteFilter(filter);
       requestAnimationFrame(() => {
@@ -1843,7 +2439,7 @@ var useFilterBar = ({
     },
     [filters.length, focusFilterPill, onDeleteFilter]
   );
-  const getDeletePrompt = (0, import_react12.useMemo)(
+  const getDeletePrompt = (0, import_react13.useMemo)(
     () => (filter) => {
       const close = () => {
         setPromptProps(null);
@@ -1865,7 +2461,7 @@ var useFilterBar = ({
     },
     [deleteConfirmed, focusFilterPill]
   );
-  const deleteFilter = (0, import_react12.useCallback)(
+  const deleteFilter = (0, import_react13.useCallback)(
     (filter, withPrompt) => {
       if (withPrompt) {
         setPromptProps(getDeletePrompt(filter));
@@ -1875,23 +2471,19 @@ var useFilterBar = ({
     },
     [deleteConfirmed, getDeletePrompt]
   );
-  const handleBeginEditFilterName = (0, import_react12.useCallback)((filter) => {
-    editingFilter.current = filter;
-  }, []);
-  const handleExitEditFilterName = (0, import_react12.useCallback)(
+  const handleExitEditFilterName = (0, import_react13.useCallback)(
     (_, 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 = (0, import_react12.useCallback)(
+  const handlePillMenuAction = (0, import_react13.useCallback)(
     ({ menuId, options }) => {
       switch (menuId) {
         case "delete-filter": {
@@ -1902,201 +2494,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 = (0, import_react12.useCallback)(
-    (edited, existing) => {
+  const handlePillKeyDown = (0, import_react13.useCallback)((e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      navigateToNextItem(e.target, e.key === "ArrowLeft" ? "bwd" : "fwd");
+    }
+  }, []);
+  const addIfNewElseUpdate = (0, import_react13.useCallback)(
+    (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 = (0, import_react12.useCallback)(
-    ({ 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 = (0, import_react13.useCallback)(
+    (filter) => {
+      if (interactedFilterState) {
+        const { filter: existingFilter } = interactedFilterState;
+        setInteractedFilterState(void 0);
+        addIfNewElseUpdate(filter, existingFilter);
+      }
+    },
+    [addIfNewElseUpdate, interactedFilterState]
+  );
+  const handlePillClick = (0, import_react13.useCallback)(
+    (e) => {
+      const isEditing = e.target.querySelector(
+        ".vuuEditableLabel-editing"
+      );
+      if (!isEditing) {
+        const pill = (0, import_vuu_utils16.queryClosest)(e.target, ".vuuFilterPill");
+        if (pill) {
+          const index = (0, import_vuu_utils16.getElementDataIndex)(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 = (0, import_react12.useCallback)(() => {
-    setEditFilter({});
-  }, [setEditFilter]);
-  const handleClickRemoveFilter = (0, import_react12.useCallback)(() => {
-    setEditFilter(void 0);
-  }, []);
   const pillProps = {
-    onBeginEdit: handleBeginEditFilterName,
+    editLabelApiRef: editPillLabelAPI,
+    // onBeginEdit: handleBeginEditFilterName,
+    onClick: handlePillClick,
+    onKeyDown: handlePillKeyDown,
     onMenuAction: handlePillMenuAction,
     onExitEditMode: handleExitEditFilterName
   };
-  const handleChangeFilterClause = (0, import_react12.useCallback)(
-    (idx) => (filterClause) => {
-      if (filterClause !== void 0) {
-        setEditFilter((ef) => replaceClause(ef, filterClause, idx));
-        setShowMenu(true);
-      }
-    },
-    []
-  );
-  const handleCancelFilterClause = (0, import_react12.useCallback)(
-    (reason) => {
-      if (reason === "Backspace" && (0, import_vuu_utils12.isMultiClauseFilter)(editFilter)) {
-        setEditFilter(removeLastClause(editFilter));
-      }
-    },
-    [editFilter]
-  );
-  const handleBlurFilterClause = (0, import_react12.useCallback)((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 = (0, import_react12.useCallback)(() => {
-    setShowMenu(false);
+  const handleClickAddButton = (0, import_react13.useCallback)(() => {
+    setInteractedFilterState({
+      index: -1,
+      state: "create"
+    });
   }, []);
-  const handleKeyDownFilterbar = (0, import_react12.useCallback)(
-    (evt) => {
-      if (evt.key === "Escape" && editFilter !== void 0) {
-        setEditFilter(void 0);
-        requestAnimationFrame(() => {
-        });
-      }
-    },
-    [editFilter]
-  );
-  const handleKeyDownMenu = (0, import_react12.useCallback)(
-    (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 = (0, import_react12.useCallback)((evt) => {
+  const handleKeyDownAddButton = (0, import_react13.useCallback)((evt) => {
     if (evt.key === "ArrowLeft") {
-      console.log("navgiate to the Toolbar");
+      navigateToNextItem(evt.target, "bwd");
     }
   }, []);
-  const handlePillNavigationOutOfBounds = (0, import_react12.useCallback)((direction) => {
+  const handleCancelEdit = (0, import_react13.useCallback)(() => {
     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
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var classBase7 = "vuuFilterBar";
 var FilterBar = ({
-  FilterClauseEditorProps: FilterClauseEditorProps2,
+  FilterClauseEditorProps,
   className: classNameProp,
   columnDescriptors,
   defaultFilterState,
@@ -2105,31 +2621,20 @@ var FilterBar = ({
   onFilterDeleted,
   onFilterRenamed,
   onFilterStateChanged,
-  showMenu: showMenuProp = false,
   tableSchema,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react13.useRef)(null);
+  const rootRef = (0, import_react14.useRef)(null);
   const {
     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,
@@ -2138,126 +2643,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__ */ (0, import_react14.createElement)(
-            FilterPill,
-            {
-              ...pillProps,
-              columnsByName,
-              filter,
-              key: `filter-${i}`
-            }
-          )
-        );
-      });
-      return items;
-    } else if (editFilter) {
-      const filterClauses2 = filterClauses(editFilter);
+    filters.forEach((filter, i) => {
       items.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-Editor`, children: filterClauses2.map((f, i) => /* @__PURE__ */ (0, import_react14.createElement)(
-          FilterClauseEditor,
+        /* @__PURE__ */ (0, import_react15.createElement)(
+          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__ */ (0, import_jsx_runtime12.jsx)(
-            FilterBuilderMenu,
-            {
-              onMenuAction,
-              ListProps: { onKeyDownCapture: onKeyDownMenu }
-            },
-            "menu"
-          )
-        );
-      }
-      items.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_core2.Button,
-          {
-            className: `${classBase7}-remove`,
-            "data-align": "right",
-            "data-icon": "cross",
-            onClick: onClickRemoveFilter,
-            variant: "primary"
-          },
-          "filter-remove"
         )
       );
-      return items;
-    }
+    });
+    return items;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      ...htmlAttributes,
-      className,
-      onKeyDown: onKeyDownFilterbar,
-      ref: rootRef,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterBarMenu, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_vuu_ui_controls8.Toolbar,
-          {
-            activeItemIndex: activeFilterIndex,
-            onActiveChange: onChangeActiveFilterIndex,
-            onNavigateOutOfBounds,
-            selectionStrategy: "multiple-special-key",
-            children: getChildren2()
-          }
-        ),
-        editFilter === void 0 ? /* @__PURE__ */ (0, import_react14.createElement)(
-          import_core2.Button,
-          {
-            ...addButtonProps,
-            className: `${classBase7}-add`,
-            "data-icon": "plus",
-            "data-selectable": false,
-            key: "filter-add",
-            onClick: onClickAddFilter,
-            tabIndex: 0,
-            variant: "primary"
-          }
-        ) : null,
-        promptProps ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_vuu_popups5.Prompt,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ...htmlAttributes, className, ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FilterBarMenu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-filters`, children: getChildren2() }),
+      /* @__PURE__ */ (0, import_react15.createElement)(
+        import_vuu_ui_controls10.IconButton,
+        {
+          ...addButtonProps,
+          className: clsx_default("vuuIconButton", `${classBase7}-add`),
+          "data-selectable": false,
+          icon: "plus",
+          key: "filter-add",
+          tabIndex: 0,
+          variant: "primary"
+        }
+      )
+    ] }),
+    filterModel && tableSchema && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_popups3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_vuu_popups3.PopupComponent,
+      {
+        anchorElement: rootRef,
+        offsetTop: -10,
+        offsetLeft: 20,
+        placement: "below",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          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__ */ (0, import_jsx_runtime12.jsx)(
+      import_vuu_popups3.Prompt,
+      {
+        ...promptProps,
+        PopupProps: {
+          anchorElement: rootRef,
+          offsetTop: 16,
+          placement: "below-center"
+        }
+      }
+    ) : null
+  ] });
 };
 
 // src/filter-input/FilterInput.tsx
-var import_core3 = require("@salt-ds/core");
+var import_core2 = require("@salt-ds/core");
 
 // src/filter-input/useCodeMirrorEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
@@ -5247,14 +5711,14 @@ var parser = LRParser.deserialize({
 });
 
 // ../vuu-filter-parser/src/FilterTreeWalker.ts
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
 var _filter;
 var FilterExpression = class {
   constructor() {
     __privateAdd(this, _filter, void 0);
   }
   setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils13.isMultiClauseFilter)(filter) && filter.op === op) {
+    if ((0, import_vuu_utils17.isMultiClauseFilter)(filter) && filter.op === op) {
       return;
     } else {
       __privateSet(this, _filter, {
@@ -5266,14 +5730,14 @@ var FilterExpression = class {
   add(filter) {
     if (__privateGet(this, _filter) === void 0) {
       __privateSet(this, _filter, filter);
-    } else if ((0, import_vuu_utils13.isMultiClauseFilter)(__privateGet(this, _filter))) {
+    } else if ((0, import_vuu_utils17.isMultiClauseFilter)(__privateGet(this, _filter))) {
       __privateGet(this, _filter).filters.push(filter);
     } else {
       throw Error(`Invalid filter passed to FilterExpression`);
     }
   }
   setColumn(column, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils13.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils17.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setColumn(column, target);
@@ -5283,7 +5747,7 @@ var FilterExpression = class {
     }
   }
   setOp(value, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils13.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils17.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setOp(value, target);
@@ -5294,15 +5758,15 @@ var FilterExpression = class {
   }
   setValue(value, filter = __privateGet(this, _filter)) {
     var _a;
-    if ((0, import_vuu_utils13.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils17.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setValue(value, target);
       }
-    } else if ((0, import_vuu_utils13.isMultiValueFilter)(filter)) {
+    } else if ((0, import_vuu_utils17.isMultiValueFilter)(filter)) {
       (_a = filter.values) != null ? _a : filter.values = [];
       filter.values.push(value);
-    } else if ((0, import_vuu_utils13.isSingleValueFilter)(filter)) {
+    } else if ((0, import_vuu_utils17.isSingleValueFilter)(filter)) {
       filter.value = value;
     }
   }
@@ -5365,7 +5829,7 @@ var walkTree = (tree, source) => {
 var strictParser = parser.configure({ strict: true });
 
 // src/filter-input/useCodeMirrorEditor.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/filter-input/FilterLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -5471,7 +5935,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/filter-input/useFilterAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -5541,7 +6005,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = (0, import_react15.useCallback)(
+  const makeSuggestions = (0, import_react16.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -5552,7 +6016,7 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react15.useCallback)(
+  return (0, import_react16.useCallback)(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -5736,15 +6200,15 @@ var useCodeMirrorEditor = ({
   onSubmitFilter,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react16.useRef)(null);
-  const onSubmit = (0, import_react16.useRef)(noop);
-  const viewRef = (0, import_react16.useRef)();
+  const editorRef = (0, import_react17.useRef)(null);
+  const onSubmit = (0, import_react17.useRef)(noop);
+  const viewRef = (0, import_react17.useRef)();
   const completionFn = useAutoComplete(
     suggestionProvider,
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = (0, import_react16.useMemo)(() => {
+  const [createState, clearInput] = (0, import_react17.useMemo)(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -5819,7 +6283,7 @@ var useCodeMirrorEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onSubmitFilter]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -5853,7 +6317,7 @@ var FilterInput = ({
   });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...props, className: classBase8, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_core3.Button,
+      import_core2.Button,
       {
         className: `${classBase8}-FilterButton`,
         "data-icon": iconName,
@@ -5862,7 +6326,7 @@ var FilterInput = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${classBase8}-Editor`, ref: editorRef }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_core3.Button,
+      import_core2.Button,
       {
         className: `${classBase8}-ClearButton`,
         "data-icon": "close-circle",
@@ -5875,16 +6339,16 @@ var FilterInput = ({
 // src/filter-input/useFilterSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/filter-input/filterInfo.ts
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
 var filterInfo = (filterName, filterQuery) => {
-  const rootElement = (0, import_vuu_utils14.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils14.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils14.createEl)("span", "function-name", filterName);
+  const rootElement = (0, import_vuu_utils18.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils18.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils18.createEl)("span", "function-name", filterName);
   headingElement.appendChild(nameElement);
-  const child2 = (0, import_vuu_utils14.createEl)("p", void 0, filterQuery);
+  const child2 = (0, import_vuu_utils18.createEl)("p", void 0, filterQuery);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   return rootElement;
@@ -5971,9 +6435,9 @@ var useFilterSuggestionProvider = ({
   table,
   typeaheadHook: useTypeahead = import_vuu_data_react2.useTypeaheadSuggestions
 }) => {
-  const latestSuggestionsRef = (0, import_react17.useRef)();
+  const latestSuggestionsRef = (0, import_react18.useRef)();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = (0, import_react17.useCallback)(
+  const getSuggestions = (0, import_react18.useCallback)(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -6063,7 +6527,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = (0, import_react17.useCallback)(
+  const isPartialMatch = (0, import_react18.useCallback)(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0