@graphcommerce/next-ui 4.18.0 → 4.21.0

package/AnimatedRow/AnimatedRow.tsx

@@ -4,7 +4,7 @@ import { ReactHTML } from 'react'
 
 export type AnimatedRowProps = Omit<
   ReactHTML['div'] & HTMLMotionProps<'div'>,
-  'layout' | 'initial' | 'animate' | 'exit' | 'transition'
+  'initial' | 'animate' | 'exit' | 'transition'
 > & { sx?: SxProps<Theme> }
 
 const StyledDiv = styled(m.div)({})
@@ -13,8 +13,7 @@ export function AnimatedRow(props: AnimatedRowProps) {
   return (
     <StyledDiv
       {...props}
-      layout
-      initial={{ opacity: 0, height: 0 }}
+      initial={{ opacity: 0, height: 'auto' }}
       animate={{ opacity: 1, height: 'auto' }}
       exit={{ opacity: 0, height: 0 }}
       transition={{ type: 'tween' }}

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Change Log
 
+## 4.21.0
+
+### Minor Changes
+
+- [#1597](https://github.com/graphcommerce-org/graphcommerce/pull/1597) [`1f7ee6f6c`](https://github.com/graphcommerce-org/graphcommerce/commit/1f7ee6f6cfb28544439ed36e10929ac530d1b2b7) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix safari nav bug
+
+### Patch Changes
+
+- Updated dependencies [[`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b), [`5c5645e6e`](https://github.com/graphcommerce-org/graphcommerce/commit/5c5645e6eaf5314c063f05547707fcd4b34a8717)]:
+  - @graphcommerce/framer-utils@3.1.5
+  - @graphcommerce/framer-scroller@2.1.32
+  - @graphcommerce/framer-next-pages@3.2.5
+  - @graphcommerce/image@3.1.8
+
+## 4.20.0
+
+### Minor Changes
+
+- [#1592](https://github.com/graphcommerce-org/graphcommerce/pull/1592) [`43822fd61`](https://github.com/graphcommerce-org/graphcommerce/commit/43822fd61c949215b8ddce9fb37d09f29b638426) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Animation fixes
+
+* [#1596](https://github.com/graphcommerce-org/graphcommerce/pull/1596) [`3a619b70d`](https://github.com/graphcommerce-org/graphcommerce/commit/3a619b70d082804b8de46a8e8232f9431479a8b7) Thanks [@paales](https://github.com/paales)! - Create products sitemap
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.31
+
+## 4.19.0
+
+### Minor Changes
+
+- [#1576](https://github.com/graphcommerce-org/graphcommerce/pull/1576) [`b6d3a3c13`](https://github.com/graphcommerce-org/graphcommerce/commit/b6d3a3c13ea63ef0f691f497507f07c0e094de5b) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Create products sitemap
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.30
+
 ## 4.18.0
 
 ### Minor Changes

package/Form/Form.tsx

@@ -1,5 +1,6 @@
-import { darken, lighten, styled, experimental_sx, Theme } from '@mui/material'
+import { darken, lighten, styled, Theme } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
+import { sx } from '../Theme/themeDefaults'
 
 type FormStyleProps = {
   contained?: boolean
@@ -7,7 +8,7 @@ type FormStyleProps = {
 }
 
 const styles = ({ theme, contained = false, background }: { theme: Theme } & FormStyleProps) =>
-  experimental_sx([
+  sx([
     {
       display: 'grid',
       alignItems: 'center',

package/Navigation/components/NavigationOverlay.tsx

@@ -117,6 +117,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
         onLayoutAnimationComplete: () => {
           animating.current = false
         },
+        layout: true,
       }}
       sx={{
         zIndex: 'drawer',
@@ -195,7 +196,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
                 ? selected.length >= 1
                   ? `calc(${itemWidthMd} + 1px)`
                   : itemWidthMd
-                : 'auto',
+                : 'stretch',
             },
             [theme.breakpoints.down('md')]: {
               width:

package/Overlay/components/OverlayBase.tsx

@@ -151,10 +151,15 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
     if (!scroller) return () => {}
 
     const resize = () => {
-      if (positions.open.visible.get() !== 1) return
+      if (positions.open.visible.get() === 1) {
+        scroller.scrollLeft = positions.open.x.get()
+        scroller.scrollTop = positions.open.y.get()
+      }
 
-      scroller.scrollLeft = positions.open.x.get()
-      scroller.scrollTop = positions.open.y.get()
+      if (positions.open.visible.get() === 0) {
+        scroller.scrollLeft = positions.closed.x.get()
+        scroller.scrollTop = positions.closed.y.get()
+      }
     }
 
     window.addEventListener('resize', resize)
@@ -370,7 +375,6 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
         >
           <MotionDiv
             {...overlayPaneProps}
-            layout
             className={classes.overlayPane}
             sx={(theme) => ({
               pointerEvents: 'all',

package/PageMeta/PageMeta.tsx

@@ -2,7 +2,7 @@ import { usePageContext } from '@graphcommerce/framer-next-pages'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { addLocale } from 'next/dist/client/add-locale'
 import { getDomainLocale } from 'next/dist/client/get-domain-locale'
-import { resolveHref } from 'next/dist/shared/lib/router/router'
+import { NextRouter, resolveHref } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 
@@ -29,8 +29,11 @@ export type PageMetaProps = {
   metaRobots?: MetaRobotsAll | MetaRobots[]
 }
 
-export function useCanonical(incomming?: Canonical) {
-  const router = useRouter()
+type PartialNextRouter = Pick<
+  NextRouter,
+  'pathname' | 'locale' | 'locales' | 'isLocaleDomain' | 'domainLocales' | 'defaultLocale'
+>
+export function canonicalize(router: PartialNextRouter, incomming?: Canonical) {
   let canonical = incomming
 
   if (!canonical) return canonical
@@ -51,17 +54,16 @@ export function useCanonical(incomming?: Canonical) {
       }
     }
 
-    let [href, as] = resolveHref(router, canonical, true)
+    let [href, as] = resolveHref(router as NextRouter, canonical, true)
 
     const curLocale = router.locale
 
-    // Copied from here https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L313-L327
+    // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
     const localeDomain =
-      router &&
       router.isLocaleDomain &&
-      getDomainLocale(as, curLocale, router && router.locales, router && router.domainLocales)
+      getDomainLocale(as, curLocale, router && router.locales, router.domainLocales)
 
-    href = localeDomain || addBasePath(addLocale(as, curLocale, router && router.defaultLocale))
+    href = localeDomain || addBasePath(addLocale(as, curLocale, router.defaultLocale))
 
     let siteUrl = process.env.NEXT_PUBLIC_SITE_URL
     if (siteUrl && siteUrl.endsWith('/')) {
@@ -83,6 +85,11 @@ export function useCanonical(incomming?: Canonical) {
   return canonical
 }
 
+export function useCanonical(incomming?: Canonical) {
+  const router = useRouter()
+  return canonicalize(router, incomming)
+}
+
 export function PageMeta(props: PageMetaProps) {
   const { active } = usePageContext()
   const { title, canonical: canonicalBare, metaDescription, metaRobots = ['all'] } = props

package/Theme/MuiChip.ts

@@ -1,5 +1,6 @@
-import { ComponentsVariants, darken, experimental_sx as sx } from '@mui/material'
+import { ComponentsVariants, darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
+import { sx } from './themeDefaults'
 
 declare module '@mui/material/Chip/Chip' {
   interface ChipPropsSizeOverrides {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.18.0",
+  "version": "4.21.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,10 +19,10 @@
     "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
-    "@graphcommerce/framer-next-pages": "3.2.4",
-    "@graphcommerce/framer-scroller": "2.1.29",
-    "@graphcommerce/framer-utils": "3.1.4",
-    "@graphcommerce/image": "3.1.7",
+    "@graphcommerce/framer-next-pages": "3.2.5",
+    "@graphcommerce/framer-scroller": "2.1.32",
+    "@graphcommerce/framer-utils": "3.1.5",
+    "@graphcommerce/image": "3.1.8",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
@@ -38,7 +38,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.9",
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",