@firecms/core 3.0.0-canary.235 → 3.0.0-canary.239

package/dist/index.umd.js

@@ -3765,6 +3765,108 @@
     if (!result) result = randomString() + "_" + file.name;
     return result;
   }
+  const mergeCallbacks = (baseCallbacks = {}, pluginCallbacks = {}) => {
+    if (!baseCallbacks && !pluginCallbacks) {
+      return void 0;
+    }
+    const mergedCallbacks = {};
+    if (baseCallbacks.onFetch || pluginCallbacks.onFetch) {
+      mergedCallbacks.onFetch = async (props) => {
+        let entity = props.entity;
+        if (baseCallbacks.onFetch) {
+          entity = await Promise.resolve(baseCallbacks.onFetch(props));
+        }
+        if (pluginCallbacks.onFetch) {
+          entity = await Promise.resolve(pluginCallbacks.onFetch({
+            ...props,
+            entity
+          }));
+        }
+        return entity;
+      };
+    }
+    if (baseCallbacks.onSaveSuccess || pluginCallbacks.onSaveSuccess) {
+      mergedCallbacks.onSaveSuccess = async (props) => {
+        if (baseCallbacks.onSaveSuccess) {
+          await Promise.resolve(baseCallbacks.onSaveSuccess(props));
+        }
+        if (pluginCallbacks.onSaveSuccess) {
+          await Promise.resolve(pluginCallbacks.onSaveSuccess(props));
+        }
+      };
+    }
+    if (baseCallbacks.onSaveFailure || pluginCallbacks.onSaveFailure) {
+      mergedCallbacks.onSaveFailure = async (props) => {
+        if (baseCallbacks.onSaveFailure) {
+          await Promise.resolve(baseCallbacks.onSaveFailure(props));
+        }
+        if (pluginCallbacks.onSaveFailure) {
+          await Promise.resolve(pluginCallbacks.onSaveFailure(props));
+        }
+      };
+    }
+    if (baseCallbacks.onPreSave || pluginCallbacks.onPreSave) {
+      mergedCallbacks.onPreSave = async (props) => {
+        let values = {
+          ...props.values
+        };
+        if (baseCallbacks.onPreSave) {
+          const baseValues = await Promise.resolve(baseCallbacks.onPreSave(props));
+          values = {
+            ...values,
+            ...baseValues
+          };
+        }
+        if (pluginCallbacks.onPreSave) {
+          const pluginValues = await Promise.resolve(pluginCallbacks.onPreSave({
+            ...props,
+            values
+          }));
+          values = {
+            ...values,
+            ...pluginValues
+          };
+        }
+        return values;
+      };
+    }
+    if (baseCallbacks.onPreDelete || pluginCallbacks.onPreDelete) {
+      mergedCallbacks.onPreDelete = (props) => {
+        if (baseCallbacks.onPreDelete) {
+          baseCallbacks.onPreDelete(props);
+        }
+        if (pluginCallbacks.onPreDelete) {
+          pluginCallbacks.onPreDelete(props);
+        }
+      };
+    }
+    if (baseCallbacks.onDelete || pluginCallbacks.onDelete) {
+      mergedCallbacks.onDelete = (props) => {
+        if (baseCallbacks.onDelete) {
+          baseCallbacks.onDelete(props);
+        }
+        if (pluginCallbacks.onDelete) {
+          pluginCallbacks.onDelete(props);
+        }
+      };
+    }
+    if (baseCallbacks.onIdUpdate || pluginCallbacks.onIdUpdate) {
+      mergedCallbacks.onIdUpdate = async (props) => {
+        let id = props.entityId || "";
+        if (baseCallbacks.onIdUpdate) {
+          id = await Promise.resolve(baseCallbacks.onIdUpdate(props));
+        }
+        if (pluginCallbacks.onIdUpdate) {
+          id = await Promise.resolve(pluginCallbacks.onIdUpdate({
+            ...props,
+            entityId: id
+          }));
+        }
+        return id;
+      };
+    }
+    return Object.keys(mergedCallbacks).length > 0 ? mergedCallbacks : void 0;
+  };
   const CONTAINER_FULL_WIDTH = "100vw";
   const ADDITIONAL_TAB_WIDTH = "55vw";
   const FORM_CONTAINER_WIDTH = "768px";
