@graphcommerce/next-ui 8.1.0-canary.9 → 9.0.0-canary.55

package/Intl/NumberFormat/CurrencyFormat.tsx

@@ -0,0 +1,191 @@
+import { NumberFormat, NumberFormatPropsType } from './NumberFormat'
+
+// https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes
+type Currency =
+  | 'AED'
+  | 'AFN'
+  | 'ALL'
+  | 'AMD'
+  | 'ANG'
+  | 'AOA'
+  | 'ARS'
+  | 'AUD'
+  | 'AWG'
+  | 'AZN'
+  | 'BAM'
+  | 'BBD'
+  | 'BDT'
+  | 'BGN'
+  | 'BHD'
+  | 'BIF'
+  | 'BMD'
+  | 'BND'
+  | 'BOB'
+  | 'BOV'
+  | 'BRL'
+  | 'BSD'
+  | 'BTN'
+  | 'BWP'
+  | 'BYN'
+  | 'BZD'
+  | 'CAD'
+  | 'CDF'
+  | 'CHE'
+  | 'CHF'
+  | 'CHW'
+  | 'CLF'
+  | 'CLP'
+  | 'CNY'
+  | 'COP'
+  | 'COU'
+  | 'CRC'
+  | 'CUP'
+  | 'CVE'
+  | 'CZK'
+  | 'DJF'
+  | 'DKK'
+  | 'DOP'
+  | 'DZD'
+  | 'EGP'
+  | 'ERN'
+  | 'ETB'
+  | 'EUR'
+  | 'FJD'
+  | 'FKP'
+  | 'GBP'
+  | 'GEL'
+  | 'GHS'
+  | 'GIP'
+  | 'GMD'
+  | 'GNF'
+  | 'GTQ'
+  | 'GYD'
+  | 'HKD'
+  | 'HNL'
+  | 'HTG'
+  | 'HUF'
+  | 'IDR'
+  | 'ILS'
+  | 'INR'
+  | 'IQD'
+  | 'IRR'
+  | 'ISK'
+  | 'JMD'
+  | 'JOD'
+  | 'JPY'
+  | 'KES'
+  | 'KGS'
+  | 'KHR'
+  | 'KMF'
+  | 'KPW'
+  | 'KRW'
+  | 'KWD'
+  | 'KYD'
+  | 'KZT'
+  | 'LAK'
+  | 'LBP'
+  | 'LKR'
+  | 'LRD'
+  | 'LSL'
+  | 'LYD'
+  | 'MAD'
+  | 'MDL'
+  | 'MGA'
+  | 'MKD'
+  | 'MMK'
+  | 'MNT'
+  | 'MOP'
+  | 'MRU'
+  | 'MUR'
+  | 'MVR'
+  | 'MWK'
+  | 'MXN'
+  | 'MXV'
+  | 'MYR'
+  | 'MZN'
+  | 'NAD'
+  | 'NGN'
+  | 'NIO'
+  | 'NOK'
+  | 'NPR'
+  | 'NZD'
+  | 'OMR'
+  | 'PAB'
+  | 'PEN'
+  | 'PGK'
+  | 'PHP'
+  | 'PKR'
+  | 'PLN'
+  | 'PYG'
+  | 'QAR'
+  | 'RON'
+  | 'RSD'
+  | 'RUB'
+  | 'RWF'
+  | 'SAR'
+  | 'SBD'
+  | 'SCR'
+  | 'SDG'
+  | 'SEK'
+  | 'SGD'
+  | 'SHP'
+  | 'SLE'
+  | 'SLL'
+  | 'SOS'
+  | 'SRD'
+  | 'SSP'
+  | 'STN'
+  | 'SVC'
+  | 'SYP'
+  | 'SZL'
+  | 'THB'
+  | 'TJS'
+  | 'TMT'
+  | 'TND'
+  | 'TOP'
+  | 'TRY'
+  | 'TTD'
+  | 'TWD'
+  | 'TZS'
+  | 'UAH'
+  | 'UGX'
+  | 'USD'
+  | 'USN'
+  | 'UYI'
+  | 'UYU'
+  | 'UYW'
+  | 'UZS'
+  | 'VED'
+  | 'VES'
+  | 'VND'
+  | 'VUV'
+  | 'WST'
+  | 'XAF'
+  | 'XAG'
+  | 'XAU'
+  | 'XBA'
+  | 'XBB'
+  | 'XBC'
+  | 'XBD'
+  | 'XCD'
+  | 'XDR'
+  | 'XOF'
+  | 'XPD'
+  | 'XPF'
+  | 'XPT'
+  | 'XSU'
+  | 'XTS'
+  | 'XUA'
+  | 'XXX'
+  | 'YER'
+  | 'ZAR'
+  | 'ZMW'
+  | 'ZWL'
+
+export type CurrencyFormatProps = Omit<NumberFormatPropsType, 'numberStyle'> & {
+  currency: Currency | (string & Record<never, never>)
+}
+
+export function CurrencyFormat(props: CurrencyFormatProps) {
+  return <NumberFormat {...props} numberStyle='currency' />
+}

