@vuu-ui/vuu-filters 0.8.14-debug → 0.8.15-debug

package/cjs/index.js

@@ -128,6 +128,7 @@ __export(src_exports, {
   getTypeaheadFilter: () => getTypeaheadFilter,
   overrideColName: () => overrideColName,
   removeFilter: () => removeFilter,
+  removeLastClause: () => removeLastClause,
   replaceClause: () => replaceClause,
   saveLocalEntity: () => saveLocalEntity,
   splitFilterOnColumn: () => splitFilterOnColumn,
@@ -2081,7 +2082,7 @@ var View = (0, import_react32.forwardRef)(function View2(props, forwardedRef) {
     title: titleProp,
     ...restProps
   } = props;
-  const id = (0, import_core5.useIdMemo)(idProp);
+  const id = useId(idProp);
   const rootRef = (0, import_react32.useRef)(null);
   const mainRef = (0, import_react32.useRef)(null);
   const [componentProps, _setComponentProps] = (0, import_react32.useState)();
@@ -2352,7 +2353,7 @@ var LocalLayoutPersistenceManager = class {
           const newMetadata = {
             ...metadata,
             id,
-            created: (0, import_vuu_utils9.formatDate)(/* @__PURE__ */ new Date(), "dd.mm.yyyy")
+            created: (0, import_vuu_utils9.formatDate)("dd.mm.yyyy")(/* @__PURE__ */ new Date())
           };
           this.saveLayoutsWithMetadata(
             [...existingLayouts, { id, json: layout }],
@@ -2618,6 +2619,7 @@ var import_react42 = __toESM(require("react"));
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var LayoutManagementContext = import_react42.default.createContext({
+  getApplicationSettings: () => void 0,
   layoutMetadata: [],
   saveLayout: () => void 0,
   // The default Application JSON will be served if no LayoutManagementProvider
@@ -2626,6 +2628,7 @@ var LayoutManagementContext = import_react42.default.createContext({
   saveApplicationSettings: () => void 0,
   loadLayoutById: () => void 0
 });
+var useLayoutManager = () => (0, import_react42.useContext)(LayoutManagementContext);
 
 // ../vuu-shell/src/layout-management/LayoutList.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -3712,7 +3715,7 @@ var PaletteItem = (0, import_react59.memo)(
 );
 PaletteItem.displayName = "PaletteItem";
 var Palette = ({
-  ListProps: ListProps2,
+  ListProps: ListProps3,
   ViewProps: ViewProps4,
   children,
   className,
@@ -3771,7 +3774,7 @@ var Palette = ({
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_vuu_ui_controls7.List,
     {
-      ...ListProps2,
+      ...ListProps3,
       ...props,
       className: (0, import_classnames24.default)(classBase21, className, `${classBase21}-${orientation}`),
       itemHeight,
@@ -3792,7 +3795,7 @@ var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
 var import_classnames25 = __toESM(require_classnames());
 var import_react60 = __toESM(require("react"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var classBase12 = "Tabs";
+var classBase12 = "vuuTabs";
 var getDefaultTabIcon = () => void 0;
 var getChildElements = (children) => {
   const elements = [];
@@ -4632,10 +4635,10 @@ var import_vuu_ui_controls11 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/filter-bar/FilterBar.tsx
-var import_vuu_popups7 = require("@vuu-ui/vuu-popups");
+var import_vuu_popups8 = require("@vuu-ui/vuu-popups");
 var import_core19 = require("@salt-ds/core");
 var import_classnames32 = __toESM(require_classnames(), 1);
-var import_react78 = require("react");
+var import_react79 = require("react");
 
 // src/filter-builder-menu/FilterBuilderMenu.tsx
 var import_react68 = require("react");
@@ -4643,7 +4646,10 @@ var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
 var import_vuu_ui_controls12 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var classBase14 = "vuuFilterBuilderMenu";
-var FilterBuilderMenu = ({ onMenuAction }) => {
+var FilterBuilderMenu = ({
+  ListProps: ListProps3,
+  onMenuAction
+}) => {
   const ref = (0, import_react68.useRef)(null);
   const listRef = (0, import_react68.useCallback)((el) => {
     if (el) {
@@ -4666,15 +4672,16 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_vuu_popups5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_vuu_popups5.PopupComponent, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       import_vuu_ui_controls12.List,
       {
+        ...ListProps3,
         className: `${classBase14}List`,
-        defaultHighlightedIndex: 1,
+        defaultHighlightedIndex: 0,
         itemHeight: 22,
         ref: listRef,
         onSelect: handleSelect,
         style: { position: "relative" },
         width: 100,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_vuu_ui_controls12.ListItem, { "data-action": "apply-save", className: "vuuMenuButton", children: "APPLY AND SAVE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_vuu_ui_controls12.ListItem, { "data-action": "apply-save", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "vuuMenuButton", children: "APPLY AND SAVE" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_vuu_ui_controls12.ListItem, { "data-action": "and-clause", children: "AND" }),
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_vuu_ui_controls12.ListItem, { "data-action": "or-clause", children: "OR" })
         ]
@@ -4702,7 +4709,6 @@ var ExpandoCombobox = (0, import_react69.forwardRef)(function ExpandoCombobox2({
   value = "",
   ...props
 }, forwardedRef) {
-  var _a;
   const [text, setText] = (0, import_react69.useState)(value);
   const { itemToString = import_vuu_utils23.itemToString } = props;
   const initialValue = (0, import_react69.useRef)(value);
@@ -4720,7 +4726,6 @@ var ExpandoCombobox = (0, import_react69.forwardRef)(function ExpandoCombobox2({
   const handleInputChange = (0, import_react69.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
-      console.log(`onInputChange ${value2}`);
       setText(value2);
       onInputChange == null ? void 0 : onInputChange(evt);
     },
@@ -4729,7 +4734,7 @@ var ExpandoCombobox = (0, import_react69.forwardRef)(function ExpandoCombobox2({
   const handleSetSelectedText = (0, import_react69.useCallback)((text2) => {
     setText(text2);
   }, []);
-  const [InputProps, ListProps2] = (0, import_react69.useMemo)(() => {
+  const [InputProps, ListProps3] = (0, import_react69.useMemo)(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
@@ -4776,7 +4781,7 @@ var ExpandoCombobox = (0, import_react69.forwardRef)(function ExpandoCombobox2({
   const popupProps = {
     minWidth: "fit-content"
   };
-  return ((_a = props.source) == null ? void 0 : _a.length) === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       className: (0, import_classnames28.default)(classBase15, classNameProp),
@@ -4790,7 +4795,7 @@ var ExpandoCombobox = (0, import_react69.forwardRef)(function ExpandoCombobox2({
           PopupProps: popupProps,
           defaultValue: initialValue.current,
           fullWidth: true,
-          ListProps: ListProps2,
+          ListProps: ListProps3,
           InputProps,
           itemsToString,
           onSelectionChange: handleSelectionChange,
@@ -4875,10 +4880,14 @@ var import_react71 = require("react");
 var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
 var import_vuu_ui_controls15 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime53 = require("react/jsx-runtime");
+var selectionKeys = ["Enter", " "];
+var NO_DATA_MATCH = ["No matching data"];
 var TextInput = (0, import_react71.forwardRef)(function TextInput2({
   InputProps: InputPropsProp = {},
   className,
   column,
+  "data-field": dataField,
+  onDeselect,
   onInputComplete,
   operator,
   suggestionProvider = import_vuu_data_react.useTypeaheadSuggestions,
@@ -4908,7 +4917,11 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
     if (table) {
       const params = valueInputValue ? [table, column.name, valueInputValue] : [table, column.name];
       getSuggestions(params).then((suggestions) => {
-        setTypeaheadValues(suggestions);
+        if (suggestions.length === 0 && valueInputValue) {
+          setTypeaheadValues(NO_DATA_MATCH);
+        } else {
+          setTypeaheadValues(suggestions);
+        }
       }).catch((err) => {
         console.error("Error getting suggestions", err);
       });
@@ -4942,6 +4955,9 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
     }
   }, [InputPropsProp, onInputComplete, operator, valueInputValue]);
   const getValueInputField = (0, import_react71.useCallback)(() => {
+    if (typeaheadValues.length === 0) {
+      return null;
+    }
     switch (operator) {
       case "in":
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -4949,16 +4965,18 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
           {
             InputProps,
             className,
+            "data-field": dataField,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
             onSelectionChange: handleMultiValueSelectionChange,
             ref: forwardedRef,
             selectionStrategy: "multiple",
+            selectionKeys,
             value
           }
         );
-      case "starts":
+      case "starts": {
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           ExpandoCombobox,
           {
@@ -4969,7 +4987,9 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
             },
             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,
@@ -4977,12 +4997,14 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
             value
           }
         );
+      }
       case "ends":
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           import_vuu_ui_controls15.ExpandoInput,
           {
             ...InputProps,
             className,
+            "data-field": dataField,
             value: valueInputValue,
             ref: forwardedRef,
             onChange: handleInputChange
@@ -4993,11 +5015,14 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
           ExpandoCombobox,
           {
             InputProps,
+            allowBackspaceClearsSelection: true,
             className,
+            "data-field": dataField,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             title: "value",
             onInputChange: handleInputChange,
+            onDeselect,
             onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
@@ -5008,13 +5033,15 @@ var TextInput = (0, import_react71.forwardRef)(function TextInput2({
     operator,
     InputProps,
     className,
+    dataField,
     typeaheadValues,
     handleInputChange,
     handleMultiValueSelectionChange,
     forwardedRef,
     value,
-    handleSingleValueSelectionChange,
-    valueInputValue
+    valueInputValue,
+    onDeselect,
+    handleSingleValueSelectionChange
   ]);
   return getValueInputField();
 });
@@ -5027,29 +5054,44 @@ 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 = () => {
-  var _a;
-  return (_a = document.activeElement) == null ? void 0 : _a.closest(".vuuFilterClauseField");
+  const activeElement = document.activeElement;
+  if (activeElement == null ? void 0 : activeElement.classList.contains("vuuFilterClause-clearButton")) {
+    return activeElement;
+  } else {
+    return activeElement == null ? void 0 : activeElement.closest(".vuuFilterClauseField");
+  }
 };
 var focusNextFocusableElement = (direction = "fwd") => {
   var _a;
   const activeField = getFocusedField();
   const filterClause = activeField == null ? void 0 : activeField.closest(".vuuFilterClause");
-  if ((filterClause == null ? void 0 : filterClause.lastChild) === activeField) {
+  if (direction === "fwd" && (filterClause == null ? void 0 : filterClause.lastChild) === activeField) {
     requestAnimationFrame(() => {
       focusNextFocusableElement();
     });
   } else {
-    const nextField = direction === "fwd" ? activeField.nextElementSibling : activeField.previousElementSibling;
+    const nextField = direction === "fwd" ? activeField == null ? void 0 : activeField.nextElementSibling : activeField == null ? void 0 : activeField.previousElementSibling;
     (_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 focusNextElement = () => {
   const filterClauseField = getFocusedField();
   const filterClause = filterClauseField == null ? void 0 : filterClauseField.closest(".vuuFilterClause");
   if (filterClause && filterClauseField) {
     if (filterClauseField.classList.contains("vuuFilterClauseValue")) {
       const clearButton = filterClause.querySelector(
-        ".vuuFilterClause-closeButton"
+        ".vuuFilterClause-clearButton"
       );
       clearButton == null ? void 0 : clearButton.focus();
     } else {
@@ -5108,6 +5150,7 @@ var getFilterClauseValue = (filterClause) => {
 };
 var useFilterClauseEditor = ({
   filterClause,
+  onCancel,
   onChange,
   tableSchema
 }) => {
@@ -5118,6 +5161,10 @@ var useFilterClauseEditor = ({
   const [operator, _setOperator] = (0, import_react72.useState)(
     filterClause.op
   );
+  const findColumn = (0, import_react72.useCallback)(
+    (columnName) => tableSchema.columns.find((col) => col.name === columnName),
+    [tableSchema.columns]
+  );
   const setOperator = (0, import_react72.useCallback)((op) => {
     _setOperator(op);
   }, []);
@@ -5129,10 +5176,43 @@ var useFilterClauseEditor = ({
       setSelectedColumn(column != null ? column : void 0);
       setOperator(void 0);
       setValue(void 0);
-      focusNextElement();
+      setTimeout(() => {
+        focusNextElement();
+      }, 100);
     },
     [setOperator]
   );
+  const removeAndNavigateToNextInputIfAtBoundary = (0, import_react72.useCallback)(
+    (evt) => {
+      var _a;
+      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) {
+          case "operator": {
+            setOperator(void 0);
+            setSelectedColumn(void 0);
+            focusNextFocusableElement("bwd");
+            break;
+          }
+          case "value": {
+            setOperator(void 0);
+            focusNextFocusableElement("bwd");
+            break;
+          }
+          case "column": {
+            if (clauseIsNotFirst(input)) {
+              console.log("This is NOT the first clause");
+              onCancel == null ? void 0 : onCancel("Backspace");
+            }
+          }
+        }
+      }
+    },
+    [onCancel, setOperator]
+  );
   const handleSelectionChangeOperator = (0, import_react72.useCallback)(
     (evt, selected) => {
       const op = selected;
@@ -5164,27 +5244,75 @@ var useFilterClauseEditor = ({
             value: value2
           });
         }
-        requestAnimationFrame(() => {
-          focusNextElement();
-        });
       }
     },
     [onChange, operator, selectedColumn == null ? void 0 : selectedColumn.name]
   );
+  const handleDeselectValue = (0, import_react72.useCallback)(() => {
+    setValue(void 0);
+  }, []);
   const handleKeyDownInput = (0, import_react72.useCallback)(
     (evt) => {
       if (["ArrowLeft", "ArrowRight"].includes(evt.key)) {
         navigateToNextInputIfAtBoundary(evt);
-      } else if (operator && evt.key === "Enter" && ["starts", "ends"].includes(operator)) {
-        console.log("enter");
+      } else if (evt.key === "Backspace") {
+        removeAndNavigateToNextInputIfAtBoundary(evt);
+      } else if (evt.key === "Enter") {
+        const input = evt.target;
+        const field = input.closest("[data-field]");
+        if (field.dataset.field === "column") {
+          const column = findColumn(input.value);
+          if (column) {
+            setSelectedColumn(column);
+            focusNextElement();
+          }
+        } else if (field.dataset.field === "value") {
+          if (operator === "starts") {
+            evt.stopPropagation();
+            const newValue = input.value;
+            setValue(newValue);
+            onChange({
+              column: selectedColumn == null ? void 0 : selectedColumn.name,
+              op: operator,
+              value: newValue
+            });
+          }
+        }
       }
     },
-    [operator]
+    [
+      findColumn,
+      onChange,
+      operator,
+      removeAndNavigateToNextInputIfAtBoundary,
+      selectedColumn == null ? void 0 : selectedColumn.name
+    ]
+  );
+  const handleClear = (0, import_react72.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]
   );
+  const handleClearKeyDown = (0, import_react72.useCallback)((e) => {
+    e.stopPropagation();
+    if (e.key === "Backspace") {
+      focusNextFocusableElement("bwd");
+    }
+  }, []);
   const InputProps = (0, import_react72.useMemo)(
     () => ({
       inputProps: {
-        onKeyDown: handleKeyDownInput
+        onKeyDownCapture: handleKeyDownInput
       }
     }),
     [handleKeyDownInput]
@@ -5198,6 +5326,9 @@ var useFilterClauseEditor = ({
     InputProps,
     columnRef,
     onChangeValue: handleChangeValue,
+    onClear: handleClear,
+    onClearKeyDown: handleClearKeyDown,
+    onDeselectValue: handleDeselectValue,
     onSelectionChangeColumn: handleSelectionChangeColumn,
     onSelectionChangeOperator: handleSelectionChangeOperator,
     operator,
@@ -5214,8 +5345,10 @@ var import_jsx_runtime54 = require("react/jsx-runtime");
 var classBase16 = "vuuFilterClause";
 var FilterClauseEditor = ({
   className,
+  onCancel,
   onChange,
-  onClose,
+  onDropdownClose,
+  onDropdownOpen,
   filterClause,
   suggestionProvider,
   tableSchema,
@@ -5227,6 +5360,9 @@ var FilterClauseEditor = ({
     InputProps,
     columnRef,
     onChangeValue,
+    onClear,
+    onClearKeyDown,
+    onDeselectValue,
     onSelectionChangeColumn,
     onSelectionChangeOperator,
     operator,
@@ -5236,6 +5372,7 @@ var FilterClauseEditor = ({
     valueRef
   } = useFilterClauseEditor({
     filterClause,
+    onCancel,
     onChange,
     tableSchema
   });
@@ -5252,7 +5389,9 @@ var FilterClauseEditor = ({
             InputProps,
             className: (0, import_classnames29.default)(`${classBase16}Field`, `${classBase16}Value`),
             column: selectedColumn,
+            "data-field": "value",
             filterClause,
+            onDeselect: onDeselectValue,
             onInputComplete: onChangeValue,
             operator,
             ref: valueRef,
@@ -5298,29 +5437,33 @@ var FilterClauseEditor = ({
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       ExpandoCombobox,
       {
-        title: "column",
         InputProps,
+        allowBackspaceClearsSelection: true,
         className: (0, import_classnames29.default)(`${classBase16}Field`, `${classBase16}Column`),
+        "data-field": "column",
         initialHighlightedIndex: 0,
         itemToString: (column) => column.name,
+        onSelectionChange: onSelectionChangeColumn,
         ref: columnRef,
         source: columns,
-        onSelectionChange: onSelectionChangeColumn,
+        title: "column",
         value: (_a = selectedColumn == null ? void 0 : selectedColumn.name) != null ? _a : ""
       }
     ),
     (selectedColumn == null ? void 0 : selectedColumn.name) ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       ExpandoCombobox,
       {
-        title: "operator",
         InputProps,
+        allowBackspaceClearsSelection: true,
         className: (0, import_classnames29.default)(`${classBase16}Field`, `${classBase16}Operator`, {
           [`${classBase16}Operator-hidden`]: selectedColumn === null
         }),
+        "data-field": "operator",
         initialHighlightedIndex: 0,
+        onSelectionChange: onSelectionChangeOperator,
         ref: operatorRef,
         source: getOperators(selectedColumn),
-        onSelectionChange: onSelectionChangeOperator,
+        title: "operator",
         value: operator != null ? operator : ""
       }
     ) : null,
@@ -5328,8 +5471,9 @@ var FilterClauseEditor = ({
     value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       import_core18.Button,
       {
-        className: `${classBase16}-closeButton`,
-        onClick: onClose,
+        className: `${classBase16}-clearButton`,
+        onClick: onClear,
+        onKeyDown: onClearKeyDown,
         "data-icon": "close"
       }
     ) : null
@@ -5337,8 +5481,9 @@ var FilterClauseEditor = ({
 };
 
 // src/filter-pill/FilterPill.tsx
+var import_src = require("@vuu-ui/vuu-popups/src");
 var import_vuu_ui_controls16 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
 var import_classnames31 = __toESM(require_classnames(), 1);
 var import_react75 = require("react");
 
@@ -5447,18 +5592,25 @@ var filterClauses = (filter, clauses = []) => {
 var DEFAULT_ADD_FILTER_OPTS = {
   combineWith: "and"
 };
+var removeLastClause = (filter) => {
+  const { filters } = filter;
+  if (filters.length > 2) {
+    return {
+      ...filter,
+      filters: filter.filters.slice(0, -1)
+    };
+  } else {
+    return filter.filters[0];
+  }
+};
 var addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
   if ((0, import_vuu_utils27.isMultiClauseFilter)(existingFilter) && existingFilter.op === combineWith) {
-    if ((0, import_vuu_utils27.isCompleteFilter)(clause)) {
-      return {
-        ...existingFilter,
-        filters: existingFilter.filters.concat(clause)
-      };
-    } else {
-      throw Error(
-        "filter-utils, replaceFilter, only a valid clause can be added to a filter"
-      );
-    }
+    return {
+      ...existingFilter,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      filters: existingFilter.filters.concat(clause)
+    };
   } else {
     return {
       op: combineWith,
@@ -5737,23 +5889,44 @@ var getNumericFilter = (column, op, value) => {
   return { column, op, value };
 };
 
-// src/filter-pill/FilterPill.tsx
+// src/filter-pill/filterAsReactNode.tsx
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime56 = require("react/jsx-runtime");
+var filterAsReactNode = (f) => {
+  if ((0, import_vuu_utils28.isMultiClauseFilter)(f)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: "Match all ..." }),
+      f.filters.map((f2, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: filterAsReactNode(f2) }, i))
+    ] });
+  } else if ((0, import_vuu_utils28.isMultiValueFilter)(f)) {
+    if (f.values.length > 3) {
+      return `${f.column} ${f.op} [${f.values.slice(0, 3).map(import_vuu_utils28.quotedStrings).join(",")} ...]`;
+    } else {
+      return `${f.column} ${f.op} [${f.values.map(import_vuu_utils28.quotedStrings).join(",")}]`;
+    }
+  } else {
+    return `${f.column} ${f.op} ${(0, import_vuu_utils28.filterValue)(f.value)}`;
+  }
+};
+
+// src/filter-pill/FilterPill.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var classBase18 = "vuuFilterPill";
 var getFilterLabel = (filter) => {
   if (filter.name) {
     return filter.name;
-  } else if ((0, import_vuu_utils28.isMultiClauseFilter)(filter)) {
+  } else if ((0, import_vuu_utils29.isMultiClauseFilter)(filter)) {
     const [firstClause] = filterClauses(filter);
-    return `${(0, import_vuu_utils28.filterAsQuery)(firstClause)} ${filter.op} ...`;
+    return `${(0, import_vuu_utils29.filterAsQuery)(firstClause)} ${filter.op} ...`;
   } else {
-    return (0, import_vuu_utils28.filterAsQuery)(filter);
+    return (0, import_vuu_utils29.filterAsQuery)(filter);
   }
 };
 var FilterPill = ({
+  className: classNameProp,
   editable = true,
   filter,
-  className: classNameProp,
+  id: idProp,
   onBeginEdit,
   onExitEditMode,
   onMenuAction,
@@ -5765,6 +5938,7 @@ var FilterPill = ({
     onBeginEdit == null ? void 0 : onBeginEdit(filter);
   }, [filter, onBeginEdit]);
   const label = getFilterLabel(filter);
+  const id = useId(idProp);
   const handleMenuClose = (0, import_react75.useCallback)((reason) => {
     if ((reason == null ? void 0 : reason.type) === "escape") {
       requestAnimationFrame(() => {
@@ -5774,15 +5948,21 @@ var FilterPill = ({
       });
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  const { anchorProps, tooltipProps } = (0, import_src.useTooltip)({
+    id,
+    placement: "below",
+    tooltipContent: filterAsReactNode(filter)
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
+      ...anchorProps,
       ...htmlAttributes,
       className: (0, import_classnames31.default)(classBase18, classNameProp),
       "data-text": label,
       ref: rootRef,
       children: [
-        editable && onExitEditMode ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        editable && onExitEditMode ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           import_vuu_ui_controls16.EditableLabel,
           {
             defaultValue: label,
@@ -5790,14 +5970,20 @@ var FilterPill = ({
             onExitEditMode
           },
           label
-        ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: `${classBase18}-label`, children: label }),
-        showMenu && onMenuAction ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: `${classBase18}-label`, children: label }),
+        showMenu && onMenuAction ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           FilterPillMenu,
           {
             filter,
             onMenuAction,
             onMenuClose: handleMenuClose
           }
+        ) : null,
+        tooltipProps ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          import_src.Tooltip,
+          {
+            ...tooltipProps
+          }
         ) : null
       ]
     }
@@ -5805,7 +5991,7 @@ var FilterPill = ({
 };
 
 // src/filter-bar/useFilterBar.ts
-var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
 var import_react77 = require("react");
 
 // src/filter-bar/useFilters.ts
@@ -5814,7 +6000,8 @@ var import_react76 = require("react");
 var useFilters = ({
   defaultFilters,
   filters: filtersProp,
-  onFiltersChanged
+  onFiltersChanged,
+  tableSchema
 }) => {
   const [filters, setFilters] = (0, import_vuu_ui_controls17.useControlled)({
     controlled: filtersProp,
@@ -5822,6 +6009,77 @@ var useFilters = ({
     name: "useFilters",
     state: "Filters"
   });
+  const { getApplicationSettings, saveApplicationSettings } = useLayoutManager();
+  const hasFilter = (filters2, name) => filters2.findIndex((f) => f.name === name) !== -1;
+  const saveFilterToSettings = (0, import_react76.useCallback)(
+    (filter, name) => {
+      if (tableSchema && name) {
+        const savedFilters = getApplicationSettings(
+          "filters"
+        );
+        let newFilters = savedFilters;
+        const { module: module2, table } = tableSchema.table;
+        const key = `${module2}:${table}`;
+        if (savedFilters) {
+          if (savedFilters[key]) {
+            if (hasFilter(savedFilters[key], name)) {
+              newFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].map(
+                  (f) => f.name === name ? { ...filter, name } : f
+                )
+              };
+            } else if ((filter == null ? void 0 : filter.name) && (filter == null ? void 0 : filter.name) !== name && hasFilter(savedFilters[key], filter.name)) {
+              newFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].map(
+                  (f) => f.name === filter.name ? { ...filter, name } : f
+                )
+              };
+            } else {
+              newFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].concat({ ...filter, name })
+              };
+            }
+          } else {
+            newFilters = {
+              ...savedFilters,
+              [key]: [{ ...filter, name }]
+            };
+          }
+        } else {
+          newFilters = {
+            [key]: [{ ...filter, name }]
+          };
+        }
+        if (newFilters !== savedFilters) {
+          saveApplicationSettings(newFilters, "filters");
+        }
+      }
+    },
+    [getApplicationSettings, saveApplicationSettings, tableSchema]
+  );
+  const removeFilterFromSettings = (0, import_react76.useCallback)(
+    (filter) => {
+      var _a;
+      if (tableSchema && filter.name) {
+        const savedFilters = getApplicationSettings(
+          "filters"
+        );
+        const { module: module2, table } = tableSchema.table;
+        const key = `${module2}:${table}`;
+        if (((_a = savedFilters[key]) == null ? void 0 : _a.findIndex((f) => f.name === filter.name)) !== -1) {
+          const newSavedFilters = {
+            ...savedFilters,
+            [key]: savedFilters[key].filter((f) => f.name !== filter.name)
+          };
+          saveApplicationSettings(newSavedFilters, "filters");
+        }
+      }
+    },
+    [getApplicationSettings, saveApplicationSettings, tableSchema]
+  );
   const handleAddFilter = (0, import_react76.useCallback)(
     (filter) => {
       const index = filters.length;
@@ -5834,6 +6092,9 @@ var useFilters = ({
   );
   const handleDeleteFilter = (0, import_react76.useCallback)(
     (filter) => {
+      console.log(`handleDeleteFilter`, {
+        filter
+      });
       let index = -1;
       const newFilters = filters.filter((f, i) => {
         if (f !== filter) {
@@ -5845,9 +6106,10 @@ var useFilters = ({
       });
       setFilters(newFilters);
       onFiltersChanged == null ? void 0 : onFiltersChanged(newFilters);
+      removeFilterFromSettings(filter);
       return index;
     },
-    [filters, onFiltersChanged, setFilters]
+    [filters, onFiltersChanged, removeFilterFromSettings, setFilters]
   );
   const handleRenameFilter = (0, import_react76.useCallback)(
     (filter, name) => {
@@ -5862,9 +6124,10 @@ var useFilters = ({
       });
       setFilters(newFilters);
       onFiltersChanged == null ? void 0 : onFiltersChanged(newFilters);
+      saveFilterToSettings(filter, name);
       return index;
     },
-    [filters, onFiltersChanged, setFilters]
+    [filters, onFiltersChanged, saveFilterToSettings, setFilters]
   );
   const handleChangeFilter = (0, import_react76.useCallback)(
     (filter) => {
@@ -5901,7 +6164,8 @@ var useFilterBar = ({
   onApplyFilter,
   onChangeActiveFilterIndex: onChangeActiveFilterIndexProp,
   onFiltersChanged,
-  showMenu: showMenuProp
+  showMenu: showMenuProp,
+  tableSchema
 }) => {
   const addButtonRef = (0, import_react77.useRef)(null);
   const editingFilter = (0, import_react77.useRef)();
@@ -5917,7 +6181,8 @@ var useFilterBar = ({
     onRenameFilter
   } = useFilters({
     filters: filtersProp,
-    onFiltersChanged
+    onFiltersChanged,
+    tableSchema
   });
   const editPillLabel = (0, import_react77.useCallback)(
     (index) => {
@@ -5931,7 +6196,7 @@ var useFilterBar = ({
             ".vuuEditableLabel"
           );
           if (editableLabel) {
-            (0, import_vuu_utils29.dispatchMouseEvent)(editableLabel, "dblclick");
+            (0, import_vuu_utils30.dispatchMouseEvent)(editableLabel, "dblclick");
           }
         }
       });
@@ -5970,7 +6235,7 @@ var useFilterBar = ({
   );
   const applyFilter = (0, import_react77.useCallback)(
     (filter) => {
-      const filterQuery = filter ? (0, import_vuu_utils29.filterAsQuery)(filter) : "";
+      const filterQuery = filter ? (0, import_vuu_utils30.filterAsQuery)(filter) : "";
       onApplyFilter({
         filter: filterQuery,
         filterStruct: filter
@@ -6093,12 +6358,16 @@ var useFilterBar = ({
           setShowMenu(false);
           return true;
         }
-        case "and-clause":
-          setEditFilter(
-            (filter) => addClause(filter, EMPTY_FILTER_CLAUSE)
+        case "and-clause": {
+          const newFilter = addClause(
+            editFilter,
+            EMPTY_FILTER_CLAUSE
           );
+          console.log({ newFilter });
+          setEditFilter(newFilter);
           setShowMenu(false);
           return true;
+        }
         case "or-clause":
           setEditFilter(
             (filter) => addClause(filter, {}, { combineWith: "or" })
@@ -6138,7 +6407,7 @@ var useFilterBar = ({
   );
   const handleClickAddFilter = (0, import_react77.useCallback)(() => {
     setEditFilter({});
-  }, []);
+  }, [setEditFilter]);
   const handleClickRemoveFilter = (0, import_react77.useCallback)(() => {
     setEditFilter(void 0);
   }, []);
@@ -6147,13 +6416,43 @@ var useFilterBar = ({
     onMenuAction: handlePillMenuAction,
     onExitEditMode: handleExitEditFilterName
   };
-  const handleChangeFilterClause = (filterClause) => {
-    if (filterClause !== void 0) {
-      setEditFilter((filter) => replaceClause(filter, filterClause));
-      setShowMenu(true);
+  const handleChangeFilterClause = (0, import_react77.useCallback)(
+    (filterClause) => {
+      console.log(`handleCHangeFilterClause ${JSON.stringify(filterClause)}`);
+      if (filterClause !== void 0) {
+        const newFilter = replaceClause(editFilter, filterClause);
+        setEditFilter(newFilter);
+        setShowMenu(true);
+      }
+    },
+    [editFilter]
+  );
+  const handleCancelFilterClause = (0, import_react77.useCallback)(
+    (reason) => {
+      if (reason === "Backspace" && (0, import_vuu_utils30.isMultiClauseFilter)(editFilter)) {
+        setEditFilter(removeLastClause(editFilter));
+      }
+    },
+    [editFilter]
+  );
+  const handleBlurFilterClause = (0, import_react77.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 onKeyDown = (0, import_react77.useCallback)(
+  }, []);
+  const handleFocusFilterClause = (0, import_react77.useCallback)(() => {
+    setShowMenu(false);
+  }, []);
+  const handleKeyDownFilterbar = (0, import_react77.useCallback)(
     (evt) => {
       if (evt.key === "Escape" && editFilter !== void 0) {
         setEditFilter(void 0);
@@ -6163,6 +6462,39 @@ var useFilterBar = ({
     },
     [editFilter]
   );
+  const handleKeyDownMenu = (0, import_react77.useCallback)(
+    (evt) => {
+      var _a;
+      console.log(`keydown from List ${evt.key}`);
+      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_react77.useCallback)((evt) => {
     if (evt.key === "ArrowLeft") {
       console.log("navgiate to the Toolbar");
@@ -6183,11 +6515,15 @@ var useFilterBar = ({
     addButtonProps,
     editFilter,
     filters,
+    onBlurFilterClause: handleBlurFilterClause,
+    onCancelFilterClause: handleCancelFilterClause,
     onChangeActiveFilterIndex: handleChangeActiveFilterIndex,
     onClickAddFilter: handleClickAddFilter,
     onClickRemoveFilter: handleClickRemoveFilter,
     onChangeFilterClause: handleChangeFilterClause,
-    onKeyDown,
+    onFocusFilterClause: handleFocusFilterClause,
+    onKeyDownFilterbar: handleKeyDownFilterbar,
+    onKeyDownMenu: handleKeyDownMenu,
     onMenuAction: handleMenuAction,
     onNavigateOutOfBounds: handlePillNavigationOutOfBounds,
     pillProps,
@@ -6196,9 +6532,54 @@ var useFilterBar = ({
   };
 };
 
+// src/filter-bar/FilterBarMenu.tsx
+var import_vuu_popups7 = require("@vuu-ui/vuu-popups");
+
+// src/filter-bar/useFilterBarMenu.ts
+var import_react78 = require("react");
+var useFilterBarMenu = () => {
+  const menuBuilder = (0, import_react78.useCallback)(() => {
+    return [
+      {
+        label: `You have no saved filters for this table`,
+        action: `no-action`
+      }
+    ];
+  }, []);
+  const menuActionHandler = (0, import_react78.useMemo)(
+    () => (action) => {
+      console.log(`invoke menuId `, {
+        action
+      });
+      return false;
+    },
+    []
+  );
+  return {
+    menuBuilder,
+    menuActionHandler
+  };
+};
+
+// src/filter-bar/FilterBarMenu.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var FilterBarMenu = () => {
+  const classBase21 = "vuuFilterBarMenu";
+  const { menuBuilder, menuActionHandler } = useFilterBarMenu();
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: classBase21, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_vuu_popups7.PopupMenu,
+    {
+      icon: "tune",
+      menuBuilder,
+      menuActionHandler,
+      tabIndex: -1
+    }
+  ) });
+};
+
 // src/filter-bar/FilterBar.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var import_react79 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react80 = require("react");
 var classBase19 = "vuuFilterBar";
 var FilterBar = ({
   activeFilterIndex: activeFilterIndexProp = [],
@@ -6212,18 +6593,22 @@ var FilterBar = ({
   tableSchema,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react78.useRef)(null);
+  const rootRef = (0, import_react79.useRef)(null);
   const {
     activeFilterIndex,
     addButtonProps,
     editFilter,
     filters,
+    onBlurFilterClause,
+    onCancelFilterClause,
     onClickAddFilter,
     onClickRemoveFilter,
     onChangeFilterClause,
     onChangeActiveFilterIndex,
+    onFocusFilterClause,
     onNavigateOutOfBounds,
-    onKeyDown,
+    onKeyDownFilterbar,
+    onKeyDownMenu,
     onMenuAction,
     pillProps,
     promptProps,
@@ -6235,19 +6620,19 @@ var FilterBar = ({
     onApplyFilter,
     onChangeActiveFilterIndex: onChangeActiveFilterIndexProp,
     onFiltersChanged,
-    showMenu: showMenuProp
+    showMenu: showMenuProp,
+    tableSchema
   });
   const className = (0, import_classnames32.default)(classBase19, classNameProp, {
     [`${classBase19}-display`]: editFilter === void 0,
     [`${classBase19}-edit`]: editFilter !== void 0
   });
-  const onClose = () => console.log("Closing filter component");
   const getChildren2 = () => {
     const items = [];
     if (editFilter === void 0) {
       filters.forEach((filter, i) => {
         items.push(
-          /* @__PURE__ */ (0, import_react79.createElement)(FilterPill, { ...pillProps, filter, key: `filter-${i}` })
+          /* @__PURE__ */ (0, import_react80.createElement)(FilterPill, { ...pillProps, filter, key: `filter-${i}` })
         );
       });
       return items;
@@ -6255,14 +6640,16 @@ var FilterBar = ({
       const filterClauses2 = filterClauses(editFilter);
       filterClauses2.forEach((filterClause, i) => {
         items.push(
-          /* @__PURE__ */ (0, import_react79.createElement)(
+          /* @__PURE__ */ (0, import_react80.createElement)(
             FilterClauseEditor,
             {
               ...FilterClauseEditorProps2,
               filterClause,
               key: `editor-${i}`,
+              onCancel: onCancelFilterClause,
               onChange: onChangeFilterClause,
-              onClose,
+              onBlur: onBlurFilterClause,
+              onFocus: onFocusFilterClause,
               tableSchema
             }
           )
@@ -6270,11 +6657,18 @@ var FilterBar = ({
       });
       if (showMenu) {
         items.push(
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FilterBuilderMenu, { onMenuAction }, "menu")
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            FilterBuilderMenu,
+            {
+              onMenuAction,
+              ListProps: { onKeyDownCapture: onKeyDownMenu }
+            },
+            "menu"
+          )
         );
       }
       items.push(
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           import_core19.Button,
           {
             className: `${classBase19}-remove`,
@@ -6289,16 +6683,16 @@ var FilterBar = ({
       return items;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       ...htmlAttributes,
       className,
-      onKeyDown,
+      onKeyDown: onKeyDownFilterbar,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: `${classBase19}-icon`, "data-icon": "tune" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FilterBarMenu, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           Toolbar,
           {
             activeItemIndex: activeFilterIndex,
@@ -6309,7 +6703,7 @@ var FilterBar = ({
             children: getChildren2()
           }
         ),
-        editFilter === void 0 ? /* @__PURE__ */ (0, import_react79.createElement)(
+        editFilter === void 0 ? /* @__PURE__ */ (0, import_react80.createElement)(
           import_core19.Button,
           {
             ...addButtonProps,
@@ -6322,8 +6716,8 @@ var FilterBar = ({
             variant: "primary"
           }
         ) : null,
-        promptProps ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_vuu_popups7.Prompt,
+        promptProps ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          import_vuu_popups8.Prompt,
           {
             ...promptProps,
             PopupProps: {
@@ -9329,14 +9723,14 @@ var parser = LRParser.deserialize({
 });
 
 // ../vuu-filter-parser/src/FilterTreeWalker.ts
-var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils31 = 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_utils30.isMultiClauseFilter)(filter) && filter.op === op) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter) && filter.op === op) {
       return;
     } else {
       __privateSet(this, _filter, {
@@ -9348,14 +9742,14 @@ var FilterExpression = class {
   add(filter) {
     if (__privateGet(this, _filter) === void 0) {
       __privateSet(this, _filter, filter);
-    } else if ((0, import_vuu_utils30.isMultiClauseFilter)(__privateGet(this, _filter))) {
+    } else if ((0, import_vuu_utils31.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_utils30.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setColumn(column, target);
@@ -9365,7 +9759,7 @@ var FilterExpression = class {
     }
   }
   setOp(value, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils30.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setOp(value, target);
@@ -9376,15 +9770,15 @@ var FilterExpression = class {
   }
   setValue(value, filter = __privateGet(this, _filter)) {
     var _a;
-    if ((0, import_vuu_utils30.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setValue(value, target);
       }
-    } else if ((0, import_vuu_utils30.isMultiValueFilter)(filter)) {
+    } else if ((0, import_vuu_utils31.isMultiValueFilter)(filter)) {
       (_a = filter.values) != null ? _a : filter.values = [];
       filter.values.push(value);
-    } else if ((0, import_vuu_utils30.isSingleValueFilter)(filter)) {
+    } else if ((0, import_vuu_utils31.isSingleValueFilter)(filter)) {
       filter.value = value;
     }
   }
@@ -9448,7 +9842,7 @@ var strictParser = parser.configure({ strict: true });
 
 // src/filter-input/useCodeMirrorEditor.ts
 var import_classnames33 = __toESM(require_classnames(), 1);
-var import_react81 = require("react");
+var import_react82 = require("react");
 
 // src/filter-input/FilterLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -9554,7 +9948,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/filter-input/useFilterAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react80 = require("react");
+var import_react81 = require("react");
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -9624,7 +10018,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = (0, import_react80.useCallback)(
+  const makeSuggestions = (0, import_react81.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -9635,7 +10029,7 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react80.useCallback)(
+  return (0, import_react81.useCallback)(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -9819,15 +10213,15 @@ var useCodeMirrorEditor = ({
   onSubmitFilter,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react81.useRef)(null);
-  const onSubmit = (0, import_react81.useRef)(noop);
-  const viewRef = (0, import_react81.useRef)();
+  const editorRef = (0, import_react82.useRef)(null);
+  const onSubmit = (0, import_react82.useRef)(noop);
+  const viewRef = (0, import_react82.useRef)();
   const completionFn = useAutoComplete(
     suggestionProvider,
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = (0, import_react81.useMemo)(() => {
+  const [createState, clearInput] = (0, import_react82.useMemo)(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -9902,7 +10296,7 @@ var useCodeMirrorEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onSubmitFilter]);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -9919,7 +10313,7 @@ var useCodeMirrorEditor = ({
 };
 
 // src/filter-input/FilterInput.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var classBase20 = "vuuFilterInput";
 var FilterInput = ({
   existingFilter,
@@ -9934,8 +10328,8 @@ var FilterInput = ({
     onSubmitFilter,
     suggestionProvider
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ...props, className: classBase20, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ...props, className: classBase20, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_core20.Button,
       {
         className: `${classBase20}-FilterButton`,
@@ -9943,8 +10337,8 @@ var FilterInput = ({
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `${classBase20}-Editor`, ref: editorRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `${classBase20}-Editor`, ref: editorRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_core20.Button,
       {
         className: `${classBase20}-ClearButton`,
@@ -9958,16 +10352,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_react82 = require("react");
+var import_react83 = require("react");
 
 // src/filter-input/filterInfo.ts
-var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
 var filterInfo = (filterName, filterQuery) => {
-  const rootElement = (0, import_vuu_utils31.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils31.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils31.createEl)("span", "function-name", filterName);
+  const rootElement = (0, import_vuu_utils32.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils32.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils32.createEl)("span", "function-name", filterName);
   headingElement.appendChild(nameElement);
-  const child2 = (0, import_vuu_utils31.createEl)("p", void 0, filterQuery);
+  const child2 = (0, import_vuu_utils32.createEl)("p", void 0, filterQuery);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   return rootElement;
@@ -10054,9 +10448,9 @@ var useFilterSuggestionProvider = ({
   table,
   typeaheadHook: useTypeahead = import_vuu_data_react2.useTypeaheadSuggestions
 }) => {
-  const latestSuggestionsRef = (0, import_react82.useRef)();
+  const latestSuggestionsRef = (0, import_react83.useRef)();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = (0, import_react82.useCallback)(
+  const getSuggestions = (0, import_react83.useCallback)(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -10146,7 +10540,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = (0, import_react82.useCallback)(
+  const isPartialMatch = (0, import_react83.useCallback)(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0