[PF-] Fix Picasso Root Context

packages/base/Drawer/src/Drawer/Drawer.tsx

@@ -2,17 +2,14 @@ import React, { useRef } from 'react'
 import { Modal } from '@mui/base/Modal'
 import cx from 'classnames'
 import type { BaseProps, TransitionProps } from '@toptal/picasso-shared'
-import { useDrawer, usePicassoRoot } from '@toptal/picasso-provider'
+import { usePicassoRoot } from '@toptal/picasso-provider'
 import type { ReactNode } from 'react'
 import { CloseMinor16 } from '@toptal/picasso-icons'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Slide } from '@toptal/picasso-slide'
 import { Backdrop } from '@toptal/picasso-backdrop'
 import { Container } from '@toptal/picasso-container'
-import {
-  useIsomorphicLayoutEffect,
-  usePageScrollLock,
-} from '@toptal/picasso-utils'
+import { usePageScrollLock } from '@toptal/picasso-utils'
 
 import type { AnchorType, WidthType } from '../types'
 import { DrawerTitle } from '../DrawerTitle'
@@ -76,22 +73,11 @@ export const Drawer = (props: Props) => {
     'data-testid': testId,
     'data-private': dataPrivate,
   } = props
-  const { setHasDrawer } = useDrawer()
   const container = usePicassoRoot()
   const ref = useRef<HTMLDivElement>(null)
 
   usePageScrollLock(Boolean(maintainBodyScrollLock && open))
 
-  useIsomorphicLayoutEffect(() => {
-    setHasDrawer(open)
-
-    const cleanup = () => {
-      setHasDrawer(false)
-    }
-
-    return cleanup
-  }, [open, setHasDrawer])
-
   const handleOnClose = () => {
     if (onClose) {
       onClose()

packages/base/Page/src/Page/Page.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useContext, useState } from 'react'
 import type { Theme } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/core/styles'
 import cx from 'classnames'
@@ -21,7 +21,50 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   hamburgerId?: string
 }
 
-export const PageContext = React.createContext<PageContextProps>({})
+export const PageContext = React.createContext<PageContextProps>({
+  hasSidebar: false,
+  setHasSidebar: () => {},
+  hasTopBar: false,
+  setHasTopBar: () => {},
+})
+
+export const usePageContext = (): PageContextProps => {
+  const {
+    hasSidebar,
+    setHasSidebar,
+    width,
+    fullWidth,
+    hasTopBar,
+    setHasTopBar,
+  } = useContext(PageContext)
+
+  return {
+    width,
+    fullWidth,
+    hasSidebar,
+    setHasSidebar,
+    hasTopBar,
+    setHasTopBar,
+  }
+}
+
+export const useSidebar = () => {
+  const { hasSidebar, setHasSidebar } = useContext(PageContext)
+
+  return {
+    hasSidebar,
+    setHasSidebar,
+  }
+}
+
+export const usePageTopBar = () => {
+  const { hasTopBar, setHasTopBar } = useContext(PageContext)
+
+  return {
+    hasTopBar,
+    setHasTopBar,
+  }
+}
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'Page',
@@ -43,6 +86,9 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
   } = props
   const classes = useStyles()
 
+  const [hasSidebar, setHasSidebar] = useState(false)
+  const [hasTopBar, setHasTopBar] = useState(false)
+
   return (
     <div
       {...rest}
@@ -55,7 +101,16 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
       )}
       style={{ ...style } as React.CSSProperties}
     >
-      <PageContext.Provider value={{ width, fullWidth }}>
+      <PageContext.Provider
+        value={{
+          width,
+          fullWidth,
+          hasSidebar,
+          setHasSidebar,
+          hasTopBar,
+          setHasTopBar,
+        }}
+      >
         <PageHamburgerContextProvider hamburgerId={hamburgerId}>
           {children}
         </PageHamburgerContextProvider>

packages/base/Page/src/Page/types.ts

@@ -1,6 +1,13 @@
 export type ViewportWidthType = 'wide' | 'full'
 
