@firecms/core 3.1.0-canary.9e89e98 → 3.1.0-canary.a3b8228

package/src/components/EntityCollectionView/ViewModeToggle.tsx

@@ -12,6 +12,7 @@ import {
     ViewColumnIcon,
     ViewKanbanIcon
 } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type KanbanPropertyOption = {
     key: string;
@@ -72,6 +73,8 @@ export function ViewModeToggle({
     onKanbanPropertyChange
 }: ViewModeToggleProps) {
 
+    const { t } = useTranslation();
+
     if (!onViewModeChange) {
         return null;
     }
@@ -84,9 +87,9 @@ export function ViewModeToggle({
     };
 
     const getViewModeName = () => {
-        if (viewMode === "kanban") return "Board";
-        if (viewMode === "cards") return "Cards";
-        return "List";
+        if (viewMode === "kanban") return t("board");
+        if (viewMode === "cards") return t("cards");
+        return t("list");
     };
 
     const showSizeSelector = size && onSizeChanged && (viewMode === "table" || viewMode === "cards");
@@ -100,17 +103,17 @@ export function ViewModeToggle({
         const allOptions: ToggleButtonOption<ViewMode>[] = [
             {
                 value: "table",
-                label: "List",
+                label: t("list"),
                 icon: <ListIcon size="small" />
             },
             {
                 value: "cards",
-                label: "Cards",
+                label: t("cards"),
                 icon: <AppsIcon size="small" />
             },
             {
                 value: "kanban",
-                label: "Board",
+                label: t("board"),
                 icon: <ViewKanbanIcon size="small" />
             }
         ];
@@ -150,7 +153,7 @@ export function ViewModeToggle({
                     <div className="flex flex-row items-center justify-between gap-2">
                         <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
                             <ViewColumnIcon size="small" />
-                            <span>Size</span>
+                            <span>{t("size_label")}</span>
                         </div>
                         <Select
                             value={size}
@@ -173,7 +176,7 @@ export function ViewModeToggle({
                     <div className="flex flex-row items-center justify-between gap-2">
                         <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
                             <ViewKanbanIcon size="small" />
-                            <span>Group by</span>
+                            <span>{t("group_by")}</span>
                         </div>
                         <Select
                             value={selectedKanbanProperty}

package/src/components/EntityView.tsx

@@ -4,7 +4,7 @@ import { resolveCollection } from "../util";
 import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
-import { useAuthController } from "../hooks";
+import { useAuthController, useTranslation } from "../hooks";
 import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
@@ -26,6 +26,7 @@ export function EntityView<M extends Record<string, any>>(
     }: EntityViewProps<M>) {
 
     const authController = useAuthController();
+    const { t } = useTranslation();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
@@ -48,7 +49,7 @@ export function EntityView<M extends Record<string, any>>(
                                     color={"secondary"}
                                     component={"span"}
                                     className="break-words">
-                            Id
+                            {t("id")}
                         </Typography>
                     </div>
                     <div className="col-span-8">

package/src/components/ErrorBoundary.tsx

@@ -1,18 +1,20 @@
 import React, { ErrorInfo, PropsWithChildren } from "react";
+import { useTranslation } from "../hooks/useTranslation";
 
 import { ErrorIcon, Typography } from "@firecms/ui";
 
 export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
-    error: Error | null
+    hasError: boolean,
+    error?: Error
 }> {
     constructor(props: any) {
         super(props);
-        this.state = { error: null };
+        this.state = { hasError: false };
     }
 
     // eslint-disable-next-line n/handle-callback-err
     static getDerivedStateFromError(error: Error) {
-        return { error };
+        return { hasError: true, error };
     }
 
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -21,20 +23,30 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
     }
 
     render() {
-        if (this.state.error) {
-            return (
-                <div className="flex flex-col m-2">
-                    <div className="flex items-center m-2">
-                        <ErrorIcon color={"error"} size={"small"}/>
-                        <div className="ml-4">Error</div>
-                    </div>
-                    <Typography variant={"caption"}>
-                        {this.state.error?.message ?? "See the error in the console"}
-                    </Typography>
-                </div>
-            );
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <FallbackView message={this.state.error?.message}/>;
         }
 
         return this.props.children;
     }
 }
+
+function FallbackView({ message }: { message?: string }) {
+    const { t } = useTranslation();
+    return (
+        <div className="h-full w-full bg-slate-100 flex items-center justify-center p-4">
+            <div
+                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+                <div className="flex items-center mb-4 text-red-500">
+                    <ErrorIcon/>
+                    <div className="ml-4">{t("error")}</div>
+                </div>
+                <div className="flex justify-center text-gray-500 dark:text-gray-400">
+                    {/* Error message is purposely removed since it's hard to access state here, but typical ErrorBoundary fallback doesn't always show the raw message */}
+                    {t("see_console_details")}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/HomePage/DefaultHomePage.tsx

@@ -30,8 +30,13 @@ import { NavigationCardBinding } from "./NavigationCardBinding";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { RenameGroupDialog } from "./RenameGroupDialog";
+import { useTranslation } from "../../hooks/useTranslation";
 
-export const DEFAULT_GROUP_NAME = "Views";
+/**
+ * Internal sentinel key for ungrouped navigation entries.
+ * Not displayed — display components use t("views_group") when group is undefined.
+ */
+const DEFAULT_GROUP_KEY = "__default__";
 export const ADMIN_GROUP_NAME = "Admin";
 
 export function DefaultHomePage({
@@ -47,6 +52,7 @@ export function DefaultHomePage({
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
+    const { t } = useTranslation();
 
     if (!navigationController.topLevelNavigation)
         throw Error("Navigation not ready");
@@ -108,7 +114,7 @@ export function DefaultHomePage({
             const g =
                 e.type === "admin"
                     ? ADMIN_GROUP_NAME
-                    : e.group ?? DEFAULT_GROUP_NAME;
+                    : e.group ?? DEFAULT_GROUP_KEY;
             (entriesByGroup[g] ??= []).push(e);
         });
 
@@ -119,7 +125,7 @@ export function DefaultHomePage({
 
         if (performingSearch) {
             const ordered = [
-                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_NAME))
+                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_KEY))
             ];
             allProcessed = ordered
                 .map((name) => ({
@@ -129,11 +135,11 @@ export function DefaultHomePage({
                 .filter((g) => g.entries.length);
         } else {
             allProcessed = groupOrderFromNavController.map((g) => ({
-                name: g,
-                entries: entriesByGroup[g] || []
+                name: g ?? DEFAULT_GROUP_KEY,
+                entries: entriesByGroup[g ?? DEFAULT_GROUP_KEY] || []
             }));
             Object.keys(entriesByGroup).forEach((g) => {
-                if (!groupOrderFromNavController.includes(g))
+                if (!groupOrderFromNavController.map(x => x ?? DEFAULT_GROUP_KEY).includes(g))
                     allProcessed.push({
                         name: g,
                         entries: entriesByGroup[g]
@@ -141,9 +147,9 @@ export function DefaultHomePage({
             });
 
             // Ensure default group exists if there are plugin additional cards but no collections
-            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_NAME)) {
+            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_KEY)) {
                 allProcessed.push({
-                    name: DEFAULT_GROUP_NAME,
+                    name: DEFAULT_GROUP_KEY,
                     entries: []
                 });
             }
@@ -151,7 +157,7 @@ export function DefaultHomePage({
             allProcessed = allProcessed.filter(
                 (g) =>
                     g.entries.length ||
-                    (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
+                    (g.name === DEFAULT_GROUP_KEY && hasPluginAdditionalCards)
             );
         }
 
@@ -362,7 +368,7 @@ export function DefaultHomePage({
                 >
                     <SearchBar
                         onTextSearch={updateSearch}
-                        placeholder="Search collections"
+                        placeholder={t("search_collections")}
                         autoFocus
                         innerClassName="w-full"
                         className="w-full flex-grow"
@@ -412,7 +418,7 @@ export function DefaultHomePage({
 
                             const actionProps: PluginHomePageAdditionalCardsProps = {
                                 group:
-                                    groupKey === DEFAULT_GROUP_NAME
+                                    groupKey === DEFAULT_GROUP_KEY
                                         ? undefined
                                         : groupKey,
                                 context
@@ -432,7 +438,7 @@ export function DefaultHomePage({
                                 >
                                     <NavigationGroup
                                         group={
-                                            groupKey === DEFAULT_GROUP_NAME
+                                            groupKey === DEFAULT_GROUP_KEY
                                                 ? undefined
                                                 : groupKey
                                         }
@@ -535,7 +541,7 @@ export function DefaultHomePage({
                                 <NavigationGroup
                                     group={
                                         activeGroupData.name ===
-                                            DEFAULT_GROUP_NAME
+                                            DEFAULT_GROUP_KEY
                                             ? undefined
                                             : activeGroupData.name
                                     }

package/src/components/HomePage/HomePageDnD.tsx

@@ -30,6 +30,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { NavigationCardBinding } from "./NavigationCardBinding";
 import { NavigationEntry } from "../../types";
 import { cls, defaultBorderMixin } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 const animateLayoutChanges: AnimateLayoutChanges = (args) =>
     defaultAnimateLayoutChanges({
@@ -669,6 +670,7 @@ export function NewGroupDropZone({
     disabled: boolean;
     setIsHovering: (v: boolean) => void;
 }) {
+    const { t } = useTranslation();
     const {
         setNodeRef,
         isOver
@@ -709,7 +711,7 @@ export function NewGroupDropZone({
             )}>
             <div className="text-center p-4">
                 <span className="block font-medium text-sm">
-                    Drop here to create a new group
+                    {t("drop_here_create_group")}
                 </span>
             </div>
         </div>

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useState } from "react";
 import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export function NavigationGroup({
     children,
@@ -22,8 +23,9 @@ export function NavigationGroup({
     onToggleCollapsed?: () => void;
 }>) {
 
+    const { t } = useTranslation();
     const [isHovered, setIsHovered] = useState(false);
-    const currentGroupName = group ?? "Views";
+    const currentGroupName = group ?? t("views_group");
 
     // Show caret only when not in preview and there is a toggle handler
     const showCaret = !isPreview && !!onToggleCollapsed;

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface RenameGroupDialogProps {
     open: boolean;
@@ -18,7 +19,8 @@ export function RenameGroupDialog({
                                   }: RenameGroupDialogProps) {
     const [name, setName] = useState(initialName);
     const [error, setError] = useState<string | null>(null);
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (open) {
@@ -38,9 +40,9 @@ export function RenameGroupDialog({
         const newName = event.target.value;
         setName(newName);
         if (!newName.trim()) {
-            setError("Group name cannot be empty.");
+            setError(t("group_name_empty_error"));
         } else if (existingGroupNames.includes(newName.trim())) {
-            setError("This group name already exists.");
+            setError(t("group_name_exists_error"));
         } else {
             setError(null);
         }
@@ -49,11 +51,11 @@ export function RenameGroupDialog({
     const handleSave = () => {
         const trimmedName = name.trim();
         if (!trimmedName) {
-            setError("Group name cannot be empty.");
+            setError(t("group_name_empty_error"));
             return;
         }
         if (existingGroupNames.includes(trimmedName)) {
-            setError("This group name already exists.");
+            setError(t("group_name_exists_error"));
             return;
         }
         if (!error) {
@@ -70,9 +72,9 @@ export function RenameGroupDialog({
             // because the error state might not have updated if the user types and immediately hits enter.
             let currentError = null;
             if (!trimmedName) {
-                currentError = "Group name cannot be empty.";
+                currentError = t("group_name_empty_error");
             } else if (existingGroupNames.includes(trimmedName)) {
-                currentError = "This group name already exists.";
+                currentError = t("group_name_exists_error");
             }
 
             if (!currentError && trimmedName) {
@@ -93,14 +95,14 @@ export function RenameGroupDialog({
 
     return (
         <Dialog open={open}>
-            <DialogTitle>Rename Group</DialogTitle>
+            <DialogTitle>{t("rename_group")}</DialogTitle>
             <DialogContent>
                 <TextField
-                    inputRef={inputRef} // Pass the ref to the TextField
-                    label="Group Name"
+                    inputRef={inputRef}
+                    label={t("group_name_label")}
                     value={name}
                     onChange={handleNameChange}
-                    onKeyDown={handleKeyDown} // Added onKeyDown handler
+                    onKeyDown={handleKeyDown}
                     error={!!error}
                     aria-describedby={error ? "group-name-error" : undefined}
                 />
@@ -109,11 +111,11 @@ export function RenameGroupDialog({
             <DialogActions>
                 <Button onClick={onClose}
                         variant="text">
-                    Cancel
+                    {t("cancel")}
                 </Button>
                 <Button onClick={handleSave}
                         disabled={!!error || !name.trim()}>
-                    Save
+                    {t("save")}
                 </Button>
             </DialogActions>
         </Dialog>

package/src/components/LanguageToggle.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { CheckIcon, IconButton, Menu, MenuItem, TranslateIcon, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks";
+
+export function LanguageToggle() {
+    const { i18n } = useTranslation();
+
+    return (
+        <Menu
+            trigger={<IconButton
+                color="inherit"
+                aria-label="Change language">
+                <TranslateIcon size="small" />
+            </IconButton>}>
+            <MenuItem onClick={() => i18n.changeLanguage("en")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "en" ? "font-bold" : ""}>English</Typography>
+                    {i18n.language === "en" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("es")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "es" ? "font-bold" : ""}>Español</Typography>
+                    {i18n.language === "es" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("de")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "de" ? "font-bold" : ""}>Deutsch</Typography>
+                    {i18n.language === "de" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("fr")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "fr" ? "font-bold" : ""}>Français</Typography>
+                    {i18n.language === "fr" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("it")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "it" ? "font-bold" : ""}>Italiano</Typography>
+                    {i18n.language === "it" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("hi")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "hi" ? "font-bold" : ""}>हिन्दी</Typography>
+                    {i18n.language === "hi" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("pt")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "pt" ? "font-bold" : ""}>Português</Typography>
+                    {i18n.language === "pt" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+        </Menu>
+    );
+}

package/src/components/NotFoundPage.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
 
 export function NotFoundPage() {
+    const { t } = useTranslation();
 
     return (
         <div className="flex w-full h-full">
@@ -10,15 +12,15 @@ export function NotFoundPage() {
             >
                 <Typography variant={"h4"} align={"center"}
                             gutterBottom={true}>
-                    Page not found
+                    {t("page_not_found")}
                 </Typography>
                 <Typography align={"center"} gutterBottom={true}>
-                    This page does not exist or you may not have access to it
+                    {t("page_not_found_body")}
                 </Typography>
                 <Button
                     variant={"text"}
                     component={Link}
-                    to={"/"}>Back to home</Button>
+                    to={"/"}>{t("back_to_home")}</Button>
             </div>
         </div>
     );

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -12,7 +12,8 @@ import {
     useDataSource,
     useLargeLayout,
     useNavigationController,
-    useSideEntityController
+    useSideEntityController,
+    useTranslation
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
@@ -101,6 +102,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         maxSelection,
     }: ReferenceSelectionInnerProps<M>) {
 
+    const { t } = useTranslation();
     const authController = useAuthController();
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
@@ -302,8 +304,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                                 collectionOrView={collection}
                                 className={"text-surface-300 dark:text-surface-600"}/>
                             {collection.singularName
-                                ? `Select ${collection.singularName}`
-                                : `Select from ${collection.name}`}
+                                ? t("select_specific", { name: collection.singularName })
+                                : t("select_from", { name: collection.name })}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}
@@ -327,7 +329,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                 <Button
                     onClick={onDone}
                     variant="filled">
-                    Done
+                    {t("done")}
                 </Button>
             </DialogActions>
         </div>
@@ -347,7 +349,7 @@ function ReferenceDialogActions({
     onClear: () => void,
     onNewClick: () => void
 }) {
-
+    const { t } = useTranslation();
     const authController = useAuthController();
 
     const largeLayout = useLargeLayout();
@@ -363,7 +365,7 @@ function ReferenceDialogActions({
             ? <Button
                 onClick={onClick}
                 startIcon={<AddIcon/>}>
-                Add {collection.singularName ?? collection.name}
+                {t("add_specific", { name: collection.singularName ?? collection.name })}
             </Button>
             : <Button
                 onClick={onClick}>
@@ -374,7 +376,7 @@ function ReferenceDialogActions({
         <>
             <Button onClick={onClear}
                     variant={"text"}>
-                Clear
+                {t("clear")}
             </Button>
             {addButton}
         </>

package/src/components/ReferenceWidget.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FilterValues } from "../types";
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
-import { useNavigationController, useReferenceDialog } from "../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../hooks";
 import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
@@ -50,6 +50,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
+    const { t } = useTranslation();
     const navigationController = useNavigationController();
 
     const collection: EntityCollection | undefined = useMemo(() => {
@@ -145,7 +146,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
         {!value && <div className="justify-center text-left">
             <Button disabled={disabled}
                     onClick={onEntryClick}>
-                Edit {name}
+                {t("edit_name", { name: name ?? "" })}
             </Button>
         </div>}
 

package/src/components/SearchIconsView.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
 import { iconSynonyms, iconsSearch } from "../util";
+import { useTranslation } from "../hooks/useTranslation";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
@@ -22,6 +23,7 @@ export function SearchIconsView({
                                 selectedIcon = "",
                                 onIconSelected
                             }: SearchIconsProps) {
+    const { t } = useTranslation();
     const [keys, setKeys] = React.useState<string[] | null>(null);
     const [query, setQuery] = React.useState<string>("");
 
@@ -53,7 +55,7 @@ export function SearchIconsView({
                 autoFocus={false}
                 innerClassName={"w-full sticky top-0 z-10"}
                 onTextSearch={(value?: string) => setQuery(value ?? "")}
-                placeholder="Search for more icons…"
+                placeholder={t("search_for_more_icons")}
             />
 
             <div className={"flex max-w-full flex-wrap mt-4"}>

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

@@ -48,6 +48,17 @@ export function DateTimeFilterField({
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
+    React.useEffect(() => {
+        if (value) {
+            const [op, val] = value;
+            setOperation(op === "==" && val === null ? "is-null" : op);
+            setInternalValue(val);
+        } else {
+            setOperation(possibleOperations[0]);
+            setInternalValue(undefined);
+        }
+    }, [value, possibleOperations[0]]);
+
     const isNullOperation = operation === "is-null";
 
     function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: Date | undefined | null) {