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

package/src/quick-filters/useQuickFilters.js

@@ -1,108 +0,0 @@
-import { isNumericColumn, queryClosest } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef } from "react";
-const findColumn = (columns, name)=>{
-    const column = columns?.find((col)=>col.name === name);
-    if (column) return column;
-    throw Error(`column not found ${name}`);
-};
-const asNumeric = (value, column)=>{
-    switch(column.serverDataType){
-        case "int":
-        case "long":
-            {
-                const numericValue = parseInt(value, 10);
-                if (!isNaN(numericValue)) return numericValue;
-                throw Error(`invalid value ${value} is not integer`);
-            }
-        case "double":
-            {
-                const numericValue = parseFloat(value);
-                if (!isNaN(numericValue)) return numericValue;
-                throw Error(`invalid value ${value} is not decimal`);
-            }
-        default:
-            throw Error(`DataType of column ${column.name}, ${column.serverDataType} is not numeric`);
-    }
-};
-const createFilterClause = ([identifier, value], availableColumns)=>{
-    if ("find" === identifier) if (availableColumns) {
-        const targetColumns = availableColumns.filter(({ serverDataType })=>"string" === serverDataType);
-        if (targetColumns.length) return {
-            op: "or",
-            filters: targetColumns.map((column)=>createFilterClause([
-                    column.name,
-                    value
-                ], availableColumns))
-        };
-        throw Error(`value ${value} is not valid for any of available columns`);
-    } else throw Error("columns must be provided for find operation");
-    {
-        const column = findColumn(availableColumns, identifier);
-        if (!isNumericColumn(column)) return {
-            column: identifier,
-            op: "contains",
-            value
-        };
-        {
-            const numericValue = asNumeric(value, column);
-            return {
-                column: identifier,
-                op: "=",
-                value: numericValue
-            };
-        }
-    }
-};
-const buildFilter = (quickFilters, availableColumns)=>{
-    const entries = Object.entries(quickFilters);
-    if (1 === entries.length) return createFilterClause(entries[0], availableColumns);
-    if (entries.length > 1) return {
-        op: "and",
-        filters: entries.map((entry)=>createFilterClause(entry, availableColumns), availableColumns)
-    };
-};
-const useQuickFilters = ({ availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns })=>{
-    const filters = useRef({});
-    const rootRef = useCallback((el)=>{
-        if (el) {
-            const firstInput = el.querySelector("input");
-            firstInput?.focus();
-        }
-    }, []);
-    const handleChange = useCallback((e)=>{
-        console.log(`onChange ${e.target.value}`);
-    }, []);
-    const handleCommit = useCallback((e, value)=>{
-        const field = queryClosest(e.target, "[data-field]");
-        const column = field?.dataset.field;
-        if (column) {
-            if (void 0 === value || "string" == typeof value && "" === value.trim()) {
-                if (void 0 === filters.current[column]) return;
-                delete filters.current[column];
-            } else if ("string" == typeof value && "" !== value.trim()) filters.current[column] = value;
-            const filter = buildFilter(filters.current, availableColumns);
-            if (filter) onApplyFilter?.(filter);
-            else onClearFilter();
-        }
-    }, [
-        availableColumns,
-        onApplyFilter,
-        onClearFilter
-    ]);
-    const handleColumnsSelectionChange = useCallback((evt, newSelected)=>{
-        onChangeQuickFilterColumns?.(newSelected);
-    }, [
-        onChangeQuickFilterColumns
-    ]);
-    const availableColumnNames = useMemo(()=>availableColumns.map((col)=>col.name), [
-        availableColumns
-    ]);
-    return {
-        availableColumnNames,
-        onChange: handleChange,
-        onColumnsSelectionChange: handleColumnsSelectionChange,
-        onCommit: handleCommit,
-        rootRef
-    };
-};
-export { useQuickFilters };

package/src/saved-filters/DeleteFilterPrompt.js

