@graphcommerce/next-ui 5.1.0-canary.8 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Change Log
 
+## 5.1.0
+
+### Patch Changes
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`0025ad80f`](https://github.com/graphcommerce-org/graphcommerce/commit/0025ad80fb82d5d1e6c786bb8b5f39b2456c0932) - Renamed clientSizeCssVar.y/x to dvh(100) and dvw(100) ([@paales](https://github.com/paales))
+
+- [#1760](https://github.com/graphcommerce-org/graphcommerce/pull/1760) [`06a81e661`](https://github.com/graphcommerce-org/graphcommerce/commit/06a81e66144b4d94a1e318c2e26cac8d13aa0eb7) - When you navigate back to an overlay (cart, etc.), it can no longer be closed by dragging or clicking on the backdrop. ([@paales](https://github.com/paales))
+
+- [#1750](https://github.com/graphcommerce-org/graphcommerce/pull/1750) [`3479bc1e2`](https://github.com/graphcommerce-org/graphcommerce/commit/3479bc1e24da0e8a751ee301c59fa5f9755c8559) - Show globe icon instead of shopping bag icon for store/language-switcher ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`3fcb03b79`](https://github.com/graphcommerce-org/graphcommerce/commit/3fcb03b79ce634650fd982dc36a112dccd37282f) - New props added to LayoutOverlay and Overlay components: `widthSm` and `widthMd` to control the width of the overlay.
+
+  Defaults to `widthSm = 'max(300px, 80vw)', widthMd = 'max(800px, 50vw)'` ([@paales](https://github.com/paales))
+
+- [#1745](https://github.com/graphcommerce-org/graphcommerce/pull/1745) [`b1444b933`](https://github.com/graphcommerce-org/graphcommerce/commit/b1444b9336107d3ac111563f9b62a884f1b26a8d) - Bring password reset page more in line with standard forms, add missing translations. ([@github-actions](https://github.com/apps/github-actions))
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
+
+  - Updated the @mui/material package
+  - Removed dependencies on react-hook-form-mui and @playwright/test
+  - Upgraded dependencies including type-fest and graphql-mesh
+  - Solved peer dependency issues ([@paales](https://github.com/paales))
+
+- [#1760](https://github.com/graphcommerce-org/graphcommerce/pull/1760) [`f1ebaa2ae`](https://github.com/graphcommerce-org/graphcommerce/commit/f1ebaa2aea68fe395fddb1b7dd91624251b1d501) - Navigation received focus making the menu visible while it shouldn't ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`f44a05a6c`](https://github.com/graphcommerce-org/graphcommerce/commit/f44a05a6cedadc17e44c87f53cad5f462bc52aba) - Use a singlular useElementScroll and provide ther scroll from the useScrollerContext ([@paales](https://github.com/paales))
+
+- [#1745](https://github.com/graphcommerce-org/graphcommerce/pull/1745) [`c7dc855af`](https://github.com/graphcommerce-org/graphcommerce/commit/c7dc855af5e096a53e17f3b2980b210642270fd5) - Added a spreadVal utility to replace responsiveVal and breakpointVal ([@github-actions](https://github.com/apps/github-actions))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`9de7c6960`](https://github.com/graphcommerce-org/graphcommerce/commit/9de7c6960c7ec7d6d28a670f71ac678c5d3c838f) - The scrollbar was hidden for bottom sheets, while that wasn't necessary ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.11
+
+## 5.1.0-canary.10
+
+### Patch Changes
+
+- [#1760](https://github.com/graphcommerce-org/graphcommerce/pull/1760) [`06a81e661`](https://github.com/graphcommerce-org/graphcommerce/commit/06a81e66144b4d94a1e318c2e26cac8d13aa0eb7) - When you navigate back to an overlay (cart, etc.), it can no longer be closed by dragging or clicking on the backdrop. ([@paales](https://github.com/paales))
+
+- [#1760](https://github.com/graphcommerce-org/graphcommerce/pull/1760) [`f1ebaa2ae`](https://github.com/graphcommerce-org/graphcommerce/commit/f1ebaa2aea68fe395fddb1b7dd91624251b1d501) - Navigation received focus making the menu visible while it shouldn't ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.9
+
 ## 5.1.0-canary.8
 
 ## 5.1.0-canary.7

package/Form/Form.tsx

@@ -1,6 +1,5 @@
 import { darken, lighten, styled, Theme } from '@mui/material'
 import { breakpointVal } from '../Styles/breakpointVal'
-import { sx } from '../Theme/themeDefaults'
 
 type FormStyleProps = {
   contained?: boolean
@@ -8,7 +7,7 @@ type FormStyleProps = {
 }
 
 const styles = ({ theme, contained = false, background }: { theme: Theme } & FormStyleProps) =>
-  sx([
+  theme.unstable_sx([
     {
       display: 'grid',
       alignItems: 'center',

package/Overlay/components/OverlayBase.tsx

@@ -123,22 +123,26 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
     document.body.style.overflow = 'hidden'
 
-    if (direction === 1 && position.get() !== OverlayPosition.OPENED) {
-      scroller.scrollLeft = positions.closed.x.get()
-      scroller.scrollTop = positions.closed.y.get()
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      scrollTo(open).then(() => {
-        scroller.scrollLeft = positions.open.x.get()
-        scroller.scrollTop = positions.open.y.get()
+    if (position.get() !== OverlayPosition.OPENED) {
+      if (direction === 1) {
+        scroller.scrollLeft = positions.closed.x.get()
+        scroller.scrollTop = positions.closed.y.get()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        scrollTo(open).then(() => {
+          scroller.scrollLeft = positions.open.x.get()
+          scroller.scrollTop = positions.open.y.get()
+          position.set(OverlayPosition.OPENED)
+        })
+      } else {
+        scroller.scrollLeft = open.x
+        scroller.scrollTop = open.y
         position.set(OverlayPosition.OPENED)
-      })
-    } else {
-      scroller.scrollLeft = open.x
-      scroller.scrollTop = open.y
+        snap.set(true)
+      }
     }
 
     return clearScrollLock
-  }, [direction, isPresent, position, positions, scrollTo, scrollerRef])
+  }, [direction, isPresent, position, positions, scrollTo, scrollerRef, snap])
 
   // Make sure the overlay stays open when resizing the window.
   useEffect(() => {
@@ -230,6 +234,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
+        inert={active ? undefined : 'true'}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -251,6 +256,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
+        inert={active ? undefined : 'true'}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/Theme/MuiChip.ts

@@ -1,6 +1,5 @@
 import { ComponentsVariants, darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
-import { sx } from './themeDefaults'
 
 declare module '@mui/material/Chip/Chip' {
   interface ChipPropsSizeOverrides {
@@ -21,32 +20,35 @@ export const MuiChip: ChipVariants = [
   },
   {
     props: { size: 'small' },
-    style: sx({
-      typography: 'caption',
-    }),
+    style: ({ theme }) =>
+      theme.unstable_sx({
+        typography: 'caption',
+      }),
   },
   {
     props: { size: 'medium' },
-    style: sx({
-      height: responsiveVal(26, 30),
-      paddingLeft: responsiveVal(3, 6),
-      paddingRight: responsiveVal(3, 6),
-      typography: 'caption',
-    }),
+    style: ({ theme }) =>
+      theme.unstable_sx({
+        height: responsiveVal(26, 30),
+        paddingLeft: responsiveVal(3, 6),
+        paddingRight: responsiveVal(3, 6),
+        typography: 'caption',
+      }),
   },
   {
     props: { size: 'responsive' },
-    style: sx({
-      height: responsiveVal(32, 40),
-      paddingLeft: responsiveVal(4, 8),
-      paddingRight: responsiveVal(4, 8),
-      borderRadius: '99em',
-      typography: 'body2',
-      '& .MuiChip-label': {
-        paddingLeft: responsiveVal(6, 10),
-        paddingRight: responsiveVal(6, 10),
-      },
-    }),
+    style: ({ theme }) =>
+      theme.unstable_sx({
+        height: responsiveVal(32, 40),
+        paddingLeft: responsiveVal(4, 8),
+        paddingRight: responsiveVal(4, 8),
+        borderRadius: '99em',
+        typography: 'body2',
+        '& .MuiChip-label': {
+          paddingLeft: responsiveVal(6, 10),
+          paddingRight: responsiveVal(6, 10),
+        },
+      }),
   },
   {
     props: { variant: 'outlined' },

package/Theme/themeDefaults.ts

@@ -1,4 +1,4 @@
-import { experimental_sx, SxProps, Theme } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
 import { spreadVal } from '../Styles/spreadVal'
 import { breakpoints } from './breakpoints'
@@ -38,5 +38,3 @@ export const themeBaseDefaults = {
   spreadVal,
   shadows,
 }
-
-export const sx = (props: SxProps<Theme>) => experimental_sx<Theme>(props)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.8",
+  "version": "5.1.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,21 +18,21 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
-    "@graphcommerce/framer-next-pages": "5.1.0-canary.8",
-    "@graphcommerce/framer-scroller": "5.1.0-canary.8",
-    "@graphcommerce/framer-utils": "5.1.0-canary.8",
-    "@graphcommerce/image": "5.1.0-canary.8",
+    "@graphcommerce/framer-next-pages": "5.1.0",
+    "@graphcommerce/framer-scroller": "5.1.0",
+    "@graphcommerce/framer-utils": "5.1.0",
+    "@graphcommerce/image": "5.1.0",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.8",
+    "@graphcommerce/eslint-config-pwa": "5.1.0",
+    "@graphcommerce/prettier-config-pwa": "5.1.0",
+    "@graphcommerce/typescript-config-pwa": "5.1.0",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
-    "typescript": "4.9.3"
+    "typescript": "4.9.4"
   },
   "peerDependencies": {
     "@lingui/core": "^3.13.2",

package/types.d.ts

@@ -7,8 +7,8 @@ import './Theme/createTheme'
 import 'react'
 
 declare module 'react' {
-  interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
-    loading?: 'lazy' | 'eager' | 'auto'
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    inert?: 'true'
   }
 }