@graphcommerce/magento-product 3.6.0 → 3.6.4

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.6.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.6.3...@graphcommerce/magento-product@3.6.4) (2021-11-27)
+
+
+### Bug Fixes
+
+* incorrect usage of offsetTop ([94f1616](https://github.com/ho-nl/m2-pwa/commit/94f161638017b64d898a2ab990bf69d31dc38319))
+* shadows ([8f43f33](https://github.com/ho-nl/m2-pwa/commit/8f43f33190e429e8abea8eddc0646ffd670f2ce8))
+
+
+
+
+
 # [3.6.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.5.22...@graphcommerce/magento-product@3.6.0) (2021-11-12)
 
 

package/components/ProductListFilters/FilterRangeType.tsx

@@ -40,7 +40,7 @@ const useFilterRangeType = makeStyles(
         marginLeft: `-${sliderThumbWidth * 0.5}px`,
         marginTop: `-${sliderThumbWidth * 0.5}px`,
         background: theme.palette.background.default,
-        boxShadow: theme.shadows[4],
+        boxShadow: theme.shadows[6],
       },
     },
   }),

package/components/ProductListFiltersContainer/index.tsx

@@ -33,6 +33,7 @@ const useStyles = makeStyles(
       },
     },
     container: {
+      position: 'relative',
       maxWidth: '100%',
       padding: 6,
       paddingLeft: 0,
@@ -41,6 +42,16 @@ const useStyles = makeStyles(
         background: theme.palette.background.default,
         borderRadius: '99em',
       },
+    },
+    shadow: {
+      pointerEvents: 'none',
+      zindex: '-1',
+      borderRadius: '99em',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      top: 0,
+      boxShadow: theme.shadows[6],
       [theme.breakpoints.down('sm')]: {
         boxShadow: 'none !important',
       },
@@ -94,11 +105,12 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
   useEffect(() => {
     const observer = new ResizeObserver(([entry]) => {
       if (window.scrollY > 100) return
-      const offset = wrapperRef.current?.offsetTop ?? 0
+      const offset = wrapperRef.current?.getBoundingClientRect()?.top ?? 0
       const elemHeigh = entry.contentRect.height
       const nextOffset =
-        (wrapperRef.current?.parentElement?.nextElementSibling as HTMLElement | null)?.offsetTop ??
-        0
+        (
+          wrapperRef.current?.parentElement?.nextElementSibling as HTMLElement | null
+        )?.getBoundingClientRect()?.top ?? 0
       const modifier = 5
 
       setSpacing((nextOffset - elemHeigh - offset + 20) * modifier)
@@ -121,10 +133,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
     return scrollY.onChange(onCheckStickyChange)
   }, [isSticky, scrollHalfway, scrollY])
 
-  const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.1])
-  const boxShadow = useMotionTemplate`
-    0 4px 12px 0 rgba(0, 0, 0, ${opacity})
-    `
+  const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 1])
 
   return (
     <m.div className={classes.wrapper} ref={wrapperRef}>
@@ -132,17 +141,15 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
         <ScrollerButton direction='left' className={classes.sliderPrev}>
           <SvgImageSimple src={iconChevronLeft} />
         </ScrollerButton>
-        <m.div
-          className={clsx(classes.container, isSticky && classes.containerSticky)}
-          style={{ boxShadow }}
-        >
+        <div className={clsx(classes.container, isSticky && classes.containerSticky)}>
           <Scroller
             className={clsx(classes.scroller, isSticky && classes.scrollerSticky)}
             hideScrollbar
           >
             {children}
           </Scroller>
-        </m.div>
+          <m.div className={classes.shadow} style={{ opacity }}></m.div>
+        </div>
         <ScrollerButton direction='right' className={classes.sliderNext}>
           <SvgImageSimple src={iconChevronRight} />
         </ScrollerButton>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-product",
-  "version": "3.6.0",
+  "version": "3.6.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -24,9 +24,9 @@
     "@graphcommerce/framer-scroller": "^1.0.4",
     "@graphcommerce/graphql": "^2.105.5",
     "@graphcommerce/image": "^2.105.4",
-    "@graphcommerce/magento-cart": "^3.7.0",
-    "@graphcommerce/magento-store": "^3.3.0",
-    "@graphcommerce/next-ui": "^3.17.0",
+    "@graphcommerce/magento-cart": "^3.7.4",
+    "@graphcommerce/magento-store": "^3.3.4",
+    "@graphcommerce/next-ui": "^3.18.2",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -38,5 +38,5 @@
     "schema-dts": "^1.0.0",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "6a39908a131938d9c3365cc937b92c1f1f8b33c6"
+  "gitHead": "4d36627aeb43cba320c249b9a876384627064f18"
 }