@graphcommerce/next-ui 4.24.0 → 4.26.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 4.26.0
+
+### Minor Changes
+
+- [#1651](https://github.com/graphcommerce-org/graphcommerce/pull/1651) [`42e7fac75`](https://github.com/graphcommerce-org/graphcommerce/commit/42e7fac75712f9bda7a6b919ede14b3c75d07771) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Correct component usage in /service
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.38
+
+## 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/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,29 +1,36 @@
-import { Button, ButtonProps, styled } from '@mui/material'
+import { ListItemButtonProps, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { iconChevronRight } from '../../icons'
 
-export type ButtonLinkListItemProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
-
-const ButtonItem = styled(Button)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  textDecoration: 'none',
-  padding: `${theme.spacings.xs} 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  borderRadius: 0,
-  justifyContent: 'space-between',
-  typography: 'body1',
-}))
+export type ButtonLinkListItemProps = {
+  url: string
+  endIcon?: React.ReactNode
+} & ListItemButtonProps
 
 export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
-  const { children, url, endIcon = <IconSvg src={iconChevronRight} />, ...buttonProps } = props
+  const {
+    children,
+    url,
+    endIcon = <IconSvg src={iconChevronRight} />,
+    ...ButtonLinkListItemProps
+  } = props
 
   return (
     <PageLink href={url} passHref>
-      <ButtonItem {...buttonProps} endIcon={endIcon} LinkComponent='h3'>
-        {children}
-      </ButtonItem>
+      <ListItemButton
+        LinkComponent='a'
+        sx={(theme) => ({
+          padding: `${theme.spacings.xxs} 0`,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          justifyContent: 'space-between',
+        })}
+        {...ButtonLinkListItemProps}
+      >
+        <ListItemText>{children}</ListItemText>
+        <ListItemIcon>{endIcon}</ListItemIcon>
+      </ListItemButton>
     </PageLink>
   )
 }

package/Row/IconBlocks/IconBlock.tsx

@@ -1,4 +1,4 @@
-import { Typography, Button, SxProps, Theme, Box } from '@mui/material'
+import { Typography, Button, SxProps, Theme, Box, ButtonProps } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 
@@ -8,65 +8,43 @@ export type IconBlockProps = {
   children: React.ReactNode
   href?: string
   sx?: SxProps<Theme>
-}
+} & ButtonProps
 
 const name = 'IconBlock' as const
 const parts = ['block', 'link', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
 export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, ref) => {
-  const { title, children, icon, href, sx = [] } = props
-
-  const content = (
-    <>
-      {icon}
-      <Typography
-        variant='subtitle1'
-        className={classes.title}
-        sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}
-        component='span'
-      >
-        {title}
-      </Typography>
-      {children}
-    </>
-  )
-
-  const blockSx: SxProps<Theme> = [
-    (theme) => ({
-      border: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacings.sm}`,
-      borderRadius: '6px',
-      textAlign: 'center',
-      color: theme.palette.text.primary,
-      '& > *': {
-        display: 'grid',
-        gridAutoFlow: 'row',
-        justifyItems: 'center',
-        gap: `${theme.spacings.xxs}`,
-      },
-    }),
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ]
-
-  if (href) {
-    return (
-      <Button
-        href={href}
-        variant='text'
-        color='primary'
-        className={classes.block}
-        ref={ref}
-        sx={blockSx}
-      >
-        <div>{content}</div>
-      </Button>
-    )
-  }
+  const { title, children, icon, href = '#', sx = [], ...buttonProps } = props
 
   return (
-    <Box className={classes.block} sx={blockSx}>
-      {content}
-    </Box>
+    <Button
+      href={href}
+      variant='outlined'
+      color='primary'
+      className={classes.block}
+      {...buttonProps}
+      sx={[
+        (theme) => ({
+          padding: `${theme.spacings.sm}`,
+          textAlign: 'center',
+          '& > *': {
+            display: 'grid',
+            gridAutoFlow: 'row',
+            justifyItems: 'center',
+            gap: `${theme.spacings.xxs}`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box>
+        {icon}
+        <Typography variant='subtitle1' className={classes.title} component='span'>
+          {title}
+        </Typography>
+        {children}
+      </Box>
+    </Button>
   )
 })

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.26.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.38",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",