@rebasepro/admin 0.7.0 → 0.9.0

package/src/components/SelectableTable/SelectionStore.ts

@@ -1,67 +1,37 @@
 import { useSyncExternalStore, useCallback, useRef } from "react";
 import { SelectedCellProps } from "@rebasepro/types";
+import {
+    createVirtualTableSelectionStore,
+    VirtualTableSelectionStore,
+    SelectedCell
+} from "@rebasepro/ui";
+
+export interface AdminSelectedCell extends SelectedCell {
+    entityPath: string;
+    entityId: string | number;
+    propertyKey: string;
+    cellRect: DOMRect;
+    width: number;
+    height: number;
+}
 
-/**
- * A ref-based selection store that avoids React context re-renders.
- *
- * The problem with putting `selectedCell` in a React context value is that
- * ANY cell selection change triggers a context value change, which forces
- * ALL consumers (every PropertyTableCell in the table) to re-render.
- * This causes the DOM to be replaced between mousedown and click events,
- * breaking `alwaysInteractive` cells (like relation selectors) where the
- * user needs to click a button on the very first interaction.
- *
- * This store uses `useSyncExternalStore` so only cells whose `selected`
- * derivation actually changed will re-render.
- */
 export function createSelectionStore() {
-    let selectedCell: SelectedCellProps | undefined = undefined;
-    const listeners = new Set<() => void>();
-
-    function getSnapshot(): SelectedCellProps | undefined {
-        return selectedCell;
-    }
-
-    function subscribe(listener: () => void): () => void {
-        listeners.add(listener);
-        return () => listeners.delete(listener);
-    }
-
-    function select(cell: SelectedCellProps | undefined) {
-        selectedCell = cell;
-        listeners.forEach(l => l());
-    }
-
-    return { getSnapshot,
-subscribe,
-select };
+    return createVirtualTableSelectionStore<AdminSelectedCell>();
 }
 
-export type SelectionStore = ReturnType<typeof createSelectionStore>;
+export type SelectionStore = VirtualTableSelectionStore<AdminSelectedCell>;
 
