@graphcommerce/next-ui 3.20.1 → 3.20.2

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.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)
 
 

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/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,
@@ -339,11 +339,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.1",
+  "version": "3.20.2",
   "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.1",
+    "@graphcommerce/framer-scroller": "^1.1.2",
     "@graphcommerce/framer-utils": "^2.103.16",
     "@graphcommerce/graphql": "^2.105.6",
     "@graphcommerce/image": "^2.105.5",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "b4bdc1cd365ebdd0bad8e1ed6afd374123bb2908"
+  "gitHead": "688a7042901bf36f8ab8bbf8e1886570a5350b9e"
 }