@graphcommerce/framer-next-pages 3.2.0 → 3.2.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 3.2.3
+
+### Patch Changes
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+- Updated dependencies [[`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb)]:
+  - @graphcommerce/framer-utils@3.1.4
+
+## 3.2.2
+
+### Patch Changes
+
+- [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`597e2f413`](https://github.com/graphcommerce-org/graphcommerce/commit/597e2f413bdb5b76793b40ab631ce61390e26e81) Thanks [@paales](https://github.com/paales)! - fixes Received `true` for a non-boolean attribute `inert`.
+
+- Updated dependencies [[`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/framer-utils@3.1.3
+
+## 3.2.1
+
+### Patch Changes
+
+- [#1432](https://github.com/graphcommerce-org/graphcommerce/pull/1432) [`99600dd09`](https://github.com/graphcommerce-org/graphcommerce/commit/99600dd091980dd9ef335c04d2efac0835c20b2f) Thanks [@paales](https://github.com/paales)! - make sure the background isn’t visible to screen readers
+
 ## 3.2.0
 
 ### Minor Changes

package/components/Page.tsx

@@ -36,7 +36,10 @@ export function Page(props: PageProps) {
   return (
     <m.div
       style={{ position, top, zIndex, minHeight: clientSizeCssVar.y, left: 0, right: 0 }}
-      data-nosnippet
+      // @ts-expect-error inert is not in the type definition yet
+      inert={!active ? 'true' : undefined}
+      data-nosnippet={!active ? true : undefined}
+      aria-hidden={!active ? true : undefined}
     >
       {children}
     </m.div>

package/components/PageRenderer.tsx

@@ -5,7 +5,7 @@ import React, { useMemo } from 'react'
 import { pageRouterContext } from '../context/pageRouterContext'
 import { PageItem } from '../types'
 
-const NoLayout: React.FC = ({ children }) => <>{children}</>
+const NoLayout: React.FC<{ children?: React.ReactNode }> = ({ children }) => <>{children}</>
 
 export type PageRendererProps = Omit<AppPropsType, 'router'> & {
   Layout: React.ComponentType<AppPropsType>

package/components/Pages.tsx

@@ -186,31 +186,33 @@ and pass it as a param in <FramerNextPages fallbackRoute='/[...url]' /> in your
     .reverse()
 
   return (
-    <AnimatePresence initial={false}>
+    <>
       <m.div
         style={{ position: 'absolute', top: 0, minHeight: clientSizeCssVar.y, left: 0, right: 0 }}
       />
-      {renderItems.map((item, itemIdx) => {
-        const { historyIdx, sharedKey, overlayGroup } = item
-        const active = itemIdx === renderItems.length - 1
-        const depth = itemIdx - (renderItems.length - 1)
-        const closeIdx = renderItems[itemIdx - 1]?.historyIdx ?? -1
-        const closeSteps = closeIdx > -1 ? historyIdx - closeIdx : 0
-        const backSteps = historyIdx - closeIdx - 1
-
-        return (
-          <pageContext.Provider
-            key={sharedKey}
-            // We're actually rerendering here but since the actual page renderer is memoized we can safely do this
-            // eslint-disable-next-line react/jsx-no-constructed-context-values
-            value={{ depth, active, direction, closeSteps, backSteps, historyIdx, overlayGroup }}
-          >
-            <Page active={active} historyIdx={historyIdx}>
-              <PageRenderer {...item} />
-            </Page>
-          </pageContext.Provider>
-        )
-      })}
-    </AnimatePresence>
+      <AnimatePresence initial={false}>
+        {renderItems.map((item, itemIdx) => {
+          const { historyIdx, sharedKey, overlayGroup } = item
+          const active = itemIdx === renderItems.length - 1
+          const depth = itemIdx - (renderItems.length - 1)
+          const closeIdx = renderItems[itemIdx - 1]?.historyIdx ?? -1
+          const closeSteps = closeIdx > -1 ? historyIdx - closeIdx : 0
+          const backSteps = historyIdx - closeIdx - 1
+
+          return (
+            <pageContext.Provider
+              key={sharedKey}
+              // We're actually rerendering here but since the actual page renderer is memoized we can safely do this
+              // eslint-disable-next-line react/jsx-no-constructed-context-values
+              value={{ depth, active, direction, closeSteps, backSteps, historyIdx, overlayGroup }}
+            >
+              <Page active={active} historyIdx={historyIdx}>
+                <PageRenderer {...item} />
+              </Page>
+            </pageContext.Provider>
+          )
+        })}
+      </AnimatePresence>
+    </>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-next-pages",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.2.0",
+  "version": "3.2.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.2"
+    "@graphcommerce/framer-utils": "3.1.4"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.8",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.21.1"
   },
   "peerDependencies": {
     "framer-motion": "^6.2.4",
-    "next": "12.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "@emotion/react": "^11.8.2"
   }
 }