@graphcommerce/next-ui 4.23.1 → 4.25.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 4.25.0
+
+### Minor Changes
+
+- [#1641](https://github.com/graphcommerce-org/graphcommerce/pull/1641) [`dc6237644`](https://github.com/graphcommerce-org/graphcommerce/commit/dc6237644ac349debb728059e4c937cec25bf4fd) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix overlay content stretch bug on hover while animating
+
+* [#1643](https://github.com/graphcommerce-org/graphcommerce/pull/1643) [`48273bccd`](https://github.com/graphcommerce-org/graphcommerce/commit/48273bccd2e471ce4bc024a600e693da791f1cde) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Show current navigation title on item interaction
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.37
+
+## 4.24.0
+
+### Minor Changes
+
+- [#1638](https://github.com/graphcommerce-org/graphcommerce/pull/1638) [`104103bc2`](https://github.com/graphcommerce-org/graphcommerce/commit/104103bc2a0fbaa510af2e26b6b00ddc63e8495b) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix navigation overlay visibility bug
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.36
+
 ## 4.23.1
 
 ### Patch Changes

package/Navigation/components/NavigationItem.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Box, ListItemButton, styled, Theme, useEventCallback, useMediaQuery } from '@mui/material'
+import {
+  Box,
+  ListItemButton,
+  styled,
+  Theme,
+  useEventCallback,
+  useMediaQuery,
+  alpha,
+} from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
@@ -92,7 +100,7 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
               display: hideItem ? 'none' : 'flex',
               '&.Mui-disabled': {
                 opacity: 1,
-                background: theme.palette.action.hover,
+                background: alpha(theme.palette.action.hover, 0.025),
               },
             }),
             mouseEvent === 'hover'

package/Navigation/components/NavigationOverlay.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled'
 import { useMotionValueValue, useMotionSelector } from '@graphcommerce/framer-utils'
 import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
