@graphcommerce/next-ui 3.21.9 → 3.21.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/AppShell/FixedFab.tsx +1 -3
  2. package/AppShell/index.ts +0 -1
  3. package/CHANGELOG.md +34 -0
  4. package/FramerScroller/components/SidebarGallery.tsx +17 -16
  5. package/LayoutOverlay/components/LayoutOverlayBase.tsx +6 -6
  6. package/Row/HeroBanner/index.tsx +1 -0
  7. package/package.json +3 -3
  8. package/AppShell/useFixedFabAnimation.ts +0 -15
package/AppShell/FixedFab.tsx CHANGED
@@ -19,9 +19,7 @@ const useStyles = makeStyles(
19
19
  },
20
20
  },
21
21
  }),
22
- {
23
- name: 'FixedFab',
24
- },
22
+ { name: 'FixedFab' },
25
23
  )
26
24
 
27
25
  type FixedFabProps = {
package/AppShell/index.ts CHANGED
@@ -14,4 +14,3 @@ export * from './MenuFabSecondaryItem'
14
14
  export * from './PlaceholderFab'
15
15
  export * from './GlobalHead'
16
16
  export * from './useFabAnimation'
17
- export * from './useFixedFabAnimation'
package/CHANGELOG.md CHANGED
@@ -3,6 +3,40 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.21.13](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.12...@graphcommerce/next-ui@3.21.13) (2021-12-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **framer-next-pages:** make sure we dont have a double scroll while a bottomsheet is opened ([2887aba](https://github.com/ho-nl/m2-pwa/commit/2887abae0c0c553bdc6343fd2f431e4daeabefb5))
12
+
13
+
14
+
15
+
16
+
17
+ ## [3.21.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.10...@graphcommerce/next-ui@3.21.11) (2021-12-22)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * cart fab wouldnt properly switch to darkmode ([2f4fe1e](https://github.com/ho-nl/m2-pwa/commit/2f4fe1ed28ab3b63440f40d1455f06bc02e44ce7))
23
+
24
+
25
+
26
+
27
+
28
+ ## [3.21.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.9...@graphcommerce/next-ui@3.21.10) (2021-12-22)
29
+
30
+
31
+ ### Bug Fixes
32
+
33
+ * **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
34
+ * safari hero banner didn't animate border radius ([7301bec](https://github.com/ho-nl/m2-pwa/commit/7301becf33a60f977546be1bcabc68e018f6c5cd))
35
+
36
+
37
+
38
+
39
+
6
40
  ## [3.21.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.8...@graphcommerce/next-ui@3.21.9) (2021-12-21)
7
41
 
8
42
 
package/FramerScroller/components/SidebarGallery.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import { usePageRouter } from '@graphcommerce/framer-next-pages'
2
2
  import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
3
3
  import {
4
- CenterSlide,
5
4
  MotionImageAspect,
6
5
  MotionImageAspectProps,
7
6
  Scroller,
@@ -29,6 +28,7 @@ type StyleProps = {
29
28
  const useStyles = makeStyles(
30
29
  (theme: Theme) => ({
31
30
  root: {
31
+ willChange: 'transform',
32
32
  display: 'grid',
33
33
  [theme.breakpoints.up('md')]: {
34
34
  gridTemplateColumns: '1fr auto',
@@ -57,6 +57,7 @@ const useStyles = makeStyles(
57
57
  const ratio = `calc(${height} / ${width} * 100%)`
58
58
 
59
59
  return {
60
+ willChange: 'transform',
60
61
  height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
61
62
  backgroundColor: theme.palette.background.image,
62
63
  position: 'relative',
@@ -71,6 +72,7 @@ const useStyles = makeStyles(
71
72
  paddingTop: clientHeight,
72
73
  }),
73
74
  scroller: {
75
+ willChange: 'transform',
74
76
  position: 'absolute',
75
77
  top: 0,
76
78
  width: '100%',
@@ -247,21 +249,20 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
247
249
  onMouseUp={onMouseUpScroller}
248
250
  >
249
251
  {images.map((image, idx) => (
250
- <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
251
- <MotionImageAspect
252
- layout
253
- src={image.src}
254
- width={image.width}
255
- height={image.height}
256
- loading={idx === 0 ? 'eager' : 'lazy'}
257
- sizes={{
258
- 0: '100vw',
259
- [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
260
- }}
261
- alt={image.alt || `Product Image ${idx}` || undefined}
262
- dontReportWronglySizedImages
263
- />
264
- </CenterSlide>
252
+ <MotionImageAspect
253
+ key={typeof image.src === 'string' ? image.src : idx}
254
+ layout
255
+ src={image.src}
256
+ width={image.width}
257
+ height={image.height}
258
+ loading={idx === 0 ? 'eager' : 'lazy'}
259
+ sizes={{
260
+ 0: '100vw',
261
+ [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
262
+ }}
263
+ alt={image.alt || `Product Image ${idx}` || undefined}
264
+ dontReportWronglySizedImages
265
+ />
265
266
  ))}
266
267
  </Scroller>
267
268
  <m.div layout className={classes.topRight}>
package/LayoutOverlay/components/LayoutOverlayBase.tsx CHANGED
@@ -11,6 +11,11 @@ import { useOverlayPosition } from '../hooks/useOverlayPosition'
11
11
 
12
12
  const useStyles = makeStyles(
13
13
  (theme: Theme) => ({
14
+ '@global': {
15
+ body: {
16
+ overflow: 'hidden',
17
+ },
18
+ },
14
19
  root: {
15
20
  display: 'grid',
16
21
  cursor: 'default',
@@ -138,12 +143,7 @@ const useStyles = makeStyles(
138
143
  minWidth: 'min(800px, 90vw)',
139
144
  scrollSnapAlign: 'end',
140
145
 
141
- // The top bar on Google Chrome is about 56 pixels high. If we do not provide this padding we'll run into the issue that the user can't scroll to the bottom.
142
- // We can't change this value with JS as that causes much jank
143
- [`@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) and (max-width:${theme.breakpoints.values.sm}px)`]:
144
- {
145
- paddingBottom: 56,
146
- },
146
+ paddingBottom: 56,
147
147
  },
148
148
  overlayPaneVariantSmBottom: {
149
149
  [theme.breakpoints.down('sm')]: {
package/Row/HeroBanner/index.tsx CHANGED
@@ -60,6 +60,7 @@ const useStyles = makeStyles(
60
60
  animated: {
61
61
  borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
62
62
  overflow: 'hidden',
63
+ transform: 'translateZ(0)',
63
64
  },
64
65
  }),
65
66
  { name: 'HeroBanner' },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graphcommerce/next-ui",
3
- "version": "3.21.9",
3
+ "version": "3.21.13",
4
4
  "author": "",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -11,7 +11,7 @@
11
11
  "dependencies": {
12
12
  "@apollo/client": "^3.5.6",
13
13
  "@graphcommerce/framer-next-pages": "^2.108.9",
14
- "@graphcommerce/framer-scroller": "^1.1.19",
14
+ "@graphcommerce/framer-scroller": "^1.1.23",
15
15
  "@graphcommerce/framer-utils": "^2.103.20",
16
16
  "@graphcommerce/graphql": "^2.105.12",
17
17
  "@graphcommerce/image": "^2.105.11",
@@ -52,5 +52,5 @@
52
52
  "project": "./tsconfig.json"
53
53
  }
54
54
  },
55
- "gitHead": "fbca834579f81b45ee062e85146535eb6d7ab079"
55
+ "gitHead": "2c255f0b276983c31b7c727743f93c1ae558b4c5"
56
56
  }
package/AppShell/useFixedFabAnimation.ts DELETED
@@ -1,15 +0,0 @@
1
- import { alpha, useTheme } from '@material-ui/core'
2
- import { useTransform } from 'framer-motion'
3
- import { useScrollY } from '../Layout/hooks/useScrollY'
4
-
5
- export function useFixedFabAnimation() {
6
- const theme = useTheme()
7
- const scrollY = useScrollY()
8
- const opacity = useTransform(scrollY, [50, 60], [0, 1])
9
- const backgroundColor = useTransform(
10
- scrollY,
11
- [0, 10],
12
- [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
13
- )
14
- return { backgroundColor, opacity }
15
- }