@graphcommerce/framer-next-pages 3.1.2 → 3.1.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 3.1.3
+
+### Patch Changes
+
+- [#1363](https://github.com/graphcommerce-org/graphcommerce/pull/1363) [`c9f7ac026`](https://github.com/graphcommerce-org/graphcommerce/commit/c9f7ac026b49047eca05be208b515f364e21571c) Thanks [@paales](https://github.com/paales)! - Calling back multiple times in succession doens’t work on ipad and causes flashes on other devices. Replace with window.history.go(-x)
+
+* [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Make sure the minimum height of the viewport is at least the viewport size on mobile.
+
+* Updated dependencies [[`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c)]:
+  - @graphcommerce/framer-utils@3.1.0
+
 ## 3.1.2
 
 ### Patch Changes

package/components/Page.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react'
+import { clientSizeCssVar } from '@graphcommerce/framer-utils'
 import { m, useIsPresent } from 'framer-motion'
 import React from 'react'
 import type { PageItem } from '../types'
@@ -34,17 +34,7 @@ export function Page(props: PageProps) {
   const zIndex = active ? 1 : undefined
 
   return (
-    <m.div
-      style={{ position, top, zIndex }}
-      css={css({
-        left: 0,
-        right: 0,
-        minHeight: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          height: '-webkit-fill-available',
-        },
-      })}
-    >
+    <m.div style={{ position, top, zIndex, minHeight: clientSizeCssVar.y, left: 0, right: 0 }}>
       {children}
     </m.div>
   )

package/components/Pages.tsx

@@ -1,4 +1,5 @@
-import { AnimatePresence } from 'framer-motion'
+import { clientSizeCssVar, useClientSizeCssVar } from '@graphcommerce/framer-utils'
+import { AnimatePresence, m } from 'framer-motion'
 import { requestIdleCallback, cancelIdleCallback } from 'next/dist/client/request-idle-callback'
 import { AppPropsType } from 'next/dist/shared/lib/utils'
 import { NextRouter, Router } from 'next/router'
@@ -43,6 +44,7 @@ function getPageInfo(router: NextRouter) {
 export function FramerNextPages(props: PagesProps) {
   const { router, Component, pageProps: incomingProps, fallback = '/', fallbackRoute = '/' } = props
 
+  useClientSizeCssVar()
   const items = useRef<PageItem[]>([])
   const idx = Number(global.window?.history.state?.idx ?? 0)
   const prevHistory = useRef<number>(-1)
@@ -185,6 +187,9 @@ and pass it as a param in <FramerNextPages fallbackRoute='/[...url]' /> in your
 
   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

package/hooks/useGo.ts

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 
 export function useGo(delta: number) {
-  const { push, back } = useRouter()
+  const { push } = useRouter()
   return () => {
     if (delta >= 0) {
       console.error(`Called .go(${delta}), only negative numbers are allowed. Redirecting to home`)
@@ -10,7 +10,6 @@ export function useGo(delta: number) {
       return
     }
 
-    const deltaAbs = Math.abs(delta)
-    for (let i = 0; i < deltaAbs; i++) back()
+    window.history.go(delta)
   }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-next-pages",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,10 +12,10 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^3.0.4"
+    "@graphcommerce/framer-utils": "^3.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.2",
     "@graphcommerce/prettier-config-pwa": "^4.0.3",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.19.2"