@firecms/core 3.0.0-canary.136 → 3.0.0-canary.138

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("@firecms/ui"), require("react-fast-compare"), require("react-router-dom"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("react-dropzone"), require("@hello-pangea/dnd"), require("react-image-file-resizer"), require("fuse.js"), require("react-window"), require("yup"), require("@firecms/editor"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "notistack", "object-hash", "@firecms/formex", "@firecms/ui", "react-fast-compare", "react-router-dom", "date-fns", "date-fns/locale", "react-use-measure", "react-dropzone", "@hello-pangea/dnd", "react-image-file-resizer", "fuse.js", "react-window", "yup", "@firecms/editor", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.React, global.notistack, global.hash, global.formex, global.ui, global.equal, global.reactRouterDom, global.dateFns, global.locales, global.useMeasure, global.reactDropzone, global.dnd, global.Resizer, global.Fuse, global.reactWindow, global.yup, global.editor, global.Portal));
-})(this, function(exports2, jsxRuntime, React, notistack, hash, formex, ui, equal, reactRouterDom, dateFns, locales, useMeasure, reactDropzone, dnd, Resizer, Fuse, reactWindow, yup, editor, Portal) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-fast-compare"), require("react-router-dom"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("react-dropzone"), require("@hello-pangea/dnd"), require("react-image-file-resizer"), require("fuse.js"), require("react-window"), require("yup"), require("@firecms/editor"), require("@radix-ui/react-portal")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-fast-compare", "react-router-dom", "date-fns", "date-fns/locale", "react-use-measure", "react-dropzone", "@hello-pangea/dnd", "react-image-file-resizer", "fuse.js", "react-window", "yup", "@firecms/editor", "@radix-ui/react-portal"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.equal, global.reactRouterDom, global.dateFns, global.locales, global.useMeasure, global.reactDropzone, global.dnd, global.Resizer, global.Fuse, global.reactWindow, global.yup, global.editor, global.Portal));
+})(this, function(exports2, jsxRuntime, React, ui, notistack, hash, formex, equal, reactRouterDom, dateFns, locales, useMeasure, reactDropzone, dnd, Resizer, Fuse, reactWindow, yup, editor, Portal) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -676,7 +676,7 @@
       propertyKey: "ignore",
       // TODO
       propertyOrBuilder,
-      fields
+      propertyConfigs: fields
     });
     if (!resolvedProperty) return null;
     if (resolvedProperty.dataType === "reference") {
@@ -3581,7 +3581,7 @@
           path,
           values: previousValues,
           entityId,
-          fields: customizationController.propertyConfigs
+          propertyConfigs: customizationController.propertyConfigs
         });
         updatedValues = await callbacks.onPreSave({
           collection: resolvedCollection,
@@ -3622,7 +3622,7 @@
             path,
             values: updatedValues,
             entityId,
-            fields: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs
           });
           callbacks.onSaveSuccess({
             collection: resolvedCollection,
@@ -3649,7 +3649,7 @@
           path,
           values: updatedValues,
           entityId,
-          fields: customizationController.propertyConfigs
+          propertyConfigs: customizationController.propertyConfigs
         });
         callbacks.onSaveFailure({
           collection: resolvedCollection,
@@ -4617,7 +4617,7 @@
                       ui.ContentCopyIcon,
                       {
                         className: "text-gray-700 dark:text-gray-300",
-                        size: "small"
+                        size: "smallest"
                       }
                     )
                   }
@@ -4639,7 +4639,7 @@
                   ui.OpenInNewIcon,
                   {
                     className: "text-gray-700 dark:text-gray-300",
-                    size: "small"
+                    size: "smallest"
                   }
                 )
               }
