@graphcommerce/next-ui 9.0.0-canary.77 → 9.0.0-canary.79

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.0.0-canary.79
+
+### Patch Changes
+
+- [#2356](https://github.com/graphcommerce-org/graphcommerce/pull/2356) [`d283901`](https://github.com/graphcommerce-org/graphcommerce/commit/d283901cb537c3e7bf6f5500e9f52f47f452cf10) - Loading an overlay page directly would animate in the overlay instead of directly showing it. ([@paales](https://github.com/paales))
+
+## 9.0.0-canary.78
+
+### Patch Changes
+
+- [#2354](https://github.com/graphcommerce-org/graphcommerce/pull/2354) [`7cd5c1c`](https://github.com/graphcommerce-org/graphcommerce/commit/7cd5c1cadf8dac43de9e5bb19038383be64aa08f) - Fix issues when using non-hex colors in theme ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2354](https://github.com/graphcommerce-org/graphcommerce/pull/2354) [`7c10458`](https://github.com/graphcommerce-org/graphcommerce/commit/7c104588ef96b9066b8f91835c29f957b08e4831) - Fix back button transparency on hover ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2354](https://github.com/graphcommerce-org/graphcommerce/pull/2354) [`1de9582`](https://github.com/graphcommerce-org/graphcommerce/commit/1de9582967f2a09cc7167a38ada4e50fe0d1b29a) - Properly align cart loading state (and other FullPageMessage usages) ([@bramvanderholst](https://github.com/bramvanderholst))
+
 ## 9.0.0-canary.77
 
 ## 9.0.0-canary.76

package/FullPageMessage/FullPageMessage.tsx

@@ -36,6 +36,7 @@ export function FullPageMessage(props: FullPageMessageProps) {
         }),
         !disableMargin && {
           marginTop: responsiveVal(50, 250),
+          marginBottom: responsiveVal(50, 250),
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/Overlay/components/OverlayBase.tsx

@@ -1,3 +1,4 @@
+import { Direction } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   dvh,
@@ -46,7 +47,7 @@ export type LayoutOverlayBaseProps = {
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
   active: boolean
-  direction?: 1 | -1
+  direction?: Direction
   onClosed: () => void
   offsetPageY?: number
   isPresent: boolean
@@ -123,7 +124,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
   )(th)
 
-  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap } = useScrollerContext()
+  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap, enableSnap } =
+    useScrollerContext()
   const scrollTo = useScrollTo()
 
   const beforeRef = useRef<HTMLDivElement>(null)
@@ -137,7 +139,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
   const match = useMatchMedia()
   const positions = useConstant(() => ({
-    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(0) },
+    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(direction === 0 ? 1 : 0) },
     closed: { x: motionValue(0), y: motionValue(0) },
   }))
 
@@ -277,17 +279,40 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
 
-    if (!scroller || !isPresent) return
+    if (!scroller || !isPresent || position.get() === OverlayPosition.OPENED) return
 
     if (variant() === 'right') document.body.style.overflow = 'hidden'
 
-    if (position.get() !== OverlayPosition.OPENED && !scroll.animating.get()) {
+    if (direction === 0) {
+      disableSnap()
+      scroller.scrollTop = positions.open.y.get()
+      scroller.scrollLeft = positions.open.x.get()
+      scroll.y.set(positions.open.y.get())
+      scroll.x.set(positions.open.x.get())
+      position.set(OverlayPosition.OPENED)
+      enableSnap()
+    } else if (!scroll.animating.get()) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       scrollTo(openClosePositions().open, { stopAnimationOnScroll: false }).then(() =>
         position.set(OverlayPosition.OPENED),
       )
     }
-  }, [isPresent, openClosePositions, position, scroll.animating, scrollTo, scrollerRef, variant])
+  }, [
+    direction,
+    disableSnap,
+    enableSnap,
+    isPresent,
+    openClosePositions,
+    position,
+    positions.open.x,
+    positions.open.y,
+    scroll.animating,
+    scroll.x,
+    scroll.y,
+    scrollTo,
+    scrollerRef,
+    variant,
+  ])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {

package/Theme/MuiButton.ts

@@ -1,4 +1,4 @@
-import { ComponentsVariants, Theme } from '@mui/material'
+import { ComponentsVariants, Theme, alpha, darken, lighten } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
 declare module '@mui/material/Button/Button' {
@@ -126,7 +126,15 @@ export const MuiButtonPill: ButtonVariants = [
   },
   {
     props: { variant: 'pill', color: 'inherit' },
-    style: ({ theme }) => ({ backgroundColor: theme.palette.background.paper }),
+    style: ({ theme }) => ({
+      backgroundColor: theme.palette.background.paper,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.default, 0.05)
+            : lighten(theme.palette.background.default, 0.2),
+      },
+    }),
   },
   {
     props: { variant: 'pill', disabled: true },
@@ -142,7 +150,7 @@ export const MuiButtonInline: ButtonVariants = [
     props: { variant: 'inline', color: 'primary' },
     style: ({ theme }) => ({
       color: theme.palette.primary.main,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: `${theme.palette.primary.main}30` },
+      '&:hover:not(.Mui-disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.19) },
     }),
   },
   {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.77",
+  "version": "9.0.0-canary.79",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.77",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.77",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.77",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.77",
-    "@graphcommerce/image": "^9.0.0-canary.77",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.77",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.77",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.79",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.79",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.79",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.79",
+    "@graphcommerce/image": "^9.0.0-canary.79",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.79",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.79",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",