@propeller-commerce/propeller-v2-react-ui 0.11.3 → 0.12.0

package/CHANGELOG.md

@@ -8,6 +8,59 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.12.0] - 2026-07-31
+
+### Added
+
+- **`productTrackAttributes` on `<ProductGrid>`, `<SearchBar>` and
+  `useProductSearch`.** Pass the attribute names a card renders — e.g.
+  `productTrackAttributes={['MPN']}` — and they arrive on
+  `product.attributes` for every item in the result, ready to read from a
+  card slot like `belowName`. `useProductInfo` has had an option of this name
+  since the PDP work; the grid side simply never forwarded one, so hosts that
+  set it in their portal config saw it silently ignored on listings and had
+  to fetch attributes themselves in a second request.
+
+  Requires `propeller-sdk-v2` >= 0.16.0, where the `category` and `products`
+  operations gained `$attributeResultSearchInput` and `ProductGridFields`
+  gained the matching `attributes(input:)` selection.
+
+  Naming the attributes you render is not just a payload optimisation — it is
+  the correct behaviour. With no input the server returns the *first page* of
+  a product's attributes (12 per product), so on a product carrying more than
+  12 the ones on later pages are missing with no error. Filtering to the names
+  you need also cut a 24-product category response from ~168 KB to ~124 KB in
+  our testing.
+
+## [0.11.4] - 2026-07-31
+
+### Fixed
+
+- **The add-to-cart button overflowed its product card in narrow columns.**
+  The submit button is `flex-1`, but a flex item defaults to
+  `min-width: auto` and so refuses to shrink below its content width — icon
+  plus label plus `px-6` of padding. In a slider or a dense grid the button
+  ran past the card's edge instead of fitting inside it. Longer non-English
+  labels hit this first: Dutch "Toevoegen" is roughly twice the width of the
+  "Add" the padding was sized around. The button now carries `min-w-0`, eases
+  its padding to `px-3 sm:px-6`, and wraps its label in a `truncate` span, so
+  it shrinks to the column and ellipsises rather than overflowing. Same fix
+  for `<ClusterCard>`'s "View cluster" link, which had the identical shape.
+- **Hovering a card's CTA lit up the whole card.** The card root is a
+  `group` with `hover:shadow-md`, so hovering the button — a descendant —
+  raised the card shadow, shifted its border and zoomed the product image at
+  the same time as the button's own hover state. Three things answering one
+  intent read as the card being clickable rather than the button. While the
+  pointer is on a CTA the card-level highlight and the image zoom now stand
+  down and the button owns the hover; moving anywhere else on the card is
+  unchanged. Browsers without `:has()` keep the previous behaviour.
+
+### Changed
+
+- **`<AddToCart>`'s hover shade now matches the other CTAs.** It darkened to
+  `bg-secondary/90` where every other solid button in the package uses `/80`.
+  Now `/80` as well.
+
 ## [0.11.3] - 2026-07-31
 
 ### Fixed

package/dist/index.cjs

@@ -2090,7 +2090,7 @@ function useProductInfo(options) {
     if (options.user && "customerId" in options.user) input.customerId = options.user.customerId;
     return input;
   }
