@etsoo/toolpad 1.0.9 → 1.0.11

package/build/shared/navigation.js

@@ -9,9 +9,13 @@ export function getPageItemFullPath(basePath, navigationItem) {
     return `${basePath}${basePath && !navigationItem.segment ? "" : "/"}${navigationItem.segment ?? ""}`;
 }
 export function isPageItemSelected(navigationItem, basePath, pathname) {
-    return navigationItem.pattern
-        ? pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname)
-        : getPageItemFullPath(basePath, navigationItem) === pathname;
+    if (navigationItem.pattern) {
+        return pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname);
+    }
+    if (navigationItem.subs) {
+        return navigationItem.subs.some((sub) => new RegExp(sub).test(pathname));
+    }
+    return getPageItemFullPath(basePath, navigationItem) === pathname;
 }
 export function hasSelectedNavigationChildren(navigationItem, basePath, pathname) {
     if (isPageItem(navigationItem) && navigationItem.children) {
@@ -109,11 +113,15 @@ function getItemLookup(navigation) {
 export function matchPath(navigation, path) {
     const lookup = getItemLookup(navigation);
     for (const [key, item] of lookup.entries()) {
-        if (typeof key === "string" && key === path) {
-            return item;
+        if (typeof key === "string") {
+            if (key === path)
+                return item;
+            else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
+                return item;
         }
-        if (key instanceof RegExp && key.test(path)) {
-            return item;
+        else if (key instanceof RegExp) {
+            if (key.test(path))
+                return item;
         }
     }
     return null;

package/build/useActivePage/useActivePage.d.ts

@@ -2,10 +2,7 @@ import type { Breadcrumb } from "../PageContainer";
 export interface ActivePage {
     title: string;
     path: string;
-    /**
-     * @deprecated Use `breadcrumbs` instead.
-     */
-    breadCrumbs: Breadcrumb[];
+    sourcePath: string;
     breadcrumbs: Breadcrumb[];
 }
 export declare function useActivePage(): ActivePage | null;

package/build/useActivePage/useActivePage.js

@@ -40,9 +40,8 @@ export function useActivePage() {
         return {
             title: getItemTitle(activeItem),
             path: getItemPath(navigationContext, activeItem),
-            breadcrumbs,
-            // TODO: Remove in the next major version
-            breadCrumbs: breadcrumbs
+            sourcePath: pathname,
+            breadcrumbs
         };
     }, [activeItem, rootItem, pathname, navigationContext]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/index.js",
@@ -50,7 +50,6 @@
     "@mui/utils": "6.3.1",
     "invariant": "2.2.4",
     "path-to-regexp": "6.3.0",
-    "prop-types": "15.8.1",
     "react": "^18.3.1"
   },
   "overrides": {
@@ -62,7 +61,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/invariant": "2.2.37",
-    "@types/prop-types": "15.7.14",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.4",

package/src/Account/Account.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import Button from "@mui/material/Button";
 import Popover from "@mui/material/Popover";
 import Divider from "@mui/material/Divider";
@@ -164,45 +163,4 @@ function Account(props: AccountProps) {
   );
 }
 
-Account.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The props used for each slot inside.
-   */
-  slotProps: PropTypes.shape({
-    popover: PropTypes.object,
-    popoverContent: PropTypes.object,
-    preview: PropTypes.shape({
-      handleClick: PropTypes.func,
-      open: PropTypes.bool,
-      slotProps: PropTypes.shape({
-        avatar: PropTypes.object,
-        avatarIconButton: PropTypes.object,
-        moreIconButton: PropTypes.object
-      }),
-      slots: PropTypes.shape({
-        avatar: PropTypes.elementType,
-        avatarIconButton: PropTypes.elementType,
-        moreIconButton: PropTypes.elementType
-      }),
-      variant: PropTypes.oneOf(["condensed", "expanded"])
-    }),
-    signInButton: PropTypes.object,
-    signOutButton: PropTypes.object
-  }),
-  /**
-   * The components used for each slot inside.
-   */
-  slots: PropTypes.shape({
-    popover: PropTypes.elementType,
-    popoverContent: PropTypes.elementType,
-    preview: PropTypes.elementType,
-    signInButton: PropTypes.elementType,
-    signOutButton: PropTypes.elementType
-  })
-} as any;
-
 export { Account };

package/src/Account/AccountPreview.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import Avatar, { AvatarProps } from "@mui/material/Avatar";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
@@ -172,41 +171,4 @@ function AccountPreview(props: AccountPreviewProps) {
   );
 }
 
-AccountPreview.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The handler used when the preview is expanded
-   */
-  handleClick: PropTypes.func,
-  /**
-   * The state of the Account popover
-   * @default false
-   */
-  open: PropTypes.bool,
-  /**
-   * The props used for each slot inside.
-   */
-  slotProps: PropTypes.shape({
-    avatar: PropTypes.object,
-    avatarIconButton: PropTypes.object,
-    moreIconButton: PropTypes.object
-  }),
-  /**
-   * The components used for each slot inside.
-   */
-  slots: PropTypes.shape({
-    avatar: PropTypes.elementType
-  }),
-  /**
-   * The type of account details to display.
-   * @property {'condensed'} condensed - Shows only the user's avatar.
-   * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
-   * @default 'condensed'
-   */
-  variant: PropTypes.oneOf(["condensed", "expanded"])
-} as any;
-
 export { AccountPreview };

package/src/AppProvider/AppProvider.tsx

@@ -22,7 +22,6 @@ export interface Router {
 
 export interface Branding {
   title?:
-    | string
     | React.ReactNode
     | [string, (handler: React.MouseEvent<HTMLSpanElement>) => void];
   logo?: React.ReactNode;
@@ -36,6 +35,7 @@ export interface NavigationPageItem {
   pattern?: string;
   action?: React.ReactNode;
   children?: Navigation;
+  subs?: string[];
 }
 
 export interface NavigationSubheaderItem {

package/src/AppProvider/AppProviderComponent.tsx

@@ -1,5 +1,4 @@
 "use client";
-import PropTypes from "prop-types";
 import {
   BrandingContext,
   NavigationContext,
@@ -69,98 +68,4 @@ function AppProvider(props: AppProviderProps) {
   );
 }
 
-AppProvider.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Authentication methods.
-   * @default null
-   */
-  authentication: PropTypes.shape({
-    signIn: PropTypes.func.isRequired,
-    signOut: PropTypes.func.isRequired
-  }),
-  /**
-   * Branding options for the app.
-   * @default null
-   */
-  branding: PropTypes.shape({
-    logo: PropTypes.node,
-    title: PropTypes.node
-  }),
-  /**
-   * The content of the app provider.
-   */
-  children: PropTypes.node,
-  /**
-   * Navigation definition for the app.
-   * @default []
-   */
-  navigation: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.shape({
-        action: PropTypes.node,
-        children: PropTypes.arrayOf(
-          PropTypes.oneOfType([
-            PropTypes.object,
-            PropTypes.shape({
-              kind: PropTypes.oneOf(["header"]).isRequired,
-              title: PropTypes.string.isRequired
-            }),
-            PropTypes.shape({
-              kind: PropTypes.oneOf(["divider"]).isRequired
-            })
-          ]).isRequired
-        ),
-        icon: PropTypes.node,
-        kind: PropTypes.oneOf(["page"]),
-        pattern: PropTypes.string,
-        segment: PropTypes.string,
-        title: PropTypes.string
-      }),
-      PropTypes.shape({
-        kind: PropTypes.oneOf(["header"]).isRequired,
-        title: PropTypes.string.isRequired
-      }),
-      PropTypes.shape({
-        kind: PropTypes.oneOf(["divider"]).isRequired
-      })
-    ]).isRequired
-  ),
-  /**
-   * Router implementation used inside Toolpad components.
-   * @default null
-   */
-  router: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    searchParams: PropTypes.instanceOf(URLSearchParams).isRequired
-  }),
-  /**
-   * Session info about the current user.
-   * @default null
-   */
-  session: PropTypes.shape({
-    user: PropTypes.shape({
-      email: PropTypes.string,
-      id: PropTypes.string,
-      image: PropTypes.string,
-      name: PropTypes.string
-    })
-  }),
-  /**
-   * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/customization/css-theme-variables/overview/) is recommended.
-   * @default createTheme()
-   */
-  theme: PropTypes.object,
-  /**
-   * The window where the application is rendered.
-   * This is needed when rendering the app inside an iframe, for example.
-   * @default window
-   */
-  window: PropTypes.object
-} as any;
-
 export { AppProvider };

