@graphcommerce/magento-product 9.0.0-canary.109 → 9.0.0-canary.111

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 9.0.0-canary.111
+
+## 9.0.0-canary.110
+
 ## 9.0.0-canary.109
 
 ## 9.0.0-canary.108

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,4 +1,4 @@
-import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { extendableComponent, LazyHydrate, RenderType, responsiveVal } from '@graphcommerce/next-ui'
 import type { BoxProps, Breakpoint, Theme } from '@mui/material'
 import { Box, useTheme } from '@mui/material'
 import { AddProductsToCartForm } from '../AddProductsToCart'
@@ -10,26 +10,25 @@ type ComponentState = {
   size?: 'normal' | 'small'
 }
 
-type ColumnConfig = {
+export type ColumnConfig = {
   /**
-   * The total width of the grid, this is used to provde the correct values to the image sizes prop so the right image size is loaded.
+   * The total width of the grid, this is used to provde the correct values to the image sizes prop
+   * so the right image size is loaded.
    *
-   * @default "calc(100vw - ${theme.page.horizontal} * 2)"
+   * @default 'calc(100vw - ${theme.page.horizontal} * 2)'
    */
-  totalWidth?: string
+  maxWidth?: string
   /**
    * Gap between the columns/rows
    *
    * @default theme.spacings.md
    */
   gap?: string
-  /**
-   * Number of columns
-   */
+  /** Number of columns */
   count: number
 }
 
-type ColumnsConfig = Partial<Record<Breakpoint, ColumnConfig>>
+export type ColumnsConfig = Partial<Record<Breakpoint, ColumnConfig>>
 
 export type ProductItemsGridProps = ProductListItemsFragment & {
   renderers: ProductListItemRenderer
@@ -39,6 +38,7 @@ export type ProductItemsGridProps = ProductListItemsFragment & {
   columns?: ((theme: Theme) => ColumnsConfig) | ColumnsConfig
   containerRef?: React.Ref<HTMLDivElement>
   children?: React.ReactNode
+  maxWidth?: string
 } & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
   ComponentState
 
@@ -59,11 +59,13 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     onClick,
     columns,
     children,
+    maxWidth: maxWidthProp,
   } = props
 
   const theme = useTheme()
 
-  const totalWidth = `calc(100vw - ${theme.page.horizontal} * 2)`
+  const maxWidth = maxWidthProp ?? `calc(100vw - ${theme.page.horizontal} * 2)`
+
   const gap = theme.spacings.md
 
   let columnConfig = typeof columns === 'function' ? columns(theme) : columns
@@ -72,7 +74,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     columnConfig = {
       xs: { count: 2 },
       md: { count: 3 },
-      lg: { count: 4, totalWidth: `${theme.breakpoints.values.xl}px` },
+      lg: { count: 4, maxWidth: `${theme.breakpoints.values.xl}px` },
     }
   }
 
@@ -91,7 +93,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
           ...Object.entries(columnConfig).map(([key, column]) => ({
             [theme.breakpoints.up(key as Breakpoint)]: {
               gap: column.gap ?? gap,
-              // width: totalWidth,
+              // maxWidth: column.maxWidth ?? maxWidth,
               gridTemplateColumns: `repeat(${column.count}, 1fr)`,
             },
           })),
@@ -109,8 +111,8 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
               <RenderType
                 renderer={renderers}
                 sizes={Object.fromEntries(
-                  Object.entries(columnConfig ?? {}).map(([key, column]) => {
-                    const totalW = column.totalWidth ?? totalWidth
+                  Object.entries(columnConfig).map(([key, column]) => {
+                    const totalW = column.maxWidth ?? maxWidth
                     const columnGap = column.gap ?? gap
                     return [
                       theme.breakpoints.values[key as Breakpoint],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.109",
+  "version": "9.0.0-canary.111",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.109",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.109",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.109",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.109",
-    "@graphcommerce/graphql": "^9.0.0-canary.109",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.109",
-    "@graphcommerce/image": "^9.0.0-canary.109",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.109",
-    "@graphcommerce/magento-store": "^9.0.0-canary.109",
-    "@graphcommerce/next-ui": "^9.0.0-canary.109",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.109",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.109",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.111",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.111",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.111",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.111",
+    "@graphcommerce/graphql": "^9.0.0-canary.111",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.111",
+    "@graphcommerce/image": "^9.0.0-canary.111",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.111",
+    "@graphcommerce/magento-store": "^9.0.0-canary.111",
+    "@graphcommerce/next-ui": "^9.0.0-canary.111",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.111",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.111",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",