@vuu-ui/vuu-filters 3.3.8 → 3.3.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.8",
+  "version": "3.3.10",
   "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.3.8",
-    "@vuu-ui/vuu-protocol-types": "3.3.8",
-    "@vuu-ui/vuu-table-types": "3.3.8",
-    "@vuu-ui/vuu-filter-types": "3.3.8"
+    "@vuu-ui/vuu-data-types": "3.3.10",
+    "@vuu-ui/vuu-protocol-types": "3.3.10",
+    "@vuu-ui/vuu-table-types": "3.3.10",
+    "@vuu-ui/vuu-filter-types": "3.3.10"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.3.8",
-    "@vuu-ui/vuu-data-react": "3.3.8",
-    "@vuu-ui/vuu-filter-parser": "3.3.8",
-    "@vuu-ui/vuu-popups": "3.3.8",
-    "@vuu-ui/vuu-ui-controls": "3.3.8",
-    "@vuu-ui/vuu-table": "3.3.8",
-    "@vuu-ui/vuu-utils": "3.3.8",
+    "@vuu-ui/vuu-context-menu": "3.3.10",
+    "@vuu-ui/vuu-data-react": "3.3.10",
+    "@vuu-ui/vuu-filter-parser": "3.3.10",
+    "@vuu-ui/vuu-popups": "3.3.10",
+    "@vuu-ui/vuu-ui-controls": "3.3.10",
+    "@vuu-ui/vuu-table": "3.3.10",
+    "@vuu-ui/vuu-utils": "3.3.10",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

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

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

