@graphcommerce/next-ui 8.1.0-canary.8 → 9.0.0-canary.100

package/Intl/RelativeTimeFormat/RelativeTimeFormat.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import { relativeTimeFormatUnitAuto } from './relativeTimeFormatAutoUnit'
+
+export function useRelativeTimeFormatter(props: Intl.RelativeTimeFormatOptions) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.RelativeTimeFormat(locale, memoOptions), [locale, memoOptions])
+}
+
+export type RelativeTimeFormatProps = {
+  children: number
+  unit?: Intl.RelativeTimeFormatUnit
+  styleFormat?: Intl.RelativeTimeFormatStyle
+} & Omit<Intl.RelativeTimeFormatOptions, 'style'>
+
+/**
+ * Alternative: {@link file://./RelativeToTimeFormat.tsx}
+ */
+export const RelativeTimeFormat = forwardRef<HTMLSpanElement, RelativeTimeFormatProps>(
+  (props, ref) => {
+    const { children, unit, styleFormat, localeMatcher, numeric, ...rest } = props
+    const formatter = useRelativeTimeFormatter({ localeMatcher, numeric, style: styleFormat })
+
+    const [value, autoUnit] = relativeTimeFormatUnitAuto({ value: children, unit })
+
+    return (
+      <span suppressHydrationWarning ref={ref} {...rest}>
+        {children ? formatter.format(value, autoUnit) : null}
+      </span>
+    )
+  },
+)

package/Intl/RelativeTimeFormat/RelativeToTimeFormat.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, useMemo } from 'react'
+import { DateValue, toDate } from '../DateTimeFormat/toDate'
+import { RelativeTimeFormat, RelativeTimeFormatProps } from './RelativeTimeFormat'
+
+type RelativeToTimeFormatProps = Omit<RelativeTimeFormatProps, 'children'> & {
+  /**
+   * Date to format a relative value for.
+   */
+  children: DateValue
+  /**
+   * If provided, the component will format a relative value to this date.
+   * Else, it will format a relative value to the current date.
+   */
+  to?: DateValue
+}
+
+export const RelativeToTimeFormat = forwardRef<HTMLSpanElement, RelativeToTimeFormatProps>(
+  (props, ref) => {
+    const { children, to, ...rest } = props
+
+    const relativeTo = useMemo(() => {
+      const date = toDate(children)
+      if (!date) return 0
+      const toDateValue = (to && toDate(to)) || new Date()
+
+      return Math.round((date.getTime() - toDateValue.getTime()) / 1000)
+    }, [children, to])
+
+    return (
+      <RelativeTimeFormat {...rest} ref={ref}>
+        {relativeTo}
+      </RelativeTimeFormat>
+    )
+  },
+)

package/Intl/RelativeTimeFormat/index.ts

@@ -0,0 +1,2 @@
+export * from './RelativeTimeFormat'
+export * from './RelativeToTimeFormat'

package/Intl/RelativeTimeFormat/relativeTimeFormatAutoUnit.ts

@@ -0,0 +1,23 @@
+type UseRelativeTimeFormatUnitAutoProps = {
+  value: number
+  unit?: Intl.RelativeTimeFormatUnit
+}
+
+export function relativeTimeFormatUnitAuto(
+  props: UseRelativeTimeFormatUnitAutoProps,
+): [number, Intl.RelativeTimeFormatUnit] {
+  const { value, unit } = props
+
+  if (unit) return [value, unit]
+
+  // Calculate the absolute value once
+  const absValue = Math.abs(value)
+
+  if (absValue >= 60 * 60 * 24 * 365) return [Math.round(value / (60 * 60 * 24 * 365)), 'year']
+  if (absValue >= 60 * 60 * 24 * 30) return [Math.round(value / (60 * 60 * 24 * 30)), 'month']
+  if (absValue >= 60 * 60 * 24 * 7) return [Math.round(value / (60 * 60 * 24 * 7)), 'week']
+  if (absValue >= 60 * 60 * 24) return [Math.round(value / (60 * 60 * 24)), 'day']
+  if (absValue >= 60 * 60) return [Math.round(value / (60 * 60)), 'hour']
+  if (absValue >= 60) return [Math.round(value / 60), 'minute']
+  return [Math.round(value), 'second']
+}

