@graphcommerce/next-ui 4.12.0 → 4.14.0

package/Overlay/components/Overlay.tsx

@@ -0,0 +1,61 @@
+import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { Box } from '@mui/material'
+import { useEffect, useState } from 'react'
+import type { SetOptional } from 'type-fest'
+import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
+
+export type OverlayProps = Omit<
+  SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
+  'direction' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+>
+
+export function Overlay(props: OverlayProps) {
+  const { children, variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
+
+  const scrollSnapTypeSm: ScrollSnapType =
+    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
+  const scrollSnapTypeMd: ScrollSnapType =
+    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
+
+  // todo: The overlay is always present in the DOM and the initial scroll position is set to 0.
+  //       This means in this case that the overlay is visisble. LayoutOverlayBase sets the scroll position to 320 with JS.
+  //       This would cause the overlay to be visisble for a moment before the scroll position is set.
+  //       The solution is to set the the first scroll-snap-align and scroll-snap-stop to the open position of the overlay.
+  //       However: We have control of the LayoutOverlayBase, we do not have control of all the child components so that solution will not work..
+  const [loaded, setLoaded] = useState(false)
+  useEffect(() => setLoaded(true), [])
+
+  return (
+    <Box
+      className='Overlay'
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        transform: loaded ? undefined : 'translateX(-200vw)',
+        pointerEvents: active ? undefined : 'none',
+        right: 0,
+        bottom: 0,
+        zIndex: 'drawer',
+        '& .LayoutOverlayBase-overlayPane': {
+          boxShadow: active ? undefined : 0,
+        },
+      }}
+    >
+      <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
+        <OverlayBase
+          offsetPageY={0}
+          variantMd={variantMd}
+          variantSm={variantSm}
+          direction={1}
+          active={active}
+          isPresent={active}
+          safeToRemove={undefined}
+          {...otherProps}
+        >
+          {children}
+        </OverlayBase>
+      </ScrollerProvider>
+    </Box>
+  )
+}

package/{LayoutOverlay/components/LayoutOverlayBase.tsx → Overlay/components/OverlayBase.tsx}

@@ -1,4 +1,3 @@
-import { useGo, usePageContext, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   clientSizeCssVar,
@@ -6,7 +5,7 @@ import {
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
-import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
+import { m, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
@@ -35,6 +34,12 @@ export type LayoutOverlayBaseProps = {
   className?: string
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
+  active: boolean
+  direction: 1 | -1
+  onClosed: () => void
+  offsetPageY: number
+  isPresent: boolean
+  safeToRemove: (() => void) | null | undefined
 } & StyleProps &
   OverridableProps
 
@@ -61,7 +66,7 @@ const clearScrollLock = () => {
   document.body.style.overflow = ''
 }
 
-export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
+export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   const props = useThemeProps({ name, props: incommingProps })
 
   const {
@@ -75,6 +80,12 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     justifyMd = 'stretch',
     sx = [],
     sxBackdrop = [],
+    active,
+    onClosed,
+    direction,
+    offsetPageY,
+    isPresent,
+    safeToRemove,
   } = props
 
   const th = useTheme()
@@ -88,12 +99,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   const { scrollerRef, snap } = useScrollerContext()
   const positions = useOverlayPosition()
   const scrollTo = useScrollTo()
-  const [isPresent, safeToRemove] = usePresence()
   const beforeRef = useRef<HTMLDivElement>(null)
 
-  const { closeSteps, active, direction } = usePageContext()
-  const close = useGo(closeSteps * -1)
-
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
   const classes = withState({ variantSm, variantMd, sizeSm, sizeMd, justifySm, justifyMd })
@@ -105,7 +112,15 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
-    if (!scroller || !isPresent) return undefined
+
+    if (!scroller) return undefined
+
+    if (!isPresent && position.get() === OverlayPosition.UNOPENED) {
+      scroller.scrollLeft = positions.closed.x.get()
+      scroller.scrollTop = positions.closed.y.get()
+    }
+
+    if (!isPresent) return undefined
 
     const open = { x: positions.open.x.get(), y: positions.open.y.get() }
 
@@ -148,7 +163,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
-    if (isPresent) return
+    if (isPresent || position.get() === OverlayPosition.UNOPENED) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
 
@@ -164,8 +179,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
-    close()
-  }, [close, position])
+    onClosed()
+  }, [onClosed, position])
 
   // Handle escape key
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
@@ -187,7 +202,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   }, [offsetY])
 
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
-  const offsetPageY = useScrollOffset().y
   const scrollWithoffset = useTransform(
     [scroll.y, positions.open.y, offsetY],
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
@@ -333,7 +347,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 marginTop: `calc(${smSpacingTop} * -1)`,
                 paddingTop: smSpacingTop,
               },
