@vuu-ui/vuu-filters 0.8.0-debug → 0.8.1-debug

package/cjs/index.js

@@ -567,52 +567,282 @@ var RangeFilter = ({
   ] });
 };
 
-// ../vuu-data-react/src/hooks/useDataSource.ts
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+// src/column-filter/TypeaheadFilter.tsx
+var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
+var import_salt_lab2 = require("@heswell/salt-lab");
 var import_react3 = require("react");
-var { SELECTED } = import_vuu_utils2.metadataKeys;
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TypeaheadFilter = ({
+  defaultTypeaheadParams,
+  filterValues = [],
+  onChange: onFilterChange
+}) => {
+  const [tableName, columnName] = defaultTypeaheadParams;
+  const [searchValue, setSearchValue] = (0, import_react3.useState)("");
+  const [typeaheadValues, setTypeaheadValues] = (0, import_react3.useState)([]);
+  const getSuggestions = (0, import_vuu_data_react.useTypeaheadSuggestions)();
+  (0, import_react3.useEffect)(() => {
+    const params = searchValue ? [tableName, columnName, searchValue] : defaultTypeaheadParams;
+    let isSubscribed = true;
+    getSuggestions(params).then((options) => {
+      if (!isSubscribed) {
+        return;
+      }
+      if (isStartsWithValue(filterValues[0])) {
+        options.unshift(filterValues[0]);
+      }
+      if (searchValue) {
+        options.unshift(`${searchValue}...`);
+      }
+      options.concat(filterValues);
+      setTypeaheadValues(options);
+    });
+    return () => {
+      isSubscribed = false;
+    };
+  }, [
+    filterValues,
+    searchValue,
+    columnName,
+    tableName,
+    getSuggestions,
+    defaultTypeaheadParams
+  ]);
+  const onInputChange = (0, import_react3.useCallback)(
+    (evt) => {
+      const value = evt.target.value;
+      setSearchValue(value);
+    },
+    []
+  );
+  const onSelectionChange = (0, import_react3.useCallback)(
+    (_evt, selected) => {
+      setSearchValue("");
+      if (selected === null)
+        return;
+      if (selected.some(isStartsWithValue)) {
+        selected = selected.filter(isStartsWithValue).slice(-1);
+      }
+      const filter = getTypeaheadFilter(
+        columnName,
+        selected,
+        isStartsWithValue(selected[0])
+      );
+      onFilterChange(selected, filter);
+    },
+    [columnName, onFilterChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_salt_lab2.ComboBoxDeprecated,
+    {
+      multiSelect: true,
+      onInputChange,
+      onChange: onSelectionChange,
+      source: typeaheadValues,
+      style: { minWidth: 200 },
+      inputValue: searchValue,
+      selectedItem: filterValues
+    },
+    columnName
+  );
+};
 
-// ../vuu-data-react/src/hooks/useServerConnectionStatus.ts
+// src/column-filter/ColumnListItem.tsx
 var import_react4 = require("react");
-var import_vuu_data = require("@vuu-ui/vuu-data");
+var import_salt_lab3 = require("@heswell/salt-lab");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ColumnListItem = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MemoColumnItem, { ...props });
+};
+var MemoColumnItem = (0, import_react4.memo)(function MemoizedItem({
+  item,
+  itemTextHighlightPattern,
+  ...restProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab3.ListItem, { ...restProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { marginLeft: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_salt_lab3.Highlighter,
+    {
+      matchPattern: itemTextHighlightPattern,
+      text: item == null ? void 0 : item.name
+    }
+  ) }) });
+});
 
