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

package/dist/index.umd.js

@@ -2688,7 +2688,11 @@
     return iconKey in iconKeysMap ? /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey, size: "medium", className }) : void 0;
   }
   const IconForView = React.memo(
-    function IconForView2({ collectionOrView, className }) {
+    function IconForView2({
+      collectionOrView,
+      className,
+      size = "medium"
+    }) {
       if (!collectionOrView) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
       const icon = getIcon(collectionOrView.icon, className);
       if (collectionOrView?.icon && icon)
@@ -2705,7 +2709,7 @@
       const iconsCount = ui.coolIconKeys.length;
       if (!key)
         key = ui.coolIconKeys[hashString(collectionOrView.path) % iconsCount];
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: key, size: "medium", className });
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: key, size, className });
     },
     (prevProps, nextProps) => {
       return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
@@ -4084,7 +4088,6 @@
         );
         let shouldUpdateTopLevelNav = false;
         if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
-          console.log("Collections need to be updated");
           collectionsRef.current = resolvedCollections;
           shouldUpdateTopLevelNav = true;
         }
@@ -4093,12 +4096,10 @@
           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;
         }
@@ -4968,8 +4969,8 @@
   function renderSkeletonIcon() {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: 24, height: 24 });
   }
-  const StorageThumbnail = React.memo(StorageThumbnailInternal, areEqual$2);
-  function areEqual$2(prevProps, nextProps) {
+  const StorageThumbnail = React.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 = {};
@@ -5176,15 +5177,18 @@
         hover: disabled ? void 0 : hover,
         size,
         children: [
-          imageProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: /* @__PURE__ */ jsxRuntime.jsx(
-            PropertyPreview,
-            {
-              property: imageProperty,
-              propertyKey: imagePropertyKey,
-              size: "smallest",
-              value: getValueInPath(entity.values, imagePropertyKey)
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
+            imageProperty && /* @__PURE__ */ jsxRuntime.jsx(
+              PropertyPreview,
+              {
+                property: imageProperty,
+                propertyKey: imagePropertyKey,
+                size: "smallest",
+                value: getValueInPath(entity.values, imagePropertyKey)
+              }
+            ),
+            !imageProperty && /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: collection, size, className: "mr-2" })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-grow w-full m-1", children: [
             size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Typography,
@@ -5264,7 +5268,7 @@
       }
     );
   }
-  const EntityPreviewContainerInner = React__namespace.forwardRef(({
+  const EntityPreviewContainer = React__namespace.forwardRef(({
     children,
     hover,
     onClick,
@@ -5306,9 +5310,7 @@
       }
     );
   });
-  EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-  const EntityPreviewContainer = React__namespace.memo(EntityPreviewContainerInner);
-  const ReferencePreview = React__namespace.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);
@@ -5328,10 +5330,7 @@
       );
     }
     return /* @__PURE__ */ jsxRuntime.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,
@@ -6292,6 +6291,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.TextareaAutosize,
       {
+        className: ui.focusedDisabled,
         ref,
         style: {
           padding: 0,
@@ -6492,7 +6492,7 @@
       "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: ui.cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset", ui.focusedDisabled),
         style: {
           textAlign: align
         },
@@ -6545,8 +6545,8 @@
         onChange: (dateValue) => updateValue(dateValue ?? null),
         size: "medium",
         invisible: true,
-        className: "w-full h-full",
-        inputClassName: "w-full h-full",
+        inputClassName: ui.cls("w-full h-full", ui.focusedDisabled),
+        className: ui.cls("w-full h-full", ui.focusedDisabled),
         mode,
         locale
       }
@@ -7157,10 +7157,10 @@
         throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
       }
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(TableReferenceFieldSuccess, { ...props, collection });
+    return /* @__PURE__ */ jsxRuntime.jsx(TableReferenceFieldInternal, { ...props, collection });
   }
-  const TableReferenceFieldSuccess = React.memo(
-    function TableReferenceFieldSuccess2(props) {
+  const TableReferenceFieldInternal = React.memo(
+    function TableReferenceFieldInternal2(props) {
       const {
         name,
         internalValue,
@@ -7195,11 +7195,11 @@
           forceFilter
         }
       );
-      const handleOpen = React.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())
@@ -7262,12 +7262,21 @@
           EntityPreviewContainer,
           {
             className: ui.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__ */ jsxRuntime.jsx(
+                IconForView,
+                {
+                  size: "small",
+                  collectionOrView: collection,
+                  className: "text-gray-300 dark:text-gray-600"
+                }
+              ),
               "Edit ",
               title
             ]
@@ -11050,7 +11059,17 @@
           tableController,
           enablePopupIcon: false,
           tableRowActionsBuilder,
-          title: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", children: collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}` }),
+          title: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "subtitle2", className: "flex flex-row gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.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,
@@ -11482,15 +11501,11 @@
       groups
     } = navigationController.topLevelNavigation;
     const [filteredUrls, setFilteredUrls] = React.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;
     React.useEffect(() => {
       fuse.current = new Fuse(navigationEntries, {
-        keys: [
-          "name",
-          "description",
-          "group",
-          "path"
-        ]
+        keys: ["name", "description", "group", "path"]
       });
     }, [navigationEntries]);
     const updateSearchResults = React.useCallback(
@@ -11507,7 +11522,8 @@
       },
       []
     );
