@firecms/core 3.0.0-canary.113 → 3.0.0-canary.115

package/dist/components/ArrayContainer.d.ts

@@ -11,11 +11,12 @@ interface ArrayContainerProps<T> {
     includeAddButton?: boolean;
     newDefaultEntry: T;
     onValueChange: (value: T[]) => void;
+    className?: string;
 }
 /**
  * @group Form custom fields
  */
-export declare function ArrayContainer<T>({ droppableId, addLabel, value, disabled, buildEntry, size, onInternalIdAdded, includeAddButton, newDefaultEntry, onValueChange }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrayContainer<T>({ droppableId, addLabel, value, disabled, buildEntry, size, onInternalIdAdded, includeAddButton, newDefaultEntry, onValueChange, className }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
 type ArrayContainerItemProps = {
     provided: DraggableProvided;
     index: number;

package/dist/components/EntityCollectionTable/fields/TableReferenceField.d.ts

@@ -15,7 +15,7 @@ type TableReferenceFieldProps = {
     includeEntityLink?: boolean;
 };
 export declare function TableReferenceField(props: TableReferenceFieldProps): import("react/jsx-runtime").JSX.Element;
-export declare const TableReferenceFieldSuccess: React.NamedExoticComponent<TableReferenceFieldProps & {
+export declare const TableReferenceFieldInternal: React.NamedExoticComponent<TableReferenceFieldProps & {
     collection: EntityCollection;
 }>;
 export {};

package/dist/components/EntityPreview.d.ts

@@ -27,4 +27,4 @@ export type EntityPreviewContainerProps = {
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;
 };
-export declare const EntityPreviewContainer: React.FC<EntityPreviewContainerProps>;
+export declare const EntityPreviewContainer: React.ForwardRefExoticComponent<EntityPreviewContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/form/components/FormikArrayContainer.d.ts

@@ -10,9 +10,10 @@ interface ArrayContainerProps<T> {
     includeAddButton?: boolean;
     newDefaultEntry?: T | null;
     setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+    className?: string;
 }
 /**
  * @group Form custom fields
  */
-export declare function FormikArrayContainer<T>({ name, addLabel, value, disabled, buildEntry, small, onInternalIdAdded, includeAddButton, newDefaultEntry, setFieldValue }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FormikArrayContainer<T>({ name, addLabel, value, disabled, buildEntry, small, onInternalIdAdded, includeAddButton, newDefaultEntry, setFieldValue, className }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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);
@@ -4080,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;
       }
@@ -4089,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;
       }
@@ -4964,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 = {};
@@ -5172,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,
@@ -5260,7 +5264,7 @@ function EntityPreview({
     }
   );
 }
-const EntityPreviewContainerInner = React.forwardRef(({
+const EntityPreviewContainer = React.forwardRef(({
   children,
   hover,
   onClick,
@@ -5302,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);
@@ -5324,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,
@@ -6288,6 +6287,7 @@ function VirtualTableInput(props) {
   return /* @__PURE__ */ jsx(
     TextareaAutosize,
     {
+      className: focusedDisabled,
       ref,
       style: {
         padding: 0,
@@ -6488,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
       },
@@ -6541,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
     }
@@ -7153,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,
@@ -7191,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())
@@ -7258,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
           ]
@@ -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,
@@ -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,
       {
@@ -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({
@@ -18044,7 +18073,7 @@ function EntityEditViewInner({
           /* @__PURE__ */ jsxs(
             Tabs,
             {
-              value: selectedTabRef.current,
+              value: selectedTab,
               onValueChange: (value) => {
                 onSideTabClick(value);
               },
@@ -18455,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]);
@@ -18547,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() {
@@ -18640,6 +18679,7 @@ function useBuildSideDialogsController() {
   }, [location, navigate, sidePanels]);
   return {
     sidePanels,
+    setSidePanels: updateSidePanels,
     close,
     open,
     replace