@graphcommerce/next-ui 4.8.0 → 4.8.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 4.8.1
+
+### Patch Changes
+
+- [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213) Thanks [@paales](https://github.com/paales)! - Revert faulty background color on LayoutDefault
+
+* [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494) Thanks [@paales](https://github.com/paales)! - LayoutOverlay performance improvements
+
+* Updated dependencies [[`55c2dcde7`](https://github.com/graphcommerce-org/graphcommerce/commit/55c2dcde7869ee51b84494af653b3edfd43904a4), [`597e2f413`](https://github.com/graphcommerce-org/graphcommerce/commit/597e2f413bdb5b76793b40ab631ce61390e26e81), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/framer-scroller@2.1.12
+  - @graphcommerce/framer-next-pages@3.2.2
+  - @graphcommerce/framer-utils@3.1.3
+  - @graphcommerce/image@3.1.6
+
 ## 4.8.0
 
 ### Minor Changes

package/LayoutDefault/components/LayoutDefault.tsx

@@ -58,7 +58,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           display: 'grid',
           gridTemplateRows: `auto auto 1fr auto`,
           gridTemplateColumns: '100%',
-          background: theme.palette.background.paper,
+          background: theme.palette.background.default,
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -177,7 +177,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   useEffect(() => positions.open.visible.onChange((o) => o === 0 && closeOverlay()))
 
   // Measure the offset of the overlay in the scroller.
-
   const offsetY = useMotionValue(0)
   useEffect(() => {
     if (!overlayRef.current) return () => {}
@@ -195,21 +194,20 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   const onClickAway = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      const isTarget = event.target === scrollerRef.current || event.target === beforeRef.current
+      const isTarget =
+        event.target === scrollerRef.current ||
+        event.target === beforeRef.current ||
+        event.target === overlayRef.current
       if (isTarget && snap.get()) closeOverlay()
     },
     [closeOverlay, scrollerRef, snap],
   )
 
-  const pointerEvents = useTransform(position, (p) =>
-    p === OverlayPosition.CLOSED ? 'none' : 'auto',
-  )
-
   return (
     <>
       <MotionDiv
         className={classes.backdrop}
-        style={{ opacity: positions.open.visible, pointerEvents }}
+        style={{ opacity: positions.open.visible }}
         sx={[
           {
             zIndex: -1,
@@ -233,7 +231,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
         grid={false}
         hideScrollbar
         onClick={onClickAway}
-        style={{ pointerEvents }}
         sx={[
           (theme) => ({
             overscrollBehavior: 'contain',
@@ -320,9 +317,9 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
         <Box
           className={classes.overlay}
           ref={overlayRef}
+          onClick={onClickAway}
           sx={(theme) => ({
             display: 'grid',
-            pointerEvents: 'none',
             gridArea: 'overlay',
             scrollSnapAlign: 'start',
             scrollSnapStop: 'always',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,10 +19,10 @@
     "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.1",
-    "@graphcommerce/framer-scroller": "2.1.11",
-    "@graphcommerce/framer-utils": "3.1.2",
-    "@graphcommerce/image": "3.1.5",
+    "@graphcommerce/framer-next-pages": "3.2.2",
+    "@graphcommerce/framer-scroller": "2.1.12",
+    "@graphcommerce/framer-utils": "3.1.3",
+    "@graphcommerce/image": "3.1.6",
     "react-is": "^17.0.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"