x

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Expose `mainContentBodyRef` in order to control main body behaviour (e.g. scroll to top on page change)
+
 ## [4.1.1] - 2024-07-18
 
 ### Fixed

src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { PropsWithChildren, ReactNode } from "react";
+import { MutableRefObject, PropsWithChildren, ReactNode } from "react";
 import "../../../../styles/Layout/index.scss";
 import { PanelSideBar } from "./PanelSideBar/PanelSidebar";
 import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent";
@@ -38,6 +38,11 @@ export interface PanelSideBarLayoutProps extends PropsWithChildren {
    * If use the responsive layout when the screen is sm in order to remove the sidebar overlay.
    */
   useResponsiveLayout?: boolean;
+
+  /**
+   * the main content body ref
+   */
+  mainContentBodyRef?: MutableRefObject<HTMLElement | null>;
 }
 
 export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(props: PanelSideBarLayoutProps) => {
@@ -50,6 +55,7 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
     collapsible = true,
     useToggleButton = false,
     useResponsiveLayout = false,
+    mainContentBodyRef,
   } = props;
 
   const { isSidebarOpen, toggleSidebar, renderFirstItemsLevelAsTiles } = usePanelSideBarContext<TPanelItemId, TPanelItem>();
@@ -76,7 +82,9 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
       >
         <PanelSideBar<TPanelItemId, TPanelItem> />
         {collapsible && !useToggleButton && <PanelSideBarToggle onClick={toggleSidebar} toggled={!isSidebarOpen} />}
-        <PanelSideBarLayoutContent footer={footer}>{children}</PanelSideBarLayoutContent>
+        <PanelSideBarLayoutContent footer={footer} mainContentBodyRef={mainContentBodyRef}>
+          {children}
+        </PanelSideBarLayoutContent>
       </section>
     </>
   );

src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx

@@ -1,14 +1,15 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { MutableRefObject, PropsWithChildren, ReactNode } from "react";
 
 interface PanelSideBarLayoutContentProps extends PropsWithChildren {
   footer?: ReactNode;
+  mainContentBodyRef?: MutableRefObject<HTMLElement | null>;
 }
 
 export const PanelSideBarLayoutContent = (props: PanelSideBarLayoutContentProps) => {
-  const { children, footer } = props;
+  const { children, footer, mainContentBodyRef } = props;
 
   return (
-    <section id="main-content-body" className="content">
+    <section ref={mainContentBodyRef} id="main-content-body" className="content">
       <main className="container-fluid">{children}</main>
       <footer hidden={!footer} className="py-4 bg-light mt-auto">
         <div className="mx-4">