@firecms/core 3.0.0-canary.112 → 3.0.0-canary.114

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, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, AssignmentIcon, CenteredView, 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, fieldBackgroundHoverMixin, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, 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 { 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, AssignmentIcon, CenteredView, 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";
@@ -2684,7 +2684,11 @@ function getIcon(iconKey, className) {
   return iconKey in iconKeysMap ? /* @__PURE__ */ jsx(Icon, { iconKey, size: "medium", className }) : void 0;
 }
 const IconForView = React__default.memo(
-  function IconForView2({ collectionOrView, className }) {
+  function IconForView2({
+    collectionOrView,
+    className,
+    size = "medium"
+  }) {
     if (!collectionOrView) return /* @__PURE__ */ jsx(Fragment, {});
     const icon = getIcon(collectionOrView.icon, className);
     if (collectionOrView?.icon && icon)
@@ -2701,7 +2705,7 @@ const IconForView = React__default.memo(
     const iconsCount = coolIconKeys.length;
     if (!key)
       key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
-    return /* @__PURE__ */ jsx(Icon, { iconKey: key, size: "medium", className });
+    return /* @__PURE__ */ jsx(Icon, { iconKey: key, size, className });
   },
   (prevProps, nextProps) => {
     return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
@@ -3248,8 +3252,6 @@ function replacePlaceholders({
 const DataSourceContext = React__default.createContext({});
 const useDataSource = (collection) => {
   const defaultDataSource = useContext(DataSourceContext);
-  if (collection?.overrides?.dataSource)
-    return collection?.overrides.dataSource;
   return defaultDataSource;
 };
 const NavigationContext = React__default.createContext({});
@@ -3387,7 +3389,7 @@ function useCollectionFetch({
   itemCount,
   searchString
 }) {
-  const dataSource = useDataSource(collection);
+  const dataSource = useDataSource();
   const navigationController = useNavigationController();
   const path = navigationController.resolveAliasesFrom(inputPath);
   const sortByProperty = sortBy ? sortBy[0] : void 0;
@@ -3470,7 +3472,7 @@ function useEntityFetch({
   collection,
   useCache = false
 }) {
-  const dataSource = useDataSource(collection);
+  const dataSource = useDataSource();
   const navigationController = useNavigationController();
   const path = navigationController.resolveAliasesFrom(inputPath);
   const context = useFireCMSContext();
@@ -3681,7 +3683,8 @@ async function deleteEntityWithCallbacks({
     }
   }
   return dataSource.deleteEntity({
-    entity
+    entity,
+    collection
   }).then(() => {
     onDeleteSuccess && onDeleteSuccess(entity);
     try {
@@ -4081,7 +4084,6 @@ function useBuildNavigationController(props) {
       );
       let shouldUpdateTopLevelNav = false;
       if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
-        console.log("Collections need to be updated");
         collectionsRef.current = resolvedCollections;
         shouldUpdateTopLevelNav = true;
       }
@@ -4090,12 +4092,10 @@ function useBuildNavigationController(props) {
         shouldUpdateTopLevelNav = true;
       }
       if (!equal(viewsRef.current, resolvedViews)) {
-        console.log("Views need to be updated");
         viewsRef.current = resolvedViews;
         shouldUpdateTopLevelNav = true;
       }
       if (!equal(adminViewsRef.current, resolvedAdminViews)) {
-        console.log("Admin views need to be updated");
         adminViewsRef.current = resolvedAdminViews;
         shouldUpdateTopLevelNav = true;
       }
@@ -4965,8 +4965,8 @@ function renderSkeletonCaptionText(index) {
 function renderSkeletonIcon() {
   return /* @__PURE__ */ jsx(Skeleton, { width: 24, height: 24 });
 }
-const StorageThumbnail = React__default.memo(StorageThumbnailInternal, areEqual$2);
-function areEqual$2(prevProps, nextProps) {
+const StorageThumbnail = React__default.memo(StorageThumbnailInternal, areEqual$1);
+function areEqual$1(prevProps, nextProps) {
   return prevProps.size === nextProps.size && prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl && prevProps.storeUrl === nextProps.storeUrl && prevProps.interactive === nextProps.interactive;
 }
 const URL_CACHE = {};
@@ -5173,15 +5173,18 @@ function EntityPreview({
       hover: disabled ? void 0 : hover,
       size,
       children: [
-        imageProperty && /* @__PURE__ */ jsx("div", { className: cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: /* @__PURE__ */ jsx(
-          PropertyPreview,
-          {
-            property: imageProperty,
-            propertyKey: imagePropertyKey,
-            size: "smallest",
-            value: getValueInPath(entity.values, imagePropertyKey)
-          }
-        ) }),
+        /* @__PURE__ */ jsxs("div", { className: cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
+          imageProperty && /* @__PURE__ */ jsx(
+            PropertyPreview,
+            {
+              property: imageProperty,
+              propertyKey: imagePropertyKey,
+              size: "smallest",
+              value: getValueInPath(entity.values, imagePropertyKey)
+            }
+          ),
+          !imageProperty && /* @__PURE__ */ jsx(IconForView, { collectionOrView: collection, size, className: "mr-2" })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-grow w-full m-1", children: [
           size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsx(
             Typography,
@@ -5261,7 +5264,7 @@ function EntityPreview({
     }
   );
 }
-const EntityPreviewContainerInner = React.forwardRef(({
+const EntityPreviewContainer = React.forwardRef(({
   children,
   hover,
   onClick,
@@ -5303,9 +5306,7 @@ const EntityPreviewContainerInner = React.forwardRef(({
     }
   );
 });
-EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-const EntityPreviewContainer = React.memo(EntityPreviewContainerInner);
-const ReferencePreview = React.memo(function ReferencePreview2(props) {
+const ReferencePreview = function ReferencePreview2(props) {
   const reference = props.reference;
   if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
     console.warn("Reference preview received value of type", typeof reference);
@@ -5325,10 +5326,7 @@ const ReferencePreview = React.memo(function ReferencePreview2(props) {
     );
   }
   return /* @__PURE__ */ jsx(ReferencePreviewInternal, { ...props });
-}, areEqual$1);
-function areEqual$1(prevProps, nextProps) {
-  return prevProps.disabled === nextProps.disabled && prevProps.size === nextProps.size && prevProps.hover === nextProps.hover && prevProps.reference?.id === nextProps.reference?.id && prevProps.reference?.path === nextProps.reference?.path && prevProps.includeEntityLink === nextProps.includeEntityLink && prevProps.onClick === nextProps.onClick;
-}
+};
 function ReferencePreviewInternal({
   disabled,
   reference,
@@ -6289,6 +6287,7 @@ function VirtualTableInput(props) {
   return /* @__PURE__ */ jsx(
     TextareaAutosize,
     {
+      className: focusedDisabled,
       ref,
       style: {
         padding: 0,
@@ -6489,7 +6488,7 @@ function VirtualTableNumberInput(props) {
     "input",
     {
       ref,
-      className: "w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset",
+      className: cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset", focusedDisabled),
       style: {
         textAlign: align
       },
@@ -6542,8 +6541,8 @@ function VirtualTableDateField(props) {
       onChange: (dateValue) => updateValue(dateValue ?? null),
       size: "medium",
       invisible: true,
-      className: "w-full h-full",
-      inputClassName: "w-full h-full",
+      inputClassName: cls("w-full h-full", focusedDisabled),
+      className: cls("w-full h-full", focusedDisabled),
       mode,
       locale
     }
@@ -7154,10 +7153,10 @@ function TableReferenceField(props) {
       throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
     }
   }
-  return /* @__PURE__ */ jsx(TableReferenceFieldSuccess, { ...props, collection });
+  return /* @__PURE__ */ jsx(TableReferenceFieldInternal, { ...props, collection });
 }
-const TableReferenceFieldSuccess = React__default.memo(
-  function TableReferenceFieldSuccess2(props) {
+const TableReferenceFieldInternal = React__default.memo(
+  function TableReferenceFieldInternal2(props) {
     const {
       name,
       internalValue,
@@ -7192,11 +7191,11 @@ const TableReferenceFieldSuccess = React__default.memo(
         forceFilter
       }
     );
-    const handleOpen = useCallback(() => {
+    const handleOpen = () => {
       if (disabled)
         return;
       referenceDialogController.open();
-    }, [disabled, referenceDialogController]);
+    };
     const valueNotSet = !internalValue || Array.isArray(internalValue) && internalValue.length === 0;
     const buildSingleReferenceField = () => {
       if (internalValue && !Array.isArray(internalValue) && internalValue.isEntityReference && internalValue.isEntityReference())
@@ -7259,12 +7258,21 @@ const TableReferenceFieldSuccess = React__default.memo(
         EntityPreviewContainer,
         {
           className: cls(
-            "p-4 text-sm font-medium flex items-center gap-4 uppercase",
+            "p-4 text-sm font-medium flex items-center uppercase",
+            multiselect ? "gap-4" : "gap-6",
             disabled ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
           ),
           onClick: handleOpen,
           size: "medium",
           children: [
+            /* @__PURE__ */ jsx(
+              IconForView,
+              {
+                size: "small",
+                collectionOrView: collection,
+                className: "text-gray-300 dark:text-gray-600"
+              }
+            ),
             "Edit ",
             title
           ]
@@ -10348,7 +10356,7 @@ function useDataSourceEntityCollectionTableController({
   } = collection;
   const [popupCell, setPopupCell] = React__default.useState(void 0);
   const navigation = useNavigationController();
-  const dataSource = useDataSource(collection);
+  const dataSource = useDataSource();
   const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
   const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
   const paginationEnabled = collection.pagination === void 0 || Boolean(collection.pagination);
@@ -10596,7 +10604,7 @@ function DeleteEntityDialog({
   onMultipleEntitiesDelete,
   path
 }) {
-  const dataSource = useDataSource(collection);
+  const dataSource = useDataSource();
   const customizationController = useCustomizationController();
   const snackbarController = useSnackbarController();
   const [loading, setLoading] = useState(false);
@@ -10891,7 +10899,8 @@ function ReferenceSelectionTable({
   const analyticsController = useAnalyticsController();
   const customizationController = useCustomizationController();
   const fullPath = navigation.resolveAliasesFrom(pathInput);
-  const dataSource = useDataSource(collection);
+  console.trace("Opening reference dialog for path " + fullPath);
+  const dataSource = useDataSource();
   const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState([]);
   const toggleEntitySelection = (entity) => {
     let newValue;
@@ -11046,7 +11055,17 @@ function ReferenceSelectionTable({
         tableController,
         enablePopupIcon: false,
         tableRowActionsBuilder,
-        title: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}` }),
+        title: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", className: "flex flex-row gap-2", children: [
+          /* @__PURE__ */ jsx(
+            IconForView,
+            {
+              size: "small",
+              collectionOrView: collection,
+              className: "text-gray-300 dark:text-gray-600"
+            }
+          ),
+          collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`
+        ] }),
         defaultSize: collection.defaultSize,
         properties: resolvedCollection.properties,
         forceFilter,
@@ -11478,15 +11497,11 @@ function DefaultHomePage({
     groups
   } = navigationController.topLevelNavigation;
   const [filteredUrls, setFilteredUrls] = useState(null);
-  const filteredNavigationEntries = filteredUrls ? navigationEntries.filter((entry) => filteredUrls.includes(entry.url)) : navigationEntries;
+  const performingSearch = Boolean(filteredUrls);
+  const filteredNavigationEntries = filteredUrls ? filteredUrls.map((url) => navigationEntries.find((e) => e.url === url)).filter(Boolean) : navigationEntries;
   useEffect(() => {
     fuse.current = new Fuse(navigationEntries, {
-      keys: [
-        "name",
-        "description",
-        "group",
-        "path"
-      ]
+      keys: ["name", "description", "group", "path"]
     });
   }, [navigationEntries]);
   const updateSearchResults = useCallback(
@@ -11503,7 +11518,8 @@ function DefaultHomePage({
     },
     []
   );
-  const allGroups = [...groups];
+  const filteredGroups = filteredUrls ? filteredNavigationEntries.map((entry) => entry.group) : [];
+  const allGroups = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
   if (filteredNavigationEntries.filter((e) => !e.group).length > 0 || filteredNavigationEntries.length === 0) {
     allGroups.push(void 0);
   }
@@ -11559,7 +11575,7 @@ function DefaultHomePage({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(FavouritesView, { hidden: Boolean(filteredUrls) }),
+        /* @__PURE__ */ jsx(FavouritesView, { hidden: performingSearch }),
         additionalChildrenStart,
         additionalPluginChildrenStart,
         allGroups.map((group, index) => {
@@ -11576,7 +11592,7 @@ function DefaultHomePage({
             });
           }
           const thisGroupCollections = filteredNavigationEntries.filter((entry) => entry.group === group || !entry.group && group === void 0);
-          if (thisGroupCollections.length === 0 && AdditionalCards.length === 0)
+          if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch))
             return null;
           return /* @__PURE__ */ jsx(
             NavigationGroup,
@@ -12240,7 +12256,7 @@ const EntityCollectionView = React__default.memo(
   }) {
     const context = useFireCMSContext();
     const fullPath = fullPathProp ?? collectionProp.path;
-    const dataSource = useDataSource(collectionProp);
+    const dataSource = useDataSource();
     const navigation = useNavigationController();
     const sideEntityController = useSideEntityController();
     const authController = useAuthController();
@@ -12374,7 +12390,7 @@ const EntityCollectionView = React__default.memo(
         value,
         property,
         entityId
-      }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection.databaseId),
+      }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection),
       [fullPath]
     );
     const onValueChange = ({
@@ -12754,7 +12770,7 @@ function EntitiesCount({
   sortBy,
   onCountChange
 }) {
-  const dataSource = useDataSource(collection);
+  const dataSource = useDataSource();
   const navigation = useNavigationController();
   const [count, setCount] = useState(void 0);
   const [error, setError] = useState(void 0);
@@ -13275,7 +13291,8 @@ function ArrayContainer({
   onInternalIdAdded,
   includeAddButton,
   newDefaultEntry,
-  onValueChange
+  onValueChange,
+  className
 }) {
   const hasValue = value && Array.isArray(value) && value.length > 0;
   const internalIdsRef = useRef(buildIdsMap(value));
@@ -13364,6 +13381,7 @@ function ArrayContainer({
       children: (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxs(
         "div",
         {
+          className,
           ...droppableProvided.droppableProps,
           ref: droppableProvided.innerRef,
           children: [
@@ -13434,7 +13452,7 @@ function ArrayContainerItem({
       ref: provided.innerRef,
       ...provided.draggableProps,
       style: provided.draggableProps.style,
-      className: `${isDragging || onHover ? fieldBackgroundHoverMixin : ""} mb-1 rounded-md opacity-100`,
+      className: `${isDragging || onHover ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""} mb-1 rounded-md opacity-100`,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -13443,7 +13461,7 @@ function ArrayContainerItem({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80",
+                className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark",
                 children: buildEntry(index, internalId)
               }
             ),
@@ -13753,7 +13771,8 @@ function FormikArrayContainer({
   onInternalIdAdded,
   includeAddButton,
   newDefaultEntry = null,
-  setFieldValue
+  setFieldValue,
+  className
 }) {
   return /* @__PURE__ */ jsx(
     ArrayContainer,
@@ -13767,6 +13786,7 @@ function FormikArrayContainer({
       onInternalIdAdded,
       includeAddButton,
       newDefaultEntry,
+      className,
       onValueChange: (value2) => setFieldValue(name, value2)
     }
   );
@@ -14106,10 +14126,10 @@ function ArrayOfReferencesFieldBinding({
       forceFilter: ofProperty.forceFilter
     }
   );
-  const onEntryClick = useCallback((e) => {
+  const onEntryClick = (e) => {
     e.preventDefault();
     referenceDialogController.open();
-  }, [referenceDialogController]);
+  };
   const buildEntry = useCallback((index, internalId) => {
     const entryValue = value && value.length > index ? value[index] : void 0;
     if (!entryValue)
@@ -14137,7 +14157,7 @@ function ArrayOfReferencesFieldBinding({
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
-        className: "flex-grow text-text-secondary dark:text-text-secondary-dark"
+        className: "flex flex-grow text-text-secondary dark:text-text-secondary-dark"
       }
     ),
     Array.isArray(value) && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "px-4", children: [
@@ -14170,7 +14190,7 @@ function ArrayOfReferencesFieldBinding({
         Button,
         {
           className: "my-4 justify-center text-left",
-          variant: "outlined",
+          variant: "text",
           color: "primary",
           disabled: isSubmitting,
           onClick: onEntryClick,
@@ -14929,10 +14949,10 @@ function ReferenceFieldBindingInternal({
       forceFilter: property.forceFilter
     }
   );
-  const onEntryClick = useCallback((e) => {
+  const onEntryClick = (e) => {
     e.preventDefault();
     referenceDialogController.open();
-  }, [referenceDialogController]);
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !minimalistView && /* @__PURE__ */ jsx(
       LabelWithIconAndTooltip,
@@ -14974,7 +14994,13 @@ function ReferenceFieldBindingInternal({
           onClick: onEntryClick,
           size: "medium",
           children: [
-            /* @__PURE__ */ jsx(EmptyValue, {}),
+            /* @__PURE__ */ jsx(
+              IconForView,
+              {
+                collectionOrView: collection,
+                className: "text-gray-300 dark:text-gray-600"
+              }
+            ),
             `Edit ${property.name}`.toUpperCase()
           ]
         }
@@ -16079,6 +16105,7 @@ function BlockFieldBinding({
     FormikArrayContainer,
     {
       value,
+      className: "flex flex-col gap-3",
       name: propertyKey,
       addLabel: property.name ? "Add entry to " + property.name : "Add entry",
       buildEntry,
@@ -16160,7 +16187,7 @@ function BlockEntry({
     formex.setFieldValue(typeFieldName, newType);
     formex.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cls(paperMixin, "bg-transparent p-2 mb-4"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cls(paperMixin, "bg-transparent p-2"), children: [
     /* @__PURE__ */ jsx(
       Field,
       {
@@ -17311,7 +17338,7 @@ function EntityEditViewInner({
   }, false, 2e3);
   const inputCollection = collection;
   const authController = useAuthController();
-  const dataSource = useDataSource(collection);
+  const dataSource = useDataSource();
   const sideDialogContext = useSideDialogContext();
   const sideEntityController = useSideEntityController();
   const snackbarController = useSnackbarController();
@@ -17333,7 +17360,7 @@ function EntityEditViewInner({
       if (mustSetCustomId) {
         return void 0;
       } else {
-        return dataSource.generateEntityId(path);
+        return dataSource.generateEntityId(path, collection);
       }
     } else {
       return entityIdProp;
@@ -17350,8 +17377,8 @@ function EntityEditViewInner({
       entityId
     }
   );
-  const selectedTabRef = useRef(defaultSelectedView ?? MAIN_TAB_VALUE);
-  const mainViewVisible = selectedTabRef.current === MAIN_TAB_VALUE;
+  const [selectedTab, setSelectedTab] = useState(defaultSelectedView ?? MAIN_TAB_VALUE);
+  const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
   const subcollections = (collection.subcollections ?? []).filter((c) => !c.hideFromNavigation);
   const subcollectionsCount = subcollections?.length ?? 0;
   const customViews = collection.entityViews;
@@ -17411,7 +17438,7 @@ function EntityEditViewInner({
       sideEntityController.replace({
         path,
         entityId: updatedEntity.id,
-        selectedSubPath: MAIN_TAB_VALUE === selectedTabRef.current ? void 0 : selectedTabRef.current,
+        selectedSubPath: MAIN_TAB_VALUE === selectedTab ? void 0 : selectedTab,
         updateUrl: true,
         collection
       });
@@ -17559,13 +17586,13 @@ function EntityEditViewInner({
     formex
   };
   const resolvedEntityViews = customViews ? customViews.map((e) => resolveEntityView(e, customizationController.entityViews)).filter(Boolean) : [];
-  const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTabRef.current);
-  const shouldShowEntityActions = !autoSave && (selectedTabRef.current === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
+  const selectedEntityView = resolvedEntityViews.find((e) => e.key === selectedTab);
+  const shouldShowEntityActions = !autoSave && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
   const customViewsView = customViews && resolvedEntityViews.map(
     (customView, colIndex) => {
       if (!customView)
         return null;
-      if (selectedTabRef.current !== customView.key)
+      if (selectedTab !== customView.key)
         return null;
       const Builder = customView.Builder;
       if (!Builder) {
@@ -17600,7 +17627,7 @@ function EntityEditViewInner({
     (subcollection, colIndex) => {
       const subcollectionId = subcollection.id ?? subcollection.path;
       const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
-      if (selectedTabRef.current !== subcollectionId)
+      if (selectedTab !== subcollectionId)
         return null;
       return /* @__PURE__ */ jsxs(
         "div",
@@ -17634,14 +17661,16 @@ function EntityEditViewInner({
     onValuesAreModified(false);
   }, []);
   const onSideTabClick = (value) => {
-    selectedTabRef.current = value;
-    sideEntityController.replace({
-      path,
-      entityId,
-      selectedSubPath: value === MAIN_TAB_VALUE ? void 0 : value,
-      updateUrl: true,
-      collection
-    });
+    setSelectedTab(value);
+    if (status === "existing") {
+      sideEntityController.replace({
+        path,
+        entityId,
+        selectedSubPath: value === MAIN_TAB_VALUE ? void 0 : value,
+        updateUrl: true,
+        collection
+      });
+    }
   };
   const onIdUpdateError = useCallback((error) => {
     snackbarController.open({
@@ -17706,7 +17735,7 @@ function EntityEditViewInner({
       name,
       value,
       property
-    }) => dataSource.checkUniqueField(path, name, value, entityId, collection.databaseId),
+    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
     [dataSource, path, entityId]
   );
   const validationSchema = useMemo(
@@ -18044,7 +18073,7 @@ function EntityEditViewInner({
           /* @__PURE__ */ jsxs(
             Tabs,
             {
-              value: selectedTabRef.current,
+              value: selectedTab,
               onValueChange: (value) => {
                 onSideTabClick(value);
               },
@@ -18259,11 +18288,9 @@ function SideDialogView({
     setDrawerCloseRequested(false);
   };
   const onCloseRequest = (force) => {
-    console.log("onCloseRequest", blocked, force);
     if (blocked && !force) {
       setDrawerCloseRequested(true);
     } else {
-      console.log("onCloseRequest closing");
       sideDialogsController.close();
       panel?.onClose?.();
     }
@@ -18457,6 +18484,15 @@ const useBuildSideEntityController = (navigation, sideDialogsController) => {
       initialised.current = true;
     }
   }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
+  useEffect(() => {
+    const updatedSidePanels = sideDialogsController.sidePanels.map((sidePanelProps) => {
+      if (sidePanelProps.additional) {
+        return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout);
+      }
+      return sidePanelProps;
+    });
+    sideDialogsController.setSidePanels(updatedSidePanels);
+  }, [smallLayout]);
   const close = useCallback(() => {
     sideDialogsController.close();
   }, [sideDialogsController]);
@@ -18549,7 +18585,8 @@ const propsToSidePanel = (props, buildUrlCollectionPath, resolveAliasesFrom, sma
     urlPath: newPath,
     parentUrlPath: buildUrlCollectionPath(collectionPath),
     width: entityViewWidth,
-    onClose: props.onClose
+    onClose: props.onClose,
+    additional: props
   };
 };
 function useBuildSideDialogsController() {
@@ -18642,6 +18679,7 @@ function useBuildSideDialogsController() {
   }, [location, navigate, sidePanels]);
   return {
     sidePanels,
+    setSidePanels: updateSidePanels,
     close,
     open,
     replace
@@ -18677,7 +18715,8 @@ function useBuildDataSource({
       orderBy,
       order
     }) => {
-      return delegate.fetchCollection({
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      return usedDelegate.fetchCollection({
         path,
         filter,
         limit,
@@ -18717,10 +18756,10 @@ function useBuildDataSource({
       onError
     }) => {
       const collection = collectionProp ?? navigationController.getCollection(path);
-      Boolean(collection?.collectionGroup);
-      if (!delegate.listenCollection)
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      if (!usedDelegate.listenCollection)
         throw Error("useBuildDataSource delegate not initialised");
-      return delegate.listenCollection({
+      return usedDelegate.listenCollection({
         path,
         filter,
         limit,
@@ -18744,11 +18783,14 @@ function useBuildDataSource({
       path,
       entityId,
       collection
-    }) => delegate.fetchEntity({
-      path,
-      entityId,
-      collection
-    }), [delegate]),
+    }) => {
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      return usedDelegate.fetchEntity({
+        path,
+        entityId,
+        collection
+      });
+    }, [delegate.fetchEntity]),
     /**
      *
      * @param path
@@ -18766,9 +18808,10 @@ function useBuildDataSource({
       onUpdate,
       onError
     }) => {
-      if (!delegate.listenEntity)
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      if (!usedDelegate.listenEntity)
         throw Error("useBuildDataSource delegate not initialised");
-      return delegate.listenEntity({
+      return usedDelegate.listenEntity({
         path,
         entityId,
         onUpdate,
@@ -18795,6 +18838,7 @@ function useBuildDataSource({
       status
     }) => {
       const collection = collectionProp ?? navigationController.getCollection(path);
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
       console.log("useBuildDatasource save", {
         path,
         entityId,
@@ -18810,29 +18854,29 @@ function useBuildDataSource({
         fields: propertyConfigs
       }) : void 0;
       const properties = resolvedCollection?.properties;
-      const firestoreValues = delegate.cmsToDelegateModel(
+      const firestoreValues = usedDelegate.cmsToDelegateModel(
         values
       );
-      const updatedFirestoreValues = properties ? updateDateAutoValues(
+      const updatedValues = properties ? updateDateAutoValues(
         {
           inputValues: firestoreValues,
           properties,
           status,
-          timestampNowValue: delegate.currentTime?.() ?? /* @__PURE__ */ new Date(),
-          setDateToMidnight: delegate.setDateToMidnight
+          timestampNowValue: usedDelegate.currentTime?.() ?? /* @__PURE__ */ new Date(),
+          setDateToMidnight: usedDelegate.setDateToMidnight
         }
       ) : firestoreValues;
-      return delegate.saveEntity({
+      return usedDelegate.saveEntity({
         path,
         collection,
         entityId,
-        values: updatedFirestoreValues,
+        values: updatedValues,
         status
       }).then((res) => {
         return {
           id: res.id,
           path: res.path,
-          values: delegate.delegateToCMSModel(updatedFirestoreValues)
+          values: usedDelegate.delegateToCMSModel(updatedValues)
         };
       });
     }, [delegate.saveEntity, navigationController.getCollection]),
@@ -18843,9 +18887,11 @@ function useBuildDataSource({
      * @group Firestore
      */
     deleteEntity: useCallback(({
-      entity
+      entity,
+      collection
     }) => {
-      return delegate.deleteEntity({ entity });
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      return usedDelegate.deleteEntity({ entity, collection });
     }, [delegate.deleteEntity]),
     /**
      * Check if the given property is unique in the given collection
@@ -18857,11 +18903,13 @@ function useBuildDataSource({
      * @return `true` if there are no other fields besides the given entity
      * @group Firestore
      */
-    checkUniqueField: useCallback((path, name, value, entityId, databaseId) => {
-      return delegate.checkUniqueField(path, name, value, entityId, databaseId);
+    checkUniqueField: useCallback((path, name, value, entityId, collection) => {
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
     }, [delegate.checkUniqueField]),
-    generateEntityId: useCallback((path) => {
-      return delegate.generateEntityId(path);
+    generateEntityId: useCallback((path, collection) => {
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      return usedDelegate.generateEntityId(path, collection);
     }, [delegate.generateEntityId]),
     countEntities: delegate.countEntities ? async ({
       path,
@@ -18870,7 +18918,8 @@ function useBuildDataSource({
       order,
       orderBy
     }) => {
-      return delegate.countEntities({
+      const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+      return usedDelegate.countEntities({
         path,
         filter,
         orderBy,
@@ -18896,9 +18945,10 @@ function useBuildDataSource({
       );
     }, [delegate.isFilterCombinationValid]),
     initTextSearch: useCallback(async (props) => {
-      if (!delegate.initTextSearch)
+      const usedDelegate = props.collection?.overrides?.dataSourceDelegate ?? delegate;
+      if (!usedDelegate.initTextSearch)
         return false;
-      return delegate.initTextSearch(props);
+      return usedDelegate.initTextSearch(props);
     }, [delegate.initTextSearch])
   };
 }