@vuu-ui/vuu-filters 2.1.18 → 2.1.19-beta.2

package/src/filter-editor/useFilterEditor.js

@@ -0,0 +1,193 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { focusFilterClauseField, focusFirstClauseIfAllClausesValid, focusLastClauseValue, getFocusedFieldDetails, navigateToNextFilterClause } from "../filter-clause/filterClauseFocusManagement.js";
+import { FilterModel } from "../FilterModel.js";
+const useFilterEditor = ({ columnDescriptors, filter, onCancel, onSave })=>{
+    const filterModel = useMemo(()=>new FilterModel(filter), [
+        filter
+    ]);
+    const [_, forceRefresh] = useState({});
+    const [isValid, setIsValid] = useState(filterModel.isValid);
+    const clauseCombinatorRef = useRef(void 0);
+    const saveButtonRef = useRef(null);
+    const containerRef = useRef(null);
+    const setContainer = useCallback((el)=>{
+        containerRef.current = el;
+        if (el) focusFirstClauseIfAllClausesValid(el);
+    }, []);
+    const saveButtonMenuBuilder = useCallback((_, options)=>{
+        switch(clauseCombinatorRef.current){
+            case "and":
+                return [
+                    {
+                        id: "and-clause",
+                        label: "AND",
+                        options
+                    }
+                ];
+            case "or":
+                return [
+                    {
+                        id: "or-clause",
+                        label: "OR",
+                        options
+                    }
+                ];
+            default:
+                return [
+                    {
+                        id: "and-clause",
+                        label: "AND",
+                        options
+                    },
+                    {
+                        id: "or-clause",
+                        label: "OR",
+                        options
+                    }
+                ];
+        }
+    }, []);
+    const columnsByName = useMemo(()=>columnDescriptorsByName(columnDescriptors), [
+        columnDescriptors
+    ]);
+    const isLastFilterClause = useCallback((index)=>void 0 !== index && filterModel.filterClauses.length === index + 1, [
+        filterModel
+    ]);
+    const focusSaveButton = useCallback(()=>{
+        requestAnimationFrame(()=>{
+            saveButtonRef.current?.focus();
+        });
+    }, []);
+    useMemo(()=>{
+        const setValid = (isValid)=>{
+            setIsValid(isValid);
+        };
+        const valueChanged = (_filter, isValid)=>{
+            if (isValid) {
+                const [filterClauseIndex, fieldName] = getFocusedFieldDetails();
+                if ("value" === fieldName && isLastFilterClause(filterClauseIndex)) focusSaveButton();
+            }
+        };
+        filterModel.on("isValid", setValid);
+        filterModel.on("filter", valueChanged);
+    }, [
+        filterModel,
+        focusSaveButton,
+        isLastFilterClause
+    ]);
+    const handleCancelFilterClause = useCallback((filterClause, reason)=>{
+        if ("Backspace" === reason) {
+            const indexOfFilterClause = filterModel.filterClauses.indexOf(filterClause);
+            filterModel.removeFilterClause(filterClause);
+            forceRefresh({});
+            if ("Backspace" === reason && containerRef.current) {
+                if (indexOfFilterClause > 0) focusFilterClauseField(containerRef.current, indexOfFilterClause - 1);
+            }
+        } else {
+            console.log(`cancel because of Escape valid clause ${filterClause.isValid}`);
+            onCancel(filter);
+        }
+    }, [
+        filter,
+        filterModel,
+        onCancel
+    ]);
+    const invokeMenuAction = useCallback((menuId)=>{
+        switch(menuId){
+            case "save":
+                {
+                    const savedFilter = filterModel.asFilter();
+                    const newOrUpdatedFilter = filter?.name ? {
+                        ...savedFilter,
+                        name: filter.name
+                    } : savedFilter;
+                    onSave(newOrUpdatedFilter);
+                    return true;
+                }
+            case "and-clause":
+                clauseCombinatorRef.current = "and";
+                filterModel.addNewFilterClause("and");
+                return true;
+            case "or-clause":
+                clauseCombinatorRef.current = "or";
+                filterModel.addNewFilterClause("or");
+                return true;
+            default:
+                return false;
+        }
+    }, [
+        filter?.name,
+        filterModel,
+        onSave
+    ]);
+    const handleKeyDownSaveButton = useCallback((evt)=>{
+        if ("Tab" === evt.key && evt.shiftKey) {
+            evt.preventDefault();
+            const target = evt.target;
+            const filterEditor = target.closest(".vuuFilterEditor");
+            focusLastClauseValue(filterEditor);
+        } else if ("Escape" === evt.key) onCancel(filter);
+    }, [
+        filter,
+        onCancel
+    ]);
+    const handleKeyDownNavigationFromCombinator = useCallback((evt)=>{
+        const { target, key, shiftKey } = evt;
+        if ("ArrowLeft" === key) {
+            evt.preventDefault();
+            navigateToNextFilterClause(target, "bwd");
+        } else if ("ArrowRight" === key) {
+            evt.preventDefault();
+            navigateToNextFilterClause(target, "fwd");
+        } else if ("Tab" === key && shiftKey) {
+            evt.preventDefault();
+            navigateToNextFilterClause(target, "bwd");
+        }
+    }, []);
+    const handleClickSaveButton = useMemo(()=>()=>invokeMenuAction("save"), [
+        invokeMenuAction
+    ]);
+    const saveButtonProps = {
+        PopupMenuProps: {
+            icon: "more-vert",
+            menuBuilder: saveButtonMenuBuilder,
+            menuActionHandler: invokeMenuAction,
+            menuLocation: "filter-save-menu"
+        },
+        onClick: handleClickSaveButton,
+        onKeyDown: handleKeyDownSaveButton
+    };
+    const onChangeFilterCombinator = useCallback((op)=>{
+        filterModel.setOp(op);
+        clauseCombinatorRef.current = op;
+        forceRefresh({});
+    }, [
+        filterModel
+    ]);
+    const handleCancelFilterEdit = useCallback(()=>{
+        onCancel(filter);
+    }, [
+        filter,
+        onCancel
+    ]);
+    return {
+        columnsByName,
+        filterModel,
+        focusSaveButton,
+        isValid,
+        onCancelFilterClause: handleCancelFilterClause,
+        onCancelFilterEdit: handleCancelFilterEdit,
+        onChangeFilterCombinator,
+        onKeyDownCombinator: handleKeyDownNavigationFromCombinator,
+        saveButtonProps,
+        saveButtonRef,
+        setContainer
+    };
+};
+function columnDescriptorsByName(columns) {
+    return columns.reduce((m, col)=>({
+            ...m,
+            [col.name]: col
+        }), {});
+}
+export { useFilterEditor };