@@ -5113,7 +5113,7 @@
     const property = resolveArrayProperty({
       propertyKey,
       property: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (!property.of) {
       throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
@@ -5168,7 +5168,7 @@
       collection,
       path: entity.path,
       values: entity.values,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }), [collection]);
     const listProperties = React.useMemo(
       () => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
@@ -5470,7 +5470,7 @@
     const property = resolveArrayProperty({
       propertyKey,
       property: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (Array.isArray(property?.of)) {
       throw Error("Using array properties instead of single one in `of` in ArrayProperty");
@@ -5513,7 +5513,7 @@
     const property = resolveArrayProperty({
       propertyKey,
       property: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (Array.isArray(property.of)) {
       throw Error("Using array properties instead of single one in `of` in ArrayProperty");
@@ -5591,7 +5591,7 @@
     const property = resolveArrayProperty({
       propertyKey,
       property: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (Array.isArray(property.of)) {
       throw Error("Using array properties instead of single one in `of` in ArrayProperty");
@@ -5625,7 +5625,7 @@
     const property = resolveArrayProperty({
       propertyKey,
       property: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (property?.dataType !== "array")
       throw Error("Picked wrong preview component ArrayPreview");
@@ -5875,7 +5875,7 @@
     const property = resolveProperty({
       propertyKey,
       propertyOrBuilder: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (value === void 0 || property === null) {
       content = /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {});
@@ -6112,7 +6112,7 @@
     const property = resolveArrayProperty({
       propertyKey,
       property: inputProperty,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     if (Array.isArray(property?.of)) {
       throw Error("Using array properties instead of single one in `of` in ArrayProperty");
@@ -6199,7 +6199,7 @@
       path,
       entityId: entity.id,
       values: entity.values,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }), [collection, path, entity, customizationController.propertyConfigs]);
     const properties = resolvedCollection.properties;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mb-4", children: [
@@ -10648,7 +10648,7 @@
     const resolvedCollection = React.useMemo(() => resolveCollection({
       collection,
       path,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }), [collection, path]);
     const handleCancel = React.useCallback(() => {
       onClose();
@@ -10807,7 +10807,7 @@
     return JSON.parse(stored);
   }
   const editEntityAction = {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, {}),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, {}),
     name: "Edit",
     collapsed: false,
     onClick({
@@ -10946,7 +10946,6 @@
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
     const fullPath = navigation.resolveAliasesFrom(pathInput);
-    console.trace("Opening reference dialog for path " + fullPath);
     const dataSource = useDataSource();
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = React.useState([]);
     const toggleEntitySelection = (entity) => {
@@ -11072,7 +11071,7 @@
       collection,
       path: fullPath,
       values: {},
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
     const tableController = useDataSourceEntityCollectionTableController({
@@ -11941,7 +11940,7 @@
       path,
       values: internalValue,
       entityId,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }) : void 0;
     const windowSize = useWindowSize();
     const draggableRef = React.useRef(null);
@@ -12474,7 +12473,7 @@
       const resolvedCollection = React.useMemo(() => resolveCollection({
         collection,
         path: fullPath,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
       }), [collection, fullPath]);
       const getPropertyFor = React.useCallback(({
         propertyKey,
@@ -12490,7 +12489,7 @@
           path: entity.path,
           values: entity.values,
           entityId: entity.id,
-          fields: customizationController.propertyConfigs
+          propertyConfigs: customizationController.propertyConfigs
         });
       }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
       const displayedColumnIds = useColumnIds(resolvedCollection, true);
@@ -12941,15 +12940,18 @@
       }
     ) });
   }
-  function PropertyConfigBadge({ propertyConfig }) {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
+  function PropertyConfigBadge({
+    propertyConfig,
+    disabled
+  }) {
+    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-gray-400 dark:bg-gray-600" : "");
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: classes,
         style: {
-          background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
+          background: !disabled ? propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888" : void 0
         },
         children: propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")
       }
@@ -13271,24 +13273,22 @@
       const initial = user?.displayName ? user.displayName[0].toUpperCase() : user?.email ? user.email[0].toUpperCase() : "A";
       avatarComponent = /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { children: initial });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         style,
         className: ui.cls(
-          "w-full h-16 transition-all ease-in duration-75 fixed",
+          "w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+          "flex flex-row gap-2 px-4 items-center",
           {
-            "pl-[17rem]": drawerOpen && largeLayout,
-            "pl-20": hasDrawer && !(drawerOpen && largeLayout),
+            "pl-[19rem]": drawerOpen && largeLayout,
+            "pl-24": hasDrawer && !(drawerOpen && largeLayout),
             "z-10": largeLayout,
-            // "w-full": !hasDrawer,
-            // "w-[calc(100%-64px)]": hasDrawer && !(drawerOpen && largeLayout),
-            // "w-[calc(100%-17rem)]": hasDrawer && (drawerOpen && largeLayout),
-            "duration-150": drawerOpen && largeLayout
+            "duration-100": drawerOpen && largeLayout
           },
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 px-4 h-full items-center", children: [
+        children: [
           navigation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
             reactRouterDom.Link,
             {
@@ -13342,7 +13342,7 @@
               "Log Out"
             ] })
           ] })
-        ] })
+        ]
       }
     );
   };
@@ -14184,7 +14184,6 @@
       throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
     }
     const onMultipleEntitiesSelected = React.useCallback((entities) => {
-      console.debug("onMultipleEntitiesSelected", entities);
       setValue(entities.map((e) => getReferenceFrom(e)));
     }, [setValue]);
     const referenceDialogController = useReferenceDialog(
@@ -15138,7 +15137,7 @@
             values: fieldProps.form.values,
             path: context.path,
             entityId: context.entityId,
-            fields: customizationController.propertyConfigs,
+            propertyConfigs: customizationController.propertyConfigs,
             index
           });
           if (resolvedProperty === null || isHidden(resolvedProperty)) {
@@ -15166,7 +15165,7 @@
               values: fieldProps.form.values,
               path: context.path,
               entityId: context.entityId,
-              fields: customizationController.propertyConfigs,
+              propertyConfigs: customizationController.propertyConfigs,
               index
             });
             Component = configProperty.Field;
