@firecms/core 3.0.0-beta.11 → 3.0.0-beta.12

package/src/contexts/DialogsProvider.tsx

@@ -8,7 +8,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
     const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
     const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
 
-    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps<any>[]) => {
         dialogEntriesRef.current = newPanels;
         setDialogEntries(newPanels);
     };
@@ -23,7 +23,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
 
     }, [dialogEntries]);
 
-    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+    const open = useCallback(<T extends object = object>(dialogEntry: DialogControllerEntryProps<T>) => {
 
         const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
@@ -46,6 +46,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
                 key={`dialog_${i}`}
                 open={true}
                 closeDialog={close}
+                {...entry.props}
             />)}
         </DialogsControllerContext.Provider>
     );

package/src/contexts/ModeController.tsx

@@ -3,10 +3,8 @@ import { ModeController } from "../hooks";
 
 const DEFAULT_MODE_STATE: ModeController = {
     mode: "light",
-    setMode: (mode: "light" | "dark") => {
+    setMode: (mode: "light" | "dark" | "system") => {
     },
-    toggleMode: () => {
-    }
 };
 export const ModeControllerContext = React.createContext<ModeController>(DEFAULT_MODE_STATE);
 

package/src/core/DefaultAppBar.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
-import { Link as ReactLink, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
+    BrightnessMediumIcon,
     cls,
     DarkModeIcon,
     IconButton,
@@ -17,6 +18,7 @@ import {
 import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -65,10 +67,12 @@ export const DefaultAppBar = function DefaultAppBar({
     } = useApp();
     const navigation = useNavigationController();
 
+    const breadcrumbs = useBreadcrumbsController();
+
     const authController = useAuthController();
     const {
         mode,
-        toggleMode
+        setMode
     } = useModeController();
 
     const navigate = useNavigate();
@@ -108,8 +112,8 @@ export const DefaultAppBar = function DefaultAppBar({
                 className)}>
 
 
-            {navigation && <div className="mr-8 hidden lg:block">
-                <ReactLink
+            {navigation && <div className="mr-2 hidden lg:block">
+                <Link
                     className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
@@ -127,7 +131,28 @@ export const DefaultAppBar = function DefaultAppBar({
                             </Typography>
                             : title}
                     </div>
-                </ReactLink>
+                </Link>
+            </div>}
+
+            {breadcrumbs.breadcrumbs && <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}>
+                            <Typography variant={"caption"} color={"secondary"}>
+                                /
+                            </Typography>
+                            <Link
+                                key={index}
+                                className="visited:text-inherit visited:dark:text-inherit block"
+                                to={breadcrumb.url}
+                            >
+                                <Typography variant={"caption"} color={"secondary"}>
+                                    {breadcrumb.title}
+                                </Typography>
+                            </Link>
+                        </React.Fragment>;
+                    })}
+                </div>
             </div>}
 
             {startAdornment}
@@ -139,15 +164,20 @@ export const DefaultAppBar = function DefaultAppBar({
                     {endAdornment}
                 </ErrorBoundary>}
 
-            {includeModeToggle && <IconButton
-                color="inherit"
-                aria-label="Open drawer"
-                onClick={toggleMode}
-                size="large">
-                {mode === "dark"
-                    ? <DarkModeIcon/>
-                    : <LightModeIcon/>}
-            </IconButton>}
+            {includeModeToggle &&
+                <Menu
+                    trigger={<IconButton
+                        color="inherit"
+                        aria-label="Open drawer"
+                        size="large">
+                        {mode === "dark"
+                            ? <DarkModeIcon/>
+                            : <LightModeIcon/>}
+                    </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>
+                </Menu>}
 
             <Menu trigger={avatarComponent}>
                 {user && <div className={"px-4 py-2 mb-2"}>

package/src/core/DefaultDrawer.tsx

@@ -175,7 +175,7 @@ export function DrawerLogo({ logo }: {
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full transition-all",
+                           className={cls("max-w-full max-h-full transition-all object-contain",
                                drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}