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

package/src/filter-utils.js

@@ -0,0 +1,300 @@
+import { Time, extractFilterForColumn, filtersAreEqual, isAndFilter, isBetweenFilter, isInFilter, isMultiClauseFilter, isMultiValueFilter, isOrFilter, isSingleValueFilter, isTimeDataValue, partition } from "@vuu-ui/vuu-utils";
+const AND = "and";
+const EQUALS = "=";
+const GREATER_THAN = ">";
+const LESS_THAN = "<";
+const OR = "or";
+const STARTS_WITH = "starts";
+const ENDS_WITH = "ends";
+const IN = "in";
+const filterClauses = (filter, clauses = [])=>{
+    if (filter) if (isMultiClauseFilter(filter)) filter.filters.forEach((f)=>clauses.push(...filterClauses(f)));
+    else clauses.push(filter);
+    return clauses;
+};
+const DEFAULT_ADD_FILTER_OPTS = {
+    combineWith: "and"
+};
+const removeLastClause = (filter)=>{
+    const { filters } = filter;
+    if (filters.length > 2) return {
+        ...filter,
+        filters: filter.filters.slice(0, -1)
+    };
+    return filter.filters[0];
+};
+const addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS)=>{
+    if (isMultiClauseFilter(existingFilter) && existingFilter.op === combineWith) return {
+        ...existingFilter,
+        filters: existingFilter.filters.concat(clause)
+    };
+    return {
+        op: combineWith,
+        filters: [
+            existingFilter,
+            clause
+        ]
+    };
+};
+const addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS)=>{
+    if (includesNoValues(filter)) isMultiClauseFilter(filter) || (existingFilter = removeFilterForColumn(existingFilter, {
+        name: filter.column
+    }));
+    else if (includesAllValues(filter)) {
+        isMultiClauseFilter(filter);
+        return removeFilterForColumn(existingFilter, {
+            name: filter.column ?? ""
+        });
+    }
+    if (!existingFilter) return filter;
+    if (!filter) return existingFilter;
+    if (existingFilter.op === AND && filter.op === AND) return {
+        op: AND,
+        filters: combine(existingFilter.filters, filter.filters)
+    };
+    if (existingFilter.op === AND) {
+        const filters = replaceOrInsert(existingFilter.filters, filter);
+        return filters.length > 1 ? {
+            op: AND,
+            filters
+        } : filters[0];
+    }
+    if (filter.op === AND) return {
+        op: AND,
+        filters: filter.filters.concat(existingFilter)
+    };
+    if (filterEquals(existingFilter, filter, true)) return filter;
+    if (canMerge(existingFilter, filter)) return merge(existingFilter, filter);
+    return {
+        op: combineWith,
+        filters: [
+            existingFilter,
+            filter
+        ]
+    };
+};
+const includesNoValues = (filter)=>{
+    if (!filter) return false;
+    if (isInFilter(filter) && 0 === filter.values.length) return true;
+    return isAndFilter(filter) && filter.filters.some((f)=>includesNoValues(f));
+};
+const includesAllValues = (filter)=>{
+    if (!filter) return false;
+    if (filter.op === STARTS_WITH && "" === filter.value) return true;
+    return filter.op === STARTS_WITH && "" === filter.value;
+};
+const replaceOrInsert = (filters, filter)=>filters.concat(filter);
+const merge = (f1, f2)=>{
+    if (includesNoValues(f2)) return f2;
+    if (isInFilter(f1) && isInFilter(f2)) return {
+        ...f1,
+        values: [
+            ...f1.values,
+            ...f2.values.filter((v)=>!f1.values.includes(v))
+        ]
+    };
+    if (isInFilter(f1) && f2.op === EQUALS) return {
+        ...f1,
+        values: f1.values.concat([
+            f2.value
+        ])
+    };
+    if (f1.op === EQUALS && f2.op === EQUALS) return {
+        column: f1.column,
+        op: IN,
+        values: [
+            f1.value,
+            f2.value
+        ]
+    };
+    return f2;
+};
+const combine = (existingFilters, replacementFilters)=>{
+    const equivalentType = ({ op: op1 }, { op: op2 })=>op1 === op2 || ">" === op1[0] && ">" === op2[0] || "<" === op1[0] && "<" === op2[0];
+    const replaces = (existingFilter, replacementFilter)=>existingFilter.column === replacementFilter.column && equivalentType(existingFilter, replacementFilter);
+    const stillApplicable = (existingFilter)=>false === replacementFilters.some((replacementFilter)=>replaces(existingFilter, replacementFilter));
+    return existingFilters.filter(stillApplicable).concat(replacementFilters);
+};
+const removeFilter = (sourceFilter, filterToRemove)=>{
+    if (filterEquals(sourceFilter, filterToRemove, true)) return null;
+    if (sourceFilter.op !== AND) throw Error(`removeFilter cannot remove ${JSON.stringify(filterToRemove)} from ${JSON.stringify(sourceFilter)}`);
+    const filters = sourceFilter.filters.filter((f)=>!filterEquals(f, filterToRemove));
+    return filters.length > 0 ? {
+        type: AND,
+        filters
+    } : null;
+};
+const splitFilterOnColumn = (columnName, filter)=>{
+    if (!filter) return [
+        void 0,
+        void 0
+    ];
+    if (filter.column === columnName) return [
+        filter,
+        void 0
+    ];
+    if (filter.op !== AND) return [
+        void 0,
+        filter
+    ];
+    const [[columnFilter], filters] = partition(filter.filters, (f)=>f.column === columnName);
+    return 1 === filters.length ? [
+        columnFilter,
+        filters[0]
+    ] : [
+        columnFilter,
+        {
+            op: AND,
+            filters
+        }
+    ];
+};
+const overrideColName = (filter, column)=>{
+    if (isMultiClauseFilter(filter)) return {
+        op: filter.op,
+        filters: filter.filters.map((f)=>overrideColName(f, column))
+    };
+    return {
+        ...filter,
+        column
+    };
+};
+const filterIncludesColumn = (filter, column)=>{
+    if (!filter) return false;
+    const { op, column: filterColName } = filter;
+    switch(op){
+        case AND:
+        case OR:
+            return null != filter.filters && filter.filters.some((f)=>filterIncludesColumn(f, column));
+        default:
+            return filterColName === column.name;
+    }
+};
+const removeFilterForColumn = (sourceFilter, column)=>{
+    const colName = column.name;
+    if (!sourceFilter) return;
+    if (sourceFilter.column === colName) return;
+    if (isAndFilter(sourceFilter) || isOrFilter(sourceFilter)) {
+        const { op } = sourceFilter;
+        const filters = sourceFilter.filters;
+        const otherColFilters = filters.filter((f)=>f.column !== colName);
+        switch(otherColFilters.length){
+            case 0:
+                return;
+            case 1:
+                return otherColFilters[0];
+            default:
+                return {
+                    op,
+                    filters: otherColFilters
+                };
+        }
+    }
+    return sourceFilter;
+};
+const canMerge = (f1, f2)=>f1.column === f2.column && ("=" === f1.op || "in" === f1.op) && ("=" === f2.op || "in" === f2.op);
+const sameValues = (arr1, arr2)=>{
+    if (arr1 === arr2) return true;
+    if (arr1.length === arr2.length) {
+        const a = arr1.slice().sort();
+        const b = arr2.slice().sort();
+        return a.join("|") === b.join("|");
+    }
+    return false;
+};
+const filterEquals = (f1, f2, strict = false)=>{
+    if (!strict) return true;
+    if (f1 && f2 && canMerge(f1, f2)) return f1.op === f2.op && (isSingleValueFilter(f1) && isSingleValueFilter(f2) && f1.value === f2.value || isMultiValueFilter(f1) && isMultiValueFilter(f2) && sameValues(f1.values, f2.values));
+    return false;
+};
+const updateFilter = (filter, newFilter, mode)=>{
+    if (filter && newFilter) {
+        if ("replace" === mode) return newFilter;
+        if ("and" === filter.op) return {
+            ...filter,
+            filters: filter.filters.concat(newFilter)
+        };
+        const { column: columnName } = newFilter;
+        if (columnName) {
+            const existingClause = newFilter.column ? extractFilterForColumn(filter, columnName) : void 0;
+            if (existingClause && columnName) {
+                const result = removeFilterForColumn(filter, {
+                    name: columnName
+                });
+                return updateFilter(result, newFilter, "add");
+            }
+        }
+        return {
+            op: "and",
+            filters: [
+                filter,
+                newFilter
+            ]
+        };
+    }
+    if (newFilter) return newFilter;
+    return filter;
+};
+const getTypeaheadFilter = (column, filterValues, isStartsWithFilter)=>{
+    if (0 === filterValues.length) return;
+    if (isStartsWithFilter) {
+        const startsWith = filterValues[0].substring(0, filterValues[0].length - 3);
+        return {
+            column,
+            op: "starts",
+            value: `"${startsWith}"`
+        };
+    }
+    return {
+        column,
+        op: "in",
+        values: filterValues.map((value)=>`"${value}"`)
+    };
+};
+const getNumericFilter = (column, op, value)=>{
+    if (void 0 === op) return;
+    if (void 0 === value || isNaN(value)) return;
+    return {
+        column,
+        op,
+        value
+    };
+};
+const getFilterClausesForDisplay = (filter, columns = [], clauses = [])=>{
+    if (void 0 === filter) ;
+    else if (isSingleValueFilter(filter)) {
+        const column = columns.find((c)=>c.name === filter.column);
+        if (column) {
+            const { name, label = name } = column;
+            clauses.push([
+                label,
+                filter.value.toString()
+            ]);
+        } else clauses.push([
+            filter.column,
+            filter.value.toString()
+        ]);
+    } else if (isBetweenFilter(filter)) {
+        const [f1, f2] = filter.filters;
+        const column = columns.find((c)=>c.name === f1.column);
+        if (isTimeDataValue(column) && "number" == typeof f1.value && "number" == typeof f2.value) {
+            const { name, label = name } = column;
+            clauses.push([
+                label,
+                `${Time.millisToTimeString(f1.value)} - ${Time.millisToTimeString(f2.value)}`
+            ]);
+        } else if (column) {
+            const { name, label = name } = column;
+            clauses.push([
+                label,
+                `${f1.value} - ${f2.value}`
+            ]);
+        } else clauses.push([
+            f1.column,
+            `${f1.value} - ${f2.value}`
+        ]);
+    } else if (isAndFilter(filter)) filter.filters.forEach((f)=>getFilterClausesForDisplay(f, columns, clauses));
+    return clauses;
+};
+const findMatchingFilter = (filterDescriptors, filter)=>filterDescriptors.find(({ active, filter: f })=>!active && null !== f && f !== filter && filtersAreEqual(f, filter));
+export { AND, ENDS_WITH, EQUALS, GREATER_THAN, IN, LESS_THAN, OR, STARTS_WITH, addClause, addFilter, filterClauses, filterEquals, filterIncludesColumn, findMatchingFilter, getFilterClausesForDisplay, getNumericFilter, getTypeaheadFilter, overrideColName, removeFilter, removeLastClause, splitFilterOnColumn, updateFilter };