-// ../vuu-data-react/src/hooks/useServerConnectionQuality.ts
+// src/column-filter/useColumnFilterStore.ts
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var import_react5 = require("react");
-var import_vuu_data2 = require("@vuu-ui/vuu-data");
-
-// ../vuu-data-react/src/hooks/useTypeaheadSuggestions.ts
-var import_react6 = require("react");
-var import_vuu_data3 = require("@vuu-ui/vuu-data");
-var TYPEAHEAD_MESSAGE_CONSTANTS = {
-  type: "RPC_CALL",
-  service: "TypeAheadRpcHandler"
-};
-var getTypeaheadParams = (table, column, text = "", selectedValues = []) => {
-  if (text !== "" && !selectedValues.includes(text.toLowerCase())) {
-    return [table, column, text];
-  }
-  return [table, column];
-};
-var useTypeaheadSuggestions = () => {
-  const getTypeaheadSuggestions = (0, import_react6.useCallback)(
-    async (params) => {
-      const rpcMessage = params.length === 2 ? {
-        method: "getUniqueFieldValues",
-        params,
-        ...TYPEAHEAD_MESSAGE_CONSTANTS
-      } : {
-        method: "getUniqueFieldValuesStartingWith",
-        params,
-        ...TYPEAHEAD_MESSAGE_CONSTANTS
-      };
-      const suggestions = await (0, import_vuu_data3.makeRpcCall)(rpcMessage);
-      return suggestions;
+var addOrReplace = (array, newValue, key) => array.filter((oldValue) => oldValue[key] !== newValue[key]).concat(newValue);
+var useColumnFilterStore = (onFilterSubmit) => {
+  var _a, _b;
+  const [selectedColumnName, setSelectedColumnName] = (0, import_react5.useState)("");
+  const [savedFilters, setSavedFilters] = (0, import_react5.useState)([]);
+  const [rangeValues, setRangeValues] = (0, import_react5.useState)([]);
+  const [typeaheadValues, setTypeaheadValues] = (0, import_react5.useState)([]);
+  const clear = () => {
+    setSelectedColumnName("");
+    setRangeValues([]);
+    setTypeaheadValues([]);
+    setSavedFilters([]);
+    onFilterSubmit({ filter: "" });
+  };
+  const updateFilters = (0, import_react5.useCallback)(
+    (newFilter) => {
+      const newSavedFilters = addOrReplace(
+        savedFilters,
+        { column: selectedColumnName, filter: newFilter },
+        "column"
+      );
+      setSavedFilters(newSavedFilters);
+      const combinedFilter = newSavedFilters.map((x) => x.filter).reduce((prev, filter) => {
+        if (filter === void 0)
+          return prev;
+        return addFilter(prev, filter, { combineWith: AND });
+      }, void 0);
+      const query = combinedFilter === void 0 ? "" : (0, import_vuu_utils2.filterAsQuery)(combinedFilter);
+      onFilterSubmit({ filter: query, filterStruct: combinedFilter });
+    },
+    [selectedColumnName, onFilterSubmit, savedFilters]
+  );
+  const onTypeaheadChange = (0, import_react5.useCallback)(
+    (newValues, newFilter) => {
+      setTypeaheadValues(
+        addOrReplace(
+          typeaheadValues,
+          { column: selectedColumnName, value: newValues },
+          "column"
+        )
+      );
+      updateFilters(newFilter);
+    },
+    [selectedColumnName, typeaheadValues, updateFilters]
+  );
+  const onRangeChange = (0, import_react5.useCallback)(
+    (newValues, newFilter) => {
+      setRangeValues(
+        addOrReplace(
+          rangeValues,
+          { column: selectedColumnName, value: newValues },
+          "column"
+        )
+      );
+      updateFilters(newFilter);
     },
+    [selectedColumnName, rangeValues, updateFilters]
+  );
+  const onSelectedColumnChange = (0, import_react5.useCallback)(
+    (column) => setSelectedColumnName((column == null ? void 0 : column.name) || ""),
     []
   );
-  return getTypeaheadSuggestions;
+  const rangeValue = (_a = rangeValues.filter(
+    (v) => v.column === selectedColumnName
+  )[0]) == null ? void 0 : _a.value;
+  const typeaheadValue = (_b = typeaheadValues.filter(
+    (v) => v.column === selectedColumnName
+  )[0]) == null ? void 0 : _b.value;
+  return {
+    clear,
+    selectedColumnName,
+    rangeValue,
+    typeaheadValue,
+    onSelectedColumnChange,
+    onRangeChange,
+    onTypeaheadChange
+  };
+};
+
+// src/column-filter/ColumnFilter.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ColumnFilter = ({
+  className,
+  table,
+  columns,
+  onFilterSubmit,
+  ...htmlAttributes
+}) => {
+  const {
+    clear,
+    onTypeaheadChange,
+    onRangeChange,
+    onSelectedColumnChange,
+    selectedColumnName,
+    rangeValue,
+    typeaheadValue
+  } = useColumnFilterStore(onFilterSubmit);
+  const getFilterComponent = () => {
+    var _a;
+    const defaultTypeaheadParams = [table, selectedColumnName];
+    const selectedColumnType = (_a = columns.find(
+      (column) => column.name === selectedColumnName
+    )) == null ? void 0 : _a.serverDataType;
+    switch (selectedColumnType) {
+      case "string":
+      case "char":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_salt_lab4.ToolbarField,
+          {
+            label: "Start typing to select a filter",
+            labelPlacement: "top",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              TypeaheadFilter,
+              {
+                defaultTypeaheadParams,
+                filterValues: typeaheadValue,
+                onChange: onTypeaheadChange
+              }
+            )
+          }
+        );
+      case "int":
+      case "long":
+      case "double":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarField, { label: "Select a range", labelPlacement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          RangeFilter,
+          {
+            defaultTypeaheadParams,
+            filterValues: rangeValue,
+            onChange: onRangeChange
+          }
+        ) });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarField, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.Text, { children: "Data type unsupported" }) });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_salt_lab4.Toolbar,
+    {
+      ...htmlAttributes,
+      style: { alignItems: "center", height: "36px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_salt_lab4.ToolbarField,
+          {
+            label: "Select a column to filter",
+            labelPlacement: "top",
+            style: { width: 180 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_salt_lab4.Dropdown,
+              {
+                source: columns,
+                ListItem: ColumnListItem,
+                itemToString: (column) => column.name,
+                onSelectionChange: (_evt, column) => onSelectedColumnChange(column)
+              }
+            )
+          }
+        ),
+        selectedColumnName && getFilterComponent(),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarButton, { onClick: clear, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DeleteIcon, {}) })
+      ]
+    }
+  );
 };
 
