@propeller-commerce/propeller-v2-react-ui 0.4.17 → 0.4.19

package/dist/index.d.cts

@@ -6077,6 +6077,27 @@ interface ProductSpecificationsProps {
      * rendered above the attribute table. Omitted when empty.
      */
     packageDescription?: string;
+    /**
+     * Render arbitrary content at the START of the specifications, before the
+     * fetched attribute rows. Receives the active `layout` so the consumer can
+     * return markup that fits the container:
+     *  - `'table'` → return one or more `<tr>` (injected inside `<tbody>`), e.g.
+     *    a labelled "Unit of measure" row.
+     *  - `'list'`  → return block element(s) (injected inside the list stack).
+     * In grouped mode it renders once, above the first group. Return
+     * `null`/`undefined` to render nothing.
+     */
+    beforeSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
+    /**
+     * Render arbitrary content at the END of the specifications, after the
+     * fetched attribute rows. Same `layout` contract as {@link beforeSpecs}.
+     * In grouped mode it renders once, below the last group.
+     */
+    afterSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
     /** Extra CSS class applied to the root element. */
     className?: string;
 }
@@ -6180,6 +6201,22 @@ interface ProductTabsProps {
      * ProductSpecifications.
      */
     specificationsPackageDescription?: string;
+    /**
+     * Render arbitrary content at the start of the specifications section (before
+     * the attribute rows) — e.g. a labelled "Unit of measure" row. Passed as
+     * `beforeSpecs` to ProductSpecifications; receives the active `layout` so the
+     * consumer can return a `<tr>` (table) or block (list).
+     */
+    specificationsBeforeSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
+    /**
+     * Render arbitrary content at the end of the specifications section (after the
+     * attribute rows). Passed as `afterSpecs` to ProductSpecifications.
+     */
+    specificationsAfterSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
     /**
      * Override UI strings for the Downloads section.
      * Available keys: title, download

package/dist/index.d.ts

@@ -6077,6 +6077,27 @@ interface ProductSpecificationsProps {
      * rendered above the attribute table. Omitted when empty.
      */
     packageDescription?: string;
+    /**
+     * Render arbitrary content at the START of the specifications, before the
+     * fetched attribute rows. Receives the active `layout` so the consumer can
+     * return markup that fits the container:
+     *  - `'table'` → return one or more `<tr>` (injected inside `<tbody>`), e.g.
+     *    a labelled "Unit of measure" row.
+     *  - `'list'`  → return block element(s) (injected inside the list stack).
+     * In grouped mode it renders once, above the first group. Return
+     * `null`/`undefined` to render nothing.
+     */
+    beforeSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
+    /**
+     * Render arbitrary content at the END of the specifications, after the
+     * fetched attribute rows. Same `layout` contract as {@link beforeSpecs}.
+     * In grouped mode it renders once, below the last group.
+     */
+    afterSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
     /** Extra CSS class applied to the root element. */
     className?: string;
 }