@@ -1,23 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Prompt } from "@vuu-ui/vuu-ui-controls";
-import clsx from "clsx";
-import { FilterDisplay } from "../filter-display/FilterDisplay.js";
-const DeleteFilterPrompt = ({ children, className, columns, filterDescriptor, onClose, onConfirm, open = true, ...htmlAttributes })=>/*#__PURE__*/ jsxs(Prompt, {
-        ...htmlAttributes,
-        className: clsx("vuuDeleteFilterPrompt", className),
-        initialFocusedItem: "confirm",
-        onClose: onClose,
-        onConfirm: onConfirm,
-        open: open,
-        title: "Delete Filter",
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                children: `Do you want to delete '${filterDescriptor.filter?.name}' ?`
-            }),
-            children ? children : filterDescriptor.filter ? /*#__PURE__*/ jsx(FilterDisplay, {
-                columns: columns,
-                filter: filterDescriptor.filter
-            }) : null
-        ]
-    });
-export { DeleteFilterPrompt };

package/src/saved-filters/FilterNamePrompt.css.js

@@ -1,19 +0,0 @@
-const css = `
-.vuuFilterNamePrompt {
-  & .saltText-warning {
-    padding: var(--salt-spacing-400) 0;
-  }
-
-  & .saltDialogContent {
-    background: none;
-    padding: 0;
-
-    & .saltDialogContent-inner {
-      padding: var(--vuuFilterNamePrompt-content-padding, 1px);
-    }
-  }
-}
-
-
-`;
-export default css;

package/src/saved-filters/FilterNamePrompt.js

@@ -1,74 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FormField, FormFieldHelperText, FormFieldLabel, Text } from "@salt-ds/core";
-import { Prompt, VuuInput } from "@vuu-ui/vuu-ui-controls";
-import { useEffect, useRef } from "react";
-import clsx from "clsx";
-import { Status, useFilterNamePrompt } from "./useFilterNamePrompt.js";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import FilterNamePrompt from "./FilterNamePrompt.css";
-const DUPLICATE_NAME_MESSAGE = "A filter with this name already exists";
-const DEFAULT_FILTER_NAME_MAX_LENGTH = 25;
-const FilterNamePrompt_FilterNamePrompt = ({ className, filterName, onClose, onConfirm: onConfirmProp, open = true, title, filterNameMaxLength = DEFAULT_FILTER_NAME_MAX_LENGTH, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-saved-filter-panel",
-        css: FilterNamePrompt,
-        window: targetWindow
-    });
-    const inputRef = useRef(null);
-    const { confirmButtonProps, nameOfDuplicateFilter, onChange, onCommit, onConfirm, status, value } = useFilterNamePrompt({
-        filterName,
-        onConfirm: onConfirmProp
-    });
-    const formFieldHelperText = status === Status.DuplicateName ? DUPLICATE_NAME_MESSAGE : void 0;
-    useEffect(()=>{
-        setTimeout(()=>{
-            inputRef.current?.focus();
-        }, 200);
-    }, []);
-    return /*#__PURE__*/ jsxs(Prompt, {
-        ...htmlAttributes,
-        className: clsx("vuuFilterNamePrompt", className),
-        confirmButtonProps: confirmButtonProps,
-        disableAccent: true,
-        onClose: onClose,
-        onConfirm: onConfirm,
-        open: open,
-        title: title,
-        children: [
-            /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Filter name"
-                    }),
-                    /*#__PURE__*/ jsx(VuuInput, {
-                        commitOnBlur: false,
-                        inputRef: inputRef,
-                        onChange: onChange,
-                        onCommit: onCommit,
-                        defaultValue: value,
-                        placeholder: "Please enter",
-                        inputProps: {
-                            maxLength: filterNameMaxLength
-                        }
-                    }),
-                    formFieldHelperText ? /*#__PURE__*/ jsx(FormFieldHelperText, {
-                        children: formFieldHelperText
-                    }) : null
-                ]
-            }),
-            nameOfDuplicateFilter ? /*#__PURE__*/ jsxs(Text, {
-                color: "warning",
-                children: [
-                    "An identical filter has already been saved, see",
-                    " ",
-                    /*#__PURE__*/ jsx("b", {
-                        children: nameOfDuplicateFilter
-                    })
-                ]
-            }) : null
-        ]
-    });
-};
-export { FilterNamePrompt_FilterNamePrompt as FilterNamePrompt };

package/src/saved-filters/SavedFilterPanel.css.js

@@ -1,21 +0,0 @@
-const css = `
-.vuuSavedFilterPanel {
-  background-color: var(--vuuSavedFilterPanel-background, var(--salt-container-secondary-background));
-  padding: var(--vuuSavedFilterPanel-padding, calc(var(--salt-spacing-200) * 3));
-  overflow: auto;
-
-  & .vuuFilterPillNext {
-    max-width: 100%;
-  }
-}
-
-.vuuSavedFilterPanel-filterPill-container {
-  gap: var(--salt-spacing-400);
-  flex-wrap: wrap;
-  height: fit-content;
-  display: flex;
-}
-
-
-`;
-export default css;

