@lime-bundles/react 7.0.0 → 7.2.0

package/dist/index.d.cts

@@ -51,6 +51,14 @@ interface BundleComponentProps {
      * `marketIds` doesn't include this market.
      */
     marketId?: string;
+    /**
+     * The product page this component is rendered on — full GID
+     * (`gid://shopify/Product/123`) or bare numeric id. Multi-product
+     * renderers (`<VolumeBundle>`) price and sell this product; without it
+     * they fall back to the bundle's first product, so any bundle spanning
+     * more than one product should pass it.
+     */
+    productId?: string;
 }
 
 declare function FixedBundle(props: BundleComponentProps): react_jsx_runtime.JSX.Element | null;

package/dist/index.d.ts

@@ -51,6 +51,14 @@ interface BundleComponentProps {
      * `marketIds` doesn't include this market.
      */
     marketId?: string;
+    /**
+     * The product page this component is rendered on — full GID
+     * (`gid://shopify/Product/123`) or bare numeric id. Multi-product
+     * renderers (`<VolumeBundle>`) price and sell this product; without it
+     * they fall back to the bundle's first product, so any bundle spanning
+     * more than one product should pass it.
+     */
+    productId?: string;
 }
 
 declare function FixedBundle(props: BundleComponentProps): react_jsx_runtime.JSX.Element | null;

package/dist/index.js

@@ -961,7 +961,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             src: thumbImage.url,
             alt: thumbImage.altText ?? product.title,
             className: "lb-bundle__product-image",
