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

package/dist/form/EntityForm.d.ts

@@ -29,6 +29,10 @@ export type EntityFormProps<M extends Record<string, any>> = {
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
     openEntityMode?: "side_panel" | "full_screen";
+    /**
+     * If true, the form will be disabled and no actions will be available
+     */
+    disabled?: boolean;
     /**
      * Include the copy and delete actions in the form
      */
@@ -41,5 +45,5 @@ export type EntityFormProps<M extends Record<string, any>> = {
     Builder?: React.ComponentType<EntityCustomViewParams<M>>;
     children?: React.ReactNode;
 };
-export declare function EntityForm<M extends Record<string, any>>({ path, entityId: entityIdProp, collection, onValuesModified, onIdChange, onSaved, entity, initialDirtyValues, onFormContextReady, forceActionsAtTheBottom, initialStatus, className, onStatusChange, onEntityChange, openEntityMode, formex: formexProp, Builder, EntityFormActionsComponent, showDefaultActions, showEntityPath, children }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityForm<M extends Record<string, any>>({ path, entityId: entityIdProp, collection, onValuesModified, onIdChange, onSaved, entity, initialDirtyValues, onFormContextReady, forceActionsAtTheBottom, initialStatus, className, onStatusChange, onEntityChange, openEntityMode, formex: formexProp, disabled: disabledProp, Builder, EntityFormActionsComponent, showDefaultActions, showEntityPath, children }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
 export declare function yupToFormErrors(yupError: ValidationError): Record<string, any>;

package/dist/form/PropertyFieldBinding.d.ts

@@ -26,5 +26,5 @@ import { CMSType, PropertyFieldBindingProps } from "../types";
  * @group Form custom fields
  */
 export declare const PropertyFieldBinding: typeof PropertyFieldBindingInternal;
-declare function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled: disabledProp, partOfArray, minimalistView, autoFocus, index, size, onPropertyChange }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>>;
+declare function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled: disabledProp, partOfArray, minimalistView, autoFocus, index, size, onPropertyChange, }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>>;
 export {};

package/dist/index.es.js

@@ -859,7 +859,7 @@ function resolveEntityView(entityView, contextEntityViews) {
   }
 }
 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 resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter((e) => Boolean(e)) : [];
   const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTab);
   const selectedSecondaryForm = customViews && resolvedEntityViews.filter((e) => e.includeActions).find((e) => e.key === selectedTab);
   return {
@@ -13925,12 +13925,14 @@ function EntityForm({
   onEntityChange,
   openEntityMode = "full_screen",
   formex: formexProp,
+  disabled: disabledProp,
   Builder,
   EntityFormActionsComponent = EntityFormActions,
   showDefaultActions = true,
   showEntityPath = true,
   children
 }) {
+  console.log("disabledProp", disabledProp);
   if (collection.customId && collection.formAutoSave) {
     console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
   }
@@ -14162,6 +14164,8 @@ function EntityForm({
       setSavingError(e_4);
     });
   };
+  const disabled = formex.isSubmitting || Boolean(disabledProp);
+  console.log("disabled", disabled);
   const formContext = {
     // @ts-ignore
     setFieldValue: useCallback(formex.setFieldValue, []),
@@ -14174,7 +14178,8 @@ function EntityForm({
     entity,
     savingError,
     status,
-    openEntityMode
+    openEntityMode,
+    disabled
   };
   useEffect(() => {
     onFormContextReady?.(formContext);
@@ -14187,6 +14192,7 @@ function EntityForm({
   }, []);
   const pluginActions = [];
   const plugins = customizationController.plugins;
+  const actionsDisabled = disabled || formex.isSubmitting || status === "existing" && !formex.dirty || Boolean(disabledProp);
   if (plugins && collection) {
     const actionProps = {
       entityId,
@@ -14196,7 +14202,8 @@ function EntityForm({
       context,
       currentEntityId: entityId,
       formContext,
-      openEntityMode
+      openEntityMode,
+      disabled: actionsDisabled
     };
     pluginActions.push(...plugins.map((plugin) => plugin.form?.Actions ? /* @__PURE__ */ jsx(plugin.form.Actions, { ...actionProps }, `actions_${plugin.key}`) : null).filter(Boolean));
   }
@@ -14265,13 +14272,13 @@ function EntityForm({
       const property_0 = resolvedCollection.properties[key_1];
       if (property_0) {
         const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex.touched[key_1];
-        const disabled = !autoSave && formex.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
+        const disabled_0 = disabledProp || !autoSave && formex.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
         const hidden = isHidden(property_0);
         if (hidden) return null;
         const widthPercentage = property_0.widthPercentage ?? 100;
         const cmsFormFieldProps = {
           propertyKey: key_1,
-          disabled,
+          disabled: disabled_0,
           property: property_0,
           includeDescription: property_0.description || property_0.longDescription,
           underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
@@ -14322,11 +14329,10 @@ function EntityForm({
   useEffect(() => {
     if (entityId && onIdChange) onIdChange(entityId);
   }, [entityId, onIdChange]);
-  const disabled_0 = formex.isSubmitting || !formex.dirty && status === "existing";
   if (!resolvedCollection || !path) {
     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 });
+  const dialogActions = /* @__PURE__ */ jsx(EntityFormActionsComponent, { collection: resolvedCollection, path, entity, layout: forceActionsAtTheBottom ? "bottom" : "side", savingError, formex, disabled: actionsDisabled, status, pluginActions, openEntityMode, showDefaultActions });
   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: [
@@ -14696,7 +14702,7 @@ function FormLayout(t0) {
   return t2;
 }
 function SelectFieldBinding(t0) {
-  const $ = c(46);
+  const $ = c(47);
   const {
     propertyKey,
     value,
@@ -14793,68 +14799,69 @@ function SelectFieldBinding(t0) {
     t12 = $[19];
   }
   let t13;
-  if ($[20] !== handleClearClick || $[21] !== property.clearable) {
-    t13 = property.clearable && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
-    $[20] = handleClearClick;
-    $[21] = property.clearable;
-    $[22] = t13;
+  if ($[20] !== disabled || $[21] !== handleClearClick || $[22] !== property.clearable) {
+    t13 = property.clearable && !disabled && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+    $[20] = disabled;
+    $[21] = handleClearClick;
+    $[22] = property.clearable;
+    $[23] = t13;
   } else {
-    t13 = $[22];
+    t13 = $[23];
   }
   let t14;
-  if ($[23] !== property.dataType || $[24] !== setValue) {
+  if ($[24] !== property.dataType || $[25] !== setValue) {
     t14 = (updatedValue) => {
       const newValue = updatedValue ? property.dataType === "number" ? parseFloat(updatedValue) : updatedValue : null;
       return setValue(newValue);
     };
-    $[23] = property.dataType;
-    $[24] = setValue;
-    $[25] = t14;
+    $[24] = property.dataType;
+    $[25] = setValue;
+    $[26] = t14;
   } else {
-    t14 = $[25];
+    t14 = $[26];
   }
   const t15 = (enumKey) => /* @__PURE__ */ jsx(EnumValuesChip, { enumKey, enumValues, size });
   const t16 = enumValues && enumValues.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: String(option.id), enumValues, size }) }, option.id));
   let t17;
-  if ($[26] !== T0 || $[27] !== disabled || $[28] !== size || $[29] !== t12 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16 || $[34] !== t5 || $[35] !== t8) {
+  if ($[27] !== T0 || $[28] !== disabled || $[29] !== size || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 || $[34] !== t16 || $[35] !== t5 || $[36] !== t8) {
     t17 = /* @__PURE__ */ jsx(T0, { value: t5, disabled, size, fullWidth: t6, position: t7, inputClassName: t8, label: t12, endAdornment: t13, onValueChange: t14, renderValue: t15, children: t16 });
-    $[26] = T0;
-    $[27] = disabled;
-    $[28] = size;
-    $[29] = t12;
-    $[30] = t13;
-    $[31] = t14;
-    $[32] = t15;
-    $[33] = t16;
-    $[34] = t5;
-    $[35] = t8;
-    $[36] = t17;
+    $[27] = T0;
+    $[28] = disabled;
+    $[29] = size;
+    $[30] = t12;
+    $[31] = t13;
+    $[32] = t14;
+    $[33] = t15;
+    $[34] = t16;
+    $[35] = t5;
+    $[36] = t8;
+    $[37] = t17;
   } else {
-    t17 = $[36];
+    t17 = $[37];
   }
   let t18;
-  if ($[37] !== disabled || $[38] !== error || $[39] !== includeDescription || $[40] !== property || $[41] !== showError) {
+  if ($[38] !== disabled || $[39] !== error || $[40] !== includeDescription || $[41] !== property || $[42] !== showError) {
     t18 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property });
-    $[37] = disabled;
-    $[38] = error;
-    $[39] = includeDescription;
-    $[40] = property;
-    $[41] = showError;
-    $[42] = t18;
+    $[38] = disabled;
+    $[39] = error;
+    $[40] = includeDescription;
+    $[41] = property;
+    $[42] = showError;
+    $[43] = t18;
   } else {
-    t18 = $[42];
+    t18 = $[43];
   }
   let t19;
-  if ($[43] !== t17 || $[44] !== t18) {
+  if ($[44] !== t17 || $[45] !== t18) {
     t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t17,
       t18
     ] });
-    $[43] = t17;
-    $[44] = t18;
-    $[45] = t19;
+    $[44] = t17;
+    $[45] = t18;
+    $[46] = t19;
   } else {
-    t19 = $[45];
+    t19 = $[46];
   }
   return t19;
 }
@@ -15082,7 +15089,7 @@ const activeDropClasses = "pt-0 border-2 border-solid";
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500";
 const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500";
 function StorageUploadFieldBinding(t0) {
-  const $ = c(47);
+  const $ = c(48);
   const {
     propertyKey,
     value,
@@ -15102,18 +15109,19 @@ function StorageUploadFieldBinding(t0) {
   }
   const storageSource = useStorageSource(context.collection);
   let t1;
-  if ($[0] !== isSubmitting || $[1] !== property) {
-    t1 = isReadOnly(property) || !!property.disabled || isSubmitting;
-    $[0] = isSubmitting;
-    $[1] = property;
-    $[2] = t1;
+  if ($[0] !== context.disabled || $[1] !== isSubmitting || $[2] !== property) {
+    t1 = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
+    $[0] = context.disabled;
+    $[1] = isSubmitting;
+    $[2] = property;
+    $[3] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[3];
   }
   const disabled = t1;
   const t2 = disabled ?? false;
   let t3;
-  if ($[3] !== context.entityId || $[4] !== context.path || $[5] !== context.values || $[6] !== property || $[7] !== propertyKey || $[8] !== setValue || $[9] !== storageSource || $[10] !== t2 || $[11] !== value) {
+  if ($[4] !== context.entityId || $[5] !== context.path || $[6] !== context.values || $[7] !== property || $[8] !== propertyKey || $[9] !== setValue || $[10] !== storageSource || $[11] !== t2 || $[12] !== value) {
     t3 = {
       entityValues: context.values,
       entityId: context.entityId,
@@ -15125,18 +15133,18 @@ function StorageUploadFieldBinding(t0) {
       disabled: t2,
       onChange: setValue
     };
-    $[3] = context.entityId;
-    $[4] = context.path;
-    $[5] = context.values;
-    $[6] = property;
-    $[7] = propertyKey;
-    $[8] = setValue;
-    $[9] = storageSource;
-    $[10] = t2;
-    $[11] = value;
-    $[12] = t3;
+    $[4] = context.entityId;
+    $[5] = context.path;
+    $[6] = context.values;
+    $[7] = property;
+    $[8] = propertyKey;
+    $[9] = setValue;
+    $[10] = storageSource;
+    $[11] = t2;
+    $[12] = value;
+    $[13] = t3;
   } else {
-    t3 = $[12];
+    t3 = $[13];
   }
   const {
     internalValue,
@@ -15148,90 +15156,90 @@ function StorageUploadFieldBinding(t0) {
     multipleFilesSupported
   } = useStorageUploadController(t3);
   let t4;
-  if ($[13] !== property || $[14] !== setValue || $[15] !== value) {
+  if ($[14] !== property || $[15] !== setValue || $[16] !== value) {
     t4 = {
       property,
       value,
       setValue
     };
-    $[13] = property;
-    $[14] = setValue;
-    $[15] = value;
-    $[16] = t4;
+    $[14] = property;
+    $[15] = setValue;
+    $[16] = value;
+    $[17] = t4;
   } else {
-    t4 = $[16];
+    t4 = $[17];
   }
   useClearRestoreValue(t4);
   const t5 = property;
   let t6;
-  if ($[17] !== authController || $[18] !== t5) {
+  if ($[18] !== authController || $[19] !== t5) {
     t6 = resolveProperty({
       propertyOrBuilder: t5,
       authController
     });
-    $[17] = authController;
-    $[18] = t5;
-    $[19] = t6;
+    $[18] = authController;
+    $[19] = t5;
+    $[20] = t6;
   } else {
-    t6 = $[19];
+    t6 = $[20];
   }
   const resolvedProperty = t6;
   let t7;
-  if ($[20] !== minimalistView || $[21] !== property || $[22] !== propertyKey) {
+  if ($[21] !== minimalistView || $[22] !== property || $[23] !== propertyKey) {
     t7 = !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8text-text-secondary dark:text-text-secondary-dark ml-3.5" });
-    $[20] = minimalistView;
-    $[21] = property;
-    $[22] = propertyKey;
-    $[23] = t7;
+    $[21] = minimalistView;
+    $[22] = property;
+    $[23] = propertyKey;
+    $[24] = t7;
   } else {
-    t7 = $[23];
+    t7 = $[24];
   }
   const t8 = disabled ?? false;
   const t9 = autoFocus ?? false;
   let t10;
-  if ($[24] !== internalValue || $[25] !== multipleFilesSupported || $[26] !== onFileUploadComplete || $[27] !== onFilesAdded || $[28] !== propertyKey || $[29] !== resolvedProperty || $[30] !== setInternalValue || $[31] !== setValue || $[32] !== storage || $[33] !== storagePathBuilder || $[34] !== t8 || $[35] !== t9) {
+  if ($[25] !== internalValue || $[26] !== multipleFilesSupported || $[27] !== onFileUploadComplete || $[28] !== onFilesAdded || $[29] !== propertyKey || $[30] !== resolvedProperty || $[31] !== setInternalValue || $[32] !== setValue || $[33] !== storage || $[34] !== storagePathBuilder || $[35] !== t8 || $[36] !== t9) {
     t10 = /* @__PURE__ */ jsx(StorageUpload, { value: internalValue, name: propertyKey, disabled: t8, autoFocus: t9, property: resolvedProperty, onChange: setValue, setInternalValue, onFilesAdded, onFileUploadComplete, storagePathBuilder, storage, multipleFilesSupported });
-    $[24] = internalValue;
-    $[25] = multipleFilesSupported;
-    $[26] = onFileUploadComplete;
-    $[27] = onFilesAdded;
-    $[28] = propertyKey;
-    $[29] = resolvedProperty;
-    $[30] = setInternalValue;
-    $[31] = setValue;
-    $[32] = storage;
-    $[33] = storagePathBuilder;
-    $[34] = t8;
-    $[35] = t9;
-    $[36] = t10;
-  } else {
-    t10 = $[36];
+    $[25] = internalValue;
+    $[26] = multipleFilesSupported;
+    $[27] = onFileUploadComplete;
+    $[28] = onFilesAdded;
+    $[29] = propertyKey;
+    $[30] = resolvedProperty;
+    $[31] = setInternalValue;
+    $[32] = setValue;
+    $[33] = storage;
+    $[34] = storagePathBuilder;
+    $[35] = t8;
+    $[36] = t9;
+    $[37] = t10;
+  } else {
+    t10 = $[37];
   }
   let t11;
-  if ($[37] !== disabled || $[38] !== error || $[39] !== includeDescription || $[40] !== property || $[41] !== showError) {
+  if ($[38] !== disabled || $[39] !== error || $[40] !== includeDescription || $[41] !== property || $[42] !== showError) {
     t11 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property });
-    $[37] = disabled;
-    $[38] = error;
-    $[39] = includeDescription;
-    $[40] = property;
-    $[41] = showError;
-    $[42] = t11;
+    $[38] = disabled;
+    $[39] = error;
+    $[40] = includeDescription;
+    $[41] = property;
+    $[42] = showError;
+    $[43] = t11;
   } else {
-    t11 = $[42];
+    t11 = $[43];
   }
   let t12;
-  if ($[43] !== t10 || $[44] !== t11 || $[45] !== t7) {
+  if ($[44] !== t10 || $[45] !== t11 || $[46] !== t7) {
     t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t7,
       t10,
       t11
     ] });
-    $[43] = t10;
-    $[44] = t11;
-    $[45] = t7;
-    $[46] = t12;
+    $[44] = t10;
+    $[45] = t11;
+    $[46] = t7;
+    $[47] = t12;
   } else {
-    t12 = $[46];
+    t12 = $[47];
   }
   return t12;
 }
@@ -16147,7 +16155,7 @@ function PropertyFieldBindingInternal(t0) {
         index,
         authController
       });
-      const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+      const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled) || context.disabled;
       if (resolvedProperty === null || isHidden(resolvedProperty)) {
         return /* @__PURE__ */ jsx(Fragment, {});
       } else {
@@ -18190,7 +18198,8 @@ function PopupFormFieldInternal({
     save: saveValue,
     formex,
     status: "existing",
-    openEntityMode: "side_panel"
+    openEntityMode: "side_panel",
+    disabled: false
   };
   const property = propertyKey && getPropertyInPath(collection?.properties ?? {}, propertyKey);
   const fieldProps = propertyKey && property ? {
@@ -21235,6 +21244,9 @@ function EntityEditView({
       return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : void 0;
     }
   }, [authController, entity, status]);
+  console.log({
+    canEdit
+  });
   if (dataLoading && !cachedValues || (!entity || canEdit === void 0) && (status === "existing" || status === "copy")) {
     return /* @__PURE__ */ jsx(CircularProgressCenter, {});
   }
@@ -21290,7 +21302,7 @@ function EntityEditViewInner({
     resolvedEntityViews,
     selectedEntityView,
     selectedSecondaryForm
-  } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
+  } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
   const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
   const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
   const authController = useAuthController();
@@ -21308,6 +21320,7 @@ function EntityEditViewInner({
     const formexStub = createFormexStub(usedEntity?.values ?? {});
     const usedFormContext = formContext ?? {
       entityId,
+      disabled: false,
       openEntityMode: layout,
       status,
       values: usedEntity?.values ?? {},
@@ -21359,10 +21372,11 @@ function EntityEditViewInner({
       });
     }
   };
-  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: [
+  const entityReadOnlyView = /* @__PURE__ */ jsx("div", { className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", canEdit || !mainViewVisible || selectedSecondaryForm ? "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) => {
+  ] }) });
+  const entityView = /* @__PURE__ */ jsx(EntityForm, { collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues: cachedDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
     setUsedEntity(entity_0);
     formProps?.onEntityChange?.(entity_0);
   }, onStatusChange: (status_0) => {
@@ -21395,7 +21409,10 @@ function EntityEditViewInner({
         subcollectionTabs
       ] })
     ] }),
-    globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView,
+    globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      entityReadOnlyView,
+      entityView
+    ] }),
     jsonView,
     customViewsView,
     subCollectionsViews