@@ -6180,6 +6201,22 @@ interface ProductTabsProps {
      * ProductSpecifications.
      */
     specificationsPackageDescription?: string;
+    /**
+     * Render arbitrary content at the start of the specifications section (before
+     * the attribute rows) — e.g. a labelled "Unit of measure" row. Passed as
+     * `beforeSpecs` to ProductSpecifications; receives the active `layout` so the
+     * consumer can return a `<tr>` (table) or block (list).
+     */
+    specificationsBeforeSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
+    /**
+     * Render arbitrary content at the end of the specifications section (after the
+     * attribute rows). Passed as `afterSpecs` to ProductSpecifications.
+     */
+    specificationsAfterSpecs?: (ctx: {
+        layout: 'table' | 'list';
+    }) => React$1.ReactNode;
     /**
      * Override UI strings for the Downloads section.
      * Available keys: title, download

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { getLabel, formatPrice, getClusterSku, getClusterImageUrl, getProductSku, getProductImageUrl, createServices, err, ok, getLocalizedValue, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, isContentHidden, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, getLanguageString, collectAttributeValues, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
+import { getLabel, getLocalizedValue, formatPrice, getClusterSku, getClusterImageUrl, getProductSku, getProductImageUrl, createServices, err, ok, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, isContentHidden, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, getLanguageString, collectAttributeValues, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React6 from 'react';
 import { createContext, useState, useRef, useMemo, useCallback, useContext, useEffect } from 'react';
@@ -3934,7 +3934,7 @@ function AddToCart(rawProps) {
   }
   function getModalName() {
     if (addedCartItem) {
-      return addedCartItem.product?.names?.[0]?.value || getLocalizedValue(props.product?.names, props.language, "Product");
+      return getLocalizedValue(addedCartItem.product?.names, props.language, "") || getLocalizedValue(props.product?.names, props.language, "Product");
     }
     return getLocalizedValue(props.product?.names, props.language, "Product");
   }
@@ -4287,7 +4287,7 @@ function AddToCart(rawProps) {
                 {
                   className: "propeller-add-to-cart__modal-child flex justify-between items-center text-xs text-muted-foreground",
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: child.product?.names?.[0]?.value || "Option" }),
+                    /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: getLocalizedValue(child.product?.names, props.language, "Option") }),
                     /* @__PURE__ */ jsx("span", { className: "text-foreground-subtle whitespace-nowrap ml-2", children: formatPrice(
                       ((props.includeTax !== void 0 ? !!props.includeTax : includeTax) ? child.totalSumNet : child.totalSum) ?? 0,
                       { symbol: props.currency ?? "\u20AC" }
@@ -6040,7 +6040,7 @@ function CartItem(rawProps) {
   const minQuantity = getMinQuantity(props.cartItem.product);
   const step = getStep(props.cartItem.product);
   function getProductName5() {
-    return props.cartItem.product?.names?.[0]?.value || "Product";
+    return getLocalizedValue(props.cartItem.product?.names, props.language, "Product");
   }
   function getProductUrl2() {
     if (props.configuration?.urls && props.cartItem.product) {
@@ -6091,7 +6091,7 @@ function CartItem(rawProps) {
     if (!items) return "";
     const leader = items.find((bi) => bi.isLeader === YesNo.Y);
     if (!leader) return "";
-    return leader.product.names?.[0]?.value || "Product";
+    return getLocalizedValue(leader.product.names, props.language, "Product");
   }
   function getBundleLeaderPrice() {
     const items = props.cartItem.bundle?.items;
@@ -6108,7 +6108,7 @@ function CartItem(rawProps) {
     return items.filter((bi) => bi.isLeader !== YesNo.Y);
   }
   function getBundleItemName(bundleItem) {
-    return bundleItem.product.names?.[0]?.value || "Product";
+    return getLocalizedValue(bundleItem.product.names, props.language, "Product");
   }
   function getBundleItemPrice(bundleItem) {
     const price = bundleItem.price?.net;
@@ -6117,7 +6117,7 @@ function CartItem(rawProps) {
   }
   function getCrossupsellName(item) {
     const product = item?.productTo || item?.clusterTo;
-    return product?.names?.[0]?.value || "Product";
+    return getLocalizedValue(product?.names, props.language, "Product");
   }
   function getCrossupsellImageUrl(item) {
     const product = item?.productTo || item?.clusterTo;
@@ -6442,7 +6442,7 @@ function CartItemChildItems(props = {}) {
   return /* @__PURE__ */ jsxs("div", { className: props.className ?? "propeller-cart-item__options mt-3 space-y-1.5 border-l-2 border-border pl-3", children: [
     /* @__PURE__ */ jsx("p", { className: "propeller-cart-item__options-label text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1", children: getLabel(resolved.labels, "includedOptions", "Included Options:") }),
     (cartItem.childItems || []).map((child, idx) => /* @__PURE__ */ jsxs("div", { className: "propeller-cart-item__option flex flex-wrap gap-x-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium", children: child.product.names?.[0]?.value || "Option" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: getLocalizedValue(child.product.names, resolved.language, "Option") }),
       /* @__PURE__ */ jsx("span", { className: "text-foreground-subtle hidden sm:inline", children: "-" }),
       /* @__PURE__ */ jsx("span", { className: "text-foreground-subtle text-xs self-center", children: child.product.sku }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 border-b border-dotted border-border mx-1 mb-1" }),
@@ -15095,7 +15095,11 @@ function ProductSpecifications(rawProps) {
     if (!props.productId || !props.graphqlClient) return;
     fetchSpecs(props.productId);
   }, [props.productId]);
-  return /* @__PURE__ */ jsx(Fragment, { children: !loading && (hasPublicAttributes() || props.packageDescription) ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+  const layoutMode = props.layout === "list" ? "list" : "table";
+  const before = props.beforeSpecs?.({ layout: layoutMode });
+  const after = props.afterSpecs?.({ layout: layoutMode });
+  const hasSlotContent = before != null || after != null;
+  return /* @__PURE__ */ jsx(Fragment, { children: !loading && (hasPublicAttributes() || props.packageDescription || hasSlotContent) ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `propeller-product-specifications ${props.className || ""}`,
@@ -15104,26 +15108,38 @@ function ProductSpecifications(rawProps) {
       children: [
         props.packageDescription ? /* @__PURE__ */ jsx("p", { className: "propeller-product-specifications__package-description mb-4 text-sm text-muted-foreground", children: props.packageDescription }) : null,
         !props.grouping ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          props.layout !== "list" ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) }) }) : null,
-          props.layout === "list" ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) : null
+          props.layout !== "list" ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxs("tbody", { className: "divide-y divide-border", children: [
+            before,
+            getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
+            ] }, i)),
+            after
+          ] }) }) }) : null,
+          props.layout === "list" ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            before,
+            getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
+            ] }, i)),
+            after
+          ] }) : null
         ] }) : null,
-        !!props.grouping ? /* @__PURE__ */ jsx(Fragment, { children: getGroups()?.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-          !!group ? /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: group }) : null,
-          props.layout !== "list" ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) }) }) : null,
-          props.layout === "list" ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) : null
-        ] }, group)) }) : null
+        !!props.grouping ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          before ? layoutMode === "table" ? /* @__PURE__ */ jsx("div", { className: "mb-6 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: before }) }) }) : /* @__PURE__ */ jsx("div", { className: "mb-6 space-y-3", children: before }) : null,
+          getGroups()?.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+            !!group ? /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: group }) : null,
+            props.layout !== "list" ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
+            ] }, i)) }) }) }) : null,
+            props.layout === "list" ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
+            ] }, i)) }) : null
+          ] }, group)),
+          after ? layoutMode === "table" ? /* @__PURE__ */ jsx("div", { className: "mb-6 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: after }) }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: after }) : null
+        ] }) : null
       ]
     }
   ) }) : null });
@@ -15332,7 +15348,9 @@ function ProductTabs(rawProps) {
                 language: props.language,
                 layout: props.specificationsLayout,
                 grouping: props.specificationsGrouping,
-                packageDescription: props.specificationsPackageDescription
+                packageDescription: props.specificationsPackageDescription,
+                beforeSpecs: props.specificationsBeforeSpecs,
+                afterSpecs: props.specificationsAfterSpecs
               }
             ) }) : null,
             isActive("downloads") && isTabVisible("downloads") ? /* @__PURE__ */ jsx(