cleanup stories and context provicer

packages/react/src/SubNav/SubNav.features.stories.tsx

@@ -4,8 +4,6 @@ import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 import {linkTo} from '@storybook/addon-links'
 
 import {SubNav} from './SubNav'
-import bgPath from '../fixtures/images/background-stars.png'
-import {ThemeProvider} from '../ThemeProvider'
 import {Box} from '../Box'
 import {Hero} from '../Hero'
 import {Grid} from '../Grid'
@@ -63,15 +61,6 @@ export const DropdownVariant = ({hasShadow, ...args}) => (
 DropdownVariant.parameters = {
   layout: 'fullscreen',
 }
-DropdownVariant.decorators = [
-  Story => (
-    <ThemeProvider colorMode="dark">
-      <div style={{backgroundColor: 'black', height: '100%', minHeight: '100dvh', backgroundImage: `url(${bgPath})`}}>
-        <Story />
-      </div>
-    </ThemeProvider>
-  ),
-]
 
 export const NarrowDropdownVariant = args => <DropdownVariant {...args} />
 NarrowDropdownVariant.parameters = {
@@ -81,26 +70,8 @@ NarrowDropdownVariant.parameters = {
   },
 }
 
-NarrowDropdownVariant.decorators = [
-  Story => (
-    <ThemeProvider colorMode="dark">
-      <div style={{backgroundColor: 'black', height: '100%', minHeight: '100dvh', backgroundImage: `url(${bgPath})`}}>
-        <Story />
-      </div>
-    </ThemeProvider>
-  ),
-]
-
 export const NarrowDropdownVariantMenuOpen = args => <NarrowDropdownVariant {...args} />
-NarrowDropdownVariantMenuOpen.decorators = [
-  Story => (
-    <ThemeProvider colorMode="dark">
-      <div style={{backgroundColor: 'black', height: '100%', minHeight: '100dvh', backgroundImage: `url(${bgPath})`}}>
-        <Story />
-      </div>
-    </ThemeProvider>
-  ),
-]
+
 NarrowDropdownVariantMenuOpen.parameters = {
   layout: 'fullscreen',
   viewport: {
@@ -228,19 +199,31 @@ AnchorNavVariant.parameters = {
   layout: 'fullscreen',
 }
 
+const customViewports = {
+  Narrow: {
+    name: 'Narrow',
+    styles: {
+      width: '280px',
+      height: '600px',
+    },
+  },
+}
+
 export const NarrowAnchorNavVariant = args => <AnchorNavVariant {...args} />
 NarrowAnchorNavVariant.parameters = {
   layout: 'fullscreen',
   viewport: {
-    defaultViewport: 'iphonex',
+    viewports: customViewports,
+    defaultViewport: 'Narrow',
   },
 }
 
 export const NarrowAnchorNavVariantMenuOpen = args => <NarrowAnchorNavVariant {...args} />
 NarrowAnchorNavVariantMenuOpen.parameters = {
   layout: 'fullscreen',
   viewport: {
-    defaultViewport: 'iphonex',
+    viewports: customViewports,
+    defaultViewport: 'Narrow',
   },
 }
 NarrowAnchorNavVariantMenuOpen.play = async ({canvasElement}) => {

packages/react/src/SubNav/SubNav.tsx

@@ -62,9 +62,6 @@ const testIds = {
 
 type SubNavContextType = {
   portalRef: RefObject<HTMLDivElement>
-  isOpenAtNarrow: boolean
-  portalMounted: boolean
-  closeMenu: () => void
 }
 
 const SubNavContext = createContext<SubNavContextType | undefined>(undefined)
@@ -77,40 +74,14 @@ export const useSubNavContext = () => {
   return context
 }
 
-export type SubNavProps = {
-  hasShadow?: boolean
-  /**
-   * Allows the SubNav to be used at full width,
-   * removing any internal padding and guttering.
-   */
-  fullWidth?: boolean
-  'data-testid'?: string
-} & PropsWithChildren<BaseProps<HTMLElement>>
-
 function SubNavProvider({children}: {children: React.ReactNode}) {
   const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)
-  const [portalMounted, setPortalMounted] = useState(false)
-
-  const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)
-
-  const closeMenuCallback = useCallback(() => {
-    setIsOpenAtNarrow(false)
-  }, [])
-
-  useEffect(() => {
-    if (anchoredNavPortalRef.current) {
-      setPortalMounted(true)
-    }
-  }, [])
 
   const value = useMemo(
     () => ({
       portalRef: anchoredNavPortalRef,
-      portalMounted,
-      isOpenAtNarrow,
-      closeMenu: closeMenuCallback,
     }),
-    [portalMounted, isOpenAtNarrow, closeMenuCallback],
+    [],
   )
 
   useEffect(() => {
@@ -138,13 +109,23 @@ function SubNavProvider({children}: {children: React.ReactNode}) {
     <SubNavContext.Provider value={value}>
       {children}
 
-      <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavPortalRef}>
-        <div className={clsx(styles['SubNav__anchor-menu-container'])} />
+      <div className={styles['SubNav__anchor-menu-outer-container']}>
+        <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />
       </div>
     </SubNavContext.Provider>
   )
 }
 
+export type SubNavProps = {
+  hasShadow?: boolean
+  /**
+   * Allows the SubNav to be used at full width,
+   * removing any internal padding and guttering.
+   */
+  fullWidth?: boolean
+  'data-testid'?: string
+} & PropsWithChildren<BaseProps<HTMLElement>>
+
 const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullWidth, hasShadow}: SubNavProps) => {
   const rootRef = React.useRef<HTMLDivElement>(null)
   const navRef = React.useRef<HTMLElement>(null)
@@ -172,12 +153,12 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
   useFocusTrap({containerRef: overlayRef, restoreFocusOnCleanUp: true, disabled: !isOpenAtNarrow})
 
   useEffect(() => {
-    if (isOpenAtNarrow) {
+    if (isOpenAtNarrow && !isLarge) {
       document.body.style.overflow = 'hidden'
     } else {
       document.body.style.overflow = 'auto'
     }
-  }, [isOpenAtNarrow])
+  }, [isOpenAtNarrow, isLarge])
 
   const activeLink = memoizedChildren.find(child => {
     if (isValidElement(child)) {
@@ -570,12 +551,14 @@ function _SubMenu({children, className, variant = 'dropdown', ...props}: SubMenu
       context.portalRef.current,
     )
   } else {
+    const Tag = isLarge ? ThemeProvider : React.Fragment
+
     return (
-      <ThemeProvider colorMode={isLarge ? 'light' : 'dark'}>
+      <Tag colorMode={isLarge ? 'light' : 'dark'}>
         <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>
           {children}
         </ul>
-      </ThemeProvider>
+      </Tag>
     )
   }
 }