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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.4.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.4.1",
-    "@vuu-ui/vuu-protocol-types": "3.4.1",
-    "@vuu-ui/vuu-table-types": "3.4.1",
-    "@vuu-ui/vuu-filter-types": "3.4.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.4.1",
-    "@vuu-ui/vuu-data-react": "3.4.1",
-    "@vuu-ui/vuu-filter-parser": "3.4.1",
-    "@vuu-ui/vuu-popups": "3.4.1",
-    "@vuu-ui/vuu-ui-controls": "3.4.1",
-    "@vuu-ui/vuu-table": "3.4.1",
-    "@vuu-ui/vuu-utils": "3.4.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/FilterAggregator.js

@@ -1,4 +1,4 @@
-import { getTypedRange, getTypedValue, isAndFilter, isBetweenFilter, isExtendedFilter, isMultiClauseFilter, isSingleValueFilter, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { EpochTimestamp, getTemporalInfo, getTypedValueForDescriptor, isAndFilter, isBetweenFilter, isExtendedFilter, isMultiClauseFilter, isSingleValueFilter } from "@vuu-ui/vuu-utils";
 import { ExtendedSingleValueFilterClause } from "./filter-container/ExtendedSingleValueFilterClause.js";
 function installExtendedFilters(filter, throwIfUndefined = false) {
     if (void 0 !== filter) if (isExtendedFilter(filter)) {
@@ -12,6 +12,47 @@ function installExtendedFilters(filter, throwIfUndefined = false) {
     else return filter;
     if (throwIfUndefined) throw Error("filter is undefined");
 }
+const getExtendedFilterOptions = (temporalInfo, extendedFilterOptions)=>{
+    if (temporalInfo?.kind === "time") return {
+        type: "TimeString",
+        date: "today",
+        encoding: temporalInfo.encoding,
+        timeZone: temporalInfo.timeZone,
+        ...extendedFilterOptions
+    };
+    return extendedFilterOptions;
+};
+const getFilterValue = (column, value, temporalInfo, options, throwIfInvalid)=>{
+    if ("" === value) {
+        if (throwIfInvalid && !temporalInfo) return getTypedValueForDescriptor(value, column, true);
+        return;
+    }
+    if (options?.type === "TimeString") return asFilterTimeString(value, temporalInfo, throwIfInvalid);
+    return getTypedValueForDescriptor(value, column, throwIfInvalid);
+};
+const timeOfDayPattern = /^\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?$/;
+const asFilterTimeString = (value, temporalInfo, throwIfInvalid)=>{
+    if (timeOfDayPattern.test(value)) return 5 === value.length ? `${value}:00` : value;
+    const timestamp = EpochTimestamp.fromWire(value, temporalInfo?.encoding ?? "epochMillis");
+    if (timestamp && /^\d+$/.test(value)) {
+        const { hour, minute, second } = timestamp.getFields(temporalInfo?.timeZone);
+        const pad = (n)=>`${n}`.padStart(2, "0");
+        return `${pad(hour)}:${pad(minute)}:${pad(second)}`;
+    }
+    if (throwIfInvalid) throw Error(`[FilterAggregator] value ${value} is not a valid time`);
+};
+const singleValueOps = [
+    "=",
+    "!=",
+    ">",
+    ">=",
+    "<",
+    "<=",
+    "contains",
+    "starts",
+    "ends"
+];
+const asSingleValueOp = (op)=>singleValueOps.includes(op) ? op : "=";
 class FilterAggregator {
     #filters = new Map();
     constructor(filter){
@@ -24,51 +65,29 @@ class FilterAggregator {
         });
     }
     add(column, value, op = "=", extendedFilterOptions) {
-        const { serverDataType = "string", type } = column;
+        const temporalInfo = getTemporalInfo(column);
+        const options = getExtendedFilterOptions(temporalInfo, extendedFilterOptions);
         const isInclusive = "between-inclusive" === op;
-        const dataType = isTypeDescriptor(type) ? type.name : type ?? serverDataType;
-        if (Array.isArray(value)) {
-            const [value1, value2] = getTypedRange(value, dataType, extendedFilterOptions);
-            if (void 0 !== value1 && void 0 !== value2) {
-                const filter = extendedFilterOptions ? {
-                    op: "and",
-                    filters: [
-                        new ExtendedSingleValueFilterClause(column.name, isInclusive ? ">=" : ">", value1, extendedFilterOptions),
-                        new ExtendedSingleValueFilterClause(column.name, isInclusive ? "<=" : "<", value2, extendedFilterOptions)
-                    ]
-                } : {
-                    op: "and",
-                    filters: [
-                        {
-                            column: column.name,
-                            op: ">",
-                            value: value1
-                        },
-                        {
-                            column: column.name,
-                            op: "<",
-                            value: value2
-                        }
-                    ]
-                };
-                this.#filters.set(column.name, filter);
-            } else if (void 0 !== value1) this.#filters.set(column.name, {
+        const createClause = (op, value)=>options ? new ExtendedSingleValueFilterClause(column.name, op, value, options) : {
                 column: column.name,
-                op: "=",
-                value: value1
-            });
-            else if (void 0 !== value2) this.#filters.set(column.name, {
-                column: column.name,
-                op: "<",
-                value: value2
+                op,
+                value
+            };
+        if (Array.isArray(value)) {
+            const [value1, value2] = value.map((v)=>getFilterValue(column, v, temporalInfo, options, false));
+            if (void 0 !== value1 && void 0 !== value2) this.#filters.set(column.name, {
+                op: "and",
+                filters: [
+                    createClause(isInclusive ? ">=" : ">", value1),
+                    createClause(isInclusive ? "<=" : "<", value2)
+                ]
             });
+            else if (void 0 !== value1) this.#filters.set(column.name, createClause("=", value1));
+            else if (void 0 !== value2) this.#filters.set(column.name, createClause(isInclusive ? "<=" : "<", value2));
         } else {
-            const typedValue = getTypedValue(value.toString(), dataType, true);
-            this.#filters.set(column.name, {
-                column: column.name,
-                op: "=",
-                value: typedValue
-            });
+            const typedValue = getFilterValue(column, value.toString(), temporalInfo, options, true);
+            if (void 0 === typedValue) this.#filters.delete(column.name);
+            else this.#filters.set(column.name, createClause(temporalInfo ? asSingleValueOp(op) : "=", typedValue));
         }
     }
     has({ name }) {

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-clause/operator-picker/operator-utils.js

@@ -1,4 +1,4 @@
-import { isNumericColumn, isTextColumn, isTimestampColumn } from "@vuu-ui/vuu-utils";
+import { isNumericColumn, isTemporalColumn, isTextColumn } from "@vuu-ui/vuu-utils";
 const textOperators = [
     "=",
     "in",
@@ -17,7 +17,7 @@ const numericOperators = [
 ];
 const getOperators = (column)=>{
     if (isTextColumn(column)) return textOperators;
-    if (isNumericColumn(column) || isTimestampColumn(column)) return numericOperators;
+    if (isNumericColumn(column) || isTemporalColumn(column)) return numericOperators;
     throw Error("getOperators only supports text and numeric columns");
 };
 export { getOperators, numericOperators, textOperators };

package/src/filter-clause/value-editors/FilterClauseValueEditor.js

@@ -2,26 +2,29 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { FilterClauseValueEditorNumber } from "./FilterClauseValueEditorNumber.js";
 import { FilterClauseValueEditorText } from "./FilterClauseValueEditorText.js";
-import { isDateTimeDataValue, isTimeDataValue } from "@vuu-ui/vuu-utils";
+import { getTemporalInfo } from "@vuu-ui/vuu-utils";
 import { forwardRef } from "react";
 import { FilterClauseValueEditorDate } from "./FilterClauseValueEditorDate.js";
 import { FilterClauseValueEditorTime } from "./FilterClauseValueEditorTime.js";
 const classBase = "vuuFilterClause";
 const FilterClauseValueEditor_FilterClauseValueEditor = /*#__PURE__*/ forwardRef(function({ selectedColumn, operator, inputProps, onChangeValue, onDeselectValue, onOpenChange, table, value, dropdownOnAutofocus = true }, forwardedRef) {
     if (void 0 === selectedColumn || void 0 === operator) return null;
-    if (isDateTimeDataValue(selectedColumn)) return /*#__PURE__*/ jsx(FilterClauseValueEditorDate, {
+    const temporalInfo = getTemporalInfo(selectedColumn);
+    if (temporalInfo?.kind === "time") return /*#__PURE__*/ jsx(FilterClauseValueEditorTime, {
         inputProps: inputProps,
         className: clsx(`${classBase}Field`, `${classBase}Value`),
         value: value,
         operator: operator,
-        onChangeValue: onChangeValue
+        onChangeValue: onChangeValue,
+        temporalInfo: temporalInfo
     });
-    if (isTimeDataValue(selectedColumn)) return /*#__PURE__*/ jsx(FilterClauseValueEditorTime, {
+    if (temporalInfo) return /*#__PURE__*/ jsx(FilterClauseValueEditorDate, {
         inputProps: inputProps,
         className: clsx(`${classBase}Field`, `${classBase}Value`),
         value: value,
         operator: operator,
-        onChangeValue: onChangeValue
+        onChangeValue: onChangeValue,
+        temporalInfo: temporalInfo
     });
     switch(selectedColumn.serverDataType){
         case "string":

package/src/filter-clause/value-editors/FilterClauseValueEditorDate.js

@@ -1,55 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { getLocalTimeZone } from "@internationalized/date";
-import { toCalendarDate } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+import { EpochTimestamp } from "@vuu-ui/vuu-utils";
 import { VuuDatePicker } from "@vuu-ui/vuu-ui-controls";
-const FilterClauseValueEditorDate = (props)=>{
-    const { inputProps, className, onChangeValue, operator, value } = props;
-    const toEpochMilliS = getEpochMillisConverter(operator);
-    const [date, setDate] = useState(()=>getInitialState(value));
-    const handleCommit = useCallback((e, selectedDateInputValue)=>{
-        console.log("change date");
-        if (selectedDateInputValue) {
-            const dateValue = toCalendarDate(new Date(selectedDateInputValue));
-            setDate(dateValue);
-            if (selectedDateInputValue) onChangeValue(toEpochMilliS(dateValue));
-        }
+const FilterClauseValueEditorDate = ({ className, inputProps, onChangeValue, temporalInfo, value })=>{
+    const { encoding, timeZone } = temporalInfo;
+    const handleCommit = useCallback((_e, startOfDayMillis)=>{
+        const timestamp = EpochTimestamp.fromMillis(startOfDayMillis);
+        onChangeValue("epochNanos" === encoding ? timestamp.toWire("epochNanos") : timestamp.toWire("epochMillis"));
     }, [
-        onChangeValue,
-        toEpochMilliS
-    ]);
-    const onBlur = useCallback(()=>{
-        date && onChangeValue(toEpochMilliS(date));
-    }, [
-        date,
-        onChangeValue,
-        toEpochMilliS
+        encoding,
+        onChangeValue
     ]);
     return /*#__PURE__*/ jsx(VuuDatePicker, {
         "data-field": "value",
         inputProps: inputProps,
         className: className,
-        onBlur: onBlur,
         onCommit: handleCommit,
-        selectedDate: date
+        timeZone: timeZone,
+        value: EpochTimestamp.fromWire(value, encoding)
     });
 };
-function getInitialState(value) {
-    return value ? toCalendarDate(new Date(value)) : void 0;
-}
-const getEpochMillisConverter = (op)=>(date, timezone = getLocalTimeZone())=>{
-        const d = date.toDate(timezone);
-        switch(op){
-            case ">":
-            case "<=":
-                d.setHours(23, 59, 59, 999);
-                return d.getTime();
-            case ">=":
-            case "<":
-            case "=":
-            case "!=":
-                d.setHours(0, 0, 0, 0);
-                return d.getTime();
-        }
-    };
 export { FilterClauseValueEditorDate };

package/src/filter-clause/value-editors/FilterClauseValueEditorTime.js

@@ -1,53 +1,27 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { getLocalTimeZone } from "@internationalized/date";
-import { toCalendarDate } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+import { EpochTimestamp, isValidTimeString } from "@vuu-ui/vuu-utils";
 import { VuuTimePicker } from "@vuu-ui/vuu-ui-controls";
-const FilterClauseValueEditorTime = (props)=>{
-    const { className, onChangeValue, operator, value } = props;
-    const toEpochMilliS = getEpochMillisConverter(operator);
-    const [date, setDate] = useState(()=>getInitialState(value));
-    const handleCommit = useCallback((e, selectedDateInputValue)=>{
-        console.log("change time");
-        if (selectedDateInputValue) {
-            const dateValue = toCalendarDate(new Date(selectedDateInputValue));
-            setDate(dateValue);
-            if (selectedDateInputValue) onChangeValue(toEpochMilliS(dateValue));
-        }
-    }, [
-        onChangeValue,
-        toEpochMilliS
-    ]);
-    const onBlur = useCallback(()=>{
-        date && onChangeValue(toEpochMilliS(date));
+const pad = (n)=>`${n}`.padStart(2, "0");
+const toTimeString = (value, { encoding, timeZone })=>{
+    if (isValidTimeString(value)) return value;
+    const timestamp = EpochTimestamp.fromWire(value, encoding);
+    if (timestamp) {
+        const { hour, minute, second } = timestamp.getFields(timeZone);
+        return `${pad(hour)}:${pad(minute)}:${pad(second)}`;
+    }
+};
+const FilterClauseValueEditorTime = ({ className, onChangeValue, temporalInfo, value })=>{
+    const handleCommit = useCallback((_e, timeString)=>{
+        if (isValidTimeString(timeString)) onChangeValue(timeString);
     }, [
-        date,
-        onChangeValue,
-        toEpochMilliS
+        onChangeValue
     ]);
     return /*#__PURE__*/ jsx(VuuTimePicker, {
         "data-field": "value",
         className: className,
-        onBlur: onBlur,
+        defaultValue: toTimeString(value, temporalInfo),
         onCommit: handleCommit
     });
 };
-function getInitialState(value) {
-    return value ? toCalendarDate(new Date(value)) : void 0;
-}
-const getEpochMillisConverter = (op)=>(date, timezone = getLocalTimeZone())=>{
-        const d = date.toDate(timezone);
-        switch(op){
-            case ">":
-            case "<=":
-                d.setHours(23, 59, 59, 999);
-                return d.getTime();
-            case ">=":
-            case "<":
-            case "=":
-            case "!=":
-                d.setHours(0, 0, 0, 0);
-                return d.getTime();
-        }
-    };
 export { FilterClauseValueEditorTime };

package/src/filter-container/ExtendedSingleValueFilterClause.js

@@ -1,5 +1,6 @@
-import { Time, isValidTimeString } from "@vuu-ui/vuu-utils";
+import { getDefaultTimeZone, isValidTimeString, temporalFilterAsQuery } from "@vuu-ui/vuu-utils";
 const isTimeToday = (options)=>"TimeString" === options.type && "today" === options.date;
+const timeStringWithFraction = /^\d{2}:\d{2}:\d{2}(?:\.\d{1,9})?$/;
 class ExtendedSingleValueFilterClause {
     column;
     op;
@@ -12,14 +13,27 @@ class ExtendedSingleValueFilterClause {
         this.#options = extendedOptions;
     }
     name;
+    get extendedOptions() {
+        return this.#options;
+    }
     asQuery() {
         const { column, op, value } = this;
-        if (isTimeToday(this.#options)) if (isValidTimeString(value)) {
-            const timeValue = +Time(value).asDate();
-            if (">=" === op) return `${column} > ${timeValue - 1}`;
-            if ("<=" === op) return `${column} < ${timeValue + 1}`;
-            return `${column} ${op} ${timeValue}`;
-        } else throw Error(`[ExtendedSingleValueFilterClause] invalid TimeStrong ${value}`);
+        const { date, encoding = "epochMillis", timeZone } = this.#options;
+        if ("TimeString" === this.#options.type) if ("string" == typeof value && (isValidTimeString(value) || timeStringWithFraction.test(value))) {
+            const temporalInfo = {
+                kind: "time",
+                encoding,
+                precision: "epochNanos" === encoding ? "ns" : "ms",
+                timeZone: timeZone ?? getDefaultTimeZone()
+            };
+            return temporalFilterAsQuery({
+                column,
+                op,
+                value
+            }, temporalInfo, {
+                date: date
+            });
+        } else throw Error(`[ExtendedSingleValueFilterClause] invalid TimeString ${value}`);
         throw Error("[ExtendedSingleValueFilterClause] unhandled extended filter type");
     }
     toJSON() {

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, isBetweenOperator } 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,
@@ -25,10 +39,7 @@ const FilterContainerColumnFilter = ({ column, operator = "=", variant, ...props
         if (currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter)) {
             currentFilterRef.current = currentFilter;
             if (isNullFilter(currentFilter) && notEmpty(valueRef.current)) {
-                if (Array.isArray(valueRef.current)) if ("time" === column.type) valueRef.current = [
-                    "00:00:00",
-                    "23:59:59"
-                ];
+                if (Array.isArray(valueRef.current)) if (isTimeDataValue(column)) valueRef.current = getDefaultTimeRange(column);
                 else valueRef.current = [
                     "",
                     ""

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-pill/getFilterTooltipText.js

@@ -1,4 +1,4 @@
-import { dateTimePattern, defaultPatternsByType, filterAsQuery, formatDate, isDateTimeDataValue, isMultiClauseFilter } from "@vuu-ui/vuu-utils";
+import { filterAsQuery, formatTemporalFilterValue, isMultiClauseFilter, isTemporal } from "@vuu-ui/vuu-utils";
 import { filterClauses } from "../filter-utils.js";
 function applyFormatter(filter, formatter) {
     if ("value" in filter) return {
@@ -12,13 +12,7 @@ function applyFormatter(filter, 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);
-    }
+    if (column && isTemporal(column)) return applyFormatter(filter, (value)=>formatTemporalFilterValue(value, column));
     return filter;
 }
 const getFilterAsFormattedText = (columnsByName)=>(filter)=>{

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 };