@lime-bundles/react 2.5.0 → 4.0.0

package/dist/index.cjs

@@ -349,6 +349,20 @@ var { computePosition, emptyTypeAheadState, handleKey, pushTypeAheadChar } = imp
 var ITEM_HEIGHT_PX = 32;
 var LIST_PAD_Y = 8;
 var MAX_VISIBLE_ITEMS = 8;
+function findScrollableAncestor(el) {
+  const win = el.ownerDocument?.defaultView;
+  if (!win) return null;
+  let cur = el.parentElement;
+  while (cur && cur !== el.ownerDocument.body) {
+    const style = win.getComputedStyle(cur);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "hidden") {
+      return cur;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+}
 function VariantDropdown({
   options,
   value,
@@ -398,6 +412,11 @@ function VariantDropdown({
     if (rect.width === 0) return;
     const visibleCount = Math.min(options.length || 1, MAX_VISIBLE_ITEMS);
     const desiredHeight = visibleCount * ITEM_HEIGHT_PX + LIST_PAD_Y;
+    const scrollable = findScrollableAncestor(trigger);
+    const clip = scrollable ? (() => {
+      const r = scrollable.getBoundingClientRect();
+      return { top: r.top, bottom: r.bottom };
+    })() : void 0;
     setPosition(
       computePosition({
         trigger: {
@@ -407,7 +426,8 @@ function VariantDropdown({
           width: rect.width
         },
         viewportHeight: window.innerHeight,
-        desiredHeight
+        desiredHeight,
+        clip
       })
     );
   }, [isOpen, options.length]);
@@ -814,6 +834,9 @@ function FixedProductRow({ bundle, product, currency, onVariantChange }) {
 var import_react7 = require("react");
 var import_core9 = require("@lime-bundles/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function ruleFor(bundle, productId) {
+  return bundle.productRules[productId] ?? import_core9.DEFAULT_PRODUCT_RULE;
+}
 function MixMatchBundle(props) {
   const {
     shopDomain,
@@ -857,56 +880,92 @@ function MixMatchBundle(props) {
       );
     }
   }, [result, onError]);
-  const totalQuantity = Array.from(selections.values()).reduce(
-    (sum, s) => sum + s.quantity,
-    0
+  const showStepper = bundle?.widgetConfig.mixMatchShowQuantitySelector !== false;
+  const distinctSelectedProducts = (0, import_react7.useMemo)(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const sel of selections.values()) {
+      if (sel.quantity > 0) ids.add(sel.productId);
+    }
+    return ids;
+  }, [selections]);
+  const totalQuantity = (0, import_react7.useMemo)(
+    () => Array.from(selections.values()).reduce((sum, s) => sum + s.quantity, 0),
+    [selections]
   );
-  const validation = bundle ? (0, import_core9.validateQuantity)(totalQuantity, bundle.minQuantity, bundle.maxQuantity) : { valid: false, totalQuantity: 0, message: null };
-  const toggleProduct = (0, import_react7.useCallback)(
+  const requiredPicks = bundle?.minQuantity ?? 0;
+  const meetsMinPicks = distinctSelectedProducts.size >= requiredPicks;
+  const valid = !!bundle && meetsMinPicks;
+  const remaining = Math.max(0, requiredPicks - distinctSelectedProducts.size);
+  const validationMessage = valid ? null : remaining > 0 ? `Pick ${remaining} more product${remaining === 1 ? "" : "s"}` : null;
+  const selectVariant = (0, import_react7.useCallback)(
     (productId, variant) => {
+      if (!bundle) return;
+      const rule = ruleFor(bundle, productId);
+      const maxAddable = (0, import_core9.maxAddableQuantity)(variant, rule.max, 0);
+      if (maxAddable < rule.min) return;
       setSelections((prev) => {
         const next = new Map(prev);
-        const key = `${productId}:${variant.id}`;
-        if (next.has(key)) {
-          next.delete(key);
-        } else {
-          const configuredQty = bundle ? (0, import_core9.resolveBundleQty)(bundle, productId, variant.id) : 1;
-          next.set(key, {
-            productId,
-            variantId: variant.id,
-            quantity: configuredQty
-          });
-        }
+        next.set(`${productId}:${variant.id}`, {
+          productId,
+          variantId: variant.id,
+          quantity: rule.min
+        });
         return next;
       });
     },
     [bundle]
   );
-  const updateQuantity = (0, import_react7.useCallback)(
-    (productId, variantId, quantity) => {
+  const deselect = (0, import_react7.useCallback)((productId, variantId) => {
+    setSelections((prev) => {
+      if (!prev.has(`${productId}:${variantId}`)) return prev;
+      const next = new Map(prev);
+      next.delete(`${productId}:${variantId}`);
+      return next;
+    });
+  }, []);
+  const setQuantity = (0, import_react7.useCallback)(
+    (productId, variant, quantity) => {
+      if (!bundle) return;
+      const rule = ruleFor(bundle, productId);
+      const maxAddable = (0, import_core9.maxAddableQuantity)(variant, rule.max, 0);
+      const key = `${productId}:${variant.id}`;
       setSelections((prev) => {
         const next = new Map(prev);
-        const key = `${productId}:${variantId}`;
-        if (quantity <= 0) {
+        if (quantity < rule.min || maxAddable < rule.min) {
           next.delete(key);
-        } else {
-          next.set(key, { productId, variantId, quantity });
+          return next;
         }
+        const clamped = Math.min(quantity, maxAddable);
+        next.set(key, {
+          productId,
+          variantId: variant.id,
+          quantity: clamped
+        });
         return next;
       });
     },
-    []
+    [bundle]
   );
   const handleAddToCart = (0, import_react7.useCallback)(async () => {
-    if (!bundle || !validation.valid) return;
-    const lines = Array.from(selections.values()).map((s) => ({
-      merchandiseId: s.variantId,
-      quantity: s.quantity,
-      attributes: [
-        { key: "_lime_bundle_gid", value: bundle.id },
-        { key: "_lime_bundle_type", value: bundle.bundleType }
-      ]
-    }));
+    if (!bundle || !valid) return;
+    const byVariant = /* @__PURE__ */ new Map();
+    for (const sel of selections.values()) {
+      if (sel.quantity <= 0) continue;
+      byVariant.set(
+        sel.variantId,
+        (byVariant.get(sel.variantId) ?? 0) + sel.quantity
+      );
+    }
+    const lines = Array.from(byVariant.entries()).map(
+      ([variantId, quantity]) => ({
+        merchandiseId: variantId,
+        quantity,
+        attributes: [
+          { key: "_lime_bundle_gid", value: bundle.id },
+          { key: "_lime_bundle_type", value: bundle.bundleType }
+        ]
+      })
+    );
     setAddingToCart(true);
     setCartError(null);
     try {
@@ -932,15 +991,7 @@ function MixMatchBundle(props) {
     } finally {
       setAddingToCart(false);
     }
-  }, [
-    bundle,
-    selections,
-    validation.valid,
-    onAddToCart,
-    onError,
-    trackAddToCart,
-    totalQuantity
-  ]);
+  }, [bundle, selections, valid, onAddToCart, onError, trackAddToCart, totalQuantity]);
   if (result.status === "loading") {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `lb-bundle lb-bundle--loading ${className ?? ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-skeleton lb-skeleton--title" }),
@@ -963,27 +1014,29 @@ function MixMatchBundle(props) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "lb-bundle__title", children: bundle.title }),
         bundle.discountLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "lb-bundle__discount-badge", children: bundle.discountLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__instructions", children: bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : bundle.maxQuantity ? `Select up to ${bundle.maxQuantity} items` : "Select your items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__instructions", children: requiredPicks > 0 ? `Pick ${requiredPicks} product${requiredPicks === 1 ? "" : "s"}` : "Pick your products" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__products lb-bundle__products--selectable", children: bundle.products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           MixMatchProductRow,
           {
             bundle,
             product,
             currency,
+            showStepper,
             selections,
-            onToggle: toggleProduct,
-            onUpdateQuantity: updateQuantity
+            onSelect: selectVariant,
+            onDeselect: deselect,
+            onSetQuantity: setQuantity
           },
           product.id
         )) }),
-        validation.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__validation", role: "status", children: validation.message }),
+        validationMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__validation", role: "status", children: validationMessage }),
         cartError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__error", role: "alert", children: cartError }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart || !validation.valid,
+            disabled: addingToCart || !valid,
             "aria-busy": addingToCart,
             children: addingToCart ? "Adding..." : bundle.widgetConfig.cta.ctaText ?? `Add ${totalQuantity} Items to Cart`
           }
@@ -996,9 +1049,11 @@ function MixMatchProductRow({
   bundle,
   product,
   currency,
+  showStepper,
   selections,
-  onToggle,
-  onUpdateQuantity
+  onSelect,
+  onDeselect,
+  onSetQuantity
 }) {
   const variants = product.variants.nodes;
   const optionNames = (0, import_react7.useMemo)(() => {
@@ -1006,20 +1061,12 @@ function MixMatchProductRow({
     return first ? first.selectedOptions.map((o) => o.name) : [];
   }, [variants]);
   const showPicker = variants.length > 1 && optionNames.length > 0;
+  const rule = ruleFor(bundle, product.id);
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({ variants, optionNames });
-  const displayVariant = selectedVariant ?? variants.find(
-    (v) => (0, import_core9.isVariantFulfillable)(v, (0, import_core9.resolveBundleQty)(bundle, product.id, v.id))
-  ) ?? variants[0] ?? null;
+  const displayVariant = selectedVariant ?? variants.find((v) => (0, import_core9.isVariantFulfillable)(v, rule.min)) ?? variants[0] ?? null;
   if (!displayVariant) return null;
-  const displayVariantQty = (0, import_core9.resolveBundleQty)(
-    bundle,
-    product.id,
-    displayVariant.id
-  );
-  const displayVariantFulfillable = (0, import_core9.isVariantFulfillable)(
-    displayVariant,
-    displayVariantQty
-  );
+  const fulfillable = (0, import_core9.isVariantFulfillable)(displayVariant, rule.min);
+  const maxAddable = (0, import_core9.maxAddableQuantity)(displayVariant, rule.max, 0);
   const key = `${product.id}:${displayVariant.id}`;
   const selected = selections.get(key);
   const thumbImage = displayVariant.image ?? product.featuredImage;
@@ -1048,7 +1095,7 @@ function MixMatchProductRow({
           unitPriceText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "lb-bundle__product-unit-price", children: unitPriceText }),
           (0, import_core9.shouldShowLowStockBadge)(
             displayVariant,
-            displayVariantQty,
+            rule.min,
             bundle.widgetConfig.lowStockThreshold,
             bundle.widgetConfig.showLowStockBadge
           ) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "lb-bundle-low-stock-badge", children: [
@@ -1074,39 +1121,58 @@ function MixMatchProductRow({
             );
           }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lb-bundle__product-actions", children: selected ? showStepper ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__quantity-control", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               "aria-label": `Decrease ${product.title}`,
-              onClick: () => onUpdateQuantity(
+              onClick: () => onSetQuantity(
                 product.id,
-                displayVariant.id,
+                displayVariant,
                 selected.quantity - 1
               ),
+              disabled: selected.quantity <= rule.min,
               children: "\u2212"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: selected.quantity }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-live": "polite", children: selected.quantity }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               "aria-label": `Increase ${product.title}`,
-              onClick: () => onUpdateQuantity(
+              onClick: () => onSetQuantity(
                 product.id,
-                displayVariant.id,
+                displayVariant,
                 selected.quantity + 1
               ),
+              disabled: selected.quantity >= maxAddable,
               children: "+"
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              className: "lb-bundle__remove-btn",
+              "aria-label": `Remove ${product.title}`,
+              onClick: () => onDeselect(product.id, displayVariant.id),
+              children: "Remove"
+            }
           )
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            className: "lb-bundle__select-btn lb-bundle__select-btn--selected",
+            "aria-label": `Remove ${product.title}`,
+            onClick: () => onDeselect(product.id, displayVariant.id),
+            children: "Selected"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             className: "lb-bundle__select-btn",
-            onClick: () => onToggle(product.id, displayVariant),
-            disabled: !displayVariantFulfillable,
-            children: displayVariantFulfillable ? "Select" : "Sold out"
+            onClick: () => onSelect(product.id, displayVariant),
+            disabled: !fulfillable || maxAddable <= 0,
+            children: fulfillable && maxAddable > 0 ? "Select" : "Sold out"
           }
         ) })
       ]