package/src/saved-filters/SavedFilterPanel.js

@@ -1,53 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createElement, useMemo } from "react";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { FilterPillNext } from "../filter-pill/FilterPillNext.js";
-import { useSavedFilterPanel } from "./useSavedFilterPanel.js";
-import SavedFilterPanel from "./SavedFilterPanel.css";
-const classBase = "vuuSavedFilterPanel";
-const defaultFilterPillPermissions = {
-    allowEdit: true,
-    allowRename: true,
-    allowRemove: true
-};
-const SavedFilterPanel_SavedFilterPanel = ({ availableColumns, className, filterPillPermissions = defaultFilterPillPermissions, filterProviderKey, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-saved-filter-panel",
-        css: SavedFilterPanel,
-        window: targetWindow
-    });
-    const permissions = useMemo(()=>{
-        const { allowClose = defaultFilterPillPermissions.allowClose, allowEdit = defaultFilterPillPermissions.allowEdit, allowRemove = defaultFilterPillPermissions.allowRename, allowRename = defaultFilterPillPermissions.allowRename } = filterPillPermissions;
-        return {
-            allowClose,
-            allowEdit,
-            allowRemove,
-            allowRename
-        };
-    }, [
-        filterPillPermissions
-    ]);
-    const { onClickFilter, onFilterMenuAction, savedFilters } = useSavedFilterPanel({
-        availableColumns,
-        filterProviderKey
-    });
-    return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, "vuuScrollable", className),
-        children: /*#__PURE__*/ jsx("div", {
-            className: `${classBase}-filterPill-container`,
-            children: savedFilters.map((filterDescriptor, i)=>/*#__PURE__*/ createElement(FilterPillNext, {
-                    ...filterDescriptor,
-                    columns: availableColumns,
-                    key: i,
-                    onClick: onClickFilter,
-                    onMenuAction: onFilterMenuAction,
-                    permissions: permissions
-                }))
-        })
-    });
-};
-export { SavedFilterPanel_SavedFilterPanel as SavedFilterPanel };

package/src/saved-filters/useFilterNamePrompt.js

@@ -1,74 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { useSavedFilters } from "../filter-provider/FilterContext.js";
-import { findMatchingFilter } from "../filter-utils.js";
-const isValidName = (name)=>"string" == typeof name && name.trim().length > 0;
-const isDuplicateName = (names, value)=>names.includes(value.toLowerCase());
-const Status = {
-    Empty: "empty",
-    Valid: "valid",
-    Invalid: "invalid",
-    DuplicateName: "duplicate-name"
-};
-const useFilterNamePrompt = ({ filterName = "", onConfirm })=>{
-    const { currentFilter, savedFilters = [] } = useSavedFilters();
-    const filterNameRef = useRef(filterName);
-    const confirmRef = useRef(null);
-    const [status, setStatus] = useState("" !== filterName ? Status.Valid : Status.Empty);
-    const nameOfDuplicateFilter = useMemo(()=>{
-        if (currentFilter.filter) {
-            const matchingFilter = findMatchingFilter(savedFilters, currentFilter.filter);
-            if (matchingFilter) return matchingFilter.filter?.name;
-        }
-    }, [
-        currentFilter.filter,
-        savedFilters
-    ]);
-    const existingFilterNames = useMemo(()=>savedFilters.reduce((list, f)=>{
-            if (f.filter?.name) list.push(f.filter.name.toLowerCase());
-            return list;
-        }, []), [
-        savedFilters
-    ]);
-    const handleConfirm = useCallback(()=>{
-        onConfirm(filterNameRef.current);
-    }, [
-        onConfirm
-    ]);
-    const handleCommit = useCallback((e, value)=>{
-        onConfirm(value);
-    }, [
-        onConfirm
-    ]);
-    const handleChange = useCallback((e)=>{
-        const value = e.target.value.trim();
-        filterNameRef.current = value;
-        setStatus((currentStatus)=>{
-            let newStatus = currentStatus;
-            if ("" === value) newStatus = Status.Empty;
-            else {
-                const isValid = isValidName(value);
-                newStatus = isValid ? isDuplicateName(existingFilterNames, value) ? Status.DuplicateName : Status.Valid : Status.Invalid;
-            }
-            return newStatus;
-        });
-    }, [
-        existingFilterNames
-    ]);
-    const confirmButtonProps = useMemo(()=>({
-            disabled: status !== Status.Valid && status !== Status.DuplicateName,
-            label: status === Status.DuplicateName ? "replace filter" : "save filter",
-            ref: confirmRef
-        }), [
-        status
-    ]);
-    return {
-        confirmButtonProps,
-        nameOfDuplicateFilter,
-        onChange: handleChange,
-        onCommit: handleCommit,
-        onConfirm: handleConfirm,
-        status,
-        value: filterNameRef.current
-    };
-};
-export { Status, useFilterNamePrompt };

