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

package/README.md

@@ -167,7 +167,7 @@ in `example/src`.
 That file needs to export a valid Firebase config, that you can get
 from your Firebase console when creating a webapp for your project.
 
-Then simply run `yarn` and `yarn dev`
+Then simply run `npm install` and `npm run dev` (or `yarn` and `yarn dev`)
 
 ## License
 

package/dist/form/PropertyFieldBinding.d.ts

@@ -26,5 +26,5 @@ import { CMSType, PropertyFieldBindingProps } from "../types";
  * @group Form custom fields
  */
 export declare const PropertyFieldBinding: typeof PropertyFieldBindingInternal;
-declare function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled: disabledProp, partOfArray, minimalistView, autoFocus, index, size, onPropertyChange, }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>>;
+declare function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled: disabledProp, partOfArray, partOfBlock, minimalistView, autoFocus, index, size, onPropertyChange, }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>>;
 export {};

package/dist/index.es.js

@@ -4908,7 +4908,7 @@ function EmptyValue() {
   const $ = c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /* @__PURE__ */ jsx("div", { className: "rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block" });
+    t0 = /* @__PURE__ */ 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];
@@ -9733,9 +9733,9 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   }
   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;
@@ -9803,7 +9803,7 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   }
   let t24;
   if ($[33] !== disabled || $[34] !== disabledTooltip || $[35] !== onHover) {
-    t24 = disabled && onHover && disabledTooltip && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsx(Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsx(DoNotDisturbOnIcon, { size: "smallest", color: "disabled", className: "text-surface-500" }) }) });
+    t24 = disabled && onHover && disabledTooltip && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsx(Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsx(DoNotDisturbOnIcon, { size: "smallest", color: "disabled", className: "text-text-disabled" }) }) });
     $[33] = disabled;
     $[34] = disabledTooltip;
     $[35] = onHover;
