@vuu-ui/vuu-filters 4.0.0-alpha.9 → 4.0.0-beta.2

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

@@ -1,14 +1,39 @@
-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, getColumnFilterPattern } = 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 columnFilterPattern = getColumnFilterPattern(column);
+            const columnFilterColumn = pattern ? void 0 : getColumnFilterColumn(column.name) ?? (columnFilterPattern ? withDateTimePattern(column, columnFilterPattern) : void 0);
+            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,
+        getColumnFilterPattern
+    ]);
     useMemo(()=>{
         if (!filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)) filterAggregatorRef.current = currentFilter.filter ? new FilterAggregator(currentFilter.filter) : new FilterAggregator();
     }, [
@@ -18,13 +43,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 +85,8 @@ const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defau
         ];
         return [];
     }, [
-        filterColumns
+        filterColumns,
+        getCellFilter
     ]);
     const menuActionHandler = useCallback((menuItemId, options)=>{
         if (!options) return false;
@@ -73,8 +99,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 +110,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 +122,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,25 @@ 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, getColumnFilterPattern, registerColumnFilterColumn } = useContext(FilterContext);
+    const getColumn = useCallback((columnName)=>getColumnFilterColumn?.(key, columnName), [
+        getColumnFilterColumn,
+        key
+    ]);
+    const register = useCallback((column)=>registerColumnFilterColumn?.(key, column), [
+        key,
+        registerColumnFilterColumn
+    ]);
+    const getPattern = useCallback((column)=>getColumnFilterPattern?.(column), [
+        getColumnFilterPattern
+    ]);
+    return {
+        getColumnFilterColumn: getColumn,
+        getColumnFilterPattern: getPattern,
+        registerColumnFilterColumn: register
+    };
+}
 function useSavedFilters(key = "GLOBAL", props) {
     const { onFilterMenuAction, filterDescriptors, saveFilter, setCurrentFilter, filterNameMaxLength } = useContext(FilterContext);
     const handleFilterMenuAction = useCallback((filterId, filterAction)=>{
@@ -68,4 +87,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";
@@ -14,12 +14,27 @@ const mapToRecord = (savedFilters)=>{
     });
     return record;
 };
-const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
+const FilterProvider = ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
     const [, forceRefresh] = useState({});
     const savedFilters = useMemo(()=>savedFiltersProp ? new Map(Object.entries(savedFiltersProp)) : new Map(), [
         savedFiltersProp
     ]);
     const [dialog, setDialog] = useState(null);
+    const 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 getColumnFilterPattern = useCallback(({ name, serverDataType })=>columnFilterPatterns?.[name] ?? (serverDataType ? columnTypeFilterPatterns?.[serverDataType] : void 0), [
+        columnFilterPatterns,
+        columnTypeFilterPatterns
+    ]);
+    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 +186,9 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
     ]);
     return /*#__PURE__*/ jsxs(FilterContext.Provider, {
         value: {
+            getColumnFilterColumn,
+            getColumnFilterPattern,
+            registerColumnFilterColumn,
             onFilterMenuAction: handleFilterMenuAction,
             deleteFilter,
             saveFilter: handleSaveFilter,

package/src/filter-utils.js

@@ -1,4 +1,4 @@
-import { Time, extractFilterForColumn, filtersAreEqual, isAndFilter, isBetweenFilter, isInFilter, isMultiClauseFilter, isMultiValueFilter, isOrFilter, isSingleValueFilter, isTimeDataValue, partition } from "@vuu-ui/vuu-utils";
+import { extractFilterForColumn, filtersAreEqual, formatTemporalFilterValue, isAndFilter, isBetweenFilter, isInFilter, isMultiClauseFilter, isMultiValueFilter, isOrFilter, isSingleValueFilter, isTemporal, partition } from "@vuu-ui/vuu-utils";
 const AND = "and";
 const EQUALS = "=";
 const GREATER_THAN = ">";
@@ -260,6 +260,7 @@ const getNumericFilter = (column, op, value)=>{
         value
     };
 };
+const formatValueForDisplay = (value, column)=>isTemporal(column) ? formatTemporalFilterValue(value, column) : value.toString();
 const getFilterClausesForDisplay = (filter, columns = [], clauses = [])=>{
     if (void 0 === filter) ;
     else if (isSingleValueFilter(filter)) {
@@ -268,7 +269,7 @@ const getFilterClausesForDisplay = (filter, columns = [], clauses = [])=>{
             const { name, label = name } = column;
             clauses.push([
                 label,
-                filter.value.toString()
+                formatValueForDisplay(filter.value, column)
             ]);
         } else clauses.push([
             filter.column,
@@ -277,17 +278,11 @@ const getFilterClausesForDisplay = (filter, columns = [], clauses = [])=>{
     } 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) {
+        if (column) {
             const { name, label = name } = column;
             clauses.push([
                 label,
-                `${f1.value} - ${f2.value}`
+                `${formatValueForDisplay(f1.value, column)} - ${formatValueForDisplay(f2.value, column)}`
             ]);
         } else clauses.push([
             f1.column,

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/src/quick-filters/useQuickFilters.js

@@ -1,4 +1,4 @@
-import { isNumericColumn, queryClosest } from "@vuu-ui/vuu-utils";
+import { getTypedValueForDescriptor, isNumericColumn, isTemporalColumn, queryClosest } from "@vuu-ui/vuu-utils";
 import { useCallback, useMemo, useRef } from "react";
 const findColumn = (columns, name)=>{
     const column = columns?.find((col)=>col.name === name);
@@ -38,6 +38,11 @@ const createFilterClause = ([identifier, value], availableColumns)=>{
     } else throw Error("columns must be provided for find operation");
     {
         const column = findColumn(availableColumns, identifier);
+        if (isTemporalColumn(column)) return {
+            column: identifier,
+            op: "=",
+            value: getTypedValueForDescriptor(value, column, true)
+        };
         if (!isNumericColumn(column)) return {
             column: identifier,
             op: "contains",

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tab, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
+import { Tab, TabBar, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
 import clsx from "clsx";
 import { FilterPanel } from "../filter-panel/FilterPanel.js";
 import { SavedFilterPanel } from "../saved-filters/SavedFilterPanel.js";
@@ -10,22 +10,24 @@ const TabbedFilterContainer = ({ SavedFilterPanelProps, children, className, fil
         children: /*#__PURE__*/ jsxs(Tabs, {
             defaultValue: "ad-hoc-filter",
             children: [
-                /*#__PURE__*/ jsxs(TabList, {
-                    appearance: "transparent",
-                    children: [
-                        /*#__PURE__*/ jsx(Tab, {
-                            value: "ad-hoc-filter",
-                            children: /*#__PURE__*/ jsx(TabTrigger, {
-                                children: filterTabLabel
-                            })
-                        }, "ad-hoc-filter"),
-                        /*#__PURE__*/ jsx(Tab, {
-                            value: "saved-filters",
-                            children: /*#__PURE__*/ jsx(TabTrigger, {
-                                children: savedFilterLabel
-                            })
-                        }, "saved-filters")
-                    ]
+                /*#__PURE__*/ jsx(TabBar, {
+                    children: /*#__PURE__*/ jsxs(TabList, {
+                        appearance: "transparent",
+                        children: [
+                            /*#__PURE__*/ jsx(Tab, {
+                                value: "ad-hoc-filter",
+                                children: /*#__PURE__*/ jsx(TabTrigger, {
+                                    children: filterTabLabel
+                                })
+                            }, "ad-hoc-filter"),
+                            /*#__PURE__*/ jsx(Tab, {
+                                value: "saved-filters",
+                                children: /*#__PURE__*/ jsx(TabTrigger, {
+                                    children: savedFilterLabel
+                                })
+                            }, "saved-filters")
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsx(TabPanel, {
                     value: "ad-hoc-filter",

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

@@ -3,6 +3,14 @@ const css = `
   & .vuuToggleFilter-onlyAvailableValue:not([aria-checked="true"], :hover) {
     background-color: var(--vuuToggleFilter-implicitActive-bg, var(--salt-actionable-bold-background));
   }
+
+  & .vuuToggleFilter-unavailableValue:not([aria-checked="true"]) {
+    background: var(--toggleButton-background);
+    border-color: var(--toggleButton-borderColor);
+    color: var(--toggleButton-text-color);
+    cursor: var(--vuuToggleFilter-unavailableValue-cursor, var(--salt-cursor-disabled));
+    opacity: var(--vuuToggleFilter-unavailableValue-opacity, .4);
+  }
 }
 
 

package/src/toggle-filter/ToggleFilter.js

@@ -1,12 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { ToggleButton, ToggleButtonGroup, Tooltip } 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)=>{
+const toToggleButtonValue = (value)=>"boolean" == typeof value ? `${value}` : value;
+const getValues = (defaultValueProp, valueProp)=>{
+    const defaultValue = toToggleButtonValue(defaultValueProp);
+    const value = toToggleButtonValue(valueProp);
     if (void 0 === defaultValue && void 0 === value) return [
         "all"
     ];
@@ -24,24 +27,32 @@ const getValues = (defaultValue, value)=>{
     ];
 };
 const classBase = "vuuToggleFilter";
-const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
+const NO_MATCHING_DATA = "No matching data";
+const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, labels, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-toggle-filter",
         css: ToggleFilter_0,
         window: targetWindow
     });
+    if (void 0 !== labels && labels.length !== values.length) throw Error("[ToggleFilter] labels must have the same number of items as values");
     const [defaultValue, value] = getValues(defaultValueProp, valueProp);
-    const onlyAvailableValue = useToggleFilter({
+    const stringValues = values.map(String);
+    const { onlyAvailableValue, unavailableValues } = useToggleFilter({
         column,
         table,
-        values
+        values: stringValues
     });
     const handleChange = useCallback((e)=>{
         const value = e.currentTarget.value;
-        "all" === value ? onCommit(e, "") : onCommit(e, value);
+        if ("all" === value) onCommit(e, "");
+        else {
+            const toggleValue = values.find((v)=>`${v}` === value);
+            onCommit(e, "boolean" == typeof toggleValue ? toggleValue : value);
+        }
     }, [
-        onCommit
+        onCommit,
+        values
     ]);
     return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
         ...ToggleButtonGroupProps,
@@ -53,15 +64,23 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
         children: [
             /*#__PURE__*/ jsx(ToggleButton, {
                 value: "all",
-                children: "ALL"
+                children: "All"
             }, "all"),
-            values.map((toggleValue)=>/*#__PURE__*/ jsx(ToggleButton, {
-                    className: clsx({
-                        [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue
-                    }),
-                    value: toggleValue,
-                    children: toggleValue
-                }, toggleValue))
+            stringValues.map((toggleValue, i)=>{
+                const unavailable = unavailableValues.includes(toggleValue);
+                return /*#__PURE__*/ jsx(Tooltip, {
+                    content: NO_MATCHING_DATA,
+                    disabled: !unavailable,
+                    children: /*#__PURE__*/ jsx(ToggleButton, {
+                        className: clsx({
+                            [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue,
+                            [`${classBase}-unavailableValue`]: unavailable
+                        }),
+                        value: toggleValue,
+                        children: labels?.[i] ?? toggleValue
+                    })
+                }, toggleValue);
+            })
         ]
     });
 });

package/src/toggle-filter/useToggleFilter.js

@@ -1,57 +1,81 @@
-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";
+import { parseFilter } from "@vuu-ui/vuu-filter-parser";
+import { extractFilterForColumn, getVuuTable, useDataSource } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 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 hasFilterOnColumn = (filterSpec, column)=>{
+    if (void 0 === filterSpec || "" === filterSpec.filter) return false;
+    const filter = filterSpec.filterStruct ?? parseFilter(filterSpec.filter);
+    return void 0 !== extractFilterForColumn(filter, column);
 };
 const useToggleFilter = ({ column, table, values })=>{
-    const { currentFilter } = useSavedFilters();
-    const currentFilterRef = useRef(currentFilter.filter);
-    const [typeaheadValues, setTypeaheadValues] = useState([]);
+    const dataSource = useDataSource(false);
+    const [typeaheadValues, setTypeaheadValues] = useState(void 0);
     const getSuggestions = useTypeaheadSuggestions();
-    const refreshSuggestions = useCallback((table)=>{
-        const vuuTable = getVuuTable(table);
+    const requestIdRef = useRef(0);
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    const valuesKey = values.join("\u0000");
+    const vuuTable = table ? getVuuTable(table) : void 0;
+    const tableModule = vuuTable?.module;
+    const tableName = vuuTable?.table;
+    const checkAvailability = useCallback(()=>{
+        if (void 0 === tableModule || void 0 === tableName || void 0 === dataSource) return;
+        if (hasFilterOnColumn(dataSource.filter, column)) return;
+        const requestId = ++requestIdRef.current;
         const params = [
-            vuuTable,
+            {
+                module: tableModule,
+                table: tableName
+            },
             column
         ];
         getSuggestions(params).then((suggestions)=>{
-            if (false === suggestions) setTypeaheadValues([]);
-            else {
-                assertValid(values, suggestions);
-                setTypeaheadValues(suggestions);
-            }
+            if (requestId !== requestIdRef.current || false === suggestions) return;
+            assertValid(valuesRef.current, suggestions);
+            setTypeaheadValues(suggestions);
         });
     }, [
         column,
+        dataSource,
         getSuggestions,
-        values
+        tableModule,
+        tableName
     ]);
-    useMemo(()=>{
-        if (table) refreshSuggestions(table);
+    useEffect(()=>{
+        checkAvailability();
     }, [
-        refreshSuggestions,
-        table
+        checkAvailability
     ]);
-    useMemo(()=>{
-        const { current: filter } = currentFilterRef;
-        if (table && typeaheadRefreshRequired(filter, currentFilter.filter)) refreshSuggestions(table);
-        currentFilterRef.current = currentFilter.filter;
+    useEffect(()=>{
+        if (dataSource) {
+            const handleConfigChange = (_config, _range, _confirmed, configChanges)=>{
+                if (configChanges?.filterChanged) checkAvailability();
+            };
+            dataSource.on("config", handleConfigChange);
+            return ()=>{
+                dataSource.removeListener("config", handleConfigChange);
+            };
+        }
     }, [
-        currentFilter.filter,
-        refreshSuggestions,
-        table
+        checkAvailability,
+        dataSource
+    ]);
+    return useMemo(()=>{
+        if (void 0 === typeaheadValues) return {
+            unavailableValues: []
+        };
+        return {
+            onlyAvailableValue: 1 === typeaheadValues.length ? typeaheadValues[0] : void 0,
+            unavailableValues: valuesRef.current.filter((value)=>!typeaheadValues.includes(value))
+        };
+    }, [
+        typeaheadValues,
+        valuesKey
     ]);
-    const [firstValue] = typeaheadValues;
-    return 1 === typeaheadValues.length ? firstValue : void 0;
 };
 export { useToggleFilter };

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

@@ -1,6 +1,19 @@
 import { type SegmentedButtonGroupProps } from "@salt-ds/core";
-import { type DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
-import { type ColumnFilterHookProps } from "./useColumnFilter";
-export interface ColumnFilterProps extends ColumnFilterHookProps, Omit<SegmentedButtonGroupProps, "defaultValue">, Pick<DataItemEditControlProps, "TypeaheadProps" | "table" | "values" | "variant"> {
+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" | "labels" | "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/custom-filters/CustomFilters.d.ts

@@ -4,4 +4,4 @@ import { type FilterBarProps } from "../filter-bar";
 export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "vuuTable"> {
     columnDescriptors: readonly ColumnDescriptor[];
 }
-export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react").JSX.Element;
+export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-bar/FilterBar.d.ts

@@ -30,4 +30,4 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
     vuuTable?: VuuTable;
     variant?: FilterBarVariant;
 }
-export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react").JSX.Element;
+export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-bar/FilterBarMenu.d.ts

@@ -1 +1 @@
-export declare const FilterBarMenu: () => import("react").JSX.Element;
+export declare const FilterBarMenu: () => import("react/jsx-runtime").JSX.Element;

package/types/filter-clause/FilterClause.d.ts

@@ -13,4 +13,4 @@ export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>,
     dropdownOnAutofocus?: boolean;
     vuuTable: VuuTable;
 }
-export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react").JSX.Element;
+export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-clause/value-editors/FilterClauseValueEditorDate.d.ts

@@ -1,9 +1,20 @@
+import { type TemporalInfo } from "@vuu-ui/vuu-utils";
 import type { NumericFilterClauseOp } from "@vuu-ui/vuu-filter-types";
 import type { FilterClauseValueEditor } from "../filterClauseTypes";
 interface FilterClauseValueEditorDateProps extends Pick<FilterClauseValueEditor, "onChangeValue" | "inputProps"> {
     className?: string;
-    value: number | undefined;
     operator: NumericFilterClauseOp;
+    temporalInfo: TemporalInfo;
+    /**
+     * epoch value in the column encoding (millis number or nanos string)
+     */
+    value: number | string | undefined;
 }
-export declare const FilterClauseValueEditorDate: (props: FilterClauseValueEditorDateProps) => import("react").JSX.Element;
+/**
+ * Date filter value editor. The value emitted is the start of the selected day
+ * (in the column time zone), in the column encoding. When the filter query is
+ * created, the clause is applied to the whole day e.g. '=' selects all values
+ * on that day, '>' selects all values after that day (see temporalFilterAsQuery).
+ */
+export declare const FilterClauseValueEditorDate: ({ className, inputProps, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorDateProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/filter-clause/value-editors/FilterClauseValueEditorText.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from "react";
-import type { FilterClauseValueEditor } from "../filterClauseTypes";
+import { HTMLAttributes } from "react";
+import { FilterClauseValueEditor } from "../filterClauseTypes";
 export interface FilterClauseTextValueEditorProps extends FilterClauseValueEditor, HTMLAttributes<HTMLDivElement> {
     "data-field"?: string;
     operator: string;