@etsoo/toolpad 1.0.0

package/src/DashboardLayout/DashboardSidebarSubNavigation.tsx

@@ -0,0 +1,301 @@
+"use client";
+import * as React from "react";
+import { styled } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
+import Collapse from "@mui/material/Collapse";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import Tooltip from "@mui/material/Tooltip";
+import type {} from "@mui/material/themeCssVarsAugmentation";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Link } from "../shared/Link";
+import { RouterContext } from "../shared/context";
+import type { Navigation } from "../AppProvider";
+import {
+  getItemTitle,
+  getPageItemFullPath,
+  hasSelectedNavigationChildren,
+  isPageItemSelected
+} from "../shared/navigation";
+import { getDrawerSxTransitionMixin } from "./utils";
+
+const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
+  borderRadius: 8,
+  "&.Mui-selected": {
+    "& .MuiListItemIcon-root": {
+      color: (theme.vars ?? theme).palette.primary.dark
+    },
+    "& .MuiTypography-root": {
+      color: (theme.vars ?? theme).palette.primary.dark
+    },
+    "& .MuiSvgIcon-root": {
+      color: (theme.vars ?? theme).palette.primary.dark
+    },
+    "& .MuiAvatar-root": {
+      backgroundColor: (theme.vars ?? theme).palette.primary.dark
+    },
+    "& .MuiTouchRipple-child": {
+      backgroundColor: (theme.vars ?? theme).palette.primary.dark
+    }
+  },
+  "& .MuiSvgIcon-root": {
+    color: (theme.vars ?? theme).palette.action.active
+  },
+  "& .MuiAvatar-root": {
+    backgroundColor: (theme.vars ?? theme).palette.action.active
+  }
+}));
+
+interface DashboardSidebarSubNavigationProps {
+  subNavigation: Navigation;
+  basePath?: string;
+  depth?: number;
+  onLinkClick: () => void;
+  isMini?: boolean;
+  isFullyExpanded?: boolean;
+  hasDrawerTransitions?: boolean;
+  selectedItemId: string;
+}
+
+/**
+ * @ignore - internal component.
+ */
+function DashboardSidebarSubNavigation({
+  subNavigation,
+  basePath = "",
+  depth = 0,
+  onLinkClick,
+  isMini = false,
+  isFullyExpanded = true,
+  hasDrawerTransitions = false,
+  selectedItemId
+}: DashboardSidebarSubNavigationProps) {
+  const routerContext = React.useContext(RouterContext);
+
+  const pathname = routerContext?.pathname ?? "/";
+
+  const initialExpandedSidebarItemIds = React.useMemo(
+    () =>
+      subNavigation
+        .map((navigationItem, navigationItemIndex) => ({
+          navigationItem,
+          originalIndex: navigationItemIndex
+        }))
+        .filter(({ navigationItem }) =>
+          hasSelectedNavigationChildren(navigationItem, basePath, pathname)
+        )
+        .map(({ originalIndex }) => `${depth}-${originalIndex}`),
+    [basePath, depth, pathname, subNavigation]
+  );
+
+  const [expandedSidebarItemIds, setExpandedSidebarItemIds] = React.useState(
+    initialExpandedSidebarItemIds
+  );
+
+  const handleOpenFolderClick = React.useCallback(
+    (itemId: string) => () => {
+      setExpandedSidebarItemIds((previousValue) =>
+        previousValue.includes(itemId)
+          ? previousValue.filter(
+              (previousValueItemId) => previousValueItemId !== itemId
+            )
+          : [...previousValue, itemId]
+      );
+    },
+    []
+  );
+
+  return (
+    <List sx={{ padding: 0, mb: depth === 0 ? 4 : 1, pl: 2 * depth }}>
+      {subNavigation.map((navigationItem, navigationItemIndex) => {
+        if (navigationItem.kind === "header") {
+          return (
+            <ListSubheader
+              key={`subheader-${depth}-${navigationItemIndex}`}
+              component="div"
+              sx={{
+                fontSize: 12,
+                fontWeight: "700",
+                height: isMini ? 0 : 40,
+                ...(hasDrawerTransitions
+                  ? getDrawerSxTransitionMixin(isFullyExpanded, "height")
+                  : {}),
+                px: 2,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                zIndex: 2
+              }}
+            >
+              {getItemTitle(navigationItem)}
+            </ListSubheader>
+          );
+        }
+
+        if (navigationItem.kind === "divider") {
+          const nextItem = subNavigation[navigationItemIndex + 1];
+
+          return (
+            <Divider
+              key={`divider-${depth}-${navigationItemIndex}`}
+              sx={{
+                borderBottomWidth: 2,
+                mx: 1,
+                mt: 1,
+                mb: nextItem?.kind === "header" && !isMini ? 0 : 1,
+                ...(hasDrawerTransitions
+                  ? getDrawerSxTransitionMixin(isFullyExpanded, "margin")
+                  : {})
+              }}
+            />
+          );
+        }
+
+        const navigationItemFullPath = getPageItemFullPath(
+          basePath,
+          navigationItem
+        );
+        const navigationItemId = `${depth}-${navigationItemIndex}`;
+        const navigationItemTitle = getItemTitle(navigationItem);
+
+        const isNestedNavigationExpanded =
+          expandedSidebarItemIds.includes(navigationItemId);
+
+        const nestedNavigationCollapseIcon = isNestedNavigationExpanded ? (
+          <ExpandLessIcon />
+        ) : (
+          <ExpandMoreIcon />
+        );
+
+        const listItemIconSize = 34;
+
+        const isSelected = isPageItemSelected(
+          navigationItem,
+          basePath,
+          pathname
+        );
+
+        if (
+          process.env.NODE_ENV !== "production" &&
+          isSelected &&
+          selectedItemId
+        ) {
+          console.warn(
+            `Duplicate selected path in navigation: ${navigationItemFullPath}`
+          );
+        }
+
+        if (isSelected && !selectedItemId) {
+          selectedItemId = navigationItemId;
+        }
+
+        const listItem = (
+          <ListItem
+            sx={{
+              py: 0,
+              px: 1,
+              overflowX: "hidden"
+            }}
+          >
+            <NavigationListItemButton
+              selected={isSelected && (!navigationItem.children || isMini)}
+              sx={{
+                px: 1.4,
+                height: 48
+              }}
+              {...(navigationItem.children && !isMini
+                ? {
+                    onClick: handleOpenFolderClick(navigationItemId)
+                  }
+                : {
+                    LinkComponent: Link,
+                    href: navigationItemFullPath,
+                    onClick: onLinkClick
+                  })}
+            >
+              {navigationItem.icon || isMini ? (
+                <ListItemIcon
+                  sx={{
+                    minWidth: listItemIconSize,
+                    mr: 1.2
+                  }}
+                >
+                  {navigationItem.icon ?? null}
+                  {!navigationItem.icon && isMini ? (
+                    <Avatar
+                      sx={{
+                        width: listItemIconSize - 7,
+                        height: listItemIconSize - 7,
+                        fontSize: 12,
+                        ml: "-2px"
+                      }}
+                    >
+                      {navigationItemTitle
+                        .split(" ")
+                        .slice(0, 2)
+                        .map((itemTitleWord) =>
+                          itemTitleWord.charAt(0).toUpperCase()
+                        )}
+                    </Avatar>
+                  ) : null}
+                </ListItemIcon>
+              ) : null}
+              <ListItemText
+                primary={navigationItemTitle}
+                sx={{
+                  whiteSpace: "nowrap",
+                  zIndex: 1,
+                  "& .MuiTypography-root": {
+                    fontWeight: "500"
+                  }
+                }}
+              />
+              {navigationItem.action && !isMini && isFullyExpanded
+                ? navigationItem.action
+                : null}
+              {navigationItem.children && !isMini && isFullyExpanded
+                ? nestedNavigationCollapseIcon
+                : null}
+            </NavigationListItemButton>
+          </ListItem>
+        );
+
+        return (
+          <React.Fragment key={navigationItemId}>
+            {isMini ? (
+              <Tooltip title={navigationItemTitle} placement="right">
+                {listItem}
+              </Tooltip>
+            ) : (
+              listItem
+            )}
+
+            {navigationItem.children && !isMini ? (
+              <Collapse
+                in={isNestedNavigationExpanded}
+                timeout="auto"
+                unmountOnExit
+              >
+                <DashboardSidebarSubNavigation
+                  subNavigation={navigationItem.children}
+                  basePath={navigationItemFullPath}
+                  depth={depth + 1}
+                  onLinkClick={onLinkClick}
+                  selectedItemId={selectedItemId}
+                />
+              </Collapse>
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </List>
+  );
+}
+
+export { DashboardSidebarSubNavigation };

package/src/DashboardLayout/ThemeSwitcher.tsx

@@ -0,0 +1,81 @@
+"use client";
+import * as React from "react";
+import { useTheme } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import { PaletteModeContext } from "../shared/context";
+import useSsr from "../utils/hooks/useSsr";
+
+// TODO: When we use this component as the default for a slot, make it non-internal
+/**
+ * @ignore - internal component.
+ */
+function ThemeSwitcher() {
+  const isSsr = useSsr();
+  const theme = useTheme();
+
+  const { paletteMode, setPaletteMode, isDualTheme } =
+    React.useContext(PaletteModeContext);
+
+  const toggleMode = React.useCallback(() => {
+    setPaletteMode(paletteMode === "dark" ? "light" : "dark");
+  }, [paletteMode, setPaletteMode]);
+
+  return isDualTheme ? (
+    <Tooltip
+      title={
+        isSsr
+          ? "Switch mode"
+          : `${paletteMode === "dark" ? "Light" : "Dark"} mode`
+      }
+      enterDelay={1000}
+    >
+      <div>
+        <IconButton
+          aria-label={
+            isSsr
+              ? "Switch theme mode"
+              : `Switch to ${paletteMode === "dark" ? "light" : "dark"} mode`
+          }
+          onClick={toggleMode}
+          sx={{
+            color: (theme.vars ?? theme).palette.primary.dark
+          }}
+        >
+          {theme.getColorSchemeSelector ? (
+            <React.Fragment>
+              <DarkModeIcon
+                sx={{
+                  display: "inline",
+                  [theme.getColorSchemeSelector("dark")]: {
+                    display: "none"
+                  }
+                }}
+              />
+              <LightModeIcon
+                sx={{
+                  display: "none",
+                  [theme.getColorSchemeSelector("dark")]: {
+                    display: "inline"
+                  }
+                }}
+              />
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              {isSsr || paletteMode !== "dark" ? (
+                <DarkModeIcon />
+              ) : (
+                <LightModeIcon />
+              )}
+            </React.Fragment>
+          )}
+        </IconButton>
+      </div>
+    </Tooltip>
+  ) : null;
+}
+
+export { ThemeSwitcher };

package/src/DashboardLayout/ToolbarActions.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+// TODO: When we add content to this component, make it non-internal
+/**
+ * @ignore - internal component.
+ */
+function ToolbarActions() {
+  return null;
+}
+
+export { ToolbarActions };

package/src/DashboardLayout/index.ts

@@ -0,0 +1,4 @@
+export * from "./DashboardLayout";
+
+// Default slots components
+export * from "./ToolbarActions";

package/src/DashboardLayout/utils.ts

@@ -0,0 +1,23 @@
+import type { Theme } from "@mui/material";
+
+export function getDrawerSxTransitionMixin(
+  isExpanded: boolean,
+  property: string
+) {
+  return {
+    transition: (theme: Theme) =>
+      theme.transitions.create(property, {
+        easing: theme.transitions.easing.sharp,
+        duration: isExpanded
+          ? theme.transitions.duration.enteringScreen
+          : theme.transitions.duration.leavingScreen
+      })
+  };
+}
+
+export function getDrawerWidthTransitionMixin(isExpanded: boolean) {
+  return {
+    ...getDrawerSxTransitionMixin(isExpanded, "width"),
+    overflowX: "hidden"
+  };
+}

package/src/PageContainer/PageContainer.test.tsx

@@ -0,0 +1,194 @@
+import { expect, describe, test, vi } from "vitest";
+import { render, within, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { PageContainer } from "./PageContainer";
+import describeConformance from "../utils/describeConformance";
+import { AppProvider } from "../AppProvider/AppProviderComponent";
+
+describe("PageContainer", () => {
+  describeConformance(<PageContainer />, () => ({
+    skip: ["themeDefaultProps"],
+    slots: {
+      toolbar: {}
+    }
+  }));
+
+  test("renders page container correctly", async () => {
+    const user = await userEvent.setup();
+    const router = {
+      pathname: "/orders",
+      searchParams: new URLSearchParams(),
+      navigate: vi.fn()
+    };
+    render(
+      <AppProvider
+        navigation={[
+          { segment: "", title: "Home" },
+          { segment: "orders", title: "Orders" }
+        ]}
+        router={router}
+      >
+        <PageContainer />
+      </AppProvider>
+    );
+
+    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+
+    const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
+    await user.click(homeLink);
+
+    expect(router.navigate).toHaveBeenCalledWith(
+      "/",
+      expect.objectContaining({})
+    );
+    router.navigate.mockClear();
+
+    expect(within(breadcrumbs).getByText("Orders")).toBeTruthy();
+
+    expect(screen.getByText("Orders", { ignore: "nav *" }));
+  });
+
+  test("renders nested", async () => {
+    const navigation = [
+      { segment: "", title: "ACME" },
+      {
+        segment: "home",
+        title: "Home",
+        children: [
+          {
+            segment: "orders",
+            title: "Orders"
+          }
+        ]
+      }
+    ];
+
+    const router = {
+      pathname: "/home/orders",
+      searchParams: new URLSearchParams(),
+      navigate: vi.fn()
+    };
+
+    const branding = { title: "ACME" };
+    render(
+      <AppProvider branding={branding} navigation={navigation} router={router}>
+        <PageContainer />
+      </AppProvider>
+    );
+
+    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+
+    expect(within(breadcrumbs).getByText("ACME")).toBeTruthy();
+    expect(within(breadcrumbs).getByText("Home")).toBeTruthy();
+    expect(within(breadcrumbs).getByText("Orders")).toBeTruthy();
+  });
+
+  test("renders dynamic correctly", async () => {
+    const user = await userEvent.setup();
+    const router = {
+      pathname: "/orders/123",
+      searchParams: new URLSearchParams(),
+      navigate: vi.fn()
+    };
+    render(
+      <AppProvider
+        navigation={[
+          { segment: "", title: "Home" },
+          { segment: "orders", title: "Orders", pattern: "orders/:id" }
+        ]}
+        router={router}
+      >
+        <PageContainer />
+      </AppProvider>
+    );
+
+    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+
+    const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
+    await user.click(homeLink);
+
+    expect(router.navigate).toHaveBeenCalledWith(
+      "/",
+      expect.objectContaining({})
+    );
+    router.navigate.mockClear();
+
+    expect(within(breadcrumbs).getByText("Orders")).toBeTruthy();
+
+    expect(screen.getByText("Orders", { ignore: "nav *" }));
+  });
+
+  test("renders nested dynamic correctly", async () => {
+    const router = {
+      pathname: "/users/invoices/123",
+      searchParams: new URLSearchParams(),
+      navigate: vi.fn()
+    };
+    render(
+      <AppProvider
+        navigation={[
+          {
+            segment: "users",
+            title: "Users",
+            children: [
+              {
+                segment: "invoices",
+                title: "Invoices",
+                pattern: "invoices/:id"
+              }
+            ]
+          }
+        ]}
+        router={router}
+      >
+        <PageContainer />
+      </AppProvider>
+    );
+
+    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+
+    const homeLink = within(breadcrumbs).getByRole("link", { name: "Users" });
+    expect(homeLink.getAttribute("href")).toBe("/users");
+    expect(within(breadcrumbs).getByText("Invoices")).toBeTruthy();
+  });
+
+  test("renders custom breadcrumbs", async () => {
+    render(
+      <PageContainer
+        breadcrumbs={[
+          { title: "Hello", path: "/hello" },
+          { title: "World", path: "/world" }
+        ]}
+      />
+    );
+
+    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+
+    const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
+    expect(helloLink.getAttribute("href")).toBe("/hello");
+    expect(within(breadcrumbs).getByText("World")).toBeTruthy();
+  });
+
+  // TODO: Remove in the next major version
+  test("renders legacy breadcrumbs prop", async () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    render(
+      <PageContainer
+        breadCrumbs={[
+          { title: "Hello", path: "/hello" },
+          { title: "World", path: "/world" }
+        ]}
+      />
+    );
+
+    const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
+
+    const helloLink = within(breadcrumbs).getByRole("link", { name: "Hello" });
+    expect(helloLink.getAttribute("href")).toBe("/hello");
+    expect(within(breadcrumbs).getByText("World")).toBeTruthy();
+    expect(console.warn).toHaveBeenCalledOnce();
+    expect(console.warn).toHaveBeenCalledWith(
+      "The PageContainer `breadCrumbs` prop is deprecated. Use `breadcrumbs` instead."
+    );
+  });
+});