@firecms/core 3.0.0-rc.3 → 3.0.0-tw4.1

package/dist/index.umd.js

@@ -4906,7 +4906,7 @@
     const $ = reactCompilerRuntime.c(1);
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-      t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block" });
+      t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-surface-200 bg-opacity-30 bg-surface-200/30 dark:bg-opacity-20 dark:bg-surface-200/20 w-5 h-2 inline-block" });
       $[0] = t0;
     } else {
       t0 = $[0];
@@ -9731,9 +9731,9 @@
     }
     const setOnHoverFalse = t10;
     const borderClass = showError ? "border-red-500" : internalSaved ? "border-green-500" : isSelected ? "border-primary" : "border-transparent";
-    const t11 = `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`;
+    const t11 = `flex relative h-full rounded-md p-${p} border border-4 border-opacity-75`;
     const t12 = onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "";
-    const t13 = saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+    const t13 = saved ? "bg-surface-100/75 dark:bg-surface-800/75" : "";
     const t14 = hideOverflow ? "overflow-hidden" : "";
     const t15 = isSelected ? "bg-surface-50 dark:bg-surface-900" : "";
     let t16;
@@ -9801,7 +9801,7 @@
     }
     let t24;
     if ($[33] !== disabled || $[34] !== disabledTooltip || $[35] !== onHover) {
-      t24 = disabled && onHover && disabledTooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DoNotDisturbOnIcon, { size: "smallest", color: "disabled", className: "text-surface-500" }) }) });
+      t24 = disabled && onHover && disabledTooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DoNotDisturbOnIcon, { size: "smallest", color: "disabled", className: "text-text-disabled" }) }) });
       $[33] = disabled;
       $[34] = disabledTooltip;
       $[35] = onHover;
