@graphcommerce/next-ui 8.0.5-canary.1 → 8.0.5-canary.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 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

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/Overlay/components/OverlayBase.tsx

@@ -365,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={[
@@ -387,7 +387,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={disableInert || active ? undefined : true}
+        inert={disableInert || active ? undefined : ('true' as unknown as boolean)}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.5-canary.1",
+  "version": "8.0.5-canary.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -25,14 +25,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.5-canary.1",
-    "@graphcommerce/framer-next-pages": "^8.0.5-canary.1",
-    "@graphcommerce/framer-scroller": "^8.0.5-canary.1",
-    "@graphcommerce/framer-utils": "^8.0.5-canary.1",
-    "@graphcommerce/image": "^8.0.5-canary.1",
-    "@graphcommerce/lingui-next": "^8.0.5-canary.1",
-    "@graphcommerce/prettier-config-pwa": "^8.0.5-canary.1",
-    "@graphcommerce/typescript-config-pwa": "^8.0.5-canary.1",
+    "@graphcommerce/eslint-config-pwa": "^8.0.5-canary.3",
+    "@graphcommerce/framer-next-pages": "^8.0.5-canary.3",
+    "@graphcommerce/framer-scroller": "^8.0.5-canary.3",
+    "@graphcommerce/framer-utils": "^8.0.5-canary.3",
+    "@graphcommerce/image": "^8.0.5-canary.3",
+    "@graphcommerce/lingui-next": "^8.0.5-canary.3",
+    "@graphcommerce/prettier-config-pwa": "^8.0.5-canary.3",
+    "@graphcommerce/typescript-config-pwa": "^8.0.5-canary.3",
     "@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,