package/src/DashboardLayout/DashboardLayout.tsx

@@ -1,6 +1,5 @@
 "use client";
 import * as React from "react";
-import PropTypes from "prop-types";
 import { styled, useTheme, type Theme, SxProps } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
@@ -9,12 +8,10 @@ import IconButton from "@mui/material/IconButton";
 import Stack from "@mui/material/Stack";
 import Toolbar from "@mui/material/Toolbar";
 import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type {} from "@mui/material/themeCssVarsAugmentation";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
-import { Link } from "../shared/Link";
 import { NavigationContext, WindowContext } from "../shared/context";
 import { Account, type AccountProps } from "../Account";
 import { DashboardSidebarSubNavigation } from "./DashboardSidebarSubNavigation";
@@ -456,88 +453,4 @@ function DashboardLayout(props: DashboardLayoutProps) {
   );
 }
 
-DashboardLayout.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the dashboard.
-   */
-  children: PropTypes.node,
-  /**
-   * Whether the sidebar should start collapsed in desktop size screens.
-   * @default false
-   */
-  defaultSidebarCollapsed: PropTypes.bool,
-  /**
-   * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
-   * @default false
-   */
-  disableCollapsibleSidebar: PropTypes.bool,
-  /**
-   * Whether the navigation bar and menu icon should be hidden
-   * @default false
-   */
-  hideNavigation: PropTypes.bool,
-  /**
-   * Width of the sidebar when expanded.
-   * @default 320
-   */
-  sidebarExpandedWidth: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    sidebarFooter: PropTypes.shape({
-      mini: PropTypes.bool.isRequired
-    }),
-    toolbarAccount: PropTypes.shape({
-      localeText: PropTypes.shape({
-        iconButtonAriaLabel: PropTypes.string,
-        signInLabel: PropTypes.string,
-        signOutLabel: PropTypes.string
-      }),
-      slotProps: PropTypes.shape({
-        popover: PropTypes.object,
-        popoverContent: PropTypes.object,
-        preview: PropTypes.object,
-        signInButton: PropTypes.object,
-        signOutButton: PropTypes.object
-      }),
-      slots: PropTypes.shape({
-        popover: PropTypes.elementType,
-        popoverContent: PropTypes.elementType,
-        preview: PropTypes.elementType,
-        signInButton: PropTypes.elementType,
-        signOutButton: PropTypes.elementType
-      })
-    }),
-    toolbarActions: PropTypes.object
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    sidebarFooter: PropTypes.elementType,
-    toolbarAccount: PropTypes.elementType,
-    toolbarActions: PropTypes.elementType
-  }),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
-    ),
-    PropTypes.func,
-    PropTypes.object
-  ])
-} as any;
-
 export { DashboardLayout };

