@graphcommerce/next-ui 4.22.0 → 4.24.0

package/ActionCard/ActionCard.tsx

@@ -1,5 +1,5 @@
 import { SxProps, ButtonBase, Box, Theme, alpha } from '@mui/material'
-import React, { FormEvent } from 'react'
+import React from 'react'
 import { extendableComponent } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 

package/ActionCard/ActionCardList.tsx

@@ -104,23 +104,22 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       <Box
         ref={ref}
         sx={[
-          error &&
-            ((theme) => ({
-              '& .ActionCard-root': {
-                borderLeft: 2,
-                borderRight: 2,
-                borderLeftColor: 'error.main',
-                borderRightColor: 'error.main',
-              },
-              '& > div:first-of-type.ActionCard-root': {
-                borderTop: 2,
-                borderTopColor: 'error.main',
-              },
-              '& > div:last-of-type.ActionCard-root': {
-                borderBottom: 2,
-                borderBottomColor: 'error.main',
-              },
-            })),
+          error && {
+            '& .ActionCard-root': {
+              borderLeft: 2,
+              borderRight: 2,
+              borderLeftColor: 'error.main',
+              borderRightColor: 'error.main',
+            },
+            '& > div:first-of-type.ActionCard-root': {
+              borderTop: 2,
+              borderTopColor: 'error.main',
+            },
+            '& > div:last-of-type.ActionCard-root': {
+              borderBottom: 2,
+              borderBottomColor: 'error.main',
+            },
+          },
         ]}
       >
         {childReactNodes.map((child) =>

package/Blog/BlogHeader/BlogHeader.tsx

@@ -2,7 +2,6 @@ import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
-import { responsiveVal } from '../../Styles/responsiveVal'
 
 export type BlogHeaderProps = {
   sx?: SxProps<Theme>

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 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
+
+- [#1624](https://github.com/graphcommerce-org/graphcommerce/pull/1624) [`9b84a68a1`](https://github.com/graphcommerce-org/graphcommerce/commit/9b84a68a1e7311a79eb687c7dcee905d3000facf) Thanks [@paales](https://github.com/paales)! - Create a GetServerSideProps
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.35
+
+## 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/Form/Form.tsx

@@ -1,6 +1,5 @@
 import { darken, lighten, styled, Theme } from '@mui/material'
 import { breakpointVal } from '../Styles/breakpointVal'
-import { responsiveVal } from '../Styles/responsiveVal'
 import { sx } from '../Theme/themeDefaults'
 
 type FormStyleProps = {

package/LayoutParts/MenuFab.tsx

@@ -1,4 +1,4 @@
-import { useIsomorphicLayoutEffect, useMotionValueValue } from '@graphcommerce/framer-utils'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import {
   Divider,
   Fab,
@@ -13,7 +13,7 @@ import {
 } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { useEffect, useCallback, useRef } from 'react'
+import React, { useEffect } from 'react'
 import { IconSvg } from '../IconSvg'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 import { extendableComponent } from '../Styles/extendableComponent'

package/Navigation/components/NavigationItem.tsx

@@ -70,7 +70,7 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
   const column = hidingRoot ? itemPath.length - 1 : itemPath.length
   const classes = withState({ first, last, column: itemPath.length })
 
-  const onCloseHandler: React.MouseEventHandler<HTMLAnchorElement> = useEventCallback((e) => {
+  const onCloseHandler: React.MouseEventHandler<HTMLAnchorElement> = useEventCallback(() => {
     if (!isNavigationHref(props)) return
     closing.set(true)
   })
@@ -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

@@ -3,8 +3,9 @@ import { useMotionValueValue, useMotionSelector } from '@graphcommerce/framer-ut
 import { i18n } from '@lingui/core'
 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 { m } from 'framer-motion'
+import React, { useEffect } 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()
 
@@ -203,46 +207,56 @@ 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.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})`,
+                // 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}
             sx={[
               (theme) => ({
-                py: theme.spacings.md,
+                py: theme.spacings[itemPadding] ?? itemPadding,
                 display: 'grid',
                 gridAutoFlow: 'column',
                 scrollSnapAlign: 'end',
@@ -254,11 +268,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/Navigation/components/NavigationProvider.tsx

@@ -1,5 +1,5 @@
 import { MotionConfig, useMotionValue } from 'framer-motion'
-import React, { useMemo, useRef } from 'react'
+import React, { useMemo } from 'react'
 import { isElement } from 'react-is'
 import {
   NavigationNode,

package/Page/types.ts

@@ -3,7 +3,10 @@ import { UpPage } from '@graphcommerce/framer-next-pages/types'
 // todo: remove references to GraphQL
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { NormalizedCacheObject } from '@graphcommerce/graphql'
-import { GetStaticProps as GetStaticPropsNext } from 'next'
+import {
+  GetStaticProps as GetStaticPropsNext,
+  GetServerSideProps as GetServerSidePropsNext,
+} from 'next'
 
 type AnyObj = Record<string, unknown>
 
@@ -14,3 +17,9 @@ export type GetStaticProps<
   P extends AnyObj = AnyObj,
   Q extends ParsedUrlQuery = ParsedUrlQuery,
 > = GetStaticPropsNext<P & Omit<PL, 'children'> & ApolloStateProps, Q>
+
+export type GetServerSideProps<
+  PL extends AnyObj,
+  P extends AnyObj = AnyObj,
+  Q extends ParsedUrlQuery = ParsedUrlQuery,
+> = GetServerSidePropsNext<P & Omit<PL, 'children'> & ApolloStateProps, Q>

package/Stepper/Stepper.tsx

@@ -1,6 +1,5 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import { extendableComponent } from '../Styles'
-import { responsiveVal } from '../Styles/responsiveVal'
 
 export type StepperProps = {
   steps: number

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