package/src/index.js

@@ -0,0 +1,21 @@
+export * from "./filter-bar/index.js";
+export * from "./filter-clause/index.js";
+export * from "./filter-editor/index.js";
+export * from "./filter-pill/index.js";
+export * from "./filter-utils.js";
+export * from "./FilterModel.js";
+export * from "./inline-filter/index.js";
+export * from "./quick-filters/index.js";
+export { ColumnFilter } from "./column-filter/ColumnFilter.js";
+export { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause.js";
+export { FilterContainer, FilterContainerColumnFilter } from "./filter-container/FilterContainer.js";
+export { useFilterContextMenu } from "./filter-context-menu/useFilterContextMenu.js";
+export { FilterDisplay } from "./filter-display/FilterDisplay.js";
+export { FilterPanel } from "./filter-panel/FilterPanel.js";
+export { FilterPillNext } from "./filter-pill/FilterPillNext.js";
+export { NULL_FILTER, useSavedFilters } from "./filter-provider/FilterContext.js";
+export { FilterProvider } from "./filter-provider/FilterProvider.js";
+export { FilterNamePrompt as SaveFilterConfirmPrompt } from "./saved-filters/FilterNamePrompt.js";
+export { SavedFilterPanel } from "./saved-filters/SavedFilterPanel.js";
+export { TabbedFilterContainer } from "./tabbed-filter-container/TabbedFilterContainer.js";
+export { ToggleFilter } from "./toggle-filter/ToggleFilter.js";

package/src/inline-filter/InlineFilter.css.js

@@ -0,0 +1,89 @@
+const css = `
+.vuuInlineFilter {
+  --filter-borderColor: var(--salt-separable-secondary-borderColor);
+  --filter-color: var(--salt-content-primary-foreground-disabled);
+  --filter-padding: 1px 1px 1px 0;
+  --item-content-height: 20px;
+  height: var(--salt-size-base);
+
+  & .vuuInlineFilterCell {
+    --saltInput-paddingLeft: 2px;
+    --filter-padding: 0 2px;
+  }
+
+  & .vuuInlineFilterCell:has(input:focus) {
+    --filter-borderColor: transparent;
+    outline-offset: -2px;
+    outline-width: 2px;
+    outline-style: dotted;
+    outline-color: var(--salt-focused-outlineColor);
+
+    & .saltInput-input {
+      outline: none;
+    }
+
+    & .saltInput-focused {
+      border: none;
+      outline: none;
+    }
+
+    & .saltComboBox-focused {
+      outline: none;
+    }
+  }
+
+  & .vuuInlineFilterCell:focus {
+    --filter-borderColor: transparent;
+  }
+
+  & .vuuInlineFilterCell {
+    --saltInput-minHeight: var(--item-content-height);
+    --saltPillInput-minHeight: var(--item-content-height);
+    height: 100%;
+    padding: var(--filter-padding);
+    align-items: center;
+    display: inline-flex;
+
+    & .vuuTypeaheadInput {
+      border-style: solid;
+      border-color: var(--filter-borderColor);
+      height: var(--item-content-height);
+      border-width: 1px;
+      border-radius: 0;
+
+      & input::placeholder {
+        color: var(--filter-color);
+      }
+
+      & .saltButton:after {
+        --vuu-icon-size: 6px;
+      }
+    }
+
+    & .saltInput-primary.vuuInput {
+      border-style: solid;
+      border-color: var(--filter-borderColor);
+      height: var(--item-content-height);
+      min-height: var(--item-content-height);
+      border-width: 1px;
+      border-radius: 0;
+
+      & input::placeholder {
+        color: var(--filter-color);
+      }
+    }
+  }
+
+  & .vuuInlineFilter-virtualColSpan {
+    display: inline-block;
+  }
+}
+
+.vuuInlineFilter:focus-within {
+  --filter-borderColor: var(--salt-separable-primary-borderColor);
+  --filter-color: var(--salt-content-primary-foreground);
+}
+
+
+`;
+export default css;

package/src/inline-filter/InlineFilter.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { VirtualColSpan } from "@vuu-ui/vuu-table";
+import clsx from "clsx";
+import { FilterContainer, FilterContainerColumnFilter } from "../filter-container/FilterContainer.js";
+import { useInlineFilter } from "./useInlineFilter.js";
+import InlineFilter from "./InlineFilter.css";
+const classBase = "vuuInlineFilter";
+const InputProps = {
+    inputProps: {
+        placeholder: "Filter value"
+    },
+    variant: "primary"
+};
+const TypeaheadProps = {
+    highlightFirstSuggestion: false,
+    minCharacterCountToTriggerSuggestions: 0
+};
+const InlineFilter_InlineFilter = ({ ariaRole, onFilterApplied, onFilterCleared, table, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-inline-filter",
+        css: InlineFilter,
+        window: targetWindow
+    });
+    const { columns, onKeyDown, virtualColSpan } = useInlineFilter();
+    return /*#__PURE__*/ jsxs(FilterContainer, {
+        ...htmlAttributes,
+        className: classBase,
+        onFilterApplied: onFilterApplied,
+        onFilterCleared: onFilterCleared,
+        role: ariaRole,
+        children: [
+            /*#__PURE__*/ jsx(VirtualColSpan, {
+                width: virtualColSpan
+            }),
+            columns.map((column, i)=>/*#__PURE__*/ jsx(FilterContainerColumnFilter, {
+                    InputProps: InputProps,
+                    TypeaheadProps: TypeaheadProps,
+                    "aria-colindex": i + 1,
+                    className: clsx(`${classBase}Cell`, "vuuTableCell", {
+                        "vuuTableCell-right": "right" === column.align
+                    }),
+                    column: column,
+                    onKeyDown: onKeyDown,
+                    role: "cell",
+                    style: {
+                        width: column.width
+                    },
+                    table: table
+                }, column.name))
+        ]
+    });
+};
+export { InlineFilter_InlineFilter as InlineFilter };

