@firecms/core 3.0.0-canary.43 → 3.0.0-canary.45

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.43",
+  "version": "3.0.0-canary.45",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-canary.43",
-    "@firecms/ui": "^3.0.0-canary.43",
+    "@firecms/formex": "^3.0.0-canary.45",
+    "@firecms/ui": "^3.0.0-canary.45",
     "@fontsource/jetbrains-mono": "^5.0.19",
     "@hello-pangea/dnd": "^16.6.0",
     "@radix-ui/react-portal": "^1.0.4",
@@ -118,7 +118,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "fedcb0d43c504245dd76b702e4ab4479fa8592df",
+  "gitHead": "7f22bfa3bb20479ad23becd9c10f78cac1a3bc32",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -15,6 +15,7 @@ import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
+import { cn } from "@firecms/ui";
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -42,6 +43,7 @@ import { SelectableTable } from "../SelectableTable/SelectableTable";
  */
 export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
 ({
+     className,
      forceFilter,
      actionsStart,
      actions,
@@ -72,7 +74,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      emptyComponent,
      getIdColumnWidth,
      onTextSearchClick,
-     textSearchLoading
+     textSearchLoading,
+     enablePopupIcon
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
@@ -147,6 +150,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                         height={getRowHeight(size)}
                         entity={entity}
                         disabled={disabled}
+                        enablePopupIcon={enablePopupIcon}
                         path={entity.path}/>
                     : renderSkeletonText()
                 }
@@ -290,7 +294,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     return (
 
         <div ref={ref}
-             className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+             className={cn("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
 
             <CollectionTableToolbar
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -12,13 +12,13 @@ import {
 } from "../../types";
 import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
 
-
 /**
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
     UserType extends User = User> = {
 
+    className?: string;
     /**
      * Display these entities as selected
      */
@@ -131,7 +131,9 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     onTextSearchClick?: () => void;
 
     textSearchLoading?: boolean;
-}
+
+    enablePopupIcon: boolean;
+};
 
 export type GetPropertyForProps<M extends Record<string, any>> = {
     propertyKey: string,
@@ -141,5 +143,5 @@ export type GetPropertyForProps<M extends Record<string, any>> = {
 
 export type PropertyColumnConfig = {
     key: string,
-    disabled: boolean,
+    disabled?: boolean,
 };

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -46,6 +46,7 @@ export interface PropertyTableCellProps<T extends CMSType> {
     entity: Entity<any>;
     path: string;
     disabled: boolean;
+    enablePopupIcon?: boolean;
 }
 
 function isStorageProperty(property: ResolvedProperty) {
@@ -74,11 +75,10 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                                                      path,
                                                                                      entity,
                                                                                      readonly,
-                                                                                     disabled: disabledProp
+                                                                                     disabled: disabledProp,
+                                                                                     enablePopupIcon = true
                                                                                  }: PropertyTableCellProps<T>) {
 
-        const context = useFireCMSContext();
-
         const {
             onValueChange,
             size,
@@ -140,15 +140,19 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     setValidationError(undefined);
                     internalValueRef.current = value;
                     if (onValueChange) {
-                        onValueChange({
-                            value,
-                            propertyKey,
-                            setError,
-                            onValueUpdated,
-                            entity,
-                            fullPath: path,
-                            context
-                        });
+                        try {
+                            onValueChange({
+                                value,
+                                propertyKey,
+                                setError,
+                                onValueUpdated,
+                                data: entity,
+                            });
+                        } catch (e:any) {
+                            console.error("onValueChange error", e);
+                            setError(e);
+                        }
+
                     }
                 })
                 .catch((e) => {
@@ -399,7 +403,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
 
         if (!innerComponent) {
             allowScroll = false;
-            showExpandIcon = selected && !innerComponent && !disabled && !readOnlyProperty;
+            showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
                 <PropertyPreview width={width}
                                  height={height}

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -41,7 +41,7 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, any>) => Promise<void> | void;
 }
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
@@ -205,12 +205,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             return onCellValueChange({
                 value: values[propertyKey as string],
                 propertyKey: propertyKey as string,
-                entity,
+                data: entity,
                 setError: setSavingError,
                 onValueUpdated: () => {
                 },
-                fullPath: path,
-                context: fireCMSContext
             });
         }
         return Promise.resolve();

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -34,7 +34,7 @@ import {
     saveEntityWithCallbacks,
     useAuthController,
     useCustomizationController,
-    useDataSource,
+    useDataSource, useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
@@ -94,7 +94,9 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * Whether this is a subcollection or not.
      */
     isSubCollection?: boolean;
+
     className?: string;
+
 } & EntityCollection<M>;
 
 /**
@@ -131,6 +133,7 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+        const context = useFireCMSContext();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
@@ -311,13 +314,11 @@ export const EntityCollectionView = React.memo(
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
-                                                                fullPath,
-                                                                context,
                                                                 value,
                                                                 propertyKey,
                                                                 onValueUpdated,
                                                                 setError,
-                                                                entity,
+                                                                data: entity,
                                                             }) => {
 
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
@@ -334,7 +335,6 @@ export const EntityCollectionView = React.memo(
             return saveEntityWithCallbacks({
                 ...saveProps,
                 collection,
-                callbacks: collection.callbacks,
                 dataSource,
                 context,
                 onSaveSuccess: () => {
@@ -603,6 +603,7 @@ export const EntityCollectionView = React.memo(
                     key={`collection_table_${fullPath}`}
                     additionalFields={additionalFields}
                     tableController={tableController}
+                    enablePopupIcon={true}
                     displayedColumnIds={displayedColumnIds}
                     onSizeChanged={onSizeChanged}
                     onEntityClick={onEntityClick}

package/src/components/FireCMSAppBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
+import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
     cn,
@@ -18,7 +18,8 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 
 export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
+
+    title: React.ReactNode;
     /**
      * A component that gets rendered on the upper side of the main toolbar
      */
@@ -36,6 +37,8 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     style?: React.CSSProperties;
 
+    logo?: string;
+
     user?: User;
 } & ADDITIONAL_PROPS;
 
@@ -57,6 +60,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                                                         includeDrawer,
                                                         className,
                                                         style,
+                                                        logo,
                                                         user: userProp
                                                     }: FireCMSAppBarProps) {
     const navigation = useNavigationController();
@@ -102,7 +106,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
                     "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
                     "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
+                    fixed: true
                 },
                 className)}>
 
