@vuu-ui/vuu-filters 3.5.0-beta.1 → 3.5.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0-beta.1",
+  "version": "3.5.0-beta.2",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,19 +10,19 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.5.0-beta.1",
-    "@vuu-ui/vuu-protocol-types": "3.5.0-beta.1",
-    "@vuu-ui/vuu-table-types": "3.5.0-beta.1",
-    "@vuu-ui/vuu-filter-types": "3.5.0-beta.1"
+    "@vuu-ui/vuu-data-types": "3.5.0-beta.2",
+    "@vuu-ui/vuu-protocol-types": "3.5.0-beta.2",
+    "@vuu-ui/vuu-table-types": "3.5.0-beta.2",
+    "@vuu-ui/vuu-filter-types": "3.5.0-beta.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.0-beta.1",
-    "@vuu-ui/vuu-data-react": "3.5.0-beta.1",
-    "@vuu-ui/vuu-filter-parser": "3.5.0-beta.1",
-    "@vuu-ui/vuu-popups": "3.5.0-beta.1",
-    "@vuu-ui/vuu-ui-controls": "3.5.0-beta.1",
-    "@vuu-ui/vuu-table": "3.5.0-beta.1",
-    "@vuu-ui/vuu-utils": "3.5.0-beta.1",
+    "@vuu-ui/vuu-context-menu": "3.5.0-beta.2",
+    "@vuu-ui/vuu-data-react": "3.5.0-beta.2",
+    "@vuu-ui/vuu-filter-parser": "3.5.0-beta.2",
+    "@vuu-ui/vuu-popups": "3.5.0-beta.2",
+    "@vuu-ui/vuu-ui-controls": "3.5.0-beta.2",
+    "@vuu-ui/vuu-table": "3.5.0-beta.2",
+    "@vuu-ui/vuu-utils": "3.5.0-beta.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

package/src/column-filter/ColumnFilter.js

@@ -2,23 +2,32 @@ import { jsxs } from "react/jsx-runtime";
 import { SegmentedButtonGroup } from "@salt-ds/core";
 import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
 import clsx from "clsx";
-import { forwardRef as external_react_forwardRef } from "react";
+import { forwardRef as external_react_forwardRef, useMemo } from "react";
 import { useColumnFilter } from "./useColumnFilter.js";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import ColumnFilter_0 from "./ColumnFilter.css";
-import { isBetweenOperator } from "@vuu-ui/vuu-utils";
+import { isBetweenOperator, withDateTimePattern } from "@vuu-ui/vuu-utils";
 const classBase = "vuuColumnFilter";
-const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-filter-editor",
         css: ColumnFilter_0,
         window: targetWindow
     });
+    const { date, time } = pattern ?? {};
+    const controlDescriptor = useMemo(()=>withDateTimePattern(column, date || time ? {
+            date,
+            time
+        } : void 0), [
+        column,
+        date,
+        time
+    ]);
     const { InputProps, InputPropsRange, isInvalid, onCommit, onCommitRange } = useColumnFilter({
         InputProps: InputPropsProp,
-        column,
+        column: controlDescriptor,
         defaultValue,
         extendedFilterOptions,
         onColumnFilterChange,
@@ -38,7 +47,7 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
                 InputProps,
                 TypeaheadProps,
                 commitWhenCleared: true,
-                dataDescriptor: column,
+                dataDescriptor: controlDescriptor,
                 onCommit,
                 table,
                 values,
@@ -49,7 +58,7 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
                 className: `${classBase}-rangeHigh`,
                 commitWhenCleared: true,
                 variant,
-                dataDescriptor: column,
+                dataDescriptor: controlDescriptor,
                 onCommit: onCommitRange,
                 table
             }) : null

package/src/filter-container/FilterContainer.js

@@ -1,17 +1,31 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ColumnFilterContext, useFilterContainer, useFilterContext } from "./useFilterContainer.js";
 import { ColumnFilter } from "../column-filter/ColumnFilter.js";
