@graphcommerce/next-ui 3.20.4 → 3.20.8

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 (7) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/FramerScroller/components/SidebarGallery.tsx +3 -1
  3. package/Layout/components/LayoutHeaderContent.tsx +2 -2
  4. package/LayoutOverlay/components/LayoutOverlay.tsx +2 -2
  5. package/LayoutOverlay/components/LayoutOverlayBase.tsx +33 -32
  6. package/TextInputNumber/index.tsx +5 -2
  7. package/package.json +18 -18
package/CHANGELOG.md CHANGED
@@ -3,6 +3,42 @@
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.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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * could not scroll to the bottom of a left/right sheet ([b84c86e](https://github.com/ho-nl/m2-pwa/commit/b84c86efa090657fc4cd480547f576bf6d9e0709))
12
+ * 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))
13
+
14
+
15
+
16
+
17
+
18
+ ## [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)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * header style color ([ea373be](https://github.com/ho-nl/m2-pwa/commit/ea373be9dbf609e0a719b000d27ad79d2be45f65))
24
+ * make sure we're allowed to scroll all the way down ([16ee45d](https://github.com/ho-nl/m2-pwa/commit/16ee45d8bea8072388dc1508e48704be5a84c4ec))
25
+ * overlay didn't handle portals correctly and closed the overlay ([3cef4e7](https://github.com/ho-nl/m2-pwa/commit/3cef4e73042fd836fc776dad17abcc39d7403eee))
26
+
27
+
28
+
29
+
30
+
31
+ ## [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)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
37
+
38
+
39
+
40
+
41
+
6
42
  ## [3.20.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.3...@graphcommerce/next-ui@3.20.4) (2021-12-06)
7
43
 
8
44
 
package/FramerScroller/components/SidebarGallery.tsx CHANGED
@@ -159,7 +159,8 @@ const useStyles = makeStyles(
159
159
  top: `calc(50% - 28px)`,
160
160
  },
161
161
  dots: {
162
- background: alpha(theme.palette.background.paper, 0.7),
162
+ background: alpha(theme.palette.background.paper, 1),
163
+ boxShadow: theme.shadows[6],
163
164
  },
164
165
  }),
165
166
  { name: 'SidebarGallery' },
@@ -258,6 +259,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
258
259
  0: '100vw',
259
260
  [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
260
261
  }}
262
+ alt={image.alt || `Product Image ${idx}` || undefined}
261
263
  dontReportWronglySizedImages
262
264
  />
263
265
  </CenterSlide>
