@firecms/core 3.0.0-rc.4 → 3.0.0-tw4.13

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/components/VirtualTable/VirtualTable.performance.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useProjectLog.d.ts

@@ -1,6 +1,6 @@
 import { AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
 export declare const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
-export declare const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
+export declare const DEFAULT_SERVER = "https://api.firecms.co";
 export type AccessResponse = {
     blocked?: boolean;
     message?: string;

package/dist/index.es.js

@@ -1127,6 +1127,18 @@ function unslugify(slug) {
     return slug.trim();
   }
 }
+function prettifyIdentifier(input) {
+  if (!input) return "";
+  let text = input;
+  text = text.replace(/([a-z])([A-Z])|([A-Z])([A-Z][a-z])/g, "$1$3 $2$4");
+  text = text.replace(/[_-]+/g, " ");
+  const s = text.trim().replace(/\b\w/g, (char) => char.toUpperCase());
+  console.log("Prettified identifier:", {
+    input,
+    s
+  });
+  return s;
+}
 const defaultDateFormat = "MMMM dd, yyyy, HH:mm:ss";
 const COLLECTION_PATH_SEPARATOR = "::";
 function stripCollectionPath(path) {
@@ -4908,7 +4920,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 +9745,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 +9815,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;
@@ -10201,10 +10213,6 @@ function getEntityFromCache(path) {
       const entityString = localStorage.getItem(key);
       if (entityString) {
         const entity = JSON.parse(entityString, customReviver);
-        console.log("Loaded entity from localStorage:", {
-          key,
-          entity
-        });
         return entity;
       }
     } catch (error) {
@@ -10273,7 +10281,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 +10795,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 +11231,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
     });
@@ -11508,7 +11516,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     /* @__PURE__ */ jsx(AssignmentIcon, {}),
     emptyComponent
   ] }) : void 0;
-  const virtualListController = {
+  const virtualListController = useMemo(() => ({
     data,
     rowHeight,
     cellRenderer,
@@ -11527,7 +11535,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
     rowClassName,
     endAdornment,
     AddColumnComponent
-  };
+  }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField2, rowClassName, endAdornment, AddColumnComponent]);
   return /* @__PURE__ */ jsx("div", { ref: measureRef, style, className: cls("h-full w-full", className), children: /* @__PURE__ */ jsx(VirtualListContext.Provider, { value: virtualListController, children: /* @__PURE__ */ jsx(MemoizedList, { outerRef: tableRef, width: bounds.width, height: bounds.height, itemCount: (data?.length ?? 0) + (endAdornment ? 1 : 0), onScroll, includeAddColumn: Boolean(AddColumnComponent), itemSize: rowHeight }, rowHeight) }) });
 }, equal);
 function MemoizedList({
@@ -12254,7 +12262,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({
@@ -22052,7 +22060,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);
@@ -22375,7 +22383,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 ",
@@ -23681,7 +23689,15 @@ function SideDialogView({
     pendingClose,
     setPendingClose
   }, children: [
-    /* @__PURE__ */ jsxs(Sheet, { open: Boolean(panel), onOpenChange: (open) => !open && onCloseRequest(), title: "Side dialog " + panel?.key, children: [
+    /* @__PURE__ */ jsxs(Sheet, { open: Boolean(panel), onOpenChange: (open) => {
+      if (!open) {
+        const suggestionMenu = document.querySelector('[data-suggestion-menu="true"]');
+        if (suggestionMenu && window.getComputedStyle(suggestionMenu).visibility !== "hidden") {
+          return;
+        }
+        onCloseRequest();
+      }
+    }, title: "Side dialog " + panel?.key, children: [
       panel && /* @__PURE__ */ jsx("div", { className: "transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 ", style: {
         width: panel.width,
         transform: `translateX(-${offsetPosition * 200}px)`
@@ -25029,7 +25045,7 @@ function useBuildDataSource({
     }, [delegate.initTextSearch])
   };
 }
-const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
+const DEFAULT_SERVER = "https://api.firecms.co";
 async function makeRequest(authController, dataSourceKey, pluginKeys, apiKey) {
   let idToken;
   try {
@@ -25263,7 +25279,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;
@@ -25273,7 +25289,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 {
@@ -25421,7 +25437,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}`);
@@ -26929,7 +26945,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;
@@ -27174,6 +27190,7 @@ export {
   navigateToEntity,
   pick,
   plural,
+  prettifyIdentifier,
   printChanged,
   propertiesToColumns,
   randomColor,