@etsoo/toolpad 1.0.9 → 1.0.11

package/src/PageContainer/PageContainer.tsx

@@ -1,6 +1,5 @@
 "use client";
 import * as React from "react";
-import PropTypes from "prop-types";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Container, { ContainerProps } from "@mui/material/Container";
 import Link from "@mui/material/Link";
@@ -46,32 +45,62 @@ export interface Breadcrumb {
   path: string;
 }
 
-// TODO: Remove in the next major version
-/**
- * @deprecated Use `Breadcrumb` instead.
- */
-export type BreadCrumb = Breadcrumb;
-
-export interface PageContainerProps extends ContainerProps {
-  children?: React.ReactNode;
-  /**
-   * The title of the page. Leave blank to use the active page title.
-   */
+export type PageData = {
   title?: string;
-  /**
-   * The breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
-   */
+  page?: string;
   breadcrumbs?: Breadcrumb[];
-  /**
-   * The components used for each slot inside.
-   */
-  slots?: PageContainerSlots;
-  /**
-   * The props used for each slot inside.
-   */
-  slotProps?: PageContainerSlotProps;
+};
+
+type PageDataAction = PageData | true;
+
+export const PageDataContext = React.createContext<{
+  state: PageData;
+  dispatch: React.Dispatch<PageDataAction>;
+}>({ state: {}, dispatch: (value) => value });
+
+function reducer(state: PageData, action: PageDataAction) {
+  if (action === true) {
+    // Reset the state
+    if (
+      state.breadcrumbs == null &&
+      state.title == null &&
+      state.page == null
+    ) {
+      return state;
+    } else {
+      return {};
+    }
+  }
+
+  return { ...state, ...action };
+}
+
+export function PageDataContextProvider(
+  props: React.PropsWithChildren<PageData>
+) {
+  // Destruct
+  const { title, breadcrumbs, ...rest } = props;
+
+  // useReducer hook to manage state with our reducer function and initial state
+  const [state, dispatch] = React.useReducer(reducer, { title, breadcrumbs });
+
+  // Provide the state and dispatch function to the context value
+  return <PageDataContext.Provider value={{ state, dispatch }} {...rest} />;
 }
 
+export type PageContainerProps = React.PropsWithChildren<
+  ContainerProps & {
+    /**
+     * The components used for each slot inside.
+     */
+    slots?: PageContainerSlots;
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps?: PageContainerSlotProps;
+  }
+>;
+
 /**
  * A container component to provide a title and breadcrumbs for your pages.
  *
@@ -84,13 +113,30 @@ export interface PageContainerProps extends ContainerProps {
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
  */
 function PageContainer(props: PageContainerProps) {
-  const { children, slots, slotProps, breadcrumbs, ...rest } = props;
+  const { children, slots, slotProps, ...rest } = props;
+
+  const loaded = React.useRef(false);
+  const { state, dispatch } = React.useContext(PageDataContext);
 
   const activePage = useActivePage();
 
-  // TODO: Remove `props.breadCrumbs` in the next major version
-  const resolvedBreadcrumbs = breadcrumbs ?? activePage?.breadcrumbs ?? [];
-  const title = props.title ?? activePage?.title ?? "";
+  React.useLayoutEffect(() => {
+    if (loaded.current) {
+      dispatch(true);
+    } else {
+      loaded.current = true;
+    }
+  }, [activePage?.sourcePath]);
+
+  let resolvedBreadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
+  const title = state.title ?? activePage?.title ?? "";
+
+  if (state.page) {
+    resolvedBreadcrumbs = [
+      ...resolvedBreadcrumbs,
+      { title: state.page, path: "#" }
+    ];
+  }
 
   const ToolbarComponent = props?.slots?.toolbar ?? PageContainerToolbar;
   const toolbarSlotProps = useSlotProps({
@@ -137,42 +183,4 @@ function PageContainer(props: PageContainerProps) {
   );
 }
 
-PageContainer.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 breadcrumbs of the page. Leave blank to use the active page breadcrumbs.
-   */
-  breadcrumbs: PropTypes.arrayOf(
-    PropTypes.shape({
-      path: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired
-    })
-  ),
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The props used for each slot inside.
-   */
-  slotProps: PropTypes.shape({
-    toolbar: PropTypes.shape({
-      children: PropTypes.node
-    }).isRequired
-  }),
-  /**
-   * The components used for each slot inside.
-   */
-  slots: PropTypes.shape({
-    toolbar: PropTypes.elementType
-  }),
-  /**
-   * The title of the page. Leave blank to use the active page title.
-   */
-  title: PropTypes.string
-} as any;
-
 export { PageContainer };

package/src/shared/navigation.tsx

@@ -32,9 +32,15 @@ export function isPageItemSelected(
   basePath: string,
   pathname: string
 ) {
-  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(
@@ -172,11 +178,12 @@ export function matchPath(
   const lookup = getItemLookup(navigation);
 
   for (const [key, item] of lookup.entries()) {
-    if (typeof key === "string" && key === path) {
-      return item;
-    }
-    if (key instanceof RegExp && key.test(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;
+    } else if (key instanceof RegExp) {
+      if (key.test(path)) return item;
     }
   }
 

package/src/useActivePage/useActivePage.ts

@@ -7,10 +7,7 @@ import type { Breadcrumb } from "../PageContainer";
 export interface ActivePage {
   title: string;
   path: string;
-  /**
-   * @deprecated Use `breadcrumbs` instead.
-   */
-  breadCrumbs: Breadcrumb[];
+  sourcePath: string;
   breadcrumbs: Breadcrumb[];
 }
 
@@ -58,9 +55,8 @@ export function useActivePage(): ActivePage | null {
     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]);
 }