@firecms/core 3.1.0 → 3.2.0-canary.4c3b8f2

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) {

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

@@ -3,7 +3,7 @@ import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import { Entity, EntityCollection, EntityReference } from "../../../types";
 import { ReferencePreview } from "../../../preview";
 import { getReferenceFrom } from "../../../util";
-import { useNavigationController, useReferenceDialog } from "../../../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../../../hooks";
 import { Button, Checkbox, Label, Select, SelectItem } from "@firecms/ui";
 
 interface ReferenceFilterFieldProps {
@@ -44,6 +44,8 @@ export function ReferenceFilterField({
     setHidden
 }: ReferenceFilterFieldProps) {
 
+    const { t } = useTranslation();
+
     const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
@@ -58,6 +60,17 @@ export function ReferenceFilterField({
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
     const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
 
+    React.useEffect(() => {
+        if (value) {
+            const [op, val] = value;
+            setOperation(op);
+            setInternalValue(val);
+        } else {
+            setOperation(possibleOperations[0] as VirtualTableWhereFilterOp);
+            setInternalValue(undefined);
+        }
+    }, [value, possibleOperations[0]]);
+
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
             if (!(ref?.isEntityReference && ref?.isEntityReference())) {
@@ -192,7 +205,7 @@ export function ReferenceFilterField({
                                 updateFilter(operation, null);
                             else updateFilter(operation, undefined);
                         }} />
-                    Filter for null values
+                    {t("filter_for_null_values")}
                 </Label>}
 
             </div>

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

@@ -61,6 +61,17 @@ export function StringNumberFilterField({
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | 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: string | number | string[] | number[] | null | undefined) {

package/src/components/UnsavedChangesDialog.tsx

@@ -1,4 +1,6 @@
+import React from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;
@@ -15,7 +17,7 @@ export function UnsavedChangesDialog({
                                          body,
                                          title
                                      }: UnsavedChangesDialogProps) {
-
+    const { t } = useTranslation();
     return (
         <Dialog
             onEscapeKeyDown={() => {
@@ -29,15 +31,15 @@ export function UnsavedChangesDialog({
                 {body}
 
                 <Typography>
-                    Are you sure you want to leave this page?
+                    {t("are_you_sure_leave")}
                 </Typography>
 
             </DialogContent>
             <DialogActions>
                 <Button variant="text"
-                        onClick={handleCancel} autoFocus> Cancel </Button>
+                        onClick={handleCancel} autoFocus> {t("cancel")} </Button>
                 <Button
-                    onClick={handleOk}> Ok </Button>
+                    onClick={handleOk}> {t("ok")} </Button>
             </DialogActions>
         </Dialog>
     );

package/src/components/VirtualTable/VirtualTable.performance.test.tsx

@@ -3,6 +3,7 @@
  * @jest-environment jsdom
  */
 import React from 'react';
+/* eslint-disable i18next/no-literal-string */
 import { render, act } from '@testing-library/react';
 import { VirtualTable } from './VirtualTable';
 import { VirtualTableProps } from './VirtualTableProps';

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -2,6 +2,7 @@ import React, { RefObject, useCallback, useEffect, useState } from "react";
 import equal from "react-fast-compare";
 
 import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { useTranslation } from "../../hooks";
 import { ErrorBoundary } from "../ErrorBoundary";
 import {
     ArrowUpwardIcon,
@@ -213,6 +214,8 @@ function FilterForm<M>({
     setHidden
 }: FilterFormProps<M>) {
 
+    const { t } = useTranslation();
+
     const id = column.key;
 
     const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, any] | undefined>(filter);
@@ -258,16 +261,15 @@ function FilterForm<M>({
             {filterField && <div className="m-4 w-[400px]">
                 {filterField}
             </div>}
-            <div className="flex justify-end m-4">
-                <Button
-                    className="mr-4"
-                    disabled={!filterIsSet}
-                    variant={"text"}
-                    type="reset"
-                    aria-label="filter clear"
-                    onClick={reset}>Clear</Button>
-                <Button
-                    type="submit">Filter</Button>
+            <div className="flex justify-end p-4 pt-0 gap-2">
+                <Button variant={"text"}
+                        size={"small"}
+                        aria-label="filter clear"
+                        onClick={reset}>{t("clear")}</Button>
+
+                <Button variant={"outlined"}
+                        size={"small"}
+                        type="submit">{t("filter")}</Button>
             </div>
         </form>
     );

package/src/components/common/default_entity_actions.tsx

@@ -1,3 +1,7 @@
+// Note: entity action 'name' fields (Edit, Copy, Delete) are plain strings defined
+// at module level. They cannot use hooks. Consumers who need to translate these
+// should override the action name by creating their own EntityAction objects or
+// by using the entityActions prop with custom names for their locale.
 import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";