@graphcommerce/magento-product 9.0.4-canary.0 → 9.0.4-canary.2

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # Change Log
 
-## 9.0.4-canary.0
+## 9.0.4-canary.2
 
-## 9.0.3
+### Patch Changes
 
-## 9.0.3-canary.0
+- [#2473](https://github.com/graphcommerce-org/graphcommerce/pull/2473) [`f085c89`](https://github.com/graphcommerce-org/graphcommerce/commit/f085c89416fd91cdc2729f8a6da0ec37d93e8e80) - Solve issue where the ProductListItemsBase was already wrapped in a form. ([@paales](https://github.com/paales))
 
-## 9.0.2
+## 9.0.4-canary.1
 
-## 9.0.2-canary.0
+## 9.0.4-canary.0
 
 ## 9.0.1
 
@@ -16,12 +16,6 @@
 
 - [#2461](https://github.com/graphcommerce-org/graphcommerce/pull/2461) [`c83aad6`](https://github.com/graphcommerce-org/graphcommerce/commit/c83aad64869ee4192aa4216cc41f8106642c38f9) - Prevent forwarding the isBack prop to the DOM element ([@paales](https://github.com/paales))
 
-## 9.0.1-canary.1
-
-### Patch Changes
-
-- [#2461](https://github.com/graphcommerce-org/graphcommerce/pull/2461) [`c83aad6`](https://github.com/graphcommerce-org/graphcommerce/commit/c83aad64869ee4192aa4216cc41f8106642c38f9) - Prevent forwarding the isBack prop to the DOM element ([@paales](https://github.com/paales))
-
 ## 9.0.0
 
 ### Major Changes

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -23,17 +23,11 @@ export type AddProductsToCartFormProps = {
   redirect?: RedirectType
   snackbarProps?: AddProductsToCartSnackbarProps
 
-  /**
-   * @deprecated use snackbarProps.errorSnackbar instead
-   */
+  /** @deprecated Use snackbarProps.errorSnackbar instead */
   errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
-  /**
-   * @deprecated use snackbarProps.successSnackbar instead
-   */
+  /** @deprecated Use snackbarProps.successSnackbar instead */
   successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
-  /**
-   * @deprecated use snackbarProps.disableSuccessSnackbar instead
-   */
+  /** @deprecated Use snackbarProps.disableSuccessSnackbar instead */
   disableSuccessSnackbar?: boolean
 } & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields>
 

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -7,7 +7,7 @@ import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 export type AddToCartQuantityProps = Omit<
   NumberFieldElementProps<AddProductsToCartMutationVariables>,
-  'error' | 'required' | 'inputProps' | 'helperText' | 'name' | 'control'
+  'error' | 'required' | 'inputProps' | 'helperText' | 'name' | 'control' | 'rules'
 > &
   AddToCartItemSelector
 

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -5,10 +5,10 @@ import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/ne
 import {
   Button,
   ErrorSnackbar,
+  iconChevronRight,
   IconSvg,
   ListFormat,
   MessageSnackbar,
-  iconChevronRight,
 } from '@graphcommerce/next-ui'
 import { Plural, Trans } from '@lingui/macro'
 

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -1,8 +1,8 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { useEventCallback } from '@mui/material'
 import { startTransition, useEffect, useState } from 'react'
-import type { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
 import { toUserErrors } from './toUserErrors'
+import type { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
 import type { AddToCartItemSelector } from './useFormAddProductsToCart'
 import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,6 +1,6 @@
 import { useController } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
-import { SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { Box, MenuItem, TextField } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -1,4 +1,4 @@
-import { RenderType, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, RenderType } from '@graphcommerce/next-ui'
 import type { AddToCartItemSelector } from '../AddProductsToCart'
 import type { ProductPagePriceFragment } from '../ProductPagePrice'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -3,9 +3,9 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import {
   ActionCard,
   ChipOverlayOrPopper,
-  IconSvg,
   filterNonNullableKeys,
   iconCirle,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import { useMemo } from 'react'

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -4,9 +4,9 @@ import {
   ActionCard,
   ActionCardAccordion,
   Button,
-  IconSvg,
   filterNonNullableKeys,
   iconCirle,
+  IconSvg,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box } from '@mui/material'

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -3,7 +3,7 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipOverlayOrPopper, extendableComponent } from '@graphcommerce/next-ui'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
-import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
+import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { FilterProps } from './ProductFiltersProAggregations'
 

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -3,7 +3,7 @@ import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import { ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
-import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
+import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { FilterProps } from './ProductFiltersProAggregations'
 

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -67,9 +67,7 @@ export type FilterFormProviderProps = Omit<
 > & {
   children: React.ReactNode
   params: ProductListParams
-  /**
-   * Whether the filter should scroll to the products list and whether to submit the form on change.
-   */
+  /** Whether the filter should scroll to the products list and whether to submit the form on change. */
   autoSubmitMd?: boolean
 
   handleSubmit?: (

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,12 +1,12 @@
 import type { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
 import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { excludeCategory } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
 import { ProductFilterEqualChip } from './ProductFilterEqualChip'
 import { ProductFilterEqualSection } from './ProductFilterEqualSection'
 import { ProductFilterRangeChip } from './ProductFilterRangeChip'
 import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { excludeCategory } from './activeAggregations'
-import { applyAggregationCount } from './applyAggregationCount'
 
 export type FilterProps = {
   aggregation: NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,6 +1,8 @@
 import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { ChipOverlayOrPopper } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { activeAggregations } from './activeAggregations'
+import { applyAggregationCount } from './applyAggregationCount'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import {
@@ -10,8 +12,6 @@ import {
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import type { ProductFiltersProSortSectionProps } from './ProductFiltersProSortSection'
 import { ProductFiltersProSortSection } from './ProductFiltersProSortSection'
-import { activeAggregations } from './activeAggregations'
-import { applyAggregationCount } from './applyAggregationCount'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 
 export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregationsProps &

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,5 +1,5 @@
 import type { SortEnum } from '@graphcommerce/graphql-mesh'
-import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
+import { iconArrowDown, iconArrowUp, IconSvg } from '@graphcommerce/next-ui'
 
 export type ProductFiltersProSortDirectionArrowProps = {
   sortDirection: SortEnum | null

package/components/ProductFiltersPro/useProductFiltersProHasFiltersApplied.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
-import { useProductFiltersPro } from './ProductFiltersPro'
 import { activeAggregations } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
+import { useProductFiltersPro } from './ProductFiltersPro'
 
 export function useProductFilterProHasFiltersApplied() {
   const { params, aggregations, appliedAggregations } = useProductFiltersPro()

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from '@graphcommerce/graphql'
-import { IconSvg, iconCancelAlt } from '@graphcommerce/next-ui'
+import { iconCancelAlt, IconSvg } from '@graphcommerce/next-ui'
 import type { ChipProps, SxProps, Theme } from '@mui/material'
 import { Chip } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -1,9 +1,9 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import {
-  IconSvg,
   extendableComponent,
   iconChevronLeft,
   iconChevronRight,
+  IconSvg,
   useScrollY,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'

package/components/ProductListItem/ProductListItem.tsx

@@ -14,7 +14,8 @@ import type {
   ProductListsItemImageAreaProps,
 } from './ProductListItemImageContainer'
 import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
-import { ProductListItemLinkOrDiv, ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
+import type { ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
+import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
 import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
 import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
 

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,7 +1,8 @@
 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'
+import React from 'react'
+import { AddProductsToCartForm, useFormAddProductsToCart } from '../AddProductsToCart'
 import type { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import type { ProductListItemsFragment } from './ProductListItems.gql'
 import type { ProductListItemRenderer } from './renderer'
@@ -84,8 +85,11 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
 
   const classes = withState({ size })
 
+  const context = useFormAddProductsToCart(true)
+  const MaybeAddProductsToCartForm = context ? React.Fragment : AddProductsToCartForm
+
   return (
-    <AddProductsToCartForm>
+    <MaybeAddProductsToCartForm>
       <Box
         ref={containerRef}
         className={classes.root}
@@ -130,6 +134,6 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
         )}
         {children}
       </Box>
-    </AddProductsToCartForm>
+    </MaybeAddProductsToCartForm>
   )
 }

package/components/ProductListSuggestions/ProductListSuggestions.tsx

@@ -1,4 +1,4 @@
-import { ListFormat, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, ListFormat } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { Box, Link } from '@mui/material'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -1,9 +1,9 @@
 import type { ColumnTwoWithTopProps } from '@graphcommerce/next-ui'
 import {
-  ColumnTwoWithTop,
-  LazyHydrate,
   breakpointVal,
+  ColumnTwoWithTop,
   extendableComponent,
+  LazyHydrate,
 } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Typography } from '@mui/material'

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,5 +1,5 @@
 import type { SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
-import { SidebarGallery, nonNullable } from '@graphcommerce/next-ui'
+import { nonNullable, SidebarGallery } from '@graphcommerce/next-ui'
 import type { ProductPageGalleryFragment } from './ProductPageGallery.gql'
 
 export type ProductPageGalleryRenderers = TypeRenderer<

package/components/ProductPagePrice/useCustomizableOptionPrice.ts

@@ -10,8 +10,8 @@ import type {
   SelectorsProp,
 } from '../ProductCustomizable/productCustomizableSelectors'
 import { productCustomizableSelectors } from '../ProductCustomizable/productCustomizableSelectors'
-import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 import { getProductTierPrice } from './getProductTierPrice'
+import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
 
 export type UseCustomizableOptionPriceProps = {
   product: ProductPagePriceFragment

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,4 +1,4 @@
-import { IconSvg, breakpointVal, iconOrderBefore } from '@graphcommerce/next-ui'
+import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, darken, lighten } from '@mui/material'
 import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,4 +1,4 @@
-import { Row, SectionContainer, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { extendableComponent, responsiveVal, Row, SectionContainer } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ProductSpecsFragment } from './ProductSpecs.gql'

package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { ListFormat, extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, ListFormat } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import type { ProductSpecsFragment } from './ProductSpecs.gql'
 import { ProductSpecsTypesDocument } from './ProductSpecsTypes.gql'

package/hooks/useProductList.ts

@@ -16,16 +16,16 @@ import type {
 } from '../components/ProductList/ProductList.gql'
 import { ProductListDocument } from '../components/ProductList/ProductList.gql'
 import type { CategoryDefaultFragment } from '../components/ProductListItems/CategoryDefault.gql'
+import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
 import type { ProductListParams } from '../components/ProductListItems/filterTypes'
 import { toProductListParams } from '../components/ProductListItems/filterTypes'
-import { useRouterFilterParams } from '../components/ProductListItems/filteredProductList'
 import {
   categoryDefaultsToProductListFilters,
   productListApplyCategoryDefaults,
   useProductListApplyCategoryDefaults,
 } from '../components/ProductListItems/productListApplyCategoryDefaults'
 
-const productListQueries: Array<Promise<any>> = []
+const productListQueries: Array<Promise<unknown>> = []
 
 type Next = Parameters<NonNullable<FilterFormProviderProps['handleSubmit']>>[1]
 

package/hooks/useProductListLinkReplace.ts

@@ -9,9 +9,7 @@ type UseProductLinkPushProps = {
   scroll?: boolean
 }
 
-/**
- * @deprecated replaced by custom function inside ProductFiltersPro
- */
+/** @deprecated Replaced by custom function inside ProductFiltersPro */
 export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
   const { setParams } = useProductListParamsContext()
   const router = useRouter()

package/package.json

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

package/test/productURL.fixture.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { test as base } from '@graphcommerce/magento-store/test/apolloClientStore.fixture'
-import { ProductStaticPathsDocument } from '../components/ProductStaticPaths/ProductStaticPaths.gql'
 import type { ProductTypenames } from '../components/ProductStaticPaths/getProductStaticPaths'
+import { ProductStaticPathsDocument } from '../components/ProductStaticPaths/ProductStaticPaths.gql'
 import { productLink } from '../hooks/useProductLink'
 
 type ProductUrls = {