@@ -4657,7 +4759,6 @@
       tooltip
     } = t0;
     const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", error);
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.ErrorIcon, { className: "mx-2", size: "small", color: "error" });
@@ -5195,9 +5296,9 @@
           } else {
             if (arrayProperty.of.dataType === "map" && arrayProperty.of.properties) {
               let t1;
-              if ($[10] !== arrayProperty.of.previewProperties || $[11] !== arrayProperty.of.properties || $[12] !== size) {
-                t1 = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewProperties);
-                $[10] = arrayProperty.of.previewProperties;
+              if ($[10] !== arrayProperty.of.previewKeys || $[11] !== arrayProperty.of.properties || $[12] !== size) {
+                t1 = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewKeys);
+                $[10] = arrayProperty.of.previewKeys;
                 $[11] = arrayProperty.of.properties;
                 $[12] = size;
                 $[13] = t1;
@@ -5684,11 +5785,13 @@
     disabled,
     hover,
     collection: collectionProp,
-    previewProperties,
+    previewKeys,
     onClick,
     size,
     includeId = true,
+    includeTitle = true,
     includeEntityLink = true,
+    includeImage = true,
     entity
   }) {
     const authController = useAuthController();
@@ -5707,9 +5810,9 @@
       propertyConfigs: customizationController.propertyConfigs,
       authController
     }), [collection]);
-    const listProperties = React.useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1), [previewProperties, resolvedCollection, size]);
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const listProperties = React.useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1), [previewKeys, resolvedCollection, size]);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : void 0;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : void 0;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : void 0;
     const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter((p) => p !== titleProperty && p !== imagePropertyKey);
@@ -5720,18 +5823,17 @@
         usedImageProperty && usedImageValue && /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { property: usedImageProperty, propertyKey: imagePropertyKey, size: "small", value: usedImageValue }),
         (!usedImageProperty || !usedImageValue) && /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: collection, color: "primary", size, className: "m-auto p-1" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow-1 w-full m-1 shrink-1", style: {
-        "maxWidth": "calc(100% - 96px)"
-      }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow w-full m-1 shrink min-w-0", children: [
         size !== "small" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block whitespace-nowrap overflow-hidden truncate", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "disabled", className: "font-mono", children: entity.id }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, {})),
         titleProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: titleProperty, value: getValueInPath(entity.values, titleProperty), property: resolvedCollection.properties[titleProperty], size: "large" }) : /* @__PURE__ */ jsxRuntime.jsx(SkeletonPropertyComponent, { property: resolvedCollection.properties[titleProperty], size: "large" }) }),
         restProperties && restProperties.map((key) => {
-          const childProperty = resolvedCollection.properties[key];
+          const childProperty = getPropertyInPath(resolvedCollection.properties, key);
           if (!childProperty) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key, value: getValueInPath(entity.values, key), property: childProperty, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
+          const valueInPath = getValueInPath(entity.values, key);
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key, value: valueInPath, property: childProperty, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
         })
       ] }),
-      entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", size: "medium", className: size !== "small" ? "self-start" : "", onClick: (e) => {
+      entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", size: "small", className: size !== "small" ? "self-start" : "", onClick: (e) => {
         e.stopPropagation();
         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
           path: entity.path,
@@ -5743,7 +5845,7 @@
           collection,
           updateUrl: true
         });
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "medium" }) }) }),
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" }) }) }),
       actions
     ] });
   }