package/Layout/components/LayoutHeaderContent.tsx CHANGED
@@ -16,8 +16,8 @@ const useStyles = makeStyles(
16
16
  position: 'absolute',
17
17
  left: 0,
18
18
  width: '100%',
19
- backgroundColor: theme.palette.background.default,
20
- boxShadow: theme.shadows[2],
19
+ backgroundColor: theme.palette.background.paper,
20
+ boxShadow: theme.shadows[1],
21
21
  opacity: 0,
22
22
  transition: `opacity ${time}`,
23
23
 
package/LayoutOverlay/components/LayoutOverlay.tsx CHANGED
@@ -11,9 +11,9 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
11
11
  const { children, variantSm = 'bottom', variantMd = 'right', classes } = props
12
12
 
13
13
  const scrollSnapTypeSm: ScrollSnapType =
14
- variantSm === 'left' || variantSm === 'right' ? 'both mandatory' : 'block proximity'
14
+ variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
15
15
  const scrollSnapTypeMd: ScrollSnapType =
16
- variantMd === 'left' || variantMd === 'right' ? 'both mandatory' : 'block proximity'
16
+ variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
17
17
 
18
18
  return (
19
19
  <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
package/LayoutOverlay/components/LayoutOverlayBase.tsx CHANGED
@@ -28,48 +28,44 @@ const useStyles = makeStyles(
28
28
  },
29
29
  [theme.breakpoints.down('sm')]: {
30
30
  width: '100vw',
31
- borderRadius: theme.shape.borderRadius * 3,
32
31
  },
33
32
  [theme.breakpoints.up('md')]: {
34
33
  width: '100vw',
35
- borderRadius: theme.shape.borderRadius * 4,
36
34
  },
37
35
  },
38
36
  rootVariantSmLeft: {
39
37
  [theme.breakpoints.down('sm')]: {
40
- gridTemplate: `
41
- "overlay beforeOverlay"
42
- "afterOverlay afterOverlay"
43
- `,
38
+ gridTemplate: `"overlay beforeOverlay"`,
39
+ borderTopRightRadius: theme.shape.borderRadius * 3,
40
+ borderBottomRightRadius: theme.shape.borderRadius * 3,
44
41
  },
45
42
  },
46
43
  rootVariantMdLeft: {
47
44
  [theme.breakpoints.up('md')]: {
48
- gridTemplate: `
49
- "overlay beforeOverlay"
50
- "afterOverlay afterOverlay"
51
- `,
45
+ gridTemplate: `"overlay beforeOverlay"`,
46
+ borderTopRightRadius: theme.shape.borderRadius * 4,
47
+ borderBottomRightRadius: theme.shape.borderRadius * 4,
52
48
  },
53
49
  },
54
50
  rootVariantSmRight: {
55
51
  [theme.breakpoints.down('sm')]: {
56
- gridTemplate: `
57
- "beforeOverlay overlay"
58
- "afterOverlay afterOverlay"
59
- `,
52
+ gridTemplate: `"beforeOverlay overlay"`,
53
+ borderTopLeftRadius: theme.shape.borderRadius * 3,
54
+ borderBottomLeftRadius: theme.shape.borderRadius * 3,
60
55
  },
61
56
  },
62
57
  rootVariantMdRight: {
63
58
  [theme.breakpoints.up('md')]: {
64
- gridTemplate: `
65
- "beforeOverlay overlay"
66
- "afterOverlay afterOverlay"
67
- `,
59
+ gridTemplate: `"beforeOverlay overlay"`,
60
+ borderTopLeftRadius: theme.shape.borderRadius * 4,
61
+ borderBottomLeftRadius: theme.shape.borderRadius * 4,
68
62
  },
69
63
  },
70
64
  rootVariantSmBottom: {
71
65
  [theme.breakpoints.down('sm')]: {
72
- gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
66
+ borderTopLeftRadius: theme.shape.borderRadius * 3,
67
+ borderTopRightRadius: theme.shape.borderRadius * 3,
68
+ gridTemplate: `"beforeOverlay" "overlay"`,
73
69
  height: '100vh',
74
70
  '@supports (-webkit-touch-callout: none)': {
75
71
  height: '-webkit-fill-available',
@@ -77,15 +73,16 @@ const useStyles = makeStyles(
77
73
  },
78
74
  },
79
75
  rootVariantMdBottom: {
76
+ borderTopLeftRadius: theme.shape.borderRadius * 4,
77
+ borderTopRightRadius: theme.shape.borderRadius * 4,
80
78
  [theme.breakpoints.up('md')]: {
81
- gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
79
+ gridTemplate: `"beforeOverlay" "overlay"`,
82
80
  height: '100vh',
83
81
  },
84
82
  },
85
83
  beforeOverlay: {
86
84
  gridArea: 'beforeOverlay',
87
85
  scrollSnapAlign: 'start',
88
- scrollSnapStop: 'always',
89
86
  display: 'grid',
90
87
  alignContent: 'end',
91
88
  },
@@ -138,7 +135,6 @@ const useStyles = makeStyles(
138
135
  [theme.breakpoints.down('sm')]: {
139
136
  marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
140
137
  paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
141
- scrollSnapStop: 'always',
142
138
  display: 'grid',
143
139
  },
144
140
  },
@@ -146,8 +142,6 @@ const useStyles = makeStyles(
146
142
  [theme.breakpoints.up('md')]: {
147
143
  marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
148
144
  paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
149
- scrollSnapAlign: 'start',
150
- scrollSnapStop: 'always',
151
145
  display: 'grid',
152
146
  },
153
147
  },
@@ -156,17 +150,20 @@ const useStyles = makeStyles(
156
150
  backgroundColor: theme.palette.background.paper,
157
151
  boxShadow: theme.shadows[24],
158
152
  minWidth: 'min(800px, 90vw)',
153
+ scrollSnapAlign: 'end',
159
154
  },
160
155
  overlayPaneVariantSmBottom: {
161
156
  [theme.breakpoints.down('sm')]: {
162
157
  width: '100vw',
163
- borderRadius: theme.shape.borderRadius * 3,
158
+ borderTopLeftRadius: theme.shape.borderRadius * 3,
159
+ borderTopRightRadius: theme.shape.borderRadius * 3,
164
160
  },
165
161
  },
166
162
  overlayPaneVariantMdBottom: {
167
163
  [theme.breakpoints.up('md')]: {
168
164
  width: '100vw',
169
- borderRadius: theme.shape.borderRadius * 4,
165
+ borderTopLeftRadius: theme.shape.borderRadius * 3,
166
+ borderTopRightRadius: theme.shape.borderRadius * 3,
170
167
  },
171
168
  },
172
169
  overlayPaneVariantSmLeft: {
@@ -200,15 +197,12 @@ const useStyles = makeStyles(
200
197
  [theme.breakpoints.up('md')]: {
201
198
  paddingBottom: 1,
202
199
  minHeight: '100vh',
200
+ scrollSnapAlign: 'end',
203
201
  '@supports (-webkit-touch-callout: none)': {
204
202
  minHeight: '-webkit-fill-available',
205
203
  },
206
204
  },
207
205
  },
208
- afterOverlay: {
209
- gridArea: 'afterOverlay',
210
- scrollSnapAlign: 'start',
211
- },
212
206
  backdrop: {
213
207
  zIndex: -1,
214
208
  position: 'fixed',
@@ -343,19 +337,26 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
343
337
  ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
344
338
  )
345
339
 
340
+ const onClickAway = useCallback(
341
+ (event: React.MouseEvent<Document>) => {
342
+ if (event.target === document.body && event.type === 'click') return
343
+ closeOverlay()
344
+ },
345
+ [closeOverlay],
346
+ )
347
+
346
348
  return (
347
349
  <>
348
350
  <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
349
351
  <Scroller {...className('root')} grid={false} hideScrollbar>
350
352
  <div {...className('beforeOverlay')} />
351
353
  <div {...className('overlay')} ref={overlayRef}>
352
- <ClickAwayListener onClickAway={closeOverlay}>
354
+ <ClickAwayListener onClickAway={onClickAway}>
353
355
  <div {...className('overlayPane')}>
354
356
  <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
355
357
  </div>
356
358
  </ClickAwayListener>
357
359
  </div>
358
- <div {...className('afterOverlay')} />
359
360
  </Scroller>
360
361
  </>
361
362
  )
package/TextInputNumber/index.tsx CHANGED
@@ -114,12 +114,15 @@ export default function TextInputNumber(props: TextInputNumberProps) {
114
114
  inputRef={forkRef}
115
115
  className={clsx(textFieldProps.className, classes.quantity)}
116
116
  autoComplete='off'
117
+ label={' '}
118
+ id='quantity-input'
119
+ InputLabelProps={{ shrink: false }}
117
120
  InputProps={{
118
121
  ...textFieldProps.InputProps,
119
122
  startAdornment: (
120
123
  <IconButton
121
124
  aria-label='step down'
122
- size='small'
125
+ size='medium'
123
126
  edge='start'
124
127
  onPointerDown={() => setDirection('down')}
125
128
  onPointerUp={stop}
@@ -135,7 +138,7 @@ export default function TextInputNumber(props: TextInputNumberProps) {
135
138
  endAdornment: (
136
139
  <IconButton
137
140
  aria-label='step up'
138
- size='small'
141
+ size='medium'
139
142
  edge='end'
140
143
  onPointerDown={() => setDirection('up')}
141
144
  onPointerUp={() => setDirection(null)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graphcommerce/next-ui",
3
- "version": "3.20.4",
3
+ "version": "3.20.8",
4
4
  "author": "",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -9,37 +9,37 @@
9
9
  "start": "next start"
10
10
  },
11
11
  "dependencies": {
12
- "@apollo/client": "^3.4.16",
13
- "@graphcommerce/framer-next-pages": "^2.108.0",
14
- "@graphcommerce/framer-scroller": "^1.1.4",
15
- "@graphcommerce/framer-utils": "^2.103.16",
16
- "@graphcommerce/graphql": "^2.105.6",
17
- "@graphcommerce/image": "^2.105.5",
18
- "@lingui/macro": "^3.12.1",
12
+ "@apollo/client": "^3.5.6",
13
+ "@graphcommerce/framer-next-pages": "^2.108.3",
14
+ "@graphcommerce/framer-scroller": "^1.1.8",
15
+ "@graphcommerce/framer-utils": "^2.103.19",
16
+ "@graphcommerce/graphql": "^2.105.8",
17
+ "@graphcommerce/image": "^2.105.8",
18
+ "@lingui/macro": "^3.13.0",
19
19
  "@material-ui/core": "^4.12.3",
20
20
  "@material-ui/lab": "^4.0.0-alpha.60",
21
21
  "@material-ui/styles": "^4.11.4",
22
22
  "clsx": "^1.1.1",
23
- "framer-motion": "^4.1.17",
24
- "graphql": "^15.6.1",
25
- "next": "^12.0.3",
23
+ "framer-motion": "^5.5.1",
24
+ "graphql": "^16.1.0",
25
+ "next": "^12.0.7",
26
26
  "react": "^17.0.2",
27
27
  "react-dom": "^17.0.2",
28
- "react-focus-lock": "^2.5.2",
28
+ "react-focus-lock": "^2.7.1",
29
29
  "react-is": "^17.0.2",
30
30
  "react-schemaorg": "^2.0.0",
31
31
  "schema-dts": "^1.0.0",
32
- "type-fest": "^2.5.1"
32
+ "type-fest": "^2.8.0"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@graphcommerce/browserslist-config-pwa": "^3.0.2",
36
- "@graphcommerce/eslint-config-pwa": "^3.1.6",
36
+ "@graphcommerce/eslint-config-pwa": "^3.1.8",
37
37
  "@graphcommerce/prettier-config-pwa": "^3.0.4",
38
38
  "@graphcommerce/typescript-config-pwa": "^3.1.1",
39
- "@playwright/test": "^1.16.2",
39
+ "@playwright/test": "^1.17.1",
40
40
  "@types/react-is": "^17.0.3",
41
- "graphql-tag": "2.12.5",
42
- "typescript": "^4.4.4"
41
+ "graphql-tag": "2.12.6",
42
+ "typescript": "^4.5.4"
43
43
  },
44
44
  "sideEffects": false,
45
45
  "prettier": "@graphcommerce/prettier-config-pwa",
@@ -52,5 +52,5 @@
52
52
  "project": "./tsconfig.json"
53
53
  }
54
54
  },
55
- "gitHead": "b992ac3fbe719310988edb8ad811366431509bc2"
55
+ "gitHead": "a69bd94ffdcca6ca9487eec1cafe9ade3fcdffa3"
56
56
  }