@graphcommerce/next-ui 3.0.4 → 3.1.1

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,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.0...@graphcommerce/next-ui@3.1.1) (2021-10-04)
+
+
+### Bug Fixes
+
+* cart icon alignment ([8b75b40](https://github.com/ho-nl/m2-pwa/commit/8b75b40bcdecf6d43579ee824677bf1a03763157))
+* **icon-block:** render href ([738fd82](https://github.com/ho-nl/m2-pwa/commit/738fd82629dd3be92fe0cdd63ed8eeaa5d4886f6))
+
+
+
+
+
+# [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/Row/IconBlocks/IconBlock/index.tsx

@@ -44,7 +44,7 @@ const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, re
 
   if (href) {
     return (
-      <Button variant='text' color='primary' className={classes.block} ref={ref}>
+      <Button href={href} variant='text' color='primary' className={classes.block} ref={ref}>
         <div>{content}</div>
       </Button>
     )

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/icons/icon_shopping_bag.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-     <g transform="translate(0.25,-1.85)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg transform="translate(0.25, 0.25)" width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path d="M22.7211388,13.8851398 L23.5468356,26.00354 L8.74931805,26.00354 L9.57501488,13.8851398 L22.7211388,13.8851398 Z" id="Rectangle-6" stroke="#000000" stroke-width="1.4"></path>
         <path d="M12.4444055,14.953 L12.4444055,11.4552028 C12.4444055,9.54694698 13.9458954,8 15.798077,8 C17.6502587,8 19.1517485,9.54694698 19.1517485,11.4552028 L19.1517485,14.9497766" id="Path" stroke="#000000" stroke-width="1.4" stroke-linecap="square" stroke-linejoin="bevel"></path>
     </g>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.0.4",
+  "version": "3.1.1",
   "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,11 +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",
-    "@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",
@@ -56,5 +56,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "aba0a6340e2d098313f1c25cc2047c18e5ea5db5"
+  "gitHead": "d543ebfabe185d01354c9aed619ab83ec816944f"
 }