@firecms/core 3.0.0-beta.13 → 3.0.0-beta.14

package/src/components/ClearFilterSortButton.tsx

@@ -18,7 +18,7 @@ export function ClearFilterSortButton({
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
         let label;
         if (filterIsSet && sortIsSet) {
-            label = "Clear filter and sort";
+            label = "Clear filter/sort";
         } else if (filterIsSet) {
             label = "Clear filter";
         } else {

package/src/components/ConfirmationDialog.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
 
 export function ConfirmationDialog({
-                                             open,
-                                             onAccept,
-                                             onCancel,
-                                             title,
-                                             loading,
-                                             body
-                                         }: {
+                                       open,
+                                       onAccept,
+                                       onCancel,
+                                       title,
+                                       loading,
+                                       body
+                                   }: {
     open: boolean,
     onAccept: () => void,
     onCancel: () => void,
@@ -38,7 +38,7 @@ export function ConfirmationDialog({
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
-                >
+                    autoFocus>
                     Ok
                 </LoadingButton>
             </DialogActions>

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -394,7 +394,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     size={size}
                                     multiselect={true}
                                     path={arrayProperty.of.path}
-                                    previewProperties={arrayProperty.of.previewProperties}
+                                    previewProperties={arrayProperty.of.previewKeys}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
                                     includeId={arrayProperty.of.includeId}

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

@@ -55,7 +55,7 @@ export function CollectionTableToolbar({
         <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
             <Select
                 value={size as string}
-                className="w-16 h-10"
+                className="w-16 ml-2"
                 size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}

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

@@ -5,6 +5,7 @@ import useMeasure from "react-use-measure";
 import { cls, DoNotDisturbOnIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 import { getRowHeight, TableSize } from "../../common/table_height";
+import { ErrorTooltip } from "../../ErrorTooltip";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -183,7 +184,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     ? "border-primary"
                     : "border-transparent";
 
-        return (
+        const result = <>
             <div
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
@@ -241,7 +242,17 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     </div>}
 
             </div>
-        );
+        </>;
+        if (showError) {
+            return (
+                <ErrorTooltip
+                    align={"start"}
+                    title={error?.message ?? "Error"}>
+                    {result}
+                </ErrorTooltip>
+            );
+        }
+        return result;
     }, (a, b) => {
         return a.error === b.error &&
             a.value === b.value &&

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

@@ -17,7 +17,6 @@ import { Formex, useCreateFormex } from "@firecms/formex";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
-import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
@@ -71,7 +70,7 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
                 collection: inputCollection
             }).then(setEntity);
         }
-    }, [entityId, inputCollection]);
+    }, [entityId, inputCollection, dataSource, path]);
 
     if (!entity) return null;
     return <PopupFormFieldInternal {...{
@@ -147,33 +146,35 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         };
     }, [cellRect, windowSize.height, windowSize.width]);
 
-    const normalizePosition = useCallback(({
-                                               x,
-                                               y
-                                           }: { x: number, y: number }) => {
-
-        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!draggableBoundingRect)
-            throw Error("normalizePosition called before draggableBoundingRect is set");
-
+    const normalizePosition = useCallback((
+        pos: { x: number, y: number },
+        draggableBoundingRect: DOMRect,
+        currentWindowSize: { width: number, height: number }
+    ) => {
+        if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return pos;
+        }
         return {
-            x: Math.max(0, Math.min(x, windowSize.width - draggableBoundingRect.width)),
-            y: Math.max(0, Math.min(y, windowSize.height - draggableBoundingRect.height))
+            x: Math.max(0, Math.min(pos.x, currentWindowSize.width - draggableBoundingRect.width)),
+            y: Math.max(0, Math.min(pos.y, currentWindowSize.height - draggableBoundingRect.height))
         };
-    }, [windowSize]);
+    }, []);
 