@@ -6079,7 +6181,7 @@
     }
     let t3;
     if ($[25] !== collection || $[26] !== disabled || $[27] !== hover || $[28] !== includeEntityLink || $[29] !== includeId || $[30] !== onClick || $[31] !== previewProperties || $[32] !== size || $[33] !== usedEntity) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(EntityPreview, { size, previewProperties, disabled, entity: usedEntity, collection, onClick, includeEntityLink, includeId, hover });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(EntityPreview, { size, previewKeys: previewProperties, disabled, entity: usedEntity, collection, onClick, includeEntityLink, includeId, hover });
       $[25] = collection;
       $[26] = disabled;
       $[27] = hover;
@@ -6927,7 +7029,7 @@
           throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
         }
         const values = value;
-        const previewProperties = mapProperty.previewProperties;
+        const previewProperties = mapProperty.previewKeys;
         if (!values) {
           t4 = null;
           break bb0;
@@ -9247,7 +9349,7 @@
             }
           } else if (arrayProperty.of.dataType === "reference") {
             if (typeof arrayProperty.of.path === "string") {
-              innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableReferenceField, { name: propertyKey, disabled, internalValue, updateValue, size, multiselect: true, path: arrayProperty.of.path, previewProperties: arrayProperty.of.previewProperties, title: arrayProperty.name, forceFilter: arrayProperty.of.forceFilter, includeId: arrayProperty.of.includeId, includeEntityLink: arrayProperty.of.includeEntityLink });
+              innerComponent = /* @__PURE__ */ jsxRuntime.jsx(TableReferenceField, { name: propertyKey, disabled, internalValue, updateValue, size, multiselect: true, path: arrayProperty.of.path, previewProperties: arrayProperty.of.previewKeys, title: arrayProperty.name, forceFilter: arrayProperty.of.forceFilter, includeId: arrayProperty.of.includeId, includeEntityLink: arrayProperty.of.includeEntityLink });
             }
             allowScroll = false;
           }
@@ -9510,7 +9612,7 @@
     }
     let t6;
     if ($[6] !== t3 || $[7] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 h-10", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Table row size", side: "right", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { value: t3, className: "w-16 ml-2", size: "small", onValueChange: t4, renderValue: _temp$j, children: t5 }) });
       $[6] = t3;
       $[7] = t4;
       $[8] = t6;
