@graphcommerce/next-ui 8.1.0-canary.44 → 8.1.0-canary.45

package/ActionCard/ActionCard.tsx

@@ -157,15 +157,15 @@ export function ActionCard(props: ActionCardProps) {
 
           '&.variantDefault': {
             position: 'relative',
-            '&::after': {
-              content: '""',
-              position: 'absolute',
-              width: '100%',
-              left: 0,
-              bottom: '-1px',
-              borderBottom: `1px solid ${theme.palette.divider}`,
-              display: 'block',
-            },
+            // '&::after': {
+            //   content: '""',
+            //   position: 'absolute',
+            //   width: '100%',
+            //   left: 0,
+            //   bottom: '-1px',
+            //   borderBottom: `1px solid ${theme.palette.divider}`,
+            //   display: 'block',
+            // },
             '&.selected': {
               backgroundColor:
                 theme.palette.mode === 'light'
@@ -179,34 +179,34 @@ export function ActionCard(props: ActionCardProps) {
               )}`,
             },
 
-            '&.sizeSmall': {
-              mt: { xs: '2px', sm: '3px', md: '5px' },
-              mb: { xs: '3px', sm: '4px', md: '6px' },
-              '&::after': {
-                mb: { xs: '-2px', sm: '-3px', md: '-5px' },
-              },
-            },
-            '&.sizeMedium': {
-              mt: { xs: '4px', sm: '5px', md: '6px' },
-              mb: { xs: '5px', sm: '6px', md: '7px' },
-              '&::after': {
-                mb: { xs: '-4px', sm: '-5px', md: '-6px' },
-              },
-            },
-            '&.sizeLarge': {
-              mt: { xs: '5px', sm: '7px', md: '8px' },
-              mb: { xs: '6px', sm: '8px', md: '9px' },
-              '&::after': {
-                mb: { xs: '-5px', sm: '-7px', md: '-8px' },
-              },
-            },
-            '&.sizeResponsive': {
-              mt: responsiveVal(2, 8),
-              mb: responsiveVal(3, 9),
-              '&::after': {
-                mb: responsiveVal(-2, -8),
-              },
-            },
+            // '&.sizeSmall': {
+            //   mt: { xs: '2px', sm: '3px', md: '5px' },
+            //   mb: { xs: '3px', sm: '4px', md: '6px' },
+            //   '&::after': {
+            //     mb: { xs: '-2px', sm: '-3px', md: '-5px' },
+            //   },
+            // },
+            // '&.sizeMedium': {
+            //   mt: { xs: '4px', sm: '5px', md: '6px' },
+            //   mb: { xs: '5px', sm: '6px', md: '7px' },
+            //   '&::after': {
+            //     mb: { xs: '-4px', sm: '-5px', md: '-6px' },
+            //   },
+            // },
+            // '&.sizeLarge': {
+            //   mt: { xs: '5px', sm: '7px', md: '8px' },
+            //   mb: { xs: '6px', sm: '8px', md: '9px' },
+            //   '&::after': {
+            //     mb: { xs: '-5px', sm: '-7px', md: '-8px' },
+            //   },
+            // },
+            // '&.sizeResponsive': {
+            //   mt: responsiveVal(2, 8),
+            //   mb: responsiveVal(3, 9),
+            //   '&::after': {
+            //     mb: responsiveVal(-2, -8),
+            //   },
+            // },
           },
 
           '&.variantOutlined': {
@@ -320,10 +320,10 @@ export function ActionCard(props: ActionCardProps) {
               <Box
                 className={classes.title}
                 sx={{
-                  '&.sizeSmall': { typography: 'body2' },
+                  '&.sizeSmall': { typography: 'body1' },
                   '&.sizeMedium': { typography: 'body1' },
                   '&.sizeLarge': { typography: 'h6' },
-                  '&.sizeResponsive': { typography: { xs: 'body2', md: 'body1', lg: 'h6' } },
+                  '&.sizeResponsive': { typography: { xs: 'body1', md: 'body1', lg: 'body1' } },
                 }}
               >
                 {title}

package/ActionCard/ActionCardAccordion.tsx

@@ -29,6 +29,7 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
           '&.Mui-expanded': { my: 0 },
           '::before': { display: 'none' },
           border: 'none',
+          borderBottom: `1px solid ${theme.palette.divider}`,
           '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.palette.divider}` },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -39,7 +40,7 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
         expandIcon={<IconSvg src={iconChevronDown} />}
         sx={{
           px: 0,
-          typography: 'h6',
+          typography: 'subtitle1',
           minHeight: 54,
           '& .MuiAccordionSummary-content': {
             display: 'flex',

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Box, Chip, SxProps, Theme } from '@mui/material'
 import { responsiveVal } from '../../Styles/responsiveVal'
-import { useDateTimeFormat } from '../../hooks'
+import { DateFormat } from '../../Intl/DateTimeFormat'
 
 export type BlogAuthorProps = {
   author: string
@@ -11,8 +11,6 @@ export type BlogAuthorProps = {
 export function BlogAuthor(props: BlogAuthorProps) {
   const { author, date, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ month: 'long', day: 'numeric' })
-
   return (
     <Box
       maxWidth='md'
@@ -48,7 +46,7 @@ export function BlogAuthor(props: BlogAuthorProps) {
               {author}
             </Box>
             <Box sx={(theme) => ({ lineHeight: 1.4, color: theme.palette.text.disabled })}>
-              {formatter.format(new Date(date))}
+              <DateFormat dateStyle='long'>{date}</DateFormat>
             </Box>
           </section>
         }

package/Blog/BlogListItem/BlogListItem.tsx

@@ -2,7 +2,7 @@ import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
-import { useDateTimeFormat } from '../../hooks'
+import { DateFormat } from '../../Intl'
 
 export type BlogListItemProps = {
   asset: React.ReactNode
@@ -19,8 +19,6 @@ const { classes } = extendableComponent(name, parts)
 export function BlogListItem(props: BlogListItemProps) {
   const { asset, url, date, title, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ dateStyle: 'long' })
-
   return (
     <Box
       className={classes.item}
@@ -67,7 +65,7 @@ export function BlogListItem(props: BlogListItemProps) {
             color: theme.palette.text.secondary,
           })}
         >
-          {formatter.format(new Date(date))}
+          <DateFormat dateStyle='long'>{date}</DateFormat>
         </Box>
       )}
 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 8.1.0-canary.45
+
+### Patch Changes
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`1895176`](https://github.com/graphcommerce-org/graphcommerce/commit/1895176b5776adcf588999ceab7edd6f53cff294) - USPS would be loaded after other pages, causing uneceesasry slowdown
+  ([@paales](https://github.com/paales))
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`74eb239`](https://github.com/graphcommerce-org/graphcommerce/commit/74eb2393a64988649178d59f53b33d41fecdd769) - Added Intl components and replaced usage sites
+  ([@paales](https://github.com/paales))
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`012b865`](https://github.com/graphcommerce-org/graphcommerce/commit/012b86560d93e35dd7ca4a9469ed65e6fb83ead0) - Move arguments of responsiveVal around so the minBreakpoint can be given as third argument
+  ([@paales](https://github.com/paales))
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`223f16a`](https://github.com/graphcommerce-org/graphcommerce/commit/223f16a0e9a7718e52e81a4e2902471a8b78d35c) - LazyHydrate component now accepts a height prop that allows deferring of rendering of the child component when initially rendered on the client. This improves performance.
+  ([@paales](https://github.com/paales))
+
 ## 8.1.0-canary.44
 
 ## 8.1.0-canary.43

package/Footer/Footer.tsx

@@ -31,7 +31,7 @@ export function Footer(props: FooterProps) {
   } = props
 
   return (
-    <LazyHydrate>
+    <LazyHydrate height={300}>
       <Container
         sx={[
           (theme) => ({

package/FramerScroller/SidebarGallery.tsx

@@ -156,7 +156,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
                 '&:not(.variantMdOneColumn)': {
-                  gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                  gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
                     theme.page.horizontal
                   } * 2)`,
                 },
@@ -201,13 +201,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   },
                   [theme.breakpoints.up('md')]: {
                     '&:not(.variantMdOneColumn)': {
-                      height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
-                        theme.spacings.lg
-                      })`,
+                      height: `max(${dvh(90)}, 40vw)`,
                       '&.sticky': {
                         position: 'sticky',
+                        top: theme.appShell.headerHeightMd,
                       },
-                      top: theme.appShell.headerHeightMd,
                     },
                   },
                 },
@@ -374,10 +372,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               },
               zoomed && {
                 [theme.breakpoints.up('md')]: {
-                  marginLeft: `calc((${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                  marginLeft: `calc((${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
                     theme.page.horizontal
                   } * 2) * -1)`,
-                  left: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                  left: `calc(${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
                     theme.page.horizontal
                   } * 2)`,
                 },

package/Intl/DateTimeFormat/DateFormat.tsx

@@ -0,0 +1,10 @@
+import { DateTimeFormat, DateTimeFormatPropsType } from './DateTimeFormat'
+
+type DateFormatOptions = Omit<
+  DateTimeFormatPropsType,
+  'timeStyle' | 'hour' | 'minute' | 'second' | 'timeZoneName'
+>
+
+export function DateFormat(props: DateFormatOptions) {
+  return <DateTimeFormat timeStyle={undefined} {...props} />
+}

package/Intl/DateTimeFormat/DateTimeFormat.tsx

@@ -0,0 +1,25 @@
+import { useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+
+export function useDateTimeFormatter(props: Intl.DateTimeFormatOptions) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.DateTimeFormat(locale, memoOptions), [locale, memoOptions])
+}
+
+type DateValue = Date | string | number | null | undefined
+export type DateTimeFormatPropsType = { children: DateValue } & Intl.DateTimeFormatOptions
+
+export function DateTimeFormat(props: DateTimeFormatPropsType) {
+  const { children } = props
+  const formatter = useDateTimeFormatter({ dateStyle: 'medium', timeStyle: 'short', ...props })
+
+  return (
+    <span suppressHydrationWarning>
+      {children
+        ? formatter.format(typeof children === 'string' ? new Date(children) : children)
+        : null}
+    </span>
+  )
+}

package/Intl/DateTimeFormat/TimeFormat.tsx

@@ -0,0 +1,10 @@
+import { DateTimeFormat, DateTimeFormatPropsType } from './DateTimeFormat'
+
+type TimeFormatProps = Omit<
+  DateTimeFormatPropsType,
+  'dateStyle' | 'month' | 'day' | 'era' | 'month' | 'weekday' | 'year'
+>
+
+export function TimeFormat(props: TimeFormatProps) {
+  return <DateTimeFormat dateStyle={undefined} {...props} />
+}

package/Intl/DateTimeFormat/index.ts

@@ -0,0 +1,3 @@
+export * from './DateTimeFormat'
+export * from './DateFormat'
+export * from './TimeFormat'

package/Intl/DisplayNames/DisplayNames.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+
+export type UseDisplayNamesProps = Intl.DisplayNamesOptions
+
+export function useDisplayNames(props: UseDisplayNamesProps) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.DisplayNames(locale, memoOptions), [locale, memoOptions])
+}
+
+type DisplayNamesProps = UseDisplayNamesProps & {
+  code: string
+}
+
+export function DisplayNames(props: DisplayNamesProps) {
+  const { code, ...options } = props
+  const formatter = useDisplayNames(options)
+
+  return <span suppressHydrationWarning>{formatter.of(code)}</span>
+}

package/Intl/DisplayNames/index.ts

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

package/Intl/ListFormat.tsx

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react'
+import { useLocale } from '../hooks'
+
+type ListFormatProps = {
+  children: React.ReactNode[]
+  listStyle?: Intl.ListFormatOptions['style']
+} & Omit<Intl.ListFormatOptions, 'style'>
+
+export function ListFormat(props: ListFormatProps) {
+  const { children, localeMatcher, listStyle: style, type } = props
+
+  const locale = useLocale()
+
+  const formatter = useMemo(
+    () => new Intl.ListFormat(locale, { localeMatcher, style, type }),
+    [locale, localeMatcher, style, type],
+  )
+
+  const childArray = React.Children.toArray(children)
+  const fauxChildren = childArray.map((child, index) => `${index}`) ?? []
+  const parts = formatter.formatToParts(fauxChildren)
+
+  return (
+    <>
+      {parts.map((part) => (
+        <React.Fragment key={part.value}>
+          {part.type === 'literal' ? part.value : childArray[part.value]}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

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/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,7 +152,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
-            '& .LayoutHeaderContent-left': import.meta.graphCommerce.breadcrumbs && {
+            '&.hideMd .LayoutHeaderContent-left': {
               display: 'none',
             },
           },
@@ -162,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/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/Styles/responsiveVal.tsx

@@ -6,15 +6,14 @@
 export function responsiveVal(
   min: number,
   max: number,
-  maxBreakpoint = 1280,
-): `max(${number}px, min(${string}, ${number}px))` {
+  minBreakpoint = 320,
+  maxBreakpoint = 2560,
+): `clamp(${number}px, ${string}, ${number}px)` {
   const round = (x: number, n: number): number => Math.round(x * 10 ** n) / 10 ** n
 
-  const minBreakpoint = 320
   const growth = (max - min) / (maxBreakpoint - minBreakpoint)
   const base = round(min - growth * minBreakpoint, 2)
   const vsize = round(growth * 100, 2)
 
-  const calc = `(${base}px + ${vsize}vw)`
-  return `max(${min}px, min(${calc}, ${max}px))`
+  return `clamp(${min}px, (${base}px + ${vsize}vw), ${max}px)`
 }

package/hooks/index.ts

@@ -5,5 +5,5 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
-export * from './useSsr'
+export * from './useIsSsr'
 export * from './useLocale'

package/hooks/useDateTimeFormat.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
-export type DateTimeFormatProps = Intl.DateTimeFormatOptions
-
-export function useDateTimeFormat(props?: DateTimeFormatProps) {
+/**
+ * @deprecated use <DateFormat/>, <TimeFormat/> or <DateTimeFormat/> instead
+ */
+export function useDateTimeFormat(props?: Intl.DateTimeFormatOptions) {
   const locale = useLocale()
-
   const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/{useSsr.ts → useIsSsr.ts}

@@ -2,6 +2,9 @@ import { useSyncExternalStore } from 'react'
 
 const emptySubscribe = () => () => {}
 
+/**
+ * This method will return true on the server and during hydration and false after that.
+ */
 export function useIsSSR() {
   return useSyncExternalStore(
     emptySubscribe,

package/hooks/useLocale.ts

@@ -1,7 +1,7 @@
 import { normalizeLocale } from '@graphcommerce/lingui-next'
 import { useStorefrontConfig } from './useStorefrontConfig'
 
-export function useLocale() {
+export function useLocale(): Intl.BCP47LanguageTag {
   const { locale } = useStorefrontConfig()
   return normalizeLocale(locale)
 }

package/hooks/useNumberFormat.ts

@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
-export type NumberFormatProps = Intl.NumberFormatOptions
-
-export function useNumberFormat(props?: NumberFormatProps) {
+/**
+ * @deprecated use <NumberFormat />, <PercentFormat /> or <UnitFormat /> instead
+ */
+export function useNumberFormat(props?: Intl.NumberFormatOptions) {
   const locale = useLocale()
   const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter

package/icons.ts

@@ -8,6 +8,7 @@ export { default as iconInvoice } from './icons/box-alt.svg'
 export { default as iconBox } from './icons/box.svg'
 export { default as iconOrderBefore } from './icons/calendar.svg'
 export { default as iconCancelAlt } from './icons/cancel-alt.svg'
+export { default as iconCancel } from './icons/cancel.svg'
 export { default as iconCartAdd } from './icons/cart-add.svg'
 export { default as iconCart } from './icons/cart.svg'
 export { default as iconChat } from './icons/chat-alt.svg'

package/index.ts

@@ -7,8 +7,8 @@ export * from './Blog/BlogList/BlogList'
 export * from './Blog/BlogListItem/BlogListItem'
 export * from './Blog/BlogTags/BlogTags'
 export * from './Blog/BlogTitle/BlogTitle'
-export * from './Button'
 export * from './Breadcrumbs'
+export * from './Button'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
 export * from './Fab'
@@ -61,6 +61,7 @@ export * from './UspList/UspListItem'
 export * from './hooks'
 export * from './icons'
 export * from './utils/cookie'
-export * from './utils/sitemap'
-export * from './utils/robots'
 export * from './utils/cssFlags'
+export * from './utils/robots'
+export * from './utils/sitemap'
+export * from './Intl'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.44",
+  "version": "8.1.0-canary.45",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,14 +26,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.44",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.44",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.44",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.44",
-    "@graphcommerce/image": "^8.1.0-canary.44",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.44",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.44",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.44",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.45",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.45",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.45",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.45",
+    "@graphcommerce/image": "^8.1.0-canary.45",
+    "@graphcommerce/lingui-next": "^8.1.0-canary.45",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.45",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.45",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/cssFlags.tsx

@@ -45,9 +45,6 @@ export function setCssFlag(flagName: string, val: true | string) {
   saveFlags(flags)
 }
 
-/**
- * @deprecated flags are not intendend to be used in JS, so this should only be used for debugging purposes.
- */
 export function getCssFlag(flagName: string) {
   return loadFlags()[flagName]
 }