@graphcommerce/next-ui 3.0.6 → 3.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.0.6...@graphcommerce/next-ui@3.1.0) (2021-10-01)
+
+
+### Features
+
+* **sidebar-gallery:** close using esc key ([fd46fe1](https://github.com/ho-nl/m2-pwa/commit/fd46fe1029f436c1e0e04cbcc3b66deca4d1b0b6))
+
+
+
+
+
 ## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.0.0...@graphcommerce/next-ui@3.0.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/next-ui

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,17 +1,17 @@
 import {
+  CenterSlide,
+  MotionImageAspect,
+  MotionImageAspectProps,
+  Scroller,
   ScrollerButton,
   ScrollerDots,
   ScrollerProvider,
-  Scroller,
-  MotionImageAspectProps,
-  CenterSlide,
-  MotionImageAspect,
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
-import React, { useState } from 'react'
+import { m, useDomEvent } from 'framer-motion'
+import React, { useRef, useState } from 'react'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
 import SvgImage from '../../SvgImage'
@@ -183,6 +183,18 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
 
   const theme = useTheme()
 
+  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
+
+  const handleEscapeKey = (e: KeyboardEvent | Event) => {
+    if (zoomed) {
+      if ((e as KeyboardEvent)?.key === 'Escape') {
+        toggle()
+      }
+    }
+  }
+
+  useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
+
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <m.div layout className={clsxZoom('root')}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -56,5 +56,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "cf2b61fa96aca043ff841b018334ca8c28e5e6cf"
+  "gitHead": "88c9c0b170964ec794f59c97bac253a29a7d58e0"
 }