-    const updatePopupLocation = useCallback((position?: {
+    const updatePopupLocation = useCallback((newPositionCandidate?: {
         x: number,
         y: number
     }) => {
-
         const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!cellRect || !draggableBoundingRect) return;
-        // const newPosition = normalizePosition(position ?? getInitialLocation());
-        const newPosition = position ?? normalizePosition(getInitialLocation());
-        if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y)
-            setPopupLocation(newPosition);
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+        if (!cellRect || !draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return;
+        }
+        const basePosition = newPositionCandidate ?? getInitialLocation();
+        const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect, windowSize);
+
+        if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
+            setPopupLocation(newNormalizedPosition);
+        }
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
 
     useDraggable({
         containerRef: draggableRef,
@@ -192,19 +193,25 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     useLayoutEffect(
         () => {
+            if (!cellRect || initialPositionSet.current) return;
+            // Ensure draggableRef is available and has dimensions before initial positioning
             const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-            if (!cellRect || !draggableBoundingRect || initialPositionSet.current) return;
+            if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+                // If not ready, perhaps wait or log. For now, just return.
+                // This might need a retry mechanism or ensure content is rendered first.
+                return;
+            }
             updatePopupLocation();
             initialPositionSet.current = true;
         },
-        [cellRect, updatePopupLocation, initialPositionSet.current]
+        [cellRect, updatePopupLocation] // Removed initialPositionSet.current from deps as it's a ref
     );
 
     useLayoutEffect(
         () => {
             updatePopupLocation(popupLocation);
         },
-        [windowSize, cellRect]
+        [windowSize, cellRect, updatePopupLocation, popupLocation]
     );
 
     const validationSchema = useMemo(() => {
@@ -218,9 +225,28 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     }, [collection, entityId, propertyKey, customFieldValidator]);
 
     const adaptResize = useCallback(() => {
+        // When the popup resizes, we want to re-evaluate its position
+        // based on its current location and new dimensions.
         return updatePopupLocation(popupLocation);
     }, [popupLocation, updatePopupLocation]);
 
+    // Setup ResizeObserver
+    useEffect(() => {
+        const element = draggableRef.current;
+        if (!element) return;
+
+        const observer = new ResizeObserver(() => {
+            adaptResize();
+        });
+
+        observer.observe(element);
+
+        return () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        };
+    }, [adaptResize, draggableRef]);
+
     const saveValue = async (values: M) => {
         setSavingError(null);
         if (inputCollection && entity && onCellValueChange && propertyKey) {
@@ -288,7 +314,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             underlyingValueHasChanged: false,
             context: formContext,
             partOfArray: false,
-            minimalistView: false,
+            minimalistView: true,
             autoFocus: open
         }
         : undefined;
@@ -372,7 +398,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             } cursor-grab overflow-visible`}
             ref={draggableRef}>
 
-            <ElementResizeListener onResize={adaptResize}/>
+            {/* ElementResizeListener removed from here */}
 
             <div
                 className="overflow-hidden">

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

@@ -1,9 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 
 interface DraggableProps {
     containerRef: React.RefObject<HTMLDivElement>,
     innerRef: React.RefObject<HTMLDivElement>,
-    // ref: React.RefObject<HTMLDivElement>,
     x?: number;
     y?: number;
     onMove: (params: { x: number, y: number }) => void,
@@ -22,7 +21,7 @@ export function useDraggable({
 
     const listeningRef = React.useRef(false);
 
-    const onMouseDown = (event: any) => {
+    const onMouseDown = useCallback((event: any) => {
         if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
             return;
         }
@@ -39,16 +38,17 @@ export function useDraggable({
         document.addEventListener("selectstart", onSelect);
         listeningRef.current = true;
         // event.stopPropagation();
-    };
-    const onMouseDownInner = (event: any) => {
+    }, [containerRef, onMove]);
+
+    const onMouseDownInner = useCallback((event: any) => {
         // @ts-ignore
         event.innerClicked = true;
-    };
+    }, [])
 
-    const onSelect = (event: any) => {
+    const onSelect = useCallback((event: any) => {
         event.preventDefault()
         event.stopPropagation();
-    };
+    }, [])
 
     const onMouseUp = (event: any) => {
         document.removeEventListener("mousemove", onMouseMove);
@@ -92,6 +92,6 @@ export function useDraggable({
             if (innerCurrent)
                 innerCurrent.removeEventListener("mousedown", onMouseDownInner);
         };
-    });
+    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
 
 }

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -425,6 +425,7 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => (
                         <Button color={"primary"}
                                 variant={"outlined"}
+                                className={"max-w-full truncate justify-start"}
                                 startIcon={<KeyboardTabIcon size={"small"}/>}
                                 onClick={(event: any) => {
                                     event.stopPropagation();
@@ -749,10 +750,13 @@ export const EntityCollectionView = React.memo(
             equal(a.defaultSize, b.defaultSize) &&
             equal(a.initialFilter, b.initialFilter) &&
             equal(a.initialSort, b.initialSort) &&
+            equal(a.includeJsonView, b.includeJsonView) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.openEntityMode, b.openEntityMode) &&
+            equal(a.exportable, b.exportable) &&
+            equal(a.history, b.history) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 

package/src/components/EntityPreview.tsx

@@ -7,6 +7,7 @@ import {
     getEntityImagePreviewPropertyKey,
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
+    getPropertyInPath,
     getValueInPath,
     IconForView,
     resolveCollection
@@ -26,11 +27,13 @@ export type EntityPreviewProps = {
     actions?: React.ReactNode,
     collection?: EntityCollection,
     hover?: boolean;
-    previewProperties?: string[],
+    previewKeys?: string[],
     disabled?: boolean,
     entity: Entity<any>,
     includeId?: boolean,
+    includeTitle?: boolean,
     includeEntityLink?: boolean,
+    includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -43,12 +46,14 @@ export function EntityPreview({
                                   disabled,
                                   hover,
                                   collection: collectionProp,
-                                  previewProperties,
+                                  previewKeys,
                                   onClick,
                                   size,
                                   includeId = true,
+                                  includeTitle = true,
                                   includeEntityLink = true,
-                                  entity
+                                  includeImage = true,
+                                  entity,
                               }: EntityPreviewProps) {
 
     const authController = useAuthController();
@@ -72,11 +77,11 @@ export function EntityPreview({
         authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
+    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1),
+        [previewKeys, resolvedCollection, size]);
 
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : undefined;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : undefined;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
     const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
@@ -103,9 +108,7 @@ export function EntityPreview({
         </div>
 
 
-        <div className={"flex flex-col grow-1 w-full m-1 shrink-1"} style={{
-            "maxWidth": "calc(100% - 96px)"
-        }}>
+        <div className={"flex flex-col grow w-full m-1 shrink min-w-0"}>
 
             {size !== "small" && includeId && (
                 entity
@@ -135,9 +138,10 @@ export function EntityPreview({
             )}
 
             {restProperties && restProperties.map((key) => {
-                const childProperty = resolvedCollection.properties[key as string];
+                const childProperty = getPropertyInPath(resolvedCollection.properties, key);
                 if (!childProperty) return null;
 
+                const valueInPath = getValueInPath(entity.values, key);
                 return (
                     <div key={"ref_prev_" + key}
                          className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
@@ -145,7 +149,7 @@ export function EntityPreview({
                             entity
                                 ? <PropertyPreview
                                     propertyKey={key as string}
-                                    value={getValueInPath(entity.values, key)}
+                                    value={valueInPath}
                                     property={childProperty as ResolvedProperty}
                                     size={"small"}/>
                                 : <SkeletonPropertyComponent
@@ -162,7 +166,7 @@ export function EntityPreview({
             <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
                 <IconButton
                     color={"inherit"}
-                    size={"medium"}
+                    size={"small"}
                     className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
@@ -177,7 +181,7 @@ export function EntityPreview({
                             updateUrl: true
                         });
                     }}>
-                    <KeyboardTabIcon size={"medium"}/>
+                    <KeyboardTabIcon size={"small"}/>
                 </IconButton>
             </Tooltip>}
 

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", error)
+    // console.warn("ErrorView", error)
 
     const body = (
         <div

package/src/components/HomePage/DefaultHomePage.tsx

@@ -114,6 +114,7 @@ export function DefaultHomePage({
                     );
                 })}
         </>;
+
         additionalPluginChildrenStart = <div className={"flex flex-col gap-2"}>
             {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenStart)
                 .map((plugin, i) => {
@@ -179,7 +180,7 @@ export function DefaultHomePage({
 
                             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                 {thisGroupCollections.map((entry) => (
-                                    <div key={`nav_${entry.group}_${entry.name}`} className="col-span-1">
+                                    <div key={`nav_${entry.group}_${entry.path}_${entry.name}`} className="col-span-1">
                                         <NavigationCardBinding
                                             {...entry}
                                             onClick={() => {

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -7,6 +7,7 @@ import { useUserConfigurationPersistence } from "../../hooks/useUserConfiguratio
 import { IconButton, StarIcon } from "@firecms/ui";
 import { NavigationCard } from "./NavigationCard";
 import { SmallNavigationCard } from "./SmallNavigationCard";
+import React from "react";
 
 /**
  * This is the component used in the home page to render a card for each
@@ -47,6 +48,7 @@ export function NavigationCardBinding({
         ? [
             <IconButton
                 key={"favourite"}
+                size={"small"}
                 onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -61,7 +63,7 @@ export function NavigationCardBinding({
                     }
                 }}>
                 <StarIcon
-                    size={18}
+                    size={"small"}
                     className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
             </IconButton>
         ]