@vuu-ui/vuu-filters 4.0.0-beta.6 → 4.0.0

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;

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

@@ -0,0 +1,14 @@
+import type { Filter } from "@vuu-ui/vuu-filter-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes } from "react";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+export type FilterEditSaveHandler = (filter: Filter) => void;
+export type FilterEditCancelHandler = (filter?: Filter) => void;
+export interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {
+    columnDescriptors: readonly ColumnDescriptor[];
+    filter?: Filter;
+    onCancel: FilterEditCancelHandler;
+    onSave: FilterEditSaveHandler;
+    vuuTable: VuuTable;
+}
+export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes }: FilterEditorProps) => import("react").JSX.Element;

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

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

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

@@ -0,0 +1,32 @@
+import type { ColumnDescriptorsByName } from "@vuu-ui/vuu-filter-types";
+import { KeyboardEventHandler, RefCallback } from "react";
+import { FilterEditorProps } from "./FilterEditor";
+import { FilterModel } from "../FilterModel";
+import { FilterClauseCancelHandler } from "../filter-clause";
+import { FilterClauseCombinatorChangeHandler } from "./FilterClauseCombinator";
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-context-menu";
+export interface FilterEditorHookProps extends Pick<FilterEditorProps, "columnDescriptors" | "filter" | "onCancel" | "onSave"> {
+    label?: string;
+}
+export declare const useFilterEditor: ({ columnDescriptors, filter, onCancel, onSave, }: FilterEditorHookProps) => {
+    columnsByName: ColumnDescriptorsByName;
+    filterModel: FilterModel;
+    focusSaveButton: () => void;
+    isValid: boolean;
+    onCancelFilterClause: FilterClauseCancelHandler;
+    onCancelFilterEdit: () => void;
+    onChangeFilterCombinator: FilterClauseCombinatorChangeHandler;
+    onKeyDownCombinator: KeyboardEventHandler<HTMLElement>;
+    saveButtonProps: {
+        PopupMenuProps: {
+            icon: string;
+            menuBuilder: MenuBuilder;
+            menuActionHandler: MenuActionHandler;
+            menuLocation: string;
+        };
+        onClick: () => boolean | undefined;
+        onKeyDown: KeyboardEventHandler;
+    };
+    saveButtonRef: import("react").RefObject<HTMLDivElement | null>;
+    setContainer: RefCallback<HTMLDivElement>;
+};

