@graphcommerce/next-ui 6.0.0-canary.20 → 6.0.0-canary.21

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.0-canary.21
+
+### Minor Changes
+
+- [#1806](https://github.com/graphcommerce-org/graphcommerce/pull/1806) [`597396766`](https://github.com/graphcommerce-org/graphcommerce/commit/597396766940de8c4ab5d8c84a0c6637ed72dba2) - - Put navigation HTML permanently in the DOM
+  - Fix issue where Navigation can't be reopened after closing, dragging or navigating
+  - Fix overlay visibility when browser is resized, or exactly 864px width ([@ErwinOtten](https://github.com/ErwinOtten))
+
 ## 6.0.0-canary.20
 
 ## 5.2.0-canary.19

package/Navigation/components/NavigationItem.tsx

@@ -113,7 +113,7 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           tabIndex={tabIndex}
           onClick={(e) => {
             e.preventDefault()
-            if (!isSelected && !(matchMedia.up('md') && animating.get())) {
+            if (!isSelected) {
               selection.set(itemPath)
             }
           }}

package/Navigation/components/NavigationOverlay.tsx

@@ -57,7 +57,8 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
     mouseEvent,
     itemPadding = 'md',
   } = props
-  const { selection, items, animating, closing, serverRenderDepth } = useNavigation()
+  const { selection, items, animating, closing, serverRenderDepth, animationDuration } =
+    useNavigation()
 
   const fabMarginY = `calc((${useFabSize('responsive')} - ${useIconSvgSize('large')}) * -0.5)`
   const itemPad = useTheme().spacings[itemPadding] ?? itemPadding
@@ -81,7 +82,9 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
 
   const afterClose = useEventCallback(() => {
     if (!closing.get()) return
-    closing.set(false)
+    setTimeout(() => {
+      closing.set(false)
+    }, animationDuration * 1000)
     selection.set(false)
   })
 
@@ -179,7 +182,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
               [theme.breakpoints.down('md')]: {
                 width:
                   sizeSm !== 'floating'
-                    ? `calc(${itemWidthSm} + ${selectedLevel}px)`
+                    ? itemWidthSm
                     : `calc(${itemWidthSm} - (${theme.page.horizontal} * 2))`,
                 minWidth: 200,
                 overflow: 'hidden',
@@ -187,19 +190,14 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                 '& .NavigationItem-item': {
                   width:
                     sizeSm !== 'floating'
-                      ? `calc(${itemWidthSm} - (${itemPad} * 2) + ${selectedLevel}px)`
+                      ? `calc(${itemWidthSm} - (${itemPad} * 2))`
                       : `calc(${itemWidthSm} - (${itemPad} * 2) - (${theme.page.horizontal} * 2))`,
                   minWidth: `calc(200px - (${itemPad} * 2))`,
                 },
               },
               [theme.breakpoints.up('md')]: {
                 '& .NavigationItem-item': {
-                  // eslint-disable-next-line no-nested-ternary
-                  width: itemWidthMd
-                    ? selectedLevel >= 1
-                      ? `calc(${itemWidthMd} + 1px)`
-                      : itemWidthMd
-                    : 'stretch',
+                  width: itemWidthMd || 'stretch',
                 },
               },
             }),

package/Navigation/components/NavigationProvider.tsx

@@ -54,8 +54,17 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
         )
         .filter(nonNullable),
       serverRenderDepth,
+      animationDuration,
     }),
-    [hideRootOnNavigate, selection, animating, closing, items, serverRenderDepth],
+    [
+      hideRootOnNavigate,
+      selection,
+      animating,
+      closing,
+      items,
+      serverRenderDepth,
+      animationDuration,
+    ],
   )
 
   return (

package/Navigation/hooks/useNavigation.ts

@@ -20,6 +20,7 @@ export type NavigationContextType = {
   animating: MotionValue<boolean>
   closing: MotionValue<boolean>
   serverRenderDepth: number
+  animationDuration: number
 }
 
 type NavigationNodeBase = {

package/Overlay/components/OverlayBase.tsx

@@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
 import { useOverlayPosition } from '../hooks/useOverlayPosition'
+import framesync from 'framesync'
 
 export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
 export type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
@@ -158,9 +159,10 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         scroller.scrollTop = positions.open.y.get()
       }
     }
