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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0-beta.2",
+  "version": "3.5.0-beta.4",
   "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.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"
+    "@vuu-ui/vuu-data-types": "3.5.0-beta.4",
+    "@vuu-ui/vuu-protocol-types": "3.5.0-beta.4",
+    "@vuu-ui/vuu-table-types": "3.5.0-beta.4",
+    "@vuu-ui/vuu-filter-types": "3.5.0-beta.4"
   },
   "dependencies": {
-    "@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",
+    "@vuu-ui/vuu-context-menu": "3.5.0-beta.4",
+    "@vuu-ui/vuu-data-react": "3.5.0-beta.4",
+    "@vuu-ui/vuu-filter-parser": "3.5.0-beta.4",
+    "@vuu-ui/vuu-popups": "3.5.0-beta.4",
+    "@vuu-ui/vuu-ui-controls": "3.5.0-beta.4",
+    "@vuu-ui/vuu-table": "3.5.0-beta.4",
+    "@vuu-ui/vuu-utils": "3.5.0-beta.4",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

package/src/filter-container/FilterContainer.js

@@ -10,7 +10,9 @@ 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: columnProp, operator = "=", pattern, variant, ...props })=>{
+const FilterContainerColumnFilter = ({ column: columnProp, operator = "=", pattern: patternProp, variant, ...props })=>{
+    const { getColumnFilterPattern } = useColumnFilterRegistry();
+    const pattern = patternProp ?? getColumnFilterPattern(columnProp.name);
     const { date, time } = pattern ?? {};
     const column = useMemo(()=>withDateTimePattern(columnProp, date || time ? {
             date,

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

@@ -8,13 +8,14 @@ const defaultProps = {
 };
 const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProviderKey } = defaultProps)=>{
     const { currentFilter, clearCurrentFilter, setCurrentFilter } = useSavedFilters(filterProviderKey);
-    const { getColumnFilterColumn } = useColumnFilterRegistry(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 columnFilterColumn = pattern ? void 0 : getColumnFilterColumn(column.name);
+            const columnFilterPattern = getColumnFilterPattern(column.name);
+            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 {
@@ -30,7 +31,8 @@ const useFilterContextMenu = ({ filterColumns = "*", filterPatterns, filterProvi
         };
     }, [
         filterPatterns,
-        getColumnFilterColumn
+        getColumnFilterColumn,
+        getColumnFilterPattern
     ]);
     useMemo(()=>{
         if (!filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)) filterAggregatorRef.current = currentFilter.filter ? new FilterAggregator(currentFilter.filter) : new FilterAggregator();

package/src/filter-provider/FilterContext.js

@@ -32,7 +32,7 @@ const FilterContext = createContext({
     setCurrentFilter: ()=>console.warn("[FilterContext] setCurrentFilter, no FilterProvider has been configured")
 });
 function useColumnFilterRegistry(key = "GLOBAL") {
-    const { getColumnFilterColumn, registerColumnFilterColumn } = useContext(FilterContext);
+    const { getColumnFilterColumn, getColumnFilterPattern, registerColumnFilterColumn } = useContext(FilterContext);
     const getColumn = useCallback((columnName)=>getColumnFilterColumn?.(key, columnName), [
         getColumnFilterColumn,
         key
@@ -41,8 +41,12 @@ function useColumnFilterRegistry(key = "GLOBAL") {
         key,
         registerColumnFilterColumn
     ]);
+    const getPattern = useCallback((columnName)=>getColumnFilterPattern?.(columnName), [
+        getColumnFilterPattern
+    ]);
     return {
         getColumnFilterColumn: getColumn,
+        getColumnFilterPattern: getPattern,
         registerColumnFilterColumn: register
     };
 }

package/src/filter-provider/FilterProvider.js

@@ -14,7 +14,7 @@ const mapToRecord = (savedFilters)=>{
     });
     return record;
 };
-const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
+const FilterProvider = ({ children, columnFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength })=>{
     const [, forceRefresh] = useState({});
     const savedFilters = useMemo(()=>savedFiltersProp ? new Map(Object.entries(savedFiltersProp)) : new Map(), [
         savedFiltersProp
@@ -30,6 +30,9 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
             if (columns.get(column.name) === column) columns.delete(column.name);
         };
     }, []);
+    const getColumnFilterPattern = useCallback((columnName)=>columnFilterPatterns?.[columnName], [
+        columnFilterPatterns
+    ]);
     const getColumnFilterColumn = useCallback((key, columnName)=>columnFilterColumnsRef.current.get(key)?.get(columnName), []);
     const deleteFilter = useCallback((key, filterId)=>{
         const filterDescriptors = savedFilters.get(key);
@@ -183,6 +186,7 @@ const FilterProvider = ({ children, onFiltersSaved, savedFilters: savedFiltersPr
     return /*#__PURE__*/ jsxs(FilterContext.Provider, {
         value: {
             getColumnFilterColumn,
+            getColumnFilterPattern,
             registerColumnFilterColumn,
             onFilterMenuAction: handleFilterMenuAction,
             deleteFilter,

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

@@ -2,14 +2,20 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import { type ColumnFilterContainerHookProps } from "./useFilterContainer";
 import { ColumnFilterValue } from "@vuu-ui/vuu-filter-types";
 import { ColumnFilterProps } from "../column-filter/ColumnFilter";
+import { type DateTimePattern } from "@vuu-ui/vuu-utils";
 export interface FilterContainerProps extends HTMLAttributes<HTMLDivElement>, ColumnFilterContainerHookProps {
     children: ReactNode;
     filterProviderKey?: string;
 }
 export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps, "defaultValue" | "onCommit" | "value"> {
     defaultValue?: ColumnFilterValue;
+    /**
+     * See ColumnFilter pattern. Defaults to the pattern configured for the
+     * column by FilterProvider columnFilterPatterns, if any.
+     */
+    pattern?: DateTimePattern;
 }
-export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, 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-provider/FilterContext.d.ts

@@ -1,6 +1,7 @@
 import { FilterContainerFilter, FilterContainerFilterDescriptor, FilterContainerFilterDescriptorWithFilter } from "@vuu-ui/vuu-filter-types";
 import { FilterAction } from "../filter-pill/FilterMenu";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import type { DateTimePattern } from "@vuu-ui/vuu-utils";
 export declare const filterDescriptorHasFilter: (f: FilterContainerFilterDescriptor) => f is FilterContainerFilterDescriptorWithFilter;
 export type FilterContextFilterMenuActionHandler = <T extends FilterAction = FilterAction>(key: string, filterId: string, filterAction: T, 
 /**
@@ -13,6 +14,12 @@ export interface FilterContextProps {
      * FilterContainer) for the named column, if one is registered.
      */
     getColumnFilterColumn?: (key: string, columnName: string) => ColumnDescriptor | undefined;
+    /**
+     * The date/time pattern of the ColumnFilter for the named column, as
+     * configured by FilterProvider columnFilterPatterns. Available whether or
+     * not the ColumnFilter is mounted.
+     */
+    getColumnFilterPattern?: (columnName: string) => DateTimePattern | undefined;
     /**
      * Register the column descriptor used by a ColumnFilter, which may differ
      * from the Table column descriptor, e.g. a different date/time pattern.
@@ -41,6 +48,7 @@ export declare const FilterContext: import("react").Context<FilterContextProps>;
  */
 export declare function useColumnFilterRegistry(key?: string): {
     getColumnFilterColumn: (columnName: string) => ColumnDescriptor | undefined;
+    getColumnFilterPattern: (columnName: string) => DateTimePattern | undefined;
     registerColumnFilterColumn: (column: ColumnDescriptor) => (() => void) | undefined;
 };
 interface SavedFilterHookProps {

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

@@ -1,10 +1,20 @@
 import { FilterContainerFilterDescriptor } from "@vuu-ui/vuu-filter-types";
 import { ReactNode } from "react";
+import { type DateTimePattern } from "@vuu-ui/vuu-utils";
 export type SavedFilterRecord = Record<string, FilterContainerFilterDescriptor[]>;
 export interface FilterProviderProps {
     children: ReactNode;
+    /**
+     * Date/time patterns, keyed by column name, of the ColumnFilters
+     * (FilterContainerColumnFilter) within this provider. A ColumnFilter
+     * without a pattern prop uses the pattern configured here. As these are
+     * available whether or not a ColumnFilter is mounted, the filter context
+     * menu can match a temporal cell value at the precision of the ColumnFilter,
+     * even where ColumnFilters are created on demand.
+     */
+    columnFilterPatterns?: Record<string, DateTimePattern>;
     onFiltersSaved?: (savedFilters: SavedFilterRecord) => void;
     savedFilters?: SavedFilterRecord;
     filterNameMaxLength?: number;
 }
-export declare const FilterProvider: ({ children, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterProvider: ({ children, columnFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react/jsx-runtime").JSX.Element;