package/src/saved-filters/useSavedFilterPanel.js

@@ -1,19 +0,0 @@
-import { useCallback } from "react";
-import { useSavedFilters } from "../filter-provider/FilterContext.js";
-const useSavedFilterPanel = (props)=>{
-    const { savedFilters = [], setCurrentFilter, onFilterMenuAction } = useSavedFilters(props?.filterProviderKey, {
-        availableColumns: props?.availableColumns
-    });
-    const handleClickFilter = useCallback((e)=>{
-        const { id } = e.target;
-        setCurrentFilter(id);
-    }, [
-        setCurrentFilter
-    ]);
-    return {
-        onClickFilter: handleClickFilter,
-        onFilterMenuAction,
-        savedFilters
-    };
-};
-export { useSavedFilterPanel };

package/src/tabbed-filter-container/TabbedFilterContainer.js

@@ -1,61 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { TabListNext, TabNext, TabNextPanel, TabNextTrigger, TabsNext } from "@salt-ds/lab";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { FilterPanel } from "../filter-panel/FilterPanel.js";
-import { SavedFilterPanel } from "../saved-filters/SavedFilterPanel.js";
-import TabbedFilterContainer from "./TabbedFilterContainer.css";
-const classBase = "vuuTabbedFilterContainer";
-const TabbedFilterContainer_TabbedFilterContainer = ({ SavedFilterPanelProps, children, className, filter, filterProviderKey, filterTabLabel = "Ad hoc", onFilterApplied, onFilterCleared, savedFilterLabel = "Saved", ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-tabbed-filter-container",
-        css: TabbedFilterContainer,
-        window: targetWindow
-    });
-    return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, className),
-        children: /*#__PURE__*/ jsxs(TabsNext, {
-            defaultValue: "ad-hoc-filter",
-            children: [
-                /*#__PURE__*/ jsxs(TabListNext, {
-                    appearance: "transparent",
-                    children: [
-                        /*#__PURE__*/ jsx(TabNext, {
-                            value: "ad-hoc-filter",
-                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
-                                children: filterTabLabel
-                            })
-                        }, "ad-hoc-filter"),
-                        /*#__PURE__*/ jsx(TabNext, {
-                            value: "saved-filters",
-                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
-                                children: savedFilterLabel
-                            })
-                        }, "saved-filters")
-                    ]
-                }),
-                /*#__PURE__*/ jsx(TabNextPanel, {
-                    value: "ad-hoc-filter",
-                    children: /*#__PURE__*/ jsx(FilterPanel, {
-                        filter: filter,
-                        filterProviderKey: filterProviderKey,
-                        onFilterApplied: onFilterApplied,
-                        onFilterCleared: onFilterCleared,
-                        children: children
-                    })
-                }, "ad-hoc-filter"),
-                /*#__PURE__*/ jsx(TabNextPanel, {
-                    value: "saved-filters",
-                    children: /*#__PURE__*/ jsx(SavedFilterPanel, {
-                        ...SavedFilterPanelProps,
-                        filterProviderKey: filterProviderKey
-                    })
-                }, "saved-filters")
-            ]
-        })
-    });
-};
-export { TabbedFilterContainer_TabbedFilterContainer as TabbedFilterContainer };

package/src/toggle-filter/ToggleFilter.css.js

@@ -1,10 +0,0 @@
-const css = `
-.vuuToggleFilter {
-  & .vuuToggleFilter-onlyAvailableValue:not([aria-checked="true"], :hover) {
-    background-color: var(--vuuToggleFilter-implicitActive-bg, var(--salt-actionable-bold-background));
-  }
-}
-
-
-`;
-export default css;

