@firecms/core 3.0.0-beta.7 → 3.0.0-beta.8

package/src/{core → app}/Scaffold.tsx

@@ -1,55 +1,16 @@
 import React, { PropsWithChildren, useCallback } from "react";
-import equal from "react-fast-compare"
-import { Link } from "react-router-dom";
-
-import { Drawer as DefaultDrawer, DrawerProps } from "./Drawer";
-import { useLargeLayout, useNavigationController } from "../hooks";
-import { ErrorBoundary, FireCMSAppBar as DefaultFireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
 import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import equal from "react-fast-compare"
+import { useLargeLayout } from "../hooks";
+import { ErrorBoundary } from "../components";
+import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
 
-const DrawerContext = React.createContext<DrawerProps>({
-    hovered: false,
-    drawerOpen: false,
-    openDrawer: () => {
-        throw new Error("openDrawer not implemented");
-    },
-    closeDrawer: () => {
-        throw new Error("closeDrawer not implemented");
-    },
-    autoOpenDrawer: false
-});
-
-export function useDrawer() {
-    return React.useContext(DrawerContext);
-}
-
 /**
  * @group Core
  */
-export interface ScaffoldProps<ExtraAppbarProps = object> {
-
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name?: React.ReactNode;
-
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    includeDrawer?: boolean;
-
-    /**
-     * You can define a custom drawer to be displayed in the scaffold.
-     * Use the hook `useDrawer` to access the context values.
-     */
-    drawer?: React.ReactNode;
+export interface ScaffoldProps {
 
     /**
      * Open the drawer on hover
@@ -57,15 +18,14 @@ export interface ScaffoldProps<ExtraAppbarProps = object> {
     autoOpenDrawer?: boolean;
 
     /**
-     * The AppBar component to be used in the scaffold.
+     * Logo to be displayed in the top bar and drawer.
+     * Note that this has no effect if you are using a custom AppBar or Drawer.
      */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
+    logo?: string;
 
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
+    className?: string;
 
+    style?: React.CSSProperties;
 }
 
 /**
@@ -84,15 +44,23 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const {
             children,
-            name,
-            logo,
-            includeDrawer = true,
             autoOpenDrawer,
-            drawer = <DefaultDrawer/>,
-            FireCMSAppBar = DefaultFireCMSAppBar,
-            fireCMSAppBarProps,
+            logo,
+            className,
+            style
         } = props;
 
+        const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
+        if (drawerChildren.length > 1) {
+            throw Error("Only one Drawer component is allowed in Scaffold");
+        }
+        const appBarChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "AppBar");
+        if (appBarChildren.length > 1) {
+            throw Error("Only one AppBar component is allowed in Scaffold");
+        }
+        const otherChildren = React.Children.toArray(children)
+            .filter((child: any) => child.type.componentType !== "Drawer" && child.type.componentType !== "AppBar");
+        const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
         const [drawerOpen, setDrawerOpen] = React.useState(false);
@@ -112,38 +80,37 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
 
         return (
-            <DrawerContext.Provider value={{
-                hovered: onHover,
+            <AppContext.Provider value={{
+                logo,
+                hasDrawer: includeDrawer,
+                drawerHovered: onHover,
                 drawerOpen: computedDrawerOpen,
                 closeDrawer: handleDrawerClose,
                 openDrawer: handleDrawerOpen,
                 autoOpenDrawer
             }}>
                 <div
-                    className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
+                    className={cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className)}
                     style={{
                         paddingTop: "env(safe-area-inset-top)",
                         paddingLeft: "env(safe-area-inset-left)",
                         paddingRight: "env(safe-area-inset-right)",
                         paddingBottom: "env(safe-area-inset-bottom)",
-                        height: "100dvh"
+                        height: "100dvh",
+                        ...style
                     }}>
 
-                    <FireCMSAppBar title={name}
-                                   includeDrawer={includeDrawer}
-                                   logo={logo}
-                                   drawerOpen={computedDrawerOpen}
-                                   {...fireCMSAppBarProps}/>
+                    {appBarChildren}
+
                     <DrawerWrapper
                         displayed={includeDrawer}
                         onMouseEnter={setOnHoverTrue}
                         onMouseMove={setOnHoverTrue}
                         onMouseLeave={setOnHoverFalse}
                         open={computedDrawerOpen}
-                        logo={logo}
                         hovered={onHover}
                         setDrawerOpen={setDrawerOpen}>
-                        {includeDrawer && drawer}
+                        {includeDrawer && drawerChildren}
                     </DrawerWrapper>
 
                     <main
@@ -153,13 +120,13 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                             className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
 
                             <ErrorBoundary>
-                                {children}
+                                {otherChildren}
                             </ErrorBoundary>
 
                         </div>
                     </main>
                 </div>
-            </DrawerContext.Provider>
+            </AppContext.Provider>
         );
     },
     equal
@@ -183,8 +150,6 @@ function DrawerWrapper(props: {
     onMouseLeave: () => void
 }) {
 
-    const navigation = useNavigationController();
-
     const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
     const innerDrawer = <div
         className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
@@ -198,7 +163,7 @@ function DrawerWrapper(props: {
             <Tooltip title="Open menu"
                      side="right"
                      sideOffset={12}
-                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit"
+                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20"
             >
                 <IconButton
                     color="inherit"
@@ -212,30 +177,19 @@ function DrawerWrapper(props: {
             </Tooltip>
         )}
 
-        <div className={"flex flex-col h-full"}>
-            <div
-                style={{
-                    transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-                    padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
-                }}
-                className={cls("cursor-pointer")}>
-
-                <Tooltip title={"Home"}
-                         sideOffset={20}
-                         side="right">
-                    <Link
-                        to={navigation.basePath}>
-                        {props.logo
-                            ? <img src={props.logo}
-                                   alt="Logo"
-                                   className={cls("max-w-full max-h-full",
-                                       props.open ?? "w-[112px] h-[112px]")}/>
-                            : <FireCMSLogo/>}
-
-                    </Link>
-                </Tooltip>
-            </div>
+        <div
+            className={`z-20 absolute right-0 top-4 ${
+                props.open ? "opacity-100" : "opacity-0 invisible"
+            } transition-opacity duration-200 ease-in-out`}>
+            <IconButton
+                aria-label="Close drawer"
+                onClick={() => props.setDrawerOpen(false)}
+            >
+                <ChevronLeftIcon/>
+            </IconButton>
+        </div>
 
+        <div className={"flex flex-col h-full"}>
             {props.children}
         </div>
 
@@ -267,7 +221,7 @@ function DrawerWrapper(props: {
 
     return (
         <div
-            className="relative"
+            className="z-20 relative"
             onMouseEnter={props.onMouseEnter}
             onMouseMove={props.onMouseMove}
             onMouseLeave={props.onMouseLeave}
@@ -278,17 +232,17 @@ function DrawerWrapper(props: {
 
             {innerDrawer}
 
-            <div
-                className={`absolute right-0 top-4 ${
-                    props.open ? "opacity-100" : "opacity-0 invisible"
-                } transition-opacity duration-1000 ease-in-out`}>
-                <IconButton
-                    aria-label="Close drawer"
-                    onClick={() => props.setDrawerOpen(false)}
-                >
-                    <ChevronLeftIcon/>
-                </IconButton>
-            </div>
+            {/*<div*/}
+            {/*    className={`z-20 absolute right-0 top-4 ${*/}
+            {/*        props.open ? "opacity-100" : "opacity-0 invisible"*/}
+            {/*    } transition-opacity duration-1000 ease-in-out`}>*/}
+            {/*    <IconButton*/}
+            {/*        aria-label="Close drawer"*/}
+            {/*        onClick={() => props.setDrawerOpen(false)}*/}
+            {/*    >*/}
+            {/*        <ChevronLeftIcon/>*/}
+            {/*    </IconButton>*/}
+            {/*</div>*/}
 
         </div>
     );

