@graphcommerce/next-ui 3.0.3 → 3.1.0

package/AppShell/AppShellHeader/index.tsx

@@ -1,5 +1,5 @@
-import { Fab, makeStyles, Theme } from '@material-ui/core'
 import { useHistoryLink, usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import { Fab, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m, MotionValue, useMotionValue, useTransform } from 'framer-motion'
 import PageLink from 'next/link'

package/AppShell/DesktopNavBar.tsx

@@ -1,5 +1,5 @@
-import { Link, makeStyles, Theme } from '@material-ui/core'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Link, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'

package/AppShell/SheetShellBase/index.tsx

@@ -1,14 +1,15 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
 import {
+  ClassKeys,
   Sheet,
   SheetBackdrop,
   SheetContainer,
   SheetPanel,
   SheetProps,
   SnapPoint,
-  styles,
+  styles as sheetStyles,
 } from '@graphcommerce/framer-sheet'
+import { makeStyles, StyleRules, Theme } from '@material-ui/core'
 import { useDomEvent } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useRef } from 'react'
@@ -23,6 +24,8 @@ export type SheetShellBaseProps = {
 } & Pick<SheetProps, 'size' | 'variant'> &
   PageLayoutBaseProps
 
+const styles = sheetStyles as StyleRules<ClassKeys>
+
 const useStyles = makeStyles(
   (theme: Theme) => ({
     container: {

package/AppShell/SheetShellBase/useSheetStyles.ts

@@ -1,6 +1,6 @@
+import styles, { ClassKeys } from '@graphcommerce/framer-sheet/styles'
 import { makeStyles, StyleRules, Theme } from '@material-ui/core'
 import { ClassNameMap } from '@material-ui/styles'
-import styles, { ClassKeys } from '@graphcommerce/framer-sheet/styles'
 
 type UseSheetStylesReturn = (props?: Record<string, unknown>) => ClassNameMap<ClassKeys>
 

package/AppShell/SheetShellDragIndicator/index.tsx

@@ -1,8 +1,15 @@
-import { makeStyles } from '@material-ui/core'
-import { SheetDragIndicator, SheetDragIndicatorProps, styles } from '@graphcommerce/framer-sheet'
+import {
+  SheetDragIndicator,
+  SheetDragIndicatorProps,
+  styles as sheetStyles,
+  ClassKeys,
+} from '@graphcommerce/framer-sheet'
+import { makeStyles, StyleRules } from '@material-ui/core'
 import React from 'react'
 import responsiveVal from '../../Styles/responsiveVal'
 
+const styles = sheetStyles as StyleRules<ClassKeys>
+
 const useStyles = makeStyles(
   () => ({
     indicatorRoot: {

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/ChipMenu/index.tsx

@@ -1,10 +1,10 @@
 import { Chip, ChipProps, makeStyles, Menu, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { PropsWithChildren, useState } from 'react'
-import { iconChevronDown, iconChevronUp, iconCloseCircle } from '../icons'
 import SectionHeader from '../SectionHeader'
 import responsiveVal from '../Styles/responsiveVal'
 import SvgImage from '../SvgImage'
+import { iconChevronDown, iconChevronUp, iconCloseCircle } from '../icons'
 
 export const useChipMenuStyles = makeStyles(
   (theme: Theme) => ({

package/FramerNextPagesSlider/Slide.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core'
 import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
 import { SPRING_ANIM } from '@graphcommerce/framer-sheet'
+import { makeStyles } from '@material-ui/core'
 import { m, motionValue, useElementScroll } from 'framer-motion'
 import React, { useEffect, useRef } from 'react'
 import { ScrollPositions } from './types'

package/FramerNextPagesSlider/Slider.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/styles'
 import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import { makeStyles } from '@material-ui/styles'
 import { AnimatePresence } from 'framer-motion'
 import React, { useRef } from 'react'
 import RouterSlide from './Slide'

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,17 +1,17 @@
-import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
 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/FramerScroller/components/SidebarSlider.tsx

@@ -1,12 +1,12 @@
 import { relative } from 'path/posix'
-import { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/styles'
 import {
   Scroller,
   ScrollerButton,
   ScrollerPageCounter,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
+import { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/styles'
 import React, { ReactNode } from 'react'
 import { SvgImageSimple, iconChevronLeft, iconChevronRight } from '../..'
 import { UseStyles } from '../../Styles'

package/Row/ContentLinks/index.tsx

@@ -1,5 +1,5 @@
-import { Container, makeStyles, Theme, Typography } from '@material-ui/core'
 import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Container, makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
 import { UseStyles } from '../../Styles'
 

package/SvgImage/SvgImageSimple.tsx

@@ -1,5 +1,5 @@
-import { makeStyles, capitalize, Theme } from '@material-ui/core'
 import { Image, ImageProps } from '@graphcommerce/image'
+import { makeStyles, capitalize, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import responsiveVal from '../Styles/responsiveVal'

package/SvgImage/index.tsx

@@ -1,5 +1,5 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { Image, ImageProps } from '@graphcommerce/image'
+import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import { UseStyles } from '../Styles'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.21",
-    "@graphcommerce/framer-next-pages": "^2.106.3",
-    "@graphcommerce/framer-scroller": "^0.2.3",
-    "@graphcommerce/framer-sheet": "^2.105.2",
-    "@graphcommerce/framer-utils": "^2.103.2",
-    "@graphcommerce/graphql": "^2.103.2",
-    "@graphcommerce/image": "^2.104.3",
+    "@graphcommerce/framer-next-pages": "^2.106.5",
+    "@graphcommerce/framer-scroller": "^0.2.5",
+    "@graphcommerce/framer-sheet": "^2.105.4",
+    "@graphcommerce/framer-utils": "^2.103.4",
+    "@graphcommerce/graphql": "^2.103.4",
+    "@graphcommerce/image": "^2.104.5",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -35,12 +35,11 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.2",
+    "@graphcommerce/eslint-config-pwa": "^3.0.4",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
-    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.1.0",
     "@playwright/test": "^1.15.0",
-    "@testing-library/react": "^12.1.0",
-    "@types/react": "^17.0.24",
+    "@types/react": "^17.0.25",
     "@types/react-dom": "^17.0.9",
     "@types/react-is": "^17.0.2",
     "graphql-tag": "2.12.5",
@@ -57,5 +56,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "c1aca21f6830cb9e4ec906e0f3f905623d977918"
+  "gitHead": "88c9c0b170964ec794f59c97bac253a29a7d58e0"
 }