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

package/CHANGELOG.md

@@ -8,6 +8,20 @@ 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.4.18] - 2026-07-10
+
+### Added
+
+- `ProductSpecifications`: new `beforeSpecs?` / `afterSpecs?` render-prop slots.
+  Each receives `{ layout: 'table' | 'list' }` and returns arbitrary content
+  injected at the start / end of the specifications — inside `<tbody>` for the
+  table layout (return a `<tr>`, e.g. a labelled "Unit of measure" row) or in
+  the list stack for the list layout (return a block). In grouped mode they
+  render once, above the first group / below the last. General replacement for
+  hardcoding extra rows; the existing `packageDescription` prop is unchanged.
+- `ProductTabs`: `specificationsBeforeSpecs?` / `specificationsAfterSpecs?`
+  passthrough props that forward to the specifications section's new slots.
+
 ## [0.4.17] - 2026-07-09
 
 ### Added

package/dist/index.cjs

@@ -15115,7 +15115,11 @@ function ProductSpecifications(rawProps) {
     if (!props.productId || !props.graphqlClient) return;
     fetchSpecs(props.productId);
   }, [props.productId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !loading && (hasPublicAttributes() || props.packageDescription) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !loading && (hasPublicAttributes() || props.packageDescription || hasSlotContent) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `propeller-product-specifications ${props.className || ""}`,
@@ -15124,26 +15128,38 @@ function ProductSpecifications(rawProps) {
       children: [
         props.packageDescription ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-product-specifications__package-description mb-4 text-sm text-muted-foreground", children: props.packageDescription }) : null,
         !props.grouping ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          props.layout !== "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) }) }) : null,
-          props.layout === "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) : null
+          props.layout !== "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: "divide-y divide-border", children: [
+            before,
+            getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
+            ] }, i)),
+            after
+          ] }) }) }) : null,
+          props.layout === "list" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            before,
+            getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
+            ] }, i)),
+            after
+          ] }) : null
         ] }) : null,
-        !!props.grouping ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: getGroups()?.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
-          !!group ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: group }) : null,
-          props.layout !== "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) }) }) : null,
-          props.layout === "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
-          ] }, i)) }) : null
-        ] }, group)) }) : null
+        !!props.grouping ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          before ? layoutMode === "table" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: before }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 space-y-3", children: before }) : null,
+          getGroups()?.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+            !!group ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: group }) : null,
+            props.layout !== "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 text-muted-foreground", children: getAttributeValue(attr) })
+            ] }, i)) }) }) }) : null,
+            props.layout === "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: getAttributesByGroup(group)?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: getAttributeLabel(attr) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: getAttributeValue(attr) })
+            ] }, i)) }) : null
+          ] }, group)),
+          after ? layoutMode === "table" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: after }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: after }) : null
+        ] }) : null
       ]
     }
   ) }) : null });
@@ -15352,7 +15368,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__ */ jsxRuntime.jsx(