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

package/src/filter-pill/useFilterPillNext.js

@@ -0,0 +1,53 @@
+import { useControlled } from "@salt-ds/core";
+import { useCallback, useMemo, useState } from "react";
+import { getFilterAsFormattedText } from "./getFilterTooltipText.js";
+const useFilterPillNext = ({ active: activeProp, appearence = "button", defaultActive, filter, onMenuAction })=>{
+    const [active] = useControlled({
+        controlled: activeProp,
+        default: defaultActive ?? false,
+        name: "FilterPillNext",
+        state: "active"
+    });
+    const [contextMenuOpen, setContextMenuOpen] = useState(false);
+    const [virtualElement, setVirtualElement] = useState(null);
+    const tooltipText = useMemo(()=>{
+        const getTooltipText = getFilterAsFormattedText();
+        return getTooltipText(filter);
+    }, [
+        filter
+    ]);
+    const onContextMenu = (e)=>{
+        e.preventDefault();
+        if ("button" === appearence) {
+            setVirtualElement({
+                getBoundingClientRect: ()=>({
+                        width: 0,
+                        height: 0,
+                        x: e.clientX,
+                        y: e.clientY,
+                        top: e.clientY,
+                        right: e.clientX,
+                        bottom: e.clientY,
+                        left: e.clientX
+                    })
+            });
+            setContextMenuOpen(true);
+        }
+    };
+    const handleMenuAction = useCallback((filterId, actionType)=>{
+        setContextMenuOpen(false);
+        onMenuAction?.(filterId, actionType);
+    }, [
+        onMenuAction
+    ]);
+    return {
+        active,
+        contextMenuOpen,
+        onContextMenu,
+        onContextMenuOpenChange: setContextMenuOpen,
+        onMenuAction: handleMenuAction,
+        tooltipText,
+        virtualElement
+    };
+};
+export { useFilterPillNext };