-import { filterDescriptorHasFilter, isNullFilter, useSavedFilters } from "../filter-provider/FilterContext.js";
-import { filtersAreEqual, getColumnValueFromFilter, getDefaultTimeRange, isBetweenOperator, isTimeDataValue } from "@vuu-ui/vuu-utils";
+import { filterDescriptorHasFilter, isNullFilter, useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
+import { filtersAreEqual, getColumnValueFromFilter, getDefaultTimeRange, isBetweenOperator, isTimeDataValue, withDateTimePattern } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import FilterContainer from "./FilterContainer.css";
 const classBase = "vuuFilterContainer";
 const notEmpty = (value)=>Array.isArray(value) ? "" !== value[0] && "" !== value[1] : "" !== value;
-const FilterContainerColumnFilter = ({ column, operator = "=", variant, ...props })=>{
+const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", pattern, variant, ...props })=>{
+    const { date, time } = pattern ?? {};
+    const column = useMemo(()=>withDateTimePattern(columnProp, date || time ? {
+            date,
+            time
+        } : void 0), [
+        columnProp,
+        date,
+        time
+    ]);
     const { filterProviderKey, onChange: onFilterContextChange, onCommit: onFilterContextCommit, register } = useFilterContext(column, true);
+    const { registerColumnFilterColumn } = useColumnFilterRegistry(filterProviderKey);
+    useEffect(()=>registerColumnFilterColumn(column), [
+        column,
+        registerColumnFilterColumn
+    ]);
     const initialValue = useMemo(()=>register(column, operator), [
         column,
         operator,

package/src/filter-context-menu/useFilterContextMenu.js

@@ -1,14 +1,37 @@
-import { filtersAreEqual } from "@vuu-ui/vuu-utils";
+import { filtersAreEqual, getTemporalCellFilter, getTemporalInfo, withDateTimePattern } from "@vuu-ui/vuu-utils";
 import { useCallback, useMemo, useRef } from "react";
-import { useSavedFilters } from "../filter-provider/FilterContext.js";
+import { useColumnFilterRegistry, useSavedFilters } from "../filter-provider/FilterContext.js";
 import { FilterAggregator } from "../FilterAggregator.js";
 const EmptyAggregator = new FilterAggregator();
 const defaultProps = {
     filterColumns: "*"
 };
-const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defaultProps)=>{
+const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProviderKey } = defaultProps)=>{
     const { currentFilter, clearCurrentFilter, setCurrentFilter } = useSavedFilters(filterProviderKey);
+    const { getColumnFilterColumn } = useColumnFilterRegistry(filterProviderKey);
     const filterAggregatorRef = useRef(EmptyAggregator);
+    const getCellFilter = useCallback((column, dataRow)=>{
+        const value = dataRow[column.name];
+        if (getTemporalInfo(column)) {
+            const pattern = filterPatterns?.[column.name];
+            const columnFilterColumn = pattern ? void 0 : getColumnFilterColumn(column.name);
+            const filterColumn = pattern ? withDateTimePattern(column, pattern) : columnFilterColumn;
+            const temporalCellFilter = getTemporalCellFilter(filterColumn ?? column, value, void 0 !== columnFilterColumn);
+            if (temporalCellFilter) return {
+                column: filterColumn ?? column,
+                ...temporalCellFilter
+            };
+        }
+        return {
+            column,
+            label: `${value}`,
+            op: "=",
+            value
+        };
+    }, [
+        filterPatterns,
+        getColumnFilterColumn
+    ]);
     useMemo(()=>{
         if (!filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)) filterAggregatorRef.current = currentFilter.filter ? new FilterAggregator(currentFilter.filter) : new FilterAggregator();
     }, [
@@ -18,13 +41,13 @@ const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defau
         const { column, dataRow } = options;
         const { current: fag } = filterAggregatorRef;
         const { name, label = name } = column;
-        const value = dataRow[column.name];
         const ClearFilter = {
             id: "filter-clear",
             label: "Clear filter",
             options
         };
         if ("*" === filterColumns || filterColumns.includes(column.name)) {
+            const { label: value } = getCellFilter(column, dataRow);
             const SetFilter = {
                 id: "filter-set",
                 label: `Set filter ${label} '${value}'`,
@@ -60,7 +83,8 @@ const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defau
         ];
         return [];
     }, [
-        filterColumns
+        filterColumns,
+        getCellFilter
     ]);
     const menuActionHandler = useCallback((menuItemId, options)=>{
         if (!options) return false;
@@ -73,8 +97,8 @@ const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defau
                     break;
                 case "filter-add":
                     {
-                        const value = dataRow[column.name];
-                        fag.add(column, value, "=");
+                        const cellFilter = getCellFilter(column, dataRow);
+                        fag.add(cellFilter.column, cellFilter.value, cellFilter.op);
                         if (fag.filter) setCurrentFilter(fag.filter);
                     }
                     break;
@@ -84,9 +108,9 @@ const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defau
                     break;
                 case "filter-set":
                     {
-                        const value = dataRow[column.name];
+                        const cellFilter = getCellFilter(column, dataRow);
                         fag.clear();
-                        fag.add(column, value, "=");
+                        fag.add(cellFilter.column, cellFilter.value, cellFilter.op);
                         if (fag.filter) setCurrentFilter(fag.filter);
                     }
                     break;
@@ -96,6 +120,7 @@ const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defau
         }
     }, [
         clearCurrentFilter,
+        getCellFilter,
         setCurrentFilter
     ]);
     return {

package/src/filter-provider/FilterContext.js

@@ -31,6 +31,21 @@ const FilterContext = createContext({
     clearCurrentFilter: ()=>console.warn("[FilterContext] clearFilter, no FilterProvider has been configured"),
     setCurrentFilter: ()=>console.warn("[FilterContext] setCurrentFilter, no FilterProvider has been configured")
 });
+function useColumnFilterRegistry(key = "GLOBAL") {
+    const { getColumnFilterColumn, registerColumnFilterColumn } = useContext(FilterContext);
+    const getColumn = useCallback((columnName)=>getColumnFilterColumn?.(key, columnName), [
+        getColumnFilterColumn,
+        key
+    ]);
+    const register = useCallback((column)=>registerColumnFilterColumn?.(key, column), [
+        key,
+        registerColumnFilterColumn
+    ]);
+    return {
+        getColumnFilterColumn: getColumn,
+        registerColumnFilterColumn: register
+    };
+}
 function useSavedFilters(key = "GLOBAL", props) {
     const { onFilterMenuAction, filterDescriptors, saveFilter, setCurrentFilter, filterNameMaxLength } = useContext(FilterContext);
     const handleFilterMenuAction = useCallback((filterId, filterAction)=>{
@@ -68,4 +83,4 @@ function useSavedFilters(key = "GLOBAL", props) {
         filterNameMaxLength
     };
 }
-export { EMPTY_FILTER, EmptyFilterDescriptor, FilterContext, NULL_FILTER, NullFilterDescriptor, UNSAVED_FILTER, filterDescriptorHasFilter, isEmptyFilter, isNullFilter, useSavedFilters };
+export { EMPTY_FILTER, EmptyFilterDescriptor, FilterContext, NULL_FILTER, NullFilterDescriptor, UNSAVED_FILTER, filterDescriptorHasFilter, isEmptyFilter, isNullFilter, useColumnFilterRegistry, useSavedFilters };

package/src/filter-provider/FilterProvider.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, 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";
@@ -20,6 +20,17 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
         savedFiltersProp
     ]);
     const [dialog, setDialog] = useState(null);
+    const columnFilterColumnsRef = useRef(new Map());
+    const registerColumnFilterColumn = useCallback((key, column)=>{
+        const { current: columnsByKey } = columnFilterColumnsRef;
+        let columns = columnsByKey.get(key);
+        if (void 0 === columns) columnsByKey.set(key, columns = new Map());
+        columns.set(column.name, column);
+        return ()=>{
+            if (columns.get(column.name) === column) columns.delete(column.name);
+        };
+    }, []);
+    const getColumnFilterColumn = useCallback((key, columnName)=>columnFilterColumnsRef.current.get(key)?.get(columnName), []);
     const deleteFilter = useCallback((key, filterId)=>{
         const filterDescriptors = savedFilters.get(key);
         if (void 0 === filterDescriptors) throw Error(`[FilterProvider] deleteFilter, key ${key} not found`);
@@ -171,6 +182,8 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
     ]);
     return /*#__PURE__*/ jsxs(FilterContext.Provider, {
         value: {
+            getColumnFilterColumn,
+            registerColumnFilterColumn,
             onFilterMenuAction: handleFilterMenuAction,
             deleteFilter,
             saveFilter: handleSaveFilter,

package/src/index.js

@@ -13,7 +13,7 @@ export { useFilterContextMenu } from "./filter-context-menu/useFilterContextMenu
 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 { NULL_FILTER, useColumnFilterRegistry, 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";

package/types/column-filter/ColumnFilter.d.ts

@@ -1,6 +1,19 @@
 import { type SegmentedButtonGroupProps } from "@salt-ds/core";
 import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
 import { ColumnFilterHookProps } from "./useColumnFilter";
+import { type DateTimePattern } from "@vuu-ui/vuu-utils";
 export interface ColumnFilterProps extends ColumnFilterHookProps, Omit<SegmentedButtonGroupProps, "defaultValue">, Pick<DataItemEditControlProps, "TypeaheadProps" | "table" | "values" | "variant"> {
+    /**
+     * Temporal columns only. The date/time pattern used by the filter control,
+     * overriding any pattern configured on the column type. The pattern also
+     * determines the control rendered: a time picker for a time only pattern
+     * (with milliseconds if time is 'hh:mm:ss.ms'), otherwise a date picker.
+     * This allows a filter to use different formatting to the Table, e.g.
+     * the Table might display nanoseconds whilst the filter accepts a time
+     * of day with milliseconds. The column passed to change and commit
+     * handlers is the column with this pattern applied (see withDateTimePattern),
+     * so that filter values are interpreted consistently with the control.
+     */
+    pattern?: DateTimePattern;
 }
 export declare const ColumnFilter: import("react").ForwardRefExoticComponent<ColumnFilterProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/filter-container/FilterContainer.d.ts

@@ -9,7 +9,7 @@ export interface FilterContainerProps extends HTMLAttributes<HTMLDivElement>, Co
 export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps, "defaultValue" | "onCommit" | "value"> {
     defaultValue?: ColumnFilterValue;
 }
-export declare const FilterContainerColumnFilter: ({ column, operator, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * FilterContainer is a generic UI container for a collection of Filter
  * controls. Each control manages a single filter clause and the Filter

package/types/filter-context-menu/useFilterContextMenu.d.ts

@@ -1,6 +1,16 @@
 import type { TableContextMenuDef } from "@vuu-ui/vuu-table-types";
+import { type DateTimePattern } from "@vuu-ui/vuu-utils";
 export interface FilterContextMenuHookProps {
     filterColumns: string[] | "*";
+    /**
+     * The date/time pattern of the ColumnFilter for a temporal column, keyed by
+     * column name. A filter created from a cell value matches the value at the
+     * precision displayed by the ColumnFilter, e.g a ColumnFilter with time
+     * pattern 'hh:mm:ss.ms' filters the whole millisecond. Where no pattern is
+     * provided, the column descriptor registered by a FilterContainerColumnFilter
+     * for the column is used, if there is one, otherwise the Table column.
+     */
+    filterPatterns?: Record<string, DateTimePattern>;
     filterProviderKey?: string;
 }
-export declare const useFilterContextMenu: ({ filterColumns, filterProviderKey, }?: FilterContextMenuHookProps) => TableContextMenuDef;
+export declare const useFilterContextMenu: ({ filterColumns, filterPatterns, filterProviderKey, }?: FilterContextMenuHookProps) => TableContextMenuDef;

package/types/filter-provider/FilterContext.d.ts

@@ -8,6 +8,17 @@ export type FilterContextFilterMenuActionHandler = <T extends FilterAction = Fil
  */
 columns?: ColumnDescriptor[]) => void;
 export interface FilterContextProps {
+    /**
+     * Returns the column descriptor used by a ColumnFilter (within a
+     * FilterContainer) for the named column, if one is registered.
+     */
+    getColumnFilterColumn?: (key: string, columnName: string) => ColumnDescriptor | undefined;
+    /**
+     * Register the column descriptor used by a ColumnFilter, which may differ
+     * from the Table column descriptor, e.g. a different date/time pattern.
+     * Returns a function to unregister.
+     */
+    registerColumnFilterColumn?: (key: string, column: ColumnDescriptor) => () => void;
     deleteFilter: (key: string, filterId: string) => void;
     saveFilter: (key: string, name: string) => void;
     filterDescriptors: Map<string, FilterContainerFilterDescriptor[]>;
@@ -24,6 +35,14 @@ export declare const isNullFilter: (f?: FilterContainerFilterDescriptor) => bool
 export declare const NullFilterDescriptor: FilterContainerFilterDescriptor;
 export declare const EmptyFilterDescriptor: FilterContainerFilterDescriptor;
 export declare const FilterContext: import("react").Context<FilterContextProps>;
+/**
+ * Access the column descriptors registered by ColumnFilters
+ * (see FilterContainerColumnFilter).
+ */
+export declare function useColumnFilterRegistry(key?: string): {
+    getColumnFilterColumn: (columnName: string) => ColumnDescriptor | undefined;
+    registerColumnFilterColumn: (column: ColumnDescriptor) => (() => void) | undefined;
+};
 interface SavedFilterHookProps {
     availableColumns?: ColumnDescriptor[];
 }

package/types/index.d.ts

@@ -4,14 +4,14 @@ export * from "./filter-clause";
 export { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause";
 export { FilterContainer, FilterContainerColumnFilter, type FilterContainerColumnFilterProps, type FilterContainerProps, } from "./filter-container/FilterContainer";
 export type { FilterAppliedHandler } from "./filter-container/useFilterContainer";
-export { useFilterContextMenu } from "./filter-context-menu/useFilterContextMenu";
+export { type FilterContextMenuHookProps, useFilterContextMenu, } from "./filter-context-menu/useFilterContextMenu";
 export { FilterDisplay } from "./filter-display/FilterDisplay";
 export * from "./filter-editor";
 export { FilterPanel } from "./filter-panel/FilterPanel";
 export * from "./filter-pill";
 export { type FilterPermissions } from "./filter-pill/FilterMenu";
 export { FilterPillNext, type FilterPillNextProps, } from "./filter-pill/FilterPillNext";
-export { NULL_FILTER, useSavedFilters } from "./filter-provider/FilterContext";
+export { NULL_FILTER, useColumnFilterRegistry, useSavedFilters, } from "./filter-provider/FilterContext";
 export { FilterProvider } from "./filter-provider/FilterProvider";
 export * from "./filter-utils";
 export * from "./FilterModel";