@graphcommerce/magento-product 9.0.0-canary.107 → 9.0.0-canary.108

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.0.0-canary.108
+
+### Patch Changes
+
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`ebdf2c8`](https://github.com/graphcommerce-org/graphcommerce/commit/ebdf2c8ea5ba69fa11d33daa75ad12b7c1501460) - Hide ProductScroller components when no items are available ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`cb8d2f0`](https://github.com/graphcommerce-org/graphcommerce/commit/cb8d2f0059d64242260e30ce34655868f204ef4c) - Made all component prop types exported ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`673bf7c`](https://github.com/graphcommerce-org/graphcommerce/commit/673bf7c25b521c215b36db8f6c6ccfd70c4a7468) - Allow adding elements after/between product list items (e.g. banners) ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2438](https://github.com/graphcommerce-org/graphcommerce/pull/2438) [`49937fd`](https://github.com/graphcommerce-org/graphcommerce/commit/49937fd765338e25899d427ee4d799fa7978faeb) - Allow changing various props for internal components ([@bramvanderholst](https://github.com/bramvanderholst))
+
 ## 9.0.0-canary.107
 
 ## 9.0.0-canary.106

package/components/AddProductsToCart/AddProductsToCartError.tsx

@@ -3,7 +3,7 @@ import { FormHelperText } from '@mui/material'
 import type { AddToCartItemSelector } from './useFormAddProductsToCart'
 import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
-type AddProductsToCartErrorProps = {
+export type AddProductsToCartErrorProps = {
   children?: React.ReactNode
 } & AddToCartItemSelector
 

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -5,7 +5,7 @@ import type { AddProductsToCartMutationVariables } from './AddProductsToCart.gql
 import type { AddToCartItemSelector } from './useFormAddProductsToCart'
 import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
-type AddToCartQuantityProps = Omit<
+export type AddToCartQuantityProps = Omit<
   NumberFieldElementProps<AddProductsToCartMutationVariables>,
   'error' | 'required' | 'inputProps' | 'helperText' | 'name' | 'control'
 > &
@@ -20,13 +20,13 @@ export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
       variant='outlined'
       size='small'
       color='primary'
-      {...props}
       required
       inputProps={{ min: 1, 'aria-label': i18n._(/* i18n */ 'Add to cart quantity') }}
       defaultValue={1}
       control={control}
       aria-label={i18n._(/* i18n */ 'Add to cart quantity')}
       name={`cartItems.${index}.quantity`}
+      {...props}
     />
   )
 }

package/components/ProductCustomizable/CustomizableAreaOption.tsx

@@ -18,7 +18,7 @@ export type OptionTypeRenderer = TypeRenderer<
   }
 >
 
