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

package/src/quick-filters/useQuickFilters.js

@@ -0,0 +1,108 @@
+import { isNumericColumn, queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef } from "react";
+const findColumn = (columns, name)=>{
+    const column = columns?.find((col)=>col.name === name);
+    if (column) return column;
+    throw Error(`column not found ${name}`);
+};
+const asNumeric = (value, column)=>{
+    switch(column.serverDataType){
+        case "int":
+        case "long":
+            {
+                const numericValue = parseInt(value, 10);
+                if (!isNaN(numericValue)) return numericValue;
+                throw Error(`invalid value ${value} is not integer`);
+            }
+        case "double":
+            {
+                const numericValue = parseFloat(value);
+                if (!isNaN(numericValue)) return numericValue;
+                throw Error(`invalid value ${value} is not decimal`);
+            }
+        default:
+            throw Error(`DataType of column ${column.name}, ${column.serverDataType} is not numeric`);
+    }
+};
+const createFilterClause = ([identifier, value], availableColumns)=>{
+    if ("find" === identifier) if (availableColumns) {
+        const targetColumns = availableColumns.filter(({ serverDataType })=>"string" === serverDataType);
+        if (targetColumns.length) return {
+            op: "or",
+            filters: targetColumns.map((column)=>createFilterClause([
+                    column.name,
+                    value
+                ], availableColumns))
+        };
+        throw Error(`value ${value} is not valid for any of available columns`);
+    } else throw Error("columns must be provided for find operation");
+    {
+        const column = findColumn(availableColumns, identifier);
+        if (!isNumericColumn(column)) return {
+            column: identifier,
+            op: "contains",
+            value
+        };
+        {
+            const numericValue = asNumeric(value, column);
+            return {
+                column: identifier,
+                op: "=",
+                value: numericValue
+            };
+        }
+    }
+};
+const buildFilter = (quickFilters, availableColumns)=>{
+    const entries = Object.entries(quickFilters);
+    if (1 === entries.length) return createFilterClause(entries[0], availableColumns);
+    if (entries.length > 1) return {
+        op: "and",
+        filters: entries.map((entry)=>createFilterClause(entry, availableColumns), availableColumns)
+    };
+};
+const useQuickFilters = ({ availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns })=>{
+    const filters = useRef({});
+    const rootRef = useCallback((el)=>{
+        if (el) {
+            const firstInput = el.querySelector("input");
+            firstInput?.focus();
+        }
+    }, []);
+    const handleChange = useCallback((e)=>{
+        console.log(`onChange ${e.target.value}`);
+    }, []);
+    const handleCommit = useCallback((e, value)=>{
+        const field = queryClosest(e.target, "[data-field]");
+        const column = field?.dataset.field;
+        if (column) {
+            if (void 0 === value || "string" == typeof value && "" === value.trim()) {
+                if (void 0 === filters.current[column]) return;
+                delete filters.current[column];
+            } else if ("string" == typeof value && "" !== value.trim()) filters.current[column] = value;
+            const filter = buildFilter(filters.current, availableColumns);
+            if (filter) onApplyFilter?.(filter);
+            else onClearFilter();
+        }
+    }, [
+        availableColumns,
+        onApplyFilter,
+        onClearFilter
+    ]);
+    const handleColumnsSelectionChange = useCallback((evt, newSelected)=>{
+        onChangeQuickFilterColumns?.(newSelected);
+    }, [
+        onChangeQuickFilterColumns
+    ]);
+    const availableColumnNames = useMemo(()=>availableColumns.map((col)=>col.name), [
+        availableColumns
+    ]);
+    return {
+        availableColumnNames,
+        onChange: handleChange,
+        onColumnsSelectionChange: handleColumnsSelectionChange,
+        onCommit: handleCommit,
+        rootRef
+    };
+};
+export { useQuickFilters };

package/src/saved-filters/DeleteFilterPrompt.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Prompt } from "@vuu-ui/vuu-ui-controls";
+import clsx from "clsx";
+import { FilterDisplay } from "../filter-display/FilterDisplay.js";
+const DeleteFilterPrompt = ({ children, className, columns, filterDescriptor, onClose, onConfirm, open = true, ...htmlAttributes })=>/*#__PURE__*/ jsxs(Prompt, {
+        ...htmlAttributes,
+        className: clsx("vuuDeleteFilterPrompt", className),
+        initialFocusedItem: "confirm",
+        onClose: onClose,
+        onConfirm: onConfirm,
+        open: open,
+        title: "Delete Filter",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: `Do you want to delete '${filterDescriptor.filter?.name}' ?`
+            }),
+            children ? children : filterDescriptor.filter ? /*#__PURE__*/ jsx(FilterDisplay, {
+                columns: columns,
+                filter: filterDescriptor.filter
+            }) : null
+        ]
+    });
+export { DeleteFilterPrompt };

