@graphcommerce/next-ui 4.24.0 → 4.25.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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

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>

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.24.0",
+  "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.36",
+    "@graphcommerce/framer-scroller": "2.1.37",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",