@propeller-commerce/propeller-v2-react-ui 0.11.3 → 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();
@@ -4587,7 +4597,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: [
@@ -4609,8 +4619,7 @@ function AddToCart(rawProps) {
                     ]
                   }
                 ),
-                loading ? /* @__PURE__ */ jsx(Fragment, { children: getLabel(props.labels, "adding", "Adding...") }) : null,
-                !loading ? /* @__PURE__ */ jsx(Fragment, { children: getLabel(props.labels, "add", "Add") }) : null
+                /* @__PURE__ */ jsx("span", { className: "propeller-add-to-cart__submit-label min-w-0 truncate", children: loading ? getLabel(props.labels, "adding", "Adding...") : getLabel(props.labels, "add", "Add") })
               ]
             }
           )
@@ -8363,8 +8372,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__ */ jsx("span", { className: "propeller-cluster-card__cta-label min-w-0 truncate", children: props.label ?? derived.viewClusterLabel })
     }
   );
 }
@@ -9015,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,
@@ -18377,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;