package/src/inline-filter/index.js

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

package/src/inline-filter/useInlineFilter.js

@@ -0,0 +1,11 @@
+import { useEditableCell, useHeaderProps } from "@vuu-ui/vuu-table";
+const useInlineFilter = ()=>{
+    const { columns = [], virtualColSpan = 0 } = useHeaderProps();
+    const onKeyDown = useEditableCell();
+    return {
+        columns,
+        onKeyDown,
+        virtualColSpan
+    };
+};
+export { useInlineFilter };

package/src/quick-filters/QuickFilters.css.js

@@ -0,0 +1,39 @@
+const css = `
+.vuuQuickFilters {
+  --saltFormField-width: 150px;
+  --saltInput-background: transparent;
+  --saltInput-height: 18px;
+  --saltInput-minHeight: 18px;
+  gap: var(--salt-spacing-100);
+  align-items: end;
+  width: fit-content;
+  display: flex;
+
+  & .vuuQuickFilters-filter-container {
+    background-color: var(--salt-container-primary-background);
+    border: solid 1px var(--salt-editable-borderColor);
+    border-radius: 2px;
+    height: 43px;
+    display: flex;
+  }
+
+  & .saltFormField {
+    padding: 2px var(--salt-spacing-200);
+  }
+
+  & .saltFormField:not(:last-child) {
+    border-right: solid 1px var(--salt-editable-borderColor);
+  }
+
+  & .vuuTypeaheadInput {
+    & .saltPillInput-endAdornmentContainer {
+      & .saltButton {
+        border-style: none;
+      }
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/quick-filters/QuickFilters.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
+import { ColumnPicker, Icon, VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { FormField, FormFieldLabel } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useQuickFilters } from "./useQuickFilters.js";
+import QuickFilters from "./QuickFilters.css";
+const classBase = "vuuQuickFilters";
+const QuickFilters_QuickFilters = ({ allowAddColumn = true, allowFind = true, availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns, quickFilterColumns, vuuTable })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-quick-filters",
+        css: QuickFilters,
+        window: targetWindow
+    });
+    const searchIcon = /*#__PURE__*/ jsx(Icon, {
+        name: "search",
+        size: 18
+    });
+    const { availableColumnNames, onChange, onColumnsSelectionChange, onCommit, rootRef } = useQuickFilters({
+        availableColumns,
+        onApplyFilter,
+        onClearFilter,
+        onChangeQuickFilterColumns,
+        quickFilterColumns
+    });
+    const filterColumns = availableColumns.filter(({ name })=>quickFilterColumns?.includes(name));
+    const getFilterControls = ()=>{
+        const controls = [];
+        if (allowFind) controls.push(/*#__PURE__*/ jsxs(FormField, {
+            "data-embedded": true,
+            "data-field": "find",
+            children: [
+                /*#__PURE__*/ jsx(FormFieldLabel, {
+                    children: "Find"
+                }),
+                /*#__PURE__*/ jsx(VuuInput, {
+                    inputProps: {
+                        onChange
+                    },
+                    onCommit: onCommit,
+                    startAdornment: searchIcon,
+                    variant: "secondary"
+                })
+            ]
+        }, "find"));
+        filterColumns?.forEach((column)=>controls.push(/*#__PURE__*/ jsxs(FormField, {
+                "data-field": column.name,
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: column.label ?? column.name
+                    }),
+                    getDataItemEditControl({
+                        dataDescriptor: column,
+                        onCommit,
+                        table: vuuTable
+                    })
+                ]
+            }, column.label ?? column.name)));
+        return controls;
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        ref: rootRef,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-filter-container`,
+                children: getFilterControls()
+            }),
+            allowAddColumn ? /*#__PURE__*/ jsx(ColumnPicker, {
+                columns: availableColumnNames,
+                icon: "more-horiz",
+                iconSize: 16,
+                onSelectionChange: onColumnsSelectionChange,
+                selected: quickFilterColumns
+            }) : null
+        ]
+    });
+};
+export { QuickFilters_QuickFilters as QuickFilters };

package/src/quick-filters/index.js

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