@vuu-ui/vuu-filters 0.8.14-debug → 0.8.15-debug

package/types/vuu-data/src/remote-data-source.d.ts

@@ -0,0 +1,65 @@
+import { DataSourceFilter, DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { Selection } from "@vuu-ui/vuu-table-types";
+import { ClientToServerEditRpc, ClientToServerMenuRPC, ClientToServerViewportRpcCall, LinkDescriptorWithLabel, VuuAggregation, VuuDataRowDto, VuuGroupBy, VuuMenu, VuuRange, VuuRowDataItemType, VuuSort, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+import { DataSource, DataSourceCallbackMessage, DataSourceConfig, DataSourceConstructorProps, DataSourceEvents, DataSourceStatus, OptimizeStrategy, RpcResponse, SubscribeCallback, SubscribeProps } from "./data-source";
+import { MenuRpcResponse } from "./vuuUIMessageTypes";
+import { TableSchema } from "./message-utils";
+export declare class RemoteDataSource extends EventEmitter<DataSourceEvents> implements DataSource {
+    #private;
+    private bufferSize;
+    private server;
+    private clientCallback;
+    private configChangePending;
+    private rangeRequest;
+    table: VuuTable;
+    tableSchema: TableSchema | undefined;
+    viewport: string | undefined;
+    constructor({ bufferSize, aggregations, columns, filter, groupBy, sort, table, title, viewport, visualLink, }: DataSourceConstructorProps);
+    subscribe({ viewport, columns, aggregations, range, sort, groupBy, filter, }: SubscribeProps, callback: SubscribeCallback): Promise<void>;
+    handleMessageFromServer: (message: DataSourceCallbackMessage) => void;
+    unsubscribe(): void;
+    suspend(): this;
+    resume(): this;
+    disable(): this;
+    enable(callback?: SubscribeCallback): this;
+    select(selected: Selection): void;
+    openTreeNode(key: string): void;
+    closeTreeNode(key: string): void;
+    get links(): LinkDescriptorWithLabel[] | undefined;
+    get menu(): VuuMenu | undefined;
+    get status(): DataSourceStatus;
+    get optimize(): OptimizeStrategy;
+    set optimize(optimize: OptimizeStrategy);
+    private revertDebounce;
+    get selectedRowsCount(): number;
+    get size(): number;
+    get range(): VuuRange;
+    set range(range: VuuRange);
+    private rawRangeRequest;
+    private debounceRangeRequest;
+    private throttleRangeRequest;
+    get config(): DataSourceConfig;
+    set config(config: DataSourceConfig);
+    applyConfig(config: DataSourceConfig): true | undefined;
+    get columns(): string[];
+    set columns(columns: string[]);
+    get aggregations(): VuuAggregation[];
+    set aggregations(aggregations: VuuAggregation[]);
+    get sort(): VuuSort;
+    set sort(sort: VuuSort);
+    get filter(): DataSourceFilter;
+    set filter(filter: DataSourceFilter);
+    get groupBy(): VuuGroupBy;
+    set groupBy(groupBy: VuuGroupBy);
+    get title(): string | undefined;
+    set title(title: string | undefined);
+    get visualLink(): LinkDescriptorWithLabel | undefined;
+    set visualLink(visualLink: LinkDescriptorWithLabel | undefined);
+    private setConfigPending;
+    rpcCall<T extends RpcResponse = RpcResponse>(rpcRequest: Omit<ClientToServerViewportRpcCall, "vpId">): Promise<T | undefined>;
+    menuRpcCall(rpcRequest: Omit<ClientToServerMenuRPC, "vpId"> | ClientToServerEditRpc): Promise<MenuRpcResponse | undefined>;
+    applyEdit(row: DataSourceRow, columnName: string, value: VuuRowDataItemType): Promise<string | true>;
+    insertRow(key: string, data: VuuDataRowDto): Promise<string | true>;
+    deleteRow(rowKey: string): Promise<string | true>;
+}

package/types/vuu-data/src/server-proxy/messages.d.ts

@@ -0,0 +1,38 @@
+export declare const CHANGE_VP_SUCCESS = "CHANGE_VP_SUCCESS";
+export declare const CHANGE_VP_RANGE_SUCCESS = "CHANGE_VP_RANGE_SUCCESS";
+export declare const CLOSE_TREE_NODE = "CLOSE_TREE_NODE";
+export declare const CLOSE_TREE_SUCCESS = "CLOSE_TREE_SUCCESS";
+export declare const CLOSE_TREE_REJECT = "CLOSE_TREE_REJECT";
+export declare const CREATE_VISUAL_LINK = "CREATE_VISUAL_LINK";
+export declare const CREATE_VP = "CREATE_VP";
+export declare const DISABLE_VP = "DISABLE_VP";
+export declare const DISABLE_VP_SUCCESS = "DISABLE_VP_SUCCESS";
+export declare const DISABLE_VP_REJECT = "DISABLE_VP_REJECT";
+export declare const ENABLE_VP = "ENABLE_VP";
+export declare const ENABLE_VP_SUCCESS = "ENABLE_VP_SUCCESS";
+export declare const ENABLE_VP_REJECT = "ENABLE_VP_REJECT";
+export declare const GET_TABLE_META = "GET_TABLE_META";
+export declare const GET_VP_VISUAL_LINKS = "GET_VP_VISUAL_LINKS";
+export declare const GET_VIEW_PORT_MENUS = "GET_VIEW_PORT_MENUS";
+export declare const VIEW_PORT_MENUS_SELECT_RPC = "VIEW_PORT_MENUS_SELECT_RPC";
+export declare const VIEW_PORT_MENU_CELL_RPC = "VIEW_PORT_MENU_CELL_RPC";
+export declare const VIEW_PORT_MENU_TABLE_RPC = "VIEW_PORT_MENU_TABLE_RPC";
+export declare const VIEW_PORT_MENU_ROW_RPC = "VIEW_PORT_MENU_ROW_RPC";
+export declare const VIEW_PORT_MENU_RESP = "VIEW_PORT_MENU_RESP";
+export declare const VIEW_PORT_MENU_REJ = "VIEW_PORT_MENU_REJ";
+export declare const HB = "HB";
+export declare const HB_RESP = "HB_RESP";
+export declare const LOGIN = "LOGIN";
+export declare const OPEN_TREE_NODE = "OPEN_TREE_NODE";
+export declare const OPEN_TREE_SUCCESS = "OPEN_TREE_SUCCESS";
+export declare const OPEN_TREE_REJECT = "OPEN_TREE_REJECT";
+export declare const REMOVE_VP = "REMOVE_VP";
+export declare const REMOVE_VP_REJECT = "REMOVE_VP_REJECT";
+export declare const RPC_CALL = "RPC_CALL";
+export declare const RPC_RESP = "RPC_RESP";
+export declare const MENU_RPC_RESP = "MENU_RPC_RESP";
+export declare const SET_SELECTION = "SET_SELECTION";
+export declare const SET_SELECTION_SUCCESS = "SET_SELECTION_SUCCESS";
+export declare const TABLE_ROW = "TABLE_ROW";
+export declare const SIZE = "SIZE";
+export declare const UPDATE = "U";

package/types/vuu-data/src/vuuUIMessageTypes.d.ts

@@ -0,0 +1,228 @@
+import { ClientToServerTableList, ClientToServerTableMeta, LinkDescriptorWithLabel, ServerToClientBody, ServerToClientMenuSessionTableAction, ServerToClientViewportRpcResponse, TypeAheadMethod, VuuAggregation, VuuColumns, VuuGroupBy, VuuRange, VuuSort, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { DataSourceFilter } from "@vuu-ui/vuu-data-types";
+import { TableSchema, WithRequestId } from "./message-utils";
+import { DataSourceMenusMessage, DataSourceVisualLinkCreatedMessage, DataSourceVisualLinkRemovedMessage, DataSourceVisualLinksMessage, RpcResponse, VuuFeatureInvocationMessage, VuuFeatureMessage, WithFullConfig } from "./data-source";
+import { GridAction, Selection } from "@vuu-ui/vuu-table-types";
+import { WebSocketProtocol } from "./websocket-connection";
+export interface OpenDialogAction {
+    type: "OPEN_DIALOG_ACTION";
+    tableSchema?: TableSchema;
+    table?: VuuTable;
+}
+export interface NoAction {
+    type: "NO_ACTION";
+}
+export declare type MenuRpcAction = OpenDialogAction | NoAction;
+export type ConnectionStatus = "connecting" | "connection-open-awaiting-session" | "connected" | "disconnected" | "reconnected";
+export interface ConnectionStatusMessage {
+    type: "connection-status";
+    reason?: string;
+    retry?: boolean;
+    status: ConnectionStatus;
+}
+export declare const isConnectionStatusMessage: (msg: object | ConnectionStatusMessage) => msg is ConnectionStatusMessage;
+export interface ConnectionQualityMetrics {
+    type: "connection-metrics";
+    messagesLength: number;
+}
+export declare const isConnectionQualityMetrics: (msg: object) => msg is ConnectionQualityMetrics;
+export interface ServerProxySubscribeMessage {
+    aggregations: VuuAggregation[];
+    bufferSize?: number;
+    columns: VuuColumns;
+    filter: DataSourceFilter;
+    groupBy: VuuGroupBy;
+    range: VuuRange;
+    sort: VuuSort;
+    table: VuuTable;
+    title?: string;
+    viewport: string;
+    visualLink?: LinkDescriptorWithLabel;
+}
+export type VuuUIMessageInConnected = {
+    type: "connected";
+};
+export type VuuUIMessageInWorkerReady = {
+    type: "ready";
+};
+export interface ViewportMessageIn {
+    clientViewportId: string;
+}
+export interface VuuUIMessageInRPC {
+    method: string;
+    result: unknown;
+    requestId: string;
+    type: "RPC_RESP";
+}
+export interface VuuUIMessageInRPCEditReject {
+    error: string;
+    requestId?: string;
+    type: "VP_EDIT_RPC_REJECT";
+}
+export interface VuuUIMessageInRPCEditResponse {
+    action: unknown;
+    requestId: string;
+    rpcName: string;
+    type: "VP_EDIT_RPC_RESPONSE";
+}
+export declare const messageHasResult: (msg: object) => msg is VuuUIMessageInRPC;
+export declare const isTableSchema: (message: VuuUIMessageIn) => message is VuuUIMessageInTableMeta;
+export interface VuuUIMessageInTableList {
+    requestId: string;
+    type: "TABLE_LIST_RESP";
+    tables: VuuTable[];
+}
+export interface VuuUIMessageInTableMeta {
+    requestId: string;
+    tableSchema: TableSchema;
+    type: "TABLE_META_RESP";
+}
+export interface MenuRpcResponse {
+    action: MenuRpcAction;
+    error?: string;
+    requestId: string;
+    rpcName?: string;
+    tableAlreadyOpen?: boolean;
+    type: "VIEW_PORT_MENU_RESP";
+}
+export interface ViewportRpcResponse {
+    action: ServerToClientViewportRpcResponse["action"];
+    requestId: string;
+    rpcName?: string;
+    type: "VIEW_PORT_RPC_RESPONSE";
+}
+export interface MenuRpcReject extends ViewportMessageIn {
+    error?: string;
+    requestId: string;
+    rpcName?: string;
+    type: "VIEW_PORT_MENU_REJ";
+}
+export interface VuuUIMessageInMenuRej {
+    error: string;
+    requestId: string;
+    rpcName: string;
+    type: "VIEW_PORT_MENU_REJ";
+}
+export type VuuUIMessageIn = VuuUIMessageInConnected | VuuUIMessageInWorkerReady | VuuUIMessageInRPC | ViewportRpcResponse | MenuRpcResponse | MenuRpcReject | VuuUIMessageInTableList | VuuUIMessageInTableMeta | VuuUIMessageInRPCEditReject | VuuUIMessageInRPCEditResponse;
+export declare const isErrorResponse: (response?: RpcResponse) => response is VuuUIMessageInRPCEditReject;
+export declare const hasAction: (response?: RpcResponse) => response is MenuRpcResponse | VuuUIMessageInRPCEditResponse;
+export interface VuuUIMessageOutConnect {
+    protocol: WebSocketProtocol;
+    type: "connect";
+    token: string;
+    url: string;
+    username?: string;
+    retryLimitDisconnect?: number;
+    retryLimitStartup?: number;
+}
+export interface VuuUIMessageOutSubscribe extends ServerProxySubscribeMessage {
+    type: "subscribe";
+}
+export interface VuuUIMessageOutUnsubscribe {
+    type: "unsubscribe";
+    viewport: string;
+}
+export interface VuuUIMessageOutSuspend {
+    type: "suspend";
+    viewport: string;
+}
+export interface VuuUIMessageOutResume {
+    type: "resume";
+    viewport: string;
+}
+export interface ViewportMessageOut {
+    viewport: string;
+}
+export interface RequestMessage {
+    requestId: string;
+}
+export interface VuuUIMessageOutColumns extends ViewportMessageOut {
+    type: "setColumns";
+    columns: string[];
+}
+export interface VuuUIMessageOutViewRange extends ViewportMessageOut {
+    type: "setViewRange";
+    range: {
+        from: number;
+        to: number;
+    };
+}
+export interface VuuUIMessageOutAggregate extends ViewportMessageOut {
+    aggregations: VuuAggregation[];
+    type: "aggregate";
+}
+export interface VuuUIMessageOutCloseTreeNode extends ViewportMessageOut {
+    key: string;
+    type: "closeTreeNode";
+}
+export interface VuuUIMessageOutCreateLink extends ViewportMessageOut {
+    childColumnName: string;
+    parentColumnName: string;
+    parentClientVpId: string;
+    type: "createLink";
+}
+export interface VuuUIMessageOutRemoveLink extends ViewportMessageOut {
+    type: "removeLink";
+}
+export interface VuuUIMessageOutSetTitle extends ViewportMessageOut {
+    title: string;
+    type: "setTitle";
+}
+export interface VuuUIMessageOutDisable extends ViewportMessageOut {
+    type: "disable";
+}
+export interface VuuUIMessageOutEnable extends ViewportMessageOut {
+    type: "enable";
+}
+export interface VuuUIMessageOutOpenTreeNode extends ViewportMessageOut {
+    key: string;
+    type: "openTreeNode";
+}
+export interface VuuUIMessageOutResume extends ViewportMessageOut {
+    type: "resume";
+}
+export interface VuuUIMessageOutSelect extends ViewportMessageOut {
+    selected: Selection;
+    type: "select";
+}
+export interface VuuUIMessageOutSelectAll extends ViewportMessageOut {
+    type: "selectAll";
+}
+export interface VuuUIMessageOutSelectNone extends ViewportMessageOut {
+    type: "selectNone";
+}
+export interface VuuUIMessageOutSort extends ViewportMessageOut {
+    sort: VuuSort;
+    type: "sort";
+}
+export interface VuuUIMessageOutSuspend extends ViewportMessageOut {
+    type: "suspend";
+}
+export interface VuuUIMessageOutFilter extends ViewportMessageOut {
+    filter: DataSourceFilter;
+    type: "filter";
+}
+export interface VuuUIMessageOutGroupby extends ViewportMessageOut {
+    groupBy: VuuGroupBy;
+    type: "groupBy";
+}
+export interface VuuUIMessageOutConfig extends ViewportMessageOut {
+    config: WithFullConfig;
+    type: "config";
+}
+export type VuuUIMessageOutViewport = VuuUIMessageOutAggregate | VuuUIMessageOutCloseTreeNode | VuuUIMessageOutColumns | VuuUIMessageOutConfig | VuuUIMessageOutCreateLink | VuuUIMessageOutFilter | VuuUIMessageOutDisable | VuuUIMessageOutEnable | VuuUIMessageOutGroupby | VuuUIMessageOutOpenTreeNode | VuuUIMessageOutRemoveLink | VuuUIMessageOutResume | VuuUIMessageOutSelect | VuuUIMessageOutSelectAll | VuuUIMessageOutSelectNone | VuuUIMessageOutSetTitle | VuuUIMessageOutSuspend | VuuUIMessageOutSort | VuuUIMessageOutViewRange;
+export declare const isViewporttMessage: (msg: object) => msg is VuuUIMessageOutViewport;
+export interface TypeAheadRpcRequest {
+    method: TypeAheadMethod;
+    params: [VuuTable, ...string[]];
+    type: "RPC_CALL";
+}
+export type VuuUIMessageOut = VuuUIMessageOutConnect | VuuUIMessageOutSubscribe | VuuUIMessageOutUnsubscribe | VuuUIMessageOutViewport | WithRequestId<ClientToServerTableList> | WithRequestId<ClientToServerTableMeta>;
+export declare const isSessionTableActionMessage: (messageBody: ServerToClientBody) => messageBody is ServerToClientMenuSessionTableAction;
+export declare const isSessionTable: (table?: unknown) => boolean;
+export declare const isVisualLinksAction: (action: GridAction) => action is DataSourceVisualLinksMessage;
+export declare const isVisualLinkCreatedAction: (action: GridAction) => action is DataSourceVisualLinkCreatedMessage;
+export declare const isVisualLinkRemovedAction: (action: GridAction) => action is DataSourceVisualLinkRemovedMessage;
+export declare const isViewportMenusAction: (action: GridAction) => action is DataSourceMenusMessage;
+export declare const isVuuFeatureAction: (action: GridAction) => action is VuuFeatureMessage;
+export declare const isVuuFeatureInvocation: (action: GridAction) => action is VuuFeatureInvocationMessage;

package/types/vuu-data/src/websocket-connection.d.ts

@@ -0,0 +1,25 @@
+import { ServerToClientMessage, ClientToServerMessage } from "@vuu-ui/vuu-protocol-types";
+import { Connection } from "./connectionTypes";
+import { ConnectionQualityMetrics, ConnectionStatusMessage } from "./vuuUIMessageTypes";
+export type ConnectionMessage = ServerToClientMessage | ConnectionStatusMessage | ConnectionQualityMetrics;
+export type ConnectionCallback = (msg: ConnectionMessage) => void;
+export type WebSocketProtocol = string | string[] | undefined;
+declare const setWebsocket: unique symbol;
+declare const connectionCallback: unique symbol;
+export declare function connect(connectionString: string, protocol: WebSocketProtocol, callback: ConnectionCallback, retryLimitDisconnect?: number, retryLimitStartup?: number): Promise<Connection>;
+export declare class WebsocketConnection implements Connection<ClientToServerMessage> {
+    [connectionCallback]: ConnectionCallback;
+    close: () => void;
+    requiresLogin: boolean;
+    send: (msg: ClientToServerMessage) => void;
+    status: "closed" | "ready" | "connection-open-awaiting-session" | "connected" | "reconnected";
+    protocol: WebSocketProtocol;
+    url: string;
+    messagesCount: number;
+    private connectionMetricsInterval;
+    constructor(ws: WebSocket, url: string, protocol: WebSocketProtocol, callback: ConnectionCallback);
+    reconnect(): void;
+    [setWebsocket](ws: WebSocket): void;
+    handleWebsocketMessage: (evt: MessageEvent) => void;
+}
+export {};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FilterBarMenu: () => JSX.Element;

package/types/{filter-bar → vuu-filters/src/filter-bar}/useFilterBar.d.ts

@@ -1,14 +1,15 @@
 import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
 import { Filter, FilterClause, FilterWithPartialClause } from "@vuu-ui/vuu-filter-types";
-import { PromptProps } from "@vuu-ui/vuu-popups";
 import { ActiveItemChangeHandler, NavigationOutOfBoundsHandler } from "@vuu-ui/vuu-layout";
-import { KeyboardEvent, KeyboardEventHandler, RefObject } from "react";
+import { PromptProps } from "@vuu-ui/vuu-popups";
+import { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, RefObject } from "react";
+import { FilterClauseCancelHandler } from "../filter-clause/useFilterClauseEditor";
 import { FilterPillProps } from "../filter-pill";
 import { FilterBarProps } from "./FilterBar";
-export interface FilterBarHookProps extends Pick<FilterBarProps, "activeFilterIndex" | "filters" | "onApplyFilter" | "onChangeActiveFilterIndex" | "onFiltersChanged" | "showMenu"> {
+export interface FilterBarHookProps extends Pick<FilterBarProps, "activeFilterIndex" | "filters" | "onApplyFilter" | "onChangeActiveFilterIndex" | "onFiltersChanged" | "showMenu" | "tableSchema"> {
     containerRef: RefObject<HTMLDivElement>;
 }
-export declare const useFilterBar: ({ activeFilterIndex: activeFilterIdexProp, containerRef, filters: filtersProp, onApplyFilter, onChangeActiveFilterIndex: onChangeActiveFilterIndexProp, onFiltersChanged, showMenu: showMenuProp, }: FilterBarHookProps) => {
+export declare const useFilterBar: ({ activeFilterIndex: activeFilterIdexProp, containerRef, filters: filtersProp, onApplyFilter, onChangeActiveFilterIndex: onChangeActiveFilterIndexProp, onFiltersChanged, showMenu: showMenuProp, tableSchema, }: FilterBarHookProps) => {
     activeFilterIndex: number[];
     addButtonProps: {
         ref: RefObject<HTMLButtonElement>;
@@ -16,11 +17,15 @@ export declare const useFilterBar: ({ activeFilterIndex: activeFilterIdexProp, c
     };
     editFilter: Partial<Filter> | FilterWithPartialClause | undefined;
     filters: Filter[];
+    onBlurFilterClause: FocusEventHandler<Element>;
+    onCancelFilterClause: FilterClauseCancelHandler;
     onChangeActiveFilterIndex: ActiveItemChangeHandler;
     onClickAddFilter: () => void;
     onClickRemoveFilter: () => void;
     onChangeFilterClause: (filterClause: Partial<FilterClause>) => void;
-    onKeyDown: (evt: KeyboardEvent) => void;
+    onFocusFilterClause: () => void;
+    onKeyDownFilterbar: (evt: KeyboardEvent) => void;
+    onKeyDownMenu: KeyboardEventHandler<Element>;
     onMenuAction: MenuActionHandler;
     onNavigateOutOfBounds: NavigationOutOfBoundsHandler;
     pillProps: Partial<FilterPillProps>;

package/types/vuu-filters/src/filter-bar/useFilterBarMenu.d.ts

@@ -0,0 +1,5 @@
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+export declare const useFilterBarMenu: () => {
+    menuBuilder: MenuBuilder<string, unknown>;
+    menuActionHandler: MenuActionHandler;
+};

package/types/{filter-bar → vuu-filters/src/filter-bar}/useFilters.d.ts

@@ -1,10 +1,12 @@
 import { Filter } from "@vuu-ui/vuu-filter-types";
+import { TableSchema } from "packages/vuu-data/src";
 export interface FiltersHookProps {
     defaultFilters?: Filter[];
     filters?: Filter[];
     onFiltersChanged?: (filters: Filter[]) => void;
+    tableSchema?: TableSchema;
 }
-export declare const useFilters: ({ defaultFilters, filters: filtersProp, onFiltersChanged, }: FiltersHookProps) => {
+export declare const useFilters: ({ defaultFilters, filters: filtersProp, onFiltersChanged, tableSchema, }: FiltersHookProps) => {
     filters: Filter[];
     onAddFilter: (filter: Filter) => number;
     onChangeFilter: (filter: Filter) => number;

package/types/{filter-builder-menu → vuu-filters/src/filter-builder-menu}/FilterBuilderMenu.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { ContextMenuProps } from "@vuu-ui/vuu-popups";
 import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
+import { ListProps } from "@vuu-ui/vuu-ui-controls";
 import "./FilterBuilderMenu.css";
 export interface FilterBuilderMenuProps extends Omit<ContextMenuProps, "children"> {
+    ListProps?: Pick<ListProps, "onKeyDownCapture">;
     onMenuAction: MenuActionHandler;
 }
-export declare const FilterBuilderMenu: ({ onMenuAction }: FilterBuilderMenuProps) => JSX.Element;
+export declare const FilterBuilderMenu: ({ ListProps, onMenuAction, }: FilterBuilderMenuProps) => JSX.Element;

package/types/{filter-clause → vuu-filters/src/filter-clause}/FilterClauseEditor.d.ts

@@ -1,13 +1,17 @@
 import { TableSchema } from "@vuu-ui/vuu-data";
 import { SuggestionFetcher } from "@vuu-ui/vuu-data-react";
 import { FilterClause } from "@vuu-ui/vuu-filter-types";
+import { CloseReason } from "@vuu-ui/vuu-ui-controls";
 import { HTMLAttributes } from "react";
+import { FilterClauseCancelHandler } from "./useFilterClauseEditor";
 import "./FilterClauseEditor.css";
 export interface FilterClauseEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     filterClause: Partial<FilterClause>;
+    onCancel?: FilterClauseCancelHandler;
     onChange: (filterClause: Partial<FilterClause>) => void;
-    onClose: () => void;
+    onDropdownClose?: (closeReason: CloseReason) => void;
+    onDropdownOpen?: () => void;
     suggestionProvider?: () => SuggestionFetcher;
     tableSchema: TableSchema;
 }
-export declare const FilterClauseEditor: ({ className, onChange, onClose, filterClause, suggestionProvider, tableSchema, ...htmlAttributes }: FilterClauseEditorProps) => JSX.Element;
+export declare const FilterClauseEditor: ({ className, onCancel, onChange, onDropdownClose, onDropdownOpen, filterClause, suggestionProvider, tableSchema, ...htmlAttributes }: FilterClauseEditorProps) => JSX.Element;

package/types/{filter-clause → vuu-filters/src/filter-clause}/TextInput.d.ts

@@ -2,6 +2,7 @@ import { HTMLAttributes, RefObject } from "react";
 import { SuggestionFetcher } from "@vuu-ui/vuu-data-react";
 import { FilterClauseValueEditor } from "./filterClauseTypes";
 export interface TextInputProps extends FilterClauseValueEditor, HTMLAttributes<HTMLDivElement> {
+    "data-field"?: string;
     ref: RefObject<HTMLDivElement>;
     operator: string;
     suggestionProvider?: () => SuggestionFetcher;

package/types/{filter-clause → vuu-filters/src/filter-clause}/filterClauseTypes.d.ts

@@ -1,11 +1,14 @@
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { FilterClause } from "@vuu-ui/vuu-filter-types";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { CloseReason } from "@vuu-ui/vuu-ui-controls";
 import { InputProps } from "@salt-ds/core";
 export interface FilterClauseValueEditor<T = string> {
     InputProps?: InputProps;
     filterClause: Partial<FilterClause>;
     column: ColumnDescriptor;
+    onDeselect?: () => void;
     onInputComplete: (value: T | T[]) => void;
+    onOpenChange?: (open: boolean, closeReason: CloseReason) => void;
     table?: VuuTable;
 }

package/types/{filter-clause → vuu-filters/src/filter-clause}/useFilterClauseEditor.d.ts

@@ -1,22 +1,28 @@
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { FilterClause, FilterClauseOp } from "@vuu-ui/vuu-filter-types";
 import { TableSchema } from "@vuu-ui/vuu-data";
-import { KeyboardEvent } from "react";
+import { KeyboardEvent, KeyboardEventHandler } from "react";
 import { SingleSelectionHandler } from "@vuu-ui/vuu-ui-controls/src";
 type FilterClauseValue = boolean | boolean[] | string | string[] | number | number[];
+export type FilterClauseCancelType = "Backspace";
+export type FilterClauseCancelHandler = (reason: FilterClauseCancelType) => void;
 export interface FilterClauseEditorHookProps {
     filterClause: Partial<FilterClause>;
+    onCancel?: FilterClauseCancelHandler;
     onChange: (filterClause: Partial<FilterClause>) => void;
     tableSchema: TableSchema;
 }
-export declare const useFilterClauseEditor: ({ filterClause, onChange, tableSchema, }: FilterClauseEditorHookProps) => {
+export declare const useFilterClauseEditor: ({ filterClause, onCancel, onChange, tableSchema, }: FilterClauseEditorHookProps) => {
     InputProps: {
         inputProps: {
-            onKeyDown: (evt: KeyboardEvent<HTMLInputElement>) => void;
+            onKeyDownCapture: (evt: KeyboardEvent<HTMLInputElement>) => void;
         };
     };
     columnRef: import("react").RefObject<HTMLDivElement>;
     onChangeValue: (value: string | string[] | number | number[]) => void;
+    onClear: (e: any) => void;
+    onClearKeyDown: KeyboardEventHandler<Element>;
+    onDeselectValue: () => void;
     onSelectionChangeColumn: SingleSelectionHandler<ColumnDescriptor>;
     onSelectionChangeOperator: SingleSelectionHandler<string>;
     operator: FilterClauseOp | undefined;

package/types/{filter-pill → vuu-filters/src/filter-pill}/FilterPill.d.ts

@@ -11,4 +11,4 @@ export interface FilterPillProps extends Pick<Partial<EditableLabelProps>, "onEx
     onMenuAction?: MenuActionHandler;
     showMenu?: boolean;
 }
-export declare const FilterPill: ({ editable, filter, className: classNameProp, onBeginEdit, onExitEditMode, onMenuAction, showMenu, ...htmlAttributes }: FilterPillProps) => JSX.Element;
+export declare const FilterPill: ({ className: classNameProp, editable, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, showMenu, ...htmlAttributes }: FilterPillProps) => JSX.Element;

package/types/vuu-filters/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) => ReactNode;

package/types/{filter-utils.d.ts → vuu-filters/src/filter-utils.d.ts}

@@ -1,5 +1,5 @@
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { Filter, FilterClause, FilterCombinatorOp, FilterWithPartialClause, NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
+import { Filter, FilterClause, FilterCombinatorOp, FilterWithPartialClause, MultiClauseFilter, NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
 export declare const AND = "and";
 export declare const EQUALS = "=";
 export declare const GREATER_THAN = ">";
@@ -13,6 +13,7 @@ export declare const filterClauses: (filter: Partial<Filter> | FilterWithPartial
 type AddFilterOptions = {
     combineWith: FilterCombinatorOp;
 };
+export declare const removeLastClause: (filter: MultiClauseFilter) => Filter;
 /**
   Allows an empty FilterClause to be appended to an existing filter - for use
   in filter editing UI only.