@sledge-app/react-instant-search 1.0.6 → 1.0.7

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

@@ -346,9 +346,9 @@ const Progress = ({ value, total, fillColor = "", outlineColor = "" }) => {
   );
 };
 const Checkbox$1 = "";
-const Checkbox = ({ id, name, value, required, label, defaultChecked, labelStyle = {}, onClick }) => {
+const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {}, onClick }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__checkbox-wrapper", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$be92b6f5f03c0fe9, { className: "sledge__checkbox-root", defaultChecked, id, name, value, required, onClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$adb584737d712b70, { className: "sledge__checkbox-indicator", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$be92b6f5f03c0fe9, { className: "sledge__checkbox-root", checked, id, name, value, required, onClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$adb584737d712b70, { className: "sledge__checkbox-indicator", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "path",
       {
         fillRule: "evenodd",
@@ -369,7 +369,9 @@ const Slider = (props) => {
     {
       className: "sledge__SliderRoot",
       defaultValue,
-      min,
+      ...typeof min !== "undefined" ? {
+        min
+      } : {},
       max,
       step,
       "aria-label": "Volume",
@@ -754,7 +756,7 @@ const addToCart = async (data) => {
   data.map((item) => {
     const { id, quantity } = item;
     items.push({
-      id,
+      id: sanitizeDataId(id),
       quantity
     });
   });
@@ -2343,237 +2345,267 @@ const ProductGrid = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
     var _a, _b, _c;
     const { product, variants } = item || {};
-    const { id, title, image, url, vendor = "", currency } = product || {};
+    const { id, title, image, url, vendor = "", currency, handle } = product || {};
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
     let isLoadingAddToCart = clickedAddToCartId == variant_id;
     let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !variants[0].inventory_quantity && showOptionOutOfStock : false;
-    const options = (product == null ? void 0 : product.options) ? Object.entries(product.options) : [];
-    const images = (product == null ? void 0 : product.images) ?? [];
-    const defaultSelected = {};
-    function setDefaultFunction() {
-      if (!(variants == null ? void 0 : variants.length))
-        return;
-      defaultSelected["data-product-handle"] = product.handle;
-      defaultSelected["data-selected-option1"] = variants[0].option1;
-      if (variants[0].option2) {
-        defaultSelected["data-selected-option2"] = variants[0].option2;
-      }
-      defaultSelected["data-variant-id"] = variants[0].admin_graphql_api_id;
-    }
-    setDefaultFunction();
-    const defaultSelectedVariantId = (variants == null ? void 0 : variants.length) ? variants[0].admin_graphql_api_id : "";
-    const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
-    function setSelectedVariant(element, value, optionIndex) {
-      var _a2;
-      const selectedInput = element.target.parentNode.parentNode.firstChild;
-      const parentCard = element.target.offsetParent;
-      const setOptionAttribute = () => {
-        selectedInput.attributes[`data-selected-option${optionIndex}`].value = value;
-      };
-      setOptionAttribute();
-      const option1 = `[data-option-1="${selectedInput.attributes["data-selected-option1"].value}"]`;
-      const option2 = `${selectedInput.attributes["data-selected-option2"] ? `[data-option-2="${selectedInput.attributes["data-selected-option2"].value}"]` : ""}`;
-      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 setOther = () => {
-        selectedInput.attributes[`data-variant-id`].value = selectOption.attributes["data-graphql-id"].value;
-        if (variantId)
-          setSelectedVariantId(variantId);
-        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}"]`
-          ).src;
-      };
-      setOther();
-      const result = {
-        variantId,
-        imageId
-      };
-      return result;
-    }
-    const getCards = cards ? cards({
-      product: {
-        ...product,
-        ...{
-          variants: variants.map((variant, index2) => {
-            const { inventory_quantity } = variant || {};
-            return {
-              ...variant,
-              is_out_of_stock: Object.hasOwn(variants[index2], "inventory_quantity") ? !inventory_quantity : false
-            };
-          })
+    if (cards) {
+      const getCards = cards({
+        product: {
+          ...product,
+          ...{
+            variants: variants.map((variant, index2) => {
+              const { inventory_quantity } = variant || {};
+              return {
+                ...variant,
+                is_out_of_stock: Object.hasOwn(variants[index2], "inventory_quantity") ? !inventory_quantity : false
+              };
+            })
+          },
+          ...dataReviews && Object.keys(dataReviews).length ? {
+            review: {
+              total: ((_a = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _a.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
+              average: ((_c = (_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.rating) == null ? void 0 : _c.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
+            }
+          } : {}
         },
-        ...dataReviews && Object.keys(dataReviews).length ? {
-          review: {
-            total: ((_a = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _a.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
-            average: ((_c = (_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.rating) == null ? void 0 : _c.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
-          }
-        } : {}
-      },
-      showPopupComponent,
-      setShowPopupComponent,
-      sourceApp
-    }) : null;
-    return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "a",
-            {
-              href: url,
-              onClick: () => sourceApp === "instant-search" && productClickTrigger({
-                productId: id
-              }),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Trigger,
-                  {
-                    params: {
-                      productId: id,
-                      productVariantId: variant_id,
-                      productName: title,
-                      productVendor: vendor,
-                      productSku: sku,
-                      productVariantName: variant_title,
-                      productLink: url,
-                      productImage: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`,
-                      productCurrency: currency,
-                      productPrice: price
+        showPopupComponent,
+        setShowPopupComponent,
+        sourceApp
+      });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index);
+    } else {
+      let setDefaultFunction = function() {
+        if (!(variants == null ? void 0 : variants.length))
+          return;
+        defaultSelected["data-product-id"] = id;
+        defaultSelected["data-product-handle"] = handle;
+        defaultSelected["data-selected-option1"] = variants[0].option1;
+        if (variants[0].option2) {
+          defaultSelected["data-selected-option2"] = variants[0].option2;
+        }
+        defaultSelected["data-variant-id"] = variants[0].admin_graphql_api_id;
+      }, setSelectedOption = function(element, optionName) {
+        const optionsButton = element.target.offsetParent.querySelector(`.options-button-${optionName}`).querySelectorAll(`button`);
+        const defaultSelectedClassChanger = () => {
+          optionsButton.forEach((button, index2) => {
+            button.classList.remove("sledge__product-variant-size-swatch-active");
+            element.target.className += " sledge__product-variant-size-swatch-active";
+          });
+        };
+        const colorSelectedClassChanger = () => {
+          optionsButton.forEach((button, index2) => {
+            button.classList.remove("sledge__product-variant-color-swatch-active");
+            element.target.className += " sledge__product-variant-color-swatch-active";
+          });
+        };
+        switch (optionName) {
+          case "Color":
+            colorSelectedClassChanger();
+            break;
+          case "Size":
+            defaultSelectedClassChanger();
+            break;
+          default:
+            defaultSelectedClassChanger();
+        }
+      }, setSelectedVariant = function(element, value, optionIndex) {
+        var _a2;
+        const parentCard = element.target.offsetParent;
+        const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
+        const setOptionAttribute = () => {
+          selectedInput.attributes[`data-selected-option${optionIndex}`].value = value;
+        };
+        setOptionAttribute();
+        const option1 = `[data-option-1="${selectedInput.attributes["data-selected-option1"].value}"]`;
+        const option2 = `${selectedInput.attributes["data-selected-option2"] ? `[data-option-2="${selectedInput.attributes["data-selected-option2"].value}"]` : ""}`;
+        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 setOther = () => {
+          selectedInput.attributes[`data-variant-id`].value = selectOption.attributes["data-graphql-id"].value;
+          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}"]`
+            ).src;
+        };
+        setOther();
+        const result = {
+          variantId,
+          imageId
+        };
+        return result;
+      };
+      const options = (product == null ? void 0 : product.options) ? Object.entries(product.options) : [];
+      const images = (product == null ? void 0 : product.images) ?? [];
+      const defaultSelected = {};
+      setDefaultFunction();
+      const selectedInputElement = document.querySelector(`.sledge__product-grid-card .sledge__product-grid-card-selected-option[data-product-id='${id}']`);
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "a",
+              {
+                href: url,
+                onClick: () => sourceApp === "instant-search" && productClickTrigger({
+                  productId: id
+                }),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Trigger,
+                    {
+                      params: {
+                        productId: id,
+                        productVariantId: variant_id,
+                        productName: title,
+                        productVendor: vendor,
+                        productSku: sku,
+                        productVariantName: variant_title,
+                        productLink: url,
+                        productImage: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`,
+                        productCurrency: currency,
+                        productPrice: price
+                      },
+                      ...triggerPropAdditional,
+                      onAfterAddWishlist,
+                      onAfterRemoveWishlist,
+                      wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy", className: "sledge__product-grid-card-image-featured-image" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "img",
+                    {
+                      decoding: "async",
+                      id: image2 == null ? void 0 : image2.id,
+                      height: "270",
+                      loading: "lazy",
+                      src: image2 == null ? void 0 : image2.src,
+                      alt: product == null ? void 0 : product.title,
+                      width: 269.92,
+                      style: { aspectRatio: 269.92 / 270 }
                     },
-                    ...triggerPropAdditional,
-                    onAfterAddWishlist,
-                    onAfterRemoveWishlist,
-                    wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy", className: "sledge__product-grid-card-image-featured-image" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "img",
-                  {
-                    decoding: "async",
-                    id: image2 == null ? void 0 : image2.id,
-                    height: "270",
-                    loading: "lazy",
-                    src: image2 == null ? void 0 : image2.src,
-                    alt: product == null ? void 0 : product.title,
-                    width: 269.92,
-                    style: { aspectRatio: 269.92 / 270 }
-                  },
-                  image2 == null ? void 0 : image2.id
-                )) })
-              ]
-            }
-          ),
-          isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", children: "Sold out" }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
-            show_price ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-price", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: display_price_style, children: [
-              currency,
-              price
-            ] }) }) : null,
-            show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
-              "Vendor: ",
-              vendor
-            ] }) : null
+                    image2 == null ? void 0 : image2.id
+                  )) })
+                ]
+              }
+            ),
+            isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", children: "Sold out" }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Rating,
-            {
-              params: {
-                productId: id
-              },
-              size: "xs",
-              withSkeletonLoading: false,
-              isScrollToElementWidget: false,
-              data: dataReviews == null ? void 0 : dataReviews[id]
-            }
-          ) }),
-          title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "a",
-            {
-              href: url,
-              onClick: () => sourceApp === "instant-search" && productClickTrigger({
-                productId: id
-              }),
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: show_sku && sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            "SKU: ",
-            sku
-          ] }) : null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-variant-swatch", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", ...defaultSelected, className: "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;
-              let optionAttributes = {
-                "data-option-1": option1,
-                "data-option-2": option2,
-                "data-position": position,
-                "data-id": id2,
-                "data-graphql-id": admin_graphql_api_id,
-                "data-image-id": image_id
-              };
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title2 }, id2);
-            }) }),
-            options == null ? void 0 : options.map((option, optionParentIndex) => {
-              const optionName = option[0];
-              const optionValues = option[1];
-              const [selectedOption, setSelectedOption] = React__default.useState(optionValues[0]);
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-variant-size-swatch-flex", children: optionValues.map((item2, index2) => {
-                const defaultOptionClass = `
-                ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""} sledge__product-variant-size-swatch`;
-                const colorOptionClass = `${selectedOption === item2 ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
-                    style: {
-                      backgroundColor: optionName === "Color" ? item2 : null
-                    },
-                    onClick: (el) => {
-                      setSelectedVariant(el, item2, optionParentIndex + 1);
-                      setSelectedOption(item2);
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
+              show_price ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-price", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: display_price_style, children: [
+                currency,
+                price
+              ] }) }) : null,
+              show_vendor && vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", title: vendor, children: [
+                "Vendor: ",
+                vendor
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Rating,
+              {
+                params: {
+                  productId: id
+                },
+                size: "xs",
+                withSkeletonLoading: false,
+                isScrollToElementWidget: false,
+                data: dataReviews == null ? void 0 : dataReviews[id]
+              }
+            ) }),
+            title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "a",
+              {
+                href: url,
+                onClick: () => sourceApp === "instant-search" && productClickTrigger({
+                  productId: id
+                }),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: show_sku && sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              "SKU: ",
+              sku
+            ] }) : null }),
+            /* @__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;
+                let optionAttributes = {
+                  "data-option-1": option1,
+                  "data-option-2": option2,
+                  "data-position": position,
+                  "data-id": id2,
+                  "data-graphql-id": admin_graphql_api_id,
+                  "data-image-id": image_id
+                };
+                return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title2 }, id2);
+              }) }),
+              options == null ? void 0 : options.map((option, optionParentIndex) => {
+                const optionName = option[0];
+                const optionValues = option[1];
+                let selectedOption = optionValues[0];
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-variant-size-swatch-flex options-button-${optionName}`, children: optionValues.map((item2, index2) => {
+                  const defaultOptionClass = `
+            ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""} sledge__product-variant-size-swatch`;
+                  const colorOptionClass = `${selectedOption === item2 ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
+                      style: {
+                        backgroundColor: optionName === "Color" ? item2 : null
+                      },
+                      onClick: (el) => {
+                        setSelectedVariant(el, item2, optionParentIndex + 1);
+                        setSelectedOption(el, optionName);
+                      },
+                      title: optionName === "Color" ? null : item2,
+                      children: optionName === "Color" ? null : item2
                     },
-                    title: optionName === "Color" ? null : item2,
-                    children: optionName === "Color" ? null : item2
-                  },
-                  index2
-                );
-              }) }, optionParentIndex) });
-            })
-          ] })
-        ] })
-      ] }),
-      show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "button",
-          colorType: "light",
-          style: {
-            ...display_button_add_to_cart_style,
-            ...isLoadingAddToCart && {
-              cursor: "wait"
-            }
-          },
-          ...isLoadingAddToCart || isOutOfStock ? {
-            disabled: true
-          } : {
-            onClick: () => handleAddToCart({
-              id: selectedVariantId,
-              quantity: 1
-            })
-          },
-          children: isLoadingAddToCart ? "Adding..." : isOutOfStock ? "Sold out" : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "#393D4E" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart ? language_button_add_to_cart : "Add To Cart" })
+                    index2
+                  );
+                }) }, optionParentIndex) });
+              })
+            ] })
           ] })
-        }
-      ) }) : null
-    ] }, index);
+        ] }),
+        show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            type: "button",
+            colorType: "light",
+            style: {
+              ...display_button_add_to_cart_style,
+              ...isLoadingAddToCart && {
+                cursor: "wait"
+              }
+            },
+            ...isLoadingAddToCart || isOutOfStock ? {
+              disabled: true
+            } : {
+              onClick: () => {
+                var _a2;
+                if (!((_a2 = selectedInputElement == null ? void 0 : selectedInputElement.dataset) == null ? void 0 : _a2.variantId))
+                  return;
+                handleAddToCart({
+                  id: selectedInputElement.dataset.variantId,
+                  quantity: 1
+                });
+              }
+            },
+            children: isLoadingAddToCart ? "Adding..." : isOutOfStock ? "Sold out" : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "#393D4E" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart ? language_button_add_to_cart : "Add To Cart" })
+            ] })
+          }
+        ) }) : null
+      ] }, index);
+    }
   }) });
 };
 const TextAreaField = "";
@@ -3375,9 +3407,6 @@ const SearchIconWidgetPopup = () => {
 };
 const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-  const { isRenderApp, isJsVersion, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
-  const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
-  const { value: valueRenderInstantSearchResult, trigger: triggerRenderInstantSearchResult } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.instantSearch) == null ? void 0 : _a.searchResult) || {};
   const {
     layoutType = "default",
     query,
@@ -3396,6 +3425,29 @@ const SearchResultWidget = (props) => {
   } = props;
   const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : "q";
   const { collectionId } = params || {};
+  const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
+  const [settings] = React__default.useState(typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}") : {});
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
+  const [isLoading, setIsLoading] = React__default.useState(!propsData);
+  const [keyword, setKeyword] = React__default.useState(searchParams == null ? void 0 : searchParams.get(queryKeyword));
+  const [clickedTabIndexId, setClickedTabIndexId] = React__default.useState(null);
+  const [clickedTabIndexName, setClickedTabIndexName] = React__default.useState();
+  const [clickedTabIndexType, setClickedTabIndexType] = React__default.useState();
+  const [resultComponent, setResultComponent] = React__default.useState(/* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}));
+  const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(!propsData);
+  const [allowedSorts, setAllowedSorts] = React__default.useState(((_b = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b.allowed_sorts) || []);
+  const [allowedFilters, setAllowedFilters] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.filters) || []);
+  const [allowedTabs, setAllowedTabs] = React__default.useState([]);
+  const [facets, setFacets] = React__default.useState([]);
+  const [indexProduct, setIndexProduct] = React__default.useState(((_d = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d.index_product) || "");
+  const [hiddenTags, setHiddenTags] = React__default.useState(((_e = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _e.hidden_tags) || []);
+  const [displaySettings, setDisplaySettings] = React__default.useState(((_f = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _f.display) || {});
+  const [colorSwatches, setColorSwatches] = React__default.useState(((_g = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _g.colors) || []);
+  const [defaultSort, setDefaultSort] = React__default.useState(((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.default_sort) || "");
+  const [showOutOfStock, setShowOutOfStock] = React__default.useState((_i = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _i.show_out_of_stock);
+  const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
+  const [defaultFacetStats, setDefaultFacetStats] = React__default.useState({});
+  const [hideFilterWhenOneValue, setHideFilterWhenOneValue] = React__default.useState(false);
   let productCardsComponent = null;
   let collectionCardsComponent = null;
   let pageCardsComponent = null;
@@ -3416,28 +3468,9 @@ const SearchResultWidget = (props) => {
         articleCardsComponent = articleCard;
     }
   });
-  const searchParams = typeof document !== "undefined" ? new URLSearchParams((_b = document == null ? void 0 : document.location) == null ? void 0 : _b.search) : null;
-  const [settings] = React__default.useState(typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}") : {});
-  const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
-  const [isLoading, setIsLoading] = React__default.useState(!propsData);
-  const [keyword, setKeyword] = React__default.useState(searchParams == null ? void 0 : searchParams.get(queryKeyword));
-  const [clickedTabIndexId, setClickedTabIndexId] = React__default.useState(null);
-  const [clickedTabIndexName, setClickedTabIndexName] = React__default.useState();
-  const [clickedTabIndexType, setClickedTabIndexType] = React__default.useState();
-  const [resultComponent, setResultComponent] = React__default.useState(/* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}));
-  const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(!propsData);
-  const [allowedSorts, setAllowedSorts] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.allowed_sorts) || []);
-  const [allowedFilters, setAllowedFilters] = React__default.useState(((_d = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d.filters) || []);
-  const [allowedTabs, setAllowedTabs] = React__default.useState([]);
-  const [facets, setFacets] = React__default.useState([]);
-  const [indexProduct, setIndexProduct] = React__default.useState(((_e = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _e.index_product) || "");
-  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
-  const [hiddenTags, setHiddenTags] = React__default.useState(((_f = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _f.hidden_tags) || []);
-  const [displaySettings, setDisplaySettings] = React__default.useState(((_g = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _g.display) || {});
-  const [colorSwatches, setColorSwatches] = React__default.useState(((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.colors) || []);
-  const [defaultSort, setDefaultSort] = React__default.useState(((_i = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _i.default_sort) || "");
-  const [showOutOfStock, setShowOutOfStock] = React__default.useState((_j = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _j.show_out_of_stock);
-  const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
+  const { isRenderApp, isJsVersion, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
+  const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
+  const { value: valueRenderInstantSearchResult, trigger: triggerRenderInstantSearchResult } = ((_j = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.instantSearch) == null ? void 0 : _j.searchResult) || {};
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const handleChangeTabIndex = (params2) => {
@@ -3448,7 +3481,8 @@ const SearchResultWidget = (props) => {
     setResultComponent(id.includes(indexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
   };
   const handleInitStates = async (data, type) => {
-    const { filters, index_product, tabs, hidden_tags, show_out_of_stock } = data;
+    var _a2;
+    const { filters, index_product, tabs, hidden_tags, show_out_of_stock, display } = data;
     let getTabs = layoutType === "product-filter" ? tabs.filter(({ index }) => index == null ? void 0 : index.includes(index_product)) : tabs;
     let response;
     let body = {
@@ -3512,37 +3546,9 @@ const SearchResultWidget = (props) => {
         })
       );
     } else {
-      const { facetDistribution, facetStats } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
-      setSearchResultFacets(
-        facetDistribution ? Object.fromEntries(
-          Object.entries(facetDistribution).map((facet) => {
-            let value = facet[0];
-            let items = [];
-            if (value === "variants.inventory_quantity") {
-              Object.keys(facetDistribution[value]).map((item) => {
-                return Boolean(Number(item)) ? facetDistribution[value][item] : 0;
-              });
-              items = [
-                {
-                  name: "In Stock",
-                  value: "> 0"
-                }
-              ];
-            } else if (value === "variants.price") {
-              items = facetStats[value];
-            } else {
-              items = Object.keys(facetDistribution[value]).map((item) => {
-                return {
-                  name: item,
-                  value: item,
-                  total: facetDistribution[value][item] || 0
-                };
-              });
-            }
-            return [value, items];
-          })
-        ) : {}
-      );
+      const { facetStats, totalHits } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
+      setDefaultFacetStats(facetStats);
+      setHideFilterWhenOneValue(((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1);
     }
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
@@ -3887,7 +3893,8 @@ const SearchResultWidget = (props) => {
       allowedSorts,
       allowedFilters,
       facets,
-      searchResultFacets,
+      defaultFacetStats,
+      hideFilterWhenOneValue,
       hiddenTags,
       displaySettings,
       colorSwatches,
@@ -3930,7 +3937,8 @@ const ResultProduct = (props) => {
     allowedSorts,
     allowedFilters,
     facets,
-    searchResultFacets,
+    defaultFacetStats,
+    hideFilterWhenOneValue,
     hiddenTags,
     displaySettings,
     colorSwatches,
@@ -3963,6 +3971,7 @@ const ResultProduct = (props) => {
   const [clickedSortName, setClickedSortName] = React__default.useState(allowedSorts && Boolean(allowedSorts == null ? void 0 : allowedSorts.length) ? (_a = allowedSorts.find(({ value }) => value === defaultSort)) == null ? void 0 : _a.label : "");
   const [clickedLimitId, setClickedLimitId] = React__default.useState(((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.limit) || 10);
   const [clickedOpenFilterId, setClickedOpenFilterId] = React__default.useState(null);
+  const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState([]);
   const [clickedFacets, setClickedFacets] = React__default.useState({
     ...!showOutOfStock ? {
       "variants.inventory_quantity": "> 0"
@@ -3978,6 +3987,7 @@ const ResultProduct = (props) => {
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
   const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
+  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
   const summaryTextGenerator = () => {
     var _a2;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
@@ -4083,8 +4093,17 @@ const ResultProduct = (props) => {
     setIsOpenLimit(false);
     setClickedLimitId(value);
   };
-  const handleOpenFilter = (id) => {
+  const handleOpenFilterVertical = (id) => {
     setClickedOpenFilterId(id === clickedOpenFilterId ? "" : id);
+    let valueClickedOpenFilters = clickedOpenFilters;
+    if (valueClickedOpenFilters.includes(id)) {
+      const findIndex = valueClickedOpenFilters.indexOf(id);
+      if (findIndex > -1)
+        valueClickedOpenFilters.splice(findIndex, 1);
+    } else {
+      valueClickedOpenFilters.push(id);
+    }
+    setClickedOpenFilters(valueClickedOpenFilters);
   };
   const handleFilterReset = () => {
     setIsFilterChanged(true);
@@ -4138,7 +4157,7 @@ const ResultProduct = (props) => {
     var _a2;
     if (!result)
       return;
-    const { hits, processingTimeMs, totalHits, totalPages } = result;
+    const { hits, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
     if (onSearch && (keyword == null ? void 0 : keyword.length)) {
       searchTrigger({
         keyword,
@@ -4166,6 +4185,34 @@ const ResultProduct = (props) => {
         ] }) : null
       ] }) : null })
     );
+    setSearchResultFacets(
+      facetDistribution ? Object.fromEntries(
+        Object.entries(facetDistribution).map((facet) => {
+          let value = facet[0];
+          let items = [];
+          if (value === "variants.inventory_quantity") {
+            Object.keys(facetDistribution[value]).map((item) => {
+              return Boolean(Number(item)) ? facetDistribution[value][item] : 0;
+            });
+            items = [
+              {
+                name: "In Stock",
+                value: "> 0"
+              }
+            ];
+          } else {
+            items = Object.keys(facetDistribution[value]).map((item) => {
+              return {
+                name: item,
+                value: item,
+                total: facetDistribution[value][item] || 0
+              };
+            });
+          }
+          return [value, items];
+        })
+      ) : {}
+    );
   };
   const handleSearchResult = async (isRefreshPage = false, onSearch = false) => {
     var _a2, _b2;
@@ -4210,8 +4257,8 @@ const ResultProduct = (props) => {
     handleSearchResultData(response, onSearch);
   };
   const handleAllowedFilter = () => {
-    var _a2, _b2;
-    if (!((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.enable_on_search) || ((_b2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b2.hide_when_one_value) && totalSearchResult <= 1)
+    var _a2;
+    if (!((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.enable_on_search) || hideFilterWhenOneValue)
       return;
     let isSetFilter = false;
     if (!isSetFilter)
@@ -4289,21 +4336,26 @@ const ResultProduct = (props) => {
     let items = searchResultFacets[value];
     let isShowNumberMatchingProduct = (_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_number_matching_product;
     if (display.toLowerCase() === "slider") {
+      let items2 = defaultFacetStats[value] && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
+      let defaultValueMin = valueFilterPriceChange[0] || (items2 == null ? void 0 : items2.min);
+      let defaultValueMax = valueFilterPriceChange[1] || (items2 == null ? void 0 : items2.max);
       blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Slider,
           {
-            defaultValue: [valueFilterPriceChange[0] || (items == null ? void 0 : items.min), valueFilterPriceChange[1] || (items == null ? void 0 : items.max)],
-            min: items == null ? void 0 : items.min,
-            max: items == null ? void 0 : items.max,
+            defaultValue: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
+            ...(items2 == null ? void 0 : items2.min) === (items2 == null ? void 0 : items2.max) ? {} : {
+              min: items2 == null ? void 0 : items2.min
+            },
+            max: items2 == null ? void 0 : items2.max,
             step: 1,
             setValueCommit: (valueCommit) => handleFilterChange(value, valueCommit),
             setValueChange: (valueChange) => setValueFilterPriceChange(valueChange)
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider-minmax", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[0] || (items == null ? void 0 : items.min) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[1] || (items == null ? void 0 : items.max) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[0] || (items2 == null ? void 0 : items2.min) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[1] || (items2 == null ? void 0 : items2.max) })
         ] })
       ] });
     } else if (display.toLowerCase() === "checkbox" && (items == null ? void 0 : items.length)) {
@@ -4317,7 +4369,7 @@ const ResultProduct = (props) => {
             value: item.value,
             label: `${item.name}${item.total !== void 0 && isShowNumberMatchingProduct ? ` (${item.total})` : ""}`,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)),
+            checked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)),
             labelStyle: filter_option_style
           }
         ) }, index);
@@ -4379,7 +4431,6 @@ const ResultProduct = (props) => {
   };
   const filterVerticalComponents = allowedFilter.map((filter, indexFilter) => {
     const { value, label, display } = filter;
-    let isActive = clickedOpenFilterId === value;
     let items = searchResultFacets[value];
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
     let isNotRerender = ["select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
@@ -4389,11 +4440,11 @@ const ResultProduct = (props) => {
       classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
     }
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilter(value), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(value) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
       ] }),
-      isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null })
+      clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null })
     ] }, indexFilter) : null;
   });
   const filterHorizontalComponents = allowedFilter.map((filter, indexFilter) => {
@@ -4410,7 +4461,7 @@ const ResultProduct = (props) => {
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Popover,
       {
-        trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", onClick: () => handleOpenFilter(value), children: [
+        trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", onClick: () => setClickedOpenFilterId(value), children: [
           label,
           /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
         ] }),
@@ -4455,9 +4506,9 @@ const ResultProduct = (props) => {
   });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+    ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal", children: filterHorizontalComponents }),
-      Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+      Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -4475,11 +4526,11 @@ const ResultProduct = (props) => {
             index
           });
         })
-      ] }) }) : null
+      ] }) : null
     ] }) }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.enable_on_search) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.show_refine_by_block)) ? Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+      ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.enable_on_search) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: "Filter" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: "Clear All" })