@firecms/core 3.0.0-canary.174 → 3.0.0-canary.175

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> = Record<string, 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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useEffect, useContext, useCallback, useMemo, createRef, createContext, useLayoutEffect, useDeferredValue, createElement } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, Chip, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, NotesIcon, CheckIcon, Alert, Tab, Tabs, LoadingButton, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, Chip, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, NotesIcon, Alert, Tab, Tabs, LoadingButton, CheckIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useFormex, setIn, getIn, useCreateFormex, Formex, Field } from "@firecms/formex";
@@ -11521,6 +11521,61 @@ function EntityEditView(t0) {
   }
   return t4;
 }
+function FormLayout(t0) {
+  const $ = c(12);
+  const {
+    id,
+    formex,
+    children,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl w-full h-fit", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10");
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== formex.dirty) {
+    t3 = formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "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" }) }) });
+    $[3] = formex.dirty;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== children || $[6] !== t3) {
+    t4 = /* @__PURE__ */ jsxs("div", { className: t2, children: [
+      t3,
+      children
+    ] });
+    $[5] = children;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== id || $[9] !== t1 || $[10] !== t4) {
+    t5 = /* @__PURE__ */ jsx("div", { role: "tabpanel", id, className: t1, children: t4 });
+    $[8] = id;
+    $[9] = t1;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+}
 function EntityEditViewInner({
   path,
   entityId: entityIdProp,
@@ -11810,24 +11865,32 @@ function EntityEditViewInner({
   const resolvedEntityViews = customViews ? customViews.map((e_4) => resolveEntityView(e_4, customizationController.entityViews)).filter(Boolean) : [];
   const selectedEntityView = resolvedEntityViews.find((e_5) => e_5.key === selectedTab);
   const shouldShowEntityActions = !autoSave && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
-  const customViewsView = customViews && resolvedEntityViews.map((customView, colIndex) => {
+  const secondaryForms = customViews && resolvedEntityViews.filter((e_6) => e_6.includeActions).map((customView, colIndex) => {
     if (!customView) return null;
     const Builder = customView.Builder;
     if (!Builder) {
       console.error("customView.Builder is not defined");
       return null;
     }
+    return /* @__PURE__ */ jsx(FormLayout, { className: selectedTab !== customView.key ? "hidden" : "", formex, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
+  }).filter(Boolean);
+  const customViewsView = customViews && resolvedEntityViews.filter((e_7) => !e_7.includeActions).map((customView_0, colIndex_0) => {
+    if (!customView_0) return null;
+    const Builder_0 = customView_0.Builder;
+    if (!Builder_0) {
+      console.error("customView.Builder is not defined");
+      return null;
+    }
     return /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-grow 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: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
+      "hidden": selectedTab !== customView_0.key
+    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder_0, { collection, entity: usedEntity, modifiedValues: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView_0.key}`);
   }).filter(Boolean);
   const globalLoading = dataLoading && !usedEntity || (!usedEntity || readOnly === void 0) && (status === "existing" || status === "copy");
-  const subCollectionsViews = subcollections && subcollections.map((subcollection, colIndex_0) => {
+  const subCollectionsViews = subcollections && subcollections.map((subcollection, colIndex_1) => {
     const subcollectionId = subcollection.id ?? subcollection.path;
     const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
-    return /* @__PURE__ */ jsxs("div", { className: cls("relative flex-grow h-full overflow-auto w-full", {
-      "hidden": selectedTab !== subcollectionId
-    }), role: "tabpanel", children: [
+    if (selectedTab !== subcollectionId) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex-grow h-full overflow-auto w-full", role: "tabpanel", children: [
       globalLoading || saving && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
       !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}`);
@@ -11888,9 +11951,9 @@ function EntityEditViewInner({
           context
         });
         setEntityId(updatedId);
-      } catch (e_6) {
-        onIdUpdateError?.(e_6);
-        console.error(e_6);
+      } catch (e_8) {
+        onIdUpdateError?.(e_8);
+        console.error(e_8);
       }
       setCustomIdLoading(false);
     }
@@ -11964,11 +12027,11 @@ function EntityEditViewInner({
     }
     const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
     if (additionalField && entity) {
-      const Builder_0 = additionalField.Builder;
-      if (!Builder_0 && !additionalField.value) {
+      const Builder_1 = additionalField.Builder;
+      if (!Builder_1 && !additionalField.value) {
         throw new Error("When using additional fields you need to provide a Builder or a value");
       }
-      const child = Builder_0 ? /* @__PURE__ */ jsx(Builder_0, { entity, context }) : /* @__PURE__ */ jsx(Fragment, { children: additionalField.value?.({
+      const child = Builder_1 ? /* @__PURE__ */ jsx(Builder_1, { entity, context }) : /* @__PURE__ */ jsx(Fragment, { children: additionalField.value?.({
         entity,
         context
       })?.toString() });
@@ -12015,8 +12078,7 @@ function EntityEditViewInner({
     pluginActions,
     layout
   });
-  const entityView = readOnly === void 0 ? /* @__PURE__ */ jsx(Fragment, {}) : !readOnly ? /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: [
-    formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "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" }) }) }),
+  const entityView = readOnly === void 0 ? /* @__PURE__ */ jsx(Fragment, {}) : !readOnly ? /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8", children: [
       /* @__PURE__ */ jsx(Typography, { className: "mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0", variant: "h4", children: title ?? inputCollection.singularName ?? inputCollection.name }),
       /* @__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: [
@@ -12026,13 +12088,11 @@ function EntityEditViewInner({
       ] }) })
     ] }),
     !collection.hideIdFromForm && /* @__PURE__ */ jsx(CustomIdField, { customId: inputCollection.customId, entityId, status, onChange: setEntityId, error: entityIdError, loading: customIdLoading, entity }),
-    entityId && formContext && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
-        formFields,
-        /* @__PURE__ */ jsx(ErrorFocus, { containerRef: formRef })
-      ] }),
-      actionsAtTheBottom && /* @__PURE__ */ jsx("div", { className: "h-16" })
-    ] })
+    entityId && formContext && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-8", ref: formRef, children: [
+      formFields,
+      /* @__PURE__ */ jsx(ErrorFocus, { containerRef: formRef })
+    ] }) }),
+    actionsAtTheBottom && /* @__PURE__ */ jsx("div", { className: "h-16" })
   ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
     /* @__PURE__ */ jsx(EntityView, { className: "px-12", entity: usedEntity, path, collection })
