@graphcommerce/next-ui 8.1.0-canary.2 → 8.1.0-canary.5

package/ActionCard/ActionCardListForm.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Controller,
+  ControllerProps,
+  FieldValues,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -43,38 +48,41 @@ export function ActionCardListForm<
       : selectValues === itemValue
   }
 
+  const {
+    field: { onChange, value, ref },
+    fieldState,
+    formState,
+  } = useController({
+    ...props,
+    control,
+    name,
+    defaultValue,
+    rules: { required: errorMessage || required, ...rules },
+  })
+
   return (
-    <Controller
-      {...props}
-      control={control}
-      name={name}
-      defaultValue={defaultValue}
-      rules={{ required: errorMessage || required, ...rules }}
-      render={({ field: { onChange, value, ref }, fieldState, formState }) => (
-        <ActionCardList
-          {...other}
-          multiple={multiple}
-          required={required}
-          value={value}
-          ref={ref}
-          onChange={(_, incomming) => onChange(incomming)}
-          error={formState.isSubmitted && !!fieldState.error}
-          errorMessage={fieldState.error?.message}
-        >
-          {items.map((item) => (
-            <RenderItem
-              {...item}
-              key={item.value ?? ''}
-              value={item.value}
-              selected={onSelect(item.value, value)}
-              onReset={(e) => {
-                e.preventDefault()
-                onChange(null)
-              }}
-            />
-          ))}
-        </ActionCardList>
-      )}
-    />
+    <ActionCardList
+      {...other}
+      multiple={multiple}
+      required={required}
+      value={value}
+      ref={ref}
+      onChange={(_, incomming) => onChange(incomming)}
+      error={formState.isSubmitted && !!fieldState.error}
+      errorMessage={fieldState.error?.message}
+    >
+      {items.map((item) => (
+        <RenderItem
+          {...item}
+          key={item.value ?? ''}
+          value={item.value}
+          selected={onSelect(item.value, value)}
+          onReset={(e) => {
+            e.preventDefault()
+            onChange(null)
+          }}
+        />
+      ))}
+    </ActionCardList>
   )
 }

package/CHANGELOG.md