@@ -16889,7 +16888,7 @@
     values,
     previousValues,
     userConfigPersistence,
-    fields,
+    propertyConfigs,
     ignoreMissingFields = false
   }) => {
     const collectionOverride = userConfigPersistence?.getCollectionConfig(path);
@@ -16905,7 +16904,7 @@
         previousValues: usedPreviousValues,
         path,
         entityId,
-        fields,
+        propertyConfigs,
         ignoreMissingFields
       });
       if (!childResolvedProperty) return {};
@@ -16987,7 +16986,7 @@
       };
     }
     if (resolvedProperty.propertyConfig && !isDefaultFieldConfigId(resolvedProperty.propertyConfig)) {
-      const cmsFields = props.fields;
+      const cmsFields = props.propertyConfigs;
       if (!cmsFields && !ignoreMissingFields) {
         throw Error(`Trying to resolve a property with key '${resolvedProperty.propertyConfig}' that inherits from a custom property config but no custom property configs were provided. Use the property 'propertyConfigs' in your app config to provide them`);
       }
@@ -17459,7 +17458,7 @@
       collection: inputCollection,
       path,
       values: entity?.values,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }), [entity?.values, path, customizationController.propertyConfigs]);
     const initialStatus = copy ? "copy" : entityIdProp ? "existing" : "new";
     const [status, setStatus] = React.useState(initialStatus);
@@ -17660,7 +17659,7 @@
       entityId,
       values: formex$1.values,
       previousValues: formex$1.initialValues,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     });
     const lastSavedValues = React.useRef(entity?.values);
     const save = (values) => {
@@ -17828,7 +17827,7 @@
           });
           setEntityId(updatedId);
         } catch (e) {
-          onIdUpdateError && onIdUpdateError(e);
+          onIdUpdateError?.(e);
           console.error(e);
         }
         setCustomIdLoading(false);
@@ -18031,7 +18030,7 @@
             children: pluginActions
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-12 pb-16 pl-4 sm:px-8 md:px-10", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -18950,7 +18949,7 @@
           collection,
           path,
           entityId,
-          fields: propertyConfigs
+          propertyConfigs
         }) : void 0;
         const properties = resolvedCollection?.properties;
         const firestoreValues = usedDelegate.cmsToDelegateModel(
@@ -19118,7 +19117,6 @@
       navigationController,
       apiKey
     } = props;
-    ui.useLocaleConfig(locale);
     const dataSource = useBuildDataSource({
       delegate: dataSourceDelegate,
       propertyConfigs,
@@ -19354,7 +19352,7 @@
     equal
   );
   const DrawerHeader = () => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col min-h-[68px]" });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col min-h-16" });
   };
   function DrawerWrapper(props) {
     const width = !props.displayed ? 0 : props.open ? DRAWER_WIDTH : 72;
@@ -19377,13 +19375,12 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "ml-2 fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20",
+                  className: "ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     ui.IconButton,
                     {
                       color: "inherit",
                       "aria-label": "Open menu",
-                      className: "sticky top-2 left-3 ",
                       onClick: () => props.setDrawerOpen(true),
                       size: "large",
                       children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuIcon, {})
@@ -19423,7 +19420,7 @@
             "aria-label": "Open drawer",
             onClick: () => props.setDrawerOpen(true),
             size: "large",
-            className: "absolute top-2 left-5",
+            className: "absolute sm:top-2 sm:left-5 top-1 left-2",
             children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuIcon, {})
           }
         ),