@graphcommerce/next-ui 4.27.0 → 4.28.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 4.28.0
+
+### Minor Changes
+
+- [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`0c21c5c23`](https://github.com/graphcommerce-org/graphcommerce/commit/0c21c5c233ebab15f6629c234e3de1cc8c0452e1) Thanks [@paales](https://github.com/paales)! - Implement serverRenderDepth prop to the Navigation to limit initial render time and TBT
+
+* [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a) Thanks [@paales](https://github.com/paales)! - Move to useMatchMedia to have a simple boolean utility that allows to match to a certain breakpoint
+
+### Patch Changes
+
+- [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`de8925aa9`](https://github.com/graphcommerce-org/graphcommerce/commit/de8925aa910b191c62041530c68c697a58a1e52d) Thanks [@paales](https://github.com/paales)! - Allow for a custom Component for magentoMenuToNavigation and allow React.ReactNode for items
+
+- Updated dependencies [[`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a), [`9e0ca73eb`](https://github.com/graphcommerce-org/graphcommerce/commit/9e0ca73eb50ded578f4a98e40a7eb920bf8ab421)]:
+  - @graphcommerce/framer-scroller@2.1.40
+  - @graphcommerce/framer-next-pages@3.3.1
+
 ## 4.27.0
 
 ### Minor Changes

package/FramerScroller/SidebarGallery.tsx

@@ -10,7 +10,7 @@ import {
 import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { IconSvg } from '../IconSvg'
 import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'
@@ -107,9 +107,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   const headerHeight = `${theme.appShell.headerHeightSm} - ${theme.spacings.sm} * 2`
   const galleryMargin = theme.spacings.lg
-  const extraSpacing = theme.spacings.md
 
-  const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
+  const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin})`
   const ratio = `calc(${height} / ${width} * 100%)`
 
   const hasImages = images.length > 0
@@ -200,7 +199,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   width={image.width}
                   height={image.height}
                   loading={idx === 0 ? 'eager' : 'lazy'}
-                  sx={{ display: 'block' }}
+                  sx={{ display: 'block', objectFit: 'contain' }}
                   sizes={{
                     0: '100vw',
                     [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',

package/Navigation/components/NavigationItem.tsx

@@ -1,18 +1,11 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import {
-  Box,
-  ListItemButton,
-  styled,
-  Theme,
-  useEventCallback,
-  useMediaQuery,
-  alpha,
-} from '@mui/material'
+import { alpha, Box, ListItemButton, styled, useEventCallback, useTheme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
+import { useMatchMedia } from '../../hooks'
 import { iconChevronRight } from '../../icons'
 import {
   isNavigationButton,
@@ -54,9 +47,9 @@ const NavigationLI = styled('li')({ display: 'contents' })
 
 export const NavigationItem = React.memo<NavigationItemProps>((props) => {
   const { id, parentPath, idx, first, last, NavigationList, mouseEvent } = props
+  const { selection, hideRootOnNavigate, closing, animating, serverRenderDepth } = useNavigation()
 
   const row = idx + 1
-  const { selection, hideRootOnNavigate, closing, animating } = useNavigation()
 
   const itemPath = [...(parentPath ? parentPath.split(',') : []), id]
 
@@ -83,13 +76,18 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
     closing.set(true)
   })
 
-  const isDesktop = useMediaQuery<Theme>((theme) => theme.breakpoints.up('md'))
+  const matchMedia = useMatchMedia()
 
   if (isNavigationButton(props)) {
-    const { childItems, name } = props
+    const { childItems, name, href } = props
+
+    const skipChildren = itemPath.length + 1 > serverRenderDepth && !isSelected && !!href
+
     return (
       <NavigationLI className={classes.li}>
         <ListItemButton
+          component={href ? 'a' : 'div'}
+          href={href || undefined}
           className={classes.item}
           role='button'
           sx={[
@@ -116,14 +114,14 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           tabIndex={tabIndex}
           onClick={(e) => {
             e.preventDefault()
-            if (!isSelected && animating.get() === false) {
+            if (!isSelected && !animating.get()) {
               selection.set(itemPath)
             }
           }}
           onMouseMove={
-            itemPath.length > 1 && mouseEvent === 'hover'
+            (itemPath.length > 1 || !hideRootOnNavigate) && mouseEvent === 'hover'
               ? (e) => {
-                  if (isDesktop && animating.get() === false && !isSelected) {
+                  if (!isSelected && !animating.get() && matchMedia.up('md')) {
                     e.preventDefault()
                     setTimeout(() => selection.set(itemPath), 0)
                   }
@@ -145,18 +143,21 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
         </ListItemButton>
 
-        <NavigationList
-          items={childItems}
-          selected={isSelected}
-          parentPath={itemPath.join(',')}
-          mouseEvent={mouseEvent}
-        />
+        {!skipChildren && (
+          <NavigationList
+            items={childItems}
+            selected={isSelected}
+            parentPath={itemPath.join(',')}
+            mouseEvent={mouseEvent}
+          />
+        )}
       </NavigationLI>
     )
   }
 
   if (isNavigationHref(props)) {
     const { name, href } = props
+
     return (
       <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
         <PageLink href={href} passHref prefetch={false}>
@@ -198,8 +199,6 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
     )
   }
 
-  if (process.env.NODE_ENV !== 'production') throw Error('NavigationItem: unknown type')
-
   return null
 })
 

package/Navigation/components/NavigationOverlay.tsx

@@ -11,6 +11,7 @@ import { LayoutTitle } from '../../Layout/components/LayoutTitle'
 import { Overlay } from '../../Overlay/components/Overlay'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
+import { useMatchMedia } from '../../hooks'
 import { iconClose, iconChevronLeft } from '../../icons'
 import { useNavigation } from '../hooks/useNavigation'
 import { mouseEventPref } from './NavigationItem'
@@ -57,14 +58,15 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
     mouseEvent,
     itemPadding = 'md',
   } = props
-  const { selection, items, animating, closing } = useNavigation()
+  const { selection, items, animating, closing, serverRenderDepth } = useNavigation()
 
   const fabSize = useFabSize('responsive')
   const svgSize = useIconSvgSize('large')
 
-  const theme2 = useTheme()
+  const matchMedia = useMatchMedia()
+
   const handleOnBack = useEventCallback(() => {
-    if (window.matchMedia(`(max-width: ${theme2.breakpoints.values.md}px)`).matches) {
+    if (matchMedia.down('md')) {
       const current = selection.get()
       selection.set(current !== false ? current.slice(0, -1) : false)
     } else selection.set([])
@@ -87,6 +89,8 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
 
   const handleClose = useEventCallback(() => closing.set(true))
 
+  if (selectedLevel === -1 && serverRenderDepth <= 0) return null
+
   return (
     <Overlay
       className={classes.root}

package/Navigation/components/NavigationProvider.tsx

@@ -6,6 +6,8 @@ import {
   NavigationContextType,
   NavigationContext,
   UseNavigationSelection,
+  NavigationNodeType,
+  NavigationNodeComponent,
 } from '../hooks/useNavigation'
 
 export type NavigationProviderProps = {
@@ -15,6 +17,7 @@ export type NavigationProviderProps = {
   children?: React.ReactNode
   animationDuration?: number
   selection: UseNavigationSelection
+  serverRenderDepth?: number
 }
 
 const nonNullable = <T,>(value: T): value is NonNullable<T> => value !== null && value !== undefined
@@ -27,6 +30,7 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
     animationDuration = 0.225,
     children,
     selection,
+    serverRenderDepth = 2,
   } = props
 
   const animating = useMotionValue(false)
@@ -39,10 +43,19 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
       animating,
       closing,
       items: items
-        .map((item, index) => (isElement(item) ? { id: item.key ?? index, component: item } : item))
+        .map((item, index) =>
+          isElement(item)
+            ? ({
+                type: NavigationNodeType.COMPONENT,
+                id: item.key ?? index,
+                component: item,
+              } as NavigationNodeComponent)
+            : item,
+        )
         .filter(nonNullable),
+      serverRenderDepth,
     }),
-    [hideRootOnNavigate, selection, animating, closing, items],
+    [hideRootOnNavigate, selection, animating, closing, items, serverRenderDepth],
   )
 
   return (

package/Navigation/hooks/useNavigation.ts

@@ -1,5 +1,5 @@
 import { MotionValue, useMotionValue } from 'framer-motion'
-import { createContext, MutableRefObject, useContext } from 'react'
+import React, { createContext, MutableRefObject, useContext } from 'react'
 
 export type NavigationId = string | number
 export type NavigationPath = NavigationId[]
@@ -19,38 +19,51 @@ export type NavigationContextType = {
   hideRootOnNavigate: boolean
   animating: MotionValue<boolean>
   closing: MotionValue<boolean>
+  serverRenderDepth: number
 }
 
 type NavigationNodeBase = {
+  type?: NavigationNodeType
   id: NavigationId
 }
 
+export enum NavigationNodeType {
+  LINK,
+  BUTTON,
+  COMPONENT,
+}
+
 export type NavigationNodeHref = NavigationNodeBase & {
-  name: string
+  name: React.ReactNode
   href: string
 }
 
 export type NavigationNodeButton = NavigationNodeBase & {
-  name: string
+  name: React.ReactNode
+  type: NavigationNodeType.BUTTON
+  href?: string
   childItems: NavigationNode[]
 }
 
 export type NavigationNodeComponent = NavigationNodeBase & {
+  type: NavigationNodeType.COMPONENT
   component: React.ReactNode
 }
 
 export type NavigationNode = NavigationNodeHref | NavigationNodeButton | NavigationNodeComponent
 
 export function isNavigationHref(node: NavigationNodeBase): node is NavigationNodeHref {
-  return 'href' in node
+  return 'href' in node && node.type !== NavigationNodeType.BUTTON
 }
 
 export function isNavigationButton(node: NavigationNodeBase): node is NavigationNodeButton {
-  return (node as NavigationNodeButton).childItems?.length > 0
+  return (
+    node.type === NavigationNodeType.BUTTON && (node as NavigationNodeButton).childItems?.length > 0
+  )
 }
 
 export function isNavigationComponent(node: NavigationNodeBase): node is NavigationNodeComponent {
-  return 'component' in node
+  return node.type === NavigationNodeType.COMPONENT && 'component' in node
 }
 
 export const NavigationContext = createContext(undefined as unknown as NavigationContextType)

package/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useDateTimeFormat'
 export * from './useNumberFormat'
 export * from './useUrlQuery'
 export * from './useMemoDeep'
+export * from './useMatchMedia'

package/hooks/useMatchMedia.ts

@@ -0,0 +1,17 @@
+import { Breakpoint, useTheme } from '@mui/material'
+import { useMemo } from 'react'
+
+export function useMatchMedia() {
+  const theme = useTheme()
+
+  return useMemo(() => {
+    const callback = (direction: 'up' | 'down', breakpointKey: number | Breakpoint) =>
+      window.matchMedia(theme.breakpoints[direction](breakpointKey).replace(/^@media( ?)/m, ''))
+        .matches
+
+    return {
+      down: (key: number | Breakpoint) => callback('down', key),
+      up: (key: number | Breakpoint) => callback('up', key),
+    }
+  }, [theme.breakpoints])
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,8 +19,8 @@
     "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
-    "@graphcommerce/framer-next-pages": "3.3.0",
-    "@graphcommerce/framer-scroller": "2.1.39",
+    "@graphcommerce/framer-next-pages": "3.3.1",
+    "@graphcommerce/framer-scroller": "2.1.40",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",