Moved mainContentBodyRef to context (#69)

Author: neolusc

CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### dependabot: \#68 Bump the github-actions group with 5 updates
 
+### Removed
+
+- :boom: The property `mainContentBodyRef` from `PanelSideBarLayout`.
+
+### Added
+
+- The ref `mainContentBodyRef` exposed to through the context to be used to control the main content body behaviour (e.g. scroll to top on page change).
+
 ## [4.3.0] - 2024-10-23
 
 ### Added

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx

@@ -1,4 +1,4 @@
-import React, { Context, createContext, useContext, useEffect, useMemo, useState } from "react";
+import React, { Context, createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { getActivePanel, getActivePanelParentsIds } from "../Utils/getActivePanel";
 import { PanelSideBarContextProps } from "./PanelSideBarContextProps";
 import { getHiddenPanelIds, getPreExpandedMenuItems } from "../Utils/panelUtils";
@@ -36,6 +36,7 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
     renderFirstItemsLevelAsTiles = true,
     theme = "blue",
   } = props;
+  const mainContentBodyRef = useRef<HTMLElement>(null);
   const menuItems = useMemo(() => defaultMenuItems, [defaultMenuItems]);
   const [isSidebarOpen, setIsSidebarOpen] = useState(sidebarOpenByDefault);
   const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
@@ -106,6 +107,7 @@ export const PanelSideBarProvider = <TPanelItemId extends string, TPanelItem>(
         closeMenuItems,
         hiddenMenuItemIds,
         setHiddenMenuItemsIds,
+        mainContentBodyRef,
       }}
     >
       {children}

src/lib/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContextProps.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { PanelItem } from "../Definitions/PanelItem";
 import { PanelLinkRenderer } from "../Definitions/PanelLinkRenderer";
 import { MenuItemToggleFn } from "./PanelSideBarContext";
@@ -87,4 +87,9 @@ export interface PanelSideBarContextProps<TPanelItemId extends string, TPanelIte
    * @param includeActivePanel whether needs to include the active panel
    */
   closeMenuItems: (panelItemIds: TPanelItemId[], includeActivePanel?: boolean) => void;
+
+  /**
+   * the main content body ref
+   */
+  mainContentBodyRef: MutableRefObject<HTMLElement | null>;
 }

src/lib/Layout/PanelSideBarLayout/PanelSideBarLayout.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { MutableRefObject, PropsWithChildren, ReactNode, useMemo } from "react";
+import { PropsWithChildren, ReactNode, useMemo } from "react";
 import "../../../../styles/Layout/index.scss";
 import { PanelSideBar } from "./PanelSideBar/PanelSidebar";
 import { PanelSideBarLayoutContent } from "./PanelSideBarLayoutContent";
@@ -38,11 +38,6 @@ 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) => {
@@ -55,7 +50,6 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
     collapsible = true,
     useToggleButton = false,
     useResponsiveLayout = false,
-    mainContentBodyRef,
   } = props;
 
   const { isSidebarOpen, toggleSidebar, renderFirstItemsLevelAsTiles, menuItems, activePanelId } = usePanelSideBarContext<
@@ -97,11 +91,7 @@ export const PanelSideBarLayout = <TPanelItemId extends string, TPanelItem>(prop
             isIconShownOnSidebarCollapse={isIconShownOnSidebarCollapse}
           />
         )}
-        <PanelSideBarLayoutContent
-          footer={footer}
-          mainContentBodyRef={mainContentBodyRef}
-          isIconShownOnSidebarCollapse={isIconShownOnSidebarCollapse}
-        >
+        <PanelSideBarLayoutContent footer={footer} isIconShownOnSidebarCollapse={isIconShownOnSidebarCollapse}>
           {children}
         </PanelSideBarLayoutContent>
       </section>

src/lib/Layout/PanelSideBarLayout/PanelSideBarLayoutContent.tsx

@@ -1,14 +1,15 @@
 import classNames from "classnames";
-import { MutableRefObject, PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
+import { usePanelSideBarContext } from "./PanelSideBar/Context/PanelSideBarContext";
 
 interface PanelSideBarLayoutContentProps extends PropsWithChildren {
   footer?: ReactNode;
-  mainContentBodyRef?: MutableRefObject<HTMLElement | null>;
   isIconShownOnSidebarCollapse: boolean;
 }
 
 export const PanelSideBarLayoutContent = (props: PanelSideBarLayoutContentProps) => {
-  const { children, footer, mainContentBodyRef, isIconShownOnSidebarCollapse } = props;
+  const { children, footer, isIconShownOnSidebarCollapse } = props;
+  const { mainContentBodyRef } = usePanelSideBarContext();
 
   return (
     <section