@graphcommerce/next-ui 3.19.1 → 3.20.0

package/Layout/context/layoutContext.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { LayoutContext } from '../types'
+
+const layoutContext = React.createContext(undefined as unknown as LayoutContext)
+layoutContext.displayName = 'layoutContext'
+
+export default layoutContext

package/Layout/hooks/useScrollY.tsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import layoutContext from '../context/layoutContext'
+
+export function useScrollY() {
+  return useContext(layoutContext).scroll
+}

package/Layout/index.ts

@@ -0,0 +1,5 @@
+export * from './types'
+export * from './components/LayoutHeader'
+export * from './components/LayoutProvider'
+export * from './components/LayoutTitle'
+export * from './hooks/useScrollY'

package/Layout/types.ts

@@ -0,0 +1,5 @@
+import { MotionValue } from 'framer-motion'
+
+export type LayoutContext = {
+  scroll: MotionValue<number>
+}

package/LayoutDefault/components/LayoutDefault.tsx

@@ -0,0 +1,90 @@
+import { usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import { useTransform, useViewportScroll } from 'framer-motion'
+import React from 'react'
+import LayoutProvider from '../../Layout/components/LayoutProvider'
+import { UseStyles } from '../../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      minHeight: '100vh',
+      '@supports (-webkit-touch-callout: none)': {
+        minHeight: '-webkit-fill-available',
+      },
+      display: 'grid',
+      gridTemplateRows: `auto 1fr auto`,
+      gridTemplateColumns: '100%',
+      background: theme.palette.background.default,
+    },
+    hideFabsOnVirtualKeyboardOpen: {
+      [theme.breakpoints.down('sm')]: {
+        '@media (max-height: 530px)': {
+          display: 'none',
+        },
+      },
+    },
+    header: {
+      zIndex: theme.zIndex.appBar - 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: theme.appShell.headerHeightSm,
+      pointerEvents: 'none',
+      '& > *': {
+        pointerEvents: 'all',
+      },
+      [theme.breakpoints.up('md')]: {
+        height: theme.appShell.headerHeightMd,
+        padding: `0 ${theme.page.horizontal} 0`,
+        top: 0,
+        display: 'flex',
+        justifyContent: 'left',
+        width: '100%',
+      },
+    },
+    headerSticky: {
+      [theme.breakpoints.down('sm')]: {
+        position: 'sticky',
+        top: 0,
+      },
+    },
+  }),
+  { name: 'LayoutDefault' },
+)
+
+export type LayoutDefaultProps = {
+  header: React.ReactNode
+  footer: React.ReactNode
+  menuFab?: React.ReactNode
+  cartFab?: React.ReactNode
+  children?: React.ReactNode
+  noSticky?: boolean
+} & UseStyles<typeof useStyles>
+
+export function LayoutDefault(props: LayoutDefaultProps) {
+  const { children, header, footer, menuFab, cartFab, noSticky } = props
+  const classes = useStyles(props)
+
+  const offset = useScrollOffset().y
+  const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
+
+  return (
+    <div className={classes.root}>
+      <LayoutProvider scroll={scrollWithOffset}>
+        <header className={clsx(classes.header, !noSticky && classes.headerSticky)}>
+          {header}
+        </header>
+        <div>
+          <div className={classes.hideFabsOnVirtualKeyboardOpen}>
+            {menuFab}
+            {cartFab}
+          </div>
+          {children}
+        </div>
+        <div>{footer}</div>
+      </LayoutProvider>
+    </div>
+  )
+}