-/**
- * Hook that subscribes a cell to the selection store and returns
- * whether THIS cell is selected. Only re-renders when the cell's
- * `selected` boolean actually changes (not on every store update).
- */
 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
 ): boolean {
-    // Memoize a selector that derives a boolean from the store snapshot.
-    // useSyncExternalStore calls this on every store notification, but
-    // React only re-renders when the returned value !== the previous one.
-    const selectorRef = useRef({ propertyKey,
-entityPath,
-entityId });
-    selectorRef.current = { propertyKey,
-entityPath,
-entityId };
+    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 &&
@@ -69,5 +39,5 @@ entityId };
             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) => (

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

@@ -0,0 +1,187 @@
+import React, { Suspense } from "react";
+import {
+    ArrayProperty,
+    FilterFieldBindingProps,
+    Property,
+    ReferenceProperty,
+    RelationProperty,
+    WhereFilterOp
+} from "@rebasepro/types";
+import { enumToObjectEntries, resolveFilterOperators } from "@rebasepro/common";
+import { useCollectionScope, useComponentOverride, useResolvedComponent } from "@rebasepro/core";
+import { StringNumberFilterField } from "./StringNumberFilterField";
+import { BooleanFilterField } from "./BooleanFilterField";
+import { DateTimeFilterField } from "./DateTimeFilterField";
+import { ReferenceFilterField } from "./ReferenceFilterField";
+import { RelationFilterField } from "./RelationFilterField";
+
+export interface FilterFieldBindingInput {
+    /** Key of the property being filtered (the column id). */
+    propertyKey: string;
+    /** The raw property — array properties are unwrapped internally. */
+    property: Property;
+    /**
+     * Engine backing the collection (`collection.engine`). Drives which
+     * operators the engine can execute. Usually omitted — it is read from
+     * the surrounding {@link CollectionScopeProvider}; pass it explicitly
+     * only when rendering outside any collection scope.
+     */
+    engine?: string;
+    value?: [WhereFilterOp, unknown];
+    setValue: (value?: [WhereFilterOp, unknown]) => void;
+    /** Coordination flags for fields that open their own dialogs. */
+    hidden?: boolean;
+    setHidden?: (hidden: boolean) => void;
+}
+
+/**
+ * The single entry point for rendering a collection filter field.
+ * Used by both the table header filters ({@link SelectableTable}) and the
+ * Filters dialog.
+ *
+ * Resolution order:
+ * 1. `property.ui.Filter` — per-property replacement (rendered even when the
+ *    resolved operator list is empty; the component owns filterability).
+ * 2. `components["Collection.FilterField"]` — collection-level or app-level
+ *    override (wrap mode supported via `OriginalComponent`).
+ * 3. Built-in field dispatched by property type.
+ *
+ * The operators handed to the field are the intersection of the engine's
+ * capabilities, the property-type defaults, and `property.ui.filterOperators`
+ * (see `resolveFilterOperators`). When that intersection is empty and no
+ * per-property `Filter` is set, nothing is rendered.
+ *
+ * @group Components
+ */
+export function FilterFieldBinding({
+    propertyKey,
+    property,
+    engine,
+    value,
+    setValue,
+    hidden,
+    setHidden
+}: FilterFieldBindingInput): React.ReactNode {
+
+    const isArray = property.type === "array";
+    const ofVal = isArray ? (property as ArrayProperty).of : undefined;
+    const baseProperty: Property | undefined = isArray
+        ? (Array.isArray(ofVal) ? ofVal[0] : ofVal) as Property | undefined
+        : property;
+
+    // Hooks must run unconditionally — before any early return.
+    const scopeCollection = useCollectionScope();
+    const ResolvedFilterField = useComponentOverride<FilterFieldBindingProps>("Collection.FilterField", DefaultFilterField);
+    const PropertyFilter = useResolvedComponent<FilterFieldBindingProps>(baseProperty?.ui?.Filter);
+
+    if (!baseProperty) return null;
+
+    const operators = resolveFilterOperators({
+        property: baseProperty,
+        isArray,
+        engine: engine ?? scopeCollection?.engine
+    });
+
+    const bindingProps: FilterFieldBindingProps = {
+        propertyKey,
+        property: baseProperty,
+        isArray,
+        operators,
+        value,
+        setValue,
+        title: property.name,
+        hidden,
+        setHidden
+    };
+
+    // 1. Per-property replacement — always rendered, the dev owns filterability.
+    if (PropertyFilter) {
+        return (
+            <Suspense fallback={null}>
+                <PropertyFilter {...bindingProps}/>
+            </Suspense>
+        );
+    }
+
+    // 2/3. Override or built-in — only when the property is filterable here.
+    if (operators.length === 0) return null;
+
+    return <ResolvedFilterField {...bindingProps}/>;
+}
+
+/**
+ * Built-in filter field dispatch by property type. This is the
+ * `OriginalComponent` received by `"Collection.FilterField"` overrides in
+ * wrap mode.
+ */
+function DefaultFilterField({
+    propertyKey,
+    property,
+    isArray,
+    operators,
+    value,
+    setValue,
+    title,
+    hidden,
+    setHidden
+}: FilterFieldBindingProps): React.ReactNode {
+
+    if (property.type === "reference") {
+        const referenceProperty = property as ReferenceProperty;
+        return <ReferenceFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            isArray={isArray}
+            operators={operators}
+            path={referenceProperty.path}
+            title={title}
+            includeId={referenceProperty.includeId}
+            previewProperties={referenceProperty.ui?.previewProperties}
+            hidden={hidden ?? false}
+            setHidden={setHidden ?? (() => undefined)}/>;
+    }
+
+    if (property.type === "relation") {
+        const relation = (property as RelationProperty).relation;
+        if (!relation) return null;
+        return <RelationFilterField value={value as never}
+            setValue={setValue}
+            name={propertyKey}
+            operators={operators}
+            relation={relation}
+            hidden={hidden ?? false}
+            setHidden={setHidden ?? (() => undefined)}/>;
+    }
+
+    if (property.type === "number" || property.type === "string") {
+        const enumValues = property.enum ? enumToObjectEntries(property.enum) : undefined;
+        return <StringNumberFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            type={property.type}
+            isArray={isArray}
+            operators={operators}
+            enumValues={enumValues}
+            title={title}/>;
+    }
+
+    if (property.type === "boolean") {
+        return <BooleanFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            operators={operators}
+            title={title}/>;
+    }
+
+    if (property.type === "date") {
+        return <DateTimeFilterField value={value}
+            setValue={setValue}
+            name={propertyKey}
+            mode={property.mode}
+            isArray={isArray}
+            operators={operators}
+            title={title}/>;
+    }
+
+    return null;
+}

package/src/components/SelectableTable/filters/ReferenceFilterField.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, { useMemo, useState } from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { Entity, EntityReference } from "@rebasepro/types";
@@ -20,6 +20,12 @@ interface ReferenceFilterFieldProps {
     previewProperties?: string[];
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
+    /**
+     * 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 = {
@@ -44,11 +50,12 @@ export function ReferenceFilterField({
     path,
     includeId = true,
     previewProperties,
-    setHidden
+    setHidden,
+    operators
 }: ReferenceFilterFieldProps) {
     const { t } = useTranslation();
 
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
@@ -58,6 +65,10 @@ export function ReferenceFilterField({
         possibleOperations.push("in", "not-in");
     }
 
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
+
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
     const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue as EntityReference | EntityReference[] | undefined | null);
@@ -100,7 +111,7 @@ export function ReferenceFilterField({
     }
 
     const collectionRegistryController = useCollectionRegistryController();
-    const collection: EntityCollection | undefined = useMemo(() => {
+    const collection: CollectionConfig | undefined = useMemo(() => {
         return path ? collectionRegistryController.getCollection(path) : undefined;
     }, [path]);
 
@@ -114,7 +125,7 @@ export function ReferenceFilterField({
 
     const multiple = multipleSelectOperations.includes(operation);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect: multiple,
         path,
         collection,
@@ -147,6 +158,9 @@ export function ReferenceFilterField({
         );
     };
 
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
+
     return (
 
         <div className="flex w-full flex-row">
@@ -157,7 +171,7 @@ export function ReferenceFilterField({
                     onValueChange={(value) => {
                         updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                     }}
-                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>
                             {operationLabels[op]}

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

@@ -11,6 +11,12 @@ interface RelationFilterFieldProps {
     relation: Relation; // relation config provided externally
     hidden: boolean;
     setHidden: (value: boolean) => void;
+    /**
+     * 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 = {
@@ -34,15 +40,20 @@ export function RelationFilterField({
     relation,
     name: _name,
     hidden: _hidden,
-    setHidden: _setHidden
+    setHidden: _setHidden,
+    operators
 }: RelationFilterFieldProps) {
 
     const manyRelation = relation.cardinality === "many";
 
-    const possibleOperations: (keyof typeof operationLabels)[] = manyRelation
+    let possibleOperations: (keyof typeof operationLabels)[] = manyRelation
         ? ["array-contains", "array-contains-any"]
         : ["==", "!=", ">", "<", ">=", "<=", "in", "not-in"];
 
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
+
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
     const [internalValue, setInternalValue] = useState<EntityRelation | EntityRelation[] | undefined | null>(fieldValue);
@@ -89,6 +100,9 @@ export function RelationFilterField({
         updateFilter(operation, newVal);
     };
 
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
+
     return (
         <div className="flex flex-row">
             <div className="">
@@ -98,7 +112,7 @@ export function RelationFilterField({
                     onValueChange={(newOp) => {
                         updateFilter(newOp as VirtualTableWhereFilterOp, internalValue);
                     }}
-                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}
                 >
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>

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

@@ -21,6 +21,12 @@ interface StringNumberFilterFieldProps {
     isArray?: boolean;
     enumValues?: EnumValueConfig[];
     title?: 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 = {
@@ -34,11 +40,23 @@ const operationLabels = {
     "not-in": "Not in",
     "array-contains": "Contains",
     "array-contains-any": "Any",
-    "is-null": "Is null"
+    "ilike": "Contains",
+    "not-ilike": "Not contains",
+    "is-null": "Is null",
+    "is-not-null": "Is not null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
+/** Operators that match a substring, wrapped in SQL wildcards (`%value%`). */
+const containsOperations = ["ilike", "not-ilike"];
+
+/** Strip the surrounding `%` wildcards a contains-filter adds, for display. */
+function unwrapContains(value: unknown): string {
+    if (typeof value !== "string") return "";
+    return value.replace(/^%/, "").replace(/%$/, "");
+}
+
 export function StringNumberFilterField({
                                             name,
                                             value,
@@ -46,13 +64,20 @@ export function StringNumberFilterField({
                                             type,
                                             isArray,
                                             enumValues,
-                                            title
+                                            title,
+                                            operators
                                         }: StringNumberFilterFieldProps) {
     const { t } = useTranslation();
 
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
+
+    // Case-insensitive substring matching is only meaningful for free-text
+    // string columns (not numbers, arrays, or enums).
+    if (!isArray && !enumValues && type === "string") {
+        possibleOperations.push("ilike", "not-ilike");
+    }
 
     if (enumValues) {
         if (isArray) {
@@ -62,18 +87,47 @@ export function StringNumberFilterField({
         }
     }
 
+    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);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue as string | number | string[] | number[] | null | undefined);
+    // 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<string | number | string[] | number[] | null | undefined>(
+        containsOperations.includes(fieldOperation) ? unwrapContains(fieldValue) : (fieldValue as string | number | string[] | number[] | null | undefined)
+    );
+
+    const isNullOperation = operation === "is-null" || operation === "is-not-null";
 
-    const isNullOperation = operation === "is-null";
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
 
-    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined) {
-        // Handle "is null" operation
-        if (op === "is-null") {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
+        // Null-testing operators ignore their value.
+        if (op === "is-null" || op === "is-not-null") {
             setOperation(op);
             setInternalValue(null);
-            setValue(["==", null]);
+            setValue([op, null]);
+            return;
+        }
+
+        // Substring matching: keep the raw text in the field, emit it wrapped
+        // in SQL wildcards so the backend runs `column ILIKE '%value%'`.
+        if (op === "ilike" || op === "not-ilike") {
+            const raw = typeof val === "string" ? val : "";
+            setOperation(op);
+            setInternalValue(raw);
+            if (raw.length > 0) {
+                setValue([op, `%${raw}%`]);
+            } else {
+                setValue(undefined);
+            }
             return;
         }
 
@@ -121,7 +175,7 @@ export function StringNumberFilterField({
                         fullWidth={true}
                         position={"item-aligned"}
                         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) => (