-import { Box, Fab, SxProps, Theme, useEventCallback, useMediaQuery } from '@mui/material'
+import { Box, Fab, SxProps, Theme, useEventCallback, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import React, { useEffect } from 'react'
 import type { LiteralUnion } from 'type-fest'
@@ -13,17 +12,10 @@ import { Overlay } from '../../Overlay/components/Overlay'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
 import { iconClose, iconChevronLeft } from '../../icons'
-import {
-  isNavigationButton,
-  isNavigationComponent,
-  NavigationContextType,
-  NavigationNodeButton,
-  NavigationNodeHref,
-  NavigationPath,
-  useNavigation,
-} from '../hooks/useNavigation'
+import { useNavigation } from '../hooks/useNavigation'
 import { mouseEventPref } from './NavigationItem'
 import { NavigationList } from './NavigationList'
+import { NavigationTitle } from './NavigationTitle'
 
 type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
 type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
@@ -44,28 +36,6 @@ type NavigationOverlayProps = {
   itemPadding?: ItemPadding
 } & mouseEventPref
 
-function findCurrent(
-  items: NavigationContextType['items'],
-  selected: NavigationPath | false,
-): NavigationNodeHref | NavigationNodeButton | undefined {
-  if (selected === false) return undefined
-  const lastItem = selected.slice(-1)[0]
-
-  if (!lastItem) return undefined
-
-  for (const item of items) {
-    // eslint-disable-next-line no-continue
-    if (isNavigationComponent(item)) continue
-
-    // If the item is the current one, return it
-    if (item.id === lastItem) return item
-
-    // Recursively find item
-    if (isNavigationButton(item)) return findCurrent(item.childItems, selected)
-  }
-  return undefined
-}
-
 const MotionDiv = styled(m.div)()
 
 const componentName = 'Navigation'
@@ -92,9 +62,9 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
   const fabSize = useFabSize('responsive')
   const svgSize = useIconSvgSize('large')
 
-  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
+  const theme2 = useTheme()
   const handleOnBack = useEventCallback(() => {
-    if (isMobile) {
+    if (window.matchMedia(`(max-width: ${theme2.breakpoints.values.md}px)`).matches) {
       const current = selection.get()
       selection.set(current !== false ? current.slice(0, -1) : false)
     } else selection.set([])
@@ -106,7 +76,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
   )
 
   useEffect(() => {
-    animating.set(false)
+    animating.set(true)
   }, [activeAndNotClosing, animating])
 
   const afterClose = useEventCallback(() => {
@@ -199,7 +169,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
             }
           >
             <LayoutTitle size='small' component='span'>
-              {findCurrent(items, selection.get())?.name ?? <Trans id='Menu' />}
+              <NavigationTitle />
             </LayoutTitle>
           </LayoutHeaderContent>
         </Box>
@@ -207,44 +177,50 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
 
       <MotionDiv layout='position' style={{ display: 'grid' }}>
         <Box
-          sx={(theme) => ({
-            display: 'grid',
-            alignItems: !stretchColumns ? 'start' : undefined,
-            '& .NavigationItem-item': {
-              // eslint-disable-next-line no-nested-ternary
-              width: itemWidthMd
-                ? selectedLevel >= 1
-                  ? `calc(${itemWidthMd} + 1px)`
-                  : itemWidthMd
-                : 'stretch',
-            },
-            [theme.breakpoints.down('md')]: {
-              width:
-                sizeSm !== 'floating'
-                  ? `calc(${itemWidthSm || '100vw'} + ${selectedLevel}px)`
-                  : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
-                      theme.page.horizontal
-                    })`,
-              minWidth: 200,
-              overflow: 'hidden',
-              scrollSnapType: 'x mandatory',
+          sx={[
+            (theme) => ({
+              display: 'grid',
+              alignItems: !stretchColumns ? 'start' : undefined,
               '& .NavigationItem-item': {
-                width:
-                  sizeSm !== 'floating'
-                    ? `calc(${itemWidthSm || '100vw'} - ${
-                        theme.spacings[itemPadding] ?? itemPadding
-                      } - ${theme.spacings[itemPadding] ?? itemPadding} + ${selectedLevel}px)`
-                    : `calc(${itemWidthSm || '100vw'} - ${
-                        theme.spacings[itemPadding] ?? itemPadding
-                      } - ${theme.spacings[itemPadding] ?? itemPadding} - ${
-                        theme.page.horizontal
-                      } - ${theme.page.horizontal})`,
-                minWidth: `calc(${200}px - ${theme.spacings[itemPadding] ?? itemPadding} - ${
-                  theme.spacings[itemPadding] ?? itemPadding
-                })`,
+                // eslint-disable-next-line no-nested-ternary
+                width: itemWidthMd
+                  ? selectedLevel >= 1
+                    ? `calc(${itemWidthMd} + 1px)`
+                    : itemWidthMd
+                  : 'stretch',
               },
-            },
-          })}
+            }),
+            activeAndNotClosing
+              ? (theme) => ({
+                  [theme.breakpoints.down('md')]: {
+                    width:
+                      sizeSm !== 'floating'
+                        ? `calc(${itemWidthSm || '100vw'} + ${selectedLevel}px)`
+                        : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
+                            theme.page.horizontal
+                          })`,
+                    minWidth: 200,
+                    overflow: 'hidden',
+                    scrollSnapType: 'x mandatory',
+                    '& .NavigationItem-item': {
+                      width:
+                        sizeSm !== 'floating'
+                          ? `calc(${itemWidthSm || '100vw'} - ${
+                              theme.spacings[itemPadding] ?? itemPadding
+                            } - ${theme.spacings[itemPadding] ?? itemPadding} + ${selectedLevel}px)`
+                          : `calc(${itemWidthSm || '100vw'} - ${
+                              theme.spacings[itemPadding] ?? itemPadding
+                            } - ${theme.spacings[itemPadding] ?? itemPadding} - ${
+                              theme.page.horizontal
+                            } - ${theme.page.horizontal})`,
+                      minWidth: `calc(${200}px - ${theme.spacings[itemPadding] ?? itemPadding} - ${
+                        theme.spacings[itemPadding] ?? itemPadding
+                      })`,
+                    },
+                  },
+                })
+              : {},
+          ]}
         >
           <Box
             className={classes.navigation}

package/Navigation/components/NavigationProvider.tsx

@@ -24,7 +24,7 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
     items,
     hideRootOnNavigate = true,
     closeAfterNavigate = false,
-    animationDuration = 0.275,
+    animationDuration = 0.225,
     children,
     selection,
   } = props

package/Navigation/components/NavigationTitle.tsx

@@ -0,0 +1,40 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { Trans } from '@lingui/react'
+import {
+  NavigationPath,
+  NavigationNodeHref,
+  NavigationNodeButton,
+  useNavigation,
+} from '../hooks/useNavigation'
+
+function findCurrent(
+  items,
+  selected: NavigationPath | false,
+): NavigationNodeHref | NavigationNodeButton | undefined {
+  if (selected === false) return undefined
+  const lastItem = selected.slice(-1)[0]
+
+  if (!lastItem) return undefined
+
+  let result
+  for (const item of items) {
+    if (item.id === lastItem) {
+      result = item
+      break
+    }
+    if (item.childItems) {
+      result = findCurrent(item.childItems, selected)
+      if (result) {
+        break
+      }
+    }
+  }
+  return result
+}
+
+export const NavigationTitle = () => {
+  const { selection, items } = useNavigation()
+  return (
+    <>{useMotionValueValue(selection, (v) => findCurrent(items, v))?.name ?? <Trans id='Menu' />}</>
+  )
+}

package/Overlay/components/OverlayBase.tsx

@@ -241,7 +241,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
             bottom: 0,
             top: 0,
             left: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
             WebkitTapHighlightColor: 'transparent',
             willChange: 'opacity',
           },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.23.1",
+  "version": "4.25.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.3.0",
-    "@graphcommerce/framer-scroller": "2.1.35",
+    "@graphcommerce/framer-scroller": "2.1.37",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",