@graphcommerce/next-ui 3.20.0 → 3.20.4

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.20.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.3...@graphcommerce/next-ui@3.20.4) (2021-12-06)
+
+
+### Bug Fixes
+
+* use Locale to set storeSwitcher icons ([65ea397](https://github.com/ho-nl/m2-pwa/commit/65ea397ec53aa27f545b43feda8e35227e119ebe))
+
+
+
+
+
+## [3.20.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.1...@graphcommerce/next-ui@3.20.2) (2021-12-03)
+
+
+### Bug Fixes
+
+* aria-labels missing ([16570d1](https://github.com/ho-nl/m2-pwa/commit/16570d11efcb264eba6c620c5508c9616c2d0a2a))
+* make sure the overlay can be clicked away ([5b43e2f](https://github.com/ho-nl/m2-pwa/commit/5b43e2f0568c2587be63b74271409123fc0a44e2))
+
+
+
+
+
+## [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/FlagAvatar/index.tsx

@@ -20,7 +20,7 @@ export default function FlagAvatar(props: FlagAvatarProps) {
       classes={classes}
       imgProps={{ loading: 'lazy' }}
       alt={country}
-      src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/${country}.svg`}
+      src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/${country}.svg`}
     >
       {country.toLocaleUpperCase()}
     </Avatar>

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/LayoutHeaderBack.tsx

@@ -1,5 +1,5 @@
 import { usePageRouter, useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
-import { Trans } from '@lingui/macro'
+import { t } from '@lingui/macro'
 import PageLink from 'next/link'
 import React from 'react'
 import Button, { ButtonProps } from '../../Button'
@@ -30,17 +30,25 @@ export default function LayoutHeaderBack(props: BackProps) {
   const backIcon = <SvgImageSimple src={iconChevronLeft} />
   const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
 
-  if (canClickBack)
+  if (canClickBack) {
+    const label = up?.href === router.asPath ? up.title : t`Back`
     return (
-      <Button onClick={() => router.back()} variant='pill-link' startIcon={backIcon} {...props}>
-        {up?.href === router.asPath ? up.title : <Trans>Back</Trans>}
+      <Button
+        onClick={() => router.back()}
+        variant='pill-link'
+        startIcon={backIcon}
+        aria-label={label}
+        {...props}
+      >
+        {label}
       </Button>
     )
+  }
 
   if (up?.href && up.href !== router.asPath)
     return (
       <PageLink href={up.href} passHref>
-        <Button variant='pill-link' startIcon={backIcon} {...props}>
+        <Button variant='pill-link' startIcon={backIcon} aria-label={up.title} {...props}>
           {up.title}
         </Button>
       </PageLink>

package/Layout/components/LayoutHeaderContent.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles(
       left: 0,
       width: '100%',
       backgroundColor: theme.palette.background.default,
+      boxShadow: theme.shadows[2],
       opacity: 0,
       transition: `opacity ${time}`,
 
@@ -25,6 +26,9 @@ const useStyles = makeStyles(
         height: theme.appShell.appBarHeightMd,
       },
     },
+    bgDivider: {
+      boxShadow: 'unset',
+    },
     bgFloatingSm: {
       [theme.breakpoints.down('sm')]: {
         display: 'none',
@@ -112,14 +116,6 @@ const useStyles = makeStyles(
       bottom: 0,
       left: 0,
       right: 0,
-      transition: `opacity ${time}`,
-      opacity: 0,
-    },
-    dividerCustomDivider: {
-      opacity: 1,
-    },
-    dividerScrolled: {
-      opacity: 1,
     },
     dividerFloatingSm: {
       [theme.breakpoints.down('sm')]: {
@@ -141,22 +137,31 @@ 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,
     floatingMd,
     scrolled,
-    customDivider: !!divider,
+    divider: !!divider,
   })
 
   return (
@@ -166,7 +171,7 @@ export default function LayoutHeaderContent(props: ContentProps) {
         <div {...className('left')}>{left}</div>
         <div {...className('center')}>{children}</div>
         <div {...className('right')}>{right}</div>
-        <div {...className('divider')}>{divider ?? <Divider />}</div>
+        {divider && <div {...className('divider')}>{divider}</div>}
       </div>
     </>
   )

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -1,7 +1,7 @@
 import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
-import { makeStyles, Theme } from '@material-ui/core'
+import { makeStyles, Theme, ClickAwayListener } from '@material-ui/core'
 import {
   m,
   MotionValue,
@@ -26,6 +26,14 @@ const useStyles = makeStyles(
       '@supports (-webkit-touch-callout: none)': {
         height: '-webkit-fill-available',
       },
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+        borderRadius: theme.shape.borderRadius * 3,
+      },
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+        borderRadius: theme.shape.borderRadius * 4,
+      },
     },
     rootVariantSmLeft: {
       [theme.breakpoints.down('sm')]: {
@@ -152,15 +160,13 @@ const useStyles = makeStyles(
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
         width: '100vw',
-        borderRadius: 10,
-        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
+        borderRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
         width: '100vw',
-        borderRadius: 10,
-        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
+        borderRadius: theme.shape.borderRadius * 4,
       },
     },
     overlayPaneVariantSmLeft: {
@@ -341,11 +347,13 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     <>
       <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
       <Scroller {...className('root')} grid={false} hideScrollbar>
-        <div {...className('beforeOverlay')} onClick={closeOverlay} />
+        <div {...className('beforeOverlay')} />
         <div {...className('overlay')} ref={overlayRef}>
-          <div {...className('overlayPane')}>
-            <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-          </div>
+          <ClickAwayListener onClickAway={closeOverlay}>
+            <div {...className('overlayPane')}>
+              <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
+            </div>
+          </ClickAwayListener>
         </div>
         <div {...className('afterOverlay')} />
       </Scroller>

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.4",
   "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.4",
     "@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": "b992ac3fbe719310988edb8ad811366431509bc2"
 }