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

package/Config.graphqls

@@ -3,6 +3,11 @@ extend input GraphCommerceConfig {
   Configuration for the SidebarGallery component
   """
   sidebarGallery: SidebarGalleryConfig
+
+  """
+  Configuration for the SidebarGallery component
+  """
+  breadcrumbs: Boolean = false
 }
 
 """

package/Document/DocumentBodyEnd.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentBodyEnd(props: DocumentProps) {
+  return null
+}

package/Document/DocumentBodyStart.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentBodyStart(props: DocumentProps) {
+  return null
+}

package/Document/DocumentHeadEnd.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentHeadEnd(props: DocumentProps) {
+  return null
+}

package/Document/DocumentHeadStart.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentHeadStart(props: DocumentProps) {
+  return null
+}

package/Document/index.ts

@@ -0,0 +1,4 @@
+export * from './DocumentBodyEnd'
+export * from './DocumentBodyStart'
+export * from './DocumentHeadEnd'
+export * from './DocumentHeadStart'

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

@@ -31,7 +31,14 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 
 const MotionBox = styled(m.div)({})
 
-type OwnerState = { zoomed: boolean; disableZoom: boolean }
+type SidebarGalleryVariant = 'default' | 'oneColumn'
+
+type OwnerState = {
+  zoomed: boolean
+  disableZoom: boolean
+  sticky: boolean
+  variantMd: SidebarGalleryVariant
+}
 const name = 'SidebarGallery' as const
 const parts = [
   'row',
@@ -60,6 +67,10 @@ export type SidebarGalleryProps = {
   routeHash?: string
   sx?: SxProps<Theme>
   disableZoom?: boolean
+  disableSticky?: boolean
+  variantMd?: SidebarGalleryVariant
+  beforeScroller?: React.ReactNode
+  afterScroller?: React.ReactNode
 } & Pick<ScrollerButtonProps, 'showButtons'>
 
 export function SidebarGallery(props: SidebarGalleryProps) {
@@ -71,6 +82,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     routeHash = 'gallery',
     showButtons,
     disableZoom = false,
+    disableSticky = false,
+    variantMd = 'default',
+    beforeScroller,
+    afterScroller,
   } = props
 
   const router = useRouter()
@@ -103,7 +118,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
-  const classes = withState({ zoomed, disableZoom })
+  const classes = withState({ zoomed, disableZoom, sticky: !disableSticky, variantMd })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
@@ -144,25 +159,31 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               display: 'grid',
               gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
-                gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-                  theme.page.horizontal
-                } * 2)`,
+                '&:not(.variantMdOneColumn)': {
+                  gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
+                    theme.page.horizontal
+                  } * 2)`,
+                },
               },
               background:
                 theme.palette.mode === 'light'
                   ? theme.palette.background.image
                   : theme.palette.background.paper,
-              paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-            },
-            zoomed && {
-              position: 'relative',
-              zIndex: theme.zIndex.modal,
-              marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-              [theme.breakpoints.up('md')]: {
-                marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
-                gridTemplateColumns: '1fr auto',
+
+              '&:not(.variantMdOneColumn)': {
+                paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
+              },
+
+              '&.zoomed': {
+                position: 'relative',
+                zIndex: theme.zIndex.modal,
+                marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+                [theme.breakpoints.up('md')]: {
+                  marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+                  gridTemplateColumns: '1fr auto',
+                },
+                paddingRight: 0,
               },
-              paddingRight: 0,
             },
           ]}
         >
@@ -183,11 +204,13 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                     width: '100%',
                   },
                   [theme.breakpoints.up('md')]: {
-                    height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
-                      theme.spacings.lg
-                    })`,
-                    position: 'sticky',
-                    top: theme.appShell.headerHeightMd,
+                    '&:not(.variantMdOneColumn)': {
+                      height: `max(${dvh(90)}, 40vw)`,
+                      '&.sticky': {
+                        position: 'sticky',
+                        top: theme.appShell.headerHeightMd,
+                      },
+                    },
                   },
                 },
                 zoomed && {
@@ -201,6 +224,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 if (!zoomed) document.body.style.overflow = ''
               }}
             >
+              {beforeScroller}
               <Scroller
                 className={classes.scroller}
                 hideScrollbar
@@ -242,6 +266,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   />
                 ))}
               </Scroller>
+              {afterScroller}
               <MotionBox
                 layout='position'
                 layoutDependency={zoomed}
@@ -333,9 +358,9 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               >
                 {import.meta.graphCommerce.sidebarGallery?.paginationVariant ===
                 'THUMBNAILS_BOTTOM' ? (
-                  <ScrollerThumbnails images={images} />
+                  <ScrollerThumbnails layoutDependency={zoomed} images={images} />
                 ) : (
-                  <ScrollerDots />
+                  <ScrollerDots layout />
                 )}
               </Box>
             </MotionBox>
@@ -353,10 +378,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)`,
                 },
@@ -370,9 +395,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               sx={{
                 boxSizing: 'border-box',
                 width: '100%',
-                padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
-                [theme.breakpoints.up('md')]: {
-                  paddingLeft: theme.spacings.lg,
+                '&:not(.variantMdOneColumn)': {
+                  padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
+                  [theme.breakpoints.up('md')]: {
+                    paddingLeft: theme.spacings.lg,
+                  },
                 },
               }}
             >

package/FullPageMessage/FullPageMessage.tsx

@@ -36,6 +36,7 @@ export function FullPageMessage(props: FullPageMessageProps) {
         }),
         !disableMargin && {
           marginTop: responsiveVal(50, 250),
+          marginBottom: responsiveVal(50, 250),
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

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,20 @@
+import { useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+import { DateValue, toDate } from './toDate'
+
+export function useDateTimeFormatter(props: Intl.DateTimeFormatOptions) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.DateTimeFormat(locale, memoOptions), [locale, memoOptions])
+}
+
+export type DateTimeFormatPropsType = { children: DateValue } & Intl.DateTimeFormatOptions
+
+export function DateTimeFormat(props: DateTimeFormatPropsType) {
+  const { children } = props
+  const formatter = useDateTimeFormatter({ dateStyle: 'medium', timeStyle: 'short', ...props })
+
+  const dateValue = useMemo(() => toDate(children), [children])
+  return <span suppressHydrationWarning>{dateValue ? formatter.format(dateValue) : 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/DateTimeFormat/toDate.ts

@@ -0,0 +1,16 @@
+export type DateValue = Date | string | number | null | undefined
+
+export function toDate(value: DateValue): Date | undefined {
+  let date: Date | undefined
+
+  if (value instanceof Date) {
+    date = value
+  } else if (typeof value === 'string') {
+    date = new Date(value.replace(/-/g, '/'))
+  } else if (typeof value === 'number') {
+    date = new Date(value)
+  }
+
+  if (date && Number.isNaN(date.getTime())) return undefined
+  return date
+}

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,33 @@
+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, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <React.Fragment key={index}>
+          {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'