package/Intl/index.ts

@@ -0,0 +1,11 @@
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator
+// export * from './Collator' // Intl.Collator
+
+export * from './DisplayNames' // Intl.DisplayNames
+export * from './DateTimeFormat' // Intl.DateTimeFormat
+export * from './ListFormat' // Intl.ListFormat
+// export * from './Locale' // Intl.Locale
+export * from './NumberFormat' // Intl.NumberFormat
+// export * from './PluralRules' // Intl.PluralRules
+export * from './RelativeTimeFormat' // Intl.RelativeTimeFormat
+// export * from './Segmenter' // Intl.Segmenter

package/JsonLd/JsonLd.tsx

@@ -2,14 +2,15 @@ import Head from 'next/head'
 import { safeJsonLdReplacer } from './safeJsonLdReplacer'
 
 export function JsonLd<T extends { '@type': string }>(props: {
+  keyVal?: string
   item: T & { '@context': 'https://schema.org' }
 }) {
-  const { item } = props
+  const { item, keyVal } = props
 
   return (
     <Head>
       <script
-        key='jsonld'
+        key={keyVal ?? 'jsonld'}
         type='application/ld+json'
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: JSON.stringify(item, safeJsonLdReplacer) }}

package/Layout/components/LayoutHeader.tsx