@@ -0,0 +1,9 @@
+import type { NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
+import type { FilterClauseValueEditor } from "../filterClauseTypes";
+interface FilterClauseValueEditorDateProps extends Pick<FilterClauseValueEditor, "onChangeValue" | "inputProps"> {
+    className?: string;
+    value: number | undefined;
+    operator: NumericFilterClauseOp;
+}
+export declare const FilterClauseValueEditorDate: (props: FilterClauseValueEditorDateProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes, RefObject } from "react";
+import { FilterClauseValueEditor } from "../filterClauseTypes";
+export interface FilterClauseNumericValueEditorProps extends FilterClauseValueEditor, HTMLAttributes<HTMLDivElement> {
+    "data-field"?: string;
+    operatorInputRef?: RefObject<HTMLInputElement>;
+    operator: string;
+    value?: number;
+}
+export declare const FilterClauseValueEditorNumber: import("react").ForwardRefExoticComponent<FilterClauseNumericValueEditorProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { FilterClauseValueEditor } from "../filterClauseTypes";
+export interface FilterClauseTextValueEditorProps extends FilterClauseValueEditor, HTMLAttributes<HTMLDivElement> {
+    "data-field"?: string;
+    operator: string;
+    value: string | string[];
+    dropdownOnAutofocus?: boolean;
+}
+export declare const FilterClauseValueEditorText: import("react").ForwardRefExoticComponent<FilterClauseTextValueEditorProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+import { NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
+import { FilterClauseValueEditor } from "../filterClauseTypes";
+interface FilterClauseValueEditorTimeProps extends Pick<FilterClauseValueEditor, "onChangeValue" | "inputProps"> {
+    className?: string;
+    value: number | undefined;
+    operator: NumericFilterClauseOp;
+}
+export declare const FilterClauseValueEditorTime: (props: FilterClauseValueEditorTimeProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import type { ExtendedFilterOptions, SerializableSingleValueFilterClause, SingleValueFilterClauseOp, TimeTodayFilterOptions } from "@vuu-ui/vuu-filter-types";
+import { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+export declare const isTimeToday: (options: ExtendedFilterOptions) => options is TimeTodayFilterOptions;
+export interface SerializableFilter {
+    asQuery: () => string;
+}
+export declare class ExtendedSingleValueFilterClause implements SerializableSingleValueFilterClause {
+    #private;
+    column: string;
+    op: SingleValueFilterClauseOp;
+    value: VuuRowDataItemType;
+    constructor(column: string, op: SingleValueFilterClauseOp, value: VuuRowDataItemType, extendedOptions: ExtendedFilterOptions);
+    name?: string | undefined;
+    asQuery(): string;
+    toJSON(): {
+        column: string;
+        op: SingleValueFilterClauseOp;
+        value: VuuRowDataItemType;
+        extendedOptions: ExtendedFilterOptions;
+    };
+}

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

@@ -0,0 +1,23 @@
+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";
+export interface FilterContainerProps extends HTMLAttributes<HTMLDivElement>, ColumnFilterContainerHookProps {
+    children: ReactNode;
+    filterProviderKey?: string;
+}
+export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps, "defaultValue" | "onCommit" | "value"> {
+    defaultValue?: ColumnFilterValue;
+}
+export declare const FilterContainerColumnFilter: ({ column, operator, variant, ...props }: FilterContainerColumnFilterProps) => import("react").JSX.Element;
+/**
+ * FilterContainer is a generic UI container for a collection of Filter
+ * controls. Each control manages a single filter clause and the Filter
+ * Container aggregates these clauses into a single filter. FilterContainer
+ * provides a FilterContainerFilter which can be used to provide children.
+ * This is a wrapper around ColumnFilter, which adds some plumbing to allow
+ * the container to track changes and manage each individual contribution to
+ * the top-level filter.
+ * See FilterPanel and InlineFilter for examples of FilterContainer usage.
+ */
+export declare const FilterContainer: ({ children, className, filter, filterProviderKey, onFilterApplied, onFilterCleared, ...htmlAttributes }: FilterContainerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, ColumnFilterValue, Filter, FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export interface ColumnFilterContextProps {
+    filterContainerInstalled: boolean;
+    filterProviderKey?: string;
+    onChange?: ColumnFilterChangeHandler;
+    onCommit?: ColumnFilterCommitHandler;
+    register?: (column: ColumnDescriptor, operator: ColumnFilterOp) => ColumnFilterValue;
+    getValue?: (column: ColumnDescriptor) => ColumnFilterValue;
+}
+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 type FilterAppliedHandler<F extends Filter = Filter> = (filter: F) => void;
+export type ColumnFilterContainerHookProps = {
+    filter?: FilterContainerFilter;
+    filterProviderKey?: string;
+    onFilterApplied?: FilterAppliedHandler<FilterContainerFilter>;
+    onFilterCleared?: () => void;
+};
+export declare const EmptyTuple: ColumnFilterValue;
+export declare const useFilterContainer: ({ filter, filterProviderKey, onFilterApplied, onFilterCleared, }: ColumnFilterContainerHookProps) => ColumnFilterContextProps;

package/types/src/filter-context-menu/useFilterContextMenu.d.ts

@@ -0,0 +1,6 @@
+import type { TableContextMenuDef } from "@vuu-ui/vuu-table-types";
+export interface FilterContextMenuHookProps {
+    filterColumns: string[] | "*";
+    filterProviderKey?: string;
+}
+export declare const useFilterContextMenu: ({ filterColumns, filterProviderKey, }?: FilterContextMenuHookProps) => TableContextMenuDef;

package/types/src/filter-display/FilterDisplay.d.ts

@@ -0,0 +1,10 @@
+import { FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+import { HTMLAttributes } from "react";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export interface FilterDisplayProps extends HTMLAttributes<HTMLDivElement> {
+    allowDelete?: boolean;
+    columns?: readonly ColumnDescriptor[];
+    filter: FilterContainerFilter | undefined;
+    onDeleteFilterClause?: (columnName: string) => void;
+}
+export declare const FilterDisplay: import("react").ForwardRefExoticComponent<FilterDisplayProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/filter-editor/FilterClauseCombinator.d.ts

@@ -0,0 +1,9 @@
+import type { FilterCombinatorOp } from "@vuu-ui/vuu-filter-types";
+import { KeyboardEventHandler } from "react";
+export type FilterClauseCombinatorChangeHandler = (op: FilterCombinatorOp) => void;
+export interface FilterClauseCombinatorProps {
+    onChange: FilterClauseCombinatorChangeHandler;
+    onKeyDown: KeyboardEventHandler;
+    operator: FilterCombinatorOp;
+}
+export declare const FilterClauseCombinator: ({ onChange, onKeyDown, operator, }: FilterClauseCombinatorProps) => import("react").JSX.Element;