@sledge-app/react-instant-search 1.0.11 → 1.0.12

package/dist/sledge-react-instant-search.js

@@ -2287,9 +2287,11 @@ const ProductCard = (props) => {
   const { id, title, image, url, vendor = "", currency, handle } = product || {};
   const { id: variant_id = "", admin_graphql_api_id: variant_admin_graphql_api_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
   const defaultSelectedVariantId = variant_admin_graphql_api_id ? variant_admin_graphql_api_id : "";
+  const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
   const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
+  const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
   let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
-  let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !variants[0].inventory_quantity && showOptionOutOfStock : false;
+  let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !Number(selectedVariantStock) && showOptionOutOfStock : false;
   let component = null;
   if (CardsComponent) {
     const CardsProps = {
@@ -2327,6 +2329,7 @@ const ProductCard = (props) => {
         defaultSelected["data-selected-option2"] = variants[0].option2;
       }
       defaultSelected["data-variant-id"] = variants[0].admin_graphql_api_id;
+      defaultSelected["data-inventory-quantity"] = variants[0].inventory_quantity;
     }, setSelectedOption = function(element, optionName) {
       const optionsButton = element.target.offsetParent.querySelector(`.options-button-${optionName}`).querySelectorAll(`button`);
       const defaultSelectedClassChanger = () => {
@@ -2352,7 +2355,7 @@ const ProductCard = (props) => {
           defaultSelectedClassChanger();
       }
     }, setSelectedVariant = function(element, value, optionIndex) {
-      var _a2;
+      var _a2, _b2;
       const parentCard = element.target.offsetParent;
       const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
       const setOptionAttribute = () => {
@@ -2364,10 +2367,14 @@ const ProductCard = (props) => {
       const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
       const variantId = selectOption.attributes["data-graphql-id"].value;
       const imageId = (_a2 = selectOption.attributes["data-image-id"]) == null ? void 0 : _a2.value;
+      const inventoryQuantity = (_b2 = selectOption.attributes["data-inventory-quantity"]) == null ? void 0 : _b2.value;
       const setOther = () => {
         selectedInput.attributes[`data-variant-id`].value = selectOption.attributes["data-graphql-id"].value;
+        selectedInput.attributes[`data-inventory-quantity`].value = inventoryQuantity;
         if (variantId)
           setSelectedVariantId(variantId);
+        if (inventoryQuantity)
+          setSelectedVariantStock(inventoryQuantity);
         if (imageId)
           parentCard.querySelector(`img.sledge__product-grid-card-image-featured-image`).src = parentCard.querySelector(
             `div.sledge__product-grid-card-variant-images img[id="${imageId}"]`
@@ -2476,10 +2483,11 @@ const ProductCard = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-variant-swatch", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", ...defaultSelected, className: "sledge__product-grid-card-selected-option" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("select", { className: "variant-picker sledge__product-grid-card-variant-picker", children: variants == null ? void 0 : variants.map((variant) => {
-              const { title: title2, option1, option2, position, id: id2, admin_graphql_api_id, image_id } = variant;
+              const { title: title2, option1, option2, position, id: id2, admin_graphql_api_id, image_id, inventory_quantity } = variant;
               let optionAttributes = {
                 "data-option-1": option1,
                 "data-option-2": option2,
+                "data-inventory-quantity": inventory_quantity,
                 "data-position": position,
                 "data-id": id2,
                 "data-graphql-id": admin_graphql_api_id,