@firecms/core 3.0.0-canary.216 → 3.0.0-canary.218

package/dist/index.umd.js

@@ -206,7 +206,7 @@
   function isObject(item) {
     return item && typeof item === "object" && !Array.isArray(item);
   }
-  function mergeDeep(target, source) {
+  function mergeDeep(target, source, ignoreUndefined = false) {
     const targetIsObject = isObject(target);
     const output = targetIsObject ? {
       ...target
@@ -214,6 +214,9 @@
     if (targetIsObject && isObject(source)) {
       Object.keys(source).forEach((key) => {
         const sourceElement = source[key];
+        if (ignoreUndefined && sourceElement === void 0) {
+          return;
+        }
         if (sourceElement instanceof Date) {
           Object.assign(output, {
             [key]: new Date(sourceElement.getTime())
@@ -856,8 +859,8 @@
       return entityView;
     }
   }
-  function resolvedSelectedEntityView(customViews, customizationController, selectedTab) {
-    const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean) : [];
+  function resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit) {
+    const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter((e) => Boolean(e)).filter((e) => canEdit || !e.includeActions) : [];
     const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTab);
     const selectedSecondaryForm = customViews && resolvedEntityViews.filter((e) => e.includeActions).find((e) => e.key === selectedTab);
     return {
@@ -3499,7 +3502,7 @@
       if (property) propertiesMerged[key] = mergePropertyOrBuilder(property, source.properties[key]);
       else propertiesMerged[key] = source.properties[key];
     });
-    const mergedCollection = mergeDeep(target, source);
+    const mergedCollection = mergeDeep(target, source, true);
     const targetPropertiesOrder = getCollectionKeys(target);
     const sourcePropertiesOrder = getCollectionKeys(source);
     const mergedPropertiesOrder = [.../* @__PURE__ */ new Set([...sourcePropertiesOrder, ...targetPropertiesOrder])];
@@ -14325,11 +14328,11 @@
       throw Error("INTERNAL: Collection and path must be defined in form context");
     }
     const dialogActions = /* @__PURE__ */ jsxRuntime.jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex: formex$1, disabled: disabled_0, status, pluginActions, openEntityMode, showDefaultActions });
-    return /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formContext.formex, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: formContext.formex.handleSubmit, onReset: () => formex$1.resetForm({
+    return /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: formex$1.handleSubmit, onReset: () => formex$1.resetForm({
       values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)
     }), noValidate: true, className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_${path}`, className: ui.cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
-        formContext.formex.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) }),
+        formex$1.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) }),
         formView
       ] }) }),
       dialogActions
@@ -21112,7 +21115,7 @@
       t4 = $[4];
     }
     React.useEffect(t3, t4);
-    const t5 = mode === "dark" ? prismReactRenderer.themes.vsDark : prismReactRenderer.themes.vsLight;
+    const t5 = mode === "dark" ? prismReactRenderer.themes.vsDark : prismReactRenderer.themes.github;
     let t6;
     if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
       t6 = (t72) => {
@@ -21124,8 +21127,8 @@
         } = t72;
         return /* @__PURE__ */ jsxRuntime.jsx("pre", { ref: preRef, style: {
           ...style,
-          background: "inherit"
-        }, className: "container mx-auto p-8 rounded text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...getLineProps({
+          backgroundColor: "inherit"
+        }, className: "max-w-6xl mx-auto p-8 rounded text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...getLineProps({
           line
         }), className: "text-wrap", children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({
           token
@@ -21146,128 +21149,100 @@
     }
     return t7;
   }
+  function createFormexStub(values) {
+    const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
+    return {
+      values,
+      initialValues: values,
+      touched: {},
+      dirty: false,
+      errors: {},
+      submitCount: 0,
+      isSubmitting: false,
+      isValidating: false,
+      version: 0,
+      canUndo: false,
+      canRedo: false,
+      setValues: () => {
+        throw new Error(errorMessage);
+      },
+      setFieldValue: () => {
+        throw new Error(errorMessage);
+      },
+      setFieldTouched: () => {
+        throw new Error(errorMessage);
+      },
+      setDirty: () => {
+        throw new Error(errorMessage);
+      },
+      setSubmitCount: () => {
+        throw new Error(errorMessage);
+      },
+      setFieldError: () => {
+        throw new Error(errorMessage);
+      },
+      handleChange: () => {
+        throw new Error(errorMessage);
+      },
+      handleBlur: () => {
+        throw new Error(errorMessage);
+      },
+      handleSubmit: () => {
+        throw new Error(errorMessage);
+      },
+      validate: () => {
+        throw new Error(errorMessage);
+      },
+      resetForm: () => {
+        throw new Error(errorMessage);
+      },
+      setSubmitting: () => {
+        throw new Error(errorMessage);
+      },
+      undo: () => {
+        throw new Error(errorMessage);
+      },
+      redo: () => {
+        throw new Error(errorMessage);
+      }
+    };
+  }
   const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
   const JSON_TAB_VALUE = "__json";
-  function EntityEditView(t0) {
-    const $ = reactCompilerRuntime.c(28);
-    let entityId;
-    let props;
-    if ($[0] !== t0) {
-      ({
-        entityId,
-        ...props
-      } = t0);
-      $[0] = t0;
-      $[1] = entityId;
-      $[2] = props;
-    } else {
-      entityId = $[1];
-      props = $[2];
-    }
-    let t1;
-    if ($[3] !== entityId || $[4] !== props.collection || $[5] !== props.databaseId || $[6] !== props.path) {
-      t1 = {
-        path: props.path,
-        entityId,
-        collection: props.collection,
-        databaseId: props.databaseId,
-        useCache: false
-      };
-      $[3] = entityId;
-      $[4] = props.collection;
-      $[5] = props.databaseId;
-      $[6] = props.path;
-      $[7] = t1;
-    } else {
-      t1 = $[7];
-    }
+  function EntityEditView({
+    entityId,
+    ...props
+  }) {
     const {
       entity,
-      dataLoading
-    } = useEntityFetch(t1);
-    let t2;
-    if ($[8] !== entityId || $[9] !== props.path) {
-      t2 = entityId ? getEntityFromCache(props.path + "/" + entityId) : getEntityFromCache(props.path + "#new");
-      $[8] = entityId;
-      $[9] = props.path;
-      $[10] = t2;
-    } else {
-      t2 = $[10];
-    }
-    const cachedValues = t2;
+      dataLoading,
+      // eslint-disable-next-line no-unused-vars
+      dataLoadingError
+    } = useEntityFetch({
+      path: props.path,
+      entityId,
+      collection: props.collection,
+      databaseId: props.databaseId,
+      useCache: false
+    });
+    const cachedValues = entityId ? getEntityFromCache(props.path + "/" + entityId) : getEntityFromCache(props.path + "#new");
     const authController = useAuthController();
     const initialStatus = props.copy ? "copy" : entityId ? "existing" : "new";
     const [status, setStatus] = React.useState(initialStatus);
-    let t3;
-    if (status === "new" || status === "copy") {
-      t3 = true;
-    } else {
-      t3 = entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : void 0;
-    }
-    const canEdit = t3;
-    if (dataLoading && !cachedValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
-      let t42;
-      if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-        t42 = /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {});
-        $[11] = t42;
+    const canEdit = React.useMemo(() => {
+      if (status === "new" || status === "copy") {
+        return true;
       } else {
-        t42 = $[11];
+        return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : void 0;
       }
-      return t42;
+    }, [authController, entity, status]);
+    if (dataLoading && !cachedValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {});
     }
     if (entityId && !entity && !cachedValues) {
       console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
-    if (!canEdit) {
-      const t42 = props.collection.singularName ?? props.collection.name;
-      let t52;
-      if ($[12] !== t42) {
-        t52 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: t42 });
-        $[12] = t42;
-        $[13] = t52;
-      } else {
-        t52 = $[13];
-      }
-      const t6 = entity;
-      let t7;
-      if ($[14] !== props.collection || $[15] !== props.path || $[16] !== t6) {
-        t7 = /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8", entity: t6, path: props.path, collection: props.collection });
-        $[14] = props.collection;
-        $[15] = props.path;
-        $[16] = t6;
-        $[17] = t7;
-      } else {
-        t7 = $[17];
-      }
-      let t8;
-      if ($[18] !== t52 || $[19] !== t7) {
-        t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-          t52,
-          t7
-        ] });
-        $[18] = t52;
-        $[19] = t7;
-        $[20] = t8;
-      } else {
-        t8 = $[20];
-      }
-      return t8;
-    }
-    const t4 = cachedValues;
-    let t5;
-    if ($[21] !== dataLoading || $[22] !== entity || $[23] !== entityId || $[24] !== props || $[25] !== status || $[26] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(EntityEditViewInner, { ...props, entityId, entity, cachedDirtyValues: t4, dataLoading, status, setStatus });
-      $[21] = dataLoading;
-      $[22] = entity;
-      $[23] = entityId;
-      $[24] = props;
-      $[25] = status;
-      $[26] = t4;
-      $[27] = t5;
-    } else {
-      t5 = $[27];
-    }
-    return t5;
+    return /* @__PURE__ */ jsxRuntime.jsx(EntityEditViewInner, { ...props, entityId, entity, cachedDirtyValues: cachedValues, dataLoading, status, setStatus, canEdit });
   }
   function EntityEditViewInner({
     path,
@@ -21285,7 +21260,8 @@
     barActions,
     status,
     setStatus,
-    formProps
+    formProps,
+    canEdit
   }) {
     const context = useFireCMSContext();
     const [usedEntity, setUsedEntity] = React.useState(entity);
@@ -21301,8 +21277,8 @@
     }), []);
     const [selectedTab, setSelectedTab] = React.useState(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
     React.useEffect(() => {
-      if ((selectedTabProp ?? MAIN_TAB_VALUE) !== selectedTab) {
-        setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
+      if ((selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE) !== selectedTab) {
+        setSelectedTab(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
       }
     }, [selectedTabProp]);
     const subcollections = (collection.subcollections ?? []).filter((c) => !c.hideFromNavigation);
@@ -21315,24 +21291,55 @@
       resolvedEntityViews,
       selectedEntityView,
       selectedSecondaryForm
-    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const authController = useAuthController();
     const customViewsView = customViews && resolvedEntityViews.filter((e) => !e.includeActions).map((customView) => {
       if (!customView) return null;
       const Builder = customView.Builder;
       if (!Builder) {
-        console.error("customView.Builder is not defined");
+        console.error("INTERNAL: customView.Builder is not defined");
+        return null;
+      }
+      if (!entityId) {
+        console.error("INTERNAL: entityId is not defined");
         return null;
       }
+      const formexStub = createFormexStub(usedEntity?.values ?? {});
+      const usedFormContext = formContext ?? {
+        entityId,
+        openEntityMode: layout,
+        status,
+        values: usedEntity?.values ?? {},
+        setFieldValue: (key, value) => {
+          throw new Error("You can't update values in read only mode");
+        },
+        save: () => {
+          throw new Error("You can't save in read only mode");
+        },
+        collection: resolveCollection({
+          collection,
+          path,
+          entityId,
+          values: usedEntity?.values ?? {},
+          previousValues: usedEntity?.values ?? {},
+          propertyConfigs: customizationController.propertyConfigs,
+          authController
+        }),
+        path,
+        entity: usedEntity,
+        savingError: void 0,
+        formex: formexStub
+      };
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
         "hidden": selectedTab !== customView.key
-      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
+      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: usedFormContext?.formex?.values ?? usedEntity?.values, formContext: usedFormContext }) }) }, `custom_view_${customView.key}`);
     }).filter(Boolean);
     const globalLoading = dataLoading && !usedEntity;
     const jsonView = /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("relative flex-1 h-full overflow-auto w-full", {
       "hidden": selectedTab !== JSON_TAB_VALUE
-    }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityJsonPreview, { values: formContext?.values ?? {} }) }) }, "json_view");
+    }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityJsonPreview, { values: formContext?.values ?? entity?.values ?? {} }) }) }, "json_view");
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
       const subcollectionId = subcollection.id ?? subcollection.path;
       const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
@@ -21342,18 +21349,21 @@
         !globalLoading && (usedEntity && fullPath ? /* @__PURE__ */ jsxRuntime.jsx(EntityCollectionView, { fullPath, parentCollectionIds: [...parentCollectionIds, collection.id], isSubCollection: true, updateUrl: false, ...subcollection, openEntityMode: layout }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-full h-full p-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "You need to save your entity before adding additional collections" }) }))
       ] }, `subcol_${subcollectionId}`);
     }).filter(Boolean);
-    const onSideTabClick = (value) => {
-      setSelectedTab(value);
+    const onSideTabClick = (value_0) => {
+      setSelectedTab(value_0);
       if (status === "existing") {
         onTabChange?.({
           path,
           entityId,
-          selectedTab: value === MAIN_TAB_VALUE ? void 0 : value,
+          selectedTab: value_0 === MAIN_TAB_VALUE ? void 0 : value_0,
           collection
         });
       }
     };
-    const entityView = /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls(!mainViewVisible ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, ...formProps, onEntityChange: (entity_0) => {
+    const entityView = !canEdit ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", !mainViewVisible ? "hidden" : ""), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: ui.cls(!mainViewVisible ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, ...formProps, onEntityChange: (entity_0) => {
       setUsedEntity(entity_0);
       formProps?.onEntityChange?.(entity_0);
     }, onStatusChange: (status_0) => {
@@ -21377,8 +21387,8 @@
         barActions,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow" }),
         globalLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_0) => {
-          onSideTabClick(value_0);
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_1) => {
+          onSideTabClick(value_1);
         }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
@@ -23253,7 +23263,6 @@
         return blocked.current;
       });
     } catch (e) {
-      console.warn("Blocker not available, navigation will not be blocked");
     }
     const lastCollectionEntry = navigationEntries.findLast((entry_1) => entry_1.type === "collection");
     if (isNew && !lastCollectionEntry) {