@@ -10552,8 +10654,8 @@
     });
     const onColumnResizeInternal = React.useCallback((params) => {
       if (debug) console.log("onColumnResizeInternal", params);
-      setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
-    }, [columns]);
+      setColumns((prevColumns) => prevColumns.map((column) => column.key === params.column.key ? params.column : column));
+    }, []);
     const onColumnResizeEndInternal = React.useCallback((params_0) => {
       if (debug) console.log("onColumnResizeEndInternal", params_0);
       setColumns(columns.map((column_0) => column_0.key === params_0.column.key ? params_0.column : column_0));
@@ -11311,97 +11413,94 @@
   function _temp$g(op_0) {
     return operationLabels[op_0];
   }
-  const SelectableTable = React.memo(
-    function SelectableTable2({
-      onValueChange,
-      cellRenderer,
-      onEntityClick,
-      onColumnResize,
-      hoverRow = true,
-      size = "m",
-      inlineEditing = false,
-      tableController: {
-        data,
-        dataLoading,
-        noMoreToLoad,
-        dataLoadingError,
-        filterValues,
-        setFilterValues,
-        sortBy,
-        setSortBy,
-        itemCount,
-        setItemCount,
-        pageSize = 50,
-        paginationEnabled,
-        checkFilterCombination,
-        setPopupCell
-      },
-      filterable = true,
-      onScroll,
-      initialScroll,
-      emptyComponent,
-      columns,
-      forceFilter,
-      highlightedRow,
-      endAdornment,
-      AddColumnComponent
-    }) {
-      const ref = React.useRef(null);
-      const [selectedCell, setSelectedCell] = React.useState(void 0);
-      const loadNextPage = () => {
-        if (!paginationEnabled || dataLoading || noMoreToLoad) return;
-        if (itemCount !== void 0) setItemCount?.(itemCount + pageSize);
-      };
-      const resetPagination = React.useCallback(() => {
-        setItemCount?.(pageSize);
-      }, [pageSize]);
-      const onRowClick = React.useCallback(({
-        rowData
-      }) => {
-        if (inlineEditing) return;
-        return onEntityClick && onEntityClick(rowData);
-      }, [onEntityClick, inlineEditing]);
-      ui.useOutsideAlerter(ref, () => {
-        if (selectedCell) {
+  const SelectableTable = function SelectableTable2({
+    onValueChange,
+    cellRenderer,
+    onEntityClick,
+    onColumnResize,
+    hoverRow = true,
+    size = "m",
+    inlineEditing = false,
+    tableController: {
+      data,
+      dataLoading,
+      noMoreToLoad,
+      dataLoadingError,
+      filterValues,
+      setFilterValues,
+      sortBy,
+      setSortBy,
+      itemCount,
+      setItemCount,
+      pageSize = 50,
+      paginationEnabled,
+      checkFilterCombination,
+      setPopupCell
+    },
+    filterable = true,
+    onScroll,
+    initialScroll,
+    emptyComponent,
+    columns,
+    forceFilter,
+    highlightedRow,
+    endAdornment,
+    AddColumnComponent
+  }) {
+    const ref = React.useRef(null);
+    const [selectedCell, setSelectedCell] = React.useState(void 0);
+    const loadNextPage = () => {
+      if (!paginationEnabled || dataLoading || noMoreToLoad) return;
+      if (itemCount !== void 0) setItemCount?.(itemCount + pageSize);
+    };
+    const resetPagination = React.useCallback(() => {
+      setItemCount?.(pageSize);
+    }, [pageSize]);
+    const onRowClick = React.useCallback(({
+      rowData
+    }) => {
+      if (inlineEditing) return;
+      return onEntityClick && onEntityClick(rowData);
+    }, [onEntityClick, inlineEditing]);
+    ui.useOutsideAlerter(ref, () => {
+      if (selectedCell) {
+        unselect();
+      }
+    }, Boolean(selectedCell));
+    const select = React.useCallback((cell) => {
+      setSelectedCell(cell);
+    }, []);
+    const unselect = React.useCallback(() => {
+      setSelectedCell(void 0);
+    }, []);
+    React.useEffect(() => {
+      const escFunction = (event) => {
+        if (event.keyCode === 27) {
           unselect();
         }
-      }, Boolean(selectedCell));
-      React.useEffect(() => {
-        const escFunction = (event) => {
-          if (event.keyCode === 27) {
-            unselect();
-          }
-        };
-        document.addEventListener("keydown", escFunction, false);
-        return () => {
-          document.removeEventListener("keydown", escFunction, false);
-        };
+      };
+      document.addEventListener("keydown", escFunction, false);
+      return () => {
+        document.removeEventListener("keydown", escFunction, false);
+      };
+    }, [unselect]);
+    const onFilterUpdate = React.useCallback((updatedFilterValues) => {
+      setFilterValues?.({
+        ...updatedFilterValues,
+        ...forceFilter
       });
-      const select = React.useCallback((cell) => {
-        setSelectedCell(cell);
-      }, []);
-      const unselect = React.useCallback(() => {
-        setSelectedCell(void 0);
-      }, []);
-      const onFilterUpdate = React.useCallback((updatedFilterValues) => {
-        setFilterValues?.({
-          ...updatedFilterValues,
-          ...forceFilter
-        });
-      }, [forceFilter]);
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectableTableContext.Provider, { value: {
-        setPopupCell,
-        select,
-        onValueChange,
-        size: size ?? "m",
-        selectedCell
-      }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTable, { data, columns, cellRenderer, onRowClick: inlineEditing ? void 0 : onEntityClick ? onRowClick : void 0, onEndReached: loadNextPage, onResetPagination: resetPagination, error: dataLoadingError, onColumnResize, rowHeight: getRowHeight(size), loading: dataLoading, filter: filterValues, onFilterUpdate: setFilterValues ? onFilterUpdate : void 0, sortBy, onSortByUpdate: setSortBy, hoverRow, initialScroll, onScroll, checkFilterCombination, createFilterField: filterable ? createFilterField : void 0, rowClassName: React.useCallback((entity) => {
-        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
-      }, [highlightedRow]), className: "flex-grow", emptyComponent, endAdornment, AddColumnComponent }) }) });
-    },
-    () => false
-    // equal
-  );
+    }, [forceFilter]);
+    const contextValue = React.useMemo(() => ({
+      setPopupCell,
+      select,
+      onValueChange,
+      size: size ?? "m",
+      selectedCell
+    }), [setPopupCell, select, onValueChange, size, selectedCell]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectableTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ jsxRuntime.jsx(VirtualTable, { data, columns, cellRenderer, onRowClick: inlineEditing ? void 0 : onEntityClick ? onRowClick : void 0, onEndReached: loadNextPage, onResetPagination: resetPagination, error: dataLoadingError, onColumnResize, rowHeight: getRowHeight(size), loading: dataLoading, filter: filterValues, onFilterUpdate: setFilterValues ? onFilterUpdate : void 0, sortBy, onSortByUpdate: setSortBy, hoverRow, initialScroll, onScroll, checkFilterCombination, createFilterField: filterable ? createFilterField : void 0, rowClassName: React.useCallback((entity) => {
+      return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+    }, [highlightedRow]), className: "flex-grow", emptyComponent, endAdornment, AddColumnComponent }) }) });
+  };
   function createFilterField({
     id,
     filterValue,
@@ -13346,7 +13445,7 @@
               context.analyticsController?.onAnalyticsEvent?.(event, {
                 path: entry_1.path
               });
-            } }) }, `nav_${entry_1.group}_${entry_1.name}`)),
+            } }) }, `nav_${entry_1.group}_${entry_1.path}_${entry_1.name}`)),
             group_0?.toLowerCase() !== "admin" && AdditionalCards && AdditionalCards.map((AdditionalCard, i_2) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AdditionalCard, { ...actionProps }) }, `nav_${group_0}_add_${i_2}`))
           ] }) }, `plugin_section_${group_0}`);
         };
