@graphcommerce/next-ui 6.0.2-canary.0 → 6.0.2-canary.2

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 (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/Layout/components/LayoutHeaderClose.tsx +1 -0
  3. package/Navigation/components/NavigationOverlay.tsx +0 -2
  4. package/Overlay/components/OverlayBase.tsx +8 -13
  5. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Change Log
2
2
 
3
+ ## 6.0.2-canary.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1867](https://github.com/graphcommerce-org/graphcommerce/pull/1867) [`8e4bf4ca7`](https://github.com/graphcommerce-org/graphcommerce/commit/8e4bf4ca7d0c32525df50df4a350ab19a2fbf620) - Fix incorrect box-shadow on bottom overlays ([@bramvanderholst](https://github.com/bramvanderholst))
8
+
9
+ - [#1867](https://github.com/graphcommerce-org/graphcommerce/pull/1867) [`5cf7c8c9e`](https://github.com/graphcommerce-org/graphcommerce/commit/5cf7c8c9ee95d28be0a7f476ea3f06f482c4fd5d) - Fix MdBottom class affecting Sm overlay ([@bramvanderholst](https://github.com/bramvanderholst))
10
+
11
+ - [#1867](https://github.com/graphcommerce-org/graphcommerce/pull/1867) [`9b7e4414c`](https://github.com/graphcommerce-org/graphcommerce/commit/9b7e4414c537e775c1f2d5de65ffde6fc39b7f3b) - Disallow overscrolling on overlays on mobile ([@bramvanderholst](https://github.com/bramvanderholst))
12
+
13
+ - [#1867](https://github.com/graphcommerce-org/graphcommerce/pull/1867) [`197b71711`](https://github.com/graphcommerce-org/graphcommerce/commit/197b717119da2a1876d36931c0063ad6d32a675c) - Overlay fixess ([@bramvanderholst](https://github.com/bramvanderholst))
14
+
15
+ ## 6.0.2-canary.1
16
+
3
17
  ## 6.0.2-canary.0
4
18
 
5
19
  ## 6.0.1
package/Layout/components/LayoutHeaderClose.tsx CHANGED
@@ -30,6 +30,7 @@ export function LayoutHeaderClose() {
30
30
  boxShadow: 'none',
31
31
  marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
32
32
  marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
33
+ background: 'none',
33
34
  }}
34
35
  size='responsive'
35
36
  disabled={disabled}
package/Navigation/components/NavigationOverlay.tsx CHANGED
@@ -122,8 +122,6 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
122
122
  zIndex: 'drawer',
123
123
  '& .LayoutOverlayBase-overlayPane': {
124
124
  minWidth: itemWidthMd,
125
- display: 'grid',
126
- gridTemplateRows: 'auto 1fr',
127
125
  },
128
126
  }}
129
127
  >
package/Overlay/components/OverlayBase.tsx CHANGED
@@ -379,6 +379,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
379
379
  height: dvh(100),
380
380
 
381
381
  [theme.breakpoints.down('md')]: {
382
+ '&.variantSmLeft, &.variantSmRight': {
383
+ overscrollBehaviorX: 'none',
384
+ },
382
385
  '&.variantSmLeft': {
383
386
  gridTemplate: `"overlay beforeOverlay"`,
384
387
  borderTopRightRadius: theme.shape.borderRadius * 3,
@@ -390,6 +393,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
390
393
  borderBottomLeftRadius: theme.shape.borderRadius * 3,
391
394
  },
392
395
  '&.variantSmBottom': {
396
+ overscrollBehaviorY: 'none',
393
397
  gridTemplate: `"beforeOverlay" "overlay"`,
394
398
  height: `calc(${dvh(100)} - 1px)`,
395
399
 
@@ -501,11 +505,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
501
505
  },
502
506
 
503
507
  '&.variantSmBottom': {
504
- scrollbarWidth: 'none',
505
- '&::-webkit-scrollbar': {
506
- display: 'none',
507
- },
508
-
509
508
  maxHeight: `calc(${dvh(100)} - ${smSpacingTop})`,
510
509
  paddingTop: smSpacingTop,
511
510
  boxSizing: 'border-box',
@@ -527,6 +526,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
527
526
  borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
528
527
  },
529
528
  '&.variantSmLeft, &.variantSmRight': {
529
+ overscrollBehaviorY: 'none',
530
530
  width: widthSm || 'max-content',
531
531
  boxShadow: theme.shadows[24],
532
532
  maxHeight: dvh(100),
@@ -544,6 +544,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
544
544
  [theme.breakpoints.up('md')]: {
545
545
  minWidth: '1px',
546
546
  overflowY: 'auto',
547
+ overflowX: 'hidden',
547
548
  overscrollBehavior: 'contain',
548
549
  '&.variantMdBottom.sizeMdFloating:not(.justifyMdStretch)': {
549
550
  width: widthMd,
@@ -553,15 +554,10 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
553
554
  maxHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
554
555
  paddingTop: mdSpacingTop,
555
556
  boxSizing: 'border-box',
556
- boxShadow: theme.shadows[24],
557
-
558
- scrollbarWidth: 'none',
559
- '&::-webkit-scrollbar': {
560
- display: 'none',
561
- },
562
557
  '&.sizeMdFloating': {
563
558
  paddingTop: 0,
564
559
  maxHeight: `calc(${dvh(100)} - (${theme.page.vertical} * 2))`,
560
+ boxShadow: theme.shadows[24],
565
561
  },
566
562
  '&.sizeMdMinimal': {
567
563
  maxHeight: dvh(100),
@@ -597,7 +593,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
597
593
  className={classes.background}
598
594
  sx={(theme) => ({
599
595
  backgroundColor: theme.palette.background.paper,
600
- boxShadow: theme.shadows[24],
601
596
  paddingBottom: '0.1px',
602
597
  [theme.breakpoints.down('md')]: {
603
598
  minHeight: '100%',
@@ -607,7 +602,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
607
602
  },
608
603
  '&.sizeSmFull': {
609
604
  minHeight: dvh(100),
610
- '&.variantMdBottom': {
605
+ '&.variantSmBottom': {
611
606
  minHeight: '100%',
612
607
  },
613
608
  },
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": "6.0.2-canary.0",
5
+ "version": "6.0.2-canary.2",
6
6
  "author": "",
7
7
  "license": "MIT",
8
8
  "sideEffects": false,
@@ -18,18 +18,18 @@
18
18
  "@emotion/react": "^11.10.6",
19
19
  "@emotion/server": "^11.4.0",
20
20
  "@emotion/styled": "^11.10.6",
21
- "@graphcommerce/framer-next-pages": "6.0.2-canary.0",
22
- "@graphcommerce/framer-scroller": "6.0.2-canary.0",
23
- "@graphcommerce/framer-utils": "6.0.2-canary.0",
24
- "@graphcommerce/image": "6.0.2-canary.0",
21
+ "@graphcommerce/framer-next-pages": "6.0.2-canary.2",
22
+ "@graphcommerce/framer-scroller": "6.0.2-canary.2",
23
+ "@graphcommerce/framer-utils": "6.0.2-canary.2",
24
+ "@graphcommerce/image": "6.0.2-canary.2",
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": "6.0.2-canary.0",
31
- "@graphcommerce/prettier-config-pwa": "6.0.2-canary.0",
32
- "@graphcommerce/typescript-config-pwa": "6.0.2-canary.0",
30
+ "@graphcommerce/eslint-config-pwa": "6.0.2-canary.2",
31
+ "@graphcommerce/prettier-config-pwa": "6.0.2-canary.2",
32
+ "@graphcommerce/typescript-config-pwa": "6.0.2-canary.2",
33
33
  "@types/cookie": "^0.5.1",
34
34
  "@types/react-is": "^17.0.3",
35
35
  "typescript": "4.9.5"