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

package/dist/index.d.cts

@@ -219,6 +219,13 @@ interface ProductGridConfig {
     clusterCardComponent?: ComponentType<{
         cluster: Cluster;
     } & Record<string, unknown>>;
+    /**
+     * Render arbitrary content directly below each card's product name. Receives
+     * the product; return `null`/`undefined` to render nothing. Lets hosts surface
+     * extra per-product info (e.g. package descriptions) across the whole grid
+     * without swapping the entire card.
+     */
+    belowName?: (product: Product) => ReactNode;
 }
 /**
  * Provider — ProductGrid wraps its card subtree with this so descendant
@@ -5193,6 +5200,14 @@ interface ProductCardProps {
     badgesComponent?: React$1.ComponentType<_propeller_commerce_propeller_v2_core_ui.BadgesComponentProps>;
     /** Replaces the default favorite-toggle. Receives `FavoriteComponentProps`. */
     favoriteComponent?: React$1.ComponentType<_propeller_commerce_propeller_v2_core_ui.FavoriteComponentProps>;
+    /**
+     * Render arbitrary content directly below the product name (and above the
+     * short description / price), in both the grid and row layouts. Receives the
+     * product so hosts can surface extra info — e.g. package descriptions, custom
+     * badges — without forking the card. Return `null`/`undefined` to render
+     * nothing for a given product.
+     */
+    belowName?: (product: Product) => React$1.ReactNode;
 }
 /**
  * Root of the `<ProductCard>` compound component. Renders either the
@@ -5270,6 +5285,10 @@ declare function ProductCardStock(props: {
     /** Show only the availability indicator. Defaults to context `showAvailability`. */
     showAvailability?: boolean;
 }): React$1.JSX.Element | null;
+/** Renders host-supplied content directly below the name, via the `belowName`
+ *  render prop (explicit or from grid context). Renders nothing when unset or
+ *  when the render prop returns a nullish value. */
+declare function ProductCardBelowName(): React$1.JSX.Element | null;
 /** Renders the product price via the embedded `ProductPrice` component, or
  *  the injected `priceComponent` from context when set. */
 declare function ProductCardPrice(props: {
@@ -5317,6 +5336,7 @@ type ProductCardComponent = typeof MemoizedRoot & {
     Favorite: typeof ProductCardFavorite;
     Name: typeof ProductCardName;
     Sku: typeof ProductCardSku;
+    BelowName: typeof ProductCardBelowName;
     ShortDescription: typeof ProductCardShortDescription;
     Manufacturer: typeof ProductCardManufacturer;
     TextLabels: typeof ProductCardTextLabels;
@@ -5583,6 +5603,14 @@ interface ProductGridProps {
     favoriteComponent?: React$1.ComponentType<_propeller_commerce_propeller_v2_core_ui.FavoriteComponentProps>;
     productCardComponent?: React$1.ComponentType<ProductCardProps>;
     clusterCardComponent?: React$1.ComponentType<ClusterCardProps>;
+    /**
+     * Render arbitrary content directly below each card's product name (and above
+     * the short description / price). Receives the product; return `null` to
+     * render nothing. Cascades to every ProductCard via ProductGridConfig — lets
+     * hosts surface extra per-product info (e.g. package descriptions) without
+     * swapping the whole card.
+     */
+    belowName?: (product: Product) => React$1.ReactNode;
     beforeItem?: (item: Product | Cluster, index: number) => React$1.ReactNode;
     afterItem?: (item: Product | Cluster, index: number) => React$1.ReactNode;
 }
@@ -6049,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;
 }
@@ -6152,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

@@ -219,6 +219,13 @@ interface ProductGridConfig {
     clusterCardComponent?: ComponentType<{
         cluster: Cluster;
     } & Record<string, unknown>>;
+    /**
+     * Render arbitrary content directly below each card's product name. Receives
+     * the product; return `null`/`undefined` to render nothing. Lets hosts surface
+     * extra per-product info (e.g. package descriptions) across the whole grid
+     * without swapping the entire card.
+     */
+    belowName?: (product: Product) => ReactNode;
 }
 /**
  * Provider — ProductGrid wraps its card subtree with this so descendant
@@ -5193,6 +5200,14 @@ interface ProductCardProps {
     badgesComponent?: React$1.ComponentType<_propeller_commerce_propeller_v2_core_ui.BadgesComponentProps>;
     /** Replaces the default favorite-toggle. Receives `FavoriteComponentProps`. */
     favoriteComponent?: React$1.ComponentType<_propeller_commerce_propeller_v2_core_ui.FavoriteComponentProps>;
+    /**
+     * Render arbitrary content directly below the product name (and above the
+     * short description / price), in both the grid and row layouts. Receives the
+     * product so hosts can surface extra info — e.g. package descriptions, custom
+     * badges — without forking the card. Return `null`/`undefined` to render
+     * nothing for a given product.
+     */
+    belowName?: (product: Product) => React$1.ReactNode;
 }
 /**
  * Root of the `<ProductCard>` compound component. Renders either the
@@ -5270,6 +5285,10 @@ declare function ProductCardStock(props: {
     /** Show only the availability indicator. Defaults to context `showAvailability`. */
     showAvailability?: boolean;
 }): React$1.JSX.Element | null;
