@graphcommerce/next-ui 3.21.8 → 3.21.12

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 (9) hide show
  1. package/AnimatedRow/index.tsx +1 -1
  2. package/AppShell/FixedFab.tsx +1 -3
  3. package/AppShell/index.ts +0 -1
  4. package/CHANGELOG.md +35 -0
  5. package/FramerScroller/components/SidebarGallery.tsx +17 -16
  6. package/LayoutOverlay/components/LayoutOverlayBase.tsx +7 -9
  7. package/Row/HeroBanner/index.tsx +1 -0
  8. package/package.json +4 -4
  9. package/AppShell/useFixedFabAnimation.ts +0 -15
package/AnimatedRow/index.tsx CHANGED
@@ -10,7 +10,7 @@ export default function AnimatedRow(props: AnimatedRowProps) {
10
10
  return (
11
11
  <m.div
12
12
  {...props}
13
- layout='size'
13
+ layout
14
14
  initial={{ opacity: 0, height: 0 }}
15
15
  animate={{ opacity: 1, height: 'auto' }}
16
16
  exit={{ opacity: 0, height: 0 }}
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,41 @@
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.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.10...@graphcommerce/next-ui@3.21.11) (2021-12-22)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * cart fab wouldnt properly switch to darkmode ([2f4fe1e](https://github.com/ho-nl/m2-pwa/commit/2f4fe1ed28ab3b63440f40d1455f06bc02e44ce7))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
23
+ * safari hero banner didn't animate border radius ([7301bec](https://github.com/ho-nl/m2-pwa/commit/7301becf33a60f977546be1bcabc68e018f6c5cd))
24
+
25
+
26
+
27
+
28
+
29
+ ## [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)
30
+
31
+
32
+ ### Bug Fixes
33
+
34
+ * layout overlay sometimes have a horizontal scrollbar ([a1cfe72](https://github.com/ho-nl/m2-pwa/commit/a1cfe72d207dcdf07948080b605b64e7f73939bf))
35
+ * make sure the bottomsheet has enough space on android ([02d3e63](https://github.com/ho-nl/m2-pwa/commit/02d3e639388446423149461ae52d0ed12a962f5e))
36
+
37
+
38
+
39
+
40
+
6
41
  ## [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)
7
42
 
8
43
 
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
@@ -19,12 +19,6 @@ const useStyles = makeStyles(
19
19
  '@supports (-webkit-touch-callout: none)': {
20
20
  height: '-webkit-fill-available',
21
21
  },
22
- [theme.breakpoints.down('sm')]: {
23
- width: '100vw',
24
- },
25
- [theme.breakpoints.up('md')]: {
26
- width: '100vw',
27
- },
28
22
  },
29
23
  rootVariantSmLeft: {
30
24
  [theme.breakpoints.down('sm')]: {
@@ -118,7 +112,6 @@ const useStyles = makeStyles(
118
112
  pointerEvents: 'none',
119
113
  gridArea: 'overlay',
120
114
  scrollSnapAlign: 'start',
121
- width: 'min-content',
122
115
  minHeight: '100vh',
123
116
  '@supports (-webkit-touch-callout: none)': {
124
117
  minHeight: '-webkit-fill-available',
@@ -144,17 +137,22 @@ const useStyles = makeStyles(
144
137
  boxShadow: theme.shadows[24],
145
138
  minWidth: 'min(800px, 90vw)',
146
139
  scrollSnapAlign: 'end',
140
+
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
+ },
147
147
  },
148
148
  overlayPaneVariantSmBottom: {
149
149
  [theme.breakpoints.down('sm')]: {
150
- width: '100vw',
151
150
  borderTopLeftRadius: theme.shape.borderRadius * 3,
152
151
  borderTopRightRadius: theme.shape.borderRadius * 3,
153
152
  },
154
153
  },
155
154
  overlayPaneVariantMdBottom: {
156
155
  [theme.breakpoints.up('md')]: {
157
- width: '100vw',
158
156
  borderTopLeftRadius: theme.shape.borderRadius * 3,
159
157
  borderTopRightRadius: theme.shape.borderRadius * 3,
160
158
  },
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.8",
3
+ "version": "3.21.12",
4
4
  "author": "",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -10,8 +10,8 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "@apollo/client": "^3.5.6",
13
- "@graphcommerce/framer-next-pages": "^2.108.8",
14
- "@graphcommerce/framer-scroller": "^1.1.18",
13
+ "@graphcommerce/framer-next-pages": "^2.108.9",
14
+ "@graphcommerce/framer-scroller": "^1.1.22",
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": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
55
+ "gitHead": "55abd5ec0f5821dc4bba8d0a82fd265ff1d6a024"
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
- }