@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

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

@@ -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"
+                            });
+                        }
                     }
                 }
             }

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

@@ -45,22 +45,21 @@ const TableCellInner = ({
                             children
                         }: TableCellInnerProps) => {
     return (
-        <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
-            }}
+        <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>
@@ -156,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(() => {
@@ -203,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>

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>
                 }
 

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -27,7 +27,7 @@ import { useCustomizationController, useFireCMSContext } from "../../../../hooks
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
-    entity?: Entity<M>;
+    entity: Entity<M>;
     customFieldValidator?: CustomFieldValidator;
     path: string;
     tableKey: string;
@@ -74,7 +74,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         y: number
     }>();
 
-    const entityId = entityProp?.id;
+    const entityId = entityProp.id;
     const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
     // useEffect(() => {
     //     if (entityId && inputCollection) {
@@ -217,7 +217,6 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     if (!entity)
         return <></>;
 
-    // enableReinitialize={true}
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const formex = useCreateFormex<M>({
         initialValues: (entity?.values ?? {}) as EntityValues<M>,
@@ -264,7 +263,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         values,
         path,
         setFieldValue,
-        save: saveValue
+        save: saveValue,
+        formex
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
@@ -276,9 +276,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             includeDescription: false,
             underlyingValueHasChanged: false,
             context: formContext,
-            tableMode: true,
             partOfArray: false,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: open
         }
         : undefined;

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -7,7 +7,7 @@ import {
     CollectionSize,
     Entity,
     EntityAction,
-    EntityCollection,
+    EntityCollection, EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -45,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cls,
+    cls, focusedDisabled,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -117,7 +117,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
  *
  * @param fullPath
  * @param collection
- * @constructor
+
  * @group Components
  */
 export const EntityCollectionView = React.memo(
@@ -153,7 +153,7 @@ export const EntityCollectionView = React.memo(
         }, [collection]);
 
         const canCreateEntities = canCreateEntity(collection, authController, fullPath, null);
-        const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
+        const [highlightedEntity, setHighlightedEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
         const [lastDeleteTimestamp, setLastDeleteTimestamp] = React.useState<number>(0);
@@ -162,12 +162,12 @@ export const EntityCollectionView = React.memo(
         const [docsCount, setDocsCount] = useState<number>(0);
 
         const unselectNavigatedEntity = useCallback(() => {
-            const currentSelection = selectedNavigationEntity;
+            const currentSelection = highlightedEntity;
             setTimeout(() => {
-                if (currentSelection === selectedNavigationEntity)
-                    setSelectedNavigationEntity(undefined);
+                if (currentSelection === highlightedEntity)
+                    setHighlightedEntity(undefined);
             }, 2400);
-        }, [selectedNavigationEntity]);
+        }, [highlightedEntity]);
 
         const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
             const collection = collectionRef.current;
@@ -186,13 +186,12 @@ export const EntityCollectionView = React.memo(
         const usedSelectionController = collection.selectionController ?? selectionController;
         const {
             selectedEntities,
-            isEntitySelected,
             setSelectedEntities
         } = usedSelectionController;
 
-        useEffect(() => {
-            setDeleteEntityClicked(undefined);
-        }, [selectedEntities]);
+        // useEffect(() => {
+        //     setDeleteEntityClicked(undefined);
+        // }, [selectedEntities]);
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
@@ -208,9 +207,8 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
-            console.log("Entity clicked", clickedEntity)
             const collection = collectionRef.current;
-            setSelectedNavigationEntity(clickedEntity);
+            setHighlightedEntity(clickedEntity);
             analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
                 path: clickedEntity.path,
                 entityId: clickedEntity.id
@@ -266,6 +264,7 @@ export const EntityCollectionView = React.memo(
             fullPath: string,
             parentCollectionIds: string[],
             collection: EntityCollection;
+            tableController: EntityTableController;
         }> | undefined
 
         // we are only using the first plugin that implements this
@@ -306,7 +305,7 @@ export const EntityCollectionView = React.memo(
                  value,
                  property,
                  entityId
-             }) => dataSource.checkUniqueField(fullPath, name, value, entityId),
+             }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection),
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
@@ -368,12 +367,12 @@ export const EntityCollectionView = React.memo(
             return resolveProperty({
                 propertyKey,
                 propertyOrBuilder,
-                path: fullPath,
+                path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
                 fields: customizationController.propertyConfigs
             });
-        }, [collection.properties, customizationController.propertyConfigs, fullPath, resolvedCollection.properties]);
+        }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
@@ -419,7 +418,7 @@ export const EntityCollectionView = React.memo(
                                         <ReferencePreview
                                             key={reference.path + "/" + reference.id}
                                             reference={reference}
-                                            size={"tiny"}/>
+                                            size={"smallest"}/>
                                     );
                                 })}
                             </div>
