@graphcommerce/next-ui 4.23.1 → 4.24.0

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 +11 -0
  2. package/Navigation/components/NavigationOverlay.tsx +42 -36
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.24.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1638](https://github.com/graphcommerce-org/graphcommerce/pull/1638) [`104103bc2`](https://github.com/graphcommerce-org/graphcommerce/commit/104103bc2a0fbaa510af2e26b6b00ddc63e8495b) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix navigation overlay visibility bug
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @graphcommerce/framer-scroller@2.1.36
13
+
3
14
  ## 4.23.1
4
15
 
5
16
  ### Patch Changes
package/Navigation/components/NavigationOverlay.tsx CHANGED
@@ -207,44 +207,50 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
207
207
 
208
208
  <MotionDiv layout='position' style={{ display: 'grid' }}>
209
209
  <Box
210
- sx={(theme) => ({
211
- display: 'grid',
212
- alignItems: !stretchColumns ? 'start' : undefined,
213
- '& .NavigationItem-item': {
214
- // eslint-disable-next-line no-nested-ternary
215
- width: itemWidthMd
216
- ? selectedLevel >= 1
217
- ? `calc(${itemWidthMd} + 1px)`
218
- : itemWidthMd
219
- : 'stretch',
220
- },
221
- [theme.breakpoints.down('md')]: {
222
- width:
223
- sizeSm !== 'floating'
224
- ? `calc(${itemWidthSm || '100vw'} + ${selectedLevel}px)`
225
- : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
226
- theme.page.horizontal
227
- })`,
228
- minWidth: 200,
229
- overflow: 'hidden',
230
- scrollSnapType: 'x mandatory',
210
+ sx={[
211
+ (theme) => ({
212
+ display: 'grid',
213
+ alignItems: !stretchColumns ? 'start' : undefined,
231
214
  '& .NavigationItem-item': {
232
- width:
233
- sizeSm !== 'floating'
234
- ? `calc(${itemWidthSm || '100vw'} - ${
235
- theme.spacings[itemPadding] ?? itemPadding
236
- } - ${theme.spacings[itemPadding] ?? itemPadding} + ${selectedLevel}px)`
237
- : `calc(${itemWidthSm || '100vw'} - ${
238
- theme.spacings[itemPadding] ?? itemPadding
239
- } - ${theme.spacings[itemPadding] ?? itemPadding} - ${
240
- theme.page.horizontal
241
- } - ${theme.page.horizontal})`,
242
- minWidth: `calc(${200}px - ${theme.spacings[itemPadding] ?? itemPadding} - ${
243
- theme.spacings[itemPadding] ?? itemPadding
244
- })`,
215
+ // eslint-disable-next-line no-nested-ternary
216
+ width: itemWidthMd
217
+ ? selectedLevel >= 1
218
+ ? `calc(${itemWidthMd} + 1px)`
219
+ : itemWidthMd
220
+ : 'stretch',
245
221
  },
246
- },
247
- })}
222
+ }),
223
+ activeAndNotClosing
224
+ ? (theme) => ({
225
+ [theme.breakpoints.down('md')]: {
226
+ width:
227
+ sizeSm !== 'floating'
228
+ ? `calc(${itemWidthSm || '100vw'} + ${selectedLevel}px)`
229
+ : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
230
+ theme.page.horizontal
231
+ })`,
232
+ minWidth: 200,
233
+ overflow: 'hidden',
234
+ scrollSnapType: 'x mandatory',
235
+ '& .NavigationItem-item': {
236
+ width:
237
+ sizeSm !== 'floating'
238
+ ? `calc(${itemWidthSm || '100vw'} - ${
239
+ theme.spacings[itemPadding] ?? itemPadding
240
+ } - ${theme.spacings[itemPadding] ?? itemPadding} + ${selectedLevel}px)`
241
+ : `calc(${itemWidthSm || '100vw'} - ${
242
+ theme.spacings[itemPadding] ?? itemPadding
243
+ } - ${theme.spacings[itemPadding] ?? itemPadding} - ${
244
+ theme.page.horizontal
245
+ } - ${theme.page.horizontal})`,
246
+ minWidth: `calc(${200}px - ${theme.spacings[itemPadding] ?? itemPadding} - ${
247
+ theme.spacings[itemPadding] ?? itemPadding
248
+ })`,
249
+ },
250
+ },
251
+ })
252
+ : {},
253
+ ]}
248
254
  >
249
255
  <Box
250
256
  className={classes.navigation}
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": "4.23.1",
5
+ "version": "4.24.0",
6
6
  "author": "",
7
7
  "license": "MIT",
8
8
  "sideEffects": false,
@@ -20,7 +20,7 @@
20
20
  "@emotion/server": "^11.4.0",
21
21
  "@emotion/styled": "^11.9.3",
22
22
  "@graphcommerce/framer-next-pages": "3.3.0",
23
- "@graphcommerce/framer-scroller": "2.1.35",
23
+ "@graphcommerce/framer-scroller": "2.1.36",
24
24
  "@graphcommerce/framer-utils": "3.2.0",
25
25
  "@graphcommerce/image": "3.1.9",
26
26
  "cookie": "^0.5.0",