package/LayoutDefault/index.ts

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

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -0,0 +1,25 @@
+import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import React from 'react'
+import { SetOptional } from 'type-fest'
+import { LayoutOverlayBase, LayoutOverlayBaseProps } from './LayoutOverlayBase'
+
+export type { LayoutOverlayVariant } from './LayoutOverlayBase'
+
+export type LayoutOverlayProps = SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>
+
+export function LayoutOverlay(props: LayoutOverlayProps) {
+  const { children, variantSm = 'bottom', variantMd = 'right', classes } = props
+
+  const scrollSnapTypeSm: ScrollSnapType =
+    variantSm === 'left' || variantSm === 'right' ? 'both mandatory' : 'block proximity'
+  const scrollSnapTypeMd: ScrollSnapType =
+    variantMd === 'left' || variantMd === 'right' ? 'both mandatory' : 'block proximity'
+
+  return (
+    <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
+      <LayoutOverlayBase variantMd={variantMd} variantSm={variantSm} classes={classes}>
+        {children}
+      </LayoutOverlayBase>
+    </ScrollerProvider>
+  )
+}

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -0,0 +1,354 @@
+import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
+import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import { makeStyles, Theme } from '@material-ui/core'
+import {
+  m,
+  MotionValue,
+  useDomEvent,
+  useMotionValue,
+  usePresence,
+  useTransform,
+} from 'framer-motion'
+import React, { useCallback, useEffect, useRef } from 'react'
+import LayoutProvider from '../../Layout/components/LayoutProvider'
+import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
+import { useOverlayPosition } from '../hooks/useOverlayPosition'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      cursor: 'default',
+      overflow: 'auto',
+      height: '100vh',
+      '@supports (-webkit-touch-callout: none)': {
+        height: '-webkit-fill-available',
+      },
+    },
+    rootVariantSmLeft: {
+      [theme.breakpoints.down('sm')]: {
+        gridTemplate: `
+          "overlay beforeOverlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantMdLeft: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `
+          "overlay beforeOverlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantSmRight: {
+      [theme.breakpoints.down('sm')]: {
+        gridTemplate: `
+          "beforeOverlay overlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantMdRight: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `
+          "beforeOverlay overlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        height: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          height: '-webkit-fill-available',
+        },
+      },
+    },
+    rootVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        height: '100vh',
+      },
+    },
+    beforeOverlay: {
+      gridArea: 'beforeOverlay',
+      scrollSnapAlign: 'start',
+      scrollSnapStop: 'always',
+      display: 'grid',
+      alignContent: 'end',
+    },
+    beforeOverlayVariantSmRight: {
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+      },
+    },
+    beforeOverlayVariantMdRight: {
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+      },
+    },
+
+    beforeOverlayVariantSmLeft: {
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+      },
+    },
+    beforeOverlayVariantMdLeft: {
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+      },
+    },
+
+    beforeOverlayVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        height: '100vh',
+      },
+    },
+    beforeOverlayVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        height: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          height: '-webkit-fill-available',
+        },
+      },
+    },
+    overlay: {
+      pointerEvents: 'none',
+      gridArea: 'overlay',
+      scrollSnapAlign: 'start',
+      width: 'min-content',
+      minHeight: '100vh',
+      '@supports (-webkit-touch-callout: none)': {
+        minHeight: '-webkit-fill-available',
+      },
+    },
+    overlayVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
+        paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
+        scrollSnapStop: 'always',
+        display: 'grid',
+      },
+    },
+    overlayVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
+        paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
+        scrollSnapAlign: 'start',
+        scrollSnapStop: 'always',
+        display: 'grid',
+      },
+    },
+    overlayPane: {
+      pointerEvents: 'all',
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[24],
+      minWidth: 'min(800px, 90vw)',
+    },
+    overlayPaneVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+        borderRadius: 10,
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
+      },
+    },
+    overlayPaneVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+        borderRadius: 10,
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
+      },
+    },
+    overlayPaneVariantSmLeft: {
+      [theme.breakpoints.down('sm')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    overlayPaneVariantMdLeft: {
+      [theme.breakpoints.up('md')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    overlayPaneVariantSmRight: {
+      [theme.breakpoints.down('sm')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    overlayPaneVariantMdRight: {
+      [theme.breakpoints.up('md')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    afterOverlay: {
+      gridArea: 'afterOverlay',
+      scrollSnapAlign: 'start',
+    },
+    backdrop: {
+      zIndex: -1,
+      position: 'fixed',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      right: 0,
+      bottom: 0,
+      top: 0,
+      left: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      WebkitTapHighlightColor: 'transparent',
+    },
+  }),
+  { name: 'Overlay' },
+)
+
+export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
+
+export type LayoutOverlayBaseProps = {
+  children?: React.ReactNode
+  variantSm: LayoutOverlayVariant
+  variantMd: LayoutOverlayVariant
+} & UseStyles<typeof useStyles>
+
+export enum OverlayPosition {
+  UNOPENED = -1,
+  OPENED = 1,
+  CLOSED = 0,
+}
+
+export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
+  const { children, variantSm, variantMd } = props
+  const { scrollerRef } = useScrollerContext()
+  const positions = useOverlayPosition()
+  const scrollTo = useScrollTo()
+  const [isPresent, safeToRemove] = usePresence()
+
+  const { closeSteps, active, direction } = usePageContext()
+  const pageRouter = usePageRouter()
+
+  const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
+
+  const classes = useStyles(props)
+  const className = classesPicker(classes, { variantSm, variantMd })
+
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  const scroll = useElementScroll(scrollerRef)
+
+  useIsomorphicLayoutEffect(() => {
+    const scroller = scrollerRef.current
+    if (!scroller || !isPresent) return
+
+    const open = { x: positions.open.x.get(), y: positions.open.y.get() }
+
+    if (direction === 1 && position.get() !== OverlayPosition.OPENED) {
+      scroller.scrollLeft = positions.closed.x.get()
+      scroller.scrollTop = positions.closed.y.get()
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scrollTo(open).then(() => {
+        scroller.scrollLeft = positions.open.x.get()
+        scroller.scrollTop = positions.open.y.get()
+        position.set(OverlayPosition.OPENED)
+      })
+    } else {
+      scroller.scrollLeft = open.x
+      scroller.scrollTop = open.y
+    }
+  }, [direction, isPresent, position, positions, scrollTo, scrollerRef])
+
+  // Make sure the overlay stays open when resizing the window.
+  useEffect(() => {
+    const scroller = scrollerRef.current
+    if (!scroller) return () => {}
+
+    const resize = () => {
+      if (positions.open.visible.get() !== 1) return
+      scroller.scrollLeft = positions.open.x.get()
+      scroller.scrollTop = positions.open.y.get()
+    }
+
+    window.addEventListener('resize', resize)
+    return () => window.removeEventListener('resize', resize)
+    // We're not checking for all deps, because that will cause rerenders.
+    // The scroller context shouldn't be changing, but at the moment it is.
+  }, [positions, scrollerRef])
+
+  useEffect(() => {
+    if (isPresent) return
+
+    position.set(OverlayPosition.CLOSED)
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    scrollTo({
+      x: positions.closed.x.get(),
+      y: positions.closed.y.get(),
+    }).then(() => safeToRemove?.())
+  }, [isPresent, position, positions, safeToRemove, scrollTo])
+
+  // Only go back to a previous page if the overlay isn't closed.
+  const closeOverlay = useCallback(() => {
+    if (position.get() !== OverlayPosition.OPENED) return
+    position.set(OverlayPosition.CLOSED)
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    pageRouter.go(closeSteps * -1)
+  }, [closeSteps, pageRouter, position])
+
+  // Handle escape key
+  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
+  const handleEscape = (e: KeyboardEvent | Event) => {
+    if (active && (e as KeyboardEvent)?.key === 'Escape') closeOverlay()
+  }
+  useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
+
+  // When the overlay isn't visible anymore, we navigate back.
+  useEffect(() => positions.open.visible.onChange((o) => o === 0 && closeOverlay()))
+
+  // Measure the offset of the overlay in the scroller.
+
+  const offsetY = useMotionValue(0)
+  useEffect(() => {
+    if (!overlayRef.current) return () => {}
+    const ro = new ResizeObserver(([entry]) => offsetY.set(entry.contentRect.top))
+    ro.observe(overlayRef.current)
+    return () => ro.disconnect()
+  }, [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] as MotionValue<number | string>[],
+    ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
+  )
+
+  return (
+    <>
+      <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
+      <Scroller {...className('root')} grid={false} hideScrollbar>
+        <div {...className('beforeOverlay')} onClick={closeOverlay} />
+        <div {...className('overlay')} ref={overlayRef}>
+          <div {...className('overlayPane')}>
+            <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
+          </div>
+        </div>
+        <div {...className('afterOverlay')} />
+      </Scroller>
+    </>
+  )
+}

package/LayoutOverlay/components/LayoutOverlayHeader.tsx

@@ -0,0 +1,5 @@
+import { LayoutHeaderProps, LayoutHeader } from '../../Layout'
+
+export function LayoutOverlayHeader(props: LayoutHeaderProps) {
+  return <LayoutHeader {...props} noAlign />
+}

package/LayoutOverlay/hooks/useOverlayPosition.ts

@@ -0,0 +1,70 @@
+import { useScrollerContext } from '@graphcommerce/framer-scroller'
+import {
+  useConstant,
+  useElementScroll,
+  useIsomorphicLayoutEffect,
+} from '@graphcommerce/framer-utils'
+import { motionValue } from 'framer-motion'
+import { useEffect } from 'react'
+
+export function useOverlayPosition() {
+  const { getScrollSnapPositions, scrollerRef } = useScrollerContext()
+
+  const state = useConstant(() => ({
+    open: {
+      x: motionValue(0),
+      y: motionValue(0),
+      visible: motionValue(0),
+    },
+    closed: { x: motionValue(0), y: motionValue(0) },
+  }))
+
+  const scroll = useElementScroll(scrollerRef)
+
+  useIsomorphicLayoutEffect(() => {
+    if (!scrollerRef.current) return () => {}
+
+    const measure = () => {
+      const positions = getScrollSnapPositions()
+      state.open.x.set(positions.x[1])
+      state.closed.x.set(positions.x[0])
+      state.open.y.set(positions.y[1])
+      state.closed.y.set(positions.y[0])
+    }
+    const ro = new ResizeObserver(measure)
+    measure()
+
+    ro.observe(scrollerRef.current)
+    return () => ro.disconnect()
+  })
+
+  // sets a float between 0 and 1 for the visibility of the overlay
+  useEffect(() => {
+    const calc = () => {
+      const x = scroll.x.get()
+      const y = scroll.y.get()
+
+      const yC = state.closed.y.get()
+      const yO = state.open.y.get()
+      const visY = yC === yO ? 1 : Math.max(0, Math.min(1, (y - yC) / (yO - yC)))
+
+      const xC = state.closed.x.get()
+      const xO = state.open.x.get()
+      const visX = xO === xC ? 1 : Math.max(0, Math.min(1, (x - xC) / (xO - xC)))
+
+      // todo: visibility sometimes flickers
+      state.open.visible.set(visY * visX)
+    }
+
+    const cancelY = scroll.y.onChange(calc)
+    const cancelX = scroll.x.onChange(calc)
+    calc()
+
+    return () => {
+      cancelY()
+      cancelX()
+    }
+  }, [state, scroll])
+
+  return state
+}

package/LayoutOverlay/index.ts

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

package/Page/App.tsx

@@ -2,6 +2,7 @@ import { FramerNextPages } from '@graphcommerce/framer-next-pages'
 import { LazyMotion } from 'framer-motion'
 import { AppPropsType } from 'next/dist/shared/lib/utils'
 import React, { useEffect } from 'react'
+import PageLoadIndicator from '../PageLoadIndicator'
 import { AppProps } from './types'
 
 export default function App(props: AppProps & AppPropsType) {
@@ -9,6 +10,7 @@ export default function App(props: AppProps & AppPropsType) {
 
   return (
     <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+      <PageLoadIndicator />
       <FramerNextPages {...props} />
     </LazyMotion>
   )

package/PageMeta/index.tsx

@@ -1,3 +1,4 @@
+import { usePageContext } from '@graphcommerce/framer-next-pages'
 import Head from 'next/head'
 
 // https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
@@ -22,11 +23,13 @@ export type PageMetaProps = {
 }
 
 export default function PageMeta(props: PageMetaProps) {
+  const { active } = usePageContext()
   const { title, canonical, metaDescription, metaRobots = ['all'] } = props
 
   if (!(canonical ?? 'http').startsWith('http'))
     throw new Error(`canonical must start with http:// or https://, '${canonical}' given`)
 
+  if (!active) return null
   return (
     <Head>
       <title>{title.trim()}</title>

package/Pagination/index.tsx

@@ -1,6 +1,5 @@
 import { Fab, makeStyles, Theme, Typography } from '@material-ui/core'
 import { PaginationProps, usePagination } from '@material-ui/lab'
-import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'

package/Row/ButtonLinkList/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import Row from '..'
 import SectionContainer from '../../SectionContainer'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/Row/ColumnOneBoxed/index.tsx

@@ -1,4 +1,4 @@
-import { Container, ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import Row from '..'
 

package/Row/ColumnTwoWithTop/index.tsx

@@ -1,5 +1,5 @@
-import { Container, makeStyles, Theme } from '@material-ui/core'
-import React, { PropsWithChildren } from 'react'
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
 import Row from '..'
 import { UseStyles } from '../../Styles'
 
@@ -19,7 +19,7 @@ const useStyles = makeStyles(
           "left right"
         `,
         gridTemplateColumns: '1fr auto',
-        gap: `${theme.spacings.sm} ${theme.spacings.xl}`,
+        gap: `${theme.spacings.sm} ${theme.spacings.xxl}`,
       },
     },
     top: {

package/Row/ContentLinks/index.tsx

@@ -5,12 +5,12 @@ import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    root: {},
-    scroller: {
+    root: {
       marginBottom: `${theme.spacings.lg}`,
+    },
+    scroller: {
       justifyContent: 'start',
       gap: `${theme.spacings.md}`,
-      alignContent: 'center',
       gridAutoColumns: `max-content`,
     },
     title: {