package/src/filter-pill-menu/FilterPillMenu.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuFilterPillMenu {
+  top: -1px;
+}
+
+
+`;
+export default css;

package/src/filter-pill-menu/FilterPillMenu.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import FilterPillMenu from "./FilterPillMenu.css";
+import { closeCommand, deleteCommand, editCommand, renameCommand } from "./FilterPillMenuOptions.js";
+const classBase = "vuuFilterPillMenu";
+const FilterPillMenu_FilterPillMenu = ({ allowClose = true, allowDelete = true, allowEdit = true, allowRename = true, filter, location, onMenuAction, onMenuClose })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-pill-menu",
+        css: FilterPillMenu,
+        window: targetWindow
+    });
+    const [menuBuilder, menuOptions] = useMemo(()=>[
+            (_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;
+            },
+            {
+                filter
+            }
+        ], [
+        allowClose,
+        allowDelete,
+        allowEdit,
+        allowRename,
+        filter
+    ]);
+    return /*#__PURE__*/ jsx(PopupMenu, {
+        className: classBase,
+        menuBuilder: menuBuilder,
+        menuActionHandler: onMenuAction,
+        menuLocation: clsx("filter", location),
+        menuOptions: menuOptions,
+        onMenuClose: onMenuClose,
+        tabIndex: -1
+    });
+};
+export { FilterPillMenu_FilterPillMenu as FilterPillMenu };

package/src/filter-pill-menu/FilterPillMenuOptions.js

@@ -0,0 +1,26 @@
+const isFilterPillMenuOptions = (options)=>"object" == typeof options && null !== options && "filter" in options;
+const closeCommand = (options)=>({
+        label: "Close",
+        location: "filter",
+        id: "close-filter",
+        options
+    });
+const deleteCommand = (options)=>({
+        label: "Delete",
+        location: "filter",
+        id: "delete-filter",
+        options
+    });
+const renameCommand = (options)=>({
+        label: "Rename",
+        location: "filter",
+        id: "rename-filter",
+        options
+    });
+const editCommand = (options)=>({
+        label: "Edit",
+        location: "filter",
+        id: "edit-filter",
+        options
+    });
+export { closeCommand, deleteCommand, editCommand, isFilterPillMenuOptions, renameCommand };

package/src/filter-pill-menu/index.js

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

package/src/filter-provider/FilterContext.js

@@ -0,0 +1,71 @@
+import { createContext, useCallback, useContext } from "react";
+const filterDescriptorHasFilter = (f)=>!isEmptyFilter(f) && !isNullFilter(f);
+const isSavedFilter = (f)=>f.id !== UNSAVED_FILTER && f.id !== NULL_FILTER && f.id !== EMPTY_FILTER;
+const getCurrentFilter = (key, savedFilters)=>{
+    const filterDescriptors = savedFilters.get(key);
+    if (filterDescriptors) {
+        const activeFilter = filterDescriptors.find((f)=>f.active);
+        if (activeFilter) return activeFilter;
+    }
+    return NullFilterDescriptor;
+};
+const UNSAVED_FILTER = "unsaved-filter";
+const EMPTY_FILTER = "empty-filter";
+const NULL_FILTER = "null-filter";
+const isEmptyFilter = (f)=>f?.id === EMPTY_FILTER;
+const isNullFilter = (f)=>f?.id === NULL_FILTER;
+const NullFilterDescriptor = {
+    active: true,
+    id: NULL_FILTER,
+    filter: null
+};
+const EmptyFilterDescriptor = {
+    active: true,
+    id: EMPTY_FILTER,
+    filter: null
+};
+const FilterContext = createContext({
+    filterDescriptors: new Map(),
+    deleteFilter: ()=>console.warn("[FilterContext] deleteFilter, no FilterProvider has been configured"),
+    saveFilter: ()=>console.warn("[FilterContext] saveFilter, no FilterProvider has been configured"),
+    clearCurrentFilter: ()=>console.warn("[FilterContext] clearFilter, no FilterProvider has been configured"),
+    setCurrentFilter: ()=>console.warn("[FilterContext] setCurrentFilter, no FilterProvider has been configured")
+});
+function useSavedFilters(key = "GLOBAL", props) {
+    const { onFilterMenuAction, filterDescriptors, saveFilter, setCurrentFilter, filterNameMaxLength } = useContext(FilterContext);
+    const handleFilterMenuAction = useCallback((filterId, filterAction)=>{
+        onFilterMenuAction?.(key, filterId, filterAction, props?.availableColumns);
+    }, [
+        key,
+        onFilterMenuAction,
+        props?.availableColumns
+    ]);
+    const handleSaveFilter = useCallback((name)=>{
+        saveFilter(key, name);
+    }, [
+        key,
+        saveFilter
+    ]);
+    const handleSetCurrentFilter = useCallback((filter, localKey = key)=>{
+        setCurrentFilter(localKey, filter);
+    }, [
+        key,
+        setCurrentFilter
+    ]);
+    const handleClearCurrentFilter = useCallback((localKey = key)=>{
+        setCurrentFilter(localKey, NULL_FILTER);
+    }, [
+        key,
+        setCurrentFilter
+    ]);
+    return {
+        currentFilter: getCurrentFilter(key, filterDescriptors),
+        onFilterMenuAction: handleFilterMenuAction,
+        savedFilters: filterDescriptors?.get(key)?.filter(isSavedFilter),
+        saveFilter: handleSaveFilter,
+        clearCurrentFilter: handleClearCurrentFilter,
+        setCurrentFilter: handleSetCurrentFilter,
+        filterNameMaxLength
+    };
+}
+export { EMPTY_FILTER, EmptyFilterDescriptor, FilterContext, NULL_FILTER, NullFilterDescriptor, UNSAVED_FILTER, filterDescriptorHasFilter, isEmptyFilter, isNullFilter, useSavedFilters };

package/src/filter-provider/FilterProvider.js

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { FilterNamePrompt } from "../saved-filters/FilterNamePrompt.js";
+import { DeleteFilterPrompt } from "../saved-filters/DeleteFilterPrompt.js";
+import { activateFilter, findFilter, insertOrReplaceFilter, renameFilter } from "./filter-descriptor-utils.js";
+import { uuid } from "@vuu-ui/vuu-utils";
+import { EMPTY_FILTER, EmptyFilterDescriptor, FilterContext, NULL_FILTER, NullFilterDescriptor, UNSAVED_FILTER } from "./FilterContext.js";
+const findActiveFilter = (filterDescriptors)=>filterDescriptors.find((f)=>f.active) ?? NullFilterDescriptor;
+const findFilterByName = (filterDescriptors, name)=>filterDescriptors.find((f)=>f.filter?.name === name);
+const mapToRecord = (savedFilters)=>{
+    const record = {};
+    savedFilters.forEach((filterDescriptors, key)=>{
+        record[key] = filterDescriptors;
+    });
+    return record;
+};
+const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
+    const [, forceRefresh] = useState({});
+    const savedFilters = useMemo(()=>savedFiltersProp ? new Map(Object.entries(savedFiltersProp)) : new Map(), [
+        savedFiltersProp
+    ]);
+    const [dialog, setDialog] = useState(null);
+    const deleteFilter = useCallback((key, filterId)=>{
+        const filterDescriptors = savedFilters.get(key);
+        if (void 0 === filterDescriptors) throw Error(`[FilterProvider] deleteFilter, key ${key} not found`);
+        {
+            const newFilterDescriptors = filterDescriptors.filter(({ id })=>id !== filterId);
+            savedFilters.set(key, newFilterDescriptors);
+            if (filterId !== UNSAVED_FILTER) onFiltersSaved?.(mapToRecord(savedFilters));
+        }
+    }, [
+        onFiltersSaved,
+        savedFilters
+    ]);
+    const applyNewName = useCallback((key, filterId, name)=>{
+        const filterDescriptors = savedFilters.get(key);
+        if (void 0 === filterDescriptors) throw Error(`[FilterProvider] applyNewName, key ${key} not found`);
+        {
+            const newFilterDescriptors = renameFilter(filterDescriptors, filterId, name);
+            savedFilters.set(key, newFilterDescriptors);
+            onFiltersSaved?.(mapToRecord(savedFilters));
+        }
+    }, [
+        onFiltersSaved,
+        savedFilters
+    ]);
+    const promptForFilterName = useCallback((key, { filter, id })=>{
+        const originalFilterName = filter?.name ?? "";
+        setDialog(/*#__PURE__*/ jsx(FilterNamePrompt, {
+            filterName: filter?.name,
+            title: "Rename filter",
+            onClose: ()=>setDialog(null),
+            onConfirm: (name)=>{
+                setDialog(null);
+                if (originalFilterName !== name) applyNewName(key, id, name);
+            },
+            filterNameMaxLength: filterNameMaxLength
+        }));
+    }, [
+        applyNewName,
+        filterNameMaxLength
+    ]);
+    const promptForConfirmationOfDelete = useCallback((key, filterDescriptor, columns)=>{
+        setDialog(/*#__PURE__*/ jsx(DeleteFilterPrompt, {
+            columns: columns,
+            filterDescriptor: filterDescriptor,
+            onConfirm: ()=>{
+                setDialog(null);
+                deleteFilter(key, filterDescriptor.id);
+            },
+            onClose: ()=>setDialog(null)
+        }));
+    }, [
+        deleteFilter
+    ]);
+    const handleFilterMenuAction = useCallback((key, filterId, actionType, columns)=>{
+        const filterDescriptors = savedFilters.get(key);
+        if (void 0 === filterDescriptors) throw Error(`[FilterProvider] applyNewName, key ${key} not found`);
+        {
+            const targetFilter = findFilter(filterDescriptors, filterId);
+            switch(actionType){
+                case "close":
+                    console.log(`close filter ${filterId}`);
+                    break;
+                case "edit":
+                    console.log(`edit filter ${filterId}`);
+                    break;
+                case "remove":
+                    if (filterId === UNSAVED_FILTER) console.log("remove unsaved filter");
+                    else promptForConfirmationOfDelete(key, targetFilter, columns);
+                    break;
+                case "rename":
+                    return promptForFilterName(key, targetFilter);
+            }
+        }
+    }, [
+        promptForConfirmationOfDelete,
+        promptForFilterName,
+        savedFilters
+    ]);
+    const handleSaveFilter = useCallback((key, name)=>{
+        const filterDescriptors = savedFilters.get(key);
+        if (void 0 === filterDescriptors) throw Error(`[FilterProvider] applyNewName, key ${key} not found`);
+        {
+            const activeFilter = findActiveFilter(filterDescriptors);
+            if (null === activeFilter.filter) throw Error("[FilterProvider] cannot save an empty filter");
+            const filterWithSameName = findFilterByName(filterDescriptors, name);
+            if (activeFilter === filterWithSameName) return;
+            if (void 0 !== filterWithSameName) {
+                const newFilterDescriptors = filterDescriptors.reduce((list, filterDescriptor)=>{
+                    if (filterDescriptor === activeFilter) list.push({
+                        active: true,
+                        filter: {
+                            ...filterDescriptor.filter,
+                            name
+                        },
+                        id: uuid(),
+                        name
+                    });
+                    else if (filterDescriptor.filter?.name !== name) list.push(filterDescriptor);
+                    return list;
+                }, []);
+                savedFilters.set(key, newFilterDescriptors);
+            } else {
+                const newFilterDescriptors = filterDescriptors.map((filterDescriptor)=>filterDescriptor === activeFilter ? {
+                        active: true,
+                        filter: {
+                            ...filterDescriptor.filter,
+                            name
+                        },
+                        id: uuid(),
+                        name
+                    } : filterDescriptor);
+                savedFilters.set(key, newFilterDescriptors);
+                onFiltersSaved?.(mapToRecord(savedFilters));
+            }
+        }
+        forceRefresh({});
+    }, [
+        onFiltersSaved,
+        savedFilters
+    ]);
+    const setCurrentFilter = useCallback((key, filter)=>{
+        const filterDescriptors = savedFilters.get(key) ?? [];
+        if (filter === NULL_FILTER) {
+            const newFilterDescriptors = insertOrReplaceFilter(filterDescriptors, NullFilterDescriptor);
+            savedFilters.set(key, newFilterDescriptors);
+        } else if (filter === EMPTY_FILTER) {
+            const newFilterDescriptors = insertOrReplaceFilter(filterDescriptors, EmptyFilterDescriptor);
+            savedFilters.set(key, newFilterDescriptors);
+        } else if ("string" == typeof filter) {
+            const newFilterDescriptors = activateFilter(filterDescriptors, filter);
+            savedFilters.set(key, newFilterDescriptors);
+        } else if (filter) {
+            const newFilterDescriptors = insertOrReplaceFilter(filterDescriptors, {
+                active: true,
+                filter,
+                id: UNSAVED_FILTER
+            });
+            savedFilters.set(key, newFilterDescriptors);
+        } else deleteFilter(key, UNSAVED_FILTER);
+        forceRefresh({});
+    }, [
+        deleteFilter,
+        savedFilters
+    ]);
+    const clearCurrentFilter = useCallback((key)=>{
+        setCurrentFilter(key, NULL_FILTER);
+    }, [
+        setCurrentFilter
+    ]);
+    return /*#__PURE__*/ jsxs(FilterContext.Provider, {
+        value: {
+            onFilterMenuAction: handleFilterMenuAction,
+            deleteFilter,
+            saveFilter: handleSaveFilter,
+            filterDescriptors: savedFilters,
+            clearCurrentFilter,
+            setCurrentFilter,
+            filterNameMaxLength
+        },
+        children: [
+            children,
+            dialog
+        ]
+    });
+};
+export { FilterProvider };

package/src/filter-provider/filter-descriptor-utils.js

@@ -0,0 +1,41 @@
+import { EMPTY_FILTER, NULL_FILTER, UNSAVED_FILTER } from "./FilterContext.js";
+function findFilter(filterDescriptors, filterId, throwIfNotFound = true) {
+    const filter = filterDescriptors.find(({ id })=>id === filterId);
+    if (filter) return filter;
+    if (throwIfNotFound) throw Error(`[FilterProvider] findFilter, filter not found ${filterId}`);
+}
+const deactivateFilter = (filterDescriptors)=>activateFilter(filterDescriptors, void 0);
+const namedFilters = (filterDescriptor)=>filterDescriptor.id !== EMPTY_FILTER && filterDescriptor.id !== NULL_FILTER && filterDescriptor.id !== UNSAVED_FILTER;
+const activateFilter = (filterDescriptors, activeFilterId)=>filterDescriptors.map((f)=>{
+        if (f.id === activeFilterId) return {
+            ...f,
+            active: !f.active
+        };
+        if (f.active) return {
+            ...f,
+            active: false
+        };
+        return f;
+    });
+const insertOrReplaceFilter = (filterDescriptors, filterDescriptor)=>{
+    if (!filterDescriptors.some(({ id })=>id === filterDescriptor.id)) return deactivateFilter(filterDescriptors).filter(namedFilters).concat(filterDescriptor);
+    return filterDescriptors.map((f)=>{
+        if (f.id === filterDescriptor.id) return filterDescriptor;
+        if (f.active) return {
+            ...f,
+            active: false
+        };
+        return f;
+    });
+};
+const renameFilter = (filterDescriptors, filterId, name)=>filterDescriptors.map((f)=>{
+        if (f.id === filterId && null !== f.filter) return {
+            ...f,
+            filter: {
+                ...f.filter,
+                name
+            }
+        };
+        return f;
+    });
+export { activateFilter, deactivateFilter, findFilter, insertOrReplaceFilter, renameFilter };

package/src/filter-toggle-button/FilterToggleButton.css.js

@@ -0,0 +1,22 @@
+const css = `
+.vuuFilterToggleButton {
+  --svg-filter-slider: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 8h4\"/><path d=\"M12 21v-9\"/><path d=\"M12 8V3\"/><path d=\"M17 16h4\"/><path d=\"M19 12V3\"/><path d=\"M19 21v-5\"/><path d=\"M3 14h4\"/><path d=\"M5 10V3\"/><path d=\"M5 21v-7\"/></svg>");
+  --SaltButton-height: var(--vuuFilterToggleButton-size);
+  --SaltButton-width: var(--vuuFilterToggleButton-size);
+}
+
+[data-icon="filter-slider"] {
+  --vuu-icon-svg: var(--svg-filter-slider);
+}
+
+.vuuFilterToggleButton-overlay-panel {
+  --vuuFilterDisplay-padding: 0;
+  gap: var(--salt-spacing-400);
+  padding: var(--salt-spacing-200);
+  flex-direction: column;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/filter-toggle-button/FilterToggleButton.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Button } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { HoverOverlay, IconButton } from "@vuu-ui/vuu-ui-controls";
+import { filtersAreEqual, isBetweenFilter, isMultiClauseFilter } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FilterDisplay } from "../filter-display/FilterDisplay.js";
+import { useSavedFilters } from "../filter-provider/FilterContext.js";
+import FilterToggleButton from "./FilterToggleButton.css";
+import { FilterAggregator } from "../FilterAggregator.js";
+const classBase = "vuuFilterToggleButton";
+const countFilterClauses = ({ filter })=>{
+    if (!filter) return 0;
+    if (isBetweenFilter(filter)) return 1;
+    if (isMultiClauseFilter(filter)) return filter.filters.length;
+    return 1;
+};
+const EmptyAggregator = new FilterAggregator();
+const FilterToggleButton_FilterToggleButton = ({ columns, filterProviderKey, onToggle })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-toggle-button",
+        css: FilterToggleButton,
+        window: targetWindow
+    });
+    const { clearCurrentFilter, currentFilter, setCurrentFilter } = useSavedFilters(filterProviderKey);
+    const filterCount = useMemo(()=>countFilterClauses(currentFilter), [
+        currentFilter
+    ]);
+    const [filteredColumnCount, setFilteredColumnCount] = useState(filterCount);
+    const filterAggregatorRef = useRef(EmptyAggregator);
+    useMemo(()=>{
+        if (!filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)) filterAggregatorRef.current = currentFilter.filter ? new FilterAggregator(currentFilter.filter) : new FilterAggregator();
+    }, [
+        currentFilter
+    ]);
+    useEffect(()=>{
+        setFilteredColumnCount(filterCount);
+    }, [
+        filterCount
+    ]);
+    const filterIcon = useMemo(()=>/*#__PURE__*/ jsx(IconButton, {
+            appearance: "solid",
+            className: classBase,
+            icon: "filter-slider",
+            onClick: onToggle,
+            sentiment: "neutral",
+            size: 16
+        }), [
+        onToggle
+    ]);
+    const [open, setOpen] = useState(false);
+    const handleClear = useCallback(()=>{
+        clearCurrentFilter?.();
+        setOpen(false);
+    }, [
+        clearCurrentFilter
+    ]);
+    const handleDeleteFilterClause = useCallback((columnName)=>{
+        const { current: fag } = filterAggregatorRef;
+        const column = columns.find((col)=>col.name === columnName);
+        if (column) {
+            if (1 === filteredColumnCount) handleClear();
+            else if (fag.remove(column) && fag.filter) setCurrentFilter(fag.filter);
+        }
+    }, [
+        columns,
+        filteredColumnCount,
+        handleClear,
+        setCurrentFilter
+    ]);
+    return currentFilter.filter ? /*#__PURE__*/ jsx(Badge, {
+        value: filteredColumnCount,
+        children: /*#__PURE__*/ jsx(HoverOverlay, {
+            onOpenChange: setOpen,
+            open: open,
+            trigger: filterIcon,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-overlay-panel`,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        children: `Filters (${filteredColumnCount})`
+                    }),
+                    /*#__PURE__*/ jsx(FilterDisplay, {
+                        allowDelete: true,
+                        columns: columns,
+                        filter: currentFilter.filter,
+                        onDeleteFilterClause: handleDeleteFilterClause
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx(Button, {
+                            onClick: handleClear,
+                            sentiment: "neutral",
+                            children: "Clear All"
+                        })
+                    })
+                ]
+            })
+        })
+    }) : filterIcon;
+};
+export { FilterToggleButton_FilterToggleButton as FilterToggleButton, countFilterClauses };