@vuu-ui/vuu-filters 4.0.0-beta.7 → 4.0.1

package/src/filter-container/FilterContainer.js

@@ -3,14 +3,16 @@ import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ColumnFilterContext, useFilterContainer, useFilterContext } from "./useFilterContainer.js";
 import { ColumnFilter } from "../column-filter/ColumnFilter.js";
-import { filterDescriptorHasFilter, isNullFilter, useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
+import { UNSAVED_FILTER, filterDescriptorHasFilter, isNullFilter, useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
 import { filtersAreEqual, getColumnValueFromFilter, getDefaultTimeRange, isBetweenOperator, isTimeDataValue, withDateTimePattern } from "@vuu-ui/vuu-utils";
+import { useControlled } from "@salt-ds/core";
+import { getColumnFilterClause, getColumnFilterOperator, getColumnFilterOperators, getDefaultColumnFilterOperator, normalizeColumnFilterValue } from "../column-filter/column-filter-utils.js";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import FilterContainer from "./FilterContainer.css";
 const classBase = "vuuFilterContainer";
 const notEmpty = (value)=>Array.isArray(value) ? "" !== value[0] && "" !== value[1] : "" !== value;
-const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", pattern: patternProp, variant, ...props })=>{
+const FilterContainerColumnFilter = ({ column: columnProp, operator: operatorProp, defaultOperator, showOperatorPicker = false, operators, onOperatorChange, pattern: patternProp, variant, ...props })=>{
     const { getColumnFilterPattern } = useColumnFilterRegistry();
     const pattern = patternProp ?? getColumnFilterPattern(columnProp);
     const { date, time } = pattern ?? {};
@@ -22,7 +24,20 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         date,
         time
     ]);
-    const { filterProviderKey, onChange: onFilterContextChange, onCommit: onFilterContextCommit, register } = useFilterContext(column, true);
+    const { filter: containerFilter, getFilter, filterProviderKey, onChange: onFilterContextChange, onCommit: onFilterContextCommit, register } = useFilterContext(column, true);
+    const availableOperators = useMemo(()=>showOperatorPicker ? getColumnFilterOperators(column, operators) : void 0, [
+        column,
+        operators,
+        showOperatorPicker
+    ]);
+    const [initialOperator] = useState(()=>availableOperators ? getDefaultColumnFilterOperator(availableOperators, operatorProp ?? getColumnFilterOperator(column, containerFilter) ?? defaultOperator) : defaultOperator ?? "=");
+    const [selectedOperator, setOperator] = useControlled({
+        controlled: operatorProp,
+        default: initialOperator,
+        name: "FilterContainerColumnFilter",
+        state: "operator"
+    });
+    const operator = selectedOperator;
     const { registerColumnFilterColumn } = useColumnFilterRegistry(filterProviderKey);
     useEffect(()=>registerColumnFilterColumn(column), [
         column,
@@ -35,10 +50,50 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
     ]);
     const [value, setValue] = useState(initialValue);
     const valueRef = useRef(initialValue);
+    if (showOperatorPicker) {
+        const normalizedValue = normalizeColumnFilterValue(operator, value);
+        if (normalizedValue !== value) {
+            valueRef.current = normalizedValue;
+            setValue(normalizedValue);
+        }
+    }
     const { currentFilter } = useSavedFilters(filterProviderKey);
     const currentFilterRef = useRef(currentFilter);
+    const containerFilterRef = useRef(containerFilter);
+    const localFilterRef = useRef(containerFilter);
+    useMemo(()=>{
+        if (!showOperatorPicker) return;
+        const containerChanged = !filtersAreEqual(containerFilterRef.current, containerFilter);
+        const savedChanged = currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter);
+        if (containerChanged || savedChanged) {
+            const savedIdChanged = currentFilterRef.current.id !== currentFilter.id;
+            const filter = containerChanged ? containerFilter : currentFilter.filter ?? void 0;
+            containerFilterRef.current = containerFilter;
+            currentFilterRef.current = currentFilter;
+            const savedFilterActivated = savedIdChanged && filterDescriptorHasFilter(currentFilter) && currentFilter.id !== UNSAVED_FILTER;
+            const clause = getColumnFilterClause(column, filter);
+            if (savedFilterActivated || !filtersAreEqual(clause, getColumnFilterClause(column, localFilterRef.current))) {
+                const nextOperator = operatorProp ?? (availableOperators ? getDefaultColumnFilterOperator(availableOperators, getColumnFilterOperator(column, filter) ?? defaultOperator) : operator);
+                const nextValue = normalizeColumnFilterValue(nextOperator, getColumnValueFromFilter(column, nextOperator, clause));
+                setOperator(nextOperator);
+                valueRef.current = nextValue;
+                setValue(nextValue);
+                localFilterRef.current = filter;
+            }
+        }
+    }, [
+        availableOperators,
+        column,
+        containerFilter,
+        currentFilter,
+        defaultOperator,
+        operator,
+        operatorProp,
+        setOperator,
+        showOperatorPicker
+    ]);
     useMemo(()=>{
-        if (currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter)) {
+        if (!showOperatorPicker && (currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter))) {
             currentFilterRef.current = currentFilter;
             if (isNullFilter(currentFilter) && notEmpty(valueRef.current)) {
                 if (Array.isArray(valueRef.current)) if (isTimeDataValue(column)) valueRef.current = getDefaultTimeRange(column);
@@ -66,13 +121,16 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         }
     }, [
         column,
-        currentFilter
+        currentFilter,
+        showOperatorPicker
     ]);
     const handleCommit = useCallback((column, op, value, extendedFilterOptions)=>{
         valueRef.current = value;
         setValue(value);
         onFilterContextCommit(column, op, value, extendedFilterOptions);
+        localFilterRef.current = getFilter();
     }, [
+        getFilter,
         onFilterContextCommit
     ]);
     const handleColumnFilterChange = useCallback((value, column, op)=>{
@@ -83,7 +141,9 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         ] : value;
         setValue(valueRef.current);
         onFilterContextChange(valueRef.current, column, op);
+        localFilterRef.current = getFilter();
     }, [
+        getFilter,
         onFilterContextChange
     ]);
     const handleColumnRangeFilterChange = useCallback((value, column, op)=>{
@@ -94,7 +154,9 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         ] : value;
         setValue(valueRef.current);
         onFilterContextChange(valueRef.current, column, op);
+        localFilterRef.current = getFilter();
     }, [
+        getFilter,
         onFilterContextChange
     ]);
     return /*#__PURE__*/ jsx(ColumnFilter, {
@@ -104,6 +166,14 @@ const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", patte
         onColumnRangeFilterChange: handleColumnRangeFilterChange,
         onCommit: handleCommit,
         operator: operator,
+        onOperatorChange: (event, op)=>{
+            setOperator(op);
+            valueRef.current = normalizeColumnFilterValue(op, valueRef.current);
+            setValue(valueRef.current);
+            onOperatorChange?.(event, op);
+        },
+        operators: operators,
+        showOperatorPicker: showOperatorPicker,
         value: value,
         variant: variant
     });

