@vuu-ui/vuu-filters 3.5.0-beta.4 → 3.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0-beta.4",
+  "version": "3.5.0",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,19 +10,19 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.5.0-beta.4",
-    "@vuu-ui/vuu-protocol-types": "3.5.0-beta.4",
-    "@vuu-ui/vuu-table-types": "3.5.0-beta.4",
-    "@vuu-ui/vuu-filter-types": "3.5.0-beta.4"
+    "@vuu-ui/vuu-data-types": "3.5.0",
+    "@vuu-ui/vuu-protocol-types": "3.5.0",
+    "@vuu-ui/vuu-table-types": "3.5.0",
+    "@vuu-ui/vuu-filter-types": "3.5.0"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.0-beta.4",
-    "@vuu-ui/vuu-data-react": "3.5.0-beta.4",
-    "@vuu-ui/vuu-filter-parser": "3.5.0-beta.4",
-    "@vuu-ui/vuu-popups": "3.5.0-beta.4",
-    "@vuu-ui/vuu-ui-controls": "3.5.0-beta.4",
-    "@vuu-ui/vuu-table": "3.5.0-beta.4",
-    "@vuu-ui/vuu-utils": "3.5.0-beta.4",
+    "@vuu-ui/vuu-context-menu": "3.5.0",
+    "@vuu-ui/vuu-data-react": "3.5.0",
+    "@vuu-ui/vuu-filter-parser": "3.5.0",
+    "@vuu-ui/vuu-popups": "3.5.0",
+    "@vuu-ui/vuu-ui-controls": "3.5.0",
+    "@vuu-ui/vuu-table": "3.5.0",
+    "@vuu-ui/vuu-utils": "3.5.0",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

package/src/filter-container/FilterContainer.js

@@ -12,7 +12,7 @@ const classBase = "vuuFilterContainer";
 const notEmpty = (value)=>Array.isArray(value) ? "" !== value[0] && "" !== value[1] : "" !== value;
 const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", pattern: patternProp, variant, ...props })=>{
     const { getColumnFilterPattern } = useColumnFilterRegistry();
