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

package/dist/core/EntityEditView.d.ts

@@ -37,10 +37,11 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * an entity is opened.
  */
 export declare function EntityEditView<M extends Record<string, any>, USER extends User>({ entityId, ...props }: EntityEditViewProps<M>): import("react/jsx-runtime").JSX.Element;
-export declare function EntityEditViewInner<M extends Record<string, any>>({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionIds, onValuesModified, onSaved, onTabChange, entity, cachedDirtyValues, dataLoading, layout, barActions, status, setStatus, formProps }: EntityEditViewProps<M> & {
+export declare function EntityEditViewInner<M extends Record<string, any>>({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionIds, onValuesModified, onSaved, onTabChange, entity, cachedDirtyValues, dataLoading, layout, barActions, status, setStatus, formProps, canEdit }: EntityEditViewProps<M> & {
     entity?: Entity<M>;
     cachedDirtyValues?: Partial<M>;
     dataLoading: boolean;
     status: EntityStatus;
     setStatus: (status: EntityStatus) => void;
+    canEdit?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/index.es.js

@@ -205,7 +205,7 @@ const pick = (obj, ...args) => ({
 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
@@ -213,6 +213,9 @@ function mergeDeep(target, source) {
   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())
@@ -855,8 +858,8 @@ function resolveEntityView(entityView, contextEntityViews) {
     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 {
@@ -3498,7 +3501,7 @@ function mergeCollection(target, source, parentPaths = [], modifyCollection) {
     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])];
@@ -14324,11 +14327,11 @@ function EntityForm({
     throw Error("INTERNAL: Collection and path must be defined in form context");
   }
   const dialogActions = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex, disabled: disabled_0, status, pluginActions, openEntityMode, showDefaultActions });
-  return /* @__PURE__ */ jsx(Formex, { value: formContext.formex, children: /* @__PURE__ */ jsxs("form", { onSubmit: formContext.formex.handleSubmit, onReset: () => formex.resetForm({
+  return /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs("form", { onSubmit: formex.handleSubmit, onReset: () => formex.resetForm({
     values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)
   }), noValidate: true, className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
     /* @__PURE__ */ jsx("div", { id: `form_${path}`, className: 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__ */ jsxs("div", { className: cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
-      formContext.formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) }),
+      formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) }),
       formView
     ] }) }),
     dialogActions
@@ -21111,7 +21114,7 @@ function EntityJsonPreview(t0) {
     t4 = $[4];
   }
   useEffect(t3, t4);
-  const t5 = mode === "dark" ? themes.vsDark : themes.vsLight;
+  const t5 = mode === "dark" ? themes.vsDark : themes.github;
   let t6;
   if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
     t6 = (t72) => {
@@ -21123,8 +21126,8 @@ function EntityJsonPreview(t0) {
       } = t72;
       return /* @__PURE__ */ jsx("pre", { ref: preRef, style: {
         ...style,
-        background: "inherit"
-      }, className: "container mx-auto p-8 rounded text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsx("div", { ...getLineProps({
+        backgroundColor: "inherit"
+      }, className: "max-w-6xl mx-auto p-8 rounded text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsx("div", { ...getLineProps({
         line
       }), className: "text-wrap", children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({
         token
@@ -21145,128 +21148,100 @@ function EntityJsonPreview(t0) {
   }
   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 $ = 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] = 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__ */ jsx(CircularProgressCenter, {});
-      $[11] = t42;
+  const canEdit = 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__ */ 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__ */ jsx(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__ */ 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__ */ 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__ */ 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__ */ jsx(EntityEditViewInner, { ...props, entityId, entity, cachedDirtyValues: cachedValues, dataLoading, status, setStatus, canEdit });
 }
 function EntityEditViewInner({
   path,
@@ -21284,7 +21259,8 @@ function EntityEditViewInner({
   barActions,
   status,
   setStatus,
-  formProps
+  formProps,
+  canEdit
 }) {
   const context = useFireCMSContext();
   const [usedEntity, setUsedEntity] = useState(entity);
@@ -21300,8 +21276,8 @@ function EntityEditViewInner({
   }), []);
   const [selectedTab, setSelectedTab] = useState(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
   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((c2) => !c2.hideFromNavigation);
@@ -21314,24 +21290,55 @@ function EntityEditViewInner({
     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__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
       "hidden": selectedTab !== customView.key
-    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
+    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: usedFormContext && /* @__PURE__ */ 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__ */ jsx("div", { className: cls("relative flex-1 h-full overflow-auto w-full", {
     "hidden": selectedTab !== JSON_TAB_VALUE
-  }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityJsonPreview, { values: formContext?.values ?? {} }) }) }, "json_view");
+  }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ 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;
@@ -21341,18 +21348,21 @@ function EntityEditViewInner({
       !globalLoading && (usedEntity && fullPath ? /* @__PURE__ */ jsx(EntityCollectionView, { fullPath, parentCollectionIds: [...parentCollectionIds, collection.id], isSubCollection: true, updateUrl: false, ...subcollection, openEntityMode: layout }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full p-3", children: /* @__PURE__ */ jsx(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__ */ jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls(!mainViewVisible ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, ...formProps, onEntityChange: (entity_0) => {
+  const entityView = !canEdit ? /* @__PURE__ */ jsx("div", { className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", !mainViewVisible ? "hidden" : ""), children: /* @__PURE__ */ jsxs("div", { className: 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__ */ jsx(Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
+    /* @__PURE__ */ jsx(EntityView, { className: "px-8 h-full overflow-auto", entity, path, collection })
+  ] }) }) : /* @__PURE__ */ jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls(!mainViewVisible ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, ...formProps, onEntityChange: (entity_0) => {
     setUsedEntity(entity_0);
     formProps?.onEntityChange?.(entity_0);
   }, onStatusChange: (status_0) => {
@@ -21376,8 +21386,8 @@ function EntityEditViewInner({
       barActions,
       /* @__PURE__ */ jsx("div", { className: "flex-grow" }),
       globalLoading && /* @__PURE__ */ jsx("div", { className: "self-center", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }),
-      /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: (value_0) => {
-        onSideTabClick(value_0);
+      /* @__PURE__ */ jsxs(Tabs, { value: selectedTab, onValueChange: (value_1) => {
+        onSideTabClick(value_1);
       }, children: [
         /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsx(CodeIcon, { size: "small" }) }),
         /* @__PURE__ */ jsx(Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
@@ -23252,7 +23262,6 @@ function EntityFullScreenRoute({
       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) {