@@ -14533,7 +14632,7 @@
     const t1 = small ? "gap-1" : "gap-2";
     let t2;
     if ($[0] !== className || $[1] !== t1) {
-      t2 = ui.cls("inline-flex items-center my-0.5", t1, className);
+      t2 = ui.cls("align-middle inline-flex items-center my-0.5", t1, className);
       $[0] = className;
       $[1] = t1;
       $[2] = t2;
@@ -14850,7 +14949,7 @@
     const t10 = property.validation?.required;
     let t11;
     if ($[13] !== property.name || $[14] !== t10 || $[15] !== t9) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIcon, { icon: t9, required: t10, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0" });
+      t11 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIcon, { icon: t9, required: t10, title: property.name, className: "h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0" });
       $[13] = property.name;
       $[14] = t10;
       $[15] = t9;
@@ -14982,7 +15081,7 @@
       ] }, enumKey);
     }, [enumValues, setValue, value]);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
+      /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full mt-2", size, value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
         let newValue;
         if (of && of?.dataType === "number") {
           newValue = updatedValue ? updatedValue.map((e_1) => parseFloat(e_1)) : [];
@@ -16037,7 +16136,7 @@
     }
     let t1;
     if ($[0] !== minimalistView || $[1] !== property || $[2] !== propertyKey) {
-      t1 = !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+      t1 = !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5" });
       $[0] = minimalistView;
       $[1] = property;
       $[2] = propertyKey;
@@ -16159,7 +16258,7 @@
       referenceDialogController.open();
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+      !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
       !collection && /* @__PURE__ */ jsxRuntime.jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
       collection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         value && /* @__PURE__ */ jsxRuntime.jsx(ReferencePreview, { disabled: !property.path, previewProperties: property.previewProperties, hover: !disabled, size, onClick: disabled || isSubmitting ? void 0 : onEntryClick, reference: value, includeEntityLink: property.includeEntityLink, includeId: property.includeId }),
@@ -16658,7 +16757,6 @@
       t6 = $[15];
     }
     const title = t6;
