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

package/dist/index.umd.js

@@ -8853,7 +8853,7 @@
     return t8;
   };
   const EntityTableCell = React.memo(function EntityTableCell2(t0) {
-    const $ = reactCompilerRuntime.c(45);
+    const $ = reactCompilerRuntime.c(48);
     const {
       children,
       actions,
@@ -9082,11 +9082,11 @@
     }
     let t25;
     if ($[37] !== actions || $[38] !== onFocus || $[39] !== t16 || $[40] !== t19 || $[41] !== t20 || $[42] !== t23 || $[43] !== t24) {
-      t25 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t16, ref, style: t19, tabIndex: t20, onFocus, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, children: [
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t16, ref, style: t19, tabIndex: t20, onFocus, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, children: [
         t23,
         actions,
         t24
-      ] });
+      ] }) });
       $[37] = actions;
       $[38] = onFocus;
       $[39] = t16;
@@ -9098,7 +9098,21 @@
     } else {
       t25 = $[44];
     }
-    return t25;
+    const result = t25;
+    if (showError) {
+      const t26 = error?.message ?? "Error";
+      let t27;
+      if ($[45] !== result || $[46] !== t26) {
+        t27 = /* @__PURE__ */ jsxRuntime.jsx(ErrorTooltip, { align: "start", title: t26, children: result });
+        $[45] = result;
+        $[46] = t26;
+        $[47] = t27;
+      } else {
+        t27 = $[47];
+      }
+      return t27;
+    }
+    return result;
   }, (a, b) => {
     return a.error === b.error && a.value === b.value && a.disabled === b.disabled && a.saved === b.saved && a.allowScroll === b.allowScroll && a.align === b.align && a.size === b.size && a.disabledTooltip === b.disabledTooltip && a.width === b.width && a.showExpandIcon === b.showExpandIcon && a.removePadding === b.removePadding && a.fullHeight === b.fullHeight && a.selected === b.selected;
   });
@@ -12944,7 +12958,7 @@
     const favourite = t4;
     let t5;
     if ($[7] !== collection || $[8] !== context || $[9] !== customizationController.plugins || $[10] !== favourite || $[11] !== path || $[12] !== userConfigurationPersistence) {
-      const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: (e) => {
+      const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         if (favourite) {
@@ -12952,7 +12966,7 @@
         } else {
           userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, path]);
         }
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { size: 18, className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.StarIcon, { size: "small", className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
       if (customizationController.plugins && collection) {
         let t62;
         if ($[14] !== collection || $[15] !== context || $[16] !== path) {
@@ -13712,7 +13726,7 @@
     let relX = 0;
     let relY = 0;
     const listeningRef = React.useRef(false);
-    const onMouseDown = (event) => {
+    const onMouseDown = React.useCallback((event) => {
       if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
         return;
       }
@@ -13726,14 +13740,14 @@
       document.addEventListener("mouseup", onMouseUp);
       document.addEventListener("selectstart", onSelect);
       listeningRef.current = true;
-    };
-    const onMouseDownInner = (event_0) => {
+    }, [containerRef, onMove]);
+    const onMouseDownInner = React.useCallback((event_0) => {
       event_0.innerClicked = true;
-    };
-    const onSelect = (event_1) => {
+    }, []);
+    const onSelect = React.useCallback((event_1) => {
       event_1.preventDefault();
       event_1.stopPropagation();
-    };
+    }, []);
     const onMouseUp = (event_2) => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
@@ -13766,7 +13780,7 @@
         if (current) current.removeEventListener("mousedown", onMouseDown);
         if (innerCurrent) innerCurrent.removeEventListener("mousedown", onMouseDownInner);
       };
-    });
+    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
   }
   function useWindowSize() {
     const $ = reactCompilerRuntime.c(3);
@@ -13805,46 +13819,6 @@
     React.useLayoutEffect(t1, t2);
     return size;
   }
-  const ElementResizeListener = ({
-    onResize
-  }) => {
-    const rafRef = React.useRef(0);
-    const objectRef = React.useRef(null);
-    const onResizeRef = React.useRef(onResize);
-    onResizeRef.current = onResize;
-    const _onResize = React.useCallback((e) => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      rafRef.current = requestAnimationFrame(() => {
-        onResizeRef.current(e);
-      });
-    }, []);
-    const onLoad = React.useCallback(() => {
-      const obj = objectRef.current;
-      if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-        obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-      }
-    }, [_onResize]);
-    React.useEffect(() => {
-      const obj_0 = objectRef.current;
-      return () => {
-        if (obj_0 && obj_0.contentDocument && obj_0.contentDocument.defaultView) {
-          obj_0.contentDocument.defaultView.removeEventListener("resize", _onResize);
-        }
-      };
-    }, [_onResize]);
-    return /* @__PURE__ */ jsxRuntime.jsx("object", { 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
-    } });
-  };
   function CustomIdField({
     customId,
     entityId,
@@ -15150,7 +15124,8 @@
       !collection && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
       collection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ArrayContainer, { droppableId: propertyKey, value, disabled: isSubmitting, buildEntry, canAddElements: false, addLabel: property.name ? "Add reference to " + property.name : "Add reference", newDefaultEntry: property.of.defaultValue, onValueChange: (value_0) => setFieldValue(propertyKey, value_0) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { className: "my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { className: "ml-3.5 my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "small" }),
           "Edit ",
           property.name
         ] })
@@ -16821,6 +16796,7 @@
       error,
       disabled,
       property,
+      partOfArray,
       minimalistView: minimalistViewProp,
       includeDescription,
       autoFocus,
@@ -16945,7 +16921,7 @@
     }
     const t6 = minimalistView && mapFormView;
     const t7 = showError ?? false;
-    const t8 = error ? typeof error === "string" ? error : "A property of this map has an error" : void 0;
+    const t8 = error && !partOfArray ? typeof error === "string" ? error : "A property of this map has an error" : void 0;
     let t9;
     if ($[31] !== disabled || $[32] !== includeDescription || $[33] !== property || $[34] !== t7 || $[35] !== t8) {
       t9 = /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError: t7, error: t8, disabled, property });
@@ -17796,6 +17772,7 @@
           minimalistView: false,
           autoFocus: internalId === lastAddedId
         };
+        console.debug("Building entry for", index, fieldProps);
         return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...fieldProps, index }) });
       };
       $[4] = context;
@@ -18432,7 +18409,7 @@
     return t0;
   }
   function PopupFormFieldLoading(t0) {
-    const $ = reactCompilerRuntime.c(23);
+    const $ = reactCompilerRuntime.c(21);
     const {
       tableKey,
       entityId,
@@ -18449,6 +18426,7 @@
     const dataSource = useDataSource();
     const [entity, setEntity] = React.useState(void 0);
     let t1;
+    let t2;
     if ($[0] !== dataSource || $[1] !== entityId || $[2] !== inputCollection || $[3] !== path) {
       t1 = () => {
         if (entityId && inputCollection) {
@@ -18459,29 +18437,23 @@
           }).then(setEntity);
         }
       };
+      t2 = [entityId, inputCollection, dataSource, path];
       $[0] = dataSource;
       $[1] = entityId;
       $[2] = inputCollection;
       $[3] = path;
       $[4] = t1;
+      $[5] = t2;
     } else {
       t1 = $[4];
-    }
-    let t2;
-    if ($[5] !== entityId || $[6] !== inputCollection) {
-      t2 = [entityId, inputCollection];
-      $[5] = entityId;
-      $[6] = inputCollection;
-      $[7] = t2;
-    } else {
-      t2 = $[7];
+      t2 = $[5];
     }
     React.useEffect(t1, t2);
     if (!entity) {
       return null;
     }
     let t3;