package/Intl/NumberFormat/NumberFormat.tsx

@@ -0,0 +1,24 @@
+import { Box, SxProps, Theme } from '@mui/material'
+import { useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+
+export type NumberFormatPropsType = {
+  children?: number | bigint | null | undefined
+  numberStyle: Intl.NumberFormatOptions['style']
+  sx?: SxProps<Theme>
+} & Omit<Intl.NumberFormatOptions, 'style'>
+
+export function NumberFormat(props: NumberFormatPropsType) {
+  const { children, numberStyle, ...options } = props
+
+  const memoOptions = useMemoObject({ ...options, style: numberStyle })
+  const locale = useLocale()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, memoOptions), [locale, memoOptions])
+
+  return (
+    <Box component='span' suppressHydrationWarning>
+      {children ? formatter.format(children) : null}
+    </Box>
+  )
+}

package/Intl/NumberFormat/PercentFormat.tsx

@@ -0,0 +1,5 @@
+import { NumberFormat, NumberFormatPropsType } from './NumberFormat'
+
+export function PercentFormat(props: Omit<NumberFormatPropsType, 'numberStyle'>) {
+  return <NumberFormat {...props} numberStyle='percent' />
+}

package/Intl/NumberFormat/UnitFormat.tsx

@@ -0,0 +1,59 @@
+import { NumberFormatPropsType, NumberFormat } from './NumberFormat'
+
+/**
+ * https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers
+ */
+type Unit =
+  | 'acre'
+  | 'bit'
+  | 'byte'
+  | 'celsius'
+  | 'centimeter'
+  | 'day'
+  | 'degree'
+  | 'fahrenheit'
+  | 'fluid-ounce'
+  | 'foot'
+  | 'gallon'
+  | 'gigabit'
+  | 'gigabyte'
+  | 'gram'
+  | 'hectare'
+  | 'hour'
+  | 'inch'
+  | 'kilobit'
+  | 'kilobyte'
+  | 'kilogram'
+  | 'kilometer'
+  | 'liter'
+  | 'megabit'
+  | 'megabyte'
+  | 'meter'
+  | 'microsecond'
+  | 'mile'
+  | 'mile-scandinavian'
+  | 'milliliter'
+  | 'millimeter'
+  | 'millisecond'
+  | 'minute'
+  | 'month'
+  | 'nanosecond'
+  | 'ounce'
+  | 'percent'
+  | 'petabyte'
+  | 'pound'
+  | 'second'
+  | 'stone'
+  | 'terabit'
+  | 'terabyte'
+  | 'week'
+  | 'yard'
+  | 'year'
+
+export type UnitFormatProps = Omit<NumberFormatPropsType, 'numberStyle'> & {
+  unit: Unit | (string & Record<never, never>)
+}
+
+export function UnitFormat(props: UnitFormatProps) {
+  return <NumberFormat {...props} numberStyle='unit' />
+}

package/Intl/NumberFormat/index.ts

@@ -0,0 +1,4 @@
+export * from './CurrencyFormat'
+export * from './NumberFormat'
+export * from './UnitFormat'
+export * from './PercentFormat'

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