@@ -1,13 +1,14 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
-import { LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
+import { BackProps, LayoutHeaderBack, useShowBack } from './LayoutHeaderBack'
 import { LayoutHeaderClose, useShowClose } from './LayoutHeaderClose'
 import { LayoutHeaderContent, LayoutHeaderContentProps } from './LayoutHeaderContent'
 import { FloatingProps } from './LayoutHeadertypes'
 
 export type LayoutHeaderProps = FloatingProps &
-  Omit<LayoutHeaderContentProps, 'left' | 'right'> & {
+  Omit<LayoutHeaderContentProps, 'left' | 'right'> &
+  Pick<BackProps, 'disableBackNavigation'> & {
     /**
      * Button to display on the left side of the title
      *
@@ -28,6 +29,9 @@ export type LayoutHeaderProps = FloatingProps &
     sx?: SxProps<Theme>
 
     hideBackButton?: boolean
+
+    hideSm?: boolean | null
+    hideMd?: boolean | null
   }
 
 type ComponentStyleProps = {
@@ -36,15 +40,16 @@ type ComponentStyleProps = {
   children: boolean
   floatingSm: boolean
   floatingMd: boolean
+  hideSm: boolean
+  hideMd: boolean
   size: 'small' | 'responsive'
 }
 
-const { selectors, withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>(
-  'LayoutHeader',
-  ['root'] as const,
-)
+const { withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>('LayoutHeader', [
+  'root',
+] as const)
 
-export function LayoutHeader(props: LayoutHeaderProps) {
+export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
   const {
     children,
     divider,
@@ -56,6 +61,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     size = 'responsive',
     sx = [],
     bgColor,
+    hideSm = false,
+    hideMd = false,
+    disableBackNavigation,
   } = props
   const showBack = useShowBack() && !hideBackButton
   const showClose = useShowClose()
@@ -69,7 +77,12 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   if (divider || primary || secondary) floatingSm = false
 
   const close = showClose && <LayoutHeaderClose />
-  const back = showBack && <LayoutHeaderBack breakpoint={floatingSm ? 'xs' : undefined} />
+  const back = showBack && (
+    <LayoutHeaderBack
+      breakpoint={floatingSm ? 'xs' : undefined}
+      disableBackNavigation={disableBackNavigation}
+    />
+  )
 
   let left = secondary
   let right = primary
@@ -88,6 +101,8 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     children: !!children,
     divider: !!divider,
     size,
+    hideSm: !!hideSm,
+    hideMd: !!hideMd,
   })
 
   return (
@@ -115,6 +130,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
+            '&.hideSm .LayoutHeaderContent-left': {
+              display: 'none',
+            },
           },
 
           [theme.breakpoints.up('md')]: {
@@ -140,6 +158,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
+            '&.hideMd .LayoutHeaderContent-left': {
+              display: 'none',
+            },
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -159,5 +180,4 @@ export function LayoutHeader(props: LayoutHeaderProps) {
       </LayoutHeaderContent>
     </Box>
   )
-}
-LayoutHeader.selectors = selectors
+})

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,4 +1,9 @@
-import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
+import {
+  useUp,
+  usePrevUp,
+  usePageContext,
+  usePrevPageRouter,
+} from '@graphcommerce/framer-next-pages'
 import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -7,7 +12,12 @@ import { IconSvg } from '../../IconSvg'
 import { responsiveVal } from '../../Styles'
 import { iconChevronLeft } from '../../icons'
 
-export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
+export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'> & {
+  /**
+   * Will not use `router.back()` if available, and will always use the `up.href`
+   */
+  disableBackNavigation?: boolean
+}
 
 export function useShowBack() {
   const path = useRouter().asPath.split('?')[0]
@@ -16,10 +26,7 @@ export function useShowBack() {
   const { backSteps } = usePageContext()
 
   const canClickBack = backSteps > 0 && path !== prevUp?.href
-
-  if (canClickBack) return true
-  if (up?.href && up.href !== path) return true
-  return false
+  return canClickBack || (up?.href && up.href !== path)
 }
 
 const buttonSx: SxProps<Theme> = (theme) => ({
@@ -36,19 +43,23 @@ const buttonSx: SxProps<Theme> = (theme) => ({
 })
 
 export function LayoutHeaderBack(props: BackProps) {
+  const { disableBackNavigation = false, ...rest } = props
   const router = useRouter()
   const path = router.asPath.split('?')[0]
   const up = useUp()
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
+  const prevPageRouter = usePrevPageRouter()
 
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
-  const canClickBack = backSteps > 0 && path !== prevUp?.href
+  const canClickBack = backSteps > 0 && path !== prevUp?.href && !disableBackNavigation
 
   let label = i18n._(/* i18n */ 'Back')
   if (up?.href === path && up?.title) label = up.title
   if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 
+  if (up && prevPageRouter?.asPath === up?.href) label = up.title
+
   if (canClickBack) {
     return (
       <LinkOrButton
@@ -57,7 +68,7 @@ export function LayoutHeaderBack(props: BackProps) {
         color='inherit'
         startIcon={backIcon}
         aria-label={label}
-        {...props}
+        {...rest}
       >
         <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
           {label}
@@ -74,7 +85,7 @@ export function LayoutHeaderBack(props: BackProps) {
         startIcon={backIcon}
         aria-label={up.title}
         color='inherit'
-        {...props}
+        {...rest}
       >
         <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
           {up.title}

package/Layout/components/LayoutHeaderClose.tsx

@@ -6,18 +6,24 @@ import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { useFabSize } from '../../Theme'
 import { iconClose } from '../../icons'
 
+type LayoutHeaderCloseProps = {
+  onClose?: () => void
+}
+
 export function useShowClose() {
   const { overlayGroup } = usePageContext()
   return !!overlayGroup
 }
 
-export function LayoutHeaderClose() {
+export function LayoutHeaderClose(props: LayoutHeaderCloseProps) {
+  const { onClose } = props
   const { closeSteps } = usePageContext()
   const [disabled, setDisabled] = useState(false)
   const go = useGo(closeSteps * -1)
   const onClick = () => {
     setDisabled(true)
-    go()
+
+    return onClose ? onClose() : go()
   }
 
   const fabSize = useFabSize('responsive')

package/Layout/components/LayoutTitle.tsx

@@ -40,12 +40,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
           alignItems: 'center',
           justifyContent: 'center',
           gap: `6px`,
-          flexFlow: 'unset',
-          [theme.breakpoints.up('md')]: {
-            flexFlow: 'column',
-          },
           '&.sizeSmall': {
-            flexFlow: 'unset',
             overflow: 'hidden',
             '& svg': {
               width: responsiveVal(24, 28),

package/LayoutDefault/components/LayoutDefault.tsx

@@ -129,19 +129,21 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             })}
           >
             {menuFab}
-            <Box
-              sx={(theme) => ({
-                display: 'flex',
-                flexDirection: 'row-reverse',
-                gap: theme.spacings.sm,
-                [theme.breakpoints.up('md')]: {
-                  flexDirection: 'column',
-                  alignItems: 'flex-end',
-                },
-              })}
-            >
-              {cartFab}
-            </Box>
+            {cartFab && (
+              <Box
+                sx={(theme) => ({
+                  display: 'flex',
+                  flexDirection: 'row-reverse',
+                  gap: theme.spacings.sm,
+                  [theme.breakpoints.up('md')]: {
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                  },
+                })}
+              >
+                {cartFab}
+              </Box>
+            )}
           </Box>
         ) : (
           <div />

package/LazyHydrate/LazyHydrate.tsx

@@ -1,5 +1,12 @@
 import { Box, BoxProps } from '@mui/material'
-import React, { useState, useRef, startTransition, useLayoutEffect, useEffect } from 'react'
+import React, {
+  useState,
+  useRef,
+  startTransition,
+  useLayoutEffect,
+  useEffect,
+  CSSProperties,
+} from 'react'
 
 // Make sure the server doesn't choke on the useLayoutEffect
 export const useLayoutEffect2 = typeof window !== 'undefined' ? useLayoutEffect : useEffect
@@ -18,6 +25,14 @@ export type LazyHydrateProps = BoxProps<'div'> & {
    * - Hydrate the component on some state `<LazyHydrate hydrated={someState}>` where someState initially is false and later becomes true.
    */
   hydrated?: boolean
+
+  /**
+   * By default LazyHydrate does not defer the rendering of components when they are rendered client
+   * side, because using an IntersectionObserver on an element with no height, will cause all siblings to render at once.
+   *
+   * By proving a height, we can use the IntersectionObserver on the client as well.
+   */
+  height?: CSSProperties['height']
 }
 
 /**
@@ -26,7 +41,7 @@ export type LazyHydrateProps = BoxProps<'div'> & {
  * This can be a way to improve the TBT of a page.
  */
 export function LazyHydrate(props: LazyHydrateProps) {
-  const { hydrated, children, ...elementProps } = props
+  const { hydrated, children, height, ...elementProps } = props
   const rootRef = useRef<HTMLDivElement>(null)
 
   const [isHydrated, setIsHydrated] = useState(hydrated || false)
@@ -37,7 +52,7 @@ export function LazyHydrate(props: LazyHydrateProps) {
     if (isHydrated || !rootRef.current) return undefined
 
     // If the element wasn't rendered on the server, we hydrate it immediately
-    if (!rootRef.current?.hasAttribute('data-lazy-hydrate')) {
+    if (!height && !rootRef.current?.hasAttribute('data-lazy-hydrate')) {
       setIsHydrated(true)
       return undefined
     }
@@ -77,6 +92,7 @@ export function LazyHydrate(props: LazyHydrateProps) {
       dangerouslySetInnerHTML={{ __html: '' }}
       suppressHydrationWarning
       {...elementProps}
+      style={{ ...elementProps.style, height }}
     />
   )
 }

package/Overlay/components/OverlayBase.tsx

@@ -1,3 +1,4 @@
+import { Direction } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   dvh,
@@ -46,7 +47,7 @@ export type LayoutOverlayBaseProps = {
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
   active: boolean
-  direction?: 1 | -1
+  direction?: Direction
   onClosed: () => void
   offsetPageY?: number
   isPresent: boolean
@@ -123,7 +124,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
   )(th)
 
-  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap } = useScrollerContext()
+  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap, enableSnap } =
+    useScrollerContext()
   const scrollTo = useScrollTo()
 
   const beforeRef = useRef<HTMLDivElement>(null)
@@ -137,7 +139,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
   const match = useMatchMedia()
   const positions = useConstant(() => ({
-    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(0) },
+    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(direction === 0 ? 1 : 0) },
     closed: { x: motionValue(0), y: motionValue(0) },
   }))
 
@@ -277,17 +279,40 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
 
-    if (!scroller || !isPresent) return
+    if (!scroller || !isPresent || position.get() === OverlayPosition.OPENED) return
 
     if (variant() === 'right') document.body.style.overflow = 'hidden'
 
-    if (position.get() !== OverlayPosition.OPENED && !scroll.animating.get()) {
+    if (direction === 0) {
+      disableSnap()
+      scroller.scrollTop = positions.open.y.get()
+      scroller.scrollLeft = positions.open.x.get()
+      scroll.y.set(positions.open.y.get())
+      scroll.x.set(positions.open.x.get())
+      position.set(OverlayPosition.OPENED)
+      enableSnap()
+    } else if (!scroll.animating.get()) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       scrollTo(openClosePositions().open, { stopAnimationOnScroll: false }).then(() =>
         position.set(OverlayPosition.OPENED),
       )
     }
-  }, [isPresent, openClosePositions, position, scroll.animating, scrollTo, scrollerRef, variant])
+  }, [
+    direction,
+    disableSnap,
+    enableSnap,
+    isPresent,
+    openClosePositions,
+    position,
+    positions.open.x,
+    positions.open.y,
+    scroll.animating,
+    scroll.x,
+    scroll.y,
+    scrollTo,
+    scrollerRef,
+    variant,
+  ])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {

package/Overlay/components/OverlayHeader.tsx

@@ -0,0 +1,27 @@
+import { LayoutHeaderProps, LayoutTitle, TitleProps } from '../../Layout'
+import { LayoutHeaderClose } from '../../Layout/components/LayoutHeaderClose'
+import { LayoutOverlayHeader } from '../../LayoutOverlay/components/LayoutOverlayHeader'
+
+type OverlayHeaderProps = Omit<LayoutHeaderProps, 'hideBackButton' | 'switchPoint'> &
+  Pick<TitleProps, 'icon'> & { onClose: () => void }
+
+export const OverlayHeader = (props: OverlayHeaderProps) => {
+  const { children, onClose, sx = [], icon, primary, secondary, ...rest } = props
+
+  return (
+    <LayoutOverlayHeader
+      noAlign
+      sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
+      switchPoint={-10000}
+      size='small'
+      hideBackButton
+      primary={primary ?? <LayoutHeaderClose onClose={onClose} />}
+      secondary={primary ? <LayoutHeaderClose onClose={onClose} /> : secondary}
+      {...rest}
+    >
+      <LayoutTitle size='small' component='span' icon={icon}>
+        {children}
+      </LayoutTitle>
+    </LayoutOverlayHeader>
+  )
+}

package/Overlay/components/index.ts

@@ -1,3 +1,4 @@
 export * from './OverlayBase'
 export * from './Overlay'
 export * from './OverlayStickyBottom'
+export * from './OverlayHeader'

package/PageLoadIndicator/PageLoadIndicator.tsx

@@ -1,6 +1,15 @@
-import { LinearProgress, Fade } from '@mui/material'
+import { LinearProgress, LinearProgressProps } from '@mui/material'
+import { m, motionValue, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
+
+export const showPageLoadIndicator = motionValue(false)
+
+const MLinearProgress = m(
+  forwardRef((props: Omit<LinearProgressProps, 'style'>, ref: LinearProgressProps['ref']) => (
+    <LinearProgress ref={ref} {...props} />
+  )),
+)
 
 /**
  * Creates a [LinearProgress](https://mui.com/components/progress/#linear) animation when the route
@@ -24,18 +33,20 @@ export function PageLoadIndicator() {
     }
   }, [events])
 
+  const opacity = useTransform(() => (showPageLoadIndicator.get() || loading ? 1 : 0))
+
   return (
-    <Fade in={loading}>
-      <LinearProgress
-        sx={{
-          position: 'fixed',
-          width: '100%',
-          top: 0,
-          height: 3,
-          marginBottom: '-3px',
-          zIndex: 'tooltip',
-        }}
-      />
-    </Fade>
+    <MLinearProgress
+      style={{ opacity }}
+      sx={{
+        position: 'fixed',
+        width: '100%',
+        top: 0,
+        height: 3,
+        marginBottom: '-3px',
+        zIndex: 'tooltip',
+        transition: 'opacity 0.3s',
+      }}
+    />
   )
 }