package/src/saved-filters/FilterNamePrompt.css.js

@@ -0,0 +1,19 @@
+const css = `
+.vuuFilterNamePrompt {
+  & .saltText-warning {
+    padding: var(--salt-spacing-400) 0;
+  }
+
+  & .saltDialogContent {
+    background: none;
+    padding: 0;
+
+    & .saltDialogContent-inner {
+      padding: var(--vuuFilterNamePrompt-content-padding, 1px);
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/saved-filters/FilterNamePrompt.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormField, FormFieldHelperText, FormFieldLabel, Text } from "@salt-ds/core";
+import { Prompt, VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { useEffect, useRef } from "react";
+import clsx from "clsx";
+import { Status, useFilterNamePrompt } from "./useFilterNamePrompt.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import FilterNamePrompt from "./FilterNamePrompt.css";
+const DUPLICATE_NAME_MESSAGE = "A filter with this name already exists";
+const DEFAULT_FILTER_NAME_MAX_LENGTH = 25;
+const FilterNamePrompt_FilterNamePrompt = ({ className, filterName, onClose, onConfirm: onConfirmProp, open = true, title, filterNameMaxLength = DEFAULT_FILTER_NAME_MAX_LENGTH, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-saved-filter-panel",
+        css: FilterNamePrompt,
+        window: targetWindow
+    });
+    const inputRef = useRef(null);
+    const { confirmButtonProps, nameOfDuplicateFilter, onChange, onCommit, onConfirm, status, value } = useFilterNamePrompt({
+        filterName,
+        onConfirm: onConfirmProp
+    });
+    const formFieldHelperText = status === Status.DuplicateName ? DUPLICATE_NAME_MESSAGE : void 0;
+    useEffect(()=>{
+        setTimeout(()=>{
+            inputRef.current?.focus();
+        }, 200);
+    }, []);
+    return /*#__PURE__*/ jsxs(Prompt, {
+        ...htmlAttributes,
+        className: clsx("vuuFilterNamePrompt", className),
+        confirmButtonProps: confirmButtonProps,
+        disableAccent: true,
+        onClose: onClose,
+        onConfirm: onConfirm,
+        open: open,
+        title: title,
+        children: [
+            /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Filter name"
+                    }),
+                    /*#__PURE__*/ jsx(VuuInput, {
+                        commitOnBlur: false,
+                        inputRef: inputRef,
+                        onChange: onChange,
+                        onCommit: onCommit,
+                        defaultValue: value,
+                        placeholder: "Please enter",
+                        inputProps: {
+                            maxLength: filterNameMaxLength
+                        }
+                    }),
+                    formFieldHelperText ? /*#__PURE__*/ jsx(FormFieldHelperText, {
+                        children: formFieldHelperText
+                    }) : null
+                ]
+            }),
+            nameOfDuplicateFilter ? /*#__PURE__*/ jsxs(Text, {
+                color: "warning",
+                children: [
+                    "An identical filter has already been saved, see",
+                    " ",
+                    /*#__PURE__*/ jsx("b", {
+                        children: nameOfDuplicateFilter
+                    })
+                ]
+            }) : null
+        ]
+    });
+};
+export { FilterNamePrompt_FilterNamePrompt as FilterNamePrompt };

package/src/saved-filters/SavedFilterPanel.css.js

@@ -0,0 +1,21 @@
+const css = `
+.vuuSavedFilterPanel {
+  background-color: var(--vuuSavedFilterPanel-background, var(--salt-container-secondary-background));
+  padding: var(--vuuSavedFilterPanel-padding, calc(var(--salt-spacing-200) * 3));
+  overflow: auto;
+
+  & .vuuFilterPillNext {
+    max-width: 100%;
+  }
+}
+
+.vuuSavedFilterPanel-filterPill-container {
+  gap: var(--salt-spacing-400);
+  flex-wrap: wrap;
+  height: fit-content;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/saved-filters/SavedFilterPanel.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement, useMemo } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { FilterPillNext } from "../filter-pill/FilterPillNext.js";
+import { useSavedFilterPanel } from "./useSavedFilterPanel.js";
+import SavedFilterPanel from "./SavedFilterPanel.css";
+const classBase = "vuuSavedFilterPanel";
+const defaultFilterPillPermissions = {
+    allowEdit: true,
+    allowRename: true,
+    allowRemove: true
+};
+const SavedFilterPanel_SavedFilterPanel = ({ availableColumns, className, filterPillPermissions = defaultFilterPillPermissions, filterProviderKey, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-saved-filter-panel",
+        css: SavedFilterPanel,
+        window: targetWindow
+    });
+    const permissions = useMemo(()=>{
+        const { allowClose = defaultFilterPillPermissions.allowClose, allowEdit = defaultFilterPillPermissions.allowEdit, allowRemove = defaultFilterPillPermissions.allowRename, allowRename = defaultFilterPillPermissions.allowRename } = filterPillPermissions;
+        return {
+            allowClose,
+            allowEdit,
+            allowRemove,
+            allowRename
+        };
+    }, [
+        filterPillPermissions
+    ]);
+    const { onClickFilter, onFilterMenuAction, savedFilters } = useSavedFilterPanel({
+        availableColumns,
+        filterProviderKey
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, "vuuScrollable", className),
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${classBase}-filterPill-container`,
+            children: savedFilters.map((filterDescriptor, i)=>/*#__PURE__*/ createElement(FilterPillNext, {
+                    ...filterDescriptor,
+                    columns: availableColumns,
+                    key: i,
+                    onClick: onClickFilter,
+                    onMenuAction: onFilterMenuAction,
+                    permissions: permissions
+                }))
+        })
+    });
+};
+export { SavedFilterPanel_SavedFilterPanel as SavedFilterPanel };

package/src/saved-filters/useFilterNamePrompt.js

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useSavedFilters } from "../filter-provider/FilterContext.js";
+import { findMatchingFilter } from "../filter-utils.js";
+const isValidName = (name)=>"string" == typeof name && name.trim().length > 0;
+const isDuplicateName = (names, value)=>names.includes(value.toLowerCase());
+const Status = {
+    Empty: "empty",
+    Valid: "valid",
+    Invalid: "invalid",
+    DuplicateName: "duplicate-name"
+};
+const useFilterNamePrompt = ({ filterName = "", onConfirm })=>{
+    const { currentFilter, savedFilters = [] } = useSavedFilters();
+    const filterNameRef = useRef(filterName);
+    const confirmRef = useRef(null);
+    const [status, setStatus] = useState("" !== filterName ? Status.Valid : Status.Empty);
+    const nameOfDuplicateFilter = useMemo(()=>{
+        if (currentFilter.filter) {
+            const matchingFilter = findMatchingFilter(savedFilters, currentFilter.filter);
+            if (matchingFilter) return matchingFilter.filter?.name;
+        }
+    }, [
+        currentFilter.filter,
+        savedFilters
+    ]);
+    const existingFilterNames = useMemo(()=>savedFilters.reduce((list, f)=>{
+            if (f.filter?.name) list.push(f.filter.name.toLowerCase());
+            return list;
+        }, []), [
+        savedFilters
+    ]);
+    const handleConfirm = useCallback(()=>{
+        onConfirm(filterNameRef.current);
+    }, [
+        onConfirm
+    ]);
+    const handleCommit = useCallback((e, value)=>{
+        onConfirm(value);
+    }, [
+        onConfirm
+    ]);
+    const handleChange = useCallback((e)=>{
+        const value = e.target.value.trim();
+        filterNameRef.current = value;
+        setStatus((currentStatus)=>{
+            let newStatus = currentStatus;
+            if ("" === value) newStatus = Status.Empty;
+            else {
+                const isValid = isValidName(value);
+                newStatus = isValid ? isDuplicateName(existingFilterNames, value) ? Status.DuplicateName : Status.Valid : Status.Invalid;
+            }
+            return newStatus;
+        });
+    }, [
+        existingFilterNames
+    ]);
+    const confirmButtonProps = useMemo(()=>({
+            disabled: status !== Status.Valid && status !== Status.DuplicateName,
+            label: status === Status.DuplicateName ? "replace filter" : "save filter",
+            ref: confirmRef
+        }), [
+        status
+    ]);
+    return {
+        confirmButtonProps,
+        nameOfDuplicateFilter,
+        onChange: handleChange,
+        onCommit: handleCommit,
+        onConfirm: handleConfirm,
+        status,
+        value: filterNameRef.current
+    };
+};
+export { Status, useFilterNamePrompt };

package/src/saved-filters/useSavedFilterPanel.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useSavedFilters } from "../filter-provider/FilterContext.js";
+const useSavedFilterPanel = (props)=>{
+    const { savedFilters = [], setCurrentFilter, onFilterMenuAction } = useSavedFilters(props?.filterProviderKey, {
+        availableColumns: props?.availableColumns
+    });
+    const handleClickFilter = useCallback((e)=>{
+        const { id } = e.target;
+        setCurrentFilter(id);
+    }, [
+        setCurrentFilter
+    ]);
+    return {
+        onClickFilter: handleClickFilter,
+        onFilterMenuAction,
+        savedFilters
+    };
+};
+export { useSavedFilterPanel };

package/src/tabbed-filter-container/TabbedFilterContainer.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TabListNext, TabNext, TabNextPanel, TabNextTrigger, TabsNext } from "@salt-ds/lab";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { FilterPanel } from "../filter-panel/FilterPanel.js";
+import { SavedFilterPanel } from "../saved-filters/SavedFilterPanel.js";
+import TabbedFilterContainer from "./TabbedFilterContainer.css";
+const classBase = "vuuTabbedFilterContainer";
+const TabbedFilterContainer_TabbedFilterContainer = ({ SavedFilterPanelProps, children, className, filter, filterProviderKey, filterTabLabel = "Ad hoc", onFilterApplied, onFilterCleared, savedFilterLabel = "Saved", ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tabbed-filter-container",
+        css: TabbedFilterContainer,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: /*#__PURE__*/ jsxs(TabsNext, {
+            defaultValue: "ad-hoc-filter",
+            children: [
+                /*#__PURE__*/ jsxs(TabListNext, {
+                    appearance: "transparent",
+                    children: [
+                        /*#__PURE__*/ jsx(TabNext, {
+                            value: "ad-hoc-filter",
+                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
+                                children: filterTabLabel
+                            })
+                        }, "ad-hoc-filter"),
+                        /*#__PURE__*/ jsx(TabNext, {
+                            value: "saved-filters",
+                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
+                                children: savedFilterLabel
+                            })
+                        }, "saved-filters")
+                    ]
+                }),
+                /*#__PURE__*/ jsx(TabNextPanel, {
+                    value: "ad-hoc-filter",
+                    children: /*#__PURE__*/ jsx(FilterPanel, {
+                        filter: filter,
+                        filterProviderKey: filterProviderKey,
+                        onFilterApplied: onFilterApplied,
+                        onFilterCleared: onFilterCleared,
+                        children: children
+                    })
+                }, "ad-hoc-filter"),
+                /*#__PURE__*/ jsx(TabNextPanel, {
+                    value: "saved-filters",
+                    children: /*#__PURE__*/ jsx(SavedFilterPanel, {
+                        ...SavedFilterPanelProps,
+                        filterProviderKey: filterProviderKey
+                    })
+                }, "saved-filters")
+            ]
+        })
+    });
+};
+export { TabbedFilterContainer_TabbedFilterContainer as TabbedFilterContainer };

package/src/toggle-filter/ToggleFilter.css.js

@@ -0,0 +1,10 @@
+const css = `
+.vuuToggleFilter {
+  & .vuuToggleFilter-onlyAvailableValue:not([aria-checked="true"], :hover) {
+    background-color: var(--vuuToggleFilter-implicitActive-bg, var(--salt-actionable-bold-background));
+  }
+}
+
+
+`;
+export default css;

package/src/toggle-filter/ToggleFilter.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback } from "react";
+import { useToggleFilter } from "./useToggleFilter.js";
+import ToggleFilter_0 from "./ToggleFilter.css";
+const getValues = (defaultValue, value)=>{
+    if (void 0 === defaultValue && void 0 === value) return [
+        "all"
+    ];
+    if (void 0 !== defaultValue && void 0 !== value) throw Error("[ToggleFilter] only one of defaultValue/value must be provided");
+    if ("" === defaultValue) return [
+        "all"
+    ];
+    if ("" === value) return [
+        void 0,
+        "all"
+    ];
+    return [
+        defaultValue,
+        value
+    ];
+};
+const classBase = "vuuToggleFilter";
+const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toggle-filter",
+        css: ToggleFilter_0,
+        window: targetWindow
+    });
+    const [defaultValue, value] = getValues(defaultValueProp, valueProp);
+    const onlyAvailableValue = useToggleFilter({
+        column,
+        table,
+        values
+    });
+    const handleChange = useCallback((e)=>{
+        const value = e.currentTarget.value;
+        "all" === value ? onCommit(e, "") : onCommit(e, value);
+    }, [
+        onCommit
+    ]);
+    return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+        ...ToggleButtonGroupProps,
+        className: clsx(classBase, className),
+        defaultValue: defaultValue,
+        onChange: handleChange,
+        ref: forwardedRef,
+        value: value,
+        children: [
+            /*#__PURE__*/ jsx(ToggleButton, {
+                value: "all",
+                children: "ALL"
+            }, "all"),
+            values.map((toggleValue)=>/*#__PURE__*/ jsx(ToggleButton, {
+                    className: clsx({
+                        [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue
+                    }),
+                    value: toggleValue,
+                    children: toggleValue
+                }, toggleValue))
+        ]
+    });
+});
+export { ToggleFilter_ToggleFilter as ToggleFilter };

package/src/toggle-filter/useToggleFilter.js

@@ -0,0 +1,57 @@
+import { useSavedFilters } from "../filter-provider/FilterContext.js";
+import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { filtersAreEqual, getVuuTable } from "@vuu-ui/vuu-utils";
+const assertValid = (values, actualValues)=>{
+    if (actualValues.some((val)=>-1 === values.indexOf(val))) console.warn(`[useToggleFilter] ToggleFilter is configured with values which do not include all values from data source
+            [${values.join()}]
+            [${actualValues.join()}]`);
+};
+const typeaheadRefreshRequired = (f1, f2)=>{
+    if (null === f1 && null === f2) return false;
+    if (null === f1 || null === f2) return true;
+    if (filtersAreEqual(f1, f2)) return false;
+    return true;
+};
+const useToggleFilter = ({ column, table, values })=>{
+    const { currentFilter } = useSavedFilters();
+    const currentFilterRef = useRef(currentFilter.filter);
+    const [typeaheadValues, setTypeaheadValues] = useState([]);
+    const getSuggestions = useTypeaheadSuggestions();
+    const refreshSuggestions = useCallback((table)=>{
+        const vuuTable = getVuuTable(table);
+        const params = [
+            vuuTable,
+            column
+        ];
+        getSuggestions(params).then((suggestions)=>{
+            if (false === suggestions) setTypeaheadValues([]);
+            else {
+                assertValid(values, suggestions);
+                setTypeaheadValues(suggestions);
+            }
+        });
+    }, [
+        column,
+        getSuggestions,
+        values
+    ]);
+    useMemo(()=>{
+        if (table) refreshSuggestions(table);
+    }, [
+        refreshSuggestions,
+        table
+    ]);
+    useMemo(()=>{
+        const { current: filter } = currentFilterRef;
+        if (table && typeaheadRefreshRequired(filter, currentFilter.filter)) refreshSuggestions(table);
+        currentFilterRef.current = currentFilter.filter;
+    }, [
+        currentFilter.filter,
+        refreshSuggestions,
+        table
+    ]);
+    const [firstValue] = typeaheadValues;
+    return 1 === typeaheadValues.length ? firstValue : void 0;
+};
+export { useToggleFilter };

package/types/filter-clause/column-picker/ColumnPicker.d.ts

@@ -6,7 +6,7 @@ export type ColumnPickerProps = Pick<ComboBoxProps, "className" | "inputProps" |
     onSelect: (evt: SyntheticEvent, columnName: string) => void;
     dropdownOnAutofocus?: boolean;
 };
-export declare const ColumnPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps, "className" | "value" | "inputProps"> & {
+export declare const ColumnPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
     columns: readonly ColumnDescriptor[];
     onSelect: (evt: SyntheticEvent, columnName: string) => void;
     dropdownOnAutofocus?: boolean;

package/types/filter-clause/operator-picker/OperatorPicker.d.ts

@@ -7,7 +7,7 @@ export type OperatorPickerProps = Pick<ComboBoxProps, "className" | "inputProps"
     onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
     dropdownOnAutofocus?: boolean;
 };
-export declare const OperatorPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps, "className" | "value" | "inputProps"> & {
+export declare const OperatorPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
     column: ColumnDescriptor;
     onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
     dropdownOnAutofocus?: boolean;

package/types/filter-clause/value-editors/FilterClauseValueEditor.d.ts

@@ -17,7 +17,7 @@ export declare const FilterClauseValueEditor: import("react").ForwardRefExoticCo
     selectedColumn: import("@vuu-ui/vuu-table-types").ColumnDescriptor;
     valueRef: import("react").RefCallback<HTMLDivElement>;
     showDropdownOnAutoFocus: boolean;
-}, "onOpenChange" | "inputProps" | "onChangeValue" | "selectedColumn" | "onDeselectValue"> & {
+}, "inputProps" | "onChangeValue" | "onDeselectValue" | "onOpenChange" | "selectedColumn"> & {
     table?: TableSchemaTable;
 } & {
     operator?: SingleValueFilterClauseOp | "in";