@rebasepro/admin 0.8.0 → 0.9.0

package/src/components/ReferenceTable/{EntitySelectionTable.tsx → SelectionTableBinding.tsx}

@@ -1,12 +1,13 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CollectionSize, Entity, FilterValues } from "@rebasepro/types";
 
 import {
-    EntityCollectionRowActions,
-    EntityCollectionTable
-} from "../EntityCollectionTable";
+    CollectionRowActions,
+    CollectionTableBinding
+} from "../CollectionTableBinding";
 import {
+    CollectionScopeProvider,
     useAuthController,
     useCustomizationController,
     useData,
@@ -17,17 +18,17 @@ import {
 import { ErrorView } from "@rebasepro/core";
 import { Button, DialogActions, PlusIcon, Typography } from "@rebasepro/ui";
 import { IconForView } from "@rebasepro/core";
-import { useSelectionController } from "../EntityCollectionView/useSelectionController";
+import { useSelectionController } from "../CollectionViewBinding/useSelectionController";
 
 import { useColumnIds } from "@rebasepro/core";
 import { useSideDialogContext } from "../SideDialogs";
 import { useAnalyticsController } from "@rebasepro/core";
-import { useUrlController, useSideEntityController } from "../../index";
+import { useUrlController, useSidePanel } from "../../index";
 
 /**
  * @group Components
  */
-export interface EntitySelectionProps<M extends Record<string, unknown>> {
+export interface SelectionProps<M extends Record<string, unknown>> {
 
     /**
      * Allow multiple selection of values
@@ -37,7 +38,7 @@ export interface EntitySelectionProps<M extends Record<string, unknown>> {
     /**
      * Entity collection config
      */
-    collection?: EntityCollection<M>;
+    collection?: CollectionConfig<M>;
 
     /**
      * Absolute path of the collection.
@@ -87,20 +88,20 @@ export interface EntitySelectionProps<M extends Record<string, unknown>> {
 
 /**
  * This component allows to select entities from a given collection.
- * You probably want to open this dialog as a side view using {@link useEntitySelectionTable}
+ * You probably want to open this dialog as a side view using {@link useSelectionTableBinding}
  * @group Components
  */
-export function EntitySelectionTable<M extends Record<string, unknown>>(
-    props: EntitySelectionProps<M>
+export function SelectionTableBinding<M extends Record<string, unknown>>(
+    props: SelectionProps<M>
 ) {
     if (!props.collection) {
         return <ErrorView
             error={"Could not find collection"}/>
     }
-    return <EntitySelectionTableInternal {...props} collection={props.collection} />;
+    return <SelectionTableBindingInternal {...props} collection={props.collection} />;
 }
 
-function EntitySelectionTableInternal<M extends Record<string, unknown>>(
+function SelectionTableBindingInternal<M extends Record<string, unknown>>(
     {
         onSingleEntitySelected,
         onMultipleEntitiesSelected,
@@ -111,10 +112,10 @@ function EntitySelectionTableInternal<M extends Record<string, unknown>>(
         description,
         fixedFilter,
         maxSelection
-    }: EntitySelectionProps<M> & { collection: EntityCollection<M> }) {
+    }: SelectionProps<M> & { collection: CollectionConfig<M> }) {
 
     const sideDialogContext = useSideDialogContext();
-    const sideEntityController = useSideEntityController();
+    const sidePanelController = useSidePanel();
     const urlController = useUrlController();
     const analyticsController = useAnalyticsController();
 
@@ -212,7 +213,7 @@ function EntitySelectionTableInternal<M extends Record<string, unknown>>(
         analyticsController.onAnalyticsEvent?.("reference_selection_new_entity", {
             path
         });
-        sideEntityController.open({
+        sidePanelController.open({
             path: path,
             collection,
             updateUrl: true,
@@ -237,7 +238,7 @@ function EntitySelectionTableInternal<M extends Record<string, unknown>>(
     }) => {
         const selectedEntities = selectionController.selectedEntities;
         const isSelected = selectedEntities && selectedEntities.map(e => e.id).indexOf(entity.id) > -1;
-        return <EntityCollectionRowActions
+        return <CollectionRowActions
             width={width}
             frozen={frozen}
             entity={entity}
@@ -269,11 +270,12 @@ function EntitySelectionTableInternal<M extends Record<string, unknown>>(
 
     return (
 
+        <CollectionScopeProvider collection={collection}>
         <div className="flex flex-col h-full">
 
             <div className="grow">
                 {entitiesDisplayedFirst &&
-                    <EntityCollectionTable
+                    <CollectionTableBinding
                         additionalFields={collection.additionalFields}
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
@@ -316,6 +318,7 @@ function EntitySelectionTableInternal<M extends Record<string, unknown>>(
                 </Button>
             </DialogActions>
         </div>
+        </CollectionScopeProvider>
 
     );
 
@@ -327,7 +330,7 @@ function EntitySelectionDialogActions({
     onClear,
     onNewClick
 }: {
-    collection: EntityCollection<any>,
+    collection: CollectionConfig<any>,
     path: string,
     onClear: () => void,
     onNewClick: () => void

package/src/components/ReferenceWidget.tsx

@@ -1,5 +1,5 @@
-import { useEntitySelectionDialog } from "../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { useCallback, useMemo } from "react";
 
 import { Entity, EntityReference, FilterValues } from "@rebasepro/types";
@@ -55,7 +55,7 @@ export function ReferenceWidget<M extends Record<string, unknown>>({
 
     const collectionRegistryController = useCollectionRegistryController();
 
-    const collection: EntityCollection | undefined = useMemo(() => {
+    const collection: CollectionConfig | undefined = useMemo(() => {
         return collectionRegistryController.getCollection(path);
     }, [path, collectionRegistryController.getCollection]);
 
@@ -83,7 +83,7 @@ export function ReferenceWidget<M extends Record<string, unknown>>({
         }
     }, [disabled, onReferenceSelected]);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect,
         path,
         collection,

package/src/components/RelationSelector.tsx

@@ -25,9 +25,9 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Entity, EntityRelation, FilterValues, Relation, getCollectionDataPath } from "@rebasepro/types";
-import { EntityPreviewData } from "./EntityPreview";
+import { EntityPreviewBindingData } from "./EntityPreviewBinding";
 import { useData, useRelationSelector } from "@rebasepro/core";
-import { useSideEntityController } from "../hooks/useSideEntityController";
+import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
 import { EmptyValue } from "../preview";
 
@@ -91,7 +91,7 @@ export const RelationSelector = React.forwardRef<
 
         const collection = relation.target();
         const dataClient = useData();
-        const sideEntityController = useSideEntityController();
+        const sidePanelController = useSidePanel();
         const multiple = relation.cardinality === "many";
 
         const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -102,7 +102,7 @@ export const RelationSelector = React.forwardRef<
         // Track IDs that were set via local user interaction (onItemClick / handleClear / handleRemoveItem).
         // When an incoming value change matches these IDs exactly, we skip async re-resolution.
         const localSelectionIdsRef = useRef<string | null>(null);
-        // Snapshot of selected IDs captured when the popover opens.
+        // Entity of selected IDs captured when the popover opens.
         // Used to sort the dropdown list so selected items appear at the top.
         // Stays stable for the entire popover session so items don't jump around.
         const pinnedIdsRef = useRef<Set<string> | null>(null);
@@ -213,7 +213,8 @@ export const RelationSelector = React.forwardRef<
 
                 if (hasEmbeddedData) {
                     const r = rel as EntityRelation;
-                    newResolvedItems.push(toRelationItem(r.data!, r));
+                    // CMS wire format embeds relation data as { id, path, values }
+                    newResolvedItems.push(toRelationItem(r.data as unknown as Entity, r));
                 } else if (currentSelectedMap.has(relId)) {
                     // We already have it in currentSelected
                     const existingItem = currentSelectedMap.get(relId)!;
@@ -248,7 +249,8 @@ export const RelationSelector = React.forwardRef<
                     const relation = isPrimitive ? new EntityRelation(relId, path) : rel as EntityRelation;
 
                     if (!isPrimitive && (rel as EntityRelation).data) {
-                        return toRelationItem((rel as EntityRelation).data!, relation);
+                        // CMS wire format embeds relation data as { id, path, values }
+                        return toRelationItem((rel as EntityRelation).data as unknown as Entity, relation);
                     }
                     if (currentSelectedMap.has(String(relId))) {
                         return currentSelectedMap.get(String(relId))!;
@@ -485,11 +487,11 @@ relation } as RelationItem;
                                                     <div key={String(item.id)}
                                                         className="flex flex-row items-center gap-1 truncate">
                                                         {item.data ? (
-                                                            <EntityPreviewData size={"medium"}
+                                                            <EntityPreviewBindingData size={"medium"}
                                                                 entity={item.data}
                                                                 includeEntityLink={false}
                                                                 includeId={false}
-                                                                onSideEntityClick={closePopover}
+                                                                onSidePanelClick={closePopover}
                                                             />
                                                         ) : (
                                                             <span className="text-sm truncate">{item.label}</span>
@@ -504,7 +506,7 @@ relation } as RelationItem;
                                                     className={cls("flex flex-row items-center gap-1 truncate")}
                                                 >
                                                     {item.data ? (
-                                                        <EntityPreviewData size={"smallest"} entity={item.data}
+                                                        <EntityPreviewBindingData size={"smallest"} entity={item.data}
                                                             includeEntityLink={false}
                                                             includeId={false}/>
                                                     ) : (
@@ -541,7 +543,7 @@ relation } as RelationItem;
                                                     e.preventDefault();
                                                     const entity = selectedItems[0].data!;
                                                     setIsPopoverOpen(false);
-                                                    sideEntityController.open({
+                                                    sidePanelController.open({
                                                         entityId: entity.id,
                                                         path: entity.path,
                                                         collection,
@@ -634,7 +636,7 @@ relation } as RelationItem;
                                     <CommandPrimitive.Group>
                                         {(() => {
                                             // Sort items so that initially-selected (pinned) items appear first.
-                                            // We use the snapshot taken when the popover opened so items don't
+                                            // We use the entity taken when the popover opened so items don't
                                             // jump around as the user checks/unchecks.
                                             const pinned = pinnedIdsRef.current;
                                             const sortedItems = pinned && pinned.size > 0
@@ -666,7 +668,7 @@ relation } as RelationItem;
                                                     {item.data ? (
                                                         <div
                                                             className="flex flex-row items-center gap-2 min-w-0 w-full">
-                                                            <EntityPreviewData
+                                                            <EntityPreviewBindingData
                                                                 size={multiple ? "smallest" : "medium"}
                                                                 entity={item.data}
                                                                 includeId={false}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,19 +1,14 @@
 import { createSelectionStore, AdminSelectedCell } from "./SelectionStore";
-import type { Property } from "@rebasepro/types";
+import type { Property, WhereFilterOp } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { CollectionSize, Entity, EntityRelation, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
-import { CellRendererParams, TableView, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams, VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { enumToObjectEntries } from "@rebasepro/common";
-import { DEFAULT_PAGE_SIZE, EntityCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
+import { CollectionSize, Entity, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
+import { CellRendererParams, TableView, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams } from "@rebasepro/ui";
+import { DEFAULT_PAGE_SIZE, DataCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
 import { FilterFormFieldProps } from "@rebasepro/ui";
-import { ReferenceFilterField } from "./filters/ReferenceFilterField";
-import { StringNumberFilterField } from "./filters/StringNumberFilterField";
-import { BooleanFilterField } from "./filters/BooleanFilterField";
-import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { useOutsideAlerter } from "@rebasepro/ui";
 import { SelectableTableContext } from "./SelectableTableContext";
 import { getRowHeight } from "@rebasepro/core";
-import { RelationFilterField } from "./filters/RelationFilterField";
+import { FilterFieldBinding } from "./filters/FilterFieldBinding";
 
 export type SelectableTableProps<M extends Record<string, unknown>> = {
 
@@ -107,23 +102,23 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
  * This component is in charge of rendering a collection table with a high
  * degree of customization.
  *
- * This component is used internally by {@link EntityCollectionView} and
+ * This component is used internally by {@link CollectionViewBinding} and
  * {@link useReferenceDialog}
  *
  * Please note that you only need to use this component if you are building
  * a custom view. If you just need to create a default view you can do it
  * exclusively with config options.
  *
- * If you want to bind a {@link EntityCollection} to a table with the default
+ * If you want to bind a {@link CollectionConfig} to a table with the default
  * options you see in collections in the top level navigation, you can
- * check {@link EntityCollectionView}.
+ * check {@link CollectionViewBinding}.
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the driver, by using the hook
  * {@link useDataTableController}
  *
- * @see EntityCollectionTableProps
- * @see EntityCollectionView
+ * @see CollectionTableBindingProps
+ * @see CollectionViewBinding
  * @see VirtualTable
  * @group Components
  */
@@ -196,7 +191,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
             selectionStore.select({
                 ...cell,
                 columnKey: cell.propertyKey,
-                rowId: cell.entityId
+                id: cell.entityId
             } as AdminSelectedCell);
         } else {
             selectionStore.select(undefined);
@@ -244,7 +239,29 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         size: size ?? "m",
         selectionStore,
         setPopupCell
-    } as unknown as EntityCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
+    } as unknown as DataCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
+
+    const createFilterField = useCallback(({
+        id,
+        filterValue,
+        setFilterValue,
+        column,
+        hidden,
+        setHidden
+    }: FilterFormFieldProps<unknown>): React.ReactNode => {
+        if (!column.custom) return null;
+        const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
+        if (!resolvedProperty) return null;
+        // Engine-aware operator resolution happens inside FilterFieldBinding,
+        // which reads the collection from the surrounding CollectionScopeProvider.
+        return <FilterFieldBinding
+            propertyKey={id as string}
+            property={resolvedProperty}
+            value={filterValue as [WhereFilterOp, unknown] | undefined}
+            setValue={setFilterValue as (value?: [WhereFilterOp, unknown]) => void}
+            hidden={hidden}
+            setHidden={setHidden}/>;
+    }, []);
 
     return (
         <SelectableTableContext.Provider
@@ -289,74 +306,4 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
 
 };
 
-function createFilterField({
-    id,
-    filterValue,
-    setFilterValue,
-    column,
-    hidden,
-    setHidden
-}: FilterFormFieldProps<unknown>): React.ReactNode {
-
-    if (!column.custom) {
-        return null;
-    }
-
-    const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
-
-    const isArray = resolvedProperty?.type === "array";
-    const ofVal = isArray && resolvedProperty ? resolvedProperty.of : undefined;
-    const baseProperty: Property | undefined = isArray ? (Array.isArray(ofVal) ? ofVal[0] : ofVal) : resolvedProperty;
-    if (!baseProperty) {
-        return null;
-    }
-    if (baseProperty.type === "reference") {
-        return <ReferenceFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            isArray={isArray}
-            path={baseProperty.path}
-            title={resolvedProperty?.name}
-            includeId={baseProperty.includeId}
-            previewProperties={baseProperty?.ui?.previewProperties}
-            hidden={hidden}
-            setHidden={setHidden}/>;
-    } else if (baseProperty.type === "relation" && baseProperty.relation) {
-        return <RelationFilterField value={filterValue as [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null]}
-            setValue={setFilterValue}
-            name={id as string}
-            relation={baseProperty.relation}
-            hidden={hidden}
-            setHidden={setHidden}/>;
-    } else if (baseProperty.type === "number" || baseProperty.type === "string") {
-        const name = baseProperty.name;
-        const enumValues = baseProperty.enum ? enumToObjectEntries(baseProperty.enum) : undefined;
-        return <StringNumberFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            type={baseProperty.type}
-            isArray={isArray}
-            enumValues={enumValues}
-            title={name}/>;
-    } else if (baseProperty.type === "boolean") {
-        const name = baseProperty.name;
-        return <BooleanFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            title={name}/>;
-
-    } else if (baseProperty.type === "date") {
-        const title = baseProperty.name;
-        return <DateTimeFilterField value={filterValue}
-            setValue={setFilterValue}
-            name={id as string}
-            mode={baseProperty.mode}
-            isArray={isArray}
-            title={title}/>;
-    }
-
-    return (
-        <div>{`Currently the filter field ${resolvedProperty?.type} is not supported`}</div>
-    );
-}
 

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
-import { EntityCollectionTableController } from "@rebasepro/core";
+import { DataCollectionTableController } from "@rebasepro/core";
 
-export const SelectableTableContext = React.createContext<EntityCollectionTableController<Record<string, unknown>>>(null! as EntityCollectionTableController<Record<string, unknown>>);
+export const SelectableTableContext = React.createContext<DataCollectionTableController<Record<string, unknown>>>(null! as DataCollectionTableController<Record<string, unknown>>);
 
 export const useSelectableTableController = <M extends Record<string, unknown> = Record<string, unknown>>() =>
-    useContext(SelectableTableContext) as unknown as EntityCollectionTableController<M>;
+    useContext(SelectableTableContext) as unknown as DataCollectionTableController<M>;

package/src/components/SelectableTable/SelectionStore.ts

@@ -22,7 +22,7 @@ export function createSelectionStore() {
 export type SelectionStore = VirtualTableSelectionStore<AdminSelectedCell>;
 
 export function useCellSelected(
-    store: { getSnapshot: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
+    store: { getEntity: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
     propertyKey: string,
     entityPath: string,
     entityId: string | number
@@ -30,8 +30,8 @@ export function useCellSelected(
     const selectorRef = useRef({ propertyKey, entityPath, entityId });
     selectorRef.current = { propertyKey, entityPath, entityId };
 
-    const getSnapshot = useCallback(() => {
-        const cell = store.getSnapshot();
+    const getEntity = useCallback(() => {
+        const cell = store.getEntity();
         if (!cell) return false;
         const s = selectorRef.current;
         return cell.propertyKey === s.propertyKey &&
@@ -39,5 +39,5 @@ export function useCellSelected(
             cell.entityId === s.entityId;
     }, [store]);
 
-    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+    return useSyncExternalStore(store.subscribe, getEntity, getEntity);
 }

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -8,16 +8,24 @@ interface BooleanFieldProps {
     value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
     setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
     title?: string;
+    /**
+     * Restrict the offered operators. This field only ever emits `["==", …]`,
+     * so it renders nothing when `==` is not allowed.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
 export function BooleanFilterField({
     name,
     title,
     value,
-    setValue
+    setValue,
+    operators
 }: BooleanFieldProps) {
     const { t } = useTranslation();
 
+    if (operators && !operators.includes("==")) return null;
+
     function updateFilter(val?: boolean) {
         if (val !== undefined) {
             setValue(

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -11,9 +11,15 @@ interface DateTimeFilterFieldProps {
     isArray?: boolean;
     title?: string;
     timezone?: string;
+    /**
+     * Restrict the offered operators (already resolved against engine
+     * capabilities and property config). When omitted, all operators this
+     * field can render are offered.
+     */
+    operators?: readonly VirtualTableWhereFilterOp[];
 }
 
-const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
+const operationLabels: Partial<Record<VirtualTableWhereFilterOp, string>> = {
     "==": "==",
     "!=": "!=",
     ">": ">",
@@ -24,7 +30,8 @@ const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
     in: "in",
     "array-contains": "Contains",
     "array-contains-any": "Any",
-    "is-null": "Is null"
+    "is-null": "Is null",
+    "is-not-null": "Is not null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in"];
@@ -36,26 +43,40 @@ export function DateTimeFilterField({
     value,
     setValue,
     title,
-    timezone
+    timezone,
+    operators
 }: DateTimeFilterFieldProps) {
 
     const { locale } = useCustomizationController();
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
+
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
+    // Read back both the canonical null operators and the legacy `["==", null]` /
+    // `["!=", null]` form saved by older filter presets.
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(
+        fieldOperation === "==" && fieldValue === null ? "is-null"
+            : fieldOperation === "!=" && fieldValue === null ? "is-not-null"
+                : fieldOperation
+    );
     const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue as Date | null | undefined);
 
-    const isNullOperation = operation === "is-null";
+    const isNullOperation = operation === "is-null" || operation === "is-not-null";
+
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
 
-    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: Date | undefined | null) {
-        // Handle "is null" operation
-        if (op === "is-null") {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+        // Null-testing operators ignore their value.
+        if (op === "is-null" || op === "is-not-null") {
             setOperation(op);
             setInternalValue(null);
-            setValue(["==", null]);
+            setValue([op, null]);
             return;
         }
 
@@ -91,7 +112,7 @@ export function DateTimeFilterField({
                     size={"medium"}
                     fullWidth={true}
                     onValueChange={(value) => {
-                        updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                        updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                     }}
                     renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (