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

package/dist/form/field_bindings/MapFieldBinding.d.ts

@@ -6,4 +6,4 @@ import { FieldProps } from "../../types";
  * and tables to the specified properties.
  * @group Form fields
  */
-export declare function MapFieldBinding({ propertyKey, value, showError, error, disabled, property, minimalistView: minimalistViewProp, includeDescription, autoFocus, context, onPropertyChange }: FieldProps<Record<string, any>>): import("react/jsx-runtime").JSX.Element;
+export declare function MapFieldBinding({ propertyKey, value, showError, error, disabled, property, partOfArray, minimalistView: minimalistViewProp, includeDescription, autoFocus, context, onPropertyChange }: FieldProps<Record<string, any>>): import("react/jsx-runtime").JSX.Element;

package/dist/index.es.js

@@ -8855,7 +8855,7 @@ const TableCellInner = (t0) => {
   return t8;
 };
 const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
-  const $ = c(45);
+  const $ = c(48);
   const {
     children,
     actions,
@@ -9084,11 +9084,11 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   }
   let t25;
   if ($[37] !== actions || $[38] !== onFocus || $[39] !== t16 || $[40] !== t19 || $[41] !== t20 || $[42] !== t23 || $[43] !== t24) {
-    t25 = /* @__PURE__ */ jsxs("div", { className: t16, ref, style: t19, tabIndex: t20, onFocus, onMouseEnter: setOnHoverTrue, onMouseMove: setOnHoverTrue, onMouseLeave: setOnHoverFalse, children: [
+    t25 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ 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;
@@ -9100,7 +9100,21 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   } else {
     t25 = $[44];
   }
-  return t25;
+  const result = t25;
+  if (showError) {
+    const t26 = error?.message ?? "Error";
+    let t27;
+    if ($[45] !== result || $[46] !== t26) {
+      t27 = /* @__PURE__ */ 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;
 });
@@ -12946,7 +12960,7 @@ function NavigationCardBinding(t0) {
   const favourite = t4;
   let t5;
   if ($[7] !== collection || $[8] !== context || $[9] !== customizationController.plugins || $[10] !== favourite || $[11] !== path || $[12] !== userConfigurationPersistence) {
-    const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsx(IconButton, { onClick: (e) => {
+    const actionsArray = userConfigurationPersistence ? [/* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
       e.preventDefault();
       e.stopPropagation();
       if (favourite) {
@@ -12954,7 +12968,7 @@ function NavigationCardBinding(t0) {
       } else {
         userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, path]);
       }
-    }, children: /* @__PURE__ */ jsx(StarIcon, { size: 18, className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
+    }, children: /* @__PURE__ */ jsx(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) {
@@ -13714,7 +13728,7 @@ function useDraggable({
   let relX = 0;
   let relY = 0;
   const listeningRef = React__default.useRef(false);
-  const onMouseDown = (event) => {
+  const onMouseDown = useCallback((event) => {
     if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
       return;
     }
@@ -13728,14 +13742,14 @@ function useDraggable({
     document.addEventListener("mouseup", onMouseUp);
     document.addEventListener("selectstart", onSelect);
     listeningRef.current = true;
-  };
-  const onMouseDownInner = (event_0) => {
+  }, [containerRef, onMove]);
+  const onMouseDownInner = useCallback((event_0) => {
     event_0.innerClicked = true;
-  };
-  const onSelect = (event_1) => {
+  }, []);
+  const onSelect = useCallback((event_1) => {
     event_1.preventDefault();
     event_1.stopPropagation();
-  };
+  }, []);
   const onMouseUp = (event_2) => {
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
@@ -13768,7 +13782,7 @@ function useDraggable({
       if (current) current.removeEventListener("mousedown", onMouseDown);
       if (innerCurrent) innerCurrent.removeEventListener("mousedown", onMouseDownInner);
     };
-  });
+  }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
 }
 function useWindowSize() {
   const $ = c(3);
@@ -13807,46 +13821,6 @@ function useWindowSize() {
   useLayoutEffect(t1, t2);
   return size;
 }
-const ElementResizeListener = ({
-  onResize
-}) => {
-  const rafRef = useRef(0);
-  const objectRef = useRef(null);
-  const onResizeRef = useRef(onResize);
-  onResizeRef.current = onResize;
-  const _onResize = useCallback((e) => {
-    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_0 = objectRef.current;
-    return () => {
-      if (obj_0 && obj_0.contentDocument && obj_0.contentDocument.defaultView) {
-        obj_0.contentDocument.defaultView.removeEventListener("resize", _onResize);
-      }
-    };
-  }, [_onResize]);
-  return /* @__PURE__ */ 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,
@@ -14469,7 +14443,7 @@ function EntityForm({
   const formRef = useRef(null);
   const formView = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
     !Builder && /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start my-4 lg:my-6", children: [
-      /* @__PURE__ */ jsx(Typography, { className: "py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0"), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
+      /* @__PURE__ */ jsx(Typography, { className: "my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : ""), variant: "h4", children: title ?? collection.singularName ?? collection.name }),
       showEntityPath && /* @__PURE__ */ jsx(Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
         entity?.path ?? path,
         "/",
@@ -15152,7 +15126,8 @@ function ArrayOfReferencesFieldBinding({
     !collection && /* @__PURE__ */ jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
     collection && /* @__PURE__ */ jsxs("div", { className: "group", children: [
       /* @__PURE__ */ 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__ */ jsxs(Button, { className: "my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+      /* @__PURE__ */ jsxs(Button, { className: "ml-3.5 my-4 justify-center text-left", variant: "text", color: "primary", disabled: isSubmitting, onClick: onEntryClick, children: [
+        /* @__PURE__ */ jsx(EditIcon, { size: "small" }),
         "Edit ",
         property.name
       ] })
@@ -16823,6 +16798,7 @@ function MapFieldBinding(t0) {
     error,
     disabled,
     property,
+    partOfArray,
     minimalistView: minimalistViewProp,
     includeDescription,
     autoFocus,
@@ -16947,7 +16923,7 @@ function MapFieldBinding(t0) {
   }
   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__ */ jsx(FieldHelperText, { includeDescription, showError: t7, error: t8, disabled, property });
@@ -17798,6 +17774,7 @@ function RepeatFieldBinding(t0) {
         minimalistView: false,
         autoFocus: internalId === lastAddedId
       };
+      console.debug("Building entry for", index, fieldProps);
       return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...fieldProps, index }) });
     };
     $[4] = context;
@@ -18434,7 +18411,7 @@ function PopupFormField(props) {
   return t0;
 }
 function PopupFormFieldLoading(t0) {
-  const $ = c(23);
+  const $ = c(21);
   const {
     tableKey,
     entityId,
@@ -18451,6 +18428,7 @@ function PopupFormFieldLoading(t0) {
   const dataSource = useDataSource();
   const [entity, setEntity] = useState(void 0);
   let t1;
+  let t2;
   if ($[0] !== dataSource || $[1] !== entityId || $[2] !== inputCollection || $[3] !== path) {
     t1 = () => {
       if (entityId && inputCollection) {
@@ -18461,29 +18439,23 @@ function PopupFormFieldLoading(t0) {
         }).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];
   }
   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,
@@ -18497,29 +18469,29 @@ function PopupFormFieldLoading(t0) {
       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__ */ jsx(PopupFormFieldInternal, { ...t3, entity });
-    $[20] = entity;
-    $[21] = t3;
-    $[22] = t4;
+    $[18] = entity;
+    $[19] = t3;
+    $[20] = t4;
   } else {
-    t4 = $[22];
+    t4 = $[20];
   }
   return t4;
 }
@@ -18561,23 +18533,26 @@ function PopupFormFieldInternal({
       y: cellRect.top < windowSize.height - cellRect.bottom ? cellRect.y + cellRect.height / 2 : cellRect.y - cellRect.height / 2
     };
   }, [cellRect, windowSize.height, windowSize.width]);
-  const normalizePosition = useCallback(({
-    x,
-    y
-  }) => {
-    const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-    if (!draggableBoundingRect) throw Error("normalizePosition called before draggableBoundingRect is set");
+  const normalizePosition = 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 = useCallback((position) => {
+  }, []);
+  const updatePopupLocation = 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,
@@ -18588,15 +18563,22 @@ function PopupFormFieldInternal({
   useEffect(() => {
     initialPositionSet.current = false;
   }, [propertyKey, entity]);
-  useLayoutEffect(() => {
-    const draggableBoundingRect_1 = draggableRef.current?.getBoundingClientRect();
-    if (!cellRect || !draggableBoundingRect_1 || initialPositionSet.current) return;
-    updatePopupLocation();
-    initialPositionSet.current = true;
-  }, [cellRect, updatePopupLocation, initialPositionSet.current]);
+  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
+  );
   useLayoutEffect(() => {
     updatePopupLocation(popupLocation);
-  }, [windowSize, cellRect]);
+  }, [windowSize, cellRect, updatePopupLocation, popupLocation]);
   const validationSchema = useMemo(() => {
     if (!collection || !entityId) return;
     return getYupEntitySchema(entityId, propertyKey && collection.properties[propertyKey] ? {
@@ -18606,6 +18588,18 @@ function PopupFormFieldInternal({
   const adaptResize = useCallback(() => {
     return updatePopupLocation(popupLocation);
   }, [popupLocation, updatePopupLocation]);
+  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) {
@@ -18686,21 +18680,18 @@ function PopupFormFieldInternal({
     internalForm,
     savingError && /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message })
   ] });
-  const draggable = /* @__PURE__ */ jsxs("div", { style: {
+  const draggable = /* @__PURE__ */ 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__ */ jsx(ElementResizeListener, { onResize: adaptResize }),
-    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden", children: [
-      form,
-      /* @__PURE__ */ jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
-        width: "32px",
-        height: "32px"
-      }, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event) => {
-        event.stopPropagation();
-        onClose();
-      }, children: /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "overflow-hidden", children: [
+    form,
+    /* @__PURE__ */ jsx("div", { className: "absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full", style: {
+      width: "32px",
+      height: "32px"
+    }, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event) => {
+      event.stopPropagation();
+      onClose();
+    }, children: /* @__PURE__ */ jsx(CloseIcon, { className: "text-white", size: "small" }) }) })
+  ] }) }, `draggable_${propertyKey}_${entityId}_${open}`);
   return /* @__PURE__ */ jsx(Portal.Root, { asChild: true, container, children: /* @__PURE__ */ jsx(Formex, { value: formex, children: draggable }) });
 }
 function ClearFilterSortButton(t0) {
@@ -19095,7 +19086,7 @@ const EntityCollectionView = React__default.memo(function EntityCollectionView2(
         dependencies: [],
         Builder: ({
           entity: entity_3
-        }) => /* @__PURE__ */ jsx(Button, { color: "primary", variant: "outlined", startIcon: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "small" }), onClick: (event) => {
+        }) => /* @__PURE__ */ jsx(Button, { color: "primary", variant: "outlined", className: "max-w-full truncate justify-start", startIcon: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "small" }), onClick: (event) => {
           event.stopPropagation();
           navigateToEntity({
             openEntityMode,
@@ -20239,7 +20230,7 @@ function ArrayContainer({
   };
   return sortable ? /* @__PURE__ */ jsx(DndContext, { sensors, modifiers: [restrictToVerticalAxis], collisionDetection: closestCenter, onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: internalIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), id: droppableId, children: [
     hasValue && internalIds.map((internalId_0, index_3) => /* @__PURE__ */ jsx(SortableItem, { id: internalId_0, index: index_3, size, disabled, buildEntry, remove, copy, addInIndex, canAddElements, sortable, storedProps: itemCustomPropsRef.current[internalId_0], updateItemCustomProps }, `array_field_${internalId_0}`)),
-    canAddElements && /* @__PURE__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, children: addLabel ?? "Add" }) })
+    canAddElements && /* @__PURE__ */ jsx("div", { className: "my-4 justify-center text-left", children: /* @__PURE__ */ jsx(Button, { variant: "text", size: size === "small" ? "small" : "medium", color: "primary", disabled: disabled || (value?.length ?? 0) >= max, startIcon: /* @__PURE__ */ jsx(AddIcon, {}), onClick: insertInEnd, className: "ml-3.5", children: addLabel ?? "Add" }) })
   ] }) }) }) : /* @__PURE__ */ jsxs("div", { className: cls("space-y-1", className), id: droppableId, children: [
     hasValue && internalIds.map((internalId_1, index_4) => /* @__PURE__ */ 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}`)),