-type CustomizableAreaOptionProps = React.ComponentProps<
+export type CustomizableAreaOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableAreaOption']
 >
 

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -7,7 +7,7 @@ import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
-type CustomizableCheckboxOptionProps = React.ComponentProps<
+export type CustomizableCheckboxOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableCheckboxOption']
 >
 

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -6,7 +6,7 @@ import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
-type CustomizableDateOptionProps = React.ComponentProps<
+export type CustomizableDateOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDateOption']
 > & {
   minDate?: Date

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -5,7 +5,7 @@ import { Box, MenuItem, TextField } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
-type CustomizableDropDownOptionProps = React.ComponentProps<
+export type CustomizableDropDownOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDropDownOption']
 >
 

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -6,7 +6,7 @@ import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
-type CustomizableFieldOptionProps = React.ComponentProps<
+export type CustomizableFieldOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableFieldOption']
 >
 

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -7,7 +7,7 @@ import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
-type CustomizableMultipleOptionProps = React.ComponentProps<
+export type CustomizableMultipleOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableMultipleOption']
 >
 

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -7,7 +7,7 @@ import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
 
-type CustomizableRadioOptionProps = React.ComponentProps<
+export type CustomizableRadioOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableRadioOption']
 >
 

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -33,7 +33,7 @@ type OptionTypeRendererProp = Simplify<
     : MissingOptionTypeRenderer & DefinedOptionTypeRenderer
 >
 
-type ProductCustomizableProps = AddToCartItemSelector & {
+export type ProductCustomizableProps = AddToCartItemSelector & {
   product: ProductCustomizableFragment & ProductPagePriceFragment
 } & (keyof MissingOptionTypeRenderer extends never
     ? { renderer?: OptionTypeRendererProp }

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -19,7 +19,8 @@ export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregations
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
-  >
+  > &
+  Partial<Pick<ChipOverlayOrPopperProps, 'label' | 'selectedLabel' | 'children'>>
 
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
   const { sort_fields, total_count, renderer, category, ...rest } = props

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,11 +1,13 @@
 import type { SortEnum } from '@graphcommerce/graphql-mesh'
 import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
 
-type Props = {
+export type ProductFiltersProSortDirectionArrowProps = {
   sortDirection: SortEnum | null
 }
 
-export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
+export function ProductFiltersProSortDirectionArrow({
+  sortDirection,
+}: ProductFiltersProSortDirectionArrowProps) {
   return (
     <IconSvg
       src={sortDirection === 'ASC' || sortDirection === null ? iconArrowUp : iconArrowDown}

package/components/ProductListFilters/FilterEqualType.tsx

@@ -44,7 +44,7 @@ export type FilterIn = SetRequired<Omit<FilterEqualTypeInput, 'eq'>, 'in'>
 
 type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 
-type FilterEqualTypeProps = Filter & Omit<ChipMenuProps, 'selected'>
+export type FilterEqualTypeProps = Filter & Omit<ChipMenuProps, 'selected'>
 
 export function FilterEqualType(props: FilterEqualTypeProps) {
   const { attribute_code, count, label, options, __typename, ...chipProps } = props

package/components/ProductListFilters/FilterRangeType.tsx

@@ -11,7 +11,7 @@ import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
-type FilterRangeTypeProps = NonNullable<
+export type FilterRangeTypeProps = NonNullable<
   NonNullable<ProductListFiltersFragment['aggregations']>[0]
 > &
   Omit<ChipMenuProps, 'selected'>

package/components/ProductListItem/ProductListItem.tsx

@@ -40,7 +40,7 @@ type StyleProps = {
   imageOnly?: boolean
 }
 
-type BaseProps = {
+export type BaseProps = {
   imageOnly?: boolean
   children?: React.ReactNode
   sx?: SxProps<Theme>
@@ -53,9 +53,9 @@ type BaseProps = {
   Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
 
 // eslint-disable-next-line react/no-unused-prop-types
-type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
+export type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
 
-type ProductProps = BaseProps & ProductListItemFragment
+export type ProductProps = BaseProps & ProductListItemFragment
 
 export type ProductListItemProps = ProductProps | SkeletonProps
 

package/components/ProductListItem/ProductListItemImage.tsx

@@ -48,7 +48,7 @@ export function ProductListItemImageSkeleton(props: ProductListItemImageProps) {
   )
 }
 
-type ImageOrPlaceholderProps = ProductListItemImageProps &
+export type ImageOrPlaceholderProps = ProductListItemImageProps &
   Omit<ImageProps, 'alt' | 'src'> & {
     alt?: ImageProps['alt'] | null
     src?: ImageProps['src'] | null

package/components/ProductListItem/ProductListItemImageContainer.tsx

@@ -2,7 +2,7 @@ import { breakpointVal, responsiveVal } from '@graphcommerce/next-ui'
 import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 
-type ProductImageContainerProps = BoxProps
+export type ProductImageContainerProps = BoxProps
 
 export function ProductImageContainer(props: ProductImageContainerProps) {
   const { sx = [] } = props

package/components/ProductListItem/ProductListItemLinkOrDiv.tsx

@@ -2,8 +2,8 @@ import { NextLink, breakpointVal } from '@graphcommerce/next-ui'
 import type { BoxProps, ButtonBaseProps, SxProps, Theme } from '@mui/material'
 import { Box, ButtonBase } from '@mui/material'
 
-type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
-type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps
+export type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
+export type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps
 
 function isLink(props: ProductListItemLinkOrDivProps): props is ProductListItemLinkProps {
   return 'href' in props

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -38,6 +38,7 @@ export type ProductItemsGridProps = ProductListItemsFragment & {
   sx?: BoxProps['sx']
   columns?: ((theme: Theme) => ColumnsConfig) | ColumnsConfig
   containerRef?: React.Ref<HTMLDivElement>
+  children?: React.ReactNode
 } & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
   ComponentState
 
@@ -57,6 +58,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     titleComponent,
     onClick,
     columns,
+    children,
   } = props
 
   const theme = useTheme()
@@ -124,6 +126,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
             </LazyHydrate>
           ) : null,
         )}
+        {children}
       </Box>
     </AddProductsToCartForm>
   )

package/components/ProductListSuggestions/ProductListSuggestions.tsx

@@ -5,7 +5,7 @@ import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { useProductFiltersPro } from '../ProductFiltersPro'
 import type { ProductListSuggestionsFragment } from './ProductListSuggestions.gql'
 
-type ProductListSuggestionsProps = {
+export type ProductListSuggestionsProps = {
   products: ProductListSuggestionsFragment
 }
 

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -6,13 +6,13 @@ import { Breadcrumbs, Link, Typography } from '@mui/material'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
 import type { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
 
-type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment &
+export type ProductPageBreadcrumbProps = ProductPageBreadcrumbFragment &
   Omit<BreadcrumbsProps, 'children'>
 
 /**
  * @deprecated Please use ProductPageBreadcrumbs
  */
-export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
+export function ProductPageBreadcrumb(props: ProductPageBreadcrumbProps) {
   const { categories, name, ...breadcrumbProps } = props
   const prev = usePrevPageRouter()
 

package/components/ProductScroller/ProductScroller.tsx

@@ -36,7 +36,7 @@ export const ProductScroller = forwardRef<HTMLDivElement, ProductScrollerProps>(
 
     const Wrapper = useContext(AddProductsToCartContext) ? React.Fragment : AddProductsToCartForm
 
-    if (!items) return null
+    if (!items || !items.length) return null
 
     return (
       <Box sx={sx} ref={ref}>

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react'
 import { Box, darken, lighten } from '@mui/material'
 import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
 
-type ProductSidebarDeliveryProps = {
+export type ProductSidebarDeliveryProps = {
   product?: UseAddProductsToCartActionFragment
 }
 

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.107",
+  "version": "9.0.0-canary.108",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.107",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.107",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.107",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.107",
-    "@graphcommerce/graphql": "^9.0.0-canary.107",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.107",
-    "@graphcommerce/image": "^9.0.0-canary.107",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.107",
-    "@graphcommerce/magento-store": "^9.0.0-canary.107",
-    "@graphcommerce/next-ui": "^9.0.0-canary.107",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.107",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.107",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.108",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.108",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.108",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.108",
+    "@graphcommerce/graphql": "^9.0.0-canary.108",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.108",
+    "@graphcommerce/image": "^9.0.0-canary.108",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.108",
+    "@graphcommerce/magento-store": "^9.0.0-canary.108",
+    "@graphcommerce/next-ui": "^9.0.0-canary.108",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.108",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.108",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",