package/types/src/filter-panel/FilterPanel.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { FilterContainerProps } from "../filter-container/FilterContainer";
+export type FilterPanelPermissions = {
+    allowSaveFilter: boolean;
+};
+export interface FilterPanelProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterContainerProps, "filter" | "filterProviderKey" | "onFilterApplied" | "onFilterCleared"> {
+    permissions?: FilterPanelPermissions;
+}
+export declare const FilterPanel: import("react").ForwardRefExoticComponent<FilterPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/filter-panel/useFilterPanel.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { FilterContainerProps } from "../filter-container/FilterContainer";
+import { FilterAppliedHandler } from "../filter-container/useFilterContainer";
+import { FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+export declare const useFilterPanel: ({ filter, filterProviderKey, onFilterApplied, onFilterCleared, }: Pick<FilterContainerProps, "filter" | "filterProviderKey" | "onFilterApplied" | "onFilterCleared">) => {
+    clearFilter: () => void;
+    disableClear: boolean;
+    disableSave: boolean;
+    filter: FilterContainerFilter | undefined;
+    onFilterApplied: FilterAppliedHandler<FilterContainerFilter>;
+    onFilterCleared: () => void;
+    saveFilter: () => void;
+    saveFilterPrompt: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+};

package/types/src/filter-pill/FilterMenu.d.ts

@@ -0,0 +1,24 @@
+import { MenuProps } from "@salt-ds/core";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export type FilterPermissions = {
+    /** Closing a filter removes it from current display, without deleting*/
+    allowClose?: boolean;
+    /** Edit the details of the filter itself */
+    allowEdit?: boolean;
+    /** Rename the filter */
+    allowRename?: boolean;
+    /** Removing a filter deletes it entirely */
+    allowRemove?: boolean;
+};
+export type FilterMenuActionHandler = <T extends FilterAction = FilterAction>(filterId: string, filterAction: T, 
+/**
+ * Some menu action handlers may use columns to enrich filter display
+ */
+columns?: ColumnDescriptor[]) => void;
+export interface FilterMenuProps extends Pick<MenuProps, "getVirtualElement" | "onOpenChange" | "open"> {
+    filterId: string;
+    onMenuAction: FilterMenuActionHandler;
+    permissions?: FilterPermissions;
+}
+export type FilterAction = "close" | "remove" | "edit" | "rename";
+export declare const FilterMenu: ({ filterId, getVirtualElement, onMenuAction, onOpenChange, open, permissions, }: FilterMenuProps) => import("react").JSX.Element;

package/types/src/filter-pill/FilterPill.d.ts

@@ -0,0 +1,16 @@
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
+import { EditableLabelProps, SplitStateButtonProps } from "@vuu-ui/vuu-ui-controls";
+export interface FilterPillProps extends SplitStateButtonProps, Pick<Partial<EditableLabelProps>, "editing" | "editLabelApiRef" | "onExitEditMode"> {
+    allowClose?: boolean;
+    allowDelete?: boolean;
+    allowEdit?: boolean;
+    allowRename?: boolean;
+    columnsByName?: ColumnDescriptorsByName;
+    editable?: boolean;
+    filter: Filter;
+    index?: number;
+    onBeginEdit?: (filter: Filter) => void;
+    onMenuAction?: MenuActionHandler;
+}
+export declare const FilterPill: ({ allowClose, allowDelete, allowEdit, allowRename, className: classNameProp, columnsByName, editable, editing, editLabelApiRef, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, ...htmlAttributes }: FilterPillProps) => import("react").JSX.Element;

package/types/src/filter-pill/FilterPillNext.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "react";
+import { type FilterPermissions } from "./FilterMenu";
+import { type FilterPillNextHookProps } from "./useFilterPillNext";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export interface FilterPillNextProps extends FilterPillNextHookProps, Omit<HTMLAttributes<HTMLButtonElement>, "id"> {
+    /**
+     * If provided, these will be used in tooltip to provide
+     * richer representation of filter.
+     */
+    columns?: ColumnDescriptor[];
+    id: string;
+    permissions?: FilterPermissions;
+    showTooltip?: boolean;
+}
+export declare const FilterPillNext: ({ active, appearence, columns, className, defaultActive, filter, id, onClick, onMenuAction: onMenuActionProp, permissions, showTooltip, ...htmlAttributes }: FilterPillNextProps) => import("react").JSX.Element;

package/types/src/filter-pill/filterAsReactNode.d.ts

@@ -0,0 +1,3 @@
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { ReactNode } from "react";
+export declare const filterAsReactNode: (f: Filter, getLabel?: (f: Filter) => string) => ReactNode;

package/types/src/filter-pill/getFilterLabel.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
+export declare const getFilterLabel: (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => string;

package/types/src/filter-pill/getFilterTooltipText.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
+export declare const getFilterAsFormattedText: (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => string;

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

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

package/types/src/filter-pill/useFilterPillNext.d.ts

@@ -0,0 +1,25 @@
+import type { VirtualElement } from "@floating-ui/react";
+import { MouseEventHandler } from "react";
+import { FilterMenuActionHandler } from "./FilterMenu";
+import { FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
+export interface FilterPillNextHookProps {
+    active?: boolean;
+    /**
+     * Determines how menu items will be presented
+     * 'button' - menu items will be context menu
+     * 'split-button' - menu items will be dropdowns
+     */
+    appearence?: "split-button" | "button";
+    defaultActive?: boolean;
+    filter: FilterContainerFilter;
+    onMenuAction?: FilterMenuActionHandler;
+}
+export declare const useFilterPillNext: ({ active: activeProp, appearence, defaultActive, filter, onMenuAction, }: FilterPillNextHookProps) => {
+    active: boolean;
+    contextMenuOpen: boolean;
+    onContextMenu: MouseEventHandler<HTMLButtonElement>;
+    onContextMenuOpenChange: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onMenuAction: FilterMenuActionHandler;
+    tooltipText: string;
+    virtualElement: VirtualElement | null;
+};

package/types/src/filter-pill-menu/FilterPillMenu.d.ts

@@ -0,0 +1,17 @@
+import { MenuOptions } from "./FilterPillMenuOptions";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+export interface FilterMenuOptions extends MenuOptions {
+    filter: Filter;
+}
+export interface FilterPillMenuProps {
+    allowClose?: boolean;
+    allowDelete?: boolean;
+    allowEdit?: boolean;
+    allowRename?: boolean;
+    filter: Filter;
+    location?: string;
+    onMenuAction: MenuActionHandler;
+    onMenuClose?: () => void;
+}
+export declare const FilterPillMenu: ({ allowClose, allowDelete, allowEdit, allowRename, filter, location, onMenuAction, onMenuClose, }: FilterPillMenuProps) => import("react").JSX.Element;

package/types/src/filter-pill-menu/FilterPillMenuOptions.d.ts

@@ -0,0 +1,12 @@
+import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-context-menu";
+export type MenuOptions = {
+    [key: string]: unknown;
+};
+export interface FilterPillMenuOptions {
+    tabIndex: number;
+}
+export declare const isFilterPillMenuOptions: (options: unknown) => options is FilterPillMenuOptions;
+export declare const closeCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
+export declare const deleteCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
+export declare const renameCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
+export declare const editCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;

package/types/src/filter-pill-menu/index.d.ts

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

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

@@ -0,0 +1,39 @@
+import { FilterContainerFilter, FilterContainerFilterDescriptor, FilterContainerFilterDescriptorWithFilter } from "@vuu-ui/vuu-filter-types";
+import { FilterAction } from "../filter-pill/FilterMenu";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export declare const filterDescriptorHasFilter: (f: FilterContainerFilterDescriptor) => f is FilterContainerFilterDescriptorWithFilter;
+export type FilterContextFilterMenuActionHandler = <T extends FilterAction = FilterAction>(key: string, filterId: string, filterAction: T, 
+/**
+ * Some menu action handlers may use columns to enrich filter display
+ */
+columns?: ColumnDescriptor[]) => void;
+export interface FilterContextProps {
+    deleteFilter: (key: string, filterId: string) => void;
+    saveFilter: (key: string, name: string) => void;
+    filterDescriptors: Map<string, FilterContainerFilterDescriptor[]>;
+    onFilterMenuAction?: FilterContextFilterMenuActionHandler;
+    clearCurrentFilter: (key: string) => void;
+    setCurrentFilter: (key: string, filter: string | FilterContainerFilter) => void;
+    filterNameMaxLength?: number;
+}
+export declare const UNSAVED_FILTER = "unsaved-filter";
+export declare const EMPTY_FILTER = "empty-filter";
+export declare const NULL_FILTER = "null-filter";
+export declare const isEmptyFilter: (f?: FilterContainerFilterDescriptor) => boolean;
+export declare const isNullFilter: (f?: FilterContainerFilterDescriptor) => boolean;
+export declare const NullFilterDescriptor: FilterContainerFilterDescriptor;
+export declare const EmptyFilterDescriptor: FilterContainerFilterDescriptor;
+export declare const FilterContext: import("react").Context<FilterContextProps>;
+interface SavedFilterHookProps {
+    availableColumns?: ColumnDescriptor[];
+}
+export declare function useSavedFilters(key?: string, props?: SavedFilterHookProps): {
+    currentFilter: FilterContainerFilterDescriptor;
+    onFilterMenuAction: (filterId: string, filterAction: FilterAction) => void;
+    savedFilters: FilterContainerFilterDescriptorWithFilter[] | undefined;
+    saveFilter: (name: string) => void;
+    clearCurrentFilter: (localKey?: string) => void;
+    setCurrentFilter: (filter: string | FilterContainerFilter, localKey?: string) => void;
+    filterNameMaxLength: number | undefined;
+};
+export {};

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

@@ -0,0 +1,10 @@
+import { FilterContainerFilterDescriptor } from "@vuu-ui/vuu-filter-types";
+import { ReactNode } from "react";
+export type SavedFilterRecord = Record<string, FilterContainerFilterDescriptor[]>;
+export interface FilterProviderProps {
+    children: ReactNode;
+    onFiltersSaved?: (savedFilters: SavedFilterRecord) => void;
+    savedFilters?: SavedFilterRecord;
+    filterNameMaxLength?: number;
+}
+export declare const FilterProvider: ({ children, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react").JSX.Element;

package/types/src/filter-provider/filter-descriptor-utils.d.ts

@@ -0,0 +1,7 @@
+import { FilterContainerFilterDescriptor } from "@vuu-ui/vuu-filter-types";
+export declare function findFilter(filterDescriptors: FilterContainerFilterDescriptor[], filterId: string, throwIfNotFound?: true): FilterContainerFilterDescriptor;
+export declare function findFilter(filterDescriptors: FilterContainerFilterDescriptor[], filterId: string, throwIfNotFound: false): FilterContainerFilterDescriptor | undefined;
+export declare const deactivateFilter: (filterDescriptors: FilterContainerFilterDescriptor[]) => FilterContainerFilterDescriptor[];
+export declare const activateFilter: (filterDescriptors: FilterContainerFilterDescriptor[], activeFilterId?: string) => FilterContainerFilterDescriptor[];
+export declare const insertOrReplaceFilter: (filterDescriptors: FilterContainerFilterDescriptor[], filterDescriptor: FilterContainerFilterDescriptor) => FilterContainerFilterDescriptor[];
+export declare const renameFilter: (filterDescriptors: FilterContainerFilterDescriptor[], filterId: string, name: string) => FilterContainerFilterDescriptor[];

package/types/src/filter-toggle-button/FilterToggleButton.d.ts

@@ -0,0 +1,9 @@
+import { FilterContainerFilterDescriptor } from "@vuu-ui/vuu-filter-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export declare const countFilterClauses: ({ filter, }: FilterContainerFilterDescriptor) => number;
+export interface FilterToggleButtonProps {
+    columns: readonly ColumnDescriptor[];
+    filterProviderKey?: string;
+    onToggle: () => void;
+}
+export declare const FilterToggleButton: ({ columns, filterProviderKey, onToggle, }: FilterToggleButtonProps) => import("react").JSX.Element;