package/src/app/index.ts

@@ -0,0 +1,4 @@
+export * from "./Drawer";
+export * from "./AppBar";
+export * from "./Scaffold";
+export * from "./useApp";

package/src/app/useApp.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+/**
+ * This context represents the state of the app in terms of layout.
+ * @group Core
+ */
+export type AppState = {
+    hasDrawer: boolean,
+    drawerHovered: boolean,
+    drawerOpen: boolean,
+    openDrawer: () => void,
+    closeDrawer: () => void,
+    autoOpenDrawer?: boolean,
+    logo?: string
+}
+
+export const AppContext = React.createContext<AppState>({
+    hasDrawer: false,
+    drawerHovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useApp() {
+    return React.useContext(AppContext);
+}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -149,16 +149,14 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
+                <div
+                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
 
                     {entity
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>

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

@@ -264,7 +264,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         values,
         path,
         setFieldValue,
-        save: saveValue
+        save: saveValue,
+        formex
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -7,7 +7,7 @@ import {
     CollectionSize,
     Entity,
     EntityAction,
-    EntityCollection,
+    EntityCollection, EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -266,6 +266,7 @@ export const EntityCollectionView = React.memo(
             fullPath: string,
             parentCollectionIds: string[],
             collection: EntityCollection;
+            tableController: EntityTableController;
         }> | undefined
 
         // we are only using the first plugin that implements this
@@ -368,12 +369,12 @@ export const EntityCollectionView = React.memo(
             return resolveProperty({
                 propertyKey,
                 propertyOrBuilder,
-                path: fullPath,
+                path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
                 fields: customizationController.propertyConfigs
             });
-        }, [collection.properties, customizationController.propertyConfigs, fullPath, resolvedCollection.properties]);
+        }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
@@ -564,6 +565,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
+                            tableController={tableController}
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
@@ -574,7 +576,8 @@ export const EntityCollectionView = React.memo(
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
                                                parentCollectionIds={parentCollectionIds ?? []}
-                                               collection={collection}/>;
+                                               collection={collection}
+                                               tableController={tableController}/>;
                 return null;
             }
             : undefined;

package/src/components/VirtualTable/VirtualTable.tsx

@@ -107,6 +107,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              hoverRow,
                                                              createFilterField,
                                                              rowClassName,
+                                                             style,
                                                              className,
                                                              endAdornment,
                                                              AddColumnComponent
@@ -239,7 +240,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error
             ? <CenteredView maxWidth={"2xl"}
-                className="flex flex-col gap-2">
+                            className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
                     {"Error fetching data from the data source"}
@@ -275,6 +276,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         return (
             <div
                 ref={measureRef}
+                style={style}
                 className={cls("h-full w-full", className)}>
                 <VirtualListContext.Provider
                     value={virtualListController}>

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -131,6 +131,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     className?: string;
 
+    /**
+     * Style applied to the table
+     */
+    style?: React.CSSProperties;
+
     /**
      * Component rendered at the end of the table, after scroll
      */

package/src/components/common/useTableSearchHelper.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { EntityCollection } from "../../types";
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
 
 export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     collection: EntityCollection<M>;
@@ -9,27 +9,57 @@ export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     parentCollectionIds?: string[];
 }
 
-export function useTableSearchHelper<M extends Record<string, any>>({ collection, fullPath, parentCollectionIds }: UseTableSearchHelperParams<M>) {
+export function useTableSearchHelper<M extends Record<string, any>>({
+                                                                        collection,
+                                                                        fullPath,
+                                                                        parentCollectionIds
+                                                                    }: UseTableSearchHelperParams<M>) {
 
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
+    const dataSource = useDataSource();
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
-    if (customizationController?.plugins) {
-        const addTextSearchClickListener = customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    const props = {
+        context,
+        path: fullPath,
+        collection,
+        parentCollectionIds
+    };
+
+    const searchBlocked = customizationController.plugins?.find(p => {
+        return p.collectionView?.blockSearch?.(props);
+    });
+
+    const addTextSearchClickListener = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    if (addTextSearchClickListener) {
 
         onTextSearchClick = addTextSearchClickListener
             ? () => {
                 setTextSearchLoading(true);
-                Promise.all(customizationController.plugins?.map(p => {
-                    if (p.collectionView?.onTextSearchClick)
-                        return p.collectionView.onTextSearchClick({ context, path: fullPath, collection, parentCollectionIds });
-                    return Promise.resolve(true);
-                }) as Promise<boolean>[])
-                    .then((res) => {
+                const promises: Promise<boolean>[] = [];
+                if (dataSource?.initTextSearch && !searchBlocked) {
+                    promises.push(dataSource.initTextSearch(props));
+                }
+                if (searchBlocked) {
+                    customizationController.plugins?.forEach(p => {
+                        if (p.collectionView?.onTextSearchClick)
+                            promises.push(p.collectionView.onTextSearchClick({
+                                context,
+                                path: fullPath,
+                                collection,
+                                parentCollectionIds
+                            }));
+                    })
+                }
+                return Promise.all(promises)
+                    .then((res: boolean[]) => {
                         if (res.every(Boolean)) setTextSearchInitialised(true);
                     })
                     .finally(() => setTextSearchLoading(false));
@@ -39,9 +69,19 @@ export function useTableSearchHelper<M extends Record<string, any>>({ collection
         customizationController.plugins?.forEach(p => {
             if (!textSearchEnabled)
                 if (p.collectionView?.showTextSearchBar) {
-                    textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: fullPath, collection, parentCollectionIds });
+                    textSearchEnabled = p.collectionView.showTextSearchBar({
+                        context,
+                        path: fullPath,
+                        collection,
+                        parentCollectionIds
+                    });
                 }
         })
     }
-    return { textSearchLoading, textSearchInitialised, onTextSearchClick, textSearchEnabled };
+    return {
+        textSearchLoading,
+        textSearchInitialised,
+        onTextSearchClick,
+        textSearchEnabled
+    };
 }

package/src/components/index.tsx

@@ -29,7 +29,7 @@ export * from "./DeleteConfirmationDialog";
 
 export * from "./FireCMSLogo";
 
-export * from "./FireCMSAppBar";
+export * from "../core/DefaultAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";

package/src/contexts/DialogsProvider.tsx

@@ -18,14 +18,14 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
         if (dialogEntries.length === 0)
             return;
 
-        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        const updatedPanels = [...dialogEntriesRef.current.slice(0, -1)];
         updateDialogEntries(updatedPanels);
 
     }, [dialogEntries]);
 
     const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
 
-        const updatedPanels = [...dialogEntries, dialogEntry];
+        const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
 
         return {