package/src/DashboardLayout/DashboardSidebarSubNavigation.tsx

@@ -175,21 +175,10 @@ function DashboardSidebarSubNavigation({
 
         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 the item is selected, we don't want to select more
+        const isSelected = selectedItemId
+          ? false
+          : isPageItemSelected(navigationItem, basePath, pathname);
 
         if (isSelected && !selectedItemId) {
           selectedItemId = navigationItemId;

package/src/DashboardLayout/TitleBar.tsx

@@ -54,14 +54,16 @@ export function TitleBar() {
     return [title, false];
   }, [title]);
 
-  if (!hasLink) return titleUI;
-
-  return (
-    <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
-      <Stack direction="row" alignItems="center">
-        {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
-        {titleUI}
-      </Stack>
-    </Link>
-  );
+  if (hasLink) {
+    return (
+      <Link href="/" style={{ color: "inherit", textDecoration: "none" }}>
+        <Stack direction="row" alignItems="center">
+          {branding?.logo && <LogoContainer>{branding.logo}</LogoContainer>}
+          {titleUI}
+        </Stack>
+      </Link>
+    );
+  } else {
+    return titleUI;
+  }
 }

package/src/PageContainer/PageContainer.test.tsx

@@ -1,7 +1,7 @@
 import { expect, describe, test, vi } from "vitest";
-import { render, within, screen } from "@testing-library/react";
+import { render, within, screen, act } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import { PageContainer } from "./PageContainer";
+import { PageContainer, PageDataContextProvider } from "./PageContainer";
 import describeConformance from "../utils/describeConformance";
 import { AppProvider } from "../AppProvider/AppProviderComponent";
 
@@ -14,23 +14,28 @@ describe("PageContainer", () => {
   }));
 
   test("renders page container correctly", async () => {
-    const user = await userEvent.setup();
+    const user = 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>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          navigation={[
+            { segment: "", title: "Home" },
+            { segment: "orders", title: "Orders" }
+          ]}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
@@ -70,11 +75,20 @@ describe("PageContainer", () => {
     };
 
     const branding = { title: "ACME" };
-    render(
-      <AppProvider branding={branding} navigation={navigation} router={router}>
-        <PageContainer />
-      </AppProvider>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          branding={branding}
+          navigation={navigation}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
@@ -84,27 +98,33 @@ describe("PageContainer", () => {
   });
 
   test("renders dynamic correctly", async () => {
-    const user = await userEvent.setup();
+    const user = 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>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          navigation={[
+            { segment: "", title: "Home" },
+            { segment: "orders", title: "Orders", pattern: "orders/:id" }
+          ]}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
     const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
+
     await user.click(homeLink);
 
     expect(router.navigate).toHaveBeenCalledWith(
@@ -124,26 +144,31 @@ describe("PageContainer", () => {
       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>
-    );
+
+    act(() => {
+      render(
+        <AppProvider
+          navigation={[
+            {
+              segment: "users",
+              title: "Users",
+              children: [
+                {
+                  segment: "invoices",
+                  title: "Invoices",
+                  pattern: "invoices/:id"
+                }
+              ]
+            }
+          ]}
+          router={router}
+        >
+          <PageDataContextProvider>
+            <PageContainer />
+          </PageDataContextProvider>
+        </AppProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });
 
@@ -153,14 +178,18 @@ describe("PageContainer", () => {
   });
 
   test("renders custom breadcrumbs", async () => {
-    render(
-      <PageContainer
-        breadcrumbs={[
-          { title: "Hello", path: "/hello" },
-          { title: "World", path: "/world" }
-        ]}
-      />
-    );
+    act(() => {
+      render(
+        <PageDataContextProvider
+          breadcrumbs={[
+            { title: "Hello", path: "/hello" },
+            { title: "World", path: "/world" }
+          ]}
+        >
+          <PageContainer />
+        </PageDataContextProvider>
+      );
+    });
 
     const breadcrumbs = screen.getByRole("navigation", { name: "breadcrumb" });