-  function buildAttributeInput() {
+  function buildAttributeInput2() {
     const names = options.productTrackAttributes;
     if (!names || names.length === 0) return void 0;
     return { attributeDescription: { names } };
@@ -2113,7 +2113,7 @@ function useProductInfo(options) {
         orderlistIds = (orderlists?.items ?? []).map((ol) => ol.id);
       }
       const service = propellerV2CoreUi.createServices(graphqlClient).product;
-      const attributeInput = buildAttributeInput();
+      const attributeInput = buildAttributeInput2();
       const variables = {
         productId,
         language,
@@ -2203,6 +2203,10 @@ function useProductInfo(options) {
   };
 }
 var inflightFetches2 = /* @__PURE__ */ new Set();
+function buildAttributeInput(names) {
+  if (!names || names.length === 0) return void 0;
+  return { attributeDescription: { names } };
+}
 function useProductSearch(options) {
   const { graphqlClient, configuration } = options;
   const isControlled = options.products !== void 0;
@@ -2335,6 +2339,7 @@ function useProductSearch(options) {
       const filterAvailableAttributeInput = {
         isSearchable: true
       };
+      const attributeInput = buildAttributeInput(options.productTrackAttributes);
       const variables = {
         categoryId: catId,
         language: lang,
@@ -2342,7 +2347,8 @@ function useProductSearch(options) {
         priceCalculateProductInput,
         filterAvailableAttributeInput,
         imageSearchFilters: configuration?.imageSearchFiltersGrid,
-        imageVariantFilters: configuration?.imageVariantFiltersMedium
+        imageVariantFilters: configuration?.imageVariantFiltersMedium,
+        ...attributeInput && { attributeResultSearchInput: attributeInput }
       };
       const response = await service.getCategory(variables);
       if (thisId !== fetchIdRef.current) return;
@@ -2403,7 +2409,9 @@ function useProductSearch(options) {
     taxZone,
     pageSize,
     pagination.currentPage,
-    configuration
+    configuration,
+    // Stringified: callers pass an array literal, so identity changes each render.
+    JSON.stringify(options.productTrackAttributes ?? [])
   ]);
   const search = React6.useCallback(
     (term) => {
@@ -2482,13 +2490,15 @@ function useProductSearch(options) {
             ...contactId !== void 0 && { contactId },
             ...customerId !== void 0 && { customerId }
           };
+          const attributeInput = buildAttributeInput(options.productTrackAttributes);
           const variables = {
             categoryId: catId,
             language,
             categoryProductSearchInput,
             priceCalculateProductInput,
             imageSearchFilters: configuration?.imageSearchFiltersGrid,
-            imageVariantFilters: configuration?.imageVariantFiltersMedium
+            imageVariantFilters: configuration?.imageVariantFiltersMedium,
+            ...attributeInput && { attributeResultSearchInput: attributeInput }
           };
           const response = await service.getCategory(variables);
           const productsResponse = response?.products;
@@ -2507,7 +2517,7 @@ function useProductSearch(options) {
       }, 300);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [graphqlClient, language, configuration, userKey, JSON.stringify(options.orderlistIds ?? []), options.applyOrderlists]
+    [graphqlClient, language, configuration, userKey, JSON.stringify(options.orderlistIds ?? []), options.applyOrderlists, JSON.stringify(options.productTrackAttributes ?? [])]
   );
   React6.useEffect(() => {
     if (!isControlled) fetchProducts();
@@ -4607,7 +4617,7 @@ function AddToCart(rawProps) {
             "button",
             {
               type: "button",
-              className: "propeller-add-to-cart__submit flex-1 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              className: "propeller-add-to-cart__submit flex-1 min-w-0 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-3 sm:px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               onClick: () => handleAddToCart(),
               disabled: loading,
               children: [
@@ -4629,8 +4639,7 @@ function AddToCart(rawProps) {
                     ]
                   }
                 ),
-                loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "adding", "Adding...") }) : null,
-                !loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "add", "Add") }) : null
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-add-to-cart__submit-label min-w-0 truncate", children: loading ? propellerV2CoreUi.getLabel(props.labels, "adding", "Adding...") : propellerV2CoreUi.getLabel(props.labels, "add", "Add") })
               ]
             }
           )
@@ -8383,8 +8392,8 @@ function ClusterCardViewClusterLink(props) {
     {
       href: derived.clusterUrl,
       onClick: handleClusterClick,
-      className: props.className ?? "propeller-cluster-card__cta-link flex w-full items-center justify-center rounded-control bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-      children: props.label ?? derived.viewClusterLabel
+      className: props.className ?? "propeller-cluster-card__cta-link flex w-full min-w-0 items-center justify-center rounded-control bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cluster-card__cta-label min-w-0 truncate", children: props.label ?? derived.viewClusterLabel })
     }
   );
 }
@@ -9035,6 +9044,7 @@ function ProductGrid(rawProps) {
     brand: props.brand,
     orderlistIds: props.orderlistIds,
     applyOrderlists: props.applyOrderlists,
+    productTrackAttributes: props.productTrackAttributes,
     language: props.language,
     taxZone: props.taxZone,
     user: props.user,
@@ -18397,7 +18407,8 @@ function SearchBar(rawProps) {
     user: props.user,
     companyId: props.companyId,
     orderlistIds: props.orderlistIds,
-    applyOrderlists: props.applyOrderlists
+    applyOrderlists: props.applyOrderlists,
+    productTrackAttributes: props.productTrackAttributes
   });
   const results = searchResults.slice(0, maxResults).map((item) => mapToSearchBarResult(item, props.language));
   const itemsFound = searchItemsFound;