@@ -1,6 +1,129 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Added useIsSSR hook that will properly resolve when the page is rendered on the server and on first render, but will return false when a component is rendered on the client directly.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2236](https://github.com/graphcommerce-org/graphcommerce/pull/2236) [`85fb916`](https://github.com/graphcommerce-org/graphcommerce/commit/85fb916e5ec2a1456a93a59bf92a5f414fee8595) - Solve issue where the inert prop wouldnt be properly forwarded
+  ([@paales](https://github.com/paales))
+
+- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
+
+  Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`6f3fe60`](https://github.com/graphcommerce-org/graphcommerce/commit/6f3fe60441762d55cb46d587279121e8fe469cdd) - Decreased layout shift on product pages by reserving space for sidebar
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`cde3c31`](https://github.com/graphcommerce-org/graphcommerce/commit/cde3c310abf2ac3c82d1062d5fb0a4c00ba50cff) - Removed unnecessary vendor prefixes
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`4c83636`](https://github.com/graphcommerce-org/graphcommerce/commit/4c836366c324881ee5121c645c5f94fc60e3ebb3) - Prevent horizontal scrollbar on small screens when using SidebarGallery
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2230](https://github.com/graphcommerce-org/graphcommerce/pull/2230) [`1da6b82`](https://github.com/graphcommerce-org/graphcommerce/commit/1da6b82dbb7e1543542d809ea625a8867643ea68) - Fix menu item visibility in accessability tree
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+### Patch Changes
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`6f3fe60`](https://github.com/graphcommerce-org/graphcommerce/commit/6f3fe60441762d55cb46d587279121e8fe469cdd) - Decreased layout shift on product pages by reserving space for sidebar
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`cde3c31`](https://github.com/graphcommerce-org/graphcommerce/commit/cde3c310abf2ac3c82d1062d5fb0a4c00ba50cff) - Removed unnecessary vendor prefixes
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`4c83636`](https://github.com/graphcommerce-org/graphcommerce/commit/4c836366c324881ee5121c645c5f94fc60e3ebb3) - Prevent horizontal scrollbar on small screens when using SidebarGallery
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+### Patch Changes
+
+- [#2236](https://github.com/graphcommerce-org/graphcommerce/pull/2236) [`85fb916`](https://github.com/graphcommerce-org/graphcommerce/commit/85fb916e5ec2a1456a93a59bf92a5f414fee8595) - Solve issue where the inert prop wouldnt be properly forwarded
+  ([@paales](https://github.com/paales))
+
+## 8.0.5-canary.2
+
+### Patch Changes
+
+- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
+
+  Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+### Patch Changes
+
+- [#2230](https://github.com/graphcommerce-org/graphcommerce/pull/2230) [`1da6b82`](https://github.com/graphcommerce-org/graphcommerce/commit/1da6b82dbb7e1543542d809ea625a8867643ea68) - Fix menu item visibility in accessability tree
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.4
+
+### Patch Changes
+
+- [#2228](https://github.com/graphcommerce-org/graphcommerce/pull/2228) [`0c0cacb`](https://github.com/graphcommerce-org/graphcommerce/commit/0c0cacb8725f0a626ea5d3acf154d83c433c3eb7) - apply correct type for the inert property
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+### Patch Changes
+
+- [#2228](https://github.com/graphcommerce-org/graphcommerce/pull/2228) [`0c0cacb`](https://github.com/graphcommerce-org/graphcommerce/commit/0c0cacb8725f0a626ea5d3acf154d83c433c3eb7) - apply correct type for the inert property
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/FramerScroller/SidebarGallery.tsx

@@ -144,8 +144,9 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               display: 'grid',
               gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
-                // gridTemplateColumns: '1fr auto',
-                gridTemplate: '"left right" / 1fr auto',
+                gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                  theme.page.horizontal
+                } * 2)`,
               },
               background:
                 theme.palette.mode === 'light'
@@ -159,6 +160,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
               [theme.breakpoints.up('md')]: {
                 marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+                gridTemplateColumns: '1fr auto',
               },
               paddingRight: 0,
             },
@@ -178,7 +180,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   position: 'relative',
                   paddingTop: `min(${ratio}, ${maxHeight})`,
                   [theme.breakpoints.down('md')]: {
-                    width: '100vw',
+                    width: '100%',
                   },
                   [theme.breakpoints.up('md')]: {
                     height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
@@ -348,11 +350,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 justifyItems: 'start',
                 alignContent: 'center',
                 position: 'relative',
-                [theme.breakpoints.up('md')]: {
-                  width: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-                    theme.page.horizontal
-                  } * 2)`,
-                },
               },
               zoomed && {
                 [theme.breakpoints.up('md')]: {

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -9,6 +9,7 @@ export type LayoutOverlayState = Omit<
   | 'mdSpacingTop'
   | 'smSpacingTop'
   | 'overlayPaneProps'
+  | 'disableInert'
   | 'widthMd'
   | 'widthSm'
 >

package/LazyHydrate/LazyHydrate.tsx

@@ -1,9 +1,10 @@
+import { Box, BoxProps } from '@mui/material'
 import React, { useState, useRef, startTransition, useLayoutEffect, useEffect } from 'react'
 
 // Make sure the server doesn't choke on the useLayoutEffect
 export const useLayoutEffect2 = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
-export type LazyHydrateProps = {
+export type LazyHydrateProps = BoxProps<'div'> & {
   /**
    * The content is always rendered on the server and on the client it uses the server rendered HTML until it is hydrated.
    */
@@ -25,8 +26,8 @@ export type LazyHydrateProps = {
  * This can be a way to improve the TBT of a page.
  */
 export function LazyHydrate(props: LazyHydrateProps) {
-  const { hydrated, children } = props
-  const rootRef = useRef<HTMLElement>(null)
+  const { hydrated, children, ...elementProps } = props
+  const rootRef = useRef<HTMLDivElement>(null)
 
   const [isHydrated, setIsHydrated] = useState(hydrated || false)
   if (!isHydrated && hydrated) setIsHydrated(true)
@@ -58,15 +59,24 @@ export function LazyHydrate(props: LazyHydrateProps) {
   }, [hydrated, isHydrated])
 
   if (isHydrated) {
-    return <section>{children}</section>
+    return <Box {...elementProps}>{children}</Box>
   }
 
   if (typeof window === 'undefined') {
-    return <section data-lazy-hydrate>{children}</section>
+    return (
+      <Box data-lazy-hydrate {...elementProps}>
+        {children}
+      </Box>
+    )
   }
 
   return (
-    // eslint-disable-next-line react/no-danger
-    <section ref={rootRef} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning />
+    <Box
+      ref={rootRef}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: '' }}
+      suppressHydrationWarning
+      {...elementProps}
+    />
   )
 }

package/Navigation/components/NavigationOverlay.tsx

@@ -162,6 +162,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
             }
             right={
               <Fab
+                disabled={!activeAndNotClosing}
                 color='inherit'
                 onClick={handleClose}
                 sx={{ boxShadow: 'none', my: fabMarginY }}

package/Overlay/components/OverlayBase.tsx

@@ -52,6 +52,7 @@ export type LayoutOverlayBaseProps = {
   isPresent: boolean
   safeToRemove?: (() => void) | null | undefined
   overlayPaneProps?: MotionProps
+  disableInert?: boolean
 
   /* For `variantSm='left|right' */
   widthSm?: string | false
@@ -109,6 +110,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     isPresent,
     safeToRemove,
     overlayPaneProps,
+    disableInert,
     widthMd = 'max(800px, 50vw)',
     widthSm = 'max(300px, 80vw)',
   } = props
@@ -247,7 +249,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     const cancelY = scroll.y.on('change', handleScroll)
 
     const ro = new ResizeObserver(handleResize)
-    ro.observe(scrollerRef.current)
+    if (scrollerRef.current) ro.observe(scrollerRef.current)
     ro.observe(beforeRef.current)
     ro.observe(overlayPaneRef.current)
     ro.observe(overlayRef.current)
@@ -363,7 +365,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
-        inert={active ? undefined : 'true'}
+        inert={active ? undefined : ('true' as unknown as boolean)}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -385,7 +387,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={active ? undefined : 'true'}
+        inert={disableInert || active ? undefined : ('true' as unknown as boolean)}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/Overlay/components/OverlaySsr.tsx

@@ -31,6 +31,7 @@ export function OverlaySsr(props: OverlayProps) {
     <OverlayContainer active={active} hidden={hidden}>
       <ScrollerProvider {...variantsToScrollSnapType(props)}>
         <OverlayBase
+          disableInert
           variantMd={variantMd}
           variantSm={variantSm}
           active={active}

package/Styles/createEmotionCache.ts

@@ -10,5 +10,5 @@ export const createEmotionCache = () => {
     insertionPoint = emotionInsertionPoint ?? undefined
   }
 
-  return createCache({ key: 'mui-style', insertionPoint })
+  return createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
 }

package/TimeAgo/TimeAgo.tsx

@@ -1,17 +1,23 @@
+import { useLocale } from '../hooks/useLocale'
+
 export type TimeAgoProps = {
   date: Date
+  /**
+   * @deprecated No longer used
+   */
   locale?: string
 }
 
 export function TimeAgo(props: TimeAgoProps) {
-  const { date, locale = 'en' } = props
+  const { date } = props
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
 
   const timestamp = date.getTime()
   const elapsed = Date.now() - timestamp
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+  const rtf = new Intl.RelativeTimeFormat(useLocale(), { numeric: 'auto' })
 
   if (elapsed < msPerMinute) {
     return <span>{rtf.format(-Math.floor(elapsed / 1000), 'seconds')}</span>

package/hooks/index.ts

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

package/hooks/useDateTimeFormat.ts

@@ -1,15 +1,13 @@
 import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useStorefrontConfig } from './useStorefrontConfig'
+import { useLocale } from '@graphcommerce/next-ui'
 
 export type DateTimeFormatProps = Intl.DateTimeFormatOptions
 
 export function useDateTimeFormat(props?: DateTimeFormatProps) {
-  const { locale } = useRouter()
+  const locale = useLocale()
 
-  const formatter = useMemo(
-    () => new Intl.DateTimeFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useLocale.ts

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

package/hooks/useMatchMedia.ts

@@ -1,5 +1,24 @@
 import { Breakpoint, useTheme } from '@mui/material'
-import { useMemo } from 'react'
+import { useMotionValue } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
+
+export function useMatchMediaMotionValue(
+  direction: 'up' | 'down',
+  breakpointKey: number | Breakpoint,
+) {
+  const matchValue = useMotionValue(false)
+  const theme = useTheme()
+  const query = theme.breakpoints[direction](breakpointKey).replace(/^@media( ?)/m, '')
+
+  useEffect(() => {
+    const mql = globalThis?.matchMedia(query)
+    const matcher = (e: MediaQueryListEvent) => matchValue.set(e.matches)
+    mql.addEventListener('change', matcher)
+    return () => mql.removeEventListener('change', matcher)
+  }, [matchValue, query])
+
+  return matchValue
+}
 
 export function useMatchMedia() {
   const theme = useTheme()

package/hooks/useNumberFormat.ts

@@ -1,15 +1,10 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useLocale } from './useLocale'
 
 export type NumberFormatProps = Intl.NumberFormatOptions
 
 export function useNumberFormat(props?: NumberFormatProps) {
-  const { locale } = useRouter()
-
-  const formatter = useMemo(
-    () => new Intl.NumberFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const locale = useLocale()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useSsr.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react'
+
+const emptySubscribe = () => () => {}
+
+export function useIsSSR() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  )
+}

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.2",
+  "version": "8.1.0-canary.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -25,14 +25,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.2",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.2",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.5",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.5",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.5",
+    "@graphcommerce/image": "^8.1.0-canary.5",
+    "@graphcommerce/lingui-next": "^8.1.0-canary.5",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/types.d.ts

@@ -6,12 +6,6 @@ import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
 
-declare module 'react' {
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    inert?: 'true'
-  }
-}
-
 declare module '*.po' {
   const messages: Record<
     string,