-    console.log("minimalistView", propertyKey, minimalistView);
     let t7;
     if ($[16] !== expanded || $[17] !== mapFormView || $[18] !== minimalistView || $[19] !== title) {
       t7 = !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { initiallyExpanded: expanded, title, innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", children: mapFormView });
@@ -17853,7 +17951,7 @@
     }, ...editorProps });
     if (minimalistView) return editor$1;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("rounded-md", ui.fieldBackgroundMixin, disabled ? ui.fieldBackgroundDisabledMixin : ui.fieldBackgroundHoverMixin), children: editor$1 }),
       /* @__PURE__ */ jsxRuntime.jsx(FieldHelperText, { includeDescription, showError, error, property })
     ] });
@@ -18821,7 +18919,7 @@
       deleteEntityClicked && /* @__PURE__ */ jsxRuntime.jsx(DeleteEntityDialog, { entityOrEntitiesToDelete: deleteEntityClicked, path: fullPath, collection, callbacks: collection.callbacks, open: Boolean(deleteEntityClicked), onEntityDelete: internalOnEntityDelete, onMultipleEntitiesDelete: internalOnMultipleEntitiesDelete, onClose: () => setDeleteEntityClicked(void 0) })
     ] });
   }, (a, b) => {
-    return equal(a.path, b.path) && equal(a.parentCollectionIds, b.parentCollectionIds) && equal(a.isSubCollection, b.isSubCollection) && equal(a.className, b.className) && equal(a.properties, b.properties) && equal(a.propertiesOrder, b.propertiesOrder) && equal(a.hideIdFromCollection, b.hideIdFromCollection) && equal(a.inlineEditing, b.inlineEditing) && equal(a.selectionEnabled, b.selectionEnabled) && equal(a.selectionController, b.selectionController) && equal(a.Actions, b.Actions) && equal(a.defaultSize, b.defaultSize) && equal(a.initialFilter, b.initialFilter) && equal(a.initialSort, b.initialSort) && equal(a.textSearchEnabled, b.textSearchEnabled) && equal(a.additionalFields, b.additionalFields) && equal(a.sideDialogWidth, b.sideDialogWidth) && equal(a.openEntityMode, b.openEntityMode) && equal(a.forceFilter, b.forceFilter);
+    return equal(a.path, b.path) && equal(a.parentCollectionIds, b.parentCollectionIds) && equal(a.isSubCollection, b.isSubCollection) && equal(a.className, b.className) && equal(a.properties, b.properties) && equal(a.propertiesOrder, b.propertiesOrder) && equal(a.hideIdFromCollection, b.hideIdFromCollection) && equal(a.inlineEditing, b.inlineEditing) && equal(a.selectionEnabled, b.selectionEnabled) && equal(a.selectionController, b.selectionController) && equal(a.Actions, b.Actions) && equal(a.defaultSize, b.defaultSize) && equal(a.initialFilter, b.initialFilter) && equal(a.initialSort, b.initialSort) && equal(a.textSearchEnabled, b.textSearchEnabled) && equal(a.additionalFields, b.additionalFields) && equal(a.sideDialogWidth, b.sideDialogWidth) && equal(a.openEntityMode, b.openEntityMode) && equal(a.exportable, b.exportable) && equal(a.history, b.history) && equal(a.forceFilter, b.forceFilter);
   });
   function EntitiesCount({
     fullPath,
@@ -19140,7 +19238,7 @@
     }
     let t5;
     if ($[8] !== loading || $[9] !== onAccept) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { color: "primary", type: "submit", loading, onClick: onAccept, children: "Ok" });
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { color: "primary", type: "submit", loading, onClick: onAccept, autoFocus: true, children: "Ok" });
       $[8] = loading;
       $[9] = onAccept;
       $[10] = t5;
