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

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,34 @@ 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,
+    }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
         const currentSort: "asc" | "desc" | undefined = sortBy ? sortBy[1] : undefined;
@@ -234,7 +234,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 +285,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 +327,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);
@@ -397,7 +397,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 +429,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 +454,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 +475,7 @@ const SortableCellWrapper = ({
                 "flex-shrink-0",
                 frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
             )}
-            {...attributes}
+            {...attrsWithoutTabIndex}
         >
             {children}
         </div>
@@ -480,15 +483,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 +505,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 +572,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 +608,6 @@ const SafeLinkRenderer: React.FC<{
     });
 
     return (
-        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }}/>
+        <div className={"break-all"} dangerouslySetInnerHTML={{ __html: htmlContent }} />
     );
 };

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,
@@ -34,7 +35,7 @@ export type FilterFormFieldProps<CustomProps> = {
 };
 
 type VirtualTableHeaderProps<M extends Record<string, any>> = {
-    resizeHandleRef: RefObject<HTMLDivElement>;
+    resizeHandleRef: RefObject<HTMLDivElement | null>;
     columnIndex: number;
     isResizingIndex: number;
     column: VirtualTableColumn<any>;
@@ -51,20 +52,20 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     function VirtualTableHeader<M extends Record<string, any>>({
-                                                                   resizeHandleRef,
-                                                                   columnIndex,
-                                                                   isResizingIndex,
-                                                                   sort,
-                                                                   onColumnSort,
-                                                                   onFilterUpdate,
-                                                                   filter,
-                                                                   column,
-                                                                   onClickResizeColumn,
-                                                                   createFilterField,
-                                                                   AdditionalHeaderWidget,
-                                                                   isDragging,
-                                                                   isDraggable
-                                                               }: VirtualTableHeaderProps<M>) {
+        resizeHandleRef,
+        columnIndex,
+        isResizingIndex,
+        sort,
+        onColumnSort,
+        onFilterUpdate,
+        filter,
+        column,
+        onClickResizeColumn,
+        createFilterField,
+        AdditionalHeaderWidget,
+        isDragging,
+        isDraggable
+    }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
 
@@ -129,11 +130,11 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     <>
 
                         {AdditionalHeaderWidget &&
-                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
+                            <AdditionalHeaderWidget onHover={onHover || openFilter} />}
 
                         {column.sortable && (sort || hovered || openFilter) &&
                             <Badge color="secondary"
-                                   invisible={!sort}>
+                                invisible={!sort}>
                                 <IconButton
                                     size={"small"}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
@@ -142,11 +143,11 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                     }}
                                 >
                                     {!sort &&
-                                        <ArrowUpwardIcon/>}
+                                        <ArrowUpwardIcon />}
                                     {sort === "asc" &&
-                                        <ArrowUpwardIcon/>}
+                                        <ArrowUpwardIcon />}
                                     {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"}/>}
+                                        <ArrowUpwardIcon className={"rotate-180"} />}
                                 </IconButton>
                             </Badge>
                         }
@@ -154,7 +155,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.filter && createFilterField && <div>
                         <Badge color="secondary"
-                               invisible={!filter}>
+                            invisible={!filter}>
 
                             <Popover
                                 open={openFilter}
@@ -166,16 +167,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <FilterListIcon size={"small"}/>
+                                        <FilterListIcon size={"small"} />
                                     </IconButton>}
                             >
                                 <FilterForm column={column}
-                                            filter={filter}
-                                            onHover={onHover}
-                                            onFilterUpdate={update}
-                                            createFilterField={createFilterField}
-                                            hidden={hidden}
-                                            setHidden={setHidden}/>
+                                    filter={filter}
+                                    onHover={onHover}
+                                    onFilterUpdate={update}
+                                    createFilterField={createFilterField}
+                                    hidden={hidden}
+                                    setHidden={setHidden} />
 
                             </Popover>
 
@@ -204,14 +205,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
     }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
 
 function FilterForm<M>({
-                           column,
-                           onFilterUpdate,
-                           filter,
-                           onHover,
-                           createFilterField,
-                           hidden,
-                           setHidden
-                       }: FilterFormProps<M>) {
+    column,
+    onFilterUpdate,
+    filter,
+    onHover,
+    createFilterField,
+    hidden,
+    setHidden
+}: FilterFormProps<M>) {
+
+    const { t } = useTranslation();
 
     const id = column.key;
 
@@ -245,12 +248,12 @@ function FilterForm<M>({
     if (!filterField) return null;
     return (
         <form noValidate={true}
-              onSubmit={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  submit();
-              }}
-              className={"text-surface-900 dark:text-white"}>
+            onSubmit={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                submit();
+            }}
+            className={"text-surface-900 dark:text-white"}>
             <div
                 className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
@@ -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/VirtualTable/VirtualTableHeaderRow.tsx

@@ -26,7 +26,7 @@ const SortableColumnHeader = ({
 }: {
     column: VirtualTableColumn;
     columnIndex: number;
-    columnRefs: React.RefObject<HTMLDivElement>[];
+    columnRefs: React.RefObject<HTMLDivElement | null>[];
     isResizing: number;
     onFilterUpdate: any;
     filter: [VirtualTableWhereFilterOp, any] | undefined;

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -79,7 +79,7 @@ export function VirtualTableSelect(props: {
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                className="w-full h-full p-0 bg-transparent"
+                className="w-full h-full p-0 bg-transparent outline-none"
                 position={"item-aligned"}
                 disabled={disabled}
                 includeClear={false}
@@ -104,8 +104,8 @@ export function VirtualTableSelect(props: {
                 inputRef={ref}
                 size={"large"}
                 fullWidth={true}
-                className="w-full h-full p-0 bg-transparent"
-                inputClassName="focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none"
+                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
                 position={"item-aligned"}
                 disabled={disabled}
                 padding={false}