-export interface PageContextProps {
+export type ViewportWidth = {
   fullWidth?: boolean
   width?: ViewportWidthType
 }
+
+export type PageContextProps = ViewportWidth & {
+  hasSidebar: boolean
+  setHasSidebar: (value: boolean) => void
+  hasTopBar: boolean
+  setHasTopBar: (value: boolean) => void
+}

packages/base/Page/src/PageContent/PageContent.tsx

@@ -1,11 +1,9 @@
 import type { ReactNode, HTMLAttributes } from 'react'
-import React, { useContext, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
-import { useSidebar } from '@toptal/picasso-provider'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { PageContext } from '../Page'
-import type { PageContextProps } from '../Page/types'
+import { usePageContext, useSidebar } from '../Page/Page'
 import { getMaxWidthClass } from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
@@ -19,7 +17,7 @@ export const PageContent = forwardRef<HTMLDivElement, Props>(
   function PageContent(props, ref) {
     const { children, className, style, flex, ...rest } = props
 
-    const { width, fullWidth } = useContext<PageContextProps>(PageContext)
+    const { width, fullWidth } = usePageContext()
     const { hasSidebar } = useSidebar()
 
     const innerClassName = twJoin(

packages/base/Page/src/PageContent/styles.ts

@@ -1,6 +1,6 @@
-import type { PageContextProps } from '../Page/types'
+import type { ViewportWidth } from '../Page/types'
 
-export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+export const getMaxWidthClass = ({ fullWidth, width }: ViewportWidth) => {
   if (fullWidth || width === 'full') {
     return 'max-w-full'
   }

packages/base/Page/src/PageFooter/PageFooter.tsx

@@ -1,11 +1,10 @@
 import type { ReactNode, HTMLAttributes } from 'react'
-import React, { useContext, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { PageContext } from '../Page'
-import type { PageContextProps } from '../Page/types'
 import { getMaxWidthClass } from './styles'
+import { usePageContext } from '../Page/Page'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
   /** Content for copyright. You can override default if needed. */
@@ -19,7 +18,7 @@ export const PageFooter = forwardRef<HTMLElement, Props>(function PageFooter(
   ref
 ) {
   const { className, style, rightContent, copyrightContent, ...rest } = props
-  const { width, fullWidth } = useContext<PageContextProps>(PageContext)
+  const { width, fullWidth } = usePageContext()
 
   const contentClassnames = twJoin(
     getMaxWidthClass({ width, fullWidth }),

packages/base/Page/src/PageFooter/styles.ts

@@ -1,6 +1,6 @@
-import type { PageContextProps } from '../Page/types'
+import type { ViewportWidth } from '../Page/types'
 
-export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+export const getMaxWidthClass = ({ fullWidth, width }: ViewportWidth) => {
   if (fullWidth || width === 'full') {
     return 'max-w-full'
   }

packages/base/Page/src/PageSidebar/PageSidebar.tsx

@@ -1,11 +1,11 @@
-import { useSidebar, usePageTopBar } from '@toptal/picasso-provider'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useCallback, useEffect, useState } from 'react'
 import { Container } from '@toptal/picasso-container'
 import { noop } from '@toptal/picasso-utils'
 
+import { useSidebar, usePageTopBar } from '../Page/Page'
 import { PageHamburgerPortal, useHamburgerContext } from '../PageHamburger'
 import { SidebarItem } from '../SidebarItem'
 import { SidebarLogo } from '../SidebarLogo'

packages/base/Page/src/PageTopBar/PageTopBar.tsx

@@ -4,8 +4,6 @@ import React, { useContext, forwardRef, useEffect } from 'react'
 import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
 import {
-  usePageTopBar,
-  useSidebar,
   usePreventPageWidthChangeOnScrollbar,
   useScreenSize,
 } from '@toptal/picasso-provider'
@@ -16,6 +14,7 @@ import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 import { useIsomorphicLayoutEffect } from '@toptal/picasso-utils'
 
+import { useSidebar, usePageTopBar } from '../Page/Page'
 import { PageContext } from '../Page'
 import type { PageContextProps } from '../Page'
 import {

packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
 
-import { useDrawer, usePageTopBar } from '../RootContext'
+//import { useDrawer, usePageTopBar } from '../RootContext'
 import styles from './styles'
 
 const useStyles = makeStyles<Theme>(styles, {
@@ -24,12 +24,12 @@ const NotificationsProvider = ({
   container,
   maxNotifications = 5,
 }: NotificationsProviderProps) => {
-  const { hasTopBar } = usePageTopBar()
-  const { hasDrawer } = useDrawer()
+  //const { hasTopBar } = usePageTopBar()
+  //const { hasDrawer } = useDrawer()
   const classes = useStyles()
 
-  const containerAnchorOriginTop =
-    hasTopBar && !hasDrawer ? classes.rootWithMargin : undefined
+  const containerAnchorOriginTop = undefined
+  //hasTopBar && !hasDrawer ? classes.rootWithMargin : undefined
 
   return (
     <SnackbarProvider

packages/picasso-provider/src/Picasso/PicassoGlobalStylesProvider.tsx

@@ -46,29 +46,8 @@ const PicassoGlobalStylesProvider = (
   const [contextValue, setContextValue] = useState<RootContextProps>({
     rootRef,
     currentBreakpointRange,
-    hasTopBar: false,
-    setHasTopBar: (hasTopBar: boolean) => {
-      setContextValue(context => ({
-        ...context,
-        hasTopBar,
-      }))
-    },
     environment,
     titleCase,
-    hasDrawer: false,
-    setHasDrawer: (hasDrawer: boolean) => {
-      setContextValue(context => ({
-        ...context,
-        hasDrawer,
-      }))
-    },
-    hasSidebar: false,
-    setHasSidebar: (hasSidebar: boolean) => {
-      setContextValue(context => ({
-        ...context,
-        hasSidebar,
-      }))
-    },
     disableTransitions,
     preventPageWidthChangeOnScrollbar,
   })

packages/picasso-provider/src/Picasso/RootContext.ts

@@ -6,27 +6,15 @@ import type { BreakpointKeys } from './config'
 
 export interface RootContextProps extends TextLabelProps {
   rootRef?: RefObject<HTMLDivElement>
-  hasTopBar: boolean
-  setHasTopBar: (value: boolean) => void
-  hasSidebar: boolean
-  setHasSidebar: (value: boolean) => void
   environment: EnvironmentType<'test' | 'temploy'>
-  hasDrawer: boolean
-  setHasDrawer: (value: boolean) => void
   disableTransitions?: boolean
   currentBreakpointRange?: BreakpointKeys
   preventPageWidthChangeOnScrollbar?: boolean
 }
 
 export const RootContext = React.createContext<RootContextProps>({
-  hasTopBar: false,
-  setHasTopBar: () => {},
-  hasSidebar: false,
-  setHasSidebar: () => {},
   environment: 'development',
   titleCase: false,
-  hasDrawer: false,
-  setHasDrawer: () => {},
   disableTransitions: false,
   currentBreakpointRange: undefined,
 })
@@ -37,33 +25,6 @@ export const usePicassoRoot = () => {
   return context && context.rootRef ? context.rootRef.current : null
 }
 
-export const usePageTopBar = () => {
-  const context = useContext(RootContext)
-
-  return {
-    hasTopBar: context.hasTopBar,
-    setHasTopBar: context.setHasTopBar,
-  }
-}
-
-export const useDrawer = () => {
-  const context = useContext(RootContext)
-
-  return {
-    hasDrawer: context.hasDrawer,
-    setHasDrawer: context.setHasDrawer,
-  }
-}
-
-export const useSidebar = () => {
-  const context = useContext(RootContext)
-
-  return {
-    hasSidebar: context.hasSidebar,
-    setHasSidebar: context.setHasSidebar,
-  }
-}
-
 export const useAppConfig = () => {
   const context = useContext(RootContext)
 

packages/picasso-provider/src/index.ts

@@ -44,10 +44,7 @@ export { default as PicassoProvider } from './Picasso/PicassoProvider'
 
 export {
   usePicassoRoot,
-  usePageTopBar,
   useAppConfig,
-  useDrawer,
-  useSidebar,
   useCurrentBreakpointRange,
   usePreventPageWidthChangeOnScrollbar,
   RootContext,