Merge pull request #2228 from graphcommerce-org/fix/inert-type-correc…

…tion chore: apply correct type for the inert property
graphcommerce-org · Mar 25, 2024 · 62ca383 · 62ca383
2 parents c1c55aa + 0c0cacb
commit 62ca383
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/rotten-rules-reflect.md b/.changeset/rotten-rules-reflect.md
@@ -0,0 +1,6 @@
+---
+"@graphcommerce/framer-next-pages": patch
+"@graphcommerce/next-ui": patch
+---
+
+apply correct type for the inert property
diff --git a/packages/framer-next-pages/components/Page.tsx b/packages/framer-next-pages/components/Page.tsx
@@ -5,7 +5,7 @@ import type { PageItem } from '../types'
 
 declare module 'react' {
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    inert?: 'true'
+    inert?: boolean | undefined
   }
 }
 
@@ -42,7 +42,7 @@ export function Page(props: PageProps) {
     <m.div
       layoutScroll
       style={{ position, top, zIndex, minHeight: dvh(100), left: 0, right: 0 }}
-      inert={!active ? 'true' : undefined}
+      inert={!active ? true : undefined}
       data-nosnippet={!active ? true : undefined}
       aria-hidden={!active ? true : undefined}
     >

diff --git a/packages/next-ui/Overlay/components/OverlayBase.tsx b/packages/next-ui/Overlay/components/OverlayBase.tsx
@@ -363,7 +363,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
-        inert={active ? undefined : 'true'}
+        inert={active ? undefined : true}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -385,7 +385,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={active ? undefined : 'true'}
+        inert={active ? undefined : true}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}