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

package/esm/index.js

@@ -1897,7 +1897,7 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
 
 // ../vuu-layout/src/layout-view/View.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { useForkRef as useForkRef3, useIdMemo as useId2 } from "@salt-ds/core";
+import { useForkRef as useForkRef3 } from "@salt-ds/core";
 import React14, {
   forwardRef as forwardRef5,
   useCallback as useCallback14,
@@ -2076,7 +2076,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     title: titleProp,
     ...restProps
   } = props;
-  const id = useId2(idProp);
+  const id = useId(idProp);
   const rootRef = useRef10(null);
   const mainRef = useRef10(null);
   const [componentProps, _setComponentProps] = useState7();
@@ -2347,7 +2347,7 @@ var LocalLayoutPersistenceManager = class {
           const newMetadata = {
             ...metadata,
             id,
-            created: formatDate(/* @__PURE__ */ new Date(), "dd.mm.yyyy")
+            created: formatDate("dd.mm.yyyy")(/* @__PURE__ */ new Date())
           };
           this.saveLayoutsWithMetadata(
             [...existingLayouts, { id, json: layout }],
@@ -2624,6 +2624,7 @@ import React18, {
 import { NotificationLevel, useNotifications } from "@vuu-ui/vuu-popups";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var LayoutManagementContext = React18.createContext({
+  getApplicationSettings: () => void 0,
   layoutMetadata: [],
   saveLayout: () => void 0,
   // The default Application JSON will be served if no LayoutManagementProvider
@@ -2632,6 +2633,7 @@ var LayoutManagementContext = React18.createContext({
   saveApplicationSettings: () => void 0,
   loadLayoutById: () => void 0
 });
+var useLayoutManager = () => useContext3(LayoutManagementContext);
 
 // ../vuu-shell/src/layout-management/LayoutList.tsx
 import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -3755,7 +3757,7 @@ var PaletteItem = memo2(
 );
 PaletteItem.displayName = "PaletteItem";
 var Palette = ({
-  ListProps: ListProps2,
+  ListProps: ListProps3,
   ViewProps: ViewProps4,
   children,
   className,
@@ -3814,7 +3816,7 @@ var Palette = ({
   return /* @__PURE__ */ jsx43(
     List2,
     {
-      ...ListProps2,
+      ...ListProps3,
       ...props,
       className: (0, import_classnames24.default)(classBase21, className, `${classBase21}-${orientation}`),
       itemHeight,
@@ -3839,7 +3841,7 @@ import React21, {
   useRef as useRef20
 } from "react";
 import { jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
-var classBase12 = "Tabs";
+var classBase12 = "vuuTabs";
 var getDefaultTabIcon = () => void 0;
 var getChildElements = (children) => {
   const elements = [];
@@ -3969,7 +3971,7 @@ var Stack = forwardRef8(function Stack2({
 Stack.displayName = "Stack";
 
 // ../vuu-layout/src/stack/StackLayout.tsx
-import { useIdMemo as useId3 } from "@salt-ds/core";
+import { useIdMemo as useId2 } from "@salt-ds/core";
 import React22, { useCallback as useCallback30, useRef as useRef21 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var defaultCreateNewChild = () => /* @__PURE__ */ jsx45(
@@ -3992,7 +3994,7 @@ var StackLayout = (props) => {
     ...restProps
   } = props;
   const { children } = props;
-  const id = useId3(idProp);
+  const id = useId2(idProp);
   const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
   const createNewChildFromContext = useLayoutCreateNewChild();
   const createNewChild = (_a = createNewChildProp != null ? createNewChildProp : createNewChildFromContext) != null ? _a : defaultCreateNewChild;
@@ -4716,7 +4718,10 @@ import { PopupComponent as Popup, Portal } from "@vuu-ui/vuu-popups";
 import { List as List3, ListItem as ListItem2 } from "@vuu-ui/vuu-ui-controls";
 import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var classBase14 = "vuuFilterBuilderMenu";
-var FilterBuilderMenu = ({ onMenuAction }) => {
+var FilterBuilderMenu = ({
+  ListProps: ListProps3,
+  onMenuAction
+}) => {
   const ref = useRef25(null);
   const listRef = useCallback34((el) => {
     if (el) {
@@ -4739,15 +4744,16 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
     /* @__PURE__ */ jsx50(Portal, { children: /* @__PURE__ */ jsx50(Popup, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ jsxs25(
       List3,
       {
+        ...ListProps3,
         className: `${classBase14}List`,
-        defaultHighlightedIndex: 1,
+        defaultHighlightedIndex: 0,
         itemHeight: 22,
         ref: listRef,
         onSelect: handleSelect,
         style: { position: "relative" },
         width: 100,
         children: [
-          /* @__PURE__ */ jsx50(ListItem2, { "data-action": "apply-save", className: "vuuMenuButton", children: "APPLY AND SAVE" }),
+          /* @__PURE__ */ jsx50(ListItem2, { "data-action": "apply-save", children: /* @__PURE__ */ jsx50("span", { className: "vuuMenuButton", children: "APPLY AND SAVE" }) }),
           /* @__PURE__ */ jsx50(ListItem2, { "data-action": "and-clause", children: "AND" }),
           /* @__PURE__ */ jsx50(ListItem2, { "data-action": "or-clause", children: "OR" })
         ]
@@ -4783,7 +4789,6 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
   value = "",
   ...props
 }, forwardedRef) {
-  var _a;
   const [text, setText] = useState20(value);
   const { itemToString = defaultToString } = props;
   const initialValue = useRef26(value);
@@ -4801,7 +4806,6 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
   const handleInputChange = useCallback35(
     (evt) => {
       const { value: value2 } = evt.target;
-      console.log(`onInputChange ${value2}`);
       setText(value2);
       onInputChange == null ? void 0 : onInputChange(evt);
     },
@@ -4810,7 +4814,7 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
   const handleSetSelectedText = useCallback35((text2) => {
     setText(text2);
   }, []);
-  const [InputProps, ListProps2] = useMemo16(() => {
+  const [InputProps, ListProps3] = useMemo16(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
@@ -4857,7 +4861,7 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
   const popupProps = {
     minWidth: "fit-content"
   };
-  return ((_a = props.source) == null ? void 0 : _a.length) === 0 ? null : /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       className: (0, import_classnames28.default)(classBase15, classNameProp),
@@ -4871,7 +4875,7 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
           PopupProps: popupProps,
           defaultValue: initialValue.current,
           fullWidth: true,
-          ListProps: ListProps2,
+          ListProps: ListProps3,
           InputProps,
           itemsToString,
           onSelectionChange: handleSelectionChange,
@@ -4970,10 +4974,14 @@ import {
   ExpandoInput as ExpandoInput2
 } from "@vuu-ui/vuu-ui-controls";
 import { jsx as jsx53 } from "react/jsx-runtime";
+var selectionKeys = ["Enter", " "];
+var NO_DATA_MATCH = ["No matching data"];
 var TextInput = forwardRef11(function TextInput2({
   InputProps: InputPropsProp = {},
   className,
   column,
+  "data-field": dataField,
+  onDeselect,
   onInputComplete,
   operator,
   suggestionProvider = useTypeaheadSuggestions,
@@ -5003,7 +5011,11 @@ var TextInput = forwardRef11(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);
       });
@@ -5037,6 +5049,9 @@ var TextInput = forwardRef11(function TextInput2({
     }
   }, [InputPropsProp, onInputComplete, operator, valueInputValue]);
   const getValueInputField = useCallback37(() => {
+    if (typeaheadValues.length === 0) {
+      return null;
+    }
     switch (operator) {
       case "in":
         return /* @__PURE__ */ jsx53(
@@ -5044,16 +5059,18 @@ var TextInput = forwardRef11(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__ */ jsx53(
           ExpandoCombobox,
           {
@@ -5064,7 +5081,9 @@ var TextInput = forwardRef11(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,
@@ -5072,12 +5091,14 @@ var TextInput = forwardRef11(function TextInput2({
             value
           }
         );
+      }
       case "ends":
         return /* @__PURE__ */ jsx53(
           ExpandoInput2,
           {
             ...InputProps,
             className,
+            "data-field": dataField,
             value: valueInputValue,
             ref: forwardedRef,
             onChange: handleInputChange
@@ -5088,11 +5109,14 @@ var TextInput = forwardRef11(function TextInput2({
           ExpandoCombobox,
           {
             InputProps,
+            allowBackspaceClearsSelection: true,
             className,
+            "data-field": dataField,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             title: "value",
             onInputChange: handleInputChange,
+            onDeselect,
             onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
@@ -5103,13 +5127,15 @@ var TextInput = forwardRef11(function TextInput2({
     operator,
     InputProps,
     className,
+    dataField,
     typeaheadValues,
     handleInputChange,
     handleMultiValueSelectionChange,
     forwardedRef,
     value,
-    handleSingleValueSelectionChange,
-    valueInputValue
+    valueInputValue,
+    onDeselect,
+    handleSingleValueSelectionChange
   ]);
   return getValueInputField();
 });
@@ -5132,29 +5158,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 {
@@ -5213,6 +5254,7 @@ var getFilterClauseValue = (filterClause) => {
 };
 var useFilterClauseEditor = ({
   filterClause,
+  onCancel,
   onChange,
   tableSchema
 }) => {
@@ -5223,6 +5265,10 @@ var useFilterClauseEditor = ({
   const [operator, _setOperator] = useState23(
     filterClause.op
   );
+  const findColumn = useCallback38(
+    (columnName) => tableSchema.columns.find((col) => col.name === columnName),
+    [tableSchema.columns]
+  );
   const setOperator = useCallback38((op) => {
     _setOperator(op);
   }, []);
@@ -5234,10 +5280,43 @@ var useFilterClauseEditor = ({
       setSelectedColumn(column != null ? column : void 0);
       setOperator(void 0);
       setValue(void 0);
-      focusNextElement();
+      setTimeout(() => {
+        focusNextElement();
+      }, 100);
     },
     [setOperator]
   );
+  const removeAndNavigateToNextInputIfAtBoundary = useCallback38(
+    (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 = useCallback38(
     (evt, selected) => {
       const op = selected;
@@ -5269,27 +5348,75 @@ var useFilterClauseEditor = ({
             value: value2
           });
         }
-        requestAnimationFrame(() => {
-          focusNextElement();
-        });
       }
     },
     [onChange, operator, selectedColumn == null ? void 0 : selectedColumn.name]
   );
+  const handleDeselectValue = useCallback38(() => {
+    setValue(void 0);
+  }, []);
   const handleKeyDownInput = useCallback38(
     (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 = useCallback38(
+    (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 = useCallback38((e) => {
+    e.stopPropagation();
+    if (e.key === "Backspace") {
+      focusNextFocusableElement("bwd");
+    }
+  }, []);
   const InputProps = useMemo18(
     () => ({
       inputProps: {
-        onKeyDown: handleKeyDownInput
+        onKeyDownCapture: handleKeyDownInput
       }
     }),
     [handleKeyDownInput]
@@ -5303,6 +5430,9 @@ var useFilterClauseEditor = ({
     InputProps,
     columnRef,
     onChangeValue: handleChangeValue,
+    onClear: handleClear,
+    onClearKeyDown: handleClearKeyDown,
+    onDeselectValue: handleDeselectValue,
     onSelectionChangeColumn: handleSelectionChangeColumn,
     onSelectionChangeOperator: handleSelectionChangeOperator,
     operator,
@@ -5319,8 +5449,10 @@ import { jsx as jsx54, jsxs as jsxs26 } from "react/jsx-runtime";
 var classBase16 = "vuuFilterClause";
 var FilterClauseEditor = ({
   className,
+  onCancel,
   onChange,
-  onClose,
+  onDropdownClose,
+  onDropdownOpen,
   filterClause,
   suggestionProvider,
   tableSchema,
@@ -5332,6 +5464,9 @@ var FilterClauseEditor = ({
     InputProps,
     columnRef,
     onChangeValue,
+    onClear,
+    onClearKeyDown,
+    onDeselectValue,
     onSelectionChangeColumn,
     onSelectionChangeOperator,
     operator,
@@ -5341,6 +5476,7 @@ var FilterClauseEditor = ({
     valueRef
   } = useFilterClauseEditor({
     filterClause,
+    onCancel,
     onChange,
     tableSchema
   });
@@ -5357,7 +5493,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,
@@ -5403,29 +5541,33 @@ var FilterClauseEditor = ({
     /* @__PURE__ */ jsx54(
       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__ */ jsx54(
       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,
@@ -5433,8 +5575,9 @@ var FilterClauseEditor = ({
     value !== void 0 ? /* @__PURE__ */ jsx54(
       Button9,
       {
-        className: `${classBase16}-closeButton`,
-        onClick: onClose,
+        className: `${classBase16}-clearButton`,
+        onClick: onClear,
+        onKeyDown: onClearKeyDown,
         "data-icon": "close"
       }
     ) : null
@@ -5443,8 +5586,12 @@ var FilterClauseEditor = ({
 
 // src/filter-pill/FilterPill.tsx
 var import_classnames31 = __toESM(require_classnames(), 1);
+import {
+  Tooltip,
+  useTooltip
+} from "@vuu-ui/vuu-popups/src";
 import { EditableLabel as EditableLabel2 } from "@vuu-ui/vuu-ui-controls";
-import { filterAsQuery, isMultiClauseFilter as isMultiClauseFilter2 } from "@vuu-ui/vuu-utils";
+import { filterAsQuery, isMultiClauseFilter as isMultiClauseFilter3 } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback40, useRef as useRef28 } from "react";
 
 // src/filter-pill-menu/FilterPillMenu.tsx
@@ -5533,7 +5680,6 @@ var FilterPillMenu = ({
 import {
   extractFilterForColumn,
   isAndFilter,
-  isCompleteFilter,
   isInFilter,
   isMultiClauseFilter,
   isMultiValueFilter as isMultiValueFilter2,
@@ -5562,18 +5708,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 (isMultiClauseFilter(existingFilter) && existingFilter.op === combineWith) {
-    if (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,
@@ -5852,13 +6005,38 @@ var getNumericFilter = (column, op, value) => {
   return { column, op, value };
 };
 
-// src/filter-pill/FilterPill.tsx
+// src/filter-pill/filterAsReactNode.tsx
+import {
+  filterValue,
+  isMultiClauseFilter as isMultiClauseFilter2,
+  isMultiValueFilter as isMultiValueFilter3,
+  quotedStrings
+} from "@vuu-ui/vuu-utils";
 import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+var filterAsReactNode = (f) => {
+  if (isMultiClauseFilter2(f)) {
+    return /* @__PURE__ */ jsxs27("div", { children: [
+      /* @__PURE__ */ jsx56("span", { children: "Match all ..." }),
+      f.filters.map((f2, i) => /* @__PURE__ */ jsx56("div", { children: filterAsReactNode(f2) }, i))
+    ] });
+  } else if (isMultiValueFilter3(f)) {
+    if (f.values.length > 3) {
+      return `${f.column} ${f.op} [${f.values.slice(0, 3).map(quotedStrings).join(",")} ...]`;
+    } else {
+      return `${f.column} ${f.op} [${f.values.map(quotedStrings).join(",")}]`;
+    }
+  } else {
+    return `${f.column} ${f.op} ${filterValue(f.value)}`;
+  }
+};
+
+// src/filter-pill/FilterPill.tsx
+import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
 var classBase18 = "vuuFilterPill";
 var getFilterLabel = (filter) => {
   if (filter.name) {
     return filter.name;
-  } else if (isMultiClauseFilter2(filter)) {
+  } else if (isMultiClauseFilter3(filter)) {
     const [firstClause] = filterClauses(filter);
     return `${filterAsQuery(firstClause)} ${filter.op} ...`;
   } else {
@@ -5866,9 +6044,10 @@ var getFilterLabel = (filter) => {
   }
 };
 var FilterPill = ({
+  className: classNameProp,
   editable = true,
   filter,
-  className: classNameProp,
+  id: idProp,
   onBeginEdit,
   onExitEditMode,
   onMenuAction,
@@ -5880,6 +6059,7 @@ var FilterPill = ({
     onBeginEdit == null ? void 0 : onBeginEdit(filter);
   }, [filter, onBeginEdit]);
   const label = getFilterLabel(filter);
+  const id = useId(idProp);
   const handleMenuClose = useCallback40((reason) => {
     if ((reason == null ? void 0 : reason.type) === "escape") {
       requestAnimationFrame(() => {
@@ -5889,15 +6069,21 @@ var FilterPill = ({
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxs27(
+  const { anchorProps, tooltipProps } = useTooltip({
+    id,
+    placement: "below",
+    tooltipContent: filterAsReactNode(filter)
+  });
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
+      ...anchorProps,
       ...htmlAttributes,
       className: (0, import_classnames31.default)(classBase18, classNameProp),
       "data-text": label,
       ref: rootRef,
       children: [
-        editable && onExitEditMode ? /* @__PURE__ */ jsx56(
+        editable && onExitEditMode ? /* @__PURE__ */ jsx57(
           EditableLabel2,
           {
             defaultValue: label,
@@ -5905,14 +6091,20 @@ var FilterPill = ({
             onExitEditMode
           },
           label
-        ) : /* @__PURE__ */ jsx56("span", { className: `${classBase18}-label`, children: label }),
-        showMenu && onMenuAction ? /* @__PURE__ */ jsx56(
+        ) : /* @__PURE__ */ jsx57("span", { className: `${classBase18}-label`, children: label }),
+        showMenu && onMenuAction ? /* @__PURE__ */ jsx57(
           FilterPillMenu,
           {
             filter,
             onMenuAction,
             onMenuClose: handleMenuClose
           }
+        ) : null,
+        tooltipProps ? /* @__PURE__ */ jsx57(
+          Tooltip,
+          {
+            ...tooltipProps
+          }
         ) : null
       ]
     }
@@ -5920,7 +6112,11 @@ var FilterPill = ({
 };
 
 // src/filter-bar/useFilterBar.ts
-import { dispatchMouseEvent as dispatchMouseEvent2, filterAsQuery as filterAsQuery2 } from "@vuu-ui/vuu-utils";
+import {
+  dispatchMouseEvent as dispatchMouseEvent2,
+  filterAsQuery as filterAsQuery2,
+  isMultiClauseFilter as isMultiClauseFilter4
+} from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback42,
   useEffect as useEffect14,
@@ -5935,7 +6131,8 @@ import { useCallback as useCallback41 } from "react";
 var useFilters = ({
   defaultFilters,
   filters: filtersProp,
-  onFiltersChanged
+  onFiltersChanged,
+  tableSchema
 }) => {
   const [filters, setFilters] = useControlled5({
     controlled: filtersProp,
@@ -5943,6 +6140,77 @@ var useFilters = ({
     name: "useFilters",
     state: "Filters"
   });
+  const { getApplicationSettings, saveApplicationSettings } = useLayoutManager();
+  const hasFilter = (filters2, name) => filters2.findIndex((f) => f.name === name) !== -1;
+  const saveFilterToSettings = useCallback41(
+    (filter, name) => {
+      if (tableSchema && name) {
+        const savedFilters = getApplicationSettings(
+          "filters"
+        );
+        let newFilters = savedFilters;
+        const { module, table } = tableSchema.table;
+        const key = `${module}:${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 = useCallback41(
+    (filter) => {
+      var _a;
+      if (tableSchema && filter.name) {
+        const savedFilters = getApplicationSettings(
+          "filters"
+        );
+        const { module, table } = tableSchema.table;
+        const key = `${module}:${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 = useCallback41(
     (filter) => {
       const index = filters.length;
@@ -5955,6 +6223,9 @@ var useFilters = ({
   );
   const handleDeleteFilter = useCallback41(
     (filter) => {
+      console.log(`handleDeleteFilter`, {
+        filter
+      });
       let index = -1;
       const newFilters = filters.filter((f, i) => {
         if (f !== filter) {
@@ -5966,9 +6237,10 @@ var useFilters = ({
       });
       setFilters(newFilters);
       onFiltersChanged == null ? void 0 : onFiltersChanged(newFilters);
+      removeFilterFromSettings(filter);
       return index;
     },
-    [filters, onFiltersChanged, setFilters]
+    [filters, onFiltersChanged, removeFilterFromSettings, setFilters]
   );
   const handleRenameFilter = useCallback41(
     (filter, name) => {
@@ -5983,9 +6255,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 = useCallback41(
     (filter) => {
@@ -6022,7 +6295,8 @@ var useFilterBar = ({
   onApplyFilter,
   onChangeActiveFilterIndex: onChangeActiveFilterIndexProp,
   onFiltersChanged,
-  showMenu: showMenuProp
+  showMenu: showMenuProp,
+  tableSchema
 }) => {
   const addButtonRef = useRef29(null);
   const editingFilter = useRef29();
@@ -6038,7 +6312,8 @@ var useFilterBar = ({
     onRenameFilter
   } = useFilters({
     filters: filtersProp,
-    onFiltersChanged
+    onFiltersChanged,
+    tableSchema
   });
   const editPillLabel = useCallback42(
     (index) => {
@@ -6214,12 +6489,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" })
@@ -6259,7 +6538,7 @@ var useFilterBar = ({
   );
   const handleClickAddFilter = useCallback42(() => {
     setEditFilter({});
-  }, []);
+  }, [setEditFilter]);
   const handleClickRemoveFilter = useCallback42(() => {
     setEditFilter(void 0);
   }, []);
@@ -6268,13 +6547,43 @@ var useFilterBar = ({
     onMenuAction: handlePillMenuAction,
     onExitEditMode: handleExitEditFilterName
   };
-  const handleChangeFilterClause = (filterClause) => {
-    if (filterClause !== void 0) {
-      setEditFilter((filter) => replaceClause(filter, filterClause));
-      setShowMenu(true);
+  const handleChangeFilterClause = useCallback42(
+    (filterClause) => {
+      console.log(`handleCHangeFilterClause ${JSON.stringify(filterClause)}`);
+      if (filterClause !== void 0) {
+        const newFilter = replaceClause(editFilter, filterClause);
+        setEditFilter(newFilter);
+        setShowMenu(true);
+      }
+    },
+    [editFilter]
+  );
+  const handleCancelFilterClause = useCallback42(
+    (reason) => {
+      if (reason === "Backspace" && isMultiClauseFilter4(editFilter)) {
+        setEditFilter(removeLastClause(editFilter));
+      }
+    },
+    [editFilter]
+  );
+  const handleBlurFilterClause = useCallback42((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 = useCallback42(
+  }, []);
+  const handleFocusFilterClause = useCallback42(() => {
+    setShowMenu(false);
+  }, []);
+  const handleKeyDownFilterbar = useCallback42(
     (evt) => {
       if (evt.key === "Escape" && editFilter !== void 0) {
         setEditFilter(void 0);
@@ -6284,6 +6593,39 @@ var useFilterBar = ({
     },
     [editFilter]
   );
+  const handleKeyDownMenu = useCallback42(
+    (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 = useCallback42((evt) => {
     if (evt.key === "ArrowLeft") {
       console.log("navgiate to the Toolbar");
@@ -6304,11 +6646,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,
@@ -6317,8 +6663,53 @@ var useFilterBar = ({
   };
 };
 
+// src/filter-bar/FilterBarMenu.tsx
+import { PopupMenu as PopupMenu3 } from "@vuu-ui/vuu-popups";
+
+// src/filter-bar/useFilterBarMenu.ts
+import { useCallback as useCallback43, useMemo as useMemo21 } from "react";
+var useFilterBarMenu = () => {
+  const menuBuilder = useCallback43(() => {
+    return [
+      {
+        label: `You have no saved filters for this table`,
+        action: `no-action`
+      }
+    ];
+  }, []);
+  const menuActionHandler = useMemo21(
+    () => (action) => {
+      console.log(`invoke menuId `, {
+        action
+      });
+      return false;
+    },
+    []
+  );
+  return {
+    menuBuilder,
+    menuActionHandler
+  };
+};
+
+// src/filter-bar/FilterBarMenu.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+var FilterBarMenu = () => {
+  const classBase21 = "vuuFilterBarMenu";
+  const { menuBuilder, menuActionHandler } = useFilterBarMenu();
+  return /* @__PURE__ */ jsx58("div", { className: classBase21, children: /* @__PURE__ */ jsx58(
+    PopupMenu3,
+    {
+      icon: "tune",
+      menuBuilder,
+      menuActionHandler,
+      tabIndex: -1
+    }
+  ) });
+};
+
 // src/filter-bar/FilterBar.tsx
-import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
 import { createElement } from "react";
 var classBase19 = "vuuFilterBar";
 var FilterBar = ({
@@ -6339,12 +6730,16 @@ var FilterBar = ({
     addButtonProps,
     editFilter,
     filters,
+    onBlurFilterClause,
+    onCancelFilterClause,
     onClickAddFilter,
     onClickRemoveFilter,
     onChangeFilterClause,
     onChangeActiveFilterIndex,
+    onFocusFilterClause,
     onNavigateOutOfBounds,
-    onKeyDown,
+    onKeyDownFilterbar,
+    onKeyDownMenu,
     onMenuAction,
     pillProps,
     promptProps,
@@ -6356,13 +6751,13 @@ 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) {
@@ -6382,8 +6777,10 @@ var FilterBar = ({
               ...FilterClauseEditorProps2,
               filterClause,
               key: `editor-${i}`,
+              onCancel: onCancelFilterClause,
               onChange: onChangeFilterClause,
-              onClose,
+              onBlur: onBlurFilterClause,
+              onFocus: onFocusFilterClause,
               tableSchema
             }
           )
@@ -6391,11 +6788,18 @@ var FilterBar = ({
       });
       if (showMenu) {
         items.push(
-          /* @__PURE__ */ jsx57(FilterBuilderMenu, { onMenuAction }, "menu")
+          /* @__PURE__ */ jsx59(
+            FilterBuilderMenu,
+            {
+              onMenuAction,
+              ListProps: { onKeyDownCapture: onKeyDownMenu }
+            },
+            "menu"
+          )
         );
       }
       items.push(
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx59(
           Button10,
           {
             className: `${classBase19}-remove`,
@@ -6410,16 +6814,16 @@ var FilterBar = ({
       return items;
     }
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ...htmlAttributes,
       className,
-      onKeyDown,
+      onKeyDown: onKeyDownFilterbar,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ jsx57("span", { className: `${classBase19}-icon`, "data-icon": "tune" }),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx59(FilterBarMenu, {}),
+        /* @__PURE__ */ jsx59(
           Toolbar,
           {
             activeItemIndex: activeFilterIndex,
@@ -6443,7 +6847,7 @@ var FilterBar = ({
             variant: "primary"
           }
         ) : null,
-        promptProps ? /* @__PURE__ */ jsx57(
+        promptProps ? /* @__PURE__ */ jsx59(
           Prompt,
           {
             ...promptProps,
@@ -9460,8 +9864,8 @@ var parser = LRParser.deserialize({
 
 // ../vuu-filter-parser/src/FilterTreeWalker.ts
 import {
-  isMultiClauseFilter as isMultiClauseFilter3,
-  isMultiValueFilter as isMultiValueFilter3,
+  isMultiClauseFilter as isMultiClauseFilter5,
+  isMultiValueFilter as isMultiValueFilter4,
   isSingleValueFilter as isSingleValueFilter3
 } from "@vuu-ui/vuu-utils";
 var _filter;
@@ -9470,7 +9874,7 @@ var FilterExpression = class {
     __privateAdd(this, _filter, void 0);
   }
   setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter3(filter) && filter.op === op) {
+    if (isMultiClauseFilter5(filter) && filter.op === op) {
       return;
     } else {
       __privateSet(this, _filter, {
@@ -9482,14 +9886,14 @@ var FilterExpression = class {
   add(filter) {
     if (__privateGet(this, _filter) === void 0) {
       __privateSet(this, _filter, filter);
-    } else if (isMultiClauseFilter3(__privateGet(this, _filter))) {
+    } else if (isMultiClauseFilter5(__privateGet(this, _filter))) {
       __privateGet(this, _filter).filters.push(filter);
     } else {
       throw Error(`Invalid filter passed to FilterExpression`);
     }
   }
   setColumn(column, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter3(filter)) {
+    if (isMultiClauseFilter5(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setColumn(column, target);
@@ -9499,7 +9903,7 @@ var FilterExpression = class {
     }
   }
   setOp(value, filter = __privateGet(this, _filter)) {
-    if (isMultiClauseFilter3(filter)) {
+    if (isMultiClauseFilter5(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setOp(value, target);
@@ -9510,12 +9914,12 @@ var FilterExpression = class {
   }
   setValue(value, filter = __privateGet(this, _filter)) {
     var _a;
-    if (isMultiClauseFilter3(filter)) {
+    if (isMultiClauseFilter5(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setValue(value, target);
       }
-    } else if (isMultiValueFilter3(filter)) {
+    } else if (isMultiValueFilter4(filter)) {
       (_a = filter.values) != null ? _a : filter.values = [];
       filter.values.push(value);
     } else if (isSingleValueFilter3(filter)) {
@@ -9582,7 +9986,7 @@ var strictParser = parser.configure({ strict: true });
 
 // src/filter-input/useCodeMirrorEditor.ts
 var import_classnames33 = __toESM(require_classnames(), 1);
-import { useEffect as useEffect15, useMemo as useMemo21, useRef as useRef31 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo22, useRef as useRef31 } from "react";
 
 // src/filter-input/FilterLanguage.ts
 import {
@@ -9701,7 +10105,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback43 } from "react";
+import { useCallback as useCallback44 } from "react";
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -9771,7 +10175,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = useCallback43(
+  const makeSuggestions = useCallback44(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -9782,7 +10186,7 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return useCallback43(
+  return useCallback44(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -9974,7 +10378,7 @@ var useCodeMirrorEditor = ({
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = useMemo21(() => {
+  const [createState, clearInput] = useMemo22(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -10066,7 +10470,7 @@ var useCodeMirrorEditor = ({
 };
 
 // src/filter-input/FilterInput.tsx
-import { jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 var classBase20 = "vuuFilterInput";
 var FilterInput = ({
   existingFilter,
@@ -10081,8 +10485,8 @@ var FilterInput = ({
     onSubmitFilter,
     suggestionProvider
   });
-  return /* @__PURE__ */ jsxs29("div", { ...props, className: classBase20, children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs30("div", { ...props, className: classBase20, children: [
+    /* @__PURE__ */ jsx60(
       Button11,
       {
         className: `${classBase20}-FilterButton`,
@@ -10090,8 +10494,8 @@ var FilterInput = ({
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ jsx58("div", { className: `${classBase20}-Editor`, ref: editorRef }),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx60("div", { className: `${classBase20}-Editor`, ref: editorRef }),
+    /* @__PURE__ */ jsx60(
       Button11,
       {
         className: `${classBase20}-ClearButton`,
@@ -10115,7 +10519,7 @@ import {
   getTypeaheadParams,
   useTypeaheadSuggestions as useTypeaheadSuggestions2
 } from "@vuu-ui/vuu-data-react";
-import { useCallback as useCallback44, useRef as useRef32 } from "react";
+import { useCallback as useCallback45, useRef as useRef32 } from "react";
 
 // src/filter-input/filterInfo.ts
 import { createEl } from "@vuu-ui/vuu-utils";
@@ -10213,7 +10617,7 @@ var useFilterSuggestionProvider = ({
 }) => {
   const latestSuggestionsRef = useRef32();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = useCallback44(
+  const getSuggestions = useCallback45(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -10303,7 +10707,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = useCallback44(
+  const isPartialMatch = useCallback45(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0
@@ -10370,6 +10774,7 @@ export {
   getTypeaheadFilter,
   overrideColName,
   removeFilter,
+  removeLastClause,
   replaceClause,
   saveLocalEntity,
   splitFilterOnColumn,