-    const pattern = patternProp ?? getColumnFilterPattern(columnProp.name);
+    const pattern = patternProp ?? getColumnFilterPattern(columnProp);
     const { date, time } = pattern ?? {};
     const column = useMemo(()=>withDateTimePattern(columnProp, date || time ? {
             date,

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

@@ -14,7 +14,7 @@ const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProvi
         const value = dataRow[column.name];
         if (getTemporalInfo(column)) {
             const pattern = filterPatterns?.[column.name];
-            const columnFilterPattern = getColumnFilterPattern(column.name);
+            const columnFilterPattern = getColumnFilterPattern(column);
             const columnFilterColumn = pattern ? void 0 : getColumnFilterColumn(column.name) ?? (columnFilterPattern ? withDateTimePattern(column, columnFilterPattern) : void 0);
             const filterColumn = pattern ? withDateTimePattern(column, pattern) : columnFilterColumn;
             const temporalCellFilter = getTemporalCellFilter(filterColumn ?? column, value, void 0 !== columnFilterColumn);

package/src/filter-provider/FilterContext.js

@@ -41,7 +41,7 @@ function useColumnFilterRegistry(key = "GLOBAL") {
         key,
         registerColumnFilterColumn
     ]);
-    const getPattern = useCallback((columnName)=>getColumnFilterPattern?.(columnName), [
+    const getPattern = useCallback((column)=>getColumnFilterPattern?.(column), [
         getColumnFilterPattern
     ]);
     return {

package/src/filter-provider/FilterProvider.js

@@ -14,7 +14,7 @@ const mapToRecord = (savedFilters)=>{
     });
     return record;
 };
-const FilterProvider = ({ children, columnFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
+const FilterProvider = ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
     const [, forceRefresh] = useState({});
     const savedFilters = useMemo(()=>savedFiltersProp ? new Map(Object.entries(savedFiltersProp)) : new Map(), [
         savedFiltersProp
@@ -30,8 +30,9 @@ const FilterProvider = ({ children, columnFilterPatterns, onFiltersSaved, savedF
             if (columns.get(column.name) === column) columns.delete(column.name);
         };
     }, []);
-    const getColumnFilterPattern = useCallback((columnName)=>columnFilterPatterns?.[columnName], [
-        columnFilterPatterns
+    const getColumnFilterPattern = useCallback(({ name, serverDataType })=>columnFilterPatterns?.[name] ?? (serverDataType ? columnTypeFilterPatterns?.[serverDataType] : void 0), [
+        columnFilterPatterns,
+        columnTypeFilterPatterns
     ]);
     const getColumnFilterColumn = useCallback((key, columnName)=>columnFilterColumnsRef.current.get(key)?.get(columnName), []);
     const deleteFilter = useCallback((key, filterId)=>{

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

@@ -11,7 +11,8 @@ export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps
     defaultValue?: ColumnFilterValue;
     /**
      * See ColumnFilter pattern. Defaults to the pattern configured for the
-     * column by FilterProvider columnFilterPatterns, if any.
+     * column by FilterProvider columnFilterPatterns or columnTypeFilterPatterns,
+     * if any.
      */
     pattern?: DateTimePattern;
 }

package/types/filter-provider/FilterContext.d.ts

@@ -2,6 +2,12 @@ import { FilterContainerFilter, FilterContainerFilterDescriptor, FilterContainer
 import { FilterAction } from "../filter-pill/FilterMenu";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import type { DateTimePattern } from "@vuu-ui/vuu-utils";
+import type { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
+/** The column attributes by which a ColumnFilter pattern is configured */
+export type ColumnFilterPatternColumn = {
+    name: string;
+    serverDataType?: VuuColumnDataType;
+};
 export declare const filterDescriptorHasFilter: (f: FilterContainerFilterDescriptor) => f is FilterContainerFilterDescriptorWithFilter;
 export type FilterContextFilterMenuActionHandler = <T extends FilterAction = FilterAction>(key: string, filterId: string, filterAction: T, 
 /**
@@ -15,11 +21,12 @@ export interface FilterContextProps {
      */
     getColumnFilterColumn?: (key: string, columnName: string) => ColumnDescriptor | undefined;
     /**
-     * The date/time pattern of the ColumnFilter for the named column, as
-     * configured by FilterProvider columnFilterPatterns. Available whether or
-     * not the ColumnFilter is mounted.
+     * The date/time pattern of the ColumnFilter for the column, as configured
+     * by FilterProvider columnFilterPatterns (by column name) or
+     * columnTypeFilterPatterns (by serverDataType). Available whether or not
+     * the ColumnFilter is mounted.
      */
-    getColumnFilterPattern?: (columnName: string) => DateTimePattern | undefined;
+    getColumnFilterPattern?: (column: ColumnFilterPatternColumn) => DateTimePattern | undefined;
     /**
      * Register the column descriptor used by a ColumnFilter, which may differ
      * from the Table column descriptor, e.g. a different date/time pattern.
@@ -48,7 +55,7 @@ export declare const FilterContext: import("react").Context<FilterContextProps>;
  */
 export declare function useColumnFilterRegistry(key?: string): {
     getColumnFilterColumn: (columnName: string) => ColumnDescriptor | undefined;
-    getColumnFilterPattern: (columnName: string) => DateTimePattern | undefined;
+    getColumnFilterPattern: (column: ColumnFilterPatternColumn) => DateTimePattern | undefined;
     registerColumnFilterColumn: (column: ColumnDescriptor) => (() => void) | undefined;
 };
 interface SavedFilterHookProps {

package/types/filter-provider/FilterProvider.d.ts

@@ -1,6 +1,7 @@
 import { FilterContainerFilterDescriptor } from "@vuu-ui/vuu-filter-types";
 import { ReactNode } from "react";
 import { type DateTimePattern } from "@vuu-ui/vuu-utils";
+import type { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
 export type SavedFilterRecord = Record<string, FilterContainerFilterDescriptor[]>;
 export interface FilterProviderProps {
     children: ReactNode;
@@ -13,8 +14,15 @@ export interface FilterProviderProps {
      * even where ColumnFilters are created on demand.
      */
     columnFilterPatterns?: Record<string, DateTimePattern>;
+    /**
+     * Date/time patterns, keyed by serverDataType, of the ColumnFilters within
+     * this provider, e.g. { epochtimestampnano: { time: "hh:mm:ss.ms" } }.
+     * Applies to columns with no entry in columnFilterPatterns. The column must
+     * have a serverDataType (a Table column has one, from the table schema).
+     */
+    columnTypeFilterPatterns?: Partial<Record<VuuColumnDataType, DateTimePattern>>;
     onFiltersSaved?: (savedFilters: SavedFilterRecord) => void;
     savedFilters?: SavedFilterRecord;
     filterNameMaxLength?: number;
 }
-export declare const FilterProvider: ({ children, columnFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterProvider: ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -11,8 +11,8 @@ export { FilterPanel } from "./filter-panel/FilterPanel";
 export * from "./filter-pill";
 export { type FilterPermissions } from "./filter-pill/FilterMenu";
 export { FilterPillNext, type FilterPillNextProps, } from "./filter-pill/FilterPillNext";
-export { NULL_FILTER, useColumnFilterRegistry, useSavedFilters, } from "./filter-provider/FilterContext";
-export { FilterProvider } from "./filter-provider/FilterProvider";
+export { NULL_FILTER, type ColumnFilterPatternColumn, useColumnFilterRegistry, useSavedFilters, } from "./filter-provider/FilterContext";
+export { FilterProvider, type FilterProviderProps, } from "./filter-provider/FilterProvider";
 export * from "./filter-utils";
 export * from "./FilterModel";
 export * from "./inline-filter";

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>>;

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

@@ -0,0 +1,11 @@
+import { ChangeEvent, SyntheticEvent } from "react";
+export declare const useColumnPicker: ({ onSelect, value: valueProp, }: {
+    onSelect: (evt: SyntheticEvent, columnName: string) => void;
+    value: string;
+}) => {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onOpenChange: (isOpen: boolean, reason?: "manual" | "input" | "focus") => void;
+    onSelectionChange: (evt: SyntheticEvent, [newSelected]: string[]) => void;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    value: string;
+};

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

@@ -0,0 +1,15 @@
+import { KeyboardEvent } from "react";
+type FilterClauseFieldName = "column" | "operator" | "value";
+export declare const getFocusedFieldDetails: () => [number, string] | [];
+export declare const elementIsFilterCombinator: (element: Element | null) => element is HTMLElement;
+export declare const elementIsFilterClause: (element: Element | null) => element is HTMLElement;
+export declare const focusFilterClauseField: (filterEditor: HTMLElement, filterClauseIndex: number, fieldName?: FilterClauseFieldName) => void;
+export declare const focusLastClauseValue: (filterEditor: HTMLElement) => void;
+export declare const focusNextFocusableElement: (direction?: "fwd" | "bwd") => void;
+export declare const focusNextElement: () => void;
+export declare const clauseIsNotFirst: (el: HTMLElement) => boolean | undefined;
+export declare const tabToPreviousFilterCombinator: (currentElement: HTMLElement) => void;
+export declare const navigateToNextFilterClause: (currentElement: HTMLElement, direction?: "bwd" | "fwd") => void;
+export declare const navigateToNextItemIfAtBoundary: (evt: KeyboardEvent<HTMLInputElement>) => void;
+export declare const focusFirstClauseIfAllClausesValid: (filterEditor: HTMLElement) => void;
+export {};

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

@@ -0,0 +1,12 @@
+import type { TableSchemaTable } from "@vuu-ui/vuu-data-types";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import type { InputProps } from "@salt-ds/core";
+import type { FilterClauseValueChangeHandler } from "./useFilterClause";
+export interface FilterClauseValueEditor {
+    inputProps?: InputProps["inputProps"];
+    column: ColumnDescriptor;
+    onDeselect?: () => void;
+    onChangeValue: FilterClauseValueChangeHandler;
+    onOpenChange?: (open: boolean, reason?: "input" | "manual" | "focus") => void;
+    table?: TableSchemaTable;
+}

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

@@ -0,0 +1,5 @@
+export * from "./column-picker/ColumnPicker";
+export { OperatorPicker } from "./operator-picker/OperatorPicker";
+export * from "./ExpandoCombobox";
+export * from "./FilterClause";
+export * from "./value-editors/FilterClauseValueEditorText";

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

@@ -0,0 +1,14 @@
+import type { 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"> & {
+    column: ColumnDescriptor;
+    onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;
+    dropdownOnAutofocus?: boolean;
+};
+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>>;

package/types/src/filter-clause/operator-picker/operator-utils.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import type { FilterClauseOp, NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
+export declare const textOperators: FilterClauseOp[];
+export declare const numericOperators: NumericFilterClauseOp[];
+export declare const getOperators: (column: ColumnDescriptor) => FilterClauseOp[];

package/types/src/filter-clause/operator-picker/useOperatorPicker.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, SyntheticEvent } from "react";
+import { FilterClauseOp } from "@vuu-ui/vuu-filter-types";
+export declare const useOperatorPicker: ({ onSelect, value: valueProp, }: {
+    onSelect: (evt: SyntheticEvent, op: FilterClauseOp) => void;
+    value: string;
+}) => {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onOpenChange: (isOpen: boolean, reason?: "manual" | "input" | "focus") => void;
+    onSelectionChange: (evt: SyntheticEvent, [newSelected]: FilterClauseOp[]) => void;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    value: string;
+};

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

@@ -0,0 +1,26 @@
+import { FilterClause, FilterClauseOp } from "@vuu-ui/vuu-filter-types";
+import { KeyboardEvent, RefCallback, SyntheticEvent } from "react";
+import { FilterClauseProps } from "./FilterClause";
+export type FilterClauseEditorHookProps = Pick<FilterClauseProps, "columnsByName" | "filterClauseModel" | "onCancel" | "onFocusSave"> & {
+    onOpenChange?: (open: boolean, reason?: "focus" | "input" | "manual") => void;
+    dropdownOnAutofocus?: boolean;
+};
+export type FilterClauseValueChangeHandler = (value: string | string[] | number | number[], isFinal?: boolean) => void;
+export declare const useFilterClause: ({ filterClauseModel, onCancel, columnsByName, onFocusSave, onOpenChange, dropdownOnAutofocus, }: FilterClauseEditorHookProps) => {
+    inputProps: {
+        onKeyDownCapture: (evt: KeyboardEvent<HTMLInputElement>) => void;
+        tabIndex: number;
+        onFocus: () => true;
+    };
+    columnRef: import("react").RefObject<HTMLDivElement | null>;
+    filterClause: Partial<FilterClause>;
+    onChangeValue: FilterClauseValueChangeHandler;
+    onDeselectValue: () => void;
+    onSelectColumn: (evt: SyntheticEvent, selectedColumn: string) => void;
+    onSelectOperator: (_: SyntheticEvent, selectedOp: FilterClauseOp) => void;
+    onOpenChange: (open: boolean, closeReason?: "focus" | "input" | "manual") => void;
+    operatorRef: import("react").RefObject<HTMLDivElement | null>;
+    selectedColumn: import("@vuu-ui/vuu-table-types").ColumnDescriptor;
+    valueRef: RefCallback<HTMLDivElement>;
+    showDropdownOnAutoFocus: boolean;
+};

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

@@ -0,0 +1,26 @@
+import { TableSchemaTable } from "@vuu-ui/vuu-data-types";
+import { SingleValueFilterClauseOp } from "@vuu-ui/vuu-filter-types";
+export declare const FilterClauseValueEditor: import("react").ForwardRefExoticComponent<Pick<{
+    inputProps: {
+        onKeyDownCapture: (evt: import("react").KeyboardEvent<HTMLInputElement>) => void;
+        tabIndex: number;
+        onFocus: () => true;
+    };
+    columnRef: import("react").RefObject<HTMLDivElement | null>;
+    filterClause: Partial<import("@vuu-ui/vuu-filter-types").FilterClause>;
+    onChangeValue: import("../useFilterClause").FilterClauseValueChangeHandler;
+    onDeselectValue: () => void;
+    onSelectColumn: (evt: import("react").SyntheticEvent, selectedColumn: string) => void;
+    onSelectOperator: (_: import("react").SyntheticEvent, selectedOp: import("@vuu-ui/vuu-filter-types").FilterClauseOp) => void;
+    onOpenChange: (open: boolean, closeReason?: "focus" | "input" | "manual") => void;
+    operatorRef: import("react").RefObject<HTMLDivElement | null>;
+    selectedColumn: import("@vuu-ui/vuu-table-types").ColumnDescriptor;
+    valueRef: import("react").RefCallback<HTMLDivElement>;
+    showDropdownOnAutoFocus: boolean;
+}, "inputProps" | "onChangeValue" | "onDeselectValue" | "onOpenChange" | "selectedColumn"> & {
+    table?: TableSchemaTable;
+} & {
+    operator?: SingleValueFilterClauseOp | "in";
+    value?: string | string[] | number | number[] | boolean | boolean[];
+    dropdownOnAutofocus?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;