@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

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/VirtualTable.tsx

@@ -42,52 +42,52 @@ type InnerElementProps = {
 
 // eslint-disable-next-line react/display-name
 const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
-                                                                            children,
-                                                                            ...rest
-                                                                        }: InnerElementProps, ref) => {
-
-        return (
-            <VirtualListContext.Consumer>
-                {(virtualTableProps) => {
-                    const customView = virtualTableProps.customView;
-                    return (
-                        <>
+    children,
+    ...rest
+}: InnerElementProps, ref) => {
+
+    return (
+        <VirtualListContext.Consumer>
+            {(virtualTableProps) => {
+                const customView = virtualTableProps.customView;
+                return (
+                    <>
+                        <div
+                            id={"virtual-table"}
+                            style={{
+                                position: "relative",
+                                height: "100%"
+                            }}>
                             <div
-                                id={"virtual-table"}
+                                ref={ref}
+                                {...rest}
                                 style={{
-                                    position: "relative",
-                                    height: "100%"
+                                    ...rest?.style,
+                                    minHeight: "100%",
+                                    position: "relative"
                                 }}>
-                                <div
-                                    ref={ref}
-                                    {...rest}
-                                    style={{
-                                        ...rest?.style,
-                                        minHeight: "100%",
-                                        position: "relative"
-                                    }}>
-                                    <VirtualTableHeaderRow {...virtualTableProps} />
-                                    {!customView && children}
-                                </div>
-
+                                <VirtualTableHeaderRow {...virtualTableProps} />
+                                {!customView && children}
                             </div>
 
-                            {customView && <div style={{
-                                position: "sticky",
-                                top: "48px",
-                                flexGrow: 1,
-                                height: "calc(100% - 48px)",
-                                marginTop: "calc(48px - 100vh)",
-                                left: 0
-                            }}>{customView}</div>}
-
-                        </>
-                    );
-                }}
-            </VirtualListContext.Consumer>
-        );
-    })
-;
+                        </div>
+
+                        {customView && <div style={{
+                            position: "sticky",
+                            top: "48px",
+                            flexGrow: 1,
+                            height: "calc(100% - 48px)",
+                            marginTop: "calc(48px - 100vh)",
+                            left: 0
+                        }}>{customView}</div>}
+
+                    </>
+                );
+            }}
+        </VirtualListContext.Consumer>
+    );
+})
+    ;
 
 /**
  * This is a Table component that allows displaying arbitrary data, not
@@ -99,34 +99,35 @@ const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
  */
 export const VirtualTable = React.memo<VirtualTableProps<any>>(
     function VirtualTable<T extends Record<string, any>>({
-                                                             data,
-                                                             onResetPagination,
-                                                             onEndReached,
-                                                             endOffset = 600,
-                                                             rowHeight = 54,
-                                                             columns: columnsProp,
-                                                             onRowClick,
-                                                             onColumnResize,
-                                                             filter: filterInput,
-                                                             checkFilterCombination,
-                                                             onFilterUpdate,
-                                                             sortBy,
-                                                             error,
-                                                             emptyComponent,
-                                                             onSortByUpdate,
-                                                             onScroll: onScrollProp,
-                                                             loading,
-                                                             cellRenderer,
-                                                             hoverRow,
-                                                             createFilterField,
-                                                             rowClassName,
-                                                             style,
-                                                             className,
-                                                             endAdornment,
-                                                             AddColumnComponent,
-                                                             initialScroll = 0,
-                                                             onColumnsOrderChange,
-                                                         }: VirtualTableProps<T>) {
+        data,
+        onResetPagination,
+        onEndReached,
+        endOffset = 600,
+        rowHeight = 54,
+        columns: columnsProp,
+        onRowClick,
+        onColumnResize,
+        filter: filterInput,
+        checkFilterCombination,
+        onFilterUpdate,
+        sortBy,
+        error,
+        emptyComponent,
+        onSortByUpdate,
+        onScroll: onScrollProp,
+        loading,
+        cellRenderer,
+        hoverRow,
+        createFilterField,
+        rowClassName,
+        style,
+        className,
+        endAdornment,
+        AddColumnComponent,
+        initialScroll = 0,
+        onColumnsOrderChange,
+        headerIconSize,
+    }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
         const currentSort: "asc" | "desc" | undefined = sortBy ? sortBy[1] : undefined;
@@ -211,7 +212,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [tableRef]);
 
         const [measureRef, bounds] = useMeasure({
-            debounce: 50,
+            debounce: 0,
             polyfill: ResizeObserver,
             scroll: true,
             // This is important for handling zooming in react-flow
@@ -234,7 +235,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [columns, onColumnResize]);
 
         // saving the current filter as a ref as a workaround for header closure
-        const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
+        const filterRef = useRef<VirtualTableFilterValues<any> | undefined>(undefined);
 
         useEffect(() => {
             filterRef.current = filterInput;
@@ -285,10 +286,10 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [data?.length, onEndReached]);
 
         const onScroll = useCallback(({
-                                          scrollDirection,
-                                          scrollOffset,
-                                          scrollUpdateWasRequested
-                                      }: {
+            scrollDirection,
+            scrollOffset,
+            scrollUpdateWasRequested
+        }: {
             scrollDirection: "forward" | "backward",
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
@@ -327,21 +328,21 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error
             ? <CenteredView maxWidth={"2xl"}
-                            className="flex flex-col gap-2">
+                className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
                     {"Error"}
                 </Typography>
 
-                {error?.message && <SafeLinkRenderer text={error.message}/>}
+                {error?.message && <SafeLinkRenderer text={error.message} />}
 
             </CenteredView>
             : (empty
                 ? (loading
-                    ? <CircularProgressCenter/>
+                    ? <CircularProgressCenter />
                     : <div
                         className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
-                        <AssignmentIcon/>
+                        <AssignmentIcon />
                         {emptyComponent}
                     </div>)
                 : undefined);
@@ -369,8 +370,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 setColumns(newColumns);
                 onColumnsOrderChange(newColumns);
             } : undefined,
-            draggingColumnId
-        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId]);
+            draggingColumnId,
+            headerIconSize,
+        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId, headerIconSize]);
 
         // Get sortable column keys (excluding frozen columns)
         const sortableColumnKeys = columns