@@ -20144,9 +20242,9 @@
       views: viewsProp,
       adminViews: adminViewsProp,
       viewsOrder,
+      plugins,
       userConfigPersistence,
       dataSourceDelegate,
-      injectCollections,
       disabled
     } = props;
     const navigate = reactRouterDom.useNavigate();
@@ -20236,7 +20334,7 @@
       if (disabled || authController.initialLoading) return;
       console.debug("Refreshing navigation");
       try {
-        const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections), resolveCMSViews(viewsProp, authController, dataSourceDelegate), resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)]);
+        const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins), resolveCMSViews(viewsProp, authController, dataSourceDelegate), resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)]);
         let shouldUpdateTopLevelNav = false;
         if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
           collectionsRef.current = resolvedCollections;
@@ -20265,7 +20363,7 @@
       }
       if (navigationLoading) setNavigationLoading(false);
       if (!initialised) setInitialised(true);
-    }, [collectionsProp, collectionPermissions, authController.user, authController.initialLoading, disabled, viewsProp, adminViewsProp, computeTopNavigation, injectCollections]);
+    }, [collectionsProp, collectionPermissions, authController.user, authController.initialLoading, disabled, viewsProp, adminViewsProp, computeTopNavigation]);
     React.useEffect(() => {
       refreshNavigation();
     }, [refreshNavigation]);
@@ -20407,7 +20505,19 @@
       };
     });
   }
-  async function resolveCollections(collections, collectionPermissions, authController, dataSource, injectCollections) {
+  function applyPluginModifyCollection(resolvedCollections, modifyCollection) {
+    return resolvedCollections.map((collection) => {
+      const modifiedCollection = modifyCollection(collection);
+      if (modifiedCollection.subcollections) {
+        return {
+          ...modifiedCollection,
+          subcollections: applyPluginModifyCollection(modifiedCollection.subcollections, modifyCollection)
+        };
+      }
+      return modifiedCollection;
+    });
+  }
+  async function resolveCollections(collections, collectionPermissions, authController, dataSource, plugins) {
     let resolvedCollections = [];
     if (typeof collections === "function") {
       resolvedCollections = await collections({
@@ -20418,8 +20528,15 @@
     } else if (Array.isArray(collections)) {
       resolvedCollections = collections;
     }
-    if (injectCollections) {
-      resolvedCollections = injectCollections(resolvedCollections ?? []);
+    if (plugins) {
+      for (const plugin of plugins) {
+        if (plugin.collection?.modifyCollection) {
+          resolvedCollections = applyPluginModifyCollection(resolvedCollections, plugin.collection.modifyCollection);
+        }
+        if (plugin.collection?.injectCollections) {
+          resolvedCollections = plugin.collection.injectCollections(resolvedCollections ?? []);
+        }
+      }
     }
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
@@ -21340,10 +21457,11 @@
     }, [selectedTabProp]);
     const subcollections = (collection.subcollections ?? []).filter((c) => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
-    const customViews = collection.entityViews;
+    const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === void 0 ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
+    const plugins = customizationController.plugins;
     const {
       resolvedEntityViews,
       selectedEntityView,
@@ -21360,7 +21478,6 @@
         return null;
       }
       if (!entityId) {
-        console.error("INTERNAL: entityId is not defined");
         return null;
       }
       const formexStub = createFormexStub(usedEntity?.values ?? {});
@@ -21441,7 +21558,8 @@
       formProps?.onSaved?.(res);
     }, Builder: selectedSecondaryForm?.Builder });
     const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
-    const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
+    const customViewTabsStart = resolvedEntityViews.filter((view) => view.position === "start").map((view_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: !view_0.tabComponent ? "text-sm min-w-[120px]" : void 0, value: view_0.key, children: view_0.tabComponent ?? view_0.name }, `entity_detail_collection_tab_${view_0.name}`));
+    const customViewTabsEnd = resolvedEntityViews.filter((view_1) => !view_1.position || view_1.position === "end").map((view_2) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: !view_2.tabComponent ? "text-sm min-w-[120px]" : void 0, value: view_2.key, children: view_2.tabComponent ?? view_2.name }, `entity_detail_collection_tab_${view_2.name}`));
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
     let result = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
       shouldShowTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", ui.defaultBorderMixin), children: [
