@firecms/core 3.0.0-canary.207 → 3.0.0-canary.208

package/dist/types/firecms.d.ts

@@ -44,7 +44,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @group Models
  */
-export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
+export type FireCMSProps<USER extends User> = {
     /**
      * Use this function to return the components you want to render under
      * FireCMS

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.207",
+  "version": "3.0.0-canary.208",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.207",
-    "@firecms/formex": "^3.0.0-canary.207",
-    "@firecms/ui": "^3.0.0-canary.207",
+    "@firecms/editor": "^3.0.0-canary.208",
+    "@firecms/formex": "^3.0.0-canary.208",
+    "@firecms/ui": "^3.0.0-canary.208",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "04f84602ba162577101f88759b0c56d429c73ff8",
+  "gitHead": "d1fb356f64e1762feb71b2247e64f3d49719f202",
   "publishConfig": {
     "access": "public"
   },

package/src/app/Scaffold.tsx

@@ -23,6 +23,11 @@ export interface ScaffoldProps {
      */
     logo?: string;
 
+    /**
+     * If true, the main content will be padded in large layouts. Defaults to true.
+     */
+    padding?: boolean;
+
     className?: string;
 
     style?: React.CSSProperties;
@@ -47,7 +52,8 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             autoOpenDrawer,
             logo,
             className,
-            style
+            style,
+            padding = true
         } = props;
 
         const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
@@ -116,10 +122,14 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                     <main
                         className="flex flex-col flex-grow overflow-auto">
+
                         {hasAppBar && <DrawerHeader/>}
+
                         <div
-                            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", {
-                                "lg:mt-4": !hasAppBar
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 mt-1", {
+                                "lg:mt-4": !hasAppBar,
+                                "lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid": padding,
+                                "border-t": hasAppBar && !padding,
                             })}>
 
                             <ErrorBoundary>

package/src/core/DefaultAppBar.tsx

@@ -22,12 +22,19 @@ import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
+    /**
+     * The content of the app bar, usually a title or logo. This includes a link to the home page.
+     */
     title?: React.ReactNode;
+
     /**
-     * A component that gets rendered on the upper side of the main toolbar
+     * A component that gets rendered on the upper side to the end of the main toolbar
      */
     endAdornment?: React.ReactNode;
 
+    /**
+     * A component that gets rendered on the upper side to the start of the main toolbar
+     */
     startAdornment?: React.ReactNode;
 
     dropDownActions?: React.ReactNode;
@@ -57,14 +64,18 @@ export const DefaultAppBar = function DefaultAppBar({
                                                         includeModeToggle = true,
                                                         className,
                                                         style,
-                                                        user: userProp
+                                                        user: userProp,
+                                                        logo: logoProp,
                                                     }: DefaultAppBarProps) {
 
     const {
         hasDrawer,
         drawerOpen,
-        logo
+        logo: appLogo
     } = useApp();
+
+    const logo = logoProp ?? appLogo;
+
     const navigation = useNavigationController();
 
     const breadcrumbs = useBreadcrumbsController();
@@ -134,7 +145,7 @@ export const DefaultAppBar = function DefaultAppBar({
                 </Link>
             </div>}
 
-            {breadcrumbs.breadcrumbs && <div className="mr-8 hidden lg:block">
+            {(breadcrumbs.breadcrumbs ?? []).length > 0 && <div className="mr-8 hidden lg:block">
                 <div className={"flex flex-row gap-2"}>
                     {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
                         return <React.Fragment key={breadcrumb.url + "_" + index}>
@@ -176,7 +187,8 @@ export const DefaultAppBar = function DefaultAppBar({
                     </IconButton>}>
                     <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"}/> Dark</MenuItem>
                     <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"}/> Light </MenuItem>
-                    <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon size={"smallest"}/>System</MenuItem>
+                    <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
+                        size={"smallest"}/>System</MenuItem>
                 </Menu>}
 
             <Menu trigger={avatarComponent}>

package/src/core/FireCMS.tsx

@@ -33,7 +33,7 @@ import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 
  * @group Core
  */
-export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
+export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
 
     const {
         children,

package/src/types/firecms.tsx

@@ -47,7 +47,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @group Models
  */
-export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
+export type FireCMSProps<USER extends User> = {
 
     /**
      * Use this function to return the components you want to render under