+/** Renders host-supplied content directly below the name, via the `belowName`
+ *  render prop (explicit or from grid context). Renders nothing when unset or
+ *  when the render prop returns a nullish value. */
+declare function ProductCardBelowName(): React$1.JSX.Element | null;
 /** Renders the product price via the embedded `ProductPrice` component, or
  *  the injected `priceComponent` from context when set. */
 declare function ProductCardPrice(props: {
@@ -5317,6 +5336,7 @@ type ProductCardComponent = typeof MemoizedRoot & {
     Favorite: typeof ProductCardFavorite;
     Name: typeof ProductCardName;
     Sku: typeof ProductCardSku;
+    BelowName: typeof ProductCardBelowName;
     ShortDescription: typeof ProductCardShortDescription;
     Manufacturer: typeof ProductCardManufacturer;
     TextLabels: typeof ProductCardTextLabels;
@@ -5583,6 +5603,14 @@ interface ProductGridProps {
     favoriteComponent?: React$1.ComponentType<_propeller_commerce_propeller_v2_core_ui.FavoriteComponentProps>;
     productCardComponent?: React$1.ComponentType<ProductCardProps>;
     clusterCardComponent?: React$1.ComponentType<ClusterCardProps>;
+    /**
+     * Render arbitrary content directly below each card's product name (and above
+     * the short description / price). Receives the product; return `null` to
+     * render nothing. Cascades to every ProductCard via ProductGridConfig — lets
+     * hosts surface extra per-product info (e.g. package descriptions) without
+     * swapping the whole card.
+     */
+    belowName?: (product: Product) => React$1.ReactNode;
     beforeItem?: (item: Product | Cluster, index: number) => React$1.ReactNode;
     afterItem?: (item: Product | Cluster, index: number) => React$1.ReactNode;
 }
@@ -6049,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;
 }
@@ -6152,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

@@ -13302,7 +13302,8 @@ var RESOLVE_SPEC2 = {
   addToCartComponent: { grid: "addToCartComponent" },
   imageComponent: { grid: "imageComponent" },
   badgesComponent: { grid: "badgesComponent" },
-  favoriteComponent: { grid: "favoriteComponent" }
+  favoriteComponent: { grid: "favoriteComponent" },
+  belowName: { grid: "belowName" }
 };
 var ProductCardContext = createContext(null);
 function useProductCard() {
@@ -13383,6 +13384,7 @@ function ProductCardRoot(rawProps) {
           /* @__PURE__ */ jsx("div", { className: "propeller-product-card__body flex flex-1 flex-row items-center gap-4 px-4 py-2 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsx(ProductCardName, { linkable: true }) : null,
+            /* @__PURE__ */ jsx(ProductCardBelowName, {}),
             textLabelValues.length > 0 ? /* @__PURE__ */ jsx(ProductCardTextLabels, {}) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsx(ProductCardShortDescription, {}) : null
@@ -13398,6 +13400,7 @@ function ProductCardRoot(rawProps) {
           /* @__PURE__ */ jsxs("div", { className: "propeller-product-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsx(ProductCardName, { linkable: true }) : null,
+            /* @__PURE__ */ jsx(ProductCardBelowName, {}),
             textLabelValues.length > 0 ? /* @__PURE__ */ jsx(ProductCardTextLabels, {}) : null,
             props.showStock && !!product.inventory ? /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(ProductCardStock, {}) }) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsx(ProductCardManufacturer, {}) : null,
@@ -13580,6 +13583,13 @@ function ProductCardStock(props) {
     }
   );
 }
+function ProductCardBelowName() {
+  const { product, resolved } = useProductCard();
+  if (!resolved.belowName) return null;
+  const content = resolved.belowName(product);
+  if (content == null || content === false) return null;
+  return /* @__PURE__ */ jsx("div", { className: "propeller-product-card__below-name", children: content });
+}
 function ProductCardPrice(props) {
   const { product, derived, resolved } = useProductCard();
   if (!product?.price) return null;
@@ -13658,6 +13668,7 @@ ProductCard.Badges = ProductCardBadges;
 ProductCard.Favorite = ProductCardFavorite;
 ProductCard.Name = ProductCardName;
 ProductCard.Sku = ProductCardSku;
+ProductCard.BelowName = ProductCardBelowName;
 ProductCard.ShortDescription = ProductCardShortDescription;
 ProductCard.Manufacturer = ProductCardManufacturer;
 ProductCard.TextLabels = ProductCardTextLabels;
@@ -14040,7 +14051,8 @@ function ProductGrid(rawProps) {
     badgesComponent: props.badgesComponent,
     favoriteComponent: props.favoriteComponent,
     productCardComponent: props.productCardComponent,
-    clusterCardComponent: props.clusterCardComponent
+    clusterCardComponent: props.clusterCardComponent,
+    belowName: props.belowName
   };
   if (rawProps.children !== void 0) {
     const compoundCtx = {
@@ -15083,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 || ""}`,
@@ -15092,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 });
@@ -15320,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(