@@ -397,7 +399,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={draggingColumnId ? undefined : onScroll}
                         includeAddColumn={Boolean(AddColumnComponent)}
-                        itemSize={rowHeight}/>
+                        itemSize={rowHeight} />
 
                 </VirtualListContext.Provider>
             </div>
@@ -429,13 +431,13 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 );
 // Wrapper that applies sortable transforms to cells
 const SortableCellWrapper = ({
-                                 columnKey,
-                                 width,
-                                 isDragging,
-                                 isDraggable,
-                                 frozen,
-                                 children
-                             }: {
+    columnKey,
+    width,
+    isDragging,
+    isDraggable,
+    frozen,
+    children
+}: {
     columnKey: string;
     width: number;
     isDragging: boolean;
@@ -454,6 +456,9 @@ const SortableCellWrapper = ({
         disabled: !isDraggable || frozen
     });
 
+    // Remove tabIndex from attributes to avoid capturing focus before cell content
+    const { tabIndex: _tabIndex, ...attrsWithoutTabIndex } = attributes;
+
     const style = {
         // Only use translate, ignore any scale transforms
         transform: transform ? `translateX(${transform.x}px)` : undefined,
@@ -472,7 +477,7 @@ const SortableCellWrapper = ({
                 "flex-shrink-0",
                 frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
             )}
-            {...attributes}
+            {...attrsWithoutTabIndex}
         >
             {children}
         </div>
@@ -480,15 +485,15 @@ const SortableCellWrapper = ({
 };
 
 function MemoizedList({
-                          outerRef,
-                          width,
-                          height,
-                          itemCount,
-                          onScroll,
-                          itemSize,
-                          includeAddColumn
-                      }: {
-    outerRef: RefObject<HTMLDivElement>;
+    outerRef,
+    width,
+    height,
+    itemCount,
+    onScroll,
+    itemSize,
+    includeAddColumn
+}: {
+    outerRef: RefObject<HTMLDivElement | null>;
     width: number;
     height: number;
     itemCount: number;
@@ -502,22 +507,22 @@ function MemoizedList({
 }) {
 
     const Row = useCallback(({
-                                 index,
-                                 style
-                             }: any) => {
+        index,
+        style
+    }: any) => {
         return <VirtualListContext.Consumer>
             {({
-                  onRowClick,
-                  data,
-                  columns,
-                  rowHeight = 54,
-                  cellRenderer,
-                  hoverRow,
-                  rowClassName,
-                  endAdornment,
-                  draggingColumnId,
-                  onColumnsOrderChange
-              }) => {
+                onRowClick,
+                data,
+                columns,
+                rowHeight = 54,
+                cellRenderer,
+                hoverRow,
+                rowClassName,
+                endAdornment,
+                draggingColumnId,
+                onColumnsOrderChange
+            }) => {
 
                 if (endAdornment && index === (data ?? []).length) {
                     return <div style={{
@@ -569,12 +574,12 @@ function MemoizedList({
                                         rowData={rowData}
                                         cellData={cellData}
                                         rowIndex={index}
-                                        columnIndex={columnIndex}/>
+                                        columnIndex={columnIndex} />
                                 </SortableCellWrapper>
                             );
                         })}
 
-                        {includeAddColumn && <div className={"w-20"}/>}
+                        {includeAddColumn && <div className={"w-20"} />}
 
                     </VirtualTableRow>
                 );
@@ -605,6 +610,6 @@ const SafeLinkRenderer: React.FC<{
     });
 
     return (
-        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }}/>
+        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }} />
     );
 };