package/src/toggle-filter/ToggleFilter.js

@@ -1,68 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { forwardRef, useCallback } from "react";
-import { useToggleFilter } from "./useToggleFilter.js";
-import ToggleFilter_0 from "./ToggleFilter.css";
-const getValues = (defaultValue, value)=>{
-    if (void 0 === defaultValue && void 0 === value) return [
-        "all"
-    ];
-    if (void 0 !== defaultValue && void 0 !== value) throw Error("[ToggleFilter] only one of defaultValue/value must be provided");
-    if ("" === defaultValue) return [
-        "all"
-    ];
-    if ("" === value) return [
-        void 0,
-        "all"
-    ];
-    return [
-        defaultValue,
-        value
-    ];
-};
-const classBase = "vuuToggleFilter";
-const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-toggle-filter",
-        css: ToggleFilter_0,
-        window: targetWindow
-    });
-    const [defaultValue, value] = getValues(defaultValueProp, valueProp);
-    const onlyAvailableValue = useToggleFilter({
-        column,
-        table,
-        values
-    });
-    const handleChange = useCallback((e)=>{
-        const value = e.currentTarget.value;
-        "all" === value ? onCommit(e, "") : onCommit(e, value);
-    }, [
-        onCommit
-    ]);
-    return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
-        ...ToggleButtonGroupProps,
-        className: clsx(classBase, className),
-        defaultValue: defaultValue,
-        onChange: handleChange,
-        ref: forwardedRef,
-        value: value,
-        children: [
-            /*#__PURE__*/ jsx(ToggleButton, {
-                value: "all",
-                children: "ALL"
-            }, "all"),
-            values.map((toggleValue)=>/*#__PURE__*/ jsx(ToggleButton, {
-                    className: clsx({
-                        [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue
-                    }),
-                    value: toggleValue,
-                    children: toggleValue
-                }, toggleValue))
-        ]
-    });
-});
-export { ToggleFilter_ToggleFilter as ToggleFilter };

package/src/toggle-filter/useToggleFilter.js

@@ -1,57 +0,0 @@
-import { useSavedFilters } from "../filter-provider/FilterContext.js";
-import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { filtersAreEqual, getVuuTable } from "@vuu-ui/vuu-utils";
-const assertValid = (values, actualValues)=>{
-    if (actualValues.some((val)=>-1 === values.indexOf(val))) console.warn(`[useToggleFilter] ToggleFilter is configured with values which do not include all values from data source
-            [${values.join()}]
-            [${actualValues.join()}]`);
-};
-const typeaheadRefreshRequired = (f1, f2)=>{
-    if (null === f1 && null === f2) return false;
-    if (null === f1 || null === f2) return true;
-    if (filtersAreEqual(f1, f2)) return false;
-    return true;
-};
-const useToggleFilter = ({ column, table, values })=>{
-    const { currentFilter } = useSavedFilters();
-    const currentFilterRef = useRef(currentFilter.filter);
-    const [typeaheadValues, setTypeaheadValues] = useState([]);
-    const getSuggestions = useTypeaheadSuggestions();
-    const refreshSuggestions = useCallback((table)=>{
-        const vuuTable = getVuuTable(table);
-        const params = [
-            vuuTable,
-            column
-        ];
-        getSuggestions(params).then((suggestions)=>{
-            if (false === suggestions) setTypeaheadValues([]);
-            else {
-                assertValid(values, suggestions);
-                setTypeaheadValues(suggestions);
-            }
-        });
-    }, [
-        column,
-        getSuggestions,
-        values
-    ]);
-    useMemo(()=>{
-        if (table) refreshSuggestions(table);
-    }, [
-        refreshSuggestions,
-        table
-    ]);
-    useMemo(()=>{
-        const { current: filter } = currentFilterRef;
-        if (table && typeaheadRefreshRequired(filter, currentFilter.filter)) refreshSuggestions(table);
-        currentFilterRef.current = currentFilter.filter;
-    }, [
-        currentFilter.filter,
-        refreshSuggestions,
-        table
-    ]);
-    const [firstValue] = typeaheadValues;
-    return 1 === typeaheadValues.length ? firstValue : void 0;
-};
-export { useToggleFilter };