@@ -28,6 +28,9 @@ export type LayoutHeaderProps = FloatingProps &
     sx?: SxProps<Theme>
 
     hideBackButton?: boolean
+
+    hideSm?: boolean
+    hideMd?: boolean
   }
 
 type ComponentStyleProps = {
@@ -36,6 +39,8 @@ type ComponentStyleProps = {
   children: boolean
   floatingSm: boolean
   floatingMd: boolean
+  hideSm: boolean
+  hideMd: boolean
   size: 'small' | 'responsive'
 }
 
@@ -44,7 +49,7 @@ const { selectors, withState } = extendableComponent<ComponentStyleProps, 'Layou
   ['root'] as const,
 )
 
-export function LayoutHeader(props: LayoutHeaderProps) {
+export const LayoutHeader = React.memo<LayoutHeaderProps>((props) => {
   const {
     children,
     divider,
@@ -56,6 +61,8 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     size = 'responsive',
     sx = [],
     bgColor,
+    hideSm = false,
+    hideMd = false,
   } = props
   const showBack = useShowBack() && !hideBackButton
   const showClose = useShowClose()
@@ -88,6 +95,8 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     children: !!children,
     divider: !!divider,
     size,
+    hideSm,
+    hideMd,
   })
 
   return (
@@ -115,6 +124,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
+            '&.hideSm .LayoutHeaderContent-left': {
+              display: 'none',
+            },
           },
 
           [theme.breakpoints.up('md')]: {
@@ -140,6 +152,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
+            '&.hideMd .LayoutHeaderContent-left': {
+              display: 'none',
+            },
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -159,5 +174,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'
@@ -41,6 +46,7 @@ export function LayoutHeaderBack(props: BackProps) {
   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
@@ -49,6 +55,8 @@ export function LayoutHeaderBack(props: BackProps) {
   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

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/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/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',
+      }}
+    />
   )
 }

package/PageMeta/PageMeta.tsx

@@ -1,13 +1,7 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-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/client/resolve-href'
-import { NextRouter } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import type {} from '@graphcommerce/next-config'
-import { storefrontConfig } from '../hooks'
+import { Canonical, useCanonical } from './canonicalize'
 
 // https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
 export type MetaRobots =
@@ -23,8 +17,6 @@ export type MetaRobots =
   | `max-video-preview:${number}`
 type MetaRobotsAll = ['all' | 'none']
 
-type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
-
 export type PageMetaProps = {
   title: string
   canonical?: Canonical
@@ -36,73 +28,6 @@ export type PageMetaProps = {
   ogType?: string | null
 }
 
-type PartialNextRouter = Pick<
-  NextRouter,
-  'pathname' | 'locale' | 'locales' | 'isLocaleDomain' | 'domainLocales' | 'defaultLocale'
->
-export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
-  let canonical = incoming
-
-  if (!canonical) return canonical
-
-  if (!canonical.startsWith('http') && !canonical.startsWith('/')) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        `canonical is relative (${canonical}), a canonical must start with '/', 'http://' or 'https://'`,
-      )
-    }
-    canonical = `/${canonical}`
-  }
-
-  if (canonical.startsWith('/')) {
-    let [href, as = href] = resolveHref(router as NextRouter, canonical, true)
-
-    const curLocale = router.locale
-
-    // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
-    const localeDomain = getDomainLocale(
-      as,
-      curLocale,
-      router && router.locales,
-      router.domainLocales,
-    )
-
-    if (localeDomain) {
-      canonical = localeDomain
-    } else {
-      const conf = storefrontConfig(router.locale)
-
-      href = addBasePath(
-        addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
-      )
-
-      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
-
-      if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
-
-      if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
-
-      canonical = `${siteUrl}${href}`
-    }
-  }
-
-  if (!canonical.startsWith('http')) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(
-        `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,
-      )
-    }
-    canonical = undefined
-  }
-
-  return canonical
-}
-
-export function useCanonical(incoming?: Canonical) {
-  const router = useRouter()
-  return canonicalize(router, incoming)
-}
-
 export function PageMeta(props: PageMetaProps) {
   const { active } = usePageContext()
   const {