@sledge-app/react-instant-search 1.0.93 → 1.0.95

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

@@ -644,7 +644,8 @@ const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {},
 };
 const Slider$1 = "";
 const Slider = (props) => {
-  const { value, min, max, step = 1, setValueCommit, setValueChange } = props;
+  const { value, textValue = [], min, max, step = 1, setValueCommit, setValueChange } = props;
+  let content = (textValue == null ? void 0 : textValue.length) ? textValue : value;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $faa2e61a3361514f$export$be92b6f5f03c0fe9,
     {
@@ -663,7 +664,11 @@ const Slider = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
-            content: value[0],
+            ...(textValue == null ? void 0 : textValue.length) ? {
+              innerHTMLContent: content[0]
+            } : {
+              content: content[0]
+            },
             customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
             wrapTrigger: false,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
@@ -672,7 +677,11 @@ const Slider = (props) => {
         !value[1] ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
-            content: value[1],
+            ...(textValue == null ? void 0 : textValue.length) ? {
+              innerHTMLContent: content[1]
+            } : {
+              content: content[1]
+            },
             customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
             wrapTrigger: false,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
@@ -1793,7 +1802,7 @@ const Trigger = (props) => {
       setTypeIcon(defaultTypeIcon);
     }
   }, [isWishlist]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: rootRef, children: !isLoading && !hidden && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: rootRef, className: "sledge-wishlist__trigger-root", children: !isLoading && !hidden && /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: "sledge-wishlist__trigger-block",
@@ -2918,6 +2927,16 @@ const ProductCard = (props) => {
   const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
   const [selectedVariantInventoryManagement, setSelectedVariantInventoryManagement] = React__default.useState(defaultSelectedVariantInventoryManagement);
   const [selectedVariantInventoryPolicy, setSelectedVariantInventoryPolicy] = React__default.useState(defaultSelectedVariantInventoryPolicy);
+  const [hasEntryImage, setHasEntryImage] = React__default.useState(false);
+  const [imageRef, imageEntry] = useIntersectionObserver({
+    threshold: 0.1,
+    root: null,
+    rootMargin: "0px"
+  });
+  React__default.useEffect(() => {
+    if (!hasEntryImage && (imageEntry == null ? void 0 : imageEntry.isIntersecting))
+      setHasEntryImage(imageEntry == null ? void 0 : imageEntry.isIntersecting);
+  }, [imageEntry]);
   let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
   let isOutOfStock = showOptionOutOfStock ? !Boolean(selectedVariantStock > 0 || selectedVariantInventoryManagement === null || selectedVariantInventoryPolicy === "continue") : false;
   let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false;
@@ -3076,10 +3095,16 @@ const ProductCard = (props) => {
                     wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-featured-image-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
-                    src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                    ref: imageRef,
+                    ...hasEntryImage ? {
+                      src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                      ["loaded"]: ""
+                    } : {
+                      ["data-src"]: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`
+                    },
                     alt: "sledge-card-image",
                     loading: "lazy",
                     className: "sledge__product-grid-card-image-featured-image",
@@ -3090,7 +3115,7 @@ const ProductCard = (props) => {
                       currentTarget.src = `${CDN_URL}/images/blank-image.png`;
                     }
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
@@ -3324,7 +3349,7 @@ const ProductGrid = (props) => {
     onAfterRenderProduct && onAfterRenderProduct("success");
     handleSettings();
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, ...carouselSourceProp, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, ...carouselSourceProp, "data-grid-type": type, "data-custom-card": Boolean(props == null ? void 0 : props.cards), children: data == null ? void 0 : data.map((item, index) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       ProductCard,
       {
@@ -3450,7 +3475,7 @@ const ArticleGrid = ({ className = "", data, cards: CardsComponent, isComponentJ
   }) }) });
 };
 const Tooltip$1 = "";
-const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true }) => {
+const Tooltip = ({ children, content = null, innerHTMLContent = "", withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true }) => {
   const [open, setOpen] = React__default.useState(false);
   React__default.useEffect(() => {
     var _a;
@@ -3464,6 +3489,7 @@ const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOf
     /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$41fb9f06171c75f4, { asChild: true, children: wrapTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }) : children }),
     /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$7c6e2c02157bb7d2, { className: "sledge__tooltip-content", sideOffset, alignOffset, children: [
       content,
+      innerHTMLContent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: innerHTMLContent } }),
       withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$21b07c8f274aebd5, { className: "sledge__tooltip-arrow" }) : null
     ] }) })
   ] }) });
@@ -4673,7 +4699,7 @@ const handleFacetValues = ({
   return facetValues;
 };
 const FacetComponent = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     filter,
     isFirstLoading,
@@ -4706,6 +4732,7 @@ const FacetComponent = (props) => {
   const [showFacet, setShowFacet] = React__default.useState(false);
   const searchFacetRef = React__default.useRef(null);
   const previousState = usePrevious({ keywordFacet });
+  const { money_format } = generalDataSettings || {};
   const { button_load_more } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const { search_filter_placeholder, search_filter_show_more_result, search_filter_no_result } = languageSettings || {};
   const {
@@ -4867,10 +4894,6 @@ const FacetComponent = (props) => {
               }
             ) : null
           ] }),
-          onClick: (e) => handleFilterChange({
-            parentId: value,
-            value: e.currentTarget.value
-          }),
           checked: isChecked,
           labelStyle: filter_option_style
         }
@@ -4880,6 +4903,13 @@ const FacetComponent = (props) => {
           "li",
           {
             className: `sledge-instant-search__result-filter-checkbox-item ${isFacetHierarchical ? `sledge-instant-search__result-filter-checkbox-item-level sledge-instant-search__result-filter-checkbox-item-level-${level}` : ""}`,
+            onClick: (e) => {
+              e.preventDefault();
+              handleFilterChange({
+                parentId: value,
+                value: itemValue
+              });
+            },
             children: content
           },
           key
@@ -4925,19 +4955,32 @@ const FacetComponent = (props) => {
   }
   if (isDisplaySlider) {
     items = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
+    if (items && ((_c = Object.keys(items)) == null ? void 0 : _c.length)) {
+      items = {
+        min: (items == null ? void 0 : items.min) < 0 ? 0 : items == null ? void 0 : items.min,
+        max: items == null ? void 0 : items.max
+      };
+    }
     let valueFilterSliderChange = [];
+    let isPriceValue = false;
+    let isSalePercent = false;
     if (value === "variants.price") {
       valueFilterSliderChange = valueFilterPriceChange;
+      isPriceValue = true;
     } else if (value === "variants.sale_percent") {
       valueFilterSliderChange = valueFilterOnSaleChange;
+      isSalePercent = true;
     }
     let defaultValueMin = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[0]) || (items == null ? void 0 : items.min);
     let defaultValueMax = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[1]) || (items == null ? void 0 : items.max);
+    let contentDefaultValueMin = isPriceValue ? shopifyFormatMoney(defaultValueMin * 100, money_format) : isSalePercent ? `${defaultValueMin}%` : defaultValueMin;
+    let contentDefaultValueMax = isPriceValue ? shopifyFormatMoney(defaultValueMax * 100, money_format) : isSalePercent ? `${defaultValueMax}%` : defaultValueMax;
     blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Slider,
         {
           value: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
+          textValue: defaultValueMin === defaultValueMax ? [contentDefaultValueMax] : [contentDefaultValueMin, contentDefaultValueMax],
           ...(items == null ? void 0 : items.min) === (items == null ? void 0 : items.max) ? {} : {
             min: items == null ? void 0 : items.min
           },
@@ -4957,8 +5000,8 @@ const FacetComponent = (props) => {
         }
       ),
       /* @__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: defaultValueMin }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: defaultValueMax })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", dangerouslySetInnerHTML: { __html: contentDefaultValueMin } }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", dangerouslySetInnerHTML: { __html: contentDefaultValueMax } })
       ] })
     ] });
   } else if ((display.toLowerCase() === "checkbox" || display.toLowerCase() === "tree") && (currentItems == null ? void 0 : currentItems.length)) {
@@ -4996,7 +5039,7 @@ const FacetComponent = (props) => {
             value: value2
           };
         }),
-        defaultValue: clickedFacets && ((_c = clickedFacets[value]) == null ? void 0 : _c.length) ? clickedFacets[value][0] : "",
+        defaultValue: clickedFacets && ((_d = clickedFacets[value]) == null ? void 0 : _d.length) ? clickedFacets[value][0] : "",
         labelStyle: filter_option_style,
         useVirtualized: true,
         selector: scrollElementSelector,
@@ -5384,7 +5427,9 @@ const SearchResultWidget = (props) => {
       let valueAllowedFilter = [];
       if (!isSetFilter)
         allowedFilters == null ? void 0 : allowedFilters.map((filter) => {
-          const { collections, items } = filter;
+          const { active, collections, items } = filter;
+          if (!active)
+            return;
           const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => {
             return {
               ...otherItem,
@@ -5414,7 +5459,7 @@ const SearchResultWidget = (props) => {
           let items = [];
           if (display2.toLowerCase() === "tree") {
             for (let level = 0; level < MAX_LIMIT_HIERARCHICAL; level++) {
-              items = [...items, ...valueSearchResultFacets[`${value}.lvl${level}`]];
+              items = [...items, ...(valueSearchResultFacets == null ? void 0 : valueSearchResultFacets[`${value}.lvl${level}`]) || []];
             }
           } else {
             items = valueSearchResultFacets[value];
@@ -6002,6 +6047,7 @@ const ResultProduct = (props) => {
   } = languageSettings || {};
   const { separator: hierarchical_separator, hiddens: hierarchical_hiddens } = hierarchicalProductTypeSettings || {};
   const { separator: hierarchical_collections_separator, hiddens: hierarchical_collections_hiddens } = hierarchicalCollectionsSettings || {};
+  const { money_format } = generalDataSettings || {};
   const { button_load_more, button_loading, mobile_sort_placeholder } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const summaryTextGenerator = (totalResult) => {
     var _a2;
@@ -6332,10 +6378,17 @@ const ResultProduct = (props) => {
   });
   const facetBlockSelected = ({ label, name, value, index }) => {
     var _a2, _b2, _c2;
-    let valueText = value;
+    let valueText = (languageSettings == null ? void 0 : languageSettings[value]) || value;
     let isRange = ["variants.price", "variants.sale_percent"].includes(name);
     let getLabel = label;
     let getSettings = {};
+    let isPriceValue = false;
+    let isSalePercent = false;
+    if (name === "variants.price") {
+      isPriceValue = true;
+    } else if (name === "variants.sale_percent") {
+      isSalePercent = true;
+    }
     if (defaultFilterItems == null ? void 0 : defaultFilterItems.length) {
       defaultFilterItems.map((defaultFilterItem) => {
         const { label: defaultFilterItemLabel, items, settings: defaultFilterItemSettings } = defaultFilterItem;
@@ -6350,7 +6403,7 @@ const ResultProduct = (props) => {
         valueText = String(valueText).replace(deletePrefix, "");
     });
     if (isRange)
-      valueText = value == null ? void 0 : value.join(" - ");
+      valueText = value == null ? void 0 : value.map((valueItem) => isPriceValue ? shopifyFormatMoney(valueItem * 100, money_format) : isSalePercent ? `${valueItem}%` : valueItem).join(" - ");
     else
       valueText = (_b2 = String(valueText)) == null ? void 0 : _b2.replaceAll(hierarchical_collections_separator, " > ");
     valueText = (_c2 = String(valueText)) == null ? void 0 : _c2.replaceAll("_", " ");
@@ -6374,11 +6427,7 @@ const ResultProduct = (props) => {
       aliasValue = newSplitedValues.join(" > ");
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", children: [
-        getLabel,
-        ": ",
-        aliasValue || valueText
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", dangerouslySetInnerHTML: { __html: `${getLabel}: ${aliasValue || valueText}` } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "span",
         {