@@ -110,16 +114,27 @@ export const FireCMSAppBar = function FireCMSAppBar({
 
                 {startAdornment}
 
+
                 {navigation && <div className="mr-8 hidden lg:block">
                     <ReactLink
                         className="visited:text-inherit visited:dark:text-inherit"
                         to={navigation?.basePath ?? "/"}
                     >
-                        <Typography variant="subtitle1"
-                                    noWrap
-                                    className={"ml-2 !font-medium"}>
-                            {title}
-                        </Typography>
+                        <div className={"flex flex-row gap-4"}>
+                            {!includeDrawer && (logo
+                                ? <img src={logo}
+                                       alt="Logo"
+                                       className={cn("w-[32px] h-[32px]")}/>
+                                : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                            {typeof title === "string"
+                                ? <Typography variant="subtitle1"
+                                              noWrap
+                                              className={"ml-2 !font-medium"}>
+                                    {title}
+                                </Typography>
+                                : title}
+                        </div>
                     </ReactLink>
                 </div>}
 

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -291,6 +291,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}
+                        enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
                         title={<Typography variant={"subtitle2"}>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -404,7 +404,7 @@ const SafeLinkRenderer: React.FC<{
     const urlRegex = /https?:\/\/[^\s]+/g;
     const htmlContent = text.replace(urlRegex, (url) => {
         // For each URL found, replace it with an HTML <a> tag
-        return `<a href="${url}" target="_blank">Link</a><br/>`;
+        return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
     });
 
     return (

package/src/components/common/types.tsx

@@ -1,4 +1,4 @@
-import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+import { CollectionSize, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 
@@ -31,14 +31,12 @@ export type EntityCollectionTableController<M extends Record<string, any>> = {
  * Props passed in a callback when the content of a cell in a table has been edited
  * @group Collection components
  */
-export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
+export interface OnCellValueChangeParams<T = any, D = any> {
     value: T,
     propertyKey: string,
-    entity: Entity<M>,
+    data?: D,
     onValueUpdated: () => void
     setError: (e: Error | undefined) => void
-    fullPath: string
-    context: FireCMSContext
 }
 
 /**

package/src/core/NavigationRoutes.tsx

@@ -13,7 +13,7 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
     customRoutes?: React.ReactNode[]
 
@@ -28,10 +28,9 @@ export type NavigationRoutesProps = {
  * @constructor
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
+                                  homePage = <DefaultHomePage/>,
                                   customRoutes
                               }: NavigationRoutesProps) {
 
@@ -93,7 +92,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}

package/src/core/Scaffold.tsx

@@ -17,7 +17,7 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     /**
      * Name of the app, displayed as the main title and in the tab title
      */
-    name: string;
+    name: React.ReactNode;
 
     /**
      * Logo to be displayed in the drawer of the CMS
@@ -112,9 +112,10 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                 }}>
 
                 <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
+                               includeDrawer={includeDrawer}
+                               logo={logo}
+                               drawerOpen={computedDrawerOpen}
+                               {...fireCMSAppBarProps}/>
 
                 <StyledDrawer
                     displayed={includeDrawer}

package/src/hooks/data/save.ts

@@ -17,7 +17,6 @@ import { resolveCollection } from "../../util";
 export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
     SaveEntityProps<M> &
     {
-        callbacks?: EntityCallbacks<M>;
         onSaveSuccess?: (updatedEntity: Entity<M>) => void,
         onSaveFailure?: (e: Error) => void,
         onPreSaveHookError?: (e: Error) => void,