@graphcommerce/next-ui 10.0.0-canary.68 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+### Patch Changes
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`a0ba773`](https://github.com/graphcommerce-org/graphcommerce/commit/a0ba773171bb76c7a998deb5bbacd974e5a3764d) - Fix LayoutOverlayHeader2 text overflowing beyond overlay size constraints ([@paales](https://github.com/paales))
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`4908a45`](https://github.com/graphcommerce-org/graphcommerce/commit/4908a457cac15c429d83d6b9274a8be9c8277ef6) - Allow setting OverlayContainer props, such as event listeners ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.68
 
 ### Major Changes

package/LayoutOverlay/components/LayoutOverlayHeader2.tsx

@@ -139,17 +139,17 @@ export const LayoutOverlayHeader2 = React.memo<LayoutOverlayHeader2Props>((props
           // Left only
           '&.left:not(.right)': {
             gridTemplateAreas: '"left center"',
-            gridTemplateColumns: justify === 'center' ? '1fr max-content' : 'auto 1fr',
+            gridTemplateColumns: justify === 'center' ? '1fr auto' : 'auto 1fr',
           },
           // Right only
           '&.right:not(.left)': {
             gridTemplateAreas: '"center right"',
-            gridTemplateColumns: justify === 'center' ? 'max-content 1fr' : '1fr auto',
+            gridTemplateColumns: justify === 'center' ? 'auto 1fr' : '1fr auto',
           },
           // Both left and right
           '&.left.right': {
             gridTemplateAreas: '"left center right"',
-            gridTemplateColumns: justify === 'center' ? '1fr max-content 1fr' : 'auto 1fr auto',
+            gridTemplateColumns: justify === 'center' ? '1fr auto 1fr' : 'auto 1fr auto',
           },
         }))}
       >

package/Overlay/components/Overlay.tsx

@@ -5,20 +5,27 @@ import type { SetOptional } from 'type-fest'
 import { variantsToScrollSnapType } from '../utils/variantsToScrollSnapType'
 import type { LayoutOverlayBaseProps } from './OverlayBase'
 import { OverlayBase } from './OverlayBase'
+import type { OverlayContainerProps } from './OverlayContainer'
 import { OverlayContainer } from './OverlayContainer'
 
 export type OverlayTmpProps = Omit<
   SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
   'offsetPageY' | 'isPresent' | 'safeToRemove'
->
+> & { overlayContainerProps?: Partial<OverlayContainerProps> }
 
 function OverlayUsePresence(props: OverlayTmpProps) {
-  const { variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
+  const {
+    variantSm = 'bottom',
+    variantMd = 'right',
+    active,
+    overlayContainerProps,
+    ...otherProps
+  } = props
   const [isPresent, safeToRemove] = usePresence()
 
   return (
     <Portal>
-      <OverlayContainer active={active}>
+      <OverlayContainer active={active} {...overlayContainerProps}>
         <ScrollerProvider {...variantsToScrollSnapType(props)}>
           <OverlayBase
             active={active}

package/Overlay/components/OverlayContainer.tsx

@@ -1,14 +1,15 @@
 import { sxx } from '@graphcommerce/next-ui'
+import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 import type { LayoutOverlayBaseProps } from './OverlayBase'
 
 export type OverlayContainerProps = Pick<LayoutOverlayBaseProps, 'active'> & {
   hidden?: boolean
   children: React.ReactNode
-}
+} & BoxProps
 
 export function OverlayContainer(props: OverlayContainerProps) {
-  const { children, active, hidden } = props
+  const { children, active, hidden, sx, ...rest } = props
 
   return (
     <Box
@@ -47,7 +48,9 @@ export function OverlayContainer(props: OverlayContainerProps) {
                 boxShadow: 0,
               },
             },
+        sx,
       )}
+      {...rest}
     >
       {children}
     </Box>

package/Page/types.ts

@@ -1,8 +1,5 @@
 import type { ParsedUrlQuery } from 'querystring'
 import type { UpPage } from '@graphcommerce/framer-next-pages'
-// todo: remove references to GraphQL
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { NormalizedCacheObject } from '@graphcommerce/graphql'
 import type {
   GetServerSideProps as GetServerSidePropsNext,
   GetStaticProps as GetStaticPropsNext,
@@ -10,7 +7,7 @@ import type {
 
 type AnyObj = Record<string, unknown>
 
-export type ApolloStateProps = { apolloState: NormalizedCacheObject; up?: UpPage | null }
+export type ApolloStateProps = { apolloState: unknown; up?: UpPage | null }
 
 export type GetStaticProps<
   PL extends AnyObj,

package/RenderType/RenderType.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { createElement } from 'react'
+import type React from 'react'
 
 /** To make renderers customizable we need to be able to provide renders for all types */
 type TypeObject = { __typename: string; [index: string]: unknown }
@@ -24,6 +25,10 @@ export type TypeRenderer<
   TAdd extends Record<string, unknown> = Record<string, unknown>,
 > = TypeRenderMap<T, T['__typename'], TAdd>
 
+function FallbackRenderer({ __typename }: { __typename: string }) {
+  return <>{process.env.NODE_ENV !== 'production' ? __typename : ''}</>
+}
+
 /**
  * A simple array with renderers but with strict typing that validates of the provided Renderer is
  * actually able to render the Type
@@ -35,11 +40,9 @@ export function RenderType<
   A extends Record<string, unknown> = Record<string, unknown>,
 >(props: { renderer: TypeRenderer<T, A> } & FilterTypeByTypename<T, T['__typename']> & A) {
   const { renderer, __typename, ...typeItemProps } = props
-  const TypeItem: TypeRenderMethod<typeof typeItemProps> = renderer[__typename]
-    ? renderer[__typename]
-    : () => <>{process.env.NODE_ENV !== 'production' ? __typename : ''}</>
+  const TypeItem: TypeRenderMethod<typeof typeItemProps> = renderer[__typename] ?? FallbackRenderer
 
-  return <TypeItem {...typeItemProps} __typename={__typename} />
+  return createElement(TypeItem, { ...typeItemProps, __typename })
 }
 
 /** @public */

package/Styles/withTheme.tsx

@@ -44,21 +44,22 @@ export function withTheme<T>(
   Component: (value: T & WithSx) => React.ReactElement<any, any> | null,
   theme: Theme,
 ): React.FC<T & WithSx> {
-  return (data: T & WithSx) => {
+  // eslint-disable-next-line react/function-component-definition
+  return function WithTheme(data: T & WithSx) {
     const { sx = [] } = data
     return (
       <ThemeProvider theme={theme}>
-        <Component
-          {...data}
-          sx={sxx(
+        {React.createElement(Component, {
+          ...data,
+          sx: sxx(
             {
               typography: 'body1',
               color: theme.vars.palette.text.primary,
               backgroundColor: theme.vars.palette.background.default,
             },
             sx,
-          )}
-        />
+          ),
+        })}
       </ThemeProvider>
     )
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.68",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -30,7 +30,7 @@
     "./RenderType/filterNonNullableKeys": "./RenderType/filterNonNullableKeys.ts"
   },
   "dependencies": {
-    "cookie": "^1.0.2",
+    "cookie": "^1.1.1",
     "react-is": "^19.2.0"
   },
   "devDependencies": {
@@ -38,21 +38,21 @@
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@emotion/cache": "^11",
-    "@emotion/react": "^11",
-    "@emotion/server": "^11",
-    "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.68",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.68",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.68",
-    "@graphcommerce/image": "^10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.14.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.72",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.72",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/lab": "^7.0.0-beta.0",
+    "@mui/lab": "7.0.1-beta.20",
     "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",