@@ -10273,7 +10273,7 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
   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__ */ jsxs("div", { className: 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: useCallback((event) => {
+  return /* @__PURE__ */ jsxs("div", { className: 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: useCallback((event) => {
     event.stopPropagation();
   }, []), style: {
     width,
@@ -10787,7 +10787,7 @@ const VirtualTableHeader = React__default.memo(function VirtualTableHeader2(t0)
   const t3 = column.frozen ? "sticky left-0 z-10" : "relative z-0";
   let t4;
   if ($[4] !== t3) {
-    t4 = 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 = 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 {
@@ -11223,7 +11223,7 @@ const VirtualTableRow = React__default.memo(function VirtualTableRow2(t0) {
   const onClick = t1;
   let t2;
   if ($[4] !== hoverRow || $[5] !== onRowClick || $[6] !== rowClassName || $[7] !== rowData) {
-    t2 = 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 = 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
     });
@@ -12254,7 +12254,7 @@ const SelectableTable = function SelectableTable2({
     selectedCell
   }), [setPopupCell, select, onValueChange, size, selectedCell]);
   return /* @__PURE__ */ jsx(SelectableTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full flex flex-col bg-white dark:bg-surface-950", ref, children: /* @__PURE__ */ 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: 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({
@@ -16471,7 +16471,7 @@ function EntityForm({
     /* @__PURE__ */ jsx("div", { id: `form_${path}`, className: 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__ */ jsxs("div", { className: cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4 self-end sticky top-4 z-10", children: [
         manualApplyLocalChanges && hasLocalChanges && /* @__PURE__ */ jsx(LocalChangesMenu, { cacheKey: status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId, properties: resolvedCollection.properties, localChangesData, formex, onClearLocalChanges: () => setLocalChangesCleared(true) }),
-        formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "There are local unsaved changes", children: /* @__PURE__ */ jsx(Chip, { size: "small", className: "py-1", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "The current form is in sync with the database", children: /* @__PURE__ */ jsx(Chip, { size: "small", className: "py-1", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) })
+        formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "This form has been modified", children: /* @__PURE__ */ jsx(Chip, { size: "small", className: "py-1", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "The current form is in sync with the database", children: /* @__PURE__ */ jsx(Chip, { size: "small", className: "py-1", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) })
       ] }),
       formView
     ] }) }),
@@ -18636,7 +18636,7 @@ const PropertyFieldBinding = React__default.memo(PropertyFieldBindingInternal, (
   return false;
 });
 function PropertyFieldBindingInternal(t0) {
-  const $ = c(18);
+  const $ = c(19);
   const {
     propertyKey,
     property,
@@ -18645,6 +18645,7 @@ function PropertyFieldBindingInternal(t0) {
     underlyingValueHasChanged,
     disabled: disabledProp,
     partOfArray,
+    partOfBlock,
     minimalistView,
     autoFocus,
     index,
@@ -18653,15 +18654,8 @@ function PropertyFieldBindingInternal(t0) {
   } = 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({
@@ -18724,6 +18718,7 @@ function PropertyFieldBindingInternal(t0) {
         context,
         disabled,
         partOfArray,
+        partOfBlock,
         minimalistView,
         autoFocus,
         size,
@@ -18741,22 +18736,23 @@ function PropertyFieldBindingInternal(t0) {
     $[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__ */ jsx(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;
 }
@@ -18768,6 +18764,7 @@ function FieldInternal({
     includeDescription,
     underlyingValueHasChanged,
     partOfArray,
+    partOfBlock,
     minimalistView,
     autoFocus,
     context,
@@ -18817,6 +18814,7 @@ function FieldInternal({
     disabled: disabled ?? false,
     underlyingValueHasChanged: underlyingValueHasChanged ?? false,
     partOfArray: partOfArray ?? false,
+    partOfBlock: partOfBlock ?? false,
     minimalistView: minimalistView ?? false,
     autoFocus: autoFocus ?? false,
     customProps: customFieldProps,
@@ -20128,6 +20126,7 @@ function BlockEntry(t0) {
       context,
       autoFocus,
       partOfArray: false,
+      partOfBlock: true,
       minimalistView: true,
       onPropertyChange: storeProps
     } : void 0;
@@ -22053,7 +22052,7 @@ function ArrayContainerItem(t0) {
     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);
@@ -22376,7 +22375,7 @@ function ReferenceWidget({
   } else if (value?.isEntityReference && value?.isEntityReference()) {
     child = /* @__PURE__ */ jsx(ReferencePreview, { reference: value, onClick: onEntryClick, disabled, previewProperties, size, includeId, includeEntityLink });
   }
-  return /* @__PURE__ */ jsxs("div", { className: 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__ */ jsxs("div", { className: 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__ */ jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxs(Button, { variant: "outlined", color: "primary", disabled, onClick: onEntryClick, children: [
       "Edit ",
@@ -25264,7 +25263,7 @@ function DrawerNavigationItem(t0) {
       const {
         isActive
       } = t52;
-      return 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 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;
@@ -25274,7 +25273,7 @@ function DrawerNavigationItem(t0) {
   const t5 = drawerOpen ? "opacity-100" : "opacity-0 hidden";
   let t6;
   if ($[6] !== t5) {
-    t6 = cls(t5, "ml-4 font-inherit text-inherit");
+    t6 = cls("text-text-primary dark:text-surface-200", t5, "ml-4 font-inherit");
     $[6] = t5;
     $[7] = t6;
   } else {
@@ -25422,7 +25421,7 @@ function DefaultDrawer(t0) {
       }
       let t10;
       if ($[41] !== adminMenuOpen || $[42] !== buildGroupHeader || $[43] !== drawerOpen || $[44] !== navigationEntries || $[45] !== onClick || $[46] !== tooltipsOpen) {
-        t10 = (group_0) => /* @__PURE__ */ 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__ */ 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__ */ jsx(DrawerNavigationItem, { icon: /* @__PURE__ */ 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}`);
@@ -26930,7 +26929,7 @@ function DrawerWrapper(props) {
     }
     let t12;
     if ($[24] !== innerDrawer || $[25] !== props.open || $[26] !== props.setDrawerOpen) {
-      t12 = /* @__PURE__ */ jsx(Sheet, { side: "left", transparent: true, open: props.open, onOpenChange: props.setDrawerOpen, title: "Navigation drawer", overlayClassName: "bg-white bg-opacity-80", children: innerDrawer });
+      t12 = /* @__PURE__ */ jsx(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;