@graphcommerce/next-ui 3.20.5 → 3.20.9

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.20.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.8...@graphcommerce/next-ui@3.20.9) (2021-12-16)
+
+
+### Bug Fixes
+
+* simplify ButtonLinkList and made  more flexible ([e01cc82](https://github.com/ho-nl/m2-pwa/commit/e01cc825b87abf81d1cb8f9dc976f674b9e8e6d3))
+
+
+
+
+
+## [3.20.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.7...@graphcommerce/next-ui@3.20.8) (2021-12-15)
+
+
+### Bug Fixes
+
+* could not scroll to the bottom of a left/right sheet ([b84c86e](https://github.com/ho-nl/m2-pwa/commit/b84c86efa090657fc4cd480547f576bf6d9e0709))
+* scroller should not snap to off-axis while dragging and direction isn't set to both ([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
+
+
+
+
+
+## [3.20.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.6...@graphcommerce/next-ui@3.20.7) (2021-12-13)
+
+
+### Bug Fixes
+
+* header style color ([ea373be](https://github.com/ho-nl/m2-pwa/commit/ea373be9dbf609e0a719b000d27ad79d2be45f65))
+* make sure we're allowed to scroll all the way down ([16ee45d](https://github.com/ho-nl/m2-pwa/commit/16ee45d8bea8072388dc1508e48704be5a84c4ec))
+* overlay didn't handle portals correctly and closed the overlay ([3cef4e7](https://github.com/ho-nl/m2-pwa/commit/3cef4e73042fd836fc776dad17abcc39d7403eee))
+
+
+
+
+
 ## [3.20.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.4...@graphcommerce/next-ui@3.20.5) (2021-12-06)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -11,12 +11,11 @@ import {
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme, alpha } from '@material-ui/core'
-import clsx from 'clsx'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import React, { useEffect, useRef } from 'react'
-import { classesPicker } from '../..'
 import Row from '../../Row'
 import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'

package/Layout/components/LayoutHeaderContent.tsx

@@ -16,8 +16,8 @@ const useStyles = makeStyles(
       position: 'absolute',
       left: 0,
       width: '100%',
-      backgroundColor: theme.palette.background.default,
-      boxShadow: theme.shadows[2],
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[1],
       opacity: 0,
       transition: `opacity ${time}`,
 

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -11,9 +11,9 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
   const { children, variantSm = 'bottom', variantMd = 'right', classes } = props
 
   const scrollSnapTypeSm: ScrollSnapType =
-    variantSm === 'left' || variantSm === 'right' ? 'both mandatory' : 'block proximity'
+    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
   const scrollSnapTypeMd: ScrollSnapType =
-    variantMd === 'left' || variantMd === 'right' ? 'both mandatory' : 'block proximity'
+    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
 
   return (
     <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -28,48 +28,44 @@ const useStyles = makeStyles(
       },
       [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')]: {
-        gridTemplate: `
-          "overlay beforeOverlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"overlay beforeOverlay"`,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
+        borderBottomRightRadius: theme.shape.borderRadius * 3,
       },
     },
     rootVariantMdLeft: {
       [theme.breakpoints.up('md')]: {
-        gridTemplate: `
-          "overlay beforeOverlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"overlay beforeOverlay"`,
+        borderTopRightRadius: theme.shape.borderRadius * 4,
+        borderBottomRightRadius: theme.shape.borderRadius * 4,
       },
     },
     rootVariantSmRight: {
       [theme.breakpoints.down('sm')]: {
-        gridTemplate: `
-          "beforeOverlay overlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"beforeOverlay overlay"`,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderBottomLeftRadius: theme.shape.borderRadius * 3,
       },
     },
     rootVariantMdRight: {
       [theme.breakpoints.up('md')]: {
-        gridTemplate: `
-          "beforeOverlay overlay"
-          "afterOverlay afterOverlay"
-        `,
+        gridTemplate: `"beforeOverlay overlay"`,
+        borderTopLeftRadius: theme.shape.borderRadius * 4,
+        borderBottomLeftRadius: theme.shape.borderRadius * 4,
       },
     },
     rootVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
-        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
+        gridTemplate: `"beforeOverlay" "overlay"`,
         height: '100vh',
         '@supports (-webkit-touch-callout: none)': {
           height: '-webkit-fill-available',
@@ -77,15 +73,16 @@ const useStyles = makeStyles(
       },
     },
     rootVariantMdBottom: {
+      borderTopLeftRadius: theme.shape.borderRadius * 4,
+      borderTopRightRadius: theme.shape.borderRadius * 4,
       [theme.breakpoints.up('md')]: {
-        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        gridTemplate: `"beforeOverlay" "overlay"`,
         height: '100vh',
       },
     },
     beforeOverlay: {
       gridArea: 'beforeOverlay',
       scrollSnapAlign: 'start',
-      scrollSnapStop: 'always',
       display: 'grid',
       alignContent: 'end',
     },
@@ -138,7 +135,6 @@ const useStyles = makeStyles(
       [theme.breakpoints.down('sm')]: {
         marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
         paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
-        scrollSnapStop: 'always',
         display: 'grid',
       },
     },
@@ -146,8 +142,6 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('md')]: {
         marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
         paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
-        scrollSnapAlign: 'start',
-        scrollSnapStop: 'always',
         display: 'grid',
       },
     },
@@ -156,17 +150,20 @@ const useStyles = makeStyles(
       backgroundColor: theme.palette.background.paper,
       boxShadow: theme.shadows[24],
       minWidth: 'min(800px, 90vw)',
+      scrollSnapAlign: 'end',
     },
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
         width: '100vw',
-        borderRadius: theme.shape.borderRadius * 3,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
         width: '100vw',
-        borderRadius: theme.shape.borderRadius * 4,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantSmLeft: {
@@ -200,15 +197,12 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('md')]: {
         paddingBottom: 1,
         minHeight: '100vh',
+        scrollSnapAlign: 'end',
         '@supports (-webkit-touch-callout: none)': {
           minHeight: '-webkit-fill-available',
         },
       },
     },
-    afterOverlay: {
-      gridArea: 'afterOverlay',
-      scrollSnapAlign: 'start',
-    },
     backdrop: {
       zIndex: -1,
       position: 'fixed',
@@ -343,19 +337,26 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
   )
 
+  const onClickAway = useCallback(
+    (event: React.MouseEvent<Document>) => {
+      if (event.target === document.body && event.type === 'click') return
+      closeOverlay()
+    },
+    [closeOverlay],
+  )
+
   return (
     <>
       <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
       <Scroller {...className('root')} grid={false} hideScrollbar>
         <div {...className('beforeOverlay')} />
         <div {...className('overlay')} ref={overlayRef}>
-          <ClickAwayListener onClickAway={closeOverlay}>
+          <ClickAwayListener onClickAway={onClickAway}>
             <div {...className('overlayPane')}>
               <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
             </div>
           </ClickAwayListener>
         </div>
-        <div {...className('afterOverlay')} />
       </Scroller>
     </>
   )

package/Row/ButtonLinkList/{index.tsx → ButtonLinkList.tsx}

@@ -32,20 +32,20 @@ const useStyles = makeStyles(
 
 type ButtonLinkListPropsBase = {
   title: string
-  links: React.ReactNode
+  children: React.ReactNode
   containsBigLinks: boolean
 }
 
 export type ButtonLinkListProps = UseStyles<typeof useStyles> & ButtonLinkListPropsBase
 
-export default function ButtonLinkList(props: ButtonLinkListProps) {
-  const { title, links } = props
+export function ButtonLinkList(props: ButtonLinkListProps) {
+  const { title, children } = props
   const classes = useStyles(props)
 
   return (
     <Row maxWidth='md' className={classes.container}>
       <SectionContainer labelLeft={title}>
-        <div className={classes.links}>{links}</div>
+        <div className={classes.links}>{children}</div>
       </SectionContainer>
     </Row>
   )

package/{ButtonLink/index.tsx → Row/ButtonLinkList/ButtonLinkListItem.tsx}

@@ -1,10 +1,11 @@
 import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
 import PageLink from 'next/link'
 import React from 'react'
-import Button, { ButtonProps } from '../Button'
-import { UseStyles } from '../Styles'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconChevronRight } from '../icons'
+import Button, { ButtonProps } from '../../Button'
+import { UseStyles } from '../../Styles'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconChevronRight } from '../../icons'
 
 const useStyles = makeStyles((theme: Theme) => ({
   buttonLink: {
@@ -24,20 +25,20 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 export type ButtonLinkProps = {
-  title: string | React.ReactNode
+  children: React.ReactNode
   url: string
   endIcon?: React.ReactNode
 } & ButtonProps &
   UseStyles<typeof useStyles>
 
-export default function ButtonLink(props: ButtonLinkProps) {
-  const { title, url, endIcon, ...buttonProps } = props
+export function ButtonLinkListItem(props: ButtonLinkProps) {
+  const { children, url, endIcon, className, ...buttonProps } = props
   const classes = useStyles(props)
 
   return (
     <PageLink href={url} passHref>
-      <Button {...buttonProps} className={classes.buttonLink}>
-        <span>{title}</span>
+      <Button {...buttonProps} className={clsx(classes.buttonLink, className)}>
+        <span>{children}</span>
         {endIcon ?? <SvgImageSimple src={iconChevronRight} />}
       </Button>
     </PageLink>

package/Row/ButtonLinkList/index.ts

@@ -0,0 +1,2 @@
+export * from './ButtonLinkList'
+export * from './ButtonLinkListItem'

package/index.ts

@@ -27,8 +27,7 @@ export * from './Blog/BlogListItem'
 export { default as BlogListItem } from './Blog/BlogListItem'
 export * from './Button'
 export { default as Button } from './Button'
-export * from './ButtonLink'
-export { default as ButtonLink } from './ButtonLink'
+
 export * from './ChipMenu'
 export { default as ChipMenu } from './ChipMenu'
 export * from './ContainerWithHeader'
@@ -66,7 +65,6 @@ export * from './RenderType'
 export { default as RenderType } from './RenderType'
 export { default as Row } from './Row'
 export * from './Row/ButtonLinkList'
-export { default as ButtonLinkList } from './Row/ButtonLinkList'
 export { default as ColumnOne } from './Row/ColumnOne'
 export { default as ColumnOneBoxed } from './Row/ColumnOneBoxed'
 export { default as ColumnOneCentered } from './Row/ColumnOneCentered'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.5",
+  "version": "3.20.9",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -9,37 +9,37 @@
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.108.0",
-    "@graphcommerce/framer-scroller": "^1.1.5",
-    "@graphcommerce/framer-utils": "^2.103.16",
-    "@graphcommerce/graphql": "^2.105.6",
-    "@graphcommerce/image": "^2.105.5",
-    "@lingui/macro": "^3.12.1",
+    "@apollo/client": "^3.5.6",
+    "@graphcommerce/framer-next-pages": "^2.108.3",
+    "@graphcommerce/framer-scroller": "^1.1.9",
+    "@graphcommerce/framer-utils": "^2.103.19",
+    "@graphcommerce/graphql": "^2.105.8",
+    "@graphcommerce/image": "^2.105.8",
+    "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "clsx": "^1.1.1",
-    "framer-motion": "^4.1.17",
-    "graphql": "^15.6.1",
-    "next": "^12.0.3",
+    "framer-motion": "^5.5.1",
+    "graphql": "^16.1.0",
+    "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.5.2",
+    "react-focus-lock": "^2.7.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
-    "type-fest": "^2.5.1"
+    "type-fest": "^2.8.0"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.6",
+    "@graphcommerce/eslint-config-pwa": "^3.1.8",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
-    "@playwright/test": "^1.16.2",
+    "@playwright/test": "^1.17.1",
     "@types/react-is": "^17.0.3",
-    "graphql-tag": "2.12.5",
-    "typescript": "^4.4.4"
+    "graphql-tag": "2.12.6",
+    "typescript": "^4.5.4"
   },
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "9a8007742437e8d0d88e60376c3402a46f20908d"
+  "gitHead": "874fc99dcc129872cd7577482ab26c5ea256a7fb"
 }