-    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);
     }
@@ -11563,7 +11579,7 @@
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(FavouritesView, { hidden: Boolean(filteredUrls) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FavouritesView, { hidden: performingSearch }),
           additionalChildrenStart,
           additionalPluginChildrenStart,
           allGroups.map((group, index) => {
@@ -11580,7 +11596,7 @@
               });
             }
             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__ */ jsxRuntime.jsx(
               NavigationGroup,
@@ -13279,7 +13295,8 @@
     onInternalIdAdded,
     includeAddButton,
     newDefaultEntry,
-    onValueChange
+    onValueChange,
+    className
   }) {
     const hasValue = value && Array.isArray(value) && value.length > 0;
     const internalIdsRef = React.useRef(buildIdsMap(value));
@@ -13368,6 +13385,7 @@
         children: (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            className,
             ...droppableProvided.droppableProps,
             ref: droppableProvided.innerRef,
             children: [
@@ -13438,7 +13456,7 @@
         ref: provided.innerRef,
         ...provided.draggableProps,
         style: provided.draggableProps.style,
-        className: `${isDragging || onHover ? ui.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__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -13447,7 +13465,7 @@
               /* @__PURE__ */ jsxRuntime.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)
                 }
               ),
@@ -13757,7 +13775,8 @@
     onInternalIdAdded,
     includeAddButton,
     newDefaultEntry = null,
-    setFieldValue
+    setFieldValue,
+    className
   }) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ArrayContainer,
@@ -13771,6 +13790,7 @@
         onInternalIdAdded,
         includeAddButton,
         newDefaultEntry,
+        className,
         onValueChange: (value2) => setFieldValue(name, value2)
       }
     );
@@ -14110,10 +14130,10 @@
         forceFilter: ofProperty.forceFilter
       }
     );
-    const onEntryClick = React.useCallback((e) => {
+    const onEntryClick = (e) => {
       e.preventDefault();
       referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
     const buildEntry = React.useCallback((index, internalId) => {
       const entryValue = value && value.length > index ? value[index] : void 0;
       if (!entryValue)
@@ -14141,7 +14161,7 @@
           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__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "px-4", children: [
@@ -14174,7 +14194,7 @@
           ui.Button,
           {
             className: "my-4 justify-center text-left",
-            variant: "outlined",
+            variant: "text",
             color: "primary",
             disabled: isSubmitting,
             onClick: onEntryClick,
@@ -14933,10 +14953,10 @@
         forceFilter: property.forceFilter
       }
     );
-    const onEntryClick = React.useCallback((e) => {
+    const onEntryClick = (e) => {
       e.preventDefault();
       referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(
         LabelWithIconAndTooltip,
@@ -14978,7 +14998,13 @@
             onClick: onEntryClick,
             size: "medium",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconForView,
+                {
+                  collectionOrView: collection,
+                  className: "text-gray-300 dark:text-gray-600"
+                }
+              ),
               `Edit ${property.name}`.toUpperCase()
             ]
           }
@@ -16083,6 +16109,7 @@
       FormikArrayContainer,
       {
         value,
+        className: "flex flex-col gap-3",
         name: propertyKey,
         addLabel: property.name ? "Add entry to " + property.name : "Add entry",
         buildEntry,
@@ -16164,7 +16191,7 @@
       formex$1.setFieldValue(typeFieldName, newType);
       formex$1.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.paperMixin, "bg-transparent p-2 mb-4"), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.paperMixin, "bg-transparent p-2"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         formex.Field,
         {
@@ -17354,8 +17381,8 @@
         entityId
       }
     );
-    const selectedTabRef = React.useRef(defaultSelectedView ?? MAIN_TAB_VALUE);
-    const mainViewVisible = selectedTabRef.current === MAIN_TAB_VALUE;
+    const [selectedTab, setSelectedTab] = React.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;
@@ -17415,7 +17442,7 @@
         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
         });
@@ -17563,13 +17590,13 @@
       formex: formex$1
     };
     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) {
@@ -17604,7 +17631,7 @@
       (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__ */ jsxRuntime.jsxs(
           "div",
@@ -17638,14 +17665,16 @@
       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 = React.useCallback((error) => {
       snackbarController.open({
@@ -18048,7 +18077,7 @@
             /* @__PURE__ */ jsxRuntime.jsxs(
               ui.Tabs,
               {
-                value: selectedTabRef.current,
+                value: selectedTab,
                 onValueChange: (value) => {
                   onSideTabClick(value);
                 },
@@ -18459,6 +18488,15 @@
         initialised.current = true;
       }
     }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
+    React.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 = React.useCallback(() => {
       sideDialogsController.close();
     }, [sideDialogsController]);
@@ -18551,7 +18589,8 @@
       urlPath: newPath,
       parentUrlPath: buildUrlCollectionPath(collectionPath),
       width: entityViewWidth,
-      onClose: props.onClose
+      onClose: props.onClose,
+      additional: props
     };
   };
   function useBuildSideDialogsController() {
@@ -18644,6 +18683,7 @@
     }, [location, navigate, sidePanels]);
     return {
       sidePanels,
+      setSidePanels: updateSidePanels,
       close,
       open,
       replace