@@ -10271,7 +10271,7 @@
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
     const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
     const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10", frozen ? "sticky left-0" : ""), onClick: React.useCallback((event) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10", frozen ? "sticky left-0" : ""), onClick: React.useCallback((event) => {
       event.stopPropagation();
     }, []), style: {
       width,
@@ -10785,7 +10785,7 @@
     const t3 = column.frozen ? "sticky left-0 z-10" : "relative z-0";
     let t4;
     if ($[4] !== t3) {
-      t4 = ui.cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900", "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark", "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50", t3);
+      t4 = ui.cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900", "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark", "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50", t3);
       $[4] = t3;
       $[5] = t4;
     } else {
@@ -11221,7 +11221,7 @@
     const onClick = t1;
     let t2;
     if ($[4] !== hoverRow || $[5] !== onRowClick || $[6] !== rowClassName || $[7] !== rowData) {
-      t2 = ui.cls("flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40", rowClassName ? rowClassName(rowData) : "", {
+      t2 = ui.cls("flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40", rowClassName ? rowClassName(rowData) : "", {
         "hover:bg-opacity-95": hoverRow,
         "cursor-pointer": onRowClick
       });
@@ -12252,7 +12252,7 @@
       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" : "";
+      return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 bg-surface-100/75 dark:bg-surface-800 dark:bg-opacity-75 dark:bg-surface-800/75" : "";
     }, [highlightedRow]), className: "flex-grow", emptyComponent, endAdornment, AddColumnComponent }) }) });
   };
   function createFilterField({
@@ -16469,7 +16469,7 @@
       /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_${path}`, className: ui.cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4 self-end sticky top-4 z-10", children: [
           manualApplyLocalChanges && hasLocalChanges && /* @__PURE__ */ jsxRuntime.jsx(LocalChangesMenu, { cacheKey: status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId, properties: resolvedCollection.properties, localChangesData, formex: formex$1, onClearLocalChanges: () => setLocalChangesCleared(true) }),
-          formex$1.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "There are local unsaved changes", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", className: "py-1", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "The current form is in sync with the database", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", className: "py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) })
+          formex$1.dirty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "This form has been modified", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", className: "py-1", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsxRuntime.jsx(ui.EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "The current form is in sync with the database", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", className: "py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" }) }) })
         ] }),
         formView
       ] }) }),
@@ -18634,7 +18634,7 @@
     return false;
   });
   function PropertyFieldBindingInternal(t0) {
-    const $ = reactCompilerRuntime.c(18);
+    const $ = reactCompilerRuntime.c(19);
     const {
       propertyKey,
       property,
@@ -18643,6 +18643,7 @@
       underlyingValueHasChanged,
       disabled: disabledProp,
       partOfArray,
+      partOfBlock,
       minimalistView,
       autoFocus,
       index,
@@ -18651,15 +18652,8 @@
     } = t0;
     const authController = useAuthController();
     const customizationController = useCustomizationController();
-    if (propertyKey === "created_by") {
-      console.log("Rendering field for created_by", {
-        propertyKey,
-        property,
-        context
-      });
-    }
     let t1;
-    if ($[0] !== authController || $[1] !== autoFocus || $[2] !== context || $[3] !== customizationController.propertyConfigs || $[4] !== disabledProp || $[5] !== includeDescription || $[6] !== index || $[7] !== minimalistView || $[8] !== onPropertyChange || $[9] !== partOfArray || $[10] !== property || $[11] !== propertyKey || $[12] !== size || $[13] !== underlyingValueHasChanged) {
+    if ($[0] !== authController || $[1] !== autoFocus || $[2] !== context || $[3] !== customizationController.propertyConfigs || $[4] !== disabledProp || $[5] !== includeDescription || $[6] !== index || $[7] !== minimalistView || $[8] !== onPropertyChange || $[9] !== partOfArray || $[10] !== partOfBlock || $[11] !== property || $[12] !== propertyKey || $[13] !== size || $[14] !== underlyingValueHasChanged) {
       t1 = (fieldProps) => {
         let Component;
         const resolvedProperty = resolveProperty({
@@ -18722,6 +18716,7 @@
           context,
           disabled,
           partOfArray,
+          partOfBlock,
           minimalistView,
           autoFocus,
           size,
@@ -18739,22 +18734,23 @@
       $[7] = minimalistView;
       $[8] = onPropertyChange;
       $[9] = partOfArray;
-      $[10] = property;
-      $[11] = propertyKey;
-      $[12] = size;
-      $[13] = underlyingValueHasChanged;
-      $[14] = t1;
+      $[10] = partOfBlock;
+      $[11] = property;
+      $[12] = propertyKey;
+      $[13] = size;
+      $[14] = underlyingValueHasChanged;
+      $[15] = t1;
     } else {
-      t1 = $[14];
+      t1 = $[15];
     }
     let t2;
-    if ($[15] !== propertyKey || $[16] !== t1) {
+    if ($[16] !== propertyKey || $[17] !== t1) {
       t2 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: propertyKey, children: t1 }, propertyKey);
-      $[15] = propertyKey;
-      $[16] = t1;
-      $[17] = t2;
+      $[16] = propertyKey;
+      $[17] = t1;
+      $[18] = t2;
     } else {
-      t2 = $[17];
+      t2 = $[18];
     }
     return t2;
   }
@@ -18766,6 +18762,7 @@
       includeDescription,
       underlyingValueHasChanged,
       partOfArray,
+      partOfBlock,
       minimalistView,
       autoFocus,
       context,
@@ -18815,6 +18812,7 @@
       disabled: disabled ?? false,
       underlyingValueHasChanged: underlyingValueHasChanged ?? false,
       partOfArray: partOfArray ?? false,
+      partOfBlock: partOfBlock ?? false,
       minimalistView: minimalistView ?? false,
       autoFocus: autoFocus ?? false,
       customProps: customFieldProps,
@@ -20126,6 +20124,7 @@
         context,
         autoFocus,
         partOfArray: false,
+        partOfBlock: true,
         minimalistView: true,
         onPropertyChange: storeProps
       } : void 0;
@@ -22051,7 +22050,7 @@
       storedProps,
       updateItemCustomProps
     } = t0;
-    const t1 = `relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`;
+    const t1 = `relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`;
     let t2;
     if ($[0] !== internalId || $[1] !== updateItemCustomProps) {
       t2 = (props) => updateItemCustomProps(internalId, props);
@@ -22374,7 +22373,7 @@
     } else if (value?.isEntityReference && value?.isEntityReference()) {
       child = /* @__PURE__ */ jsxRuntime.jsx(ReferencePreview, { reference: value, onClick: onEntryClick, disabled, previewProperties, size, includeId, includeEntityLink });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("text-sm font-medium", "min-w-80 flex flex-col gap-4", "relative transition-colors duration-200 ease-in rounded font-medium", disabled ? "bg-opacity-50" : "hover:bg-opacity-75", "text-opacity-50 dark:text-white dark:text-opacity-50", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("text-sm font-medium", "min-w-80 flex flex-col gap-4", "relative transition-colors duration-200 ease-in rounded font-medium", disabled ? "bg-opacity-50" : "hover:bg-opacity-75", "text-opacity-50 text-text-primary/50 dark:text-white dark:text-opacity-50 dark:text-white/50", className), children: [
       child,
       !value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "outlined", color: "primary", disabled, onClick: onEntryClick, children: [
         "Edit ",
@@ -25262,7 +25261,7 @@
         const {
           isActive
         } = t52;
-        return ui.cls("rounded-lg truncate", "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white", "flex flex-row items-center mr-8", drawerOpen ? "pl-4 h-10" : "pl-4 h-9", "font-semibold text-xs", isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : "");
+        return ui.cls("rounded-lg truncate", "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75", "flex flex-row items-center mr-8", drawerOpen ? "pl-4 h-10" : "pl-4 h-9", "font-semibold text-xs", isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : "");
       };
       $[4] = drawerOpen;
       $[5] = t4;
@@ -25272,7 +25271,7 @@
     const t5 = drawerOpen ? "opacity-100" : "opacity-0 hidden";
     let t6;
     if ($[6] !== t5) {
-      t6 = ui.cls(t5, "ml-4 font-inherit text-inherit");
+      t6 = ui.cls("text-text-primary dark:text-surface-200", t5, "ml-4 font-inherit");
       $[6] = t5;
       $[7] = t6;
     } else {
@@ -25420,7 +25419,7 @@
         }
         let t10;
         if ($[41] !== adminMenuOpen || $[42] !== buildGroupHeader || $[43] !== drawerOpen || $[44] !== navigationEntries || $[45] !== onClick || $[46] !== tooltipsOpen) {
-          t10 = (group_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1", children: [
+          t10 = (group_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 dark:bg-surface-800/30 bg-surface-50 dark:bg-surface-800/30  my-4 rounded-lg ml-3 mr-1", children: [
             buildGroupHeader(group_0),
             Object.values(navigationEntries).filter((e_0) => e_0.group === group_0).map((view_0) => /* @__PURE__ */ jsxRuntime.jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(IconForView, { collectionOrView: view_0.collection ?? view_0.view, size: "small" }), tooltipsOpen, adminMenuOpen, drawerOpen, onClick: () => onClick(view_0), url: view_0.url, name: view_0.name }, view_0.id))
           ] }, `drawer_group_${group_0}`);
@@ -26928,7 +26927,7 @@
       }
       let t12;
       if ($[24] !== innerDrawer || $[25] !== props.open || $[26] !== props.setDrawerOpen) {
-        t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Sheet, { side: "left", transparent: true, open: props.open, onOpenChange: props.setDrawerOpen, title: "Navigation drawer", overlayClassName: "bg-white bg-opacity-80", children: innerDrawer });
+        t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Sheet, { side: "left", transparent: true, open: props.open, onOpenChange: props.setDrawerOpen, title: "Navigation drawer", overlayClassName: "bg-white bg-opacity-80 bg-white/80", children: innerDrawer });
         $[24] = innerDrawer;
         $[25] = props.open;
         $[26] = props.setDrawerOpen;