@graphcommerce/next-ui 3.20.3 → 3.20.7

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 +35 -0
  2. package/FlagAvatar/index.tsx +1 -1
  3. package/FramerScroller/components/SidebarGallery.tsx +3 -1
  4. package/Layout/components/LayoutHeaderContent.tsx +2 -2
  5. package/LayoutOverlay/components/LayoutOverlayBase.tsx +24 -24
  6. package/TextInputNumber/index.tsx +5 -2
  7. package/package.json +18 -18
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.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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * header style color ([ea373be](https://github.com/ho-nl/m2-pwa/commit/ea373be9dbf609e0a719b000d27ad79d2be45f65))
12
+ * make sure we're allowed to scroll all the way down ([16ee45d](https://github.com/ho-nl/m2-pwa/commit/16ee45d8bea8072388dc1508e48704be5a84c4ec))
13
+ * overlay didn't handle portals correctly and closed the overlay ([3cef4e7](https://github.com/ho-nl/m2-pwa/commit/3cef4e73042fd836fc776dad17abcc39d7403eee))
14
+
15
+
16
+
17
+
18
+
19
+ ## [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)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
25
+
26
+
27
+
28
+
29
+
30
+ ## [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)
31
+
32
+
33
+ ### Bug Fixes
34
+
35
+ * use Locale to set storeSwitcher icons ([65ea397](https://github.com/ho-nl/m2-pwa/commit/65ea397ec53aa27f545b43feda8e35227e119ebe))
36
+
37
+
38
+
39
+
40
+
6
41
  ## [3.20.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.1...@graphcommerce/next-ui@3.20.2) (2021-12-03)
7
42
 
8
43
 
package/FlagAvatar/index.tsx CHANGED
@@ -20,7 +20,7 @@ export default function FlagAvatar(props: FlagAvatarProps) {
20
20
  classes={classes}
21
21
  imgProps={{ loading: 'lazy' }}
22
22
  alt={country}
23
- src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/${country}.svg`}
23
+ src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/${country}.svg`}
24
24
  >
25
25
  {country.toLocaleUpperCase()}
26
26
  </Avatar>
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/LayoutOverlayBase.tsx CHANGED
@@ -37,39 +37,35 @@ const useStyles = makeStyles(
37
37
  },
38
38
  rootVariantSmLeft: {
39
39
  [theme.breakpoints.down('sm')]: {
40
- gridTemplate: `
41
- "overlay beforeOverlay"
42
- "afterOverlay afterOverlay"
43
- `,
40
+ gridTemplate: `"overlay beforeOverlay"`,
41
+ borderTopLeftRadius: 0,
42
+ borderBottomLeftRadius: 0,
44
43
  },
45
44
  },
46
45
  rootVariantMdLeft: {
47
46
  [theme.breakpoints.up('md')]: {
48
- gridTemplate: `
49
- "overlay beforeOverlay"
50
- "afterOverlay afterOverlay"
51
- `,
47
+ gridTemplate: `"overlay beforeOverlay"`,
48
+ borderTopLeftRadius: 0,
49
+ borderBottomLeftRadius: 0,
52
50
  },
53
51
  },
54
52
  rootVariantSmRight: {
55
53
  [theme.breakpoints.down('sm')]: {
56
- gridTemplate: `
57
- "beforeOverlay overlay"
58
- "afterOverlay afterOverlay"
59
- `,
54
+ gridTemplate: `"beforeOverlay overlay"`,
55
+ borderTopRightRadius: 0,
56
+ borderBottomRightRadius: 0,
60
57
  },
61
58
  },
62
59
  rootVariantMdRight: {
63
60
  [theme.breakpoints.up('md')]: {
64
- gridTemplate: `
65
- "beforeOverlay overlay"
66
- "afterOverlay afterOverlay"
67
- `,
61
+ gridTemplate: `"beforeOverlay overlay"`,
62
+ borderTopRightRadius: 0,
63
+ borderBottomRightRadius: 0,
68
64
  },
69
65
  },
70
66
  rootVariantSmBottom: {
71
67
  [theme.breakpoints.down('sm')]: {
72
- gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
68
+ gridTemplate: `"beforeOverlay" "overlay"`,
73
69
  height: '100vh',
74
70
  '@supports (-webkit-touch-callout: none)': {
75
71
  height: '-webkit-fill-available',
@@ -78,7 +74,7 @@ const useStyles = makeStyles(
78
74
  },
79
75
  rootVariantMdBottom: {
80
76
  [theme.breakpoints.up('md')]: {
81
- gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
77
+ gridTemplate: `"beforeOverlay" "overlay"`,
82
78
  height: '100vh',
83
79
  },
84
80
  },
@@ -200,15 +196,12 @@ const useStyles = makeStyles(
200
196
  [theme.breakpoints.up('md')]: {
201
197
  paddingBottom: 1,
202
198
  minHeight: '100vh',
199
+ scrollSnapAlign: 'end',
203
200
  '@supports (-webkit-touch-callout: none)': {
204
201
  minHeight: '-webkit-fill-available',
205
202
  },
206
203
  },
207
204
  },
208
- afterOverlay: {
209
- gridArea: 'afterOverlay',
210
- scrollSnapAlign: 'start',
211
- },
212
205
  backdrop: {
213
206
  zIndex: -1,
214
207
  position: 'fixed',
@@ -343,19 +336,26 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
343
336
  ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
344
337
  )
345
338
 
339
+ const onClickAway = useCallback(
340
+ (event: React.MouseEvent<Document>) => {
341
+ if (event.target === document.body && event.type === 'click') return
342
+ closeOverlay()
343
+ },
344
+ [closeOverlay],
345
+ )
346
+
346
347
  return (
347
348
  <>
348
349
  <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
349
350
  <Scroller {...className('root')} grid={false} hideScrollbar>
350
351
  <div {...className('beforeOverlay')} />
351
352
  <div {...className('overlay')} ref={overlayRef}>
352
- <ClickAwayListener onClickAway={closeOverlay}>
353
+ <ClickAwayListener onClickAway={onClickAway}>
353
354
  <div {...className('overlayPane')}>
354
355
  <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
355
356
  </div>
356
357
  </ClickAwayListener>
357
358
  </div>
358
- <div {...className('afterOverlay')} />
359
359
  </Scroller>
360
360
  </>
361
361
  )
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.3",
3
+ "version": "3.20.7",
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.3",
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.2",
14
+ "@graphcommerce/framer-scroller": "^1.1.7",
15
+ "@graphcommerce/framer-utils": "^2.103.18",
16
+ "@graphcommerce/graphql": "^2.105.7",
17
+ "@graphcommerce/image": "^2.105.7",
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.4.5",
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.0",
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.7",
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.3"
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": "4f80cd92bed997b6c778be4381b86b239fb0fdb1"
55
+ "gitHead": "f8974380ace982793000e5b181b5bb314a1945fb"
56
56
  }