@graphcommerce/next-ui 3.20.0 → 3.20.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.20.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.0...@graphcommerce/next-ui@3.20.1) (2021-12-03)
+
+
+### Bug Fixes
+
+* overlay didn't initialize ([f3b4ad9](https://github.com/ho-nl/m2-pwa/commit/f3b4ad9d96656b965865008f315ffcbdd24842de))
+* search page ([85cf721](https://github.com/ho-nl/m2-pwa/commit/85cf72130bce4c3d2c392a3745adf05bca8618b1))
+* sidebar gallery hideScrollbar ([da68544](https://github.com/ho-nl/m2-pwa/commit/da68544c7d99b23db8cb0b96c8ae96ede32abc62))
+* use standard shadows in overlay ([5383aa2](https://github.com/ho-nl/m2-pwa/commit/5383aa2ae69363ebcff1ebec7c120137a83653d0))
+
+
+
+
+
 # [3.20.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.19.1...@graphcommerce/next-ui@3.20.0) (2021-12-03)
 
 

package/FramerScroller/components/SidebarSlider.tsx

@@ -76,7 +76,9 @@ export default function SidebarSlider(props: SidebarSliderProps) {
           </div>
 
           <div className={classes.scrollerContainer}>
-            <Scroller className={classes.scroller}>{children}</Scroller>
+            <Scroller className={classes.scroller} hideScrollbar>
+              {children}
+            </Scroller>
             <div className={classes.centerLeft}>
               <ScrollerButton layout direction='left' className={classes.sliderButtons}>
                 <SvgImageSimple src={iconChevronLeft} />

package/Layout/components/LayoutHeader.tsx

@@ -1,4 +1,3 @@
-import { usePageContext } from '@graphcommerce/framer-next-pages'
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import { classesPicker } from '../../Styles/classesPicker'
@@ -8,7 +7,7 @@ import LayoutHeaderContent, { ContentProps } from './LayoutHeaderContent'
 import { FloatingProps } from './LayoutHeadertypes'
 
 export type LayoutHeaderProps = FloatingProps &
-  Omit<ContentProps, 'leftAction' | 'rightAction'> & {
+  Omit<ContentProps, 'left' | 'right'> & {
     /**
      * Button to display on the left side of the title
      *
@@ -98,7 +97,7 @@ const useStyles = makeStyles(
 )
 
 export function LayoutHeader(props: LayoutHeaderProps) {
-  const { children, additional, divider, primary, secondary, noAlign } = props
+  const { children, additional, divider, primary, secondary, noAlign, switchPoint } = props
   const classes = useStyles(props)
   const showBack = useShowBack()
   const showClose = useShowClose()
@@ -142,6 +141,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
         divider={divider}
         floatingMd={floatingMd}
         floatingSm={floatingSm}
+        switchPoint={switchPoint}
       >
         {children}
         {additional}

package/Layout/components/LayoutHeaderContent.tsx

@@ -141,16 +141,25 @@ export type ContentProps = FloatingProps &
     left?: React.ReactNode
     right?: React.ReactNode
     divider?: React.ReactNode
+    switchPoint?: number
   }
 
 export default function LayoutHeaderContent(props: ContentProps) {
   const ref = useRef<HTMLDivElement>(null)
   const scroll = useScrollY()
 
-  const { left, children, right, divider, floatingMd = false, floatingSm = false } = props
+  const {
+    left,
+    children,
+    right,
+    divider,
+    floatingMd = false,
+    floatingSm = false,
+    switchPoint = 50,
+  } = props
   const classes = useStyles(props)
 
-  const scrolled = useMotionValueValue(scroll, (y) => y > 50)
+  const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
   const className = classesPicker<Classes>(classes, {
     floatingSm,

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -153,14 +153,12 @@ const useStyles = makeStyles(
       [theme.breakpoints.down('sm')]: {
         width: '100vw',
         borderRadius: 10,
-        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
         width: '100vw',
         borderRadius: 10,
-        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
       },
     },
     overlayPaneVariantSmLeft: {

package/LayoutOverlay/hooks/useOverlayPosition.ts

@@ -26,9 +26,9 @@ export function useOverlayPosition() {
 
     const measure = () => {
       const positions = getScrollSnapPositions()
-      state.open.x.set(positions.x[1])
+      state.open.x.set(positions.x[1] ?? 0)
       state.closed.x.set(positions.x[0])
-      state.open.y.set(positions.y[1])
+      state.open.y.set(positions.y[1] ?? 0)
       state.closed.y.set(positions.y[0])
     }
     const ro = new ResizeObserver(measure)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.0",
+  "version": "3.20.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.108.0",
-    "@graphcommerce/framer-scroller": "^1.1.0",
+    "@graphcommerce/framer-scroller": "^1.1.1",
     "@graphcommerce/framer-utils": "^2.103.16",
     "@graphcommerce/graphql": "^2.105.6",
     "@graphcommerce/image": "^2.105.5",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "8f156415c7f5a963e363f0d6d18fe5d6bbd5dba2"
+  "gitHead": "b4bdc1cd365ebdd0bad8e1ed6afd374123bb2908"
 }