@graphcommerce/next-ui 3.21.4 → 3.21.8

package/AnimatedRow/index.tsx

@@ -10,7 +10,7 @@ export default function AnimatedRow(props: AnimatedRowProps) {
   return (
     <m.div
       {...props}
-      layout
+      layout='size'
       initial={{ opacity: 0, height: 0 }}
       animate={{ opacity: 1, height: 'auto' }}
       exit={{ opacity: 0, height: 0 }}

package/AppShell/FixedFab.tsx

@@ -9,7 +9,6 @@ const useStyles = makeStyles(
       bottom: 20,
       right: 20,
       zIndex: 100,
-      boxShadow: theme.shadows[4],
       borderRadius: 99,
       maxWidth: 56,
       [theme.breakpoints.up('md')]: {
@@ -17,7 +16,6 @@ const useStyles = makeStyles(
         top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
         left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
         bottom: 'unset',
-        boxShadow: 'unset',
       },
     },
   }),

package/AppShell/Logo.tsx

@@ -8,7 +8,7 @@ import { UseStyles } from '../Styles'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     logo: {},
-    link: {
+    parent: {
       height: '100%',
       width: 'max-content',
       display: 'flex',
@@ -33,12 +33,12 @@ export default function Logo(props: LogoProps) {
   const classes = useStyles(props)
 
   return router.asPath === '/' ? (
-    <div className={classes.logo}>
+    <div className={classes.parent}>
       <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
     </div>
   ) : (
     <PageLink href={href ?? '/'} passHref>
-      <a className={classes.link} aria-label='Logo'>
+      <a className={classes.parent} aria-label='Logo'>
         <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
       </a>
     </PageLink>

package/AppShell/MenuFab.tsx

@@ -37,15 +37,27 @@ const useStyles = makeStyles(
       },
     },
     menuFab: {
+      boxShadow: 'none',
+      '&:hover, &:focus': {
+        boxShadow: 'none',
+        background: theme.palette.text.primary,
+      },
       background: theme.palette.text.primary,
       width: responsiveVal(42, 56),
       height: responsiveVal(42, 56),
       pointerEvents: 'all',
-      '&:hover, &:focus': {
-        background: theme.palette.text.primary,
-      },
-      '& svg': {
-        color: theme.palette.background.paper,
+      color: theme.palette.background.paper,
+    },
+    shadow: {
+      pointerEvents: 'none',
+      borderRadius: '99em',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      boxShadow: theme.shadows[6],
+      top: 0,
+      [theme.breakpoints.down('sm')]: {
+        opacity: '1 !important',
       },
     },
     menu: {
@@ -80,7 +92,7 @@ export default function MenuFab(props: MenuFabProps) {
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
-  const { filter, opacity, scale } = useFabAnimation()
+  const { opacity, scale, shadowOpacity } = useFabAnimation()
 
   useEffect(() => {
     const clear = () => setOpenEl(null)
@@ -89,9 +101,9 @@ export default function MenuFab(props: MenuFabProps) {
   }, [router])
 
   return (
-    <m.div className={classes.menuWrapper} style={{ opacity, scale, filter }}>
+    <m.div className={classes.menuWrapper} style={{ scale, opacity }}>
       <Fab
-        color='primary'
+        color='inherit'
         aria-label='Open Menu'
         size='medium'
         onClick={(event) => setOpenEl(event.currentTarget)}
@@ -104,6 +116,7 @@ export default function MenuFab(props: MenuFabProps) {
           <SvgImageSimple src={iconMenu} inverted style={{ display: openEl ? 'none' : 'block' }} />
         )}
       </Fab>
+      <m.div className={classes.shadow} style={{ opacity: shadowOpacity }} />
 
       <Menu
         anchorEl={openEl}

package/AppShell/useFabAnimation.ts

@@ -1,20 +1,11 @@
-import { useMediaQuery, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export function useFabAnimation() {
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const scrollY = useScrollY()
-  const scrollTo = isMobile ? 0 : 130
 
-  const scale = useTransform(scrollY, [50, scrollTo], [0.4, 1])
-  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
-  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
-  const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
-  const filter = useMotionTemplate`
-    drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
-    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
-
-  return { filter, opacity, scale }
+  const scale = useTransform(scrollY, [50, 130], [0.4, 1])
+  const opacity = useTransform(scrollY, [50, 130], [0, 1])
+  const shadowOpacity = useTransform(scrollY, [131, 140], [0, 1])
+  return { opacity, scale, shadowOpacity }
 }

package/AppShell/useFixedFabAnimation.ts

@@ -1,16 +1,15 @@
 import { alpha, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export function useFixedFabAnimation() {
   const theme = useTheme()
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
-  const opacity1 = useTransform(
+  const backgroundColor = useTransform(
     scrollY,
     [0, 10],
     [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
   )
-  const backgroundColor = useMotionTemplate`${opacity1}`
   return { backgroundColor, opacity }
 }

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.21.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.7...@graphcommerce/next-ui@3.21.8) (2021-12-21)
+
+
+### Bug Fixes
+
+* logo invert darkmode and consistent logo spacing ([2a80603](https://github.com/ho-nl/m2-pwa/commit/2a80603fd3255544f78d9da28aad17fb3fca0c9c))
+* menuFab, cartFab shadows, darkTheme color and opacity bug ([6c7afa7](https://github.com/ho-nl/m2-pwa/commit/6c7afa7d3b584b455476aa26d95041c4cf6c1d0c))
+
+
+
+
+
+## [3.21.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.4...@graphcommerce/next-ui@3.21.5) (2021-12-20)
+
+
+### Bug Fixes
+
+* animations would run on background page, make sure animations are not running when page is not active ([2fcf4b8](https://github.com/ho-nl/m2-pwa/commit/2fcf4b8a853108147477e3a67c7ea202abb2842f))
+
+
+
+
+
 ## [3.21.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.3...@graphcommerce/next-ui@3.21.4) (2021-12-20)
 
 

package/FramerScroller/components/SidebarSlider.tsx

@@ -80,12 +80,12 @@ export default function SidebarSlider(props: SidebarSliderProps) {
               {children}
             </Scroller>
             <div className={classes.centerLeft}>
-              <ScrollerButton layout direction='left' className={classes.sliderButtons}>
+              <ScrollerButton direction='left' className={classes.sliderButtons}>
                 <SvgImageSimple src={iconChevronLeft} />
               </ScrollerButton>
             </div>
             <div className={classes.centerRight}>
-              <ScrollerButton layout direction='right' className={classes.sliderButtons}>
+              <ScrollerButton direction='right' className={classes.sliderButtons}>
                 <SvgImageSimple src={iconChevronRight} />
               </ScrollerButton>
             </div>

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,4 +1,4 @@
-import { usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { useTransform, useViewportScroll } from 'framer-motion'

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -2,14 +2,7 @@ import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/f
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { makeStyles, Theme, ClickAwayListener } from '@material-ui/core'
-import {
-  m,
-  MotionValue,
-  useDomEvent,
-  useMotionValue,
-  usePresence,
-  useTransform,
-} from 'framer-motion'
+import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
 import { UseStyles } from '../../Styles'
@@ -335,7 +328,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
   const offsetPageY = useScrollOffset().y
   const scrollWithoffset = useTransform(
-    [scroll.y, positions.open.y, offsetY] as MotionValue<number | string>[],
+    [scroll.y, positions.open.y, offsetY],
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
   )
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.4",
+  "version": "3.21.8",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.6",
-    "@graphcommerce/framer-scroller": "^1.1.14",
+    "@graphcommerce/framer-next-pages": "^2.108.8",
+    "@graphcommerce/framer-scroller": "^1.1.18",
     "@graphcommerce/framer-utils": "^2.103.20",
-    "@graphcommerce/graphql": "^2.105.11",
-    "@graphcommerce/image": "^2.105.10",
+    "@graphcommerce/graphql": "^2.105.12",
+    "@graphcommerce/image": "^2.105.11",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "cac49a2bf6cdcbb6131dc7b64172e90aad257c6d"
+  "gitHead": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
 }