@@ -21451,9 +21569,10 @@
         hasAdditionalViews && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_1) => {
           onSideTabClick(value_1);
         }, children: [
-          includeJsonView && /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
+          includeJsonView && /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
+          customViewTabsStart,
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
-          customViewTabs,
+          customViewTabsEnd,
           subcollectionTabs
         ] })
       ] }),
@@ -21465,7 +21584,6 @@
       customViewsView,
       subCollectionsViews
     ] });
-    const plugins = customizationController.plugins;
     if (plugins) {
       plugins.forEach((plugin) => {
         if (plugin.form?.provider) {
@@ -21476,6 +21594,12 @@
     return result;
   }
   function EntitySidePanel(props) {
+    const {
+      allowFullScreen = true,
+      path,
+      entityId,
+      formProps
+    } = props;
     const {
       blocked,
       setBlocked,
@@ -21513,18 +21637,18 @@
       }
     };
     const parentCollectionIds = React.useMemo(() => {
-      return navigationController.getParentCollectionIds(props.path);
-    }, [navigationController, props.path]);
+      return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
     const collection = React.useMemo(() => {
       if (props.collection) {
         return props.collection;
       }
-      const registryCollection = navigationController.getCollection(props.path);
+      const registryCollection = navigationController.getCollection(path);
       if (registryCollection) {
         return registryCollection;
       }
-      console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-      throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
+      console.error("ERROR: No collection found in path `", path, "`. Entity id: ", entityId);
+      throw Error("ERROR: No collection found in path `" + path + "`. Make sure you have defined a collection for this path in the root navigation.");
     }, [navigationController, props.collection]);
     React.useEffect(() => {
       function beforeunload(e) {
@@ -21551,24 +21675,24 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityEditView, { ...props, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: () => {
-        if (props.entityId) navigate(location.pathname);
+      allowFullScreen && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { className: "self-center", onClick: () => {
+        if (entityId) navigate(location.pathname);
         else navigate(location.pathname + "#new");
       }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInFullIcon, { size: "small" }) })
     ] }), onTabChange: ({
-      path,
-      entityId,
+      path: path_0,
+      entityId: entityId_0,
       selectedTab,
       collection: collection_0
     }) => {
       sideEntityController.replace({
-        path,
-        entityId,
+        path: path_0,
+        entityId: entityId_0,
         selectedTab,
         updateUrl: true,
         collection: collection_0
       });
-    }, formProps: props.formProps }) }) });
+    }, formProps }) }) });
   }
   const NEW_URL_HASH = "new_side";
   const SIDE_URL_HASH = "side";
@@ -21577,7 +21701,7 @@
     const {
       selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
-    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
     let resolvedWidth;
     if (props.width) {
       resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
@@ -24013,6 +24137,8 @@
   exports2.EntityCollectionView = EntityCollectionView;
   exports2.EntityCollectionViewActions = EntityCollectionViewActions;
   exports2.EntityForm = EntityForm;
+  exports2.EntityPreview = EntityPreview;
+  exports2.EntityPreviewContainer = EntityPreviewContainer;
   exports2.EntityReference = EntityReference;
   exports2.EntityView = EntityView;
   exports2.EnumValuesChip = EnumValuesChip;
@@ -24146,6 +24272,7 @@
   exports2.joinCollectionLists = joinCollectionLists;
   exports2.makePropertiesEditable = makePropertiesEditable;
   exports2.makePropertiesNonEditable = makePropertiesNonEditable;
+  exports2.mergeCallbacks = mergeCallbacks;
   exports2.mergeCollection = mergeCollection;
   exports2.mergeDeep = mergeDeep;
   exports2.mergeEntityActions = mergeEntityActions;