@@ -12063,13 +12123,12 @@ function EntityEditViewInner({
       });
       return onDiscard();
     }, noValidate: true, className: "flex-1 flex flex-row w-full overflow-y-auto justify-center", children: [
-      /* @__PURE__ */ jsx("div", { role: "tabpanel", hidden: !mainViewVisible, id: `form_${path}`, className: cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl w-full h-fit", {
-        "hidden": !mainViewVisible
-      }), children: globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView }),
-      customViewsView,
-      subCollectionsViews,
+      /* @__PURE__ */ jsx(FormLayout, { className: !mainViewVisible ? "hidden" : "", id: `form_${path}`, formex, children: globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView }),
+      secondaryForms,
       shouldShowEntityActions && dialogActions
-    ] })
+    ] }),
+    customViewsView,
+    subCollectionsViews
   ] });
   if (plugins) {
     plugins.forEach((plugin_0) => {
@@ -23023,10 +23082,10 @@ function EntityFullScreenRoute({
   }
   const lastCollectionEntry = navigationEntries.findLast((entry_1) => entry_1.type === "collection");
   if (isNew && !lastCollectionEntry) {
-    throw new Error("No collection found in the navigation");
+    throw new Error("INTERNAL: No collection found in the navigation");
   }
   if (!isNew && !lastEntityEntry) {
-    throw new Error("No entity found in the navigation");
+    return /* @__PURE__ */ jsx(NotFoundPage, {});
   }
   const collection = isNew ? lastCollectionEntry.collection : lastEntityEntry.parentCollection;
   const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry.path : lastEntityEntry.path);