@firecms/core 3.0.0-canary.15 → 3.0.0-canary.151

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { getReferenceFrom } from "../../../util";
+import { getReferenceFrom, IconForView } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { Button } from "@firecms/ui";
+import { cls, EditIcon } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -22,6 +22,8 @@ type TableReferenceFieldProps = {
     title?: string;
     path: string;
     forceFilter?: FilterValues<string>;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 export function TableReferenceField(props: TableReferenceFieldProps) {
@@ -29,7 +31,7 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
 
     const navigationController = useNavigationController();
     const { path } = props;
-    const collection = navigationController.getCollection<EntityCollection>(path);
+    const collection = navigationController.getCollection(path);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={path}/>;
@@ -37,11 +39,11 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
             throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
         }
     }
-    return <TableReferenceFieldSuccess {...props} collection={collection}/>;
+    return <TableReferenceFieldInternal {...props} collection={collection}/>;
 }
 
-export const TableReferenceFieldSuccess = React.memo(
-    function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+export const TableReferenceFieldInternal = React.memo(
+    function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
         collection: EntityCollection;
     }) {
         const {
@@ -55,7 +57,9 @@ export const TableReferenceFieldSuccess = React.memo(
             title,
             disabled,
             forceFilter,
-            collection
+            collection,
+            includeId,
+            includeEntityLink
         } = props;
 
         const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
@@ -83,11 +87,11 @@ export const TableReferenceFieldSuccess = React.memo(
             }
         );
 
-        const handleOpen = useCallback(() => {
+        const handleOpen = () => {
             if (disabled)
                 return;
             referenceDialogController.open();
-        }, [disabled, referenceDialogController]);
+        };
 
         const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
 
@@ -100,6 +104,8 @@ export const TableReferenceFieldSuccess = React.memo(
                     hover={!disabled}
                     disabled={!path}
                     previewProperties={previewProperties}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}
                 />;
             else
                 return <EntityPreviewContainer
@@ -117,11 +123,13 @@ export const TableReferenceFieldSuccess = React.memo(
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
-                                size={"tiny"}
+                                size={"smallest"}
                                 reference={reference}
                                 hover={!disabled}
                                 disabled={!path}
                                 previewProperties={previewProperties}
+                                includeId={includeId}
+                                includeEntityLink={includeEntityLink}
                             />
                         </div>
                     )
@@ -142,13 +150,19 @@ export const TableReferenceFieldSuccess = React.memo(
                 {internalValue && multiselect && buildMultipleReferenceField()}
 
                 {valueNotSet &&
-                    <Button
+                    <EntityPreviewContainer
+                        className={cls("px-3 py-2 text-sm font-medium flex items-center",
+                            multiselect ? "gap-4" : "gap-6",
+                            disabled
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
                         onClick={handleOpen}
-                        size={"small"}
-                        variant="outlined"
-                        color="primary">
-                        Edit {title}
-                    </Button>}
+                        size={"medium"}>
+                        <EditIcon
+                            size={"small"}
+                            className={"ml-2 mr-1 text-surface-300 dark:text-surface-600"}/>
+                        {title}
+                    </EntityPreviewContainer>}
 
             </div>
         );

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -9,7 +9,7 @@ import { useSnackbarController, useStorageSource } from "../../../hooks";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageFieldItem, useStorageUploadController } from "../../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { cn, EditIcon, IconButton, Typography } from "@firecms/ui";
+import { cls, EditIcon, IconButton, Typography } from "@firecms/ui";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
 
 const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
@@ -179,10 +179,18 @@ function StorageUpload({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
@@ -207,7 +215,7 @@ function StorageUpload({
              onMouseEnter={() => setOnHover(true)}
              onMouseMove={() => setOnHover(true)}
              onMouseLeave={() => setOnHover(false)}
-             className={cn(dropZoneClasses,
+             className={cls(dropZoneClasses,
                  "relative w-full h-full flex",
                  `justify-${hasValue ? "start" : "center"}`,
                  isDragActive ? activeDropClasses : "",
@@ -251,7 +259,7 @@ function StorageUpload({
                 className="flex-grow m-2 max-w-[200px]"
                 onClick={open}>
                 <Typography
-                    className="text-gray-400 dark:text-gray-600"
+                    className="text-surface-400 dark:text-surface-600"
                     variant={"body2"}
                     align={"center"}>
                     {helpText}
@@ -268,7 +276,7 @@ function StorageUpload({
                     color={"inherit"}
                     size={"small"}
                     onClick={open}>
-                    <EditIcon size={"small"} className={"text-gray-500"}/>
+                    <EditIcon size={"small"} className={"text-surface-500"}/>
                 </IconButton>
             </EntityTableCellActions>
 

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import {
     Button,
     CircularProgress,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListOffIcon,
     SearchBar,
@@ -16,20 +16,27 @@ import { useLargeLayout } from "../../../hooks";
 
 interface CollectionTableToolbarProps {
     size: CollectionSize;
-    filterIsSet: boolean;
     loading: boolean;
-    forceFilter?: boolean;
     actionsStart?: React.ReactNode;
     actions?: React.ReactNode;
     title?: React.ReactNode,
     onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     onSizeChanged: (size: CollectionSize) => void;
-    clearFilter?: () => void;
     textSearchLoading?: boolean;
 }
 
-export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
+export function CollectionTableToolbar({
+                                           actions,
+                                           actionsStart,
+                                           loading,
+                                           onSizeChanged,
+                                           onTextSearch,
+                                           onTextSearchClick,
+                                           size,
+                                           textSearchLoading,
+                                           title
+                                       }: CollectionTableToolbarProps) {
 
     const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
@@ -37,30 +44,20 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
     const searchLoading = React.useRef<boolean>(false);
 
     useEffect(() => {
-        if (searchInputRef.current && searchLoading.current && !props.textSearchLoading) {
+        if (searchInputRef.current && searchLoading.current && !textSearchLoading) {
             searchInputRef.current.focus();
         }
-        searchLoading.current = props.textSearchLoading ?? false;
-    }, [props.textSearchLoading]);
-
-    const clearFilterButton = !props.forceFilter && props.filterIsSet && props.clearFilter &&
-        <Button
-            variant={"outlined"}
-            className="h-fit-content"
-            aria-label="filter clear"
-            onClick={props.clearFilter}
-            size={"small"}>
-            <FilterListOffIcon/>
-            Clear filter
-        </Button>;
+        searchLoading.current = textSearchLoading ?? false;
+    }, [textSearchLoading]);
+
 
     const sizeSelect = (
         <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
             <Select
-                value={props.size as string}
+                value={size as string}
                 className="w-16 h-10"
                 size={"small"}
-                onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
+                onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
             >
                 {["xs", "s", "m", "l", "xl"].map((size) => (
@@ -74,40 +71,38 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
 
     return (
         <div
-            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 
-                {props.title && <div className={"hidden lg:block"}>
-                    {props.title}
+                {title && <div className={"hidden lg:block"}>
+                    {title}
                 </div>}
 
                 {sizeSelect}
 
-                {props.actionsStart}
-
-                {clearFilterButton}
+                {actionsStart}
 
             </div>
 
             <div className="flex items-center gap-2">
 
                 {largeLayout && <div className="w-[22px]">
-                    {props.loading &&
+                    {loading &&
                         <CircularProgress size={"small"}/>}
                 </div>}
 
-                {(props.onTextSearch || props.onTextSearchClick) &&
+                {(onTextSearch || onTextSearchClick) &&
                     <SearchBar
                         key={"search-bar"}
                         inputRef={searchInputRef}
-                        loading={props.textSearchLoading}
-                        disabled={Boolean(props.onTextSearchClick)}
-                        onClick={props.onTextSearchClick}
-                        onTextSearch={props.onTextSearchClick ? undefined : props.onTextSearch}
+                        loading={textSearchLoading}
+                        disabled={Boolean(onTextSearchClick)}
+                        onClick={onTextSearchClick}
+                        onTextSearch={onTextSearchClick ? undefined : onTextSearch}
                         expandable={true}/>}
 
-                {props.actions}
+                {actions}
 
             </div>
 

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { VirtualTableSize } from "../../VirtualTable";
-import { getRowHeight } from "../../VirtualTable/common";
-import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
+import { getRowHeight, TableSize } from "../../common/table_height";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -19,7 +18,7 @@ interface EntityTableCellProps {
     error?: Error;
     allowScroll?: boolean;
     align: "right" | "left" | "center";
-    size: VirtualTableSize;
+    size: TableSize;
     disabledTooltip?: string;
     width: number;
     showExpandIcon?: boolean;
@@ -46,22 +45,21 @@ const TableCellInner = ({
                             children
                         }: TableCellInnerProps) => {
     return (
-        <div
-            className={cn("flex flex-col max-h-full w-full",
-                {
-                    "items-start": faded || scrollable
-                })}
-            style={{
-                justifyContent,
-                height: fullHeight ? "100%" : undefined,
-                overflow: scrollable ? "auto" : undefined,
-                WebkitMaskImage: faded
-                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
-                    : undefined,
-                maskImage: faded
-                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
-                    : undefined
-            }}
+        <div className={cls("flex flex-col max-h-full w-full",
+            {
+                "items-start": faded || scrollable
+            })}
+             style={{
+                 justifyContent,
+                 height: fullHeight ? "100%" : undefined,
+                 overflow: scrollable ? "auto" : undefined,
+                 WebkitMaskImage: faded
+                     ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                     : undefined,
+                 maskImage: faded
+                     ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                     : undefined
+             }}
         >
             {children}
         </div>
@@ -96,7 +94,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const [onHover, setOnHover] = useState(false);
         const [internalSaved, setInternalSaved] = useState(saved);
 
-        const showError = !disabled && error;
+        const showError = !disabled && Boolean(error);
 
         useEffect(() => {
             if (saved) {
@@ -157,8 +155,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         }, [ref, onSelect, selected, disabled]);
 
         const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
-            onSelectCallback();
             event.stopPropagation();
+            event.preventDefault();
+            onSelectCallback();
         }, [onSelectCallback]);
 
         const isOverflowing = useMemo(() => {
@@ -176,21 +175,26 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const borderClass = showError
+            ? "border-red-500"
+            : internalSaved
+                ? "border-green-500"
+                : isSelected
+                    ? "border-primary"
+                    : "border-transparent";
+
         return (
             <div
-                ref={ref}
-                className={cn(
+                className={cls(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
-                    onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
-                    saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
-                    !isSelected && !internalSaved && !showError ? "border-transparent" : "",
+                    onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
+                    saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
                     hideOverflow ? "overflow-hidden" : "",
-                    isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
-                    isSelected && !internalSaved ? "border-primary" : "",
-                    internalSaved ? "border-green-500 " : "",
-                    showError ? "border-red-500" : ""
+                    isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
+                    borderClass
                 )}
+                ref={ref}
                 style={{
                     justifyContent,
                     alignItems: disabled || !isOverflowing ? "center" : undefined,
@@ -199,11 +203,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 }}
                 tabIndex={selected || disabled ? undefined : 0}
                 onFocus={onFocus}
-                // onClick={onClick}
                 onMouseEnter={setOnHoverTrue}
                 onMouseMove={setOnHoverTrue}
                 onMouseLeave={setOnHoverFalse}
-                // contain={scrollable ? "content" : "size"}
             >
 
                 <ErrorBoundary>
@@ -234,7 +236,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
+                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
                         </Tooltip>
                     </div>}
 

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -11,7 +11,14 @@ export interface EntityTableCellActionsProps {
     children?: React.ReactNode;
 }
 
-export function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }: EntityTableCellActionsProps) {
+export function EntityTableCellActions({
+                                           showError,
+                                           disabled,
+                                           showExpandIcon,
+                                           selected,
+                                           openPopup,
+                                           children
+                                       }: EntityTableCellActionsProps) {
 
     const ref = useRef<HTMLDivElement>(null);
     const doOpenPopup = useCallback(() => {
@@ -54,13 +61,18 @@ export function EntityTableCellActions({ showError, disabled, showExpandIcon, se
 
                 {showError && <ErrorTooltip
                     side={"left"}
-                    className={"flex items-center justify-center"}
-                    style={{ width: 32, height: 32 }}
                     title={showError.message}>
-                    <ErrorOutlineIcon
-                        size={"small"}
-                        color={"error"}
-                    />
+                    <div
+                        className={"flex items-center justify-center"}
+                        style={{
+                            width: 32,
+                            height: 32
+                        }}>
+                        <ErrorOutlineIcon
+                            size={"small"}
+                            color={"error"}
+                        />
+                    </div>
                 </ErrorTooltip>
                 }