-    if ($[8] !== cellRect || $[9] !== container || $[10] !== customFieldValidator || $[11] !== entityId || $[12] !== inputCollection || $[13] !== onCellValueChange || $[14] !== onClose || $[15] !== open || $[16] !== path || $[17] !== propertyKey || $[18] !== tableKey) {
+    if ($[6] !== cellRect || $[7] !== container || $[8] !== customFieldValidator || $[9] !== entityId || $[10] !== inputCollection || $[11] !== onCellValueChange || $[12] !== onClose || $[13] !== open || $[14] !== path || $[15] !== propertyKey || $[16] !== tableKey) {
       t3 = {
         tableKey,
         entityId,
@@ -18495,29 +18467,29 @@
         onCellValueChange,
         container
       };
-      $[8] = cellRect;
-      $[9] = container;
-      $[10] = customFieldValidator;
-      $[11] = entityId;
-      $[12] = inputCollection;
-      $[13] = onCellValueChange;
-      $[14] = onClose;
-      $[15] = open;
-      $[16] = path;
-      $[17] = propertyKey;
-      $[18] = tableKey;
-      $[19] = t3;
+      $[6] = cellRect;
+      $[7] = container;
+      $[8] = customFieldValidator;
+      $[9] = entityId;
+      $[10] = inputCollection;
+      $[11] = onCellValueChange;
+      $[12] = onClose;
+      $[13] = open;
+      $[14] = path;
+      $[15] = propertyKey;
+      $[16] = tableKey;
+      $[17] = t3;
     } else {
-      t3 = $[19];
+      t3 = $[17];
     }
     let t4;
-    if ($[20] !== entity || $[21] !== t3) {
+    if ($[18] !== entity || $[19] !== t3) {
       t4 = /* @__PURE__ */ jsxRuntime.jsx(PopupFormFieldInternal, { ...t3, entity });
-      $[20] = entity;
-      $[21] = t3;
-      $[22] = t4;
+      $[18] = entity;
+      $[19] = t3;
+      $[20] = t4;
     } else {
-      t4 = $[22];
+      t4 = $[20];
     }
     return t4;
   }
@@ -18559,23 +18531,26 @@
         y: cellRect.top < windowSize.height - cellRect.bottom ? cellRect.y + cellRect.height / 2 : cellRect.y - cellRect.height / 2
       };
     }, [cellRect, windowSize.height, windowSize.width]);