-
               '&.sizeSmFloating': {
                 padding: `${theme.page.vertical} ${theme.page.horizontal}`,
               },
@@ -353,7 +366,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
             },
           })}
         >
-          <Box
+          <MotionDiv
+            layout
             className={classes.overlayPane}
             sx={(theme) => ({
               pointerEvents: 'all',
@@ -419,7 +433,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
             })}
           >
             <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-          </Box>
+          </MotionDiv>
         </Box>
       </Scroller>
     </>

package/Overlay/components/index.ts

@@ -0,0 +1,2 @@
+export * from './OverlayBase'
+export * from './Overlay'

package/Overlay/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/PageMeta/PageMeta.tsx

@@ -1,10 +1,8 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-import {
-  resolveHref,
-  addBasePath,
-  addLocale,
-  getDomainLocale,
-} from 'next/dist/shared/lib/router/router'
+import { addBasePath } from 'next/dist/client/add-base-path'
+import { addLocale } from 'next/dist/client/add-locale'
+import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 

package/Theme/DarkLightModeThemeProvider.tsx

@@ -108,11 +108,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
-        {currentMode === 'light' ? (
-          <Trans id='Switch to Dark Mode' />
-        ) : (
-          <Trans id='Switch to Light Mode' />
-        )}
+        {currentMode === 'light' ? <Trans id='Dark Mode' /> : <Trans id='Light Mode' />}
       </ListItemText>
     </ListItemButton>
   )

package/index.ts

@@ -1,5 +1,6 @@
-export * from './ActionCard/ActionCardList'
 export * from './ActionCard/ActionCard'
+export * from './ActionCard/ActionCardList'
+export * from './ActionCard/ActionCardListForm'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'
@@ -22,6 +23,7 @@ export * from './Form/InputCheckmark'
 export * from './FramerScroller'
 export * from './FullPageMessage/FullPageMessage'
 export * from './Highlight/Highlight'
+export * from './hooks'
 export * from './IconHeader/IconHeader'
 export * from './icons'
 export * from './IconSvg'
@@ -30,6 +32,8 @@ export * from './Layout'
 export * from './LayoutDefault'
 export * from './LayoutOverlay'
 export * from './LayoutParts'
+export * from './Navigation'
+export * from './Overlay'
 export * from './Page'
 export * from './PageLoadIndicator/PageLoadIndicator'
 export * from './PageMeta/PageMeta'
@@ -39,8 +43,8 @@ export * from './Row'
 export * from './SectionContainer/SectionContainer'
 export * from './SectionHeader/SectionHeader'
 export * from './Separator/Separator'
-export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/ErrorSnackbar'
+export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField/StarRatingField'
 export * from './Stepper/Stepper'
@@ -50,6 +54,6 @@ export * from './Theme'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
-export * from './hooks'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
+export * from './utils/cookie'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.12.0",
+  "version": "4.14.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -15,15 +15,16 @@
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.9.0",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.21",
+    "@emotion/styled": "^11.9.3",
+    "@graphcommerce/framer-next-pages": "3.2.4",
+    "@graphcommerce/framer-scroller": "2.1.24",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
-    "react-is": "^18.1.0",
+    "cookie": "^0.5.0",
+    "react-is": "^18.2.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
@@ -38,12 +39,13 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
+    "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",
-    "typescript": "4.7.3"
+    "typescript": "4.7.4"
   }
 }

package/utils/cookie.ts

@@ -0,0 +1,33 @@
+import { serialize, parse, CookieSerializeOptions } from 'cookie'
+
+/** Read a cookie */
+export function cookie(name: string): string | undefined
+/** Set a cookie */
+export function cookie(name: string, value: string, options?: CookieSerializeOptions): void
+/** Delete a cookie */
+export function cookie(name: string, value: null): void
+/** Function to handle the three different cases */
+export function cookie(name: string, value?: string | null, options?: CookieSerializeOptions) {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+
+  // Read a cookie
+  if (typeof value === 'undefined') return parse(document.cookie)[name]
+
+  // Set a cookie
+  if (typeof value === 'string') {
+    const serialized = serialize(name, value, { path: '/', maxAge: 31536000, ...options })
+    document.cookie = serialized
+    return undefined
+  }
+
+  // Delete a cookie
+  if (value === null) {
+    const serialized = serialize(name, '', { path: '/', maxAge: 0 })
+    document.cookie = serialized
+    return undefined
+  }
+
+  return undefined
+}