+// src/filter-input/FilterInput.tsx
+var import_core2 = require("@salt-ds/core");
+
+// src/filter-input/useCodeMirrorEditor.ts
+var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
+
 // ../../node_modules/@lezer/common/dist/index.js
 var DefaultBufferLength = 1024;
 var nextPropID = 0;
@@ -2213,26 +2443,58 @@ var Stack = class {
   // be done.
   /// @internal
   forceReduce() {
-    let reduce = this.p.parser.stateSlot(
+    let { parser: parser2 } = this.p;
+    let reduce = parser2.stateSlot(
       this.state,
       5
       /* ParseState.ForcedReduce */
     );
     if ((reduce & 65536) == 0)
       return false;
-    let { parser: parser2 } = this.p;
     if (!parser2.validAction(this.state, reduce)) {
       let depth = reduce >> 19, term = reduce & 65535;
       let target = this.stack.length - depth * 3;
-      if (target < 0 || parser2.getGoto(this.stack[target], term, false) < 0)
-        return false;
-      this.storeNode(0, this.reducePos, this.reducePos, 4, true);
+      if (target < 0 || parser2.getGoto(this.stack[target], term, false) < 0) {
+        let backup = this.findForcedReduction();
+        if (backup == null)
+          return false;
+        reduce = backup;
+      }
+      this.storeNode(0, this.pos, this.pos, 4, true);
       this.score -= 100;
     }
     this.reducePos = this.pos;
     this.reduce(reduce);
     return true;
   }
+  /// Try to scan through the automaton to find some kind of reduction
+  /// that can be applied. Used when the regular ForcedReduce field
+  /// isn't a valid action. @internal
+  findForcedReduction() {
+    let { parser: parser2 } = this.p, seen = [];
+    let explore = (state, depth) => {
+      if (seen.includes(state))
+        return;
+      seen.push(state);
+      return parser2.allActions(state, (action) => {
+        if (action & (262144 | 131072))
+          ;
+        else if (action & 65536) {
+          let rDepth = (action >> 19) - depth;
+          if (rDepth > 1) {
+            let term = action & 65535, target = this.stack.length - rDepth * 3;
+            if (target >= 0 && parser2.getGoto(this.stack[target], term, false) >= 0)
+              return rDepth << 19 | 65536 | term;
+          }
+        } else {
+          let found = explore(action, depth + 1);
+          if (found != null)
+            return found;
+        }
+      });
+    };
+    return explore(this.state, 0);
+  }
   /// @internal
   forceAll() {
     while (!this.p.parser.stateFlag(
@@ -2301,13 +2563,13 @@ var Stack = class {
   emitContext() {
     let last = this.buffer.length - 1;
     if (last < 0 || this.buffer[last] != -3)
-      this.buffer.push(this.curContext.hash, this.reducePos, this.reducePos, -3);
+      this.buffer.push(this.curContext.hash, this.pos, this.pos, -3);
   }
   /// @internal
   emitLookAhead() {
     let last = this.buffer.length - 1;
     if (last < 0 || this.buffer[last] != -4)
-      this.buffer.push(this.lookAhead, this.reducePos, this.reducePos, -4);
+      this.buffer.push(this.lookAhead, this.pos, this.pos, -4);
   }
   updateContext(context) {
     if (context != this.curContext.context) {
@@ -2664,16 +2926,17 @@ var LocalTokenGroup = class {
   token(input, stack) {
     let start = input.pos, skipped = 0;
     for (; ; ) {
+      let atEof = input.next < 0, nextPos = input.resolveOffset(1, 1);
       readToken(this.data, input, stack, 0, this.data, this.precTable);
       if (input.token.value > -1)
         break;
       if (this.elseToken == null)
         return;
-      if (input.next < 0)
+      if (!atEof)
+        skipped++;
+      if (nextPos == null)
         break;
-      input.advance();
-      input.reset(input.pos, input.token);
-      skipped++;
+      input.reset(nextPos, input.token);
     }
     if (skipped) {
       input.reset(start, input.token);
@@ -3386,26 +3649,30 @@ var LRParser = class extends Parser {
   }
   /// @internal
   validAction(state, action) {
-    if (action == this.stateSlot(
+    return !!this.allActions(state, (a) => a == action ? true : null);
+  }
+  /// @internal
+  allActions(state, action) {
+    let deflt = this.stateSlot(
       state,
       4
       /* ParseState.DefaultReduce */
-    ))
-      return true;
+    );
+    let result = deflt ? action(deflt) : void 0;
     for (let i = this.stateSlot(
       state,
       1
       /* ParseState.Actions */
-    ); ; i += 3) {
+    ); result == null; i += 3) {
       if (this.data[i] == 65535) {
         if (this.data[i + 1] == 1)
           i = pair(this.data, i + 2);
         else
-          return false;
+          break;
       }
-      if (action == pair(this.data, i + 1))
-        return true;
+      result = action(pair(this.data, i + 1));
     }
+    return result;
   }
   /// Get the states that can follow this one through shift actions or
   /// goto jumps. @internal
@@ -3678,291 +3945,9 @@ var walkTree = (tree, source) => {
 // ../vuu-filter-parser/src/FilterParser.ts
 var strictParser = parser.configure({ strict: true });
 
-// ../vuu-data-react/src/hooks/useVuuMenuActions.ts
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react7 = require("react");
-var { KEY } = import_vuu_utils4.metadataKeys;
-
-// ../vuu-data-react/src/hooks/useVuuTables.ts
-var import_react8 = require("react");
-var import_vuu_data4 = require("@vuu-ui/vuu-data");
-
-// src/column-filter/TypeaheadFilter.tsx
-var import_salt_lab2 = require("@heswell/salt-lab");
-var import_react9 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TypeaheadFilter = ({
-  defaultTypeaheadParams,
-  filterValues = [],
-  onChange: onFilterChange
-}) => {
-  const [tableName, columnName] = defaultTypeaheadParams;
-  const [searchValue, setSearchValue] = (0, import_react9.useState)("");
-  const [typeaheadValues, setTypeaheadValues] = (0, import_react9.useState)([]);
-  const getSuggestions = useTypeaheadSuggestions();
-  (0, import_react9.useEffect)(() => {
-    const params = searchValue ? [tableName, columnName, searchValue] : defaultTypeaheadParams;
-    let isSubscribed = true;
-    getSuggestions(params).then((options) => {
-      if (!isSubscribed) {
-        return;
-      }
-      if (isStartsWithValue(filterValues[0])) {
-        options.unshift(filterValues[0]);
-      }
-      if (searchValue) {
-        options.unshift(`${searchValue}...`);
-      }
-      options.concat(filterValues);
-      setTypeaheadValues(options);
-    });
-    return () => {
-      isSubscribed = false;
-    };
-  }, [
-    filterValues,
-    searchValue,
-    columnName,
-    tableName,
-    getSuggestions,
-    defaultTypeaheadParams
-  ]);
-  const onInputChange = (0, import_react9.useCallback)(
-    (evt) => {
-      const value = evt.target.value;
-      setSearchValue(value);
-    },
-    []
-  );
-  const onSelectionChange = (0, import_react9.useCallback)(
-    (_evt, selected) => {
-      setSearchValue("");
-      if (selected === null)
-        return;
-      if (selected.some(isStartsWithValue)) {
-        selected = selected.filter(isStartsWithValue).slice(-1);
-      }
-      const filter = getTypeaheadFilter(
-        columnName,
-        selected,
-        isStartsWithValue(selected[0])
-      );
-      onFilterChange(selected, filter);
-    },
-    [columnName, onFilterChange]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_salt_lab2.ComboBoxDeprecated,
-    {
-      multiSelect: true,
-      onInputChange,
-      onChange: onSelectionChange,
-      source: typeaheadValues,
-      style: { minWidth: 200 },
-      inputValue: searchValue,
-      selectedItem: filterValues
-    },
-    columnName
-  );
-};
-
-// src/column-filter/ColumnListItem.tsx
-var import_react10 = require("react");
-var import_salt_lab3 = require("@heswell/salt-lab");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ColumnListItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MemoColumnItem, { ...props });
-};
-var MemoColumnItem = (0, import_react10.memo)(function MemoizedItem({
-  item,
-  itemTextHighlightPattern,
-  ...restProps
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab3.ListItem, { ...restProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { marginLeft: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_salt_lab3.Highlighter,
-    {
-      matchPattern: itemTextHighlightPattern,
-      text: item == null ? void 0 : item.name
-    }
-  ) }) });
-});
-
-// src/column-filter/useColumnFilterStore.ts
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
-var import_react11 = require("react");
-var addOrReplace = (array, newValue, key) => array.filter((oldValue) => oldValue[key] !== newValue[key]).concat(newValue);
-var useColumnFilterStore = (onFilterSubmit) => {
-  var _a, _b;
-  const [selectedColumnName, setSelectedColumnName] = (0, import_react11.useState)("");
-  const [savedFilters, setSavedFilters] = (0, import_react11.useState)([]);
-  const [rangeValues, setRangeValues] = (0, import_react11.useState)([]);
-  const [typeaheadValues, setTypeaheadValues] = (0, import_react11.useState)([]);
-  const clear = () => {
-    setSelectedColumnName("");
-    setRangeValues([]);
-    setTypeaheadValues([]);
-    setSavedFilters([]);
-    onFilterSubmit({ filter: "" });
-  };
-  const updateFilters = (0, import_react11.useCallback)(
-    (newFilter) => {
-      const newSavedFilters = addOrReplace(
-        savedFilters,
-        { column: selectedColumnName, filter: newFilter },
-        "column"
-      );
-      setSavedFilters(newSavedFilters);
-      const combinedFilter = newSavedFilters.map((x) => x.filter).reduce((prev, filter) => {
-        if (filter === void 0)
-          return prev;
-        return addFilter(prev, filter, { combineWith: AND });
-      }, void 0);
-      const query = combinedFilter === void 0 ? "" : (0, import_vuu_utils5.filterAsQuery)(combinedFilter);
-      onFilterSubmit({ filter: query, filterStruct: combinedFilter });
-    },
-    [selectedColumnName, onFilterSubmit, savedFilters]
-  );
-  const onTypeaheadChange = (0, import_react11.useCallback)(
-    (newValues, newFilter) => {
-      setTypeaheadValues(
-        addOrReplace(
-          typeaheadValues,
-          { column: selectedColumnName, value: newValues },
-          "column"
-        )
-      );
-      updateFilters(newFilter);
-    },
-    [selectedColumnName, typeaheadValues, updateFilters]
-  );
-  const onRangeChange = (0, import_react11.useCallback)(
-    (newValues, newFilter) => {
-      setRangeValues(
-        addOrReplace(
-          rangeValues,
-          { column: selectedColumnName, value: newValues },
-          "column"
-        )
-      );
-      updateFilters(newFilter);
-    },
-    [selectedColumnName, rangeValues, updateFilters]
-  );
-  const onSelectedColumnChange = (0, import_react11.useCallback)(
-    (column) => setSelectedColumnName((column == null ? void 0 : column.name) || ""),
-    []
-  );
-  const rangeValue = (_a = rangeValues.filter(
-    (v) => v.column === selectedColumnName
-  )[0]) == null ? void 0 : _a.value;
-  const typeaheadValue = (_b = typeaheadValues.filter(
-    (v) => v.column === selectedColumnName
-  )[0]) == null ? void 0 : _b.value;
-  return {
-    clear,
-    selectedColumnName,
-    rangeValue,
-    typeaheadValue,
-    onSelectedColumnChange,
-    onRangeChange,
-    onTypeaheadChange
-  };
-};
-
-// src/column-filter/ColumnFilter.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ColumnFilter = ({
-  className,
-  table,
-  columns,
-  onFilterSubmit,
-  ...htmlAttributes
-}) => {
-  const {
-    clear,
-    onTypeaheadChange,
-    onRangeChange,
-    onSelectedColumnChange,
-    selectedColumnName,
-    rangeValue,
-    typeaheadValue
-  } = useColumnFilterStore(onFilterSubmit);
-  const getFilterComponent = () => {
-    var _a;
-    const defaultTypeaheadParams = [table, selectedColumnName];
-    const selectedColumnType = (_a = columns.find(
-      (column) => column.name === selectedColumnName
-    )) == null ? void 0 : _a.serverDataType;
-    switch (selectedColumnType) {
-      case "string":
-      case "char":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_salt_lab4.ToolbarField,
-          {
-            label: "Start typing to select a filter",
-            labelPlacement: "top",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              TypeaheadFilter,
-              {
-                defaultTypeaheadParams,
-                filterValues: typeaheadValue,
-                onChange: onTypeaheadChange
-              }
-            )
-          }
-        );
-      case "int":
-      case "long":
-      case "double":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarField, { label: "Select a range", labelPlacement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          RangeFilter,
-          {
-            defaultTypeaheadParams,
-            filterValues: rangeValue,
-            onChange: onRangeChange
-          }
-        ) });
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarField, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.Text, { children: "Data type unsupported" }) });
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_salt_lab4.Toolbar,
-    {
-      ...htmlAttributes,
-      style: { alignItems: "center", height: "36px" },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_salt_lab4.ToolbarField,
-          {
-            label: "Select a column to filter",
-            labelPlacement: "top",
-            style: { width: 180 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_salt_lab4.Dropdown,
-              {
-                source: columns,
-                ListItem: ColumnListItem,
-                itemToString: (column) => column.name,
-                onSelectionChange: (_evt, column) => onSelectedColumnChange(column)
-              }
-            )
-          }
-        ),
-        selectedColumnName && getFilterComponent(),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab4.ToolbarButton, { onClick: clear, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DeleteIcon, {}) })
-      ]
-    }
-  );
-};
-
-// src/filter-input/FilterInput.tsx
-var import_core2 = require("@salt-ds/core");
-
 // src/filter-input/useCodeMirrorEditor.ts