package/src/filter-panel/FilterPanel.css.js

@@ -0,0 +1,22 @@
+const css = `
+.vuuFilterPanel {
+  --vuuPrompt-minHeight: fit-content;
+  gap: var(--vuuFilterPanel-gap, var(--salt-spacing-100));
+  height: var(--vuuFilterPanel-height, auto);
+  padding: var(--vuuFilterPanel-padding, 0);
+  --vuuFilterContainer-flex: 1 1 auto;
+  flex-direction: column;
+  display: flex;
+
+  & .vuuFilterPanel-toolbar {
+    flex: 0 0 var(--salt-size-base);
+    padding: var(--salt-spacing-200) 0;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+}
+
+
+`;
+export default css;

package/src/filter-panel/FilterPanel.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import FilterPanel from "./FilterPanel.css";
+import { FilterContainer } from "../filter-container/FilterContainer.js";
+import { Button } from "@salt-ds/core";
+import { useFilterPanel } from "./useFilterPanel.js";
+const classBase = "vuuFilterPanel";
+const FilterPanel_FilterPanel = /*#__PURE__*/ forwardRef(function({ children, className, filter: filterProp, filterProviderKey, onFilterApplied: onFilterAppliedProp, onFilterCleared: onFilterClearedProp, permissions, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-panel",
+        css: FilterPanel,
+        window: targetWindow
+    });
+    const { clearFilter, disableClear, disableSave, filter, onFilterApplied, onFilterCleared, saveFilter, saveFilterPrompt } = useFilterPanel({
+        filter: filterProp,
+        filterProviderKey,
+        onFilterApplied: onFilterAppliedProp,
+        onFilterCleared: onFilterClearedProp
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: forwardedRef,
+        children: [
+            /*#__PURE__*/ jsx(FilterContainer, {
+                filter: filter,
+                filterProviderKey: filterProviderKey,
+                onFilterApplied: onFilterApplied,
+                onFilterCleared: onFilterCleared,
+                children: children
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-toolbar`,
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        appearance: "transparent",
+                        disabled: disableClear,
+                        onClick: clearFilter,
+                        sentiment: "neutral",
+                        children: "Clear"
+                    }),
+                    permissions?.allowSaveFilter !== false ? /*#__PURE__*/ jsx(Button, {
+                        appearance: "transparent",
+                        disabled: disableSave,
+                        onClick: saveFilter,
+                        sentiment: "neutral",
+                        children: "Save"
+                    }) : null
+                ]
+            }),
+            saveFilterPrompt
+        ]
+    });
+});
+export { FilterPanel_FilterPanel as FilterPanel };

package/src/filter-panel/useFilterPanel.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { EMPTY_FILTER, NULL_FILTER, useSavedFilters } from "../filter-provider/FilterContext.js";
+import { FilterNamePrompt } from "../saved-filters/FilterNamePrompt.js";
+const useFilterPanel = ({ filter, filterProviderKey, onFilterApplied, onFilterCleared })=>{
+    const { saveFilter, currentFilter, setCurrentFilter, filterNameMaxLength } = useSavedFilters(filterProviderKey);
+    const [saveFilterPrompt, setSaveFilterPrompt] = useState(null);
+    const clearFilter = useCallback(()=>{
+        setCurrentFilter(NULL_FILTER);
+    }, [
+        setCurrentFilter
+    ]);
+    const handleConfirm = useCallback((name)=>{
+        setSaveFilterPrompt(null);
+        saveFilter(name);
+    }, [
+        saveFilter
+    ]);
+    const handleClose = ()=>{
+        setSaveFilterPrompt(null);
+    };
+    const handleSaveFilter = useCallback(()=>{
+        setSaveFilterPrompt(/*#__PURE__*/ jsx(FilterNamePrompt, {
+            onClose: handleClose,
+            onConfirm: handleConfirm,
+            title: "Save Filter",
+            filterNameMaxLength: filterNameMaxLength
+        }));
+    }, [
+        handleConfirm,
+        filterNameMaxLength
+    ]);
+    const handleFilterApplied = useCallback((filter)=>{
+        setCurrentFilter?.(filter);
+        onFilterApplied?.(filter);
+    }, [
+        onFilterApplied,
+        setCurrentFilter
+    ]);
+    const handleFilterCleared = useCallback(()=>{
+        setCurrentFilter(EMPTY_FILTER);
+        onFilterCleared?.();
+    }, [
+        onFilterCleared,
+        setCurrentFilter
+    ]);
+    return {
+        clearFilter,
+        disableClear: null === currentFilter.filter,
+        disableSave: null === currentFilter.filter,
+        filter: currentFilter.filter ?? filter,
+        onFilterApplied: handleFilterApplied,
+        onFilterCleared: handleFilterCleared,
+        saveFilter: handleSaveFilter,
+        saveFilterPrompt
+    };
+};
+export { useFilterPanel };

package/src/filter-pill/FilterMenu.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu, MenuItem, MenuPanel } from "@salt-ds/core";
+import { useMemo } from "react";
+const defaultPermissions = {
+    allowClose: true,
+    allowEdit: true,
+    allowRename: true,
+    allowRemove: true
+};
+const FilterMenu = ({ filterId, getVirtualElement, onMenuAction, onOpenChange, open, permissions = defaultPermissions })=>{
+    const { allowClose = defaultPermissions.allowClose, allowEdit = defaultPermissions.allowEdit, allowRename = defaultPermissions.allowRename, allowRemove = defaultPermissions.allowRemove } = permissions;
+    const menuItems = useMemo(()=>{
+        const items = [];
+        if (allowClose) items.push(/*#__PURE__*/ jsx(MenuItem, {
+            onClick: ()=>onMenuAction(filterId, "close"),
+            children: "Close"
+        }, "close"));
+        if (allowEdit) items.push(/*#__PURE__*/ jsx(MenuItem, {
+            onClick: ()=>onMenuAction(filterId, "edit"),
+            children: "Edit Filter"
+        }, "edit"));
+        if (allowRename) items.push(/*#__PURE__*/ jsx(MenuItem, {
+            onClick: ()=>onMenuAction(filterId, "rename"),
+            children: "Rename"
+        }, "rename"));
+        if (allowRemove) items.push(/*#__PURE__*/ jsx(MenuItem, {
+            onClick: ()=>onMenuAction(filterId, "remove"),
+            children: "Delete"
+        }, "delete"));
+        return items;
+    }, [
+        allowClose,
+        allowEdit,
+        allowRemove,
+        allowRename,
+        filterId,
+        onMenuAction
+    ]);
+    return /*#__PURE__*/ jsx(Menu, {
+        getVirtualElement: getVirtualElement,
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ jsx(MenuPanel, {
+            children: menuItems
+        })
+    });
+};
+export { FilterMenu };

package/src/filter-pill/FilterPill.css.js

@@ -0,0 +1,15 @@
+const css = `
+.vuuFilterPill {
+  --saltButton-textTransform: none;
+  max-width: var(--vuuFilterPill-maxWidth, 200px);
+}
+
+.vuuFilterPill-tooltip {
+  & ul {
+    padding-left: var(--salt-spacing-400);
+  }
+}
+
+
+`;
+export default css;

package/src/filter-pill/FilterPill.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Tooltip, useTooltip } from "@vuu-ui/vuu-popups";
+import { EditableLabel, SplitStateButton } from "@vuu-ui/vuu-ui-controls";
+import { useId } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useCallback, useMemo, useRef } from "react";
+import { closeCommand, deleteCommand, editCommand, renameCommand } from "../filter-pill-menu/FilterPillMenuOptions.js";
+import { filterAsReactNode } from "./filterAsReactNode.js";
+import { getFilterLabel } from "./getFilterLabel.js";
+import { getFilterAsFormattedText } from "./getFilterTooltipText.js";
+import FilterPill from "./FilterPill.css";
+const classBase = "vuuFilterPill";
+const FilterPill_FilterPill = ({ allowClose = true, allowDelete = true, allowEdit = true, allowRename = true, className: classNameProp, columnsByName, editable = true, editing = false, editLabelApiRef, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-pill",
+        css: FilterPill,
+        window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const handleEnterEditMode = useCallback(()=>{
+        onBeginEdit?.(filter);
+    }, [
+        filter,
+        onBeginEdit
+    ]);
+    const getLabel = getFilterLabel(columnsByName);
+    const label = useMemo(()=>filter.name ?? getLabel(filter), [
+        getLabel,
+        filter
+    ]);
+    const getTooltipText = getFilterAsFormattedText(columnsByName);
+    const id = useId(idProp);
+    const handleMenuClose = useCallback((reason)=>{
+        if (reason?.type === "escape") requestAnimationFrame(()=>{
+            if (rootRef.current) rootRef.current.focus();
+        });
+    }, []);
+    const popupMenuProps = useMemo(()=>({
+            icon: "more-vert",
+            menuBuilder: (_location, options)=>{
+                const menuItems = [];
+                if (allowRename) menuItems.push(renameCommand(options));
+                if (allowEdit) menuItems.push(editCommand(options));
+                if (allowClose) menuItems.push(closeCommand(options));
+                if (allowDelete) menuItems.push(deleteCommand(options));
+                return menuItems;
+            },
+            menuActionHandler: onMenuAction,
+            menuLocation: "filter-pill-menu",
+            menuOptions: {
+                filter
+            },
+            onMenuClose: handleMenuClose
+        }), [
+        allowClose,
+        allowDelete,
+        allowEdit,
+        allowRename,
+        filter,
+        handleMenuClose,
+        onMenuAction
+    ]);
+    const handleExitEditMode = useCallback((originalValue, newValue)=>{
+        onExitEditMode?.(originalValue, newValue);
+        requestAnimationFrame(()=>{
+            rootRef.current?.querySelector("button")?.focus();
+        });
+    }, [
+        onExitEditMode
+    ]);
+    const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({
+        anchorQuery: ".vuuFilterPill",
+        id,
+        placement: [
+            "above",
+            "below"
+        ],
+        tooltipContent: filterAsReactNode(filter, getTooltipText)
+    });
+    const buttonProps = {
+        onBlur: ()=>hideTooltip(),
+        onFocus: useCallback(()=>{
+            showTooltip(rootRef);
+        }, [
+            showTooltip
+        ])
+    };
+    return /*#__PURE__*/ jsxs(SplitStateButton, {
+        ...anchorProps,
+        ...htmlAttributes,
+        ButtonProps: buttonProps,
+        PopupMenuProps: popupMenuProps,
+        className: clsx(classBase, classNameProp),
+        "data-text": label,
+        ref: rootRef,
+        children: [
+            editable && onExitEditMode ? /*#__PURE__*/ jsx(EditableLabel, {
+                defaultValue: label,
+                editing: editing,
+                editLabelApiRef: editLabelApiRef,
+                onEnterEditMode: handleEnterEditMode,
+                onExitEditMode: handleExitEditMode
+            }, label) : label,
+            tooltipProps && /*#__PURE__*/ jsx(Tooltip, {
+                className: `${classBase}-tooltip`,
+                ...tooltipProps
+            })
+        ]
+    });
+};
+export { FilterPill_FilterPill as FilterPill };

package/src/filter-pill/FilterPillNext.css.js

@@ -0,0 +1,12 @@
+const css = `
+.vuuFilterPillNext {
+  --saltButton-background: var(--vuuFilterPillNext-background, black);
+}
+
+.vuuFilterPillNext-active {
+  --saltButton-background: var(--vuuFilterPillNext-background-active, var(--salt-actionable-accented-bold-background-active));
+}
+
+
+`;
+export default css;

package/src/filter-pill/FilterPillNext.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Tooltip } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { FilterMenu } from "./FilterMenu.js";
+import { useFilterPillNext } from "./useFilterPillNext.js";
+import FilterPillNext from "./FilterPillNext.css";
+import { FilterDisplay } from "../filter-display/FilterDisplay.js";
+const classBase = "vuuFilterPillNext";
+const FilterPillNext_FilterPillNext = ({ active, appearence, columns, className, defaultActive, filter, id, onClick, onMenuAction: onMenuActionProp, permissions, showTooltip = true, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-pill",
+        css: FilterPillNext,
+        window: targetWindow
+    });
+    const { contextMenuOpen, onContextMenu, onContextMenuOpenChange, onMenuAction, virtualElement } = useFilterPillNext({
+        active,
+        appearence,
+        defaultActive,
+        filter,
+        onMenuAction: onMenuActionProp
+    });
+    const filterPill = /*#__PURE__*/ jsx(Button, {
+        ...htmlAttributes,
+        appearance: "solid",
+        className: clsx(classBase, className, {
+            [`${classBase}-active`]: active
+        }),
+        id: id,
+        onClick: onClick,
+        onContextMenu: onContextMenu,
+        sentiment: "accented",
+        children: filter.name
+    });
+    const filterMenu = /*#__PURE__*/ jsx(FilterMenu, {
+        filterId: id,
+        getVirtualElement: ()=>virtualElement,
+        onMenuAction: onMenuAction,
+        onOpenChange: onContextMenuOpenChange,
+        open: contextMenuOpen,
+        permissions: permissions
+    });
+    return showTooltip ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Tooltip, {
+                className: `${classBase}-tooltip`,
+                content: /*#__PURE__*/ jsx(FilterDisplay, {
+                    columns: columns,
+                    filter: filter
+                }),
+                placement: "top",
+                children: filterPill
+            }),
+            filterMenu
+        ]
+    }) : /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            filterPill,
+            filterMenu
+        ]
+    });
+};
+export { FilterPillNext_FilterPillNext as FilterPillNext };

package/src/filter-pill/filterAsReactNode.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isMultiClauseFilter, isMultiValueFilter } from "@vuu-ui/vuu-utils";
+import { getFilterLabel } from "./getFilterLabel.js";
+const filterAsReactNode = (f, getLabel = getFilterLabel())=>{
+    if (isMultiClauseFilter(f)) {
+        const heading = "and" === f.op ? "Match all ..." : "Match any ...";
+        return /*#__PURE__*/ jsxs("ul", {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: heading
+                }),
+                f.filters.map((f, i)=>/*#__PURE__*/ jsx("li", {
+                        children: filterAsReactNode(f, getLabel)
+                    }, i))
+            ]
+        });
+    }
+    if (!isMultiValueFilter(f)) return getLabel(f);
+    if (!(f.values.length > 3)) return getLabel(f);
+    {
+        const values = f.values.slice(0, 3);
+        return `${getLabel({
+            ...f,
+            values
+        }).slice(0, -1)},...]`;
+    }
+};
+export { filterAsReactNode };

package/src/filter-pill/getFilterLabel.js

@@ -0,0 +1,11 @@
+import { isMultiClauseFilter } from "@vuu-ui/vuu-utils";
+const getColumnLabel = (filter, columnsByName)=>{
+    const column = columnsByName?.[filter.column];
+    if (column) return column.label ?? column.name;
+    return filter.column;
+};
+const getFilterLabel = (columnsByName)=>(filter)=>{
+        if (isMultiClauseFilter(filter)) return filter.filters.map((f)=>getFilterLabel(columnsByName)(f)).join(", ");
+        return getColumnLabel(filter, columnsByName);
+    };
+export { getFilterLabel };

package/src/filter-pill/getFilterTooltipText.js

@@ -0,0 +1,32 @@
+import { dateTimePattern, defaultPatternsByType, filterAsQuery, formatDate, isDateTimeDataValue, isMultiClauseFilter } from "@vuu-ui/vuu-utils";
+import { filterClauses } from "../filter-utils.js";
+function applyFormatter(filter, formatter) {
+    if ("value" in filter) return {
+        ...filter,
+        value: formatter(filter.value)
+    };
+    return {
+        ...filter,
+        values: filter.values.map(formatter)
+    };
+}
+function formatFilterValue(filter, columnsByName) {
+    const column = columnsByName?.[filter.column];
+    if (column && isDateTimeDataValue(column)) {
+        const pattern = dateTimePattern(column.type);
+        const formatter = (n)=>formatDate({
+                date: pattern.date ?? defaultPatternsByType.date
+            })(new Date(n));
+        return applyFormatter(filter, formatter);
+    }
+    return filter;
+}
+const getFilterAsFormattedText = (columnsByName)=>(filter)=>{
+        if (!isMultiClauseFilter(filter)) return filterAsQuery(formatFilterValue(filter, columnsByName));
+        {
+            const [firstClause] = filterClauses(filter);
+            const formattedFilter = formatFilterValue(firstClause, columnsByName);
+            return `${filterAsQuery(formattedFilter)} ${filter.op} ...`;
+        }
+    };
+export { getFilterAsFormattedText };

package/src/filter-pill/index.js

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