@graphcommerce/next-ui 4.22.0 → 4.23.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 4.23.0
+
+### Minor Changes
+
+- [#1620](https://github.com/graphcommerce-org/graphcommerce/pull/1620) [`755d2cf83`](https://github.com/graphcommerce-org/graphcommerce/commit/755d2cf83343a5ad3d61063eff595d821de360aa) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Add spacing feature to navItems
+
+* [#1618](https://github.com/graphcommerce-org/graphcommerce/pull/1618) [`dc7f2dda4`](https://github.com/graphcommerce-org/graphcommerce/commit/dc7f2dda40ff8572fc11161de6eb62ca13e720dd) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Remove prefetch from navigation links
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.34
+
 ## 4.22.0
 
 ### Minor Changes

package/Navigation/components/NavigationItem.tsx

@@ -151,7 +151,7 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
     const { name, href } = props
     return (
       <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
-        <PageLink href={href} passHref>
+        <PageLink href={href} passHref prefetch={false}>
           <ListItemButton
             className={classes.item}
             component='a'

package/Navigation/components/NavigationOverlay.tsx

@@ -5,6 +5,7 @@ import { Trans } from '@lingui/react'
 import { Box, Fab, SxProps, Theme, useEventCallback, useMediaQuery } from '@mui/material'
 import { m, useMotionValue } from 'framer-motion'
 import React, { startTransition, useEffect, useRef, useState } from 'react'
+import type { LiteralUnion } from 'type-fest'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
 import { LayoutTitle } from '../../Layout/components/LayoutTitle'
@@ -27,6 +28,7 @@ import { NavigationList } from './NavigationList'
 type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
 type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
 type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
+type ItemPadding = LiteralUnion<keyof Theme['spacings'], string | number>
 
 type NavigationOverlayProps = {
   sx?: SxProps<Theme>
@@ -39,6 +41,7 @@ type NavigationOverlayProps = {
   justifyMd?: LayoutOverlayAlign
   itemWidthSm?: string
   itemWidthMd?: string
+  itemPadding?: ItemPadding
 } & mouseEventPref
 
 function findCurrent(
@@ -82,6 +85,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
     itemWidthSm,
     itemWidthMd,
     mouseEvent,
+    itemPadding = 'md',
   } = props
   const { selection, items, animating, closing } = useNavigation()
 
@@ -227,13 +231,17 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
               '& .NavigationItem-item': {
                 width:
                   sizeSm !== 'floating'
-                    ? `calc(${itemWidthSm || '100vw'} - ${theme.spacings.md} - ${
-                        theme.spacings.md
-                      } + ${selectedLevel}px)`
-                    : `calc(${itemWidthSm || '100vw'} - ${theme.spacings.md} - ${
-                        theme.spacings.md
-                      } - ${theme.page.horizontal} - ${theme.page.horizontal})`,
-                minWidth: `calc(${200}px - ${theme.spacings.md} - ${theme.spacings.md})`,
+                    ? `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
+                })`,
               },
             },
           })}
@@ -242,7 +250,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
             className={classes.navigation}
             sx={[
               (theme) => ({
-                py: theme.spacings.md,
+                py: theme.spacings[itemPadding] ?? itemPadding,
                 display: 'grid',
                 gridAutoFlow: 'column',
                 scrollSnapAlign: 'end',
@@ -254,11 +262,11 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
                 },
                 '& .Navigation-column': {},
                 '& .NavigationItem-item': {
-                  mx: theme.spacings.md,
+                  mx: theme.spacings[itemPadding] ?? itemPadding,
                   whiteSpace: 'nowrap',
                 },
                 '& .NavigationItem-item.first': {
-                  // mt: theme.spacings.md,
+                  // mt: paddingMd,
                 },
                 '& .Navigation-column:first-of-type': {
                   boxShadow: 'none',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.22.0",
+  "version": "4.23.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.33",
+    "@graphcommerce/framer-scroller": "2.1.34",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",