package/src/filter-container/useFilterContainer.js

@@ -7,6 +7,8 @@ const ColumnFilterContext = createContext({
 function useFilterContext(column, throwIfNoContainer = false) {
     const ctx = useContext(ColumnFilterContext);
     if (ctx) return {
+        filter: ctx.filter,
+        getFilter: ctx.getFilter,
         filterProviderKey: ctx.filterProviderKey,
         register: ctx.register,
         getValue: ctx.getValue,
@@ -29,6 +31,9 @@ const useFilterContainer = ({ filter, filterProviderKey = "GLOBAL", onFilterAppl
     const filterAggregator = useMemo(()=>new FilterAggregator(filter), [
         filter
     ]);
+    const getFilter = useCallback(()=>filterAggregator.filter, [
+        filterAggregator
+    ]);
     const register = useCallback((column, op)=>valueRef.current[column.name] = getColumnValueFromFilter(column, op, filterRef.current), []);
     const getValue = useCallback((column, fallbackValue)=>{
         const value = valueRef.current[column.name];
@@ -72,6 +77,8 @@ const useFilterContainer = ({ filter, filterProviderKey = "GLOBAL", onFilterAppl
     ]);
     return {
         filterContainerInstalled: true,
+        filter,
+        getFilter,
         filterProviderKey,
         onChange: handleInputChange,
         onCommit: handleCommit,

package/src/filter-context-menu/useFilterContextMenu.js

@@ -1,4 +1,4 @@
-import { filtersAreEqual, getTemporalCellFilter, getTemporalInfo, withDateTimePattern } from "@vuu-ui/vuu-utils";
+import { filtersAreEqual, getScaledDecimalCellFilter, getTemporalCellFilter, getTemporalInfo, withDateTimePattern } from "@vuu-ui/vuu-utils";
 import { useCallback, useMemo, useRef } from "react";
 import { useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
 import { FilterAggregator } from "../FilterAggregator.js";
@@ -23,6 +23,11 @@ const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProvi
                 ...temporalCellFilter
             };
         }
+        const scaledDecimalCellFilter = getScaledDecimalCellFilter(column, value);
+        if (scaledDecimalCellFilter) return {
+            column,
+            ...scaledDecimalCellFilter
+        };
         return {
             column,
             label: `${value}`,

package/types/column-filter/column-filter-utils.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnFilterOp, ColumnFilterValue, FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export type SelectableColumnFilterOp = Exclude<ColumnFilterOp, "in">;
+export declare const getColumnFilterOperators: (column: ColumnDescriptor, operators?: readonly SelectableColumnFilterOp[]) => readonly SelectableColumnFilterOp[];
+export declare const getDefaultColumnFilterOperator: (operators: readonly SelectableColumnFilterOp[], operator?: ColumnFilterOp) => SelectableColumnFilterOp;
+export declare const getColumnFilterOperator: (column: ColumnDescriptor, filter?: FilterContainerFilter) => SelectableColumnFilterOp | undefined;
+export declare const getColumnFilterClause: (column: ColumnDescriptor, filter?: FilterContainerFilter) => FilterContainerFilter | undefined;
+export declare const normalizeColumnFilterValue: (operator: ColumnFilterOp, value?: ColumnFilterValue) => ColumnFilterValue;

package/types/column-filter/useColumnFilter.d.ts

@@ -1,8 +1,10 @@
 import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, ColumnFilterValue, ExtendedFilterOptions } from "@vuu-ui/vuu-filter-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { InputProps } from "@salt-ds/core";
+import { SyntheticEvent } from "react";
 import { CommitHandler } from "@vuu-ui/vuu-utils";
 import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
+import { type SelectableColumnFilterOp } from "./column-filter-utils";
 export interface ColumnFilterHookProps extends Pick<DataItemEditControlProps, "InputProps"> {
     column: ColumnDescriptor;
     /**
@@ -27,17 +29,29 @@ export interface ColumnFilterHookProps extends Pick<DataItemEditControlProps, "I
      * tabbing away from control or making selection from list
      */
     onCommit: ColumnFilterCommitHandler;
+    /** Controlled operator. Defaults to '=' when the picker is hidden. */
     operator?: ColumnFilterOp;
+    /** Initial operator for an uncontrolled picker. Defaults to '=' or the first option. */
+    defaultOperator?: ColumnFilterOp;
+    /** Render an operator dropdown before the value. Defaults to false. */
+    showOperatorPicker?: boolean;
+    /** Ordered operator options, replacing the column-type defaults. 'in' is not supported. */
+    operators?: readonly SelectableColumnFilterOp[];
+    /** Called before committing the current value with the newly selected operator. */
+    onOperatorChange?: (event: SyntheticEvent, operator: ColumnFilterOp) => void;
     /**
      * Filter value. Pair of values expected when operator is
      * 'between'. If provided, component is controlled.
      */
     value?: ColumnFilterValue;
 }
-export declare const useColumnFilter: ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator, value: valueProp, }: ColumnFilterHookProps) => {
+export declare const useColumnFilter: ({ InputProps: InputPropsProp, column, defaultValue, defaultOperator, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, onOperatorChange, operator: operatorProp, operators: operatorsProp, showOperatorPicker, value: valueProp, }: ColumnFilterHookProps) => {
     InputProps: InputProps;
     InputPropsRange: InputProps;
     isInvalid: boolean;
     onCommit: CommitHandler<HTMLElement>;
     onCommitRange: CommitHandler<HTMLElement>;
+    operator: "in" | SelectableColumnFilterOp;
+    operators: readonly SelectableColumnFilterOp[] | undefined;
+    onOperatorSelect: (event: SyntheticEvent, newOperator: ColumnFilterOp) => void;
 };

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

@@ -1,14 +1,24 @@
-import type { FilterClauseOp } from "@vuu-ui/vuu-filter-types";
+import type { ColumnFilterOp, FilterClauseOp } from "@vuu-ui/vuu-filter-types";
 import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { ComboBoxProps } from "@salt-ds/core";
 import { SyntheticEvent } from "react";
-export type OperatorPickerProps = Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
+type OperatorComboboxProps = Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
     column: ColumnDescriptor;
     onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
     dropdownOnAutofocus?: boolean;
+    variant?: "combobox";
+    operators?: readonly FilterClauseOp[];
 };
-export declare const OperatorPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps<string>, "className" | "inputProps" | "value"> & {
-    column: ColumnDescriptor;
-    onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
-    dropdownOnAutofocus?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+type OperatorDropdownProps = {
+    variant: "dropdown";
+    className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    operators: readonly ColumnFilterOp[];
+    value: ColumnFilterOp;
+    onSelect: (evt: SyntheticEvent, operator: ColumnFilterOp) => void;
+    "aria-label"?: string;
+};
+export type OperatorPickerProps = OperatorComboboxProps | OperatorDropdownProps;
+export declare const OperatorPicker: import("react").ForwardRefExoticComponent<OperatorPickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/types/filter-container/ExtendedSingleValueFilterClause.d.ts

@@ -5,9 +5,12 @@ export interface SerializableFilter {
     asQuery: () => string;
 }
 /**
- * A filter clause on a time of day value (TimeString). The time is resolved
- * against a date ('today' by default) only when the query is created, so a
- * persisted filter remains relative.
+ * A filter clause whose query depends on options beyond the column, op and value:
+ * - a time of day value (TimeString). The time is resolved against a date
+ *   ('today' by default) only when the query is created, so a persisted filter
+ *   remains relative.
+ * - a scaled decimal value, matched at the precision with which the column
+ *   displays values (see scaledDecimalFilterAsQuery).
  */
 export declare class ExtendedSingleValueFilterClause implements SerializableSingleValueFilterClause {
     #private;

package/types/filter-container/FilterContainer.d.ts

@@ -16,7 +16,7 @@ export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps
      */
     pattern?: DateTimePattern;
 }
-export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator: operatorProp, defaultOperator, showOperatorPicker, operators, onOperatorChange, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * FilterContainer is a generic UI container for a collection of Filter
  * controls. Each control manages a single filter clause and the Filter

package/types/filter-container/useFilterContainer.d.ts

@@ -2,6 +2,8 @@ import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, C
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 export interface ColumnFilterContextProps {
     filterContainerInstalled: boolean;
+    filter?: FilterContainerFilter;
+    getFilter?: () => FilterContainerFilter | undefined;
     filterProviderKey?: string;
     onChange?: ColumnFilterChangeHandler;
     onCommit?: ColumnFilterCommitHandler;
@@ -10,7 +12,7 @@ export interface ColumnFilterContextProps {
 }
 export declare const ColumnFilterContext: import("react").Context<ColumnFilterContextProps>;
 export declare function useFilterContext(column: ColumnDescriptor, throwIfNoContainer?: false): ColumnFilterContextProps;
-export declare function useFilterContext(column: ColumnDescriptor, throwIfNoContainer: true): Required<ColumnFilterContextProps>;
+export declare function useFilterContext(column: ColumnDescriptor, throwIfNoContainer: true): Required<Omit<ColumnFilterContextProps, "filter">> & Pick<ColumnFilterContextProps, "filter">;
 export type FilterAppliedHandler<F extends Filter = Filter> = (filter: F) => void;
 export type ColumnFilterContainerHookProps = {
     filter?: FilterContainerFilter;

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export { ColumnFilter, type ColumnFilterProps, } from "./column-filter/ColumnFilter";
+export type { SelectableColumnFilterOp } from "./column-filter/column-filter-utils";
 export * from "./filter-bar";
 export * from "./filter-clause";
 export { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause";

package/types/src/FilterAggregator.d.ts

@@ -0,0 +1,28 @@
+import { ColumnFilterValue, ExtendedFilterOptions, FilterClauseOp, FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+/**
+ * Manages a filter that can be updated one clause at a time.
+ * Works with FilterContainer to aggregate multiple filter
+ * clauses edited via individual controls. It is just a wrapper
+ * around a Map, does not support switching filters - create a
+ * new FilterAggregator for a new filter.
+ *
+ */
+export declare class FilterAggregator {
+    #private;
+    constructor(filter?: FilterContainerFilter);
+    add(column: ColumnDescriptor, value: ColumnFilterValue, op?: FilterClauseOp | "between" | "between-inclusive", extendedFilterOptions?: ExtendedFilterOptions): void;
+    has({ name }: ColumnDescriptor): boolean;
+    get({ name }: ColumnDescriptor): FilterContainerFilter | undefined;
+    clear(): void;
+    /**
+     * Remove filter for this column. Return false if no filter found, otw true
+     */
+    remove(column: ColumnDescriptor): boolean;
+    get isEmpty(): boolean;
+    /**
+     * Count of the number of columns for which filters are stored
+     */
+    get count(): number;
+    get filter(): FilterContainerFilter | undefined;
+}

package/types/src/FilterModel.d.ts

@@ -0,0 +1,44 @@
+import { Filter, FilterClause, FilterClauseOp, FilterCombinatorOp } from "@vuu-ui/vuu-filter-types";
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+export type FilterStatusChangeHandler = (isValid: boolean) => void;
+export type FilterChangeHandler = (filter: Partial<Filter>, isValid: boolean) => void;
+export type FilterClauseChangeHandler = (filter: Partial<FilterClause>, isValid: boolean) => void;
+export type FilterClauseModelEvents = {
+    filterClause: FilterClauseChangeHandler;
+    isValid: FilterStatusChangeHandler;
+};
+export type FilterModelEvents = {
+    filter: FilterChangeHandler;
+    isValid: FilterStatusChangeHandler;
+};
+export declare class FilterClauseModel extends EventEmitter<FilterClauseModelEvents> {
+    #private;
+    constructor(filterClause: Partial<FilterClause>);
+    get isValid(): boolean;
+    private setIsValid;
+    get column(): undefined | string;
+    set column(column: undefined | string);
+    get op(): "in" | import("@vuu-ui/vuu-filter-types").SingleValueFilterClauseOp | undefined;
+    setOp(op: undefined | FilterClauseOp): void;
+    setValue(value: undefined | string | string[] | number | number[] | boolean | boolean[], isFinal?: boolean): void;
+    asFilter(throwIfInvalid?: boolean): FilterClause;
+    commit(): void;
+}
+export declare class FilterModel extends EventEmitter<FilterModelEvents> {
+    #private;
+    constructor(filter?: Filter);
+    get isValid(): boolean;
+    private setIsValid;
+    addNewFilterClause(operator?: FilterCombinatorOp): void;
+    addFilterClause(filterClause?: Partial<FilterClause>): void;
+    removeFilterClause(filterClause: FilterClauseModel): void;
+    checkValidStatus(): void;
+    onFilterClauseChange: FilterChangeHandler;
+    onFilterClauseStatusChange: (isValid: boolean) => void;
+    getFilterClause(index: number): FilterClauseModel;
+    get op(): FilterCombinatorOp | undefined;
+    setOp(op: FilterCombinatorOp): void;
+    get filterClauses(): FilterClauseModel[];
+    get isMultiClauseFilter(): boolean;
+    asFilter(throwIfInvalid?: boolean): Filter;
+}

package/types/src/column-filter/ColumnFilter.d.ts

@@ -0,0 +1,6 @@
+import { type SegmentedButtonGroupProps } from "@salt-ds/core";
+import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
+import { ColumnFilterHookProps } from "./useColumnFilter";
+export interface ColumnFilterProps extends ColumnFilterHookProps, Omit<SegmentedButtonGroupProps, "defaultValue">, Pick<DataItemEditControlProps, "TypeaheadProps" | "table" | "values" | "variant"> {
+}
+export declare const ColumnFilter: import("react").ForwardRefExoticComponent<ColumnFilterProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/column-filter/useColumnFilter.d.ts

@@ -0,0 +1,43 @@
+import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, ColumnFilterValue, ExtendedFilterOptions } from "@vuu-ui/vuu-filter-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { InputProps } from "@salt-ds/core";
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
+export interface ColumnFilterHookProps extends Pick<DataItemEditControlProps, "InputProps"> {
+    column: ColumnDescriptor;
+    /**
+     * Filter defaultValue. Pair of values expected when operator is
+     * 'between'. If provided, component is uncontrolled
+     */
+    defaultValue?: ColumnFilterValue;
+    /**
+     * Provides for custom filters.
+     */
+    extendedFilterOptions?: ExtendedFilterOptions;
+    /**
+     * Filter change events.
+     */
+    onColumnFilterChange?: ColumnFilterChangeHandler;
+    /**
+     * Filter change events on second control in range filter
+     */
+    onColumnRangeFilterChange?: ColumnFilterChangeHandler;
+    /**
+     * Called when user 'commits' filter value, either by pressing enter,
+     * tabbing away from control or making selection from list
+     */
+    onCommit: ColumnFilterCommitHandler;
+    operator?: ColumnFilterOp;
+    /**
+     * Filter value. Pair of values expected when operator is
+     * 'between'. If provided, component is controlled.
+     */
+    value?: ColumnFilterValue;
+}
+export declare const useColumnFilter: ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator, value: valueProp, }: ColumnFilterHookProps) => {
+    InputProps: InputProps;
+    InputPropsRange: InputProps;
+    isInvalid: boolean;
+    onCommit: CommitHandler<HTMLElement>;
+    onCommitRange: CommitHandler<HTMLElement>;
+};

package/types/src/column-filter/utils.d.ts

@@ -0,0 +1,4 @@
+import { Filter } from "@vuu-ui/vuu-filter-types";
+export declare const isStartsWithValue: (value: string) => boolean;
+export declare const getTypeaheadFilter: (column: string, filterValues: string[], isStartsWithFilter?: boolean) => Filter | undefined;
+export declare const getRangeFilter: (column: string, startValue?: number, endValue?: number) => Filter | undefined;

package/types/src/custom-filters/CustomFilters.d.ts

@@ -0,0 +1,7 @@
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes } from "react";
+import { type FilterBarProps } from "../filter-bar";
+export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "vuuTable"> {
+    columnDescriptors: readonly ColumnDescriptor[];
+}
+export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react").JSX.Element;

package/types/src/custom-filters/filterBarFocusManagement.d.ts

@@ -0,0 +1 @@
+export declare const navigateToNextItem: (el: HTMLElement | EventTarget, direction?: "bwd" | "fwd") => void;

package/types/src/custom-filters/index.d.ts

@@ -0,0 +1 @@
+export * from "./CustomFilters";

package/types/src/custom-filters/useCustomFilters.d.ts

@@ -0,0 +1,33 @@
+import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
+import { PromptProps } from "@vuu-ui/vuu-ui-controls";
+import { KeyboardEventHandler, RefObject } from "react";
+import { FilterBarProps } from "../filter-bar";
+import { FilterEditCancelHandler, FilterEditSaveHandler } from "../filter-editor";
+import { FilterPillProps } from "../filter-pill";
+export type EditFilterState = "create" | "edit";
+export type FilterState = EditFilterState | "rename";
+export declare const isEditFilterState: (filterState?: string) => filterState is EditFilterState;
+type InteractedFilterState = {
+    filter?: Filter;
+    index: number;
+    state: FilterState;
+};
+export interface CustomFilterHookProps extends Pick<FilterBarProps, "columnDescriptors" | "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged"> {
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+export declare const useCustomFilters: ({ columnDescriptors, containerRef, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, }: CustomFilterHookProps) => {
+    FilterPillProps: Omit<FilterPillProps, "filter" | "selected">;
+    activeFilterIndex: number[];
+    addButtonProps: {
+        ref: RefObject<HTMLButtonElement | null>;
+        onClick: () => void;
+        onKeyDown: KeyboardEventHandler;
+    };
+    columnsByName: ColumnDescriptorsByName;
+    filters: Filter[];
+    interactedFilterState: InteractedFilterState | undefined;
+    onCancelEdit: FilterEditCancelHandler;
+    onSave: FilterEditSaveHandler;
+    promptProps: PromptProps | null;
+};
+export {};

package/types/src/custom-filters/useFilterState.d.ts

@@ -0,0 +1,17 @@
+import { Filter, FilterState } from "@vuu-ui/vuu-filter-types";
+export interface FiltersHookProps {
+    defaultFilterState?: FilterState;
+    filterState?: FilterState;
+    onFilterDeleted?: (filter: Filter) => void;
+    onFilterRenamed?: (filter: Filter, name: string) => void;
+    onFilterStateChanged?: (s: FilterState) => void;
+}
+export declare const useFilterState: ({ defaultFilterState, onFilterDeleted, onFilterRenamed, onFilterStateChanged, filterState: filterStateProp, }: FiltersHookProps) => {
+    activeFilterIndex: number[];
+    filters: Filter[];
+    onToggleFilterActive: (filterIndex: number, preserveRemainingFilters?: boolean) => void;
+    onAddFilter: (filter: Filter) => number;
+    onChangeFilter: (oldFilter: Filter, newFilter: Filter) => number;
+    onDeleteFilter: (filter: Filter) => number;
+    onRenameFilter: (filter: Filter, name: string) => number;
+};

package/types/src/filter-bar/FilterBar.d.ts

@@ -0,0 +1,33 @@
+import { Filter, FilterHandler, FilterState } from "@vuu-ui/vuu-filter-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes } from "react";
+import { QuickFilterProps } from "../quick-filters";
+import { FilterMode } from "./useFilterBar";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+export type FilterBarVariant = "custom-filters-only" | "quick-filters-only" | "full-filters";
+export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
+    QuickFilterProps?: Pick<QuickFilterProps, "quickFilterColumns" | "onChangeQuickFilterColumns">;
+    /**
+     * Used to ensure we present filter editors appropriate to the data type of column.
+     * NOTE: Always make sure that these are passed with proper re-render optimization (i.e make
+     * sure its a stable reference, in React terminology), otherwise might end up with infinite
+     * state updates.
+     */
+    columnDescriptors: readonly ColumnDescriptor[];
+    defaultFilterMode?: FilterMode;
+    defaultFilterState?: FilterState;
+    filterMode?: FilterMode;
+    filterState?: FilterState;
+    onApplyFilter: FilterHandler;
+    onChangeFilterMode?: (filterMode: FilterMode) => void;
+    onClearFilter: () => void;
+    onFilterDeleted?: FilterHandler;
+    onFilterRenamed?: (filter: Filter, name: string) => void;
+    onFilterStateChanged?: (state: FilterState) => void;
+    /**
+     * Defines table used in call to Vuu Typeahead service
+     */
+    vuuTable?: VuuTable;
+    variant?: FilterBarVariant;
+}
+export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react").JSX.Element;

package/types/src/filter-bar/FilterBarMenu.d.ts

@@ -0,0 +1 @@
+export declare const FilterBarMenu: () => import("react").JSX.Element;

package/types/src/filter-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FilterBar";
+export type { FilterMode } from "./useFilterBar";

package/types/src/filter-bar/useFilterBar.d.ts

@@ -0,0 +1,7 @@
+import { SyntheticEvent } from "react";
+import { FilterBarProps } from "./FilterBar";
+export type FilterMode = "custom-filter" | "quick-filter";
+export declare const useFilterBar: ({ defaultFilterMode, filterMode: filterModeProp, onChangeFilterMode, }: Pick<FilterBarProps, "defaultFilterMode" | "filterMode" | "onChangeFilterMode">) => {
+    filterMode: FilterMode;
+    onChangeFilterMode: (e: SyntheticEvent<HTMLButtonElement>) => void;
+};

package/types/src/filter-clause/ExpandoCombobox.d.ts

@@ -0,0 +1,10 @@
+import { ComboBoxProps } from "@salt-ds/core";
+import { ReactElement, Ref } from "react";
+export interface ExpandoComboboxProps<Item = string> extends Omit<ComboBoxProps<Item>, "onOpenChange"> {
+    itemToString?: (item: Item) => string;
+    dropdownOnAutofocus?: boolean;
+    onOpenChange?: (open: boolean, reason?: "manual" | "input" | "focus") => void;
+}
+export declare const ExpandoCombobox: <Item = string>(props: ExpandoComboboxProps<Item> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;

package/types/src/filter-clause/FilterClause.d.ts

@@ -0,0 +1,16 @@
+import { ColumnDescriptorsByName } from "@vuu-ui/vuu-filter-types";
+import { HTMLAttributes } from "react";
+import { FilterClauseModel } from "../FilterModel";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+export type FilterClauseCancelType = "Backspace" | "Escape";
+export type FilterClauseCancelHandler = (filterClause: FilterClauseModel, reason: FilterClauseCancelType) => void;
+export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    columnsByName: ColumnDescriptorsByName;
+    filterClauseModel: FilterClauseModel;
+    onCancel?: FilterClauseCancelHandler;
+    onDropdownOpen?: () => void;
+    onFocusSave?: () => void;
+    dropdownOnAutofocus?: boolean;
+    vuuTable: VuuTable;
+}
+export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ComboBoxProps } from "@salt-ds/core";
+import { SyntheticEvent } from "react";
+export type ColumnPickerProps = Pick<ComboBoxProps, "className" | "inputProps" | "value"> & {
+    columns: readonly ColumnDescriptor[];
+    onSelect: (evt: SyntheticEvent, columnName: string) => void;
+    dropdownOnAutofocus?: boolean;
+};
+export declare const ColumnPicker: import("react").ForwardRefExoticComponent<Pick<ComboBoxProps<string>, "className" | "inputProps" | "value"> & {
+    columns: readonly ColumnDescriptor[];
+    onSelect: (evt: SyntheticEvent, columnName: string) => void;
+    dropdownOnAutofocus?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;