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

package/README.md

@@ -89,7 +89,7 @@ navigating through **subcollections** and accessing custom views (such as custom
 forms or blog previews). This functionality can also be accessed
 programmatically using the `useSideEntityController` hook.
 
-FireCMS includes **over 15 built-in fields** with numerous customization and
+FireCMS includes **over 20 built-in fields** with numerous customization and
 validation options. The components have been carefully designed for an
 outstanding user experience, including advanced features like **references** to
 other collections, **markdown**, and **array reordering**.

package/dist/components/PropertyConfigBadge.d.ts

@@ -1,4 +1,5 @@
 import { PropertyConfig } from "../types";
-export declare function PropertyConfigBadge({ propertyConfig }: {
+export declare function PropertyConfigBadge({ propertyConfig, disabled }: {
     propertyConfig: PropertyConfig | undefined;
+    disabled?: boolean;
 }): React.ReactNode;

package/dist/index.es.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect } from "react";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, ErrorOutlineIcon, EditIcon, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, ArrowForwardIcon, cardMixin, cardClickableMixin, StarIcon, StarBorderIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, NotesIcon, Tab, Tabs, Alert, Sheet, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 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, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, ErrorOutlineIcon, EditIcon, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, ArrowForwardIcon, cardMixin, cardClickableMixin, StarIcon, StarBorderIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, 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";
@@ -672,7 +672,7 @@ function isReferenceProperty(propertyOrBuilder, fields) {
     propertyKey: "ignore",
     // TODO
     propertyOrBuilder,
-    fields
+    propertyConfigs: fields
   });
   if (!resolvedProperty) return null;
   if (resolvedProperty.dataType === "reference") {
@@ -3577,7 +3577,7 @@ async function saveEntityWithCallbacks({
         path,
         values: previousValues,
         entityId,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
       });
       updatedValues = await callbacks.onPreSave({
         collection: resolvedCollection,
@@ -3618,7 +3618,7 @@ async function saveEntityWithCallbacks({
           path,
           values: updatedValues,
           entityId,
-          fields: customizationController.propertyConfigs
+          propertyConfigs: customizationController.propertyConfigs
         });
         callbacks.onSaveSuccess({
           collection: resolvedCollection,
@@ -3645,7 +3645,7 @@ async function saveEntityWithCallbacks({
         path,
         values: updatedValues,
         entityId,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
       });
       callbacks.onSaveFailure({
         collection: resolvedCollection,
@@ -4613,7 +4613,7 @@ function ImagePreview({
                     ContentCopyIcon,
                     {
                       className: "text-gray-700 dark:text-gray-300",
-                      size: "small"
+                      size: "smallest"
                     }
                   )
                 }
@@ -4635,7 +4635,7 @@ function ImagePreview({
                 OpenInNewIcon,
                 {
                   className: "text-gray-700 dark:text-gray-300",
-                  size: "small"
+                  size: "smallest"
                 }
               )
             }
@@ -5109,7 +5109,7 @@ function ArrayPropertyPreview({
   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}`);
@@ -5164,7 +5164,7 @@ function EntityPreview({
     collection,
     path: entity.path,
     values: entity.values,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   }), [collection]);
   const listProperties = useMemo(
     () => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
@@ -5466,7 +5466,7 @@ function ArrayOfReferencesPreview({
   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");
@@ -5509,7 +5509,7 @@ function ArrayOfStorageComponentsPreview({
   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");
@@ -5587,7 +5587,7 @@ function ArrayOfStringsPreview({
   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");
@@ -5621,7 +5621,7 @@ function ArrayOneOfPreview({
   const property = resolveArrayProperty({
     propertyKey,
     property: inputProperty,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   });
   if (property?.dataType !== "array")
     throw Error("Picked wrong preview component ArrayPreview");
@@ -5871,7 +5871,7 @@ const PropertyPreview = React__default.memo(function PropertyPreview2(props) {
   const property = resolveProperty({
     propertyKey,
     propertyOrBuilder: inputProperty,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   });
   if (value === void 0 || property === null) {
     content = /* @__PURE__ */ jsx(EmptyValue, {});
@@ -6108,7 +6108,7 @@ function ArrayOfMapsPreview({
   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");
@@ -6195,7 +6195,7 @@ function EntityView({
     path,
     entityId: entity.id,
     values: entity.values,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   }), [collection, path, entity, customizationController.propertyConfigs]);
   const properties = resolvedCollection.properties;
   return /* @__PURE__ */ jsx("div", { className: "w-full " + className, children: /* @__PURE__ */ jsxs("div", { className: "w-full mb-4", children: [
@@ -10644,7 +10644,7 @@ function DeleteEntityDialog({
   const resolvedCollection = useMemo(() => resolveCollection({
     collection,
     path,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   }), [collection, path]);
   const handleCancel = useCallback(() => {
     onClose();
@@ -10803,7 +10803,7 @@ function getRecentIds(collectionId) {
   return JSON.parse(stored);
 }
 const editEntityAction = {
-  icon: /* @__PURE__ */ jsx(KeyboardTabIcon, {}),
+  icon: /* @__PURE__ */ jsx(EditIcon, {}),
   name: "Edit",
   collapsed: false,
   onClick({
@@ -10942,7 +10942,6 @@ function ReferenceSelectionTable({
   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] = useState([]);
   const toggleEntitySelection = (entity) => {
@@ -11068,7 +11067,7 @@ function ReferenceSelectionTable({
     collection,
     path: fullPath,
     values: {},
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   }), [collection, customizationController.propertyConfigs, fullPath]);
   const displayedColumnIds = useColumnIds(resolvedCollection, false);
   const tableController = useDataSourceEntityCollectionTableController({
@@ -11937,7 +11936,7 @@ function PopupFormFieldInternal({
     path,
     values: internalValue,
     entityId,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   }) : void 0;
   const windowSize = useWindowSize();
   const draggableRef = React__default.useRef(null);
@@ -12470,7 +12469,7 @@ const EntityCollectionView = React__default.memo(
     const resolvedCollection = useMemo(() => resolveCollection({
       collection,
       path: fullPath,
-      fields: customizationController.propertyConfigs
+      propertyConfigs: customizationController.propertyConfigs
     }), [collection, fullPath]);
     const getPropertyFor = useCallback(({
       propertyKey,
@@ -12486,7 +12485,7 @@ const EntityCollectionView = React__default.memo(
         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);
@@ -12937,15 +12936,18 @@ function EntityIdHeaderWidget({
     }
   ) });
 }
-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__ */ 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")
     }
@@ -13267,24 +13269,22 @@ const DefaultAppBar = function DefaultAppBar2({
     const initial = user?.displayName ? user.displayName[0].toUpperCase() : user?.email ? user.email[0].toUpperCase() : "A";
     avatarComponent = /* @__PURE__ */ jsx(Avatar, { children: initial });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style,
       className: 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__ */ jsxs("div", { className: "flex flex-row gap-2 px-4 h-full items-center", children: [
+      children: [
         navigation && /* @__PURE__ */ jsx("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsx(
           Link,
           {
@@ -13338,7 +13338,7 @@ const DefaultAppBar = function DefaultAppBar2({
             "Log Out"
           ] })
         ] })
-      ] })
+      ]
     }
   );
 };
@@ -14180,7 +14180,6 @@ function ArrayOfReferencesFieldBinding({
     throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
   }
   const onMultipleEntitiesSelected = useCallback((entities) => {
-    console.debug("onMultipleEntitiesSelected", entities);
     setValue(entities.map((e) => getReferenceFrom(e)));
   }, [setValue]);
   const referenceDialogController = useReferenceDialog(
@@ -15134,7 +15133,7 @@ function PropertyFieldBindingInternal({
           values: fieldProps.form.values,
           path: context.path,
           entityId: context.entityId,
-          fields: customizationController.propertyConfigs,
+          propertyConfigs: customizationController.propertyConfigs,
           index
         });
         if (resolvedProperty === null || isHidden(resolvedProperty)) {
@@ -15162,7 +15161,7 @@ function PropertyFieldBindingInternal({
             values: fieldProps.form.values,
             path: context.path,
             entityId: context.entityId,
-            fields: customizationController.propertyConfigs,
+            propertyConfigs: customizationController.propertyConfigs,
             index
           });
           Component = configProperty.Field;
@@ -16885,7 +16884,7 @@ const resolveCollection = ({
   values,
   previousValues,
   userConfigPersistence,
-  fields,
+  propertyConfigs,
   ignoreMissingFields = false
 }) => {
   const collectionOverride = userConfigPersistence?.getCollectionConfig(path);
@@ -16901,7 +16900,7 @@ const resolveCollection = ({
       previousValues: usedPreviousValues,
       path,
       entityId,
-      fields,
+      propertyConfigs,
       ignoreMissingFields
     });
     if (!childResolvedProperty) return {};
@@ -16983,7 +16982,7 @@ function resolveProperty({
     };
   }
   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`);
     }
@@ -17455,7 +17454,7 @@ function EntityEditViewInner({
     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] = useState(initialStatus);
@@ -17656,7 +17655,7 @@ function EntityEditViewInner({
     entityId,
     values: formex.values,
     previousValues: formex.initialValues,
-    fields: customizationController.propertyConfigs
+    propertyConfigs: customizationController.propertyConfigs
   });
   const lastSavedValues = useRef(entity?.values);
   const save = (values) => {
@@ -17824,7 +17823,7 @@ function EntityEditViewInner({
         });
         setEntityId(updatedId);
       } catch (e) {
-        onIdUpdateError && onIdUpdateError(e);
+        onIdUpdateError?.(e);
         console.error(e);
       }
       setCustomIdLoading(false);
@@ -18027,7 +18026,7 @@ function EntityEditViewInner({
           children: pluginActions
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "pt-12 pb-16 pl-4 sm:px-8 md:px-10", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -18946,7 +18945,7 @@ function useBuildDataSource({
         collection,
         path,
         entityId,
-        fields: propertyConfigs
+        propertyConfigs
       }) : void 0;
       const properties = resolvedCollection?.properties;
       const firestoreValues = usedDelegate.cmsToDelegateModel(
@@ -19114,7 +19113,6 @@ function FireCMS(props) {
     navigationController,
     apiKey
   } = props;
-  useLocaleConfig(locale);
   const dataSource = useBuildDataSource({
     delegate: dataSourceDelegate,
     propertyConfigs,
@@ -19350,7 +19348,7 @@ const Scaffold = React__default.memo(
   equal
 );
 const DrawerHeader = () => {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-[68px]" });
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-16" });
 };
 function DrawerWrapper(props) {
   const width = !props.displayed ? 0 : props.open ? DRAWER_WIDTH : 72;
@@ -19373,13 +19371,12 @@ function DrawerWrapper(props) {
             children: /* @__PURE__ */ 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__ */ jsx(
                   IconButton,
                   {
                     color: "inherit",
                     "aria-label": "Open menu",
-                    className: "sticky top-2 left-3 ",
                     onClick: () => props.setDrawerOpen(true),
                     size: "large",
                     children: /* @__PURE__ */ jsx(MenuIcon, {})
@@ -19419,7 +19416,7 @@ function DrawerWrapper(props) {
           "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__ */ jsx(MenuIcon, {})
         }
       ),