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

package/CHANGELOG.md

@@ -8,6 +8,30 @@ 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

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();
@@ -9034,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,
@@ -18396,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;