-            loading: "lazy"
+            loading: "lazy",
+            width: thumbImage.width ?? void 0,
+            height: thumbImage.height ?? void 0
           }
         ),
         /* @__PURE__ */ jsxs3("div", { className: "lb-bundle__product-info", children: [
@@ -1584,7 +1586,9 @@ function MixMatchPickerRow({
             {
               src: thumbImage.url,
               alt: thumbImage.altText ?? product.title,
-              loading: "lazy"
+              loading: "lazy",
+              width: thumbImage.width ?? void 0,
+              height: thumbImage.height ?? void 0
             }
           ),
           variantInBundle && /* @__PURE__ */ jsx4("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
@@ -2309,6 +2313,7 @@ import {
   resolveDefaultTierIndex,
   resolvePopularTierIndex,
   isVariantFulfillable as isVariantFulfillable4,
+  resolveContextProduct,
   shouldShowLowStockBadge as shouldShowLowStockBadge2
 } from "@lime-bundles/core";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -2321,7 +2326,8 @@ function VolumeBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productId
   } = props;
   const result = useBundleData({
     shopDomain,
@@ -2371,7 +2377,7 @@ function VolumeBundle(props) {
       );
     }
   }, [result, onError]);
-  const product = bundle?.products[0];
+  const product = bundle ? resolveContextProduct(bundle.products, { productId }) : void 0;
   const variants = useMemo7(() => product?.variants.nodes ?? [], [product]);
   const optionNames = useMemo7(() => {
     const first = variants[0];
@@ -2504,7 +2510,9 @@ function VolumeBundle(props) {
               src: thumbImage.url,
               alt: thumbImage.altText ?? product.title,
               className: "lb-bundle__product-image",
-              loading: "lazy"
+              loading: "lazy",
+              width: thumbImage.width ?? void 0,
+              height: thumbImage.height ?? void 0
             }
           ),
           /* @__PURE__ */ jsxs6("div", { className: "lb-bundle__product-info", children: [
@@ -2952,7 +2960,9 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         src: thumbImage.url,
         alt: thumbImage.altText ?? product.title,
         className: "lb-bundle__product-image",
-        loading: "lazy"
+        loading: "lazy",
+        width: thumbImage.width ?? void 0,
+        height: thumbImage.height ?? void 0
       }
     ),
     /* @__PURE__ */ jsxs7("div", { className: "lb-bundle__product-info", children: [
@@ -3004,14 +3014,13 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
 }
 
 // src/components/MultiStepBundle.tsx
-import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo10, useState as useState12 } from "react";
+import { Fragment, useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo10, useState as useState12 } from "react";
 import {
   formatMoney as formatMoney7,
   formatUnitPrice as formatUnitPrice7,
   calculateDiscount as calculateDiscount3,
   isVariantFulfillable as isVariantFulfillable7,
   productsForStep as productsForStep2,
-  stepHeadroom as stepHeadroom2,
   DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE4
 } from "@lime-bundles/core";
 
@@ -3525,7 +3534,9 @@ function MultiStepPickerRow({
             {
               src: thumbImage.url,
               alt: thumbImage.altText ?? product.title,
-              loading: "lazy"
+              loading: "lazy",
+              width: thumbImage.width ?? void 0,
+              height: thumbImage.height ?? void 0
             }
           ),
           variantInStep && /* @__PURE__ */ jsx8("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
@@ -3819,6 +3830,9 @@ function MultiStepBundle(props) {
   const allSatisfied = steps.length > 0 && steps.every((_, i) => stepSatisfied(i));
   const valid = !!bundle && allSatisfied;
   const completedSteps = steps.filter((_, i) => stepSatisfied(i)).length;
+  const firstUnsatisfied = steps.findIndex((_, i) => !stepSatisfied(i));
+  const remainingSteps = steps.length - completedSteps;
+  const anyPicks = selections.some((s) => s.length > 0);
   const summary = useMemo10(() => {
     let comparePrice = 0;
     let salePrice = 0;
@@ -4061,115 +4075,156 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs9(
-          "section",
-          {
-            className: "lb-multi-step__group",
-            "data-step-group": i,
-            children: [
-              /* @__PURE__ */ jsxs9("div", { className: "lb-multi-step__group-heading", children: [
-                /* @__PURE__ */ jsx9("span", { className: "lb-multi-step__group-name", children: step.name }),
+        /* @__PURE__ */ jsx9("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ jsxs9(Fragment, { children: [
+          i === firstUnsatisfied && /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "lb-mix-match__add-product lb-multi-step__door",
+              "data-step-door": firstUnsatisfied,
+              "aria-label": `${anyPicks ? "Continue building" : "Choose your products"}: ${step.name}`,
+              onClick: () => setPickerOpenAt(firstUnsatisfied),
+              children: [
                 /* @__PURE__ */ jsx9(
                   "span",
                   {
-                    className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
-                    "data-step-count": i,
-                    children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                    className: "lb-mix-match__add-product-icon",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx9(PlusIcon2, {})
                   }
-                )
-              ] }),
-              /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
-                  "data-step-slots": i,
-                  children: (selections[i] ?? []).map((item, index) => (
-                    /* Whole card reopens the wizard AT this step. The inner
-                       title button provides the keyboard/AT path (its
-                       activation bubbles here); × stops propagation. */
-                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-                    /* @__PURE__ */ jsxs9(
-                      "div",
-                      {
-                        className: "lb-mix-match__slot lb-mix-match__slot--filled",
-                        onClick: () => setPickerOpenAt(i),
-                        children: [
-                          item.featuredImage && /* @__PURE__ */ jsx9("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx9(
-                            "img",
-                            {
-                              src: item.featuredImage,
-                              alt: item.title,
-                              loading: "lazy"
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__filled-info", children: [
-                            /* @__PURE__ */ jsx9(
-                              "button",
-                              {
-                                type: "button",
-                                className: "lb-mix-match__filled-title",
-                                "aria-label": `Edit selection: ${item.title}`,
-                                children: item.title
-                              }
-                            ),
-                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                            /* @__PURE__ */ jsxs9("span", { className: "lb-mix-match__filled-price", children: [
-                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx9("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
-                              /* @__PURE__ */ jsx9("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
-                            ] }),
-                            item.unitPrice && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
-                          ] }),
-                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx9(
-                            "button",
-                            {
-                              type: "button",
-                              className: "lb-mix-match__slot-remove",
-                              "aria-label": `Remove ${item.title}`,
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                removeSlot(i, index);
-                              },
-                              children: /* @__PURE__ */ jsx9(CloseIcon4, {})
-                            }
-                          ) : (
-                            /* Required pick at its floor — quiet state chip instead
-                               of the ×; removal returns once another slot covers
-                               the product's minimum (variant swap flow). */
-                            /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__slot-required", children: "Required" })
-                          )
-                        ]
-                      },
-                      `${item.productId}:${item.variantId}:${index}`
-                    )
-                  ))
-                }
-              ),
-              stepHeadroom2(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ jsxs9(
+                ),
+                /* @__PURE__ */ jsxs9("span", { className: "lb-multi-step__door-copy", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__add-product-label", children: anyPicks ? "Continue building" : "Choose your products" }),
+                  /* @__PURE__ */ jsx9("span", { className: "lb-multi-step__door-sub", children: anyPicks ? `${remainingSteps} ${remainingSteps === 1 ? "step" : "steps"} to go` : `${steps.length} quick ${steps.length === 1 ? "step" : "steps"}` })
+                ] })
+              ]
+            }
+          ),
+          (selections[i] ?? []).length === 0 ? /* @__PURE__ */ jsx9(
+            "section",
+            {
+              className: "lb-multi-step__group",
+              "data-step-group": i,
+              "data-step-mode": "row",
+              children: /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   type: "button",
-                  className: "lb-mix-match__add-product lb-multi-step__step-trigger",
-                  "data-step-trigger": i,
+                  className: "lb-multi-step__step-row",
+                  "data-step-row": i,
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
                     /* @__PURE__ */ jsx9(
                       "span",
                       {
-                        className: "lb-mix-match__add-product-icon",
+                        className: "lb-multi-step__step-ix",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx9(PlusIcon2, {})
+                        children: i + 1
                       }
                     ),
-                    /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                    /* @__PURE__ */ jsx9("span", { className: "lb-multi-step__group-name", children: step.name }),
+                    /* @__PURE__ */ jsx9(
+                      "span",
+                      {
+                        className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
+                        "data-step-count": i,
+                        children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                      }
+                    )
                   ]
                 }
               )
-            ]
-          },
-          i
-        )) }),
+            }
+          ) : /* @__PURE__ */ jsxs9(
+            "section",
+            {
+              className: "lb-multi-step__group",
+              "data-step-group": i,
+              "data-step-mode": "open",
+              children: [
+                /* @__PURE__ */ jsxs9("div", { className: "lb-multi-step__group-heading", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "lb-multi-step__group-name", children: step.name }),
+                  /* @__PURE__ */ jsx9(
+                    "span",
+                    {
+                      className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
+                      "data-step-count": i,
+                      children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx9(
+                  "div",
+                  {
+                    className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
+                    "data-step-slots": i,
+                    children: (selections[i] ?? []).map((item, index) => (
+                      /* Whole card reopens the wizard AT this step. The inner
+                         title button provides the keyboard/AT path (its
+                         activation bubbles here); × stops propagation. */
+                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
+                      /* @__PURE__ */ jsxs9(
+                        "div",
+                        {
+                          className: "lb-mix-match__slot lb-mix-match__slot--filled",
+                          onClick: () => setPickerOpenAt(i),
+                          children: [
+                            item.featuredImage && /* @__PURE__ */ jsx9("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ jsx9(
+                              "img",
+                              {
+                                src: item.featuredImage,
+                                alt: item.title,
+                                loading: "lazy"
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxs9("div", { className: "lb-mix-match__filled-info", children: [
+                              /* @__PURE__ */ jsx9(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "lb-mix-match__filled-title",
+                                  "aria-label": `Edit selection: ${item.title}`,
+                                  children: item.title
+                                }
+                              ),
+                              item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                              /* @__PURE__ */ jsxs9("span", { className: "lb-mix-match__filled-price", children: [
+                                item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx9("s", { className: "lb-mix-match__filled-compare", children: formatMoney7(item.compareAtPrice, currency) }),
+                                /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-price", children: formatMoney7(item.price, currency) }),
+                                /* @__PURE__ */ jsx9("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                              ] }),
+                              item.unitPrice && /* @__PURE__ */ jsx9("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                            ] }),
+                            canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ jsx9(
+                              "button",
+                              {
+                                type: "button",
+                                className: "lb-mix-match__slot-remove",
+                                "aria-label": `Remove ${item.title}`,
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  removeSlot(i, index);
+                                },
+                                children: /* @__PURE__ */ jsx9(CloseIcon4, {})
+                              }
+                            ) : (
+                              /* Required pick at its floor — quiet state chip instead
+                                 of the ×; removal returns once another slot covers
+                                 the product's minimum (variant swap flow). */
+                              /* @__PURE__ */ jsx9("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                            )
+                          ]
+                        },
+                        `${item.productId}:${item.variantId}:${index}`
+                      )
+                    ))
+                  }
+                )
+              ]
+            }
+          )
+        ] }, i)) }),
         /* @__PURE__ */ jsx9("div", { className: "lb-bundle-divider" }),
         allSatisfied && /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
           /* @__PURE__ */ jsxs9("div", { className: "lb-bundle-summary__text", children: [
@@ -4348,7 +4403,7 @@ import {
   calculateTierSavings as calculateTierSavings2,
   getActiveTier as getActiveTier2,
   productsForStep as productsForStep3,
-  stepHeadroom as stepHeadroom3,
+  stepHeadroom as stepHeadroom2,
   validateQuantity,
   transformImageUrl,
   formatCountdown,
@@ -4409,7 +4464,7 @@ export {
   reportAddToCart2 as reportAddToCart,
   reportImpression2 as reportImpression,
   sanitizeCustomCss,
-  stepHeadroom3 as stepHeadroom,
+  stepHeadroom2 as stepHeadroom,
   thumbnailRatioVars,
   transformImageUrl,
   useAnalytics,