@graphcommerce/next-ui 3.20.6 → 3.20.7

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.20.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.6...@graphcommerce/next-ui@3.20.7) (2021-12-13)
+
+
+### Bug Fixes
+
+* header style color ([ea373be](https://github.com/ho-nl/m2-pwa/commit/ea373be9dbf609e0a719b000d27ad79d2be45f65))
+* make sure we're allowed to scroll all the way down ([16ee45d](https://github.com/ho-nl/m2-pwa/commit/16ee45d8bea8072388dc1508e48704be5a84c4ec))
+* overlay didn't handle portals correctly and closed the overlay ([3cef4e7](https://github.com/ho-nl/m2-pwa/commit/3cef4e73042fd836fc776dad17abcc39d7403eee))
+
+
+
+
+
 ## [3.20.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.4...@graphcommerce/next-ui@3.20.5) (2021-12-06)
 
 

package/Layout/components/LayoutHeaderContent.tsx

@@ -16,8 +16,8 @@ const useStyles = makeStyles(
       position: 'absolute',
       left: 0,
       width: '100%',
-      backgroundColor: theme.palette.background.default,
-      boxShadow: theme.shadows[2],
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[1],
       opacity: 0,
       transition: `opacity ${time}`,
 

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -37,39 +37,35 @@ const useStyles = makeStyles(
     },
     rootVariantSmLeft: {
       [theme.breakpoints.down('sm')]: {
-        gridTemplate: `
-          "overlay beforeOverlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"overlay beforeOverlay"`,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
       },
     },
     rootVariantMdLeft: {
       [theme.breakpoints.up('md')]: {
-        gridTemplate: `
-          "overlay beforeOverlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"overlay beforeOverlay"`,
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
       },
     },
     rootVariantSmRight: {
       [theme.breakpoints.down('sm')]: {
-        gridTemplate: `
-          "beforeOverlay overlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"beforeOverlay overlay"`,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
       },
     },
     rootVariantMdRight: {
       [theme.breakpoints.up('md')]: {
-        gridTemplate: `
-          "beforeOverlay overlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"beforeOverlay overlay"`,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
       },
     },
     rootVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
-        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        gridTemplate: `"beforeOverlay" "overlay"`,
         height: '100vh',
         '@supports (-webkit-touch-callout: none)': {
           height: '-webkit-fill-available',
@@ -78,7 +74,7 @@ const useStyles = makeStyles(
     },
     rootVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
-        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        gridTemplate: `"beforeOverlay" "overlay"`,
         height: '100vh',
       },
     },
@@ -200,15 +196,12 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('md')]: {
         paddingBottom: 1,
         minHeight: '100vh',
+        scrollSnapAlign: 'end',
         '@supports (-webkit-touch-callout: none)': {
           minHeight: '-webkit-fill-available',
         },
       },
     },
-    afterOverlay: {
-      gridArea: 'afterOverlay',
-      scrollSnapAlign: 'start',
-    },
     backdrop: {
       zIndex: -1,
       position: 'fixed',
@@ -343,19 +336,26 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
   )
 
+  const onClickAway = useCallback(
+    (event: React.MouseEvent<Document>) => {
+      if (event.target === document.body && event.type === 'click') return
+      closeOverlay()
+    },
+    [closeOverlay],
+  )
+
   return (
     <>
       <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
       <Scroller {...className('root')} grid={false} hideScrollbar>
         <div {...className('beforeOverlay')} />
         <div {...className('overlay')} ref={overlayRef}>
-          <ClickAwayListener onClickAway={closeOverlay}>
+          <ClickAwayListener onClickAway={onClickAway}>
             <div {...className('overlayPane')}>
               <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
             </div>
           </ClickAwayListener>
         </div>
-        <div {...className('afterOverlay')} />
       </Scroller>
     </>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.6",
+  "version": "3.20.7",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,17 +10,17 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.1",
-    "@graphcommerce/framer-scroller": "^1.1.6",
-    "@graphcommerce/framer-utils": "^2.103.17",
+    "@graphcommerce/framer-next-pages": "^2.108.2",
+    "@graphcommerce/framer-scroller": "^1.1.7",
+    "@graphcommerce/framer-utils": "^2.103.18",
     "@graphcommerce/graphql": "^2.105.7",
-    "@graphcommerce/image": "^2.105.6",
+    "@graphcommerce/image": "^2.105.7",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "clsx": "^1.1.1",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^5.4.5",
     "graphql": "^16.1.0",
     "next": "^12.0.7",
     "react": "^17.0.2",
@@ -29,7 +29,7 @@
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
-    "type-fest": "^2.5.1"
+    "type-fest": "^2.8.0"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "d1e17a76798279be4ceb3429238e1e736061899b"
+  "gitHead": "f8974380ace982793000e5b181b5bb314a1945fb"
 }