@vuu-ui/vuu-filters 2.1.19-beta.1 → 2.1.19-beta.2

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-filter-types": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filter-types": "2.1.19-beta.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "2.1.19-beta.1",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.1",
-    "@vuu-ui/vuu-filter-parser": "2.1.19-beta.1",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.1",
-    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table": "2.1.19-beta.1",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1",
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filter-parser": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",
@@ -30,13 +30,12 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/FilterAggregator.js

@@ -0,0 +1,107 @@
+import { getTypedRange, getTypedValue, isAndFilter, isBetweenFilter, isExtendedFilter, isMultiClauseFilter, isSingleValueFilter, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause.js";
+function installExtendedFilters(filter, throwIfUndefined = false) {
+    if (void 0 !== filter) if (isExtendedFilter(filter)) {
+        const { column, op, value, extendedOptions } = filter;
+        return new ExtendedSingleValueFilterClause(column, op, value, extendedOptions);
+    } else if (!isMultiClauseFilter(filter)) return filter;
+    else if (filter.filters.some(isExtendedFilter)) return {
+        op: filter.op,
+        filters: filter.filters.map((f)=>installExtendedFilters(f, true))
+    };
+    else return filter;
+    if (throwIfUndefined) throw Error("filter is undefined");
+}
+class FilterAggregator {
+    #filters = new Map();
+    constructor(filter){
+        const runtimeFilter = installExtendedFilters(filter);
+        if (isSingleValueFilter(runtimeFilter)) this.#filters.set(runtimeFilter.column, runtimeFilter);
+        else if (isBetweenFilter(runtimeFilter)) this.#filters.set(runtimeFilter.filters[0].column, runtimeFilter);
+        else if (isAndFilter(runtimeFilter)) runtimeFilter.filters.forEach((f)=>{
+            if (isBetweenFilter(f)) this.#filters.set(f.filters[0].column, f);
+            else this.#filters.set(f.column, f);
+        });
+    }
+    add(column, value, op, extendedFilterOptions) {
+        const { serverDataType = "string", type } = column;
+        const isInclusive = "between-inclusive" === op;
+        const dataType = isTypeDescriptor(type) ? type.name : type ?? serverDataType;
+        if (Array.isArray(value)) {
+            const [value1, value2] = getTypedRange(value, dataType, extendedFilterOptions);
+            if (void 0 !== value1 && void 0 !== value2) {
+                const filter = extendedFilterOptions ? {
+                    op: "and",
+                    filters: [
+                        new ExtendedSingleValueFilterClause(column.name, isInclusive ? ">=" : ">", value1, extendedFilterOptions),
+                        new ExtendedSingleValueFilterClause(column.name, isInclusive ? "<=" : "<", value2, extendedFilterOptions)
+                    ]
+                } : {
+                    op: "and",
+                    filters: [
+                        {
+                            column: column.name,
+                            op: ">",
+                            value: value1
+                        },
+                        {
+                            column: column.name,
+                            op: "<",
+                            value: value2
+                        }
+                    ]
+                };
+                this.#filters.set(column.name, filter);
+            } else if (void 0 !== value1) this.#filters.set(column.name, {
+                column: column.name,
+                op: "=",
+                value: value1
+            });
+            else if (void 0 !== value2) this.#filters.set(column.name, {
+                column: column.name,
+                op: "<",
+                value: value2
+            });
+        } else {
+            const typedValue = getTypedValue(value.toString(), dataType, true);
+            this.#filters.set(column.name, {
+                column: column.name,
+                op: "=",
+                value: typedValue
+            });
+        }
+    }
+    has({ name }) {
+        return this.#filters.has(name);
+    }
+    get({ name }) {
+        return this.#filters.get(name);
+    }
+    clear() {
+        this.#filters.clear();
+    }
+    remove(column) {
+        if (!this.#filters.has(column.name)) return false;
+        this.#filters.delete(column.name);
+        return true;
+    }
+    get isEmpty() {
+        return 0 === this.#filters.size;
+    }
+    get count() {
+        return this.#filters.size;
+    }
+    get filter() {
+        const { size } = this.#filters;
+        if (0 === size) return;
+        if (1 !== size) return {
+            op: "and",
+            filters: Array.from(this.#filters.values())
+        };
+        {
+            const [filter] = this.#filters.values();
+            return filter;
+        }
+    }
+}
+export { FilterAggregator };

package/src/FilterModel.js

@@ -0,0 +1,161 @@
+import { EventEmitter, isMultiClauseFilter, isMultiValueFilter, isSingleValueFilter } from "@vuu-ui/vuu-utils";
+const hasValues = ({ values })=>Array.isArray(values) && values.length > 0;
+const isValidFilterClause = (filterClause)=>{
+    if (void 0 === filterClause.op || void 0 === filterClause.column) return false;
+    if (isMultiValueFilter(filterClause)) return hasValues(filterClause);
+    if (isSingleValueFilter(filterClause)) return void 0 !== filterClause.value && "" !== filterClause.value;
+    throw Error("isValidFilterClause should never reach this far");
+};
+const isValidFilter = (filter)=>{
+    if (void 0 === filter) return false;
+    if (isMultiClauseFilter(filter)) return filter.filters.every(isValidFilter);
+    return isValidFilterClause(filter);
+};
+const isValidFilterModel = (filterModel)=>{
+    if (filterModel.isMultiClauseFilter) return filterModel.filterClauses.every((f)=>f.isValid);
+    return 1 === filterModel.filterClauses.length && filterModel.filterClauses[0].isValid;
+};
+class FilterClauseModel extends EventEmitter {
+    #filterClause;
+    #isValid;
+    constructor(filterClause){
+        super();
+        this.#filterClause = filterClause;
+        this.#isValid = isValidFilterClause(filterClause);
+    }
+    get isValid() {
+        return this.#isValid;
+    }
+    setIsValid(isValid) {
+        this.#isValid = isValid;
+        this.emit("isValid", isValid);
+    }
+    get column() {
+        return this.#filterClause.column;
+    }
+    set column(column) {
+        this.#filterClause = {
+            column
+        };
+        const isValid = isValidFilterClause(this.#filterClause);
+        this.emit("filterClause", this.#filterClause, isValid);
+        if (isValid !== this.#isValid) this.setIsValid(isValid);
+    }
+    get op() {
+        return this.#filterClause.op;
+    }
+    setOp(op) {
+        this.#filterClause = {
+            ...this.#filterClause,
+            op
+        };
+        const isValid = isValidFilterClause(this.#filterClause);
+        this.emit("filterClause", this.#filterClause, isValid);
+        if (isValid !== this.#isValid) this.setIsValid(isValid);
+    }
+    setValue(value, isFinal = true) {
+        if (isSingleValueFilter(this.#filterClause)) this.#filterClause = {
+            ...this.#filterClause,
+            value
+        };
+        else if (Array.isArray(value)) this.#filterClause = {
+            ...this.#filterClause,
+            values: value
+        };
+        const isValid = isValidFilterClause(this.#filterClause);
+        if (isValid !== this.#isValid) this.setIsValid(isValid);
+        if (isFinal) this.emit("filterClause", this.#filterClause, isValid);
+    }
+    asFilter(throwIfInvalid = true) {
+        if (throwIfInvalid && !this.#isValid) throw Error("Invalid filter model cannot be returned as Filter");
+        return this.#filterClause;
+    }
+    commit() {
+        this.emit("filterClause", this.#filterClause, true);
+    }
+}
+class FilterModel extends EventEmitter {
+    #children = [];
+    #isValid;
+    #op;
+    constructor(filter){
+        super();
+        if (isMultiClauseFilter(filter)) {
+            this.#op = filter.op;
+            filter.filters.forEach((f)=>this.addFilterClause(f));
+        } else if (filter) this.addFilterClause(filter);
+        else this.addNewFilterClause();
+        this.#isValid = isValidFilter(filter);
+    }
+    get isValid() {
+        return this.#isValid;
+    }
+    setIsValid(isValid) {
+        this.#isValid = isValid;
+        this.emit("isValid", isValid);
+    }
+    addNewFilterClause(operator) {
+        const count = this.#children.length;
+        if (operator || this.#op || 1 !== count) {
+            if (operator && !this.#op && 1 === count) this.#op = operator;
+            else if (operator && this.#op && operator !== this.#op) throw Error("FilterModel: use setOp to change the Filter combinator operator");
+        } else this.#op = "and";
+        const filterClauseModel = new FilterClauseModel({});
+        filterClauseModel.on("isValid", this.onFilterClauseStatusChange);
+        filterClauseModel.on("filterClause", this.onFilterClauseChange);
+        this.#children.push(filterClauseModel);
+        this.setIsValid(false);
+    }
+    addFilterClause(filterClause = {}) {
+        const filterClauseModel = new FilterClauseModel(filterClause);
+        filterClauseModel.on("isValid", this.onFilterClauseStatusChange);
+        filterClauseModel.on("filterClause", this.onFilterClauseChange);
+        this.#children.push(filterClauseModel);
+    }
+    removeFilterClause(filterClause) {
+        if (this.isMultiClauseFilter) {
+            const doomedFilter = this.filterClauses.indexOf(filterClause);
+            if (-1 !== doomedFilter) {
+                this.filterClauses.splice(doomedFilter, 1);
+                if (1 === this.filterClauses.length) this.#op = void 0;
+                this.checkValidStatus();
+            }
+        }
+    }
+    checkValidStatus() {
+        const nowValid = isValidFilterModel(this);
+        if (nowValid !== this.#isValid) this.setIsValid(nowValid);
+    }
+    onFilterClauseChange = ()=>{
+        this.emit("filter", this.asFilter(false), this.#isValid);
+    };
+    onFilterClauseStatusChange = (isValid)=>{
+        if (!isValid && this.#isValid) this.setIsValid(false);
+        else this.checkValidStatus();
+    };
+    getFilterClause(index) {
+        return this.#children[index];
+    }
+    get op() {
+        return this.#op;
+    }
+    setOp(op) {
+        this.#op = op;
+        this.emit("filter", this.asFilter(false), this.#isValid);
+    }
+    get filterClauses() {
+        return this.#children;
+    }
+    get isMultiClauseFilter() {
+        return "and" === this.#op || "or" === this.#op;
+    }
+    asFilter(throwIfInvalid = true) {
+        if (throwIfInvalid && !this.#isValid) throw Error("Invalid filter model cannot be returned as Filter");
+        if ("and" === this.#op || "or" === this.#op) return {
+            op: this.#op,
+            filters: this.#children.map((f)=>f.asFilter(throwIfInvalid))
+        };
+        return this.#children[0].asFilter(throwIfInvalid);
+    }
+}
+export { FilterClauseModel, FilterModel };

package/src/column-filter/ColumnFilter.css.js

@@ -0,0 +1,52 @@
+const css = `
+.vuuColumnFilter {
+  --vuuTimeInput-outline: none;
+  border: solid 1px var(--salt-editable-borderColor);
+  max-width: 200px;
+  width: var(--vuuColumnFilter-width, fit-content);
+  padding-left: 4px;
+  padding-right: 4px;
+
+  & .vuuColumnFilter-rangeHigh {
+    position: relative;
+  }
+
+  & .vuuColumnFilter-rangeHigh:before {
+    content: "";
+    background: var(--salt-separable-primary-borderColor);
+    width: 1px;
+    left: calc(-1 * var(--salt-spacing-100));
+    position: absolute;
+    top: -1px;
+    bottom: -1px;
+  }
+
+  & .vuuTimePicker {
+    border-radius: 6px;
+  }
+
+  & .vuuTimePicker + .vuuTimePicker {
+    margin-left: var(--salt-spacing-100);
+  }
+
+  & .vuuTimeInput {
+    border: none;
+  }
+
+  & .vuuTimeInput:focus-visible {
+    outline: none;
+  }
+}
+
+.vuuColumnFilter-trigger {
+  --saltButton-borderRadius: 4px 0px 0px 4px;
+  --saltButton-padding: var(--salt-spacing-200);
+}
+
+.vuuColumnFilter-invalid {
+  border-color: red;
+}
+
+
+`;
+export default css;

package/src/column-filter/ColumnFilter.js

@@ -0,0 +1,59 @@
+import { jsxs } from "react/jsx-runtime";
+import { SegmentedButtonGroup } from "@salt-ds/core";
+import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
+import clsx from "clsx";
+import { forwardRef as external_react_forwardRef } from "react";
+import { useColumnFilter } from "./useColumnFilter.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import ColumnFilter_0 from "./ColumnFilter.css";
+import { isBetweenOperator } from "@vuu-ui/vuu-utils";
+const classBase = "vuuColumnFilter";
+const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-editor",
+        css: ColumnFilter_0,
+        window: targetWindow
+    });
+    const { InputProps, InputPropsRange, isInvalid, onCommit, onCommitRange } = useColumnFilter({
+        InputProps: InputPropsProp,
+        column,
+        defaultValue,
+        extendedFilterOptions,
+        onColumnFilterChange,
+        onColumnRangeFilterChange,
+        onCommit: onCommitProp,
+        operator,
+        value: valueProp
+    });
+    return /*#__PURE__*/ jsxs(SegmentedButtonGroup, {
+        ...buttonGroupProps,
+        className: clsx(classBase, className, {
+            [`${classBase}-invalid`]: isInvalid
+        }),
+        ref: forwardRef,
+        children: [
+            getDataItemEditControl({
+                InputProps,
+                TypeaheadProps,
+                commitWhenCleared: true,
+                dataDescriptor: column,
+                onCommit,
+                table,
+                values,
+                variant
+            }),
+            isBetweenOperator(operator) ? getDataItemEditControl({
+                InputProps: InputPropsRange,
+                className: `${classBase}-rangeHigh`,
+                commitWhenCleared: true,
+                variant,
+                dataDescriptor: column,
+                onCommit: onCommitRange,
+                table
+            }) : null
+        ]
+    });
+});
+export { ColumnFilter_ColumnFilter as ColumnFilter };

package/src/column-filter/useColumnFilter.js

@@ -0,0 +1,130 @@
+import { useControlled } from "@salt-ds/core";
+import { useCallback, useMemo, useState } from "react";
+import { isBetweenOperator, isValidRange } from "@vuu-ui/vuu-utils";
+const injectInputProps = (InputProps, inputProps)=>{
+    if (void 0 === InputProps) return {
+        inputProps
+    };
+    return {
+        ...InputProps,
+        inputProps: {
+            ...InputProps.inputProps,
+            ...inputProps
+        }
+    };
+};
+const useColumnFilter = ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator = "=", value: valueProp })=>{
+    const [isInvalid, setIsInvalid] = useState(false);
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: "ColumnFilterNext",
+        state: "value"
+    });
+    const handleCommit = useCallback((_e, newValue = "")=>{
+        if (Array.isArray(value)) if (isBetweenOperator(operator)) {
+            setValue([
+                `${newValue}`,
+                value[1]
+            ]);
+            onCommit?.(column, operator, [
+                `${newValue}`,
+                value[1]
+            ], extendedFilterOptions);
+        } else throw Error("[useColumnFilterNext] value has been initialised incorrectly for non-range filter");
+        else {
+            setValue(newValue);
+            onCommit?.(column, operator, `${newValue}`, extendedFilterOptions);
+        }
+    }, [
+        value,
+        operator,
+        setValue,
+        onCommit,
+        column,
+        extendedFilterOptions
+    ]);
+    const handleRangeCommit = useCallback((_e, newValue = "")=>{
+        if (Array.isArray(value)) {
+            const [firstValue] = value;
+            const newRange = [
+                value[0],
+                `${newValue}`
+            ];
+            setValue(newRange);
+            const validRange = isValidRange(newRange);
+            setIsInvalid(!validRange);
+            if (validRange) onCommit?.(column, operator, [
+                firstValue,
+                `${newValue}`
+            ], extendedFilterOptions);
+        } else if ("" !== value) {
+            const currentValue = `${value}`;
+            setValue([
+                currentValue,
+                `${newValue}`
+            ]);
+            onCommit?.(column, operator, [
+                currentValue,
+                `${newValue}`
+            ], extendedFilterOptions);
+        } else throw Error("[useColumnFilterNext] value has been initialised incorrectly for range filter");
+    }, [
+        value,
+        setValue,
+        onCommit,
+        column,
+        operator,
+        extendedFilterOptions
+    ]);
+    const onChange = useCallback((e)=>{
+        const { value = "" } = e.target;
+        setValue((v)=>Array.isArray(v) ? [
+                value,
+                v[1]
+            ] : value);
+        onColumnFilterChange?.(e.target.value, column, operator);
+    }, [
+        column,
+        onColumnFilterChange,
+        operator,
+        setValue
+    ]);
+    const onRangeInputChange = useCallback((e)=>{
+        const { value = "" } = e.target;
+        setValue((v)=>Array.isArray(v) ? [
+                v[0],
+                value
+            ] : value);
+        onColumnRangeFilterChange?.(value, column, operator);
+    }, [
+        setValue,
+        onColumnRangeFilterChange,
+        column,
+        operator
+    ]);
+    const InputProps = useMemo(()=>injectInputProps(InputPropsProp, {
+            onChange,
+            value: Array.isArray(value) ? value[0] : value
+        }), [
+        InputPropsProp,
+        onChange,
+        value
+    ]);
+    const InputPropsRange = useMemo(()=>injectInputProps(InputPropsProp, Array.isArray(value) ? {
+            onChange: onRangeInputChange,
+            value: value[1]
+        } : void 0), [
+        InputPropsProp,
+        onRangeInputChange,
+        value
+    ]);
+    return {
+        InputProps,
+        InputPropsRange,
+        isInvalid,
+        onCommit: handleCommit,
+        onCommitRange: handleRangeCommit
+    };
+};
+export { useColumnFilter };

package/src/column-filter/utils.js

@@ -0,0 +1,35 @@
+import { addFilter } from "../filter-utils.js";
+const isStartsWithValue = (value)=>/\.\.\.$/.test(value);
+const getTypeaheadFilter = (column, filterValues, isStartsWithFilter)=>{
+    if (0 === filterValues.length) return;
+    if (isStartsWithFilter) {
+        const startsWith = filterValues[0].substring(0, filterValues[0].length - 3);
+        return {
+            column,
+            op: "starts",
+            value: `"${startsWith}"`
+        };
+    }
+    return {
+        column,
+        op: "in",
+        values: filterValues.map((value)=>`"${value}"`)
+    };
+};
+const getRangeFilter = (column, startValue, endValue)=>{
+    const startFilter = void 0 === startValue ? void 0 : {
+        column,
+        op: ">",
+        value: startValue - 1
+    };
+    const endFilter = void 0 === endValue ? void 0 : {
+        column,
+        op: "<",
+        value: endValue + 1
+    };
+    if (void 0 === endFilter) return startFilter;
+    return addFilter(startFilter, endFilter, {
+        combineWith: "and"
+    });
+};
+export { getRangeFilter, getTypeaheadFilter, isStartsWithValue };

package/src/custom-filters/CustomFilters.js

@@ -0,0 +1,74 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useRef } from "react";
+import { IconButton, Prompt } from "@vuu-ui/vuu-ui-controls";
+import { FilterEditor } from "../filter-editor/index.js";
+import { FilterPill } from "../filter-pill/index.js";
+import { FilterModel } from "../FilterModel.js";
+import { isEditFilterState, useCustomFilters } from "./useCustomFilters.js";
+const classBase = "vuuCustomFilters";
+const CustomFilters = ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable })=>{
+    const rootRef = useRef(null);
+    const { activeFilterIndex, addButtonProps, columnsByName, filters, interactedFilterState, onCancelEdit, onSave, FilterPillProps, promptProps } = useCustomFilters({
+        containerRef: rootRef,
+        columnDescriptors,
+        defaultFilterState,
+        filterState,
+        onApplyFilter,
+        onClearFilter,
+        onFilterStateChanged,
+        onFilterDeleted,
+        onFilterRenamed
+    });
+    const indexOfFilterBeingRenamed = interactedFilterState?.state === "rename" ? interactedFilterState.index : -1;
+    const filterModel = isEditFilterState(interactedFilterState?.state) ? new FilterModel(interactedFilterState.filter) : void 0;
+    const getFilterPills = ()=>{
+        const items = [];
+        filters.forEach((filter, i)=>{
+            items.push(/*#__PURE__*/ createElement(FilterPill, {
+                ...FilterPillProps,
+                editing: indexOfFilterBeingRenamed === i,
+                columnsByName: columnsByName,
+                "data-index": i,
+                filter: filter,
+                key: `filter-${i}`,
+                selected: activeFilterIndex.includes(i)
+            }));
+        });
+        return items;
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "vuuCustomFilters",
+                ref: rootRef,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-filters`,
+                        children: getFilterPills()
+                    }),
+                    /*#__PURE__*/ createElement(IconButton, {
+                        ...addButtonProps,
+                        "aria-label": "Add filter",
+                        "data-selectable": false,
+                        icon: "plus",
+                        key: "filter-add",
+                        tabIndex: 0,
+                        variant: "secondary"
+                    }),
+                    promptProps ? /*#__PURE__*/ jsx(Prompt, {
+                        ...promptProps,
+                        open: true
+                    }) : null
+                ]
+            }),
+            filterModel && vuuTable && /*#__PURE__*/ jsx(FilterEditor, {
+                columnDescriptors: columnDescriptors,
+                onCancel: onCancelEdit,
+                onSave: onSave,
+                filter: interactedFilterState?.filter,
+                vuuTable: vuuTable
+            }, "filter-editor")
+        ]
+    });
+};
+export { CustomFilters };