@@ -467,7 +466,7 @@ export const EntityCollectionView = React.memo(
             return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
         };
 
-        const tableRowActionsBuilder = ({
+        const tableRowActionsBuilder = useCallback(({
                                             entity,
                                             size,
                                             width,
@@ -479,7 +478,7 @@ export const EntityCollectionView = React.memo(
             frozen?: boolean
         }) => {
 
-            const isSelected = isEntitySelected(entity);
+            const isSelected = usedSelectionController.selectedEntities.map(e => e.id).includes(entity.id);
 
             const actions = getActionsForEntity({
                 entity,
@@ -494,7 +493,7 @@ export const EntityCollectionView = React.memo(
                     isSelected={isSelected}
                     selectionEnabled={selectionEnabled}
                     size={size}
-                    highlightEntity={setSelectedNavigationEntity}
+                    highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
                     fullPath={fullPath}
@@ -505,7 +504,7 @@ export const EntityCollectionView = React.memo(
                 />
             );
 
-        };
+        }, [updateLastDeleteTimestamp, usedSelectionController]);
 
         const title = <Popover
             open={popOverOpen}
@@ -564,6 +563,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
+                            tableController={tableController}
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
@@ -574,7 +574,8 @@ export const EntityCollectionView = React.memo(
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
                                                parentCollectionIds={parentCollectionIds ?? []}
-                                               collection={collection}/>;
+                                               collection={collection}
+                                               tableController={tableController}/>;
                 return null;
             }
             : undefined;
@@ -607,7 +608,7 @@ export const EntityCollectionView = React.memo(
                     uniqueFieldValidator={uniqueFieldValidator}
                     title={title}
                     selectionController={usedSelectionController}
-                    highlightedEntities={selectedNavigationEntity ? [selectedNavigationEntity] : []}
+                    highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                     defaultSize={collection.defaultSize}
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
@@ -659,19 +660,19 @@ export const EntityCollectionView = React.memo(
                         collection={collection}/>}
                 />
 
-                <PopupFormField
+                {popupCell && <PopupFormField
                     key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entity?.id}`}
                     open={Boolean(popupCell)}
                     onClose={onPopupClose}
                     cellRect={popupCell?.cellRect}
                     propertyKey={popupCell?.propertyKey}
                     collection={collection}
-                    entity={popupCell?.entity}
+                    entity={popupCell.entity}
                     tableKey={tableKey.current}
                     customFieldValidator={uniqueFieldValidator}
                     path={resolvedFullPath}
                     onCellValueChange={onValueChange}
-                    container={containerRef.current}/>
+                    container={containerRef.current}/>}
 
                 {deleteEntityClicked &&
                     <DeleteEntityDialog
@@ -779,10 +780,13 @@ function EntityIdHeaderWidget({
     const [searchString, setSearchString] = React.useState("");
     const sideEntityController = useSideEntityController();
     return (
-        <Tooltip title={!openPopup ? "Find by ID" : undefined}>
+        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
                 trigger={
                     <IconButton size={"small"}>
                         <SearchIcon size={"small"}/>
@@ -812,7 +816,7 @@ function EntityIdHeaderWidget({
                                 setSearchString(e.target.value);
                             }}
                             value={searchString}
-                            className={"flex-grow bg-transparent outline-none p-1"}/>
+                            className={"flex-grow bg-transparent outline-none p-1 " + focusedDisabled}/>
                         <Button variant={"outlined"}
                                 disabled={!(searchString.trim())}
                                 type={"submit"}

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -7,19 +7,31 @@ export function useSelectionController<M extends Record<string, any> = any>(
 
     const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
 
-    const toggleEntitySelection = useCallback((entity: Entity<M>) => {
+    const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
-        if (selectedEntities.map(e => e.id).includes(entity.id)) {
-            onSelectionChange?.(entity, false);
-            newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+        if (newSelectedState === undefined) {
+            if (selectedEntities.map(e => e.id).includes(entity.id)) {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+            } else {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            }
         } else {
-            onSelectionChange?.(entity, true);
-            newValue = [...selectedEntities, entity];
+            if (newSelectedState) {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            } else {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+            }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
-    const isEntitySelected = useCallback((entity: Entity<M>) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]);
+    const isEntitySelected = useCallback((entity: Entity<M>) => {
+        return selectedEntities.map(e => e.id).includes(entity.id);
+    }, [selectedEntities]);
 
     return {
         selectedEntities,

package/src/components/EntityPreview.tsx

@@ -8,6 +8,7 @@ import {
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
     getValueInPath,
+    IconForView,
     resolveCollection
 } from "../util";
 import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
@@ -76,18 +77,18 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        {imageProperty && (
-            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
-                <PropertyPreview property={imageProperty}
-                                 propertyKey={imagePropertyKey as string}
-                                 size={"tiny"}
-                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
-            </div>
-        )}
-
-        <div className={"flex flex-col flex-grow w-full m-1"}>
-
-            {size !== "tiny" && includeId && (
+        <div className={cls("flex w-10 h-10 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
+            {imageProperty && <PropertyPreview property={imageProperty}
+                                               propertyKey={imagePropertyKey as string}
+                                               size={"smallest"}
+                                               value={getValueInPath(entity.values, imagePropertyKey as string)}/>}
+            {!imageProperty && <IconForView collectionOrView={collection} size={size} className={"m-auto"}/>}
+        </div>
+
+
+        <div className={"flex flex-col grow-1 w-full max-w-full m-1"}>
+
+            {size !== "smallest" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -131,10 +132,10 @@ export function EntityPreview({
                                     propertyKey={key as string}
                                     value={getValueInPath(entity.values, key)}
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"smallest"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"smallest"}/>
                         }
                     </div>
                 );
@@ -143,11 +144,11 @@ export function EntityPreview({
         </div>
 
         {entity && includeEntityLink &&
-            <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "tiny" ? "self-start" : ""}>
+            <Tooltip title={`See details for ${entity.id}`}>
                 <IconButton
                     color={"inherit"}
                     size={"small"}
+                    className={size !== "smallest" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -180,16 +181,17 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                       children,
-                                                                                                       hover,
-                                                                                                       onClick,
-                                                                                                       size,
-                                                                                                       style,
-                                                                                                       className,
-                                                                                                       fullwidth = true,
-                                                                                                       ...props
-                                                                                                   }, ref) => {
+
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size,
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
     return <div
         ref={ref}
         style={{
@@ -199,10 +201,11 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
         }}
         className={cls(
             "bg-white dark:bg-gray-900",
+            "min-h-[42px]",
             fullwidth ? "w-full" : "",
             "items-center",
             hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
-            size === "tiny" ? "p-1" : "p-2",
+            size === "smallest" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
@@ -217,7 +220,3 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
         {children}
     </div>;
 });
-
-EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-
-export const EntityPreviewContainer = React.memo(EntityPreviewContainerInner) as React.FC<EntityPreviewContainerProps>;

package/src/components/ErrorView.tsx

@@ -17,7 +17,7 @@ export interface ErrorViewProps {
  * @param title
  * @param error
  * @param tooltip
- * @constructor
+
  * @group Components
  */
 export function ErrorView({