-    const normalizePosition = React.useCallback(({
-      x,
-      y
-    }) => {
-      const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-      if (!draggableBoundingRect) throw Error("normalizePosition called before draggableBoundingRect is set");
+    const normalizePosition = React.useCallback((pos, draggableBoundingRect, currentWindowSize) => {
+      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 = React.useCallback((position) => {
+    }, []);
+    const updatePopupLocation = React.useCallback((newPositionCandidate) => {
       const draggableBoundingRect_0 = draggableRef.current?.getBoundingClientRect();
-      if (!cellRect || !draggableBoundingRect_0) return;
-      const newPosition = position ?? normalizePosition(getInitialLocation());
-      if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y) setPopupLocation(newPosition);
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+      if (!cellRect || !draggableBoundingRect_0 || draggableBoundingRect_0.width === 0 || draggableBoundingRect_0.height === 0) {
+        return;
+      }
+      const basePosition = newPositionCandidate ?? getInitialLocation();
+      const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect_0, windowSize);
+      if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
+        setPopupLocation(newNormalizedPosition);
+      }
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
     useDraggable({
       containerRef: draggableRef,
       innerRef,
@@ -18586,15 +18561,22 @@
     React.useEffect(() => {
       initialPositionSet.current = false;
     }, [propertyKey, entity]);
-    React.useLayoutEffect(() => {
-      const draggableBoundingRect_1 = draggableRef.current?.getBoundingClientRect();
-      if (!cellRect || !draggableBoundingRect_1 || initialPositionSet.current) return;
-      updatePopupLocation();
-      initialPositionSet.current = true;
-    }, [cellRect, updatePopupLocation, initialPositionSet.current]);
+    React.useLayoutEffect(
+      () => {
+        if (!cellRect || initialPositionSet.current) return;
+        const draggableBoundingRect_1 = draggableRef.current?.getBoundingClientRect();
+        if (!draggableBoundingRect_1 || draggableBoundingRect_1.width === 0 || draggableBoundingRect_1.height === 0) {
+          return;
+        }
+        updatePopupLocation();
+        initialPositionSet.current = true;
+      },
+      [cellRect, updatePopupLocation]
+      // Removed initialPositionSet.current from deps as it's a ref
+    );
     React.useLayoutEffect(() => {
       updatePopupLocation(popupLocation);
-    }, [windowSize, cellRect]);
+    }, [windowSize, cellRect, updatePopupLocation, popupLocation]);
     const validationSchema = React.useMemo(() => {
       if (!collection || !entityId) return;
       return getYupEntitySchema(entityId, propertyKey && collection.properties[propertyKey] ? {
@@ -18604,6 +18586,18 @@
     const adaptResize = React.useCallback(() => {
       return updatePopupLocation(popupLocation);
     }, [popupLocation, updatePopupLocation]);
+    React.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) => {
       setSavingError(null);
       if (inputCollection && entity && onCellValueChange && propertyKey) {
@@ -18684,21 +18678,18 @@
       internalForm,
       savingError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message })
     ] });
-    const draggable = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    const draggable = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       boxShadow: "0 0 0 2px rgba(128,128,128,0.2)"
-    }, className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`, ref: draggableRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ElementResizeListener, { onResize: adaptResize }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden", children: [
-        form,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
-          width: "32px",
-          height: "32px"
-        }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (event) => {
-          event.stopPropagation();
-          onClose();
-        }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { className: "text-white", size: "small" }) }) })
-      ] })
-    ] }, `draggable_${propertyKey}_${entityId}_${open}`);
+    }, className: `inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${!open ? "invisible" : "visible"} cursor-grab overflow-visible`, ref: draggableRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden", children: [
+      form,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
+        width: "32px",
+        height: "32px"
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (event) => {
+        event.stopPropagation();
+        onClose();
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { className: "text-white", size: "small" }) }) })
+    ] }) }, `draggable_${propertyKey}_${entityId}_${open}`);
     return /* @__PURE__ */ jsxRuntime.jsx(Portal__namespace.Root, { asChild: true, container, children: /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: draggable }) });
   }
   function ClearFilterSortButton(t0) {
@@ -19093,7 +19084,7 @@
           dependencies: [],
           Builder: ({
             entity: entity_3
-          }) => /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", variant: "outlined", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" }), onClick: (event) => {
+          }) => /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { color: "primary", variant: "outlined", className: "max-w-full truncate justify-start", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" }), onClick: (event) => {
             event.stopPropagation();
             navigateToEntity({
               openEntityMode,
@@ -20237,7 +20228,7 @@
     };
     return sortable$1 ? /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, modifiers: [modifiers.restrictToVerticalAxis], collisionDetection: core.closestCenter, onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: internalIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), id: droppableId, children: [
       hasValue && internalIds.map((internalId_0, index_3) => /* @__PURE__ */ jsxRuntime.jsx(SortableItem, { id: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: sortable$1, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps }, `array_field_${internalId_0}`)),
-      canAddElements && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+      canAddElements && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: insertInEnd, className: "ml-3.5", children: addLabel ?? "Add" }) })
     ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("space-y-1", className), id: droppableId, children: [
       hasValue && internalIds.map((internalId_1, index_4) => /* @__PURE__ */ jsxRuntime.jsx(ArrayContainerItem, { nodeRef: (node) => {
       }, style: {}, dragHandleProps: {}, internalId: internalId_1, index: index_4, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable: false, isDragging: false, storedProps: itemCustomPropsRef.current[internalId_1], updateItemCustomProps }, `array_field_${internalId_1}`)),