@graphcommerce/next-ui 7.1.0-canary.12 → 7.1.0-canary.14

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 (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/FramerScroller/SidebarGallery.tsx +171 -156
  3. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Change Log
2
2
 
3
+ ## 7.1.0-canary.14
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2045](https://github.com/graphcommerce-org/graphcommerce/pull/2045) [`1ac1e0989`](https://github.com/graphcommerce-org/graphcommerce/commit/1ac1e09897daadd646200cb3ddc2aa75a51e182e) - Make sure the product image gallery traps focus and scrollbar doesn't disappear suddenly ([@JoshuaS98](https://github.com/JoshuaS98))
8
+
9
+ ## 7.1.0-canary.13
10
+
3
11
  ## 7.1.0-canary.12
4
12
 
5
13
  ## 7.1.0-canary.11
package/FramerScroller/SidebarGallery.tsx CHANGED
@@ -7,9 +7,18 @@ import {
7
7
  ScrollerButtonProps,
8
8
  ScrollerDots,
9
9
  ScrollerProvider,
10
+ unstable_usePreventScroll as usePreventScroll,
10
11
  } from '@graphcommerce/framer-scroller'
11
12
  import { dvh } from '@graphcommerce/framer-utils'
12
- import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
13
+ import {
14
+ Fab,
15
+ useTheme,
16
+ Box,
17
+ styled,
18
+ SxProps,
19
+ Theme,
20
+ Unstable_TrapFocus as TrapFocus,
21
+ } from '@mui/material'
13
22
  import { m, useDomEvent, useMotionValue } from 'framer-motion'
14
23
  import { useRouter } from 'next/router'
15
24
  import React, { useEffect, useRef } from 'react'
@@ -70,6 +79,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
70
79
  const route = `#${routeHash}`
71
80
  // We're using the URL to manage the state of the gallery.
72
81
  const zoomed = router.asPath.endsWith(route)
82
+ usePreventScroll(zoomed)
73
83
 
74
84
  // cleanup if someone enters the page with #gallery
75
85
  useEffect(() => {
@@ -86,7 +96,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
86
96
  if (!zoomed) {
87
97
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
88
98
  router.push(route, undefined, { shallow: true })
89
- document.body.style.overflow = 'hidden'
90
99
  window.scrollTo({ top: 0, behavior: 'smooth' })
91
100
  } else {
92
101
  router.back()
@@ -132,8 +141,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
132
141
  {
133
142
  willChange: 'transform',
134
143
  display: 'grid',
144
+ gridTemplate: '"left" "right"',
135
145
  [theme.breakpoints.up('md')]: {
136
- gridTemplateColumns: '1fr auto',
146
+ // gridTemplateColumns: '1fr auto',
147
+ gridTemplate: '"left right" / 1fr auto',
137
148
  },
138
149
  background:
139
150
  theme.palette.mode === 'light'
@@ -152,178 +163,182 @@ export function SidebarGallery(props: SidebarGalleryProps) {
152
163
  },
153
164
  ]}
154
165
  >
155
- <MotionBox
156
- layout
157
- layoutDependency={zoomed}
158
- className={classes.scrollerContainer}
159
- sx={[
160
- {
161
- willChange: 'transform',
162
- height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
163
- backgroundColor: theme.palette.background.image,
164
- position: 'relative',
165
- paddingTop: `min(${ratio}, ${maxHeight})`,
166
- [theme.breakpoints.down('md')]: {
167
- width: '100vw',
168
- },
169
- [theme.breakpoints.up('md')]: {
170
- height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
171
- theme.spacings.lg
172
- })`,
173
- position: 'sticky',
174
- top: theme.appShell.headerHeightMd,
175
- },
176
- },
177
- zoomed && {
178
- position: 'relative',
179
- top: 0,
180
- marginTop: 0,
181
- paddingTop: dvh(100),
182
- },
183
- ]}
184
- onLayoutAnimationComplete={() => {
185
- if (!zoomed) document.body.style.overflow = ''
186
- }}
187
- >
188
- <Scroller
189
- className={classes.scroller}
190
- hideScrollbar
191
- onMouseDown={onMouseDownScroller}
192
- onMouseUp={onMouseUpScroller}
166
+ <TrapFocus open={zoomed}>
167
+ <MotionBox
168
+ layout
169
+ layoutDependency={zoomed}
170
+ className={classes.scrollerContainer}
193
171
  sx={[
194
172
  {
173
+ gridArea: 'left',
195
174
  willChange: 'transform',
196
- position: 'absolute',
197
- top: 0,
198
- width: '100%',
199
- height: '100%',
200
- gridAutoColumns: `100%`,
201
- gridTemplateRows: `100%`,
202
- cursor: disableZoom ? 'auto' : 'zoom-in',
175
+ height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
176
+ backgroundColor: theme.palette.background.image,
177
+ position: 'relative',
178
+ paddingTop: `min(${ratio}, ${maxHeight})`,
179
+ [theme.breakpoints.down('md')]: {
180
+ width: '100vw',
181
+ },
182
+ [theme.breakpoints.up('md')]: {
183
+ height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
184
+ theme.spacings.lg
185
+ })`,
186
+ position: 'sticky',
187
+ top: theme.appShell.headerHeightMd,
188
+ },
203
189
  },
204
190
  zoomed && {
205
- height: `var(--client-size-y)`,
206
- cursor: 'inherit',
191
+ position: 'relative',
192
+ top: 0,
193
+ marginTop: 0,
194
+ paddingTop: dvh(100),
207
195
  },
208
196
  ]}
197
+ onLayoutAnimationComplete={() => {
198
+ if (!zoomed) document.body.style.overflow = ''
199
+ }}
209
200
  >
210
- {images.map((image, idx) => (
211
- <MotionImageAspect
212
- key={typeof image.src === 'string' ? image.src : idx}
201
+ <Scroller
202
+ className={classes.scroller}
203
+ hideScrollbar
204
+ onMouseDown={onMouseDownScroller}
205
+ onMouseUp={onMouseUpScroller}
206
+ sx={[
207
+ {
208
+ willChange: 'transform',
209
+ position: 'absolute',
210
+ top: 0,
211
+ width: '100%',
212
+ height: '100%',
213
+ gridAutoColumns: `100%`,
214
+ gridTemplateRows: `100%`,
215
+ cursor: disableZoom ? 'auto' : 'zoom-in',
216
+ },
217
+ zoomed && {
218
+ height: `var(--client-size-y)`,
219
+ cursor: 'inherit',
220
+ },
221
+ ]}
222
+ >
223
+ {images.map((image, idx) => (
224
+ <MotionImageAspect
225
+ key={typeof image.src === 'string' ? image.src : idx}
226
+ layout
227
+ layoutDependency={zoomed}
228
+ src={image.src}
229
+ width={image.width}
230
+ height={image.height}
231
+ loading={idx === 0 ? 'eager' : 'lazy'}
232
+ sx={{ display: 'block', objectFit: 'contain' }}
233
+ sizes={{
234
+ 0: '100vw',
235
+ [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
236
+ }}
237
+ alt={image.alt || `Product Image ${idx}` || undefined}
238
+ dontReportWronglySizedImages
239
+ />
240
+ ))}
241
+ </Scroller>
242
+ <MotionBox
243
+ layout='position'
244
+ layoutDependency={zoomed}
245
+ className={classes.topRight}
246
+ sx={{
247
+ display: 'grid',
248
+ gridAutoFlow: 'column',
249
+ top: theme.spacings.sm,
250
+ gap: theme.spacings.xxs,
251
+ position: 'absolute',
252
+ right: theme.spacings.sm,
253
+ }}
254
+ >
255
+ {!disableZoom && (
256
+ <Fab
257
+ size='small'
258
+ className={classes.toggleIcon}
259
+ disabled={!hasImages}
260
+ onMouseUp={toggle}
261
+ aria-label='Toggle Fullscreen'
262
+ sx={{ boxShadow: 6 }}
263
+ >
264
+ {!zoomed ? (
265
+ <IconSvg src={iconFullscreen} />
266
+ ) : (
267
+ <IconSvg src={iconFullscreenExit} />
268
+ )}
269
+ </Fab>
270
+ )}
271
+ </MotionBox>
272
+ <Box
273
+ className={classes.centerLeft}
274
+ sx={{
275
+ display: 'grid',
276
+ gridAutoFlow: 'row',
277
+ gap: theme.spacings.xxs,
278
+ position: 'absolute',
279
+ left: theme.spacings.sm,
280
+ top: `calc(50% - 28px)`,
281
+ }}
282
+ >
283
+ <ScrollerButton
213
284
  layout
214
285
  layoutDependency={zoomed}
215
- src={image.src}
216
- width={image.width}
217
- height={image.height}
218
- loading={idx === 0 ? 'eager' : 'lazy'}
219
- sx={{ display: 'block', objectFit: 'contain' }}
220
- sizes={{
221
- 0: '100vw',
222
- [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
223
- }}
224
- alt={image.alt || `Product Image ${idx}` || undefined}
225
- dontReportWronglySizedImages
226
- />
227
- ))}
228
- </Scroller>
229
- <MotionBox
230
- layout='position'
231
- layoutDependency={zoomed}
232
- className={classes.topRight}
233
- sx={{
234
- display: 'grid',
235
- gridAutoFlow: 'column',
236
- top: theme.spacings.sm,
237
- gap: theme.spacings.xxs,
238
- position: 'absolute',
239
- right: theme.spacings.sm,
240
- }}
241
- >
242
- {!disableZoom && (
243
- <Fab
286
+ direction='left'
287
+ showButtons={showButtons}
244
288
  size='small'
245
- className={classes.toggleIcon}
246
- disabled={!hasImages}
247
- onMouseUp={toggle}
248
- aria-label='Toggle Fullscreen'
249
- sx={{ boxShadow: 6 }}
289
+ className={classes.sliderButtons}
250
290
  >
251
- {!zoomed ? (
252
- <IconSvg src={iconFullscreen} />
253
- ) : (
254
- <IconSvg src={iconFullscreenExit} />
255
- )}
256
- </Fab>
257
- )}
258
- </MotionBox>
259
- <Box
260
- className={classes.centerLeft}
261
- sx={{
262
- display: 'grid',
263
- gridAutoFlow: 'row',
264
- gap: theme.spacings.xxs,
265
- position: 'absolute',
266
- left: theme.spacings.sm,
267
- top: `calc(50% - 28px)`,
268
- }}
269
- >
270
- <ScrollerButton
271
- layout
272
- layoutDependency={zoomed}
273
- direction='left'
274
- showButtons={showButtons}
275
- size='small'
276
- className={classes.sliderButtons}
277
- >
278
- <IconSvg src={iconChevronLeft} />
279
- </ScrollerButton>
280
- </Box>
281
- <Box
282
- className={classes.centerRight}
283
- sx={{
284
- display: 'grid',
285
- gap: theme.spacings.xxs,
286
- position: 'absolute',
287
- right: theme.spacings.sm,
288
- top: `calc(50% - 28px)`,
289
- }}
290
- >
291
- <ScrollerButton
292
- layout
293
- layoutDependency={zoomed}
294
- direction='right'
295
- showButtons={showButtons}
296
- size='small'
297
- className={classes.sliderButtons}
291
+ <IconSvg src={iconChevronLeft} />
292
+ </ScrollerButton>
293
+ </Box>
294
+ <Box
295
+ className={classes.centerRight}
296
+ sx={{
297
+ display: 'grid',
298
+ gap: theme.spacings.xxs,
299
+ position: 'absolute',
300
+ right: theme.spacings.sm,
301
+ top: `calc(50% - 28px)`,
302
+ }}
298
303
  >
299
- <IconSvg src={iconChevronRight} />
300
- </ScrollerButton>
301
- </Box>
304
+ <ScrollerButton
305
+ layout
306
+ layoutDependency={zoomed}
307
+ direction='right'
308
+ showButtons={showButtons}
309
+ size='small'
310
+ className={classes.sliderButtons}
311
+ >
312
+ <IconSvg src={iconChevronRight} />
313
+ </ScrollerButton>
314
+ </Box>
302
315
 
303
- <Box
304
- className={classes.bottomCenter}
305
- sx={{
306
- display: 'flex',
307
- px: theme.page.horizontal,
308
- gap: theme.spacings.xxs,
309
- position: 'absolute',
310
- bottom: theme.spacings.xxs,
311
- justifyContent: 'center',
312
- width: '100%',
313
- pointerEvents: 'none',
314
- '& > *': {
315
- pointerEvents: 'all',
316
- },
317
- }}
318
- >
319
- <ScrollerDots layout='position' layoutDependency={zoomed} />
320
- </Box>
321
- </MotionBox>
316
+ <Box
317
+ className={classes.bottomCenter}
318
+ sx={{
319
+ display: 'flex',
320
+ px: theme.page.horizontal,
321
+ gap: theme.spacings.xxs,
322
+ position: 'absolute',
323
+ bottom: theme.spacings.xxs,
324
+ justifyContent: 'center',
325
+ width: '100%',
326
+ pointerEvents: 'none',
327
+ '& > *': {
328
+ pointerEvents: 'all',
329
+ },
330
+ }}
331
+ >
332
+ <ScrollerDots layout='position' layoutDependency={zoomed} />
333
+ </Box>
334
+ </MotionBox>
335
+ </TrapFocus>
322
336
 
323
337
  <Box
324
338
  className={classes.sidebarWrapper}
325
339
  sx={[
326
340
  {
341
+ gridArea: 'right',
327
342
  boxSizing: 'content-box',
328
343
  display: 'grid',
329
344
  justifyItems: 'start',
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/next-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "7.1.0-canary.12",
5
+ "version": "7.1.0-canary.14",
6
6
  "author": "",
7
7
  "license": "MIT",
8
8
  "sideEffects": false,
@@ -18,18 +18,18 @@
18
18
  "@emotion/react": "^11.11.1",
19
19
  "@emotion/server": "^11.11.0",
20
20
  "@emotion/styled": "^11.11.0",
21
- "@graphcommerce/framer-next-pages": "7.1.0-canary.12",
22
- "@graphcommerce/framer-scroller": "7.1.0-canary.12",
23
- "@graphcommerce/framer-utils": "7.1.0-canary.12",
24
- "@graphcommerce/image": "7.1.0-canary.12",
21
+ "@graphcommerce/framer-next-pages": "7.1.0-canary.14",
22
+ "@graphcommerce/framer-scroller": "7.1.0-canary.14",
23
+ "@graphcommerce/framer-utils": "7.1.0-canary.14",
24
+ "@graphcommerce/image": "7.1.0-canary.14",
25
25
  "cookie": "^0.5.0",
26
26
  "react-is": "^18.2.0",
27
27
  "schema-dts": "^1.1.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@graphcommerce/eslint-config-pwa": "7.1.0-canary.12",
31
- "@graphcommerce/prettier-config-pwa": "7.1.0-canary.12",
32
- "@graphcommerce/typescript-config-pwa": "7.1.0-canary.12",
30
+ "@graphcommerce/eslint-config-pwa": "7.1.0-canary.14",
31
+ "@graphcommerce/prettier-config-pwa": "7.1.0-canary.14",
32
+ "@graphcommerce/typescript-config-pwa": "7.1.0-canary.14",
33
33
  "@types/cookie": "^0.5.2",
34
34
  "@types/react-is": "^18.2.1",
35
35
  "typescript": "5.2.2"