-var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
 var import_classnames = __toESM(require_classnames(), 1);
-var import_react13 = require("react");
+var import_react7 = require("react");
 
 // src/filter-input/FilterLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -4067,7 +4052,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/filter-input/useFilterAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react12 = require("react");
+var import_react6 = require("react");
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -4137,7 +4122,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = (0, import_react12.useCallback)(
+  const makeSuggestions = (0, import_react6.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -4148,7 +4133,7 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react12.useCallback)(
+  return (0, import_react6.useCallback)(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -4332,15 +4317,15 @@ var useCodeMirrorEditor = ({
   onSubmitFilter,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react13.useRef)(null);
-  const onSubmit = (0, import_react13.useRef)(noop);
-  const viewRef = (0, import_react13.useRef)();
+  const editorRef = (0, import_react7.useRef)(null);
+  const onSubmit = (0, import_react7.useRef)(noop);
+  const viewRef = (0, import_react7.useRef)();
   const completionFn = useAutoComplete(
     suggestionProvider,
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = (0, import_react13.useMemo)(() => {
+  const [createState, clearInput] = (0, import_react7.useMemo)(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -4415,7 +4400,7 @@ var useCodeMirrorEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onSubmitFilter]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -4470,16 +4455,17 @@ var FilterInput = ({
 
 // src/filter-input/useFilterSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
-var import_react14 = require("react");
+var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
+var import_react8 = require("react");
 
 // src/filter-input/filterInfo.ts
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
 var filterInfo = (filterName, filterQuery) => {
-  const rootElement = (0, import_vuu_utils6.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils6.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils6.createEl)("span", "function-name", filterName);
+  const rootElement = (0, import_vuu_utils4.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils4.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils4.createEl)("span", "function-name", filterName);
   headingElement.appendChild(nameElement);
-  const child2 = (0, import_vuu_utils6.createEl)("p", void 0, filterQuery);
+  const child2 = (0, import_vuu_utils4.createEl)("p", void 0, filterQuery);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   return rootElement;
@@ -4564,11 +4550,11 @@ var useFilterSuggestionProvider = ({
   namedFilters,
   saveOptions = defaultSaveOptions,
   table,
-  typeaheadHook: useTypeahead = useTypeaheadSuggestions
+  typeaheadHook: useTypeahead = import_vuu_data_react2.useTypeaheadSuggestions
 }) => {
-  const latestSuggestionsRef = (0, import_react14.useRef)();
+  const latestSuggestionsRef = (0, import_react8.useRef)();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = (0, import_react14.useCallback)(
+  const getSuggestions = (0, import_react8.useCallback)(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -4616,7 +4602,7 @@ var useFilterSuggestionProvider = ({
                 );
               }
               const prefix = Array.isArray(selection) ? selection.length === 0 ? "[" : "," : "";
-              const params = getTypeaheadParams(
+              const params = (0, import_vuu_data_react2.getTypeaheadParams)(
                 table,
                 columnName,
                 startsWith
@@ -4658,7 +4644,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = (0, import_react14.useCallback)(
+  const isPartialMatch = (0, import_react8.useCallback)(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0
@@ -4689,12 +4675,12 @@ var import_salt_lab8 = require("@heswell/salt-lab");
 var import_classnames2 = __toESM(require_classnames(), 1);
 
 // src/filter-toolbar/useFilterToolbar.tsx
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var import_salt_lab7 = require("@heswell/salt-lab");
 
 // src/filter-toolbar/FilterDropdown.tsx
 var import_salt_lab5 = require("@heswell/salt-lab");
-var import_react15 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var isString = (s) => typeof s === "string";
 var stripQuotes = (selected) => {
@@ -4716,9 +4702,9 @@ var FilterDropdown = ({
 }) => {
   const selected = selectedProp != null ? stripQuotes(selectedProp) : void 0;
   const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
-  const [values, setValues] = (0, import_react15.useState)(initialValues);
+  const [values, setValues] = (0, import_react9.useState)(initialValues);
   console.log({ initialValues });
-  const handleOpenChange = (0, import_react15.useCallback)(
+  const handleOpenChange = (0, import_react9.useCallback)(
     async (isOpen) => {
       if (isOpen) {
         const values2 = await suggestionProvider.getSuggestions("columnValue", {
@@ -4743,7 +4729,7 @@ var FilterDropdown = ({
 
 // src/filter-toolbar/FilterDropdownMultiSelect.tsx
 var import_salt_lab6 = require("@heswell/salt-lab");
-var import_react16 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var isString2 = (s) => typeof s === "string";
 var stripQuotes2 = (selected) => {
@@ -4767,8 +4753,8 @@ var FilterDropdownMultiSelect = ({
 }) => {
   const selected = stripQuotes2(selectedProp);
   const initialValues = Array.isArray(selected) ? selected : selected != null ? [selected] : [];
-  const [values, setValues] = (0, import_react16.useState)(initialValues);
-  const handleOpenChange = (0, import_react16.useCallback)(
+  const [values, setValues] = (0, import_react10.useState)(initialValues);
+  const handleOpenChange = (0, import_react10.useCallback)(
     async (isOpen) => {
       if (isOpen) {
         const values2 = await suggestionProvider.getSuggestions("columnValue", {
@@ -4795,7 +4781,7 @@ var FilterDropdownMultiSelect = ({
 // src/filter-toolbar/useFilterToolbar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var filterToControl = (filter, suggestionProvider) => {
-  if ((0, import_vuu_utils7.isNamedFilter)(filter)) {
+  if ((0, import_vuu_utils5.isNamedFilter)(filter)) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_salt_lab7.ToggleButton,
       {
@@ -4806,7 +4792,7 @@ var filterToControl = (filter, suggestionProvider) => {
       }
     );
   }
-  if ((0, import_vuu_utils7.isSingleValueFilter)(filter)) {
+  if ((0, import_vuu_utils5.isSingleValueFilter)(filter)) {
     const { column, value } = filter;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_salt_lab7.ToolbarField,
@@ -4829,7 +4815,7 @@ var filterToControl = (filter, suggestionProvider) => {
       column
     );
   }
-  if ((0, import_vuu_utils7.isMultiValueFilter)(filter)) {
+  if ((0, import_vuu_utils5.isMultiValueFilter)(filter)) {
     const values = filter.values.map((v) => v.toString());
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_salt_lab7.ToolbarField,