@firecms/core 3.0.0-canary.90 → 3.0.0-canary.91

package/dist/components/common/useColumnsIds.d.ts

@@ -1,4 +1,5 @@
-import { ResolvedEntityCollection, ResolvedProperty } from "../../types";
+import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "../../types";
 import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
 export declare function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[];
 export declare function getColumnKeysForProperty(property: ResolvedProperty, key: string, disabled?: boolean): PropertyColumnConfig[];
+export declare function getFormFieldKeys(collection: EntityCollection): string[];

package/dist/index.es.js

@@ -4,7 +4,7 @@ import React__default, { useRef, useEffect, useContext, useCallback, useMemo, us
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useCreateFormex, Formex, setIn, Field, getIn, useFormex } from "@firecms/formex";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, ErrorOutlineIcon, EditIcon, Button, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, AssignmentIcon, CenteredView, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, ArrowForwardIcon, cardMixin, cardClickableMixin, focusedMixin, StarIcon, StarBorderIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, fieldBackgroundHoverMixin, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, useInjectStyles, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Tab, Tabs, Alert, Sheet, useLocaleConfig, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, ErrorOutlineIcon, EditIcon, Button, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, AssignmentIcon, CenteredView, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, ArrowForwardIcon, cardMixin, cardClickableMixin, focusedMixin, StarIcon, StarBorderIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, fieldBackgroundHoverMixin, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, useInjectStyles, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, NotesIcon, Tab, Tabs, Alert, Sheet, useLocaleConfig, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import equal from "react-fast-compare";
 import { Link, useNavigate, useLocation, UNSAFE_NavigationContext, NavLink, Route, Routes } from "react-router-dom";
 import { format } from "date-fns";
@@ -8533,6 +8533,18 @@ function getColumnKeysForProperty(property, key, disabled) {
     disabled: disabled || Boolean(property.disabled) || Boolean(property.readOnly)
   }];
 }
+function getFormFieldKeys(collection) {
+  const propertyKeys = Object.keys(collection.properties);
+  const additionalFields = collection.additionalFields ?? [];
+  const allKeys = [
+    ...propertyKeys,
+    ...additionalFields.map((field) => field.key)
+  ];
+  if (collection.propertiesOrder) {
+    return collection.propertiesOrder.filter((key) => allKeys.includes(key));
+  }
+  return allKeys;
+}
 function buildIdColumn(largeLayout) {
   return {
     key: "id_ewcfedcswdf3",
@@ -18161,46 +18173,74 @@ function EntityEditViewInner({
       });
     }
   }, [formex.isSubmitting, autoSave, underlyingChanges, entity, formex.values, formex.touched, formex.setFieldValue]);
-  const formFields = /* @__PURE__ */ jsx(Fragment, { children: (resolvedCollection.propertiesOrder ?? Object.keys(resolvedCollection.properties)).map((key) => {
+  const formFields = /* @__PURE__ */ jsx(Fragment, { children: getFormFieldKeys(resolvedCollection).map((key) => {
     const property = resolvedCollection.properties[key];
-    if (!property) {
-      console.warn(`Property ${key} not found in collection ${resolvedCollection.name}`);
-      return null;
+    if (property) {
+      const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key) && !!formex.touched[key];
+      const disabled2 = !autoSave && formex.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
+      const hidden = isHidden(property);
+      if (hidden) return null;
+      const cmsFormFieldProps = {
+        propertyKey: key,
+        disabled: disabled2,
+        property,
+        includeDescription: property.description || property.longDescription,
+        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+        context: formContext,
+        tableMode: false,
+        partOfArray: false,
+        partOfBlock: false,
+        autoFocus: false
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: `form_field_${key}`,
+          children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: /* @__PURE__ */ jsx(PropertyIdCopyTooltipContent, { propertyId: key }),
+              delayDuration: 800,
+              side: "left",
+              align: "start",
+              sideOffset: 16,
+              children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps })
+            }
+          ) })
+        },
+        `field_${resolvedCollection.name}_${key}`
+      );
     }
-    const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key) && !!formex.touched[key];
-    const disabled2 = !autoSave && formex.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
-    const hidden = isHidden(property);
-    if (hidden) return null;
-    const cmsFormFieldProps = {
-      propertyKey: key,
-      disabled: disabled2,
-      property,
-      includeDescription: property.description || property.longDescription,
-      underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-      context: formContext,
-      tableMode: false,
-      partOfArray: false,
-      partOfBlock: false,
-      autoFocus: false
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: `form_field_${key}`,
-        children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
-          Tooltip,
+    const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key);
+    if (additionalField && entity) {
+      const Builder = additionalField.Builder;
+      if (!Builder && !additionalField.value) {
+        throw new Error("When using additional fields you need to provide a Builder or a value");
+      }
+      const child = Builder ? /* @__PURE__ */ jsx(Builder, { entity, context }) : /* @__PURE__ */ jsx(Fragment, { children: additionalField.value?.({
+        entity,
+        context
+      }) });
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          LabelWithIcon,
           {
-            title: /* @__PURE__ */ jsx(PropertyIdCopyTooltipContent, { propertyId: key }),
-            delayDuration: 800,
-            side: "left",
-            align: "start",
-            sideOffset: 16,
-            children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps })
+            icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }),
+            title: additionalField.name,
+            className: "text-text-secondary dark:text-text-secondary-dark ml-3.5"
           }
-        ) })
-      },
-      `field_${resolvedCollection.name}_${key}`
-    );
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"),
+            children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child })
+          }
+        )
+      ] });
+    }
+    console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+    return null;
   }).filter(Boolean) });
   const disabled = formex.isSubmitting || !modified && status === "existing";
   const formRef = React__default.useRef(null);
@@ -20110,6 +20150,7 @@ export {
   getEntityTitlePropertyKey,
   getFieldConfig,
   getFieldId,
+  getFormFieldKeys,
   getHashValue,
   getIcon,
   getIconForProperty,