@graphcommerce/next-ui 3.18.1 → 3.20.0

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: {

package/Row/HeroBanner/index.tsx

@@ -1,16 +1,13 @@
-import { ContainerProps, Theme, makeStyles } from '@material-ui/core'
-import { m, useTransform, useViewportScroll } from 'framer-motion'
+import { ContainerProps, Theme, makeStyles, useTheme, useMediaQuery } from '@material-ui/core'
+import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import Row from '..'
+import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    container: {
-      paddingLeft: 0,
-      paddingRight: 0,
-    },
     wrapper: {
       position: 'relative',
     },
@@ -22,22 +19,19 @@ const useStyles = makeStyles(
       justifyItems: 'center',
       alignContent: 'center',
       padding: `${theme.spacings.lg} ${theme.spacings.md}`,
-      minHeight: `calc(100vh - ${theme.page.headerInnerHeight.sm})`,
+      paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
+      minHeight: `calc(100vh - ${theme.appShell.headerHeightSm})`,
       '& > *': {
         zIndex: 1,
         maxWidth: 'max-content',
       },
-      [theme.breakpoints.down('sm')]: {
-        ['@supports (-webkit-touch-callout: none)']: {
-          minHeight: '-webkit-fill-available',
-        },
-      },
       [theme.breakpoints.up('md')]: {
         width: '70%',
-        minHeight: `calc(100vh - ${theme.page.headerInnerHeight.md})`,
+        minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
       },
       [theme.breakpoints.up('lg')]: {
         padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
+        paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
         width: '50%',
       },
     },
@@ -50,16 +44,23 @@ const useStyles = makeStyles(
       display: 'grid',
       justifyItems: 'center',
       overflow: 'hidden',
-      paddingBottom: theme.spacings.md,
+      paddingBottom: theme.page.horizontal,
       '& video': {
         objectFit: 'cover',
         width: '100%',
         height: '100%',
+        [theme.breakpoints.down('sm')]: {
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+        },
       },
       [theme.breakpoints.up('md')]: {
         height: '100%',
       },
     },
+    animated: {
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+      overflow: 'hidden',
+    },
   }),
   { name: 'HeroBanner' },
 )
@@ -74,23 +75,29 @@ export type HeroBannerProps = UseStyles<typeof useStyles> &
 export default function HeroBanner(props: HeroBannerProps) {
   const { pageLinks, videoSrc, children, ...containerProps } = props
   const classes = useStyles(props)
-
-  const { scrollY } = useViewportScroll()
-  const actionsAnimWidth = useTransform(
+  const theme = useTheme()
+  const scrollY = useScrollY()
+  const width = useTransform(
+    scrollY,
+    [10, 150],
+    [`calc(100% - ${responsiveVal(20, 60)}))`, `calc(100% - ${responsiveVal(0, 0)})`],
+  )
+  const matches = useMediaQuery(theme.breakpoints.down('sm'))
+  const borderRadius = useTransform(
     scrollY,
     [10, 150],
-    [`calc(100% - ${responsiveVal(30, 60)})`, `calc(100% - ${responsiveVal(0, 0)})`],
+    [`${responsiveVal(8, 12)}`, `${responsiveVal(0, 0)}`],
   )
 
   return (
-    <Row maxWidth={false} {...containerProps} className={classes.container}>
+    <Row maxWidth={false} {...containerProps} disableGutters>
       <div className={classes.wrapper}>
         <div className={classes.copy}>
           {children}
           {pageLinks}
         </div>
         <div className={classes.asset}>
-          <m.div style={{ width: actionsAnimWidth }}>
+          <m.div style={{ width: !matches ? width : 0, borderRadius }} className={classes.animated}>
             <video src={videoSrc} autoPlay muted loop playsInline disableRemotePlayback />
           </m.div>
         </div>

package/Row/IconBlocks/index.tsx

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