@firecms/core 3.0.0-canary.246 → 3.0.0-canary.247

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.246",
+  "version": "3.0.0-canary.247",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.246",
-    "@firecms/formex": "^3.0.0-canary.246",
-    "@firecms/ui": "^3.0.0-canary.246",
+    "@firecms/editor": "^3.0.0-canary.247",
+    "@firecms/formex": "^3.0.0-canary.247",
+    "@firecms/ui": "^3.0.0-canary.247",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "0ba87a9533643d2d58455e02e99b4cab92beaf64",
+  "gitHead": "1383c05197c9ef33c04ee394c6455bb18e03bc94",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ArrayContainer.tsx

@@ -488,6 +488,7 @@ export function ArrayContainer<T>({
                                 disabled={disabled || (value?.length ?? 0) >= max}
                                 startIcon={<AddIcon/>}
                                 onClick={insertInEnd}
+                                className={"ml-3.5"}
                             >
                                 {addLabel ?? "Add"}
                             </Button>

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) {
@@ -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();

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

package/src/form/PropertyFieldBinding.tsx

@@ -214,7 +214,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
     const customFieldProps: any = property.customProps;
     const value = formexFieldProps.field.value;
-    // const initialValue = formexFieldProps.meta.initialValue;
     const error = getIn(formexFieldProps.form.errors, propertyKey);
     const touched = getIn(formexFieldProps.form.touched, propertyKey);
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -6,7 +6,7 @@ import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -127,11 +127,12 @@ export function ArrayOfReferencesFieldBinding({
             />
 
             <Button
-                className="my-4 justify-center text-left"
+                className="ml-3.5 my-4 justify-center text-left"
                 variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
+                <EditIcon size={"small"}/>
                 Edit {property.name}
             </Button>
         </div>}

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -21,6 +21,7 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
+                                    partOfArray,
                                     minimalistView: minimalistViewProp,
                                     includeDescription,
                                     autoFocus,
@@ -51,7 +52,8 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-            <div className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            <div
+                className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
                 {Object.entries(mapProperties)
                     .filter(([_, property]) => !isHidden(property))
                     .map(([entryKey, childProperty], index) => {
@@ -81,8 +83,7 @@ export function MapFieldBinding({
                                             {...fieldBindingProps}/>
                                     </ErrorBoundary>
                                 </div>
-                            )
-                                ;
+                            )                                ;
                         }
                     )
                 }
@@ -117,7 +118,7 @@ export function MapFieldBinding({
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError ?? false}
-                             error={error ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                             error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
                              disabled={disabled}
                              property={property}/>
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -79,6 +79,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
             minimalistView: false,
             autoFocus: internalId === lastAddedId,
         };
+        console.debug("Building entry for", index, fieldProps);
         return <ErrorBoundary>
             <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;

package/dist/components/EntityCollectionTable/internal/popup_field/ElementResizeListener.d.ts

@@ -1,5 +0,0 @@
-interface Props {
-    onResize: (event: Event) => void;
-}
-export declare const ElementResizeListener: React.FC<Props>;
-export {};

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

@@ -1,59 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef } from "react";
-
-interface Props {
-    onResize: (event: Event) => void;
-}
-
-export const ElementResizeListener: React.FC<Props> = ({ onResize }) => {
-    const rafRef = useRef(0);
-    const objectRef: RefObject<HTMLObjectElement> = useRef(null);
-    const onResizeRef = useRef(onResize);
-
-    onResizeRef.current = onResize;
-
-    const _onResize = useCallback((e: Event) => {
-        if (rafRef.current) {
-            cancelAnimationFrame(rafRef.current);
-        }
-        rafRef.current = requestAnimationFrame(() => {
-            onResizeRef.current(e);
-        });
-    }, []);
-
-    const onLoad = useCallback(() => {
-        const obj = objectRef.current;
-        if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-            obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-        }
-    }, [_onResize]);
-
-    useEffect(() => {
-        const obj = objectRef.current;
-        return () => {
-            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-                obj.contentDocument.defaultView.removeEventListener("resize", _onResize);
-            }
-        };
-    }, [_onResize]);
-
-    return (
-        <object
-            onLoad={onLoad}
-            ref={objectRef}
-            tabIndex={-1}
-            type={"text/html"}
-            data={"about:blank"}
-            title={""}
-            style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                height: "100%",
-                width: "100%",
-                pointerEvents: "none",
-                zIndex: -1,
-                opacity: 0
-            }}
-        />
-    );
-};