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

package/dist/index.d.cts

@@ -1383,6 +1383,12 @@ interface UseProductSearchOptions {
      * without a contract still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']`. Unset returns the
+     * first page of ALL attributes (12 per product), so products with more than
+     * 12 silently lose the rest — name what you render.
+     */
+    productTrackAttributes?: string[];
     /** Attribute text filters applied to the category search. */
     textFilters?: ProductTextFilterInput[];
     /** Lower price bound filter. */
@@ -6146,6 +6152,13 @@ interface ProductGridProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']` — makes
+     * `product.attributes` usable in card slots like `belowName`. Unset returns
+     * the first page of ALL attributes (12 per product), so products with more
+     * than 12 silently lose the rest.
+     */
+    productTrackAttributes?: string[];
     /** Number of columns in the grid. Accepts 2, 3, 4, 5, or 6. Defaults to 3. */
     columns?: number;
     /**
@@ -7300,6 +7313,8 @@ interface SearchBarProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /** Attribute names to request per product, e.g. `['MPN']`. See ProductGrid. */
+    productTrackAttributes?: string[];
     /**
      * Bump this counter to clear the search input from outside (e.g. on route
      * change). Each unique value triggers a one-time reset of the local term.

package/dist/index.d.ts

@@ -1383,6 +1383,12 @@ interface UseProductSearchOptions {
      * without a contract still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']`. Unset returns the
+     * first page of ALL attributes (12 per product), so products with more than
+     * 12 silently lose the rest — name what you render.
+     */
+    productTrackAttributes?: string[];
     /** Attribute text filters applied to the category search. */
     textFilters?: ProductTextFilterInput[];
     /** Lower price bound filter. */
@@ -6146,6 +6152,13 @@ interface ProductGridProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']` — makes
+     * `product.attributes` usable in card slots like `belowName`. Unset returns
+     * the first page of ALL attributes (12 per product), so products with more
+     * than 12 silently lose the rest.
+     */
+    productTrackAttributes?: string[];
     /** Number of columns in the grid. Accepts 2, 3, 4, 5, or 6. Defaults to 3. */
     columns?: number;
     /**
@@ -7300,6 +7313,8 @@ interface SearchBarProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /** Attribute names to request per product, e.g. `['MPN']`. See ProductGrid. */
+    productTrackAttributes?: string[];
     /**
      * Bump this counter to clear the search input from outside (e.g. on route
      * change). Each unique value triggers a one-time reset of the local term.

package/dist/index.js

@@ -2070,7 +2070,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 } };
@@ -2093,7 +2093,7 @@ function useProductInfo(options) {
         orderlistIds = (orderlists?.items ?? []).map((ol) => ol.id);
       }
       const service = createServices(graphqlClient).product;
-      const attributeInput = buildAttributeInput();
+      const attributeInput = buildAttributeInput2();
       const variables = {
         productId,
         language,
@@ -2183,6 +2183,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;
@@ -2315,6 +2319,7 @@ function useProductSearch(options) {
       const filterAvailableAttributeInput = {
         isSearchable: true
       };
+      const attributeInput = buildAttributeInput(options.productTrackAttributes);
       const variables = {
         categoryId: catId,
         language: lang,
@@ -2322,7 +2327,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;
@@ -2383,7 +2389,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 = useCallback(
     (term) => {
@@ -2462,13 +2470,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;
@@ -2487,7 +2497,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 ?? [])]
   );
   useEffect(() => {
     if (!isControlled) fetchProducts();
@@ -9014,6 +9024,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,
@@ -18376,7 +18387,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;