apply last feedback

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

packages/core-components/api-report.md

@@ -1237,9 +1237,12 @@ export function SidebarPage(props: SidebarPageProps): JSX.Element;
 // @public (undocumented)
 export type SidebarPageClassKey = 'root';
 
-// Warning: (ae-missing-release-tag) "SidebarPinStateContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
+export type SidebarPageProps = {
+  children?: React_2.ReactNode;
+};
+
+// @public
 export const SidebarPinStateContext: React_2.Context<SidebarPinStateContextType>;
 
 // @public
@@ -2406,7 +2409,7 @@ export function TrendLine(
 // @public (undocumented)
 export function useContent(): {
   focusContent: () => void;
-  contentRef: React_2.MutableRefObject<HTMLDivElement | null> | undefined;
+  contentRef: React_2.MutableRefObject<HTMLElement | null> | undefined;
 };
 
 // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -18,15 +18,13 @@ import { makeStyles } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import classnames from 'classnames';
 
-import React, { useState, useContext, PropsWithChildren, useRef } from 'react';
+import React, { useState, useContext, useRef } from 'react';
 import Button from '@material-ui/core/Button';
 
 import { sidebarConfig, SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { SidebarPinStateContext, useContent } from './Page';
 import { MobileSidebar } from './MobileSidebar';
-import DoubleArrowRight from './icons/DoubleArrowRight';
-import DoubleArrowLeft from './icons/DoubleArrowLeft';
 
 /** @public */
 export type SidebarClassKey = 'drawer' | 'drawerOpen';
@@ -119,7 +117,6 @@ const DesktopSidebar = (props: SidebarProps) => {
   const { isPinned, toggleSidebarPinState } = useContext(
     SidebarPinStateContext,
   );
-  const { focusContent } = useLayoutContent();
 
   const handleOpen = () => {
     if (isPinned || disableExpandOnHover) {

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -18,10 +18,10 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import React, {
   createContext,
-  PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -94,7 +94,7 @@ export const SidebarPinStateContext = createContext<SidebarPinStateContextType>(
 
 type PageContextType = {
   content: {
-    contentRef?: React.MutableRefObject<HTMLDivElement | null>;
+    contentRef?: React.MutableRefObject<HTMLElement | null>;
   };
 };
 
@@ -110,9 +110,14 @@ export function SidebarPage(props: SidebarPageProps) {
 
   const contentRef = useRef(null);
 
-  const content = {
-    contentRef,
-  };
+  const pageContext = useMemo(
+    () => ({
+      content: {
+        contentRef,
+      },
+    }),
+    [contentRef],
+  );
 
   useEffect(() => {
     LocalStorage.setSidebarPinState(isPinned);
@@ -126,6 +131,7 @@ export function SidebarPage(props: SidebarPageProps) {
   const toggleSidebarPinState = () => setIsPinned(!isPinned);
 
   const classes = useStyles({ isPinned });
+
   return (
     <SidebarPinStateContext.Provider
       value={{
@@ -134,7 +140,7 @@ export function SidebarPage(props: SidebarPageProps) {
         isMobile,
       }}
     >
-      <PageContext.Provider value={{ content }}>
+      <PageContext.Provider value={pageContext}>
         <div className={classes.root}>{props.children}</div>
       </PageContext.Provider>
     </SidebarPinStateContext.Provider>