+    const resizeTimed = () => framesync.read(resize)
 
-    window.addEventListener('resize', resize)
-    return () => window.removeEventListener('resize', resize)
+    window.addEventListener('resize', resizeTimed)
+    return () => window.removeEventListener('resize', resizeTimed)
   }, [position, positions, scrollerRef])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
@@ -341,7 +343,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
             [theme.breakpoints.down('md')]: {
               '&.variantSmLeft, &.variantSmRight': {
-                width: dvh(100),
+                width: dvw(100),
               },
               '&.variantSmBottom': {
                 height: dvh(100),
@@ -469,7 +471,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             })}
           >
             <LayoutProvider scroll={scrollYOffset}>
-              {active && (typeof children === 'function' ? children() : children)}
+              {typeof children === 'function' ? active && children() : children}
             </LayoutProvider>
           </MotionDiv>
         </Box>

package/Overlay/hooks/useOverlayPosition.ts

@@ -3,6 +3,7 @@ import { useConstant, useIsomorphicLayoutEffect } from '@graphcommerce/framer-ut
 import { motionValue } from 'framer-motion'
 import { useCallback, useEffect } from 'react'
 import { useMatchMedia } from '../../hooks'
+import framesync from 'framesync'
 
 const clampRound = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 100) / 100
 
@@ -34,27 +35,34 @@ export function useOverlayPosition(
 
     const measure = () => {
       const positions = getScrollSnapPositions()
+      const x = positions.x[positions.x.length - 1]
+      const y = positions.y[positions.y.length - 1]
 
       if (variant() === 'left') {
+        state.closed.x.set(x)
         state.open.x.set(0)
-        state.closed.x.set(positions.x[positions.x.length - 1] ?? 0)
       }
       if (variant() === 'right') {
-        state.open.x.set(positions.x[positions.x.length - 1] ?? 0)
+        state.open.x.set(x)
         state.closed.x.set(0)
       }
       if (variant() === 'bottom') {
-        state.open.y.set(positions.y[positions.y.length - 1] ?? 0)
+        state.open.y.set(y)
         state.closed.y.set(0)
       }
     }
+    const measureTimed = () => framesync.read(measure)
     measure()
 
-    const ro = new ResizeObserver(measure)
+    const ro = new ResizeObserver(measureTimed)
     ro.observe(scrollerRef.current)
     ;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
 
-    return () => ro.disconnect()
+    window.addEventListener('resize', measureTimed)
+    return () => {
+      window.removeEventListener('resize', measureTimed)
+      ro.disconnect()
+    }
   }, [getScrollSnapPositions, scrollerRef, state, variant])
 
   // sets a float between 0 and 1 for the visibility of the overlay
@@ -82,9 +90,11 @@ export function useOverlayPosition(
 
     const cancelY = scroll.y.onChange(calc)
     const cancelX = scroll.x.onChange(calc)
+
+    const calcTimed = () => framesync.read(calc)
     calc()
 
-    const ro = new ResizeObserver(calc)
+    const ro = new ResizeObserver(calcTimed)
     ro.observe(scrollerRef.current)
     ;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0-canary.20",
+  "version": "6.0.0-canary.21",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
-    "@graphcommerce/framer-next-pages": "6.0.0-canary.20",
-    "@graphcommerce/framer-scroller": "6.0.0-canary.20",
-    "@graphcommerce/framer-utils": "6.0.0-canary.20",
-    "@graphcommerce/image": "6.0.0-canary.20",
+    "@graphcommerce/framer-next-pages": "6.0.0-canary.21",
+    "@graphcommerce/framer-scroller": "6.0.0-canary.21",
+    "@graphcommerce/framer-utils": "6.0.0-canary.21",
+    "@graphcommerce/image": "6.0.0-canary.21",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.20",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.20",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.20",
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.21",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.21",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.21",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.4"