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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0-beta.3",
+  "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.3",
-    "@vuu-ui/vuu-protocol-types": "3.5.0-beta.3",
-    "@vuu-ui/vuu-table-types": "3.5.0-beta.3",
-    "@vuu-ui/vuu-filter-types": "3.5.0-beta.3"
+    "@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.3",
-    "@vuu-ui/vuu-data-react": "3.5.0-beta.3",
-    "@vuu-ui/vuu-filter-parser": "3.5.0-beta.3",
-    "@vuu-ui/vuu-popups": "3.5.0-beta.3",
-    "@vuu-ui/vuu-ui-controls": "3.5.0-beta.3",
-    "@vuu-ui/vuu-table": "3.5.0-beta.3",
-    "@vuu-ui/vuu-utils": "3.5.0-beta.3",
+    "@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

@@ -10,7 +10,9 @@ 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, variant, ...props })=>{
+const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", pattern: patternProp, variant, ...props })=>{
+    const { getColumnFilterPattern } = useColumnFilterRegistry();
+    const pattern = patternProp ?? getColumnFilterPattern(columnProp);
     const { date, time } = pattern ?? {};
     const column = useMemo(()=>withDateTimePattern(columnProp, date || time ? {
             date,

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

@@ -8,13 +8,14 @@ const defaultProps = {
 };
 const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProviderKey } = defaultProps)=>{
     const { currentFilter, clearCurrentFilter, setCurrentFilter } = useSavedFilters(filterProviderKey);
-    const { getColumnFilterColumn } = useColumnFilterRegistry(filterProviderKey);
+    const { getColumnFilterColumn, getColumnFilterPattern } = useColumnFilterRegistry(filterProviderKey);
     const filterAggregatorRef = useRef(EmptyAggregator);
     const getCellFilter = useCallback((column, dataRow)=>{
         const value = dataRow[column.name];
         if (getTemporalInfo(column)) {
             const pattern = filterPatterns?.[column.name];
-            const columnFilterColumn = pattern ? void 0 : getColumnFilterColumn(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);
             if (temporalCellFilter) return {
@@ -30,7 +31,8 @@ const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProvi
         };
     }, [
         filterPatterns,
-        getColumnFilterColumn
+        getColumnFilterColumn,
+        getColumnFilterPattern
     ]);
     useMemo(()=>{
         if (!filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)) filterAggregatorRef.current = currentFilter.filter ? new FilterAggregator(currentFilter.filter) : new FilterAggregator();

package/src/filter-provider/FilterContext.js

@@ -32,7 +32,7 @@ const FilterContext = createContext({
     setCurrentFilter: ()=>console.warn("[FilterContext] setCurrentFilter, no FilterProvider has been configured")
 });
 function useColumnFilterRegistry(key = "GLOBAL") {
-    const { getColumnFilterColumn, registerColumnFilterColumn } = useContext(FilterContext);
+    const { getColumnFilterColumn, getColumnFilterPattern, registerColumnFilterColumn } = useContext(FilterContext);
     const getColumn = useCallback((columnName)=>getColumnFilterColumn?.(key, columnName), [
         getColumnFilterColumn,
         key
@@ -41,8 +41,12 @@ function useColumnFilterRegistry(key = "GLOBAL") {
         key,
         registerColumnFilterColumn
     ]);
+    const getPattern = useCallback((column)=>getColumnFilterPattern?.(column), [
+        getColumnFilterPattern
+    ]);
     return {
         getColumnFilterColumn: getColumn,
+        getColumnFilterPattern: getPattern,
         registerColumnFilterColumn: register
     };
 }

package/src/filter-provider/FilterProvider.js

@@ -14,7 +14,7 @@ const mapToRecord = (savedFilters)=>{
     });
     return record;
 };
-const FilterProvider = ({ children, 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,6 +30,10 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
             if (columns.get(column.name) === column) columns.delete(column.name);
         };
     }, []);
+    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)=>{
         const filterDescriptors = savedFilters.get(key);
@@ -183,6 +187,7 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
     return /*#__PURE__*/ jsxs(FilterContext.Provider, {
         value: {
             getColumnFilterColumn,
+            getColumnFilterPattern,
             registerColumnFilterColumn,
             onFilterMenuAction: handleFilterMenuAction,
             deleteFilter,

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

@@ -2,14 +2,21 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import { type ColumnFilterContainerHookProps } from "./useFilterContainer";
 import { ColumnFilterValue } from "@vuu-ui/vuu-filter-types";
 import { ColumnFilterProps } from "../column-filter/ColumnFilter";
+import { type DateTimePattern } from "@vuu-ui/vuu-utils";
 export interface FilterContainerProps extends HTMLAttributes<HTMLDivElement>, ColumnFilterContainerHookProps {
     children: ReactNode;
     filterProviderKey?: string;
 }
 export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps, "defaultValue" | "onCommit" | "value"> {
     defaultValue?: ColumnFilterValue;
+    /**
+     * See ColumnFilter pattern. Defaults to the pattern configured for the
+     * column by FilterProvider columnFilterPatterns or columnTypeFilterPatterns,
+     * if any.
+     */
+    pattern?: DateTimePattern;
 }
-export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, 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-provider/FilterContext.d.ts

@@ -1,6 +1,13 @@
 import { FilterContainerFilter, FilterContainerFilterDescriptor, FilterContainerFilterDescriptorWithFilter } from "@vuu-ui/vuu-filter-types";
 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, 
 /**
@@ -13,6 +20,13 @@ export interface FilterContextProps {
      * FilterContainer) for the named column, if one is registered.
      */
     getColumnFilterColumn?: (key: string, columnName: string) => ColumnDescriptor | undefined;
+    /**
+     * 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?: (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.
@@ -41,6 +55,7 @@ export declare const FilterContext: import("react").Context<FilterContextProps>;
  */
 export declare function useColumnFilterRegistry(key?: string): {
     getColumnFilterColumn: (columnName: string) => ColumnDescriptor | undefined;
+    getColumnFilterPattern: (column: ColumnFilterPatternColumn) => DateTimePattern | undefined;
     registerColumnFilterColumn: (column: ColumnDescriptor) => (() => void) | undefined;
 };
 interface SavedFilterHookProps {

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

@@ -1,10 +1,28 @@
 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;
+    /**
+     * Date/time patterns, keyed by column name, of the ColumnFilters
+     * (FilterContainerColumnFilter) within this provider. A ColumnFilter
+     * without a pattern prop uses the pattern configured here. As these are
+     * available whether or not a ColumnFilter is mounted, the filter context
+     * menu can match a temporal cell value at the precision of the ColumnFilter,
+     * 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, 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;
+};