@sledge-app/react-instant-search 2.0.17 → 2.0.19

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

@@ -1145,7 +1145,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
   ) }) }) });
 };
 const ColorSwatch$1 = "";
-const ColorSwatch = ({ id, name, value, rgb, image, required, checked, onClick }) => {
+const ColorSwatch = ({ id, name, value, rgb, image, required, checked, onClick, labelType = "tooltip", label, labelStyle = {} }) => {
   const styles = {
     ...(image == null ? void 0 : image.length) ? {
       backgroundImage: `url("${image}")`,
@@ -1154,27 +1154,19 @@ const ColorSwatch = ({ id, name, value, rgb, image, required, checked, onClick }
       backgroundColor: rgb
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const colorSwatchComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__color-swatch-wrapper", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$be92b6f5f03c0fe9, { className: "sledge__color-swatch-root", checked, id, name, value, required, onClick, style: styles }),
+    labelType === "text" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: label && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sledge__color-swatch-label", htmlFor: id, style: labelStyle, children: label }) }) : null
+  ] });
+  return labelType === "tooltip" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     Tooltip,
     {
       content: value,
       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("div", { className: "sledge__color-swatch-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        $e698a72e93240346$export$be92b6f5f03c0fe9,
-        {
-          className: "sledge__color-swatch-root",
-          checked,
-          id,
-          name,
-          value,
-          required,
-          onClick,
-          style: styles
-        }
-      ) })
+      children: colorSwatchComponent
     }
-  );
+  ) : colorSwatchComponent;
 };
 const Select$1 = "";
 const Select = ({ name, placeholder, required, defaultValue, items, labelStyle = {}, onValueChange, useLoadMore = false, loadMoreText = "Load More" }) => {
@@ -7227,7 +7219,8 @@ const FilterItem = (props) => {
     allowedFilter = [],
     layoutType,
     collectionId,
-    isHorizontalGroup = false
+    isHorizontalGroup = false,
+    renderedCount = 0
   } = props;
   const { value, label } = filter;
   const filterItemId = `filter-${indexFilter}-${layoutType}-${collectionId || "all"}-${deviceType}-${stringToSlug(value)}`;
@@ -7255,7 +7248,7 @@ const FilterItem = (props) => {
               setClickedOpenFilterHorizontalId == null ? void 0 : setClickedOpenFilterHorizontalId(valueOpenFilterHorizontal);
             }
           },
-          className: isHorizontalGroup ? "sledge-instant-search__result-filter-trigger-horizontal-group" : `${isLastIndex ? (allowedFilter == null ? void 0 : allowedFilter.length) % 2 ? "sledge-instant-search__result-filter-trigger-odd" : "sledge-instant-search__result-filter-trigger-even" : ""}`,
+          className: isHorizontalGroup ? "sledge-instant-search__result-filter-trigger-horizontal-group" : `${isLastIndex ? renderedCount % 2 ? "sledge-instant-search__result-filter-trigger-odd" : "sledge-instant-search__result-filter-trigger-even" : ""}`,
           style: filterTitleStyle,
           children: [
             label,
@@ -7351,9 +7344,21 @@ const FilterHorizontal = (props) => {
     isHorizontalGroup = false,
     allowedFilterSlider
   } = props;
+  const [renderedCount, setRenderedCount] = React__default.useState(0);
+  React__default.useEffect(() => {
+    const countRenderedComponents = () => {
+      const renderedComponents = document.querySelectorAll(".sledge-instant-search__result-filter-horizontal.sledge-instant-search__result-filter-horizontal-component .sledge__button");
+      setRenderedCount(renderedComponents.length);
+    };
+    const timer = setTimeout(countRenderedComponents, 0);
+    return () => clearTimeout(timer);
+  }, [items]);
   const { sort = null, limit = null } = components;
   const wrapperAdditionalProps = {
-    ...isHorizontalGroup && { "horizontal-group": "" }
+    ...isHorizontalGroup && { "horizontal-group": "" },
+    ...{
+      [renderedCount % 2 ? "odd-items" : "even-items"]: ""
+    }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isSkeleton ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", ...wrapperAdditionalProps, children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "lighten" }, index)) }) : (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", ...wrapperAdditionalProps, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7376,7 +7381,8 @@ const FilterHorizontal = (props) => {
               allowedFilter: items,
               layoutType,
               collectionId,
-              isHorizontalGroup
+              isHorizontalGroup,
+              renderedCount
             }
           )),
           sort ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-sort", children: sort }) : null,
@@ -7539,6 +7545,7 @@ const Facet = (props) => {
   let blockComponent = null;
   const isShowNumberMatchingProduct = (_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.show_number_matching_product;
   const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
+  const isDisplayColorSwatch = ["swatch", "swatch_with_label"].includes(display.toLowerCase());
   const isDisplayInputRange = display.toLowerCase() === "input_range";
   const getValue = `${value}-${indexFilter}`;
   if (show_search && keywordFacet && !isDisplaySlider)
@@ -7718,6 +7725,30 @@ const Facet = (props) => {
       ] });
     });
   };
+  const colorSwatchComponent = ({ item = {}, index }) => {
+    var _a2;
+    let getColorSwatch = (colorSwatches == null ? void 0 : colorSwatches.filter(({ name }) => name == null ? void 0 : name.includes(item == null ? void 0 : item.value))[0]) || {};
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ColorSwatch,
+      {
+        id: `${getValue}_${index}`,
+        name: value,
+        value: item == null ? void 0 : item.value,
+        rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
+        image: getColorSwatch == null ? void 0 : getColorSwatch.image,
+        onClick: (e) => handleFilterChange({
+          parentId: value,
+          value: e.currentTarget.value
+        }),
+        checked: Boolean(clickedFacets && ((_a2 = clickedFacets[value]) == null ? void 0 : _a2.includes(item == null ? void 0 : item.value))),
+        ...display.toLowerCase() === "swatch_with_label" ? {
+          labelType: "text",
+          label: `${item == null ? void 0 : item.labelName} ${(item == null ? void 0 : item.counter) !== void 0 && isShowNumberMatchingProduct ? ` (${item == null ? void 0 : item.counter})` : ""}`,
+          labelStyle: filter_option_style
+        } : {}
+      }
+    ) }, index);
+  };
   let scrollElement = document.querySelector(
     scrollElementSelector || `#filter-${indexFilter}-${layoutType}-${collectionId || "all"}-standard-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`
   );
@@ -7884,26 +7915,19 @@ const Facet = (props) => {
         useLoadMore: true
       }
     ) });
-  } else if (display.toLowerCase() === "swatch" && (currentItems == null ? void 0 : currentItems.length)) {
-    blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: currentItems == null ? void 0 : currentItems.map((item, index) => {
-      var _a2;
-      let getColorSwatch = (colorSwatches == null ? void 0 : colorSwatches.filter(({ name }) => name == null ? void 0 : name.includes(item.value))[0]) || {};
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ColorSwatch,
-        {
-          id: `${getValue}_${index}`,
-          name: value,
-          value: item.value,
-          rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
-          image: getColorSwatch == null ? void 0 : getColorSwatch.image,
-          onClick: (e) => handleFilterChange({
-            parentId: value,
-            value: e.currentTarget.value
-          }),
-          checked: Boolean(clickedFacets && ((_a2 = clickedFacets[value]) == null ? void 0 : _a2.includes(item.value)))
-        }
-      ) }, index);
-    }) });
+  } else if (isDisplayColorSwatch && (currentItems == null ? void 0 : currentItems.length)) {
+    blockComponent = display.toLowerCase() === "swatch_with_label" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      VirtualizedList,
+      {
+        selector: scrollElementSelector,
+        ...scrollElement && {
+          scrollElement
+        },
+        rowCount: currentItems == null ? void 0 : currentItems.length,
+        rowRenderer: ({ index }) => colorSwatchComponent({ item: currentItems == null ? void 0 : currentItems[index], index }),
+        parentRef: ulListRef
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: currentItems == null ? void 0 : currentItems.map((item, index) => colorSwatchComponent({ item, index })) });
   } else {
     blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "sledge-instant-search__result-filter-item-no-result", style: filter_option_style, children: search_filter_no_result || "No result..." });
   }
@@ -8950,9 +8974,10 @@ const SearchResultWidget = (props) => {
     let valueAllowedFilterSlider = [];
     let valueHierarchicalFacetAliases = [];
     if (!isSetFilter) {
+      let isSetFilterItems = false;
       allowedFilters == null ? void 0 : allowedFilters.map((filter) => {
         const { active, collections, items } = filter;
-        if (!active)
+        if (!active || isSetFilterItems)
           return;
         const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => {
           return {
@@ -8962,10 +8987,12 @@ const SearchResultWidget = (props) => {
         });
         if (collectionId && (collections == null ? void 0 : collections.includes(String(collectionId)))) {
           isSetFilter = true;
+          isSetFilterItems = true;
           valueAllowedFilter = newItems;
         } else {
           if (collections == null ? void 0 : collections.includes("all")) {
             isSetFilter = true;
+            isSetFilterItems = true;
             valueAllowedFilter = newItems;
           }
         }
@@ -9109,22 +9136,26 @@ const SearchResultWidget = (props) => {
       const { index } = tab;
       let isSetFilter2 = false;
       let getFacets = [];
-      if (!isSetFilter2)
+      if (!isSetFilter2) {
+        let isSetFilterItems = false;
         filters == null ? void 0 : filters.map((filter) => {
           const { active, collections, items } = filter;
-          if (!active)
+          if (!active || isSetFilterItems)
             return;
           const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] || value : value);
           if (collectionId && (collections == null ? void 0 : collections.includes(String(collectionId)))) {
             isSetFilter2 = true;
+            isSetFilterItems = true;
             getFacets = newItems;
           } else {
             if (collections == null ? void 0 : collections.includes("all")) {
               isSetFilter2 = true;
+              isSetFilterItems = true;
               getFacets = newItems;
             }
           }
         });
+      }
       let isProductIndex = index.includes(index_product);
       let isHasProductFacets = isProductIndex && getFacets.length;
       if (isHasProductFacets)
@@ -10242,6 +10273,7 @@ const ResultProduct = React__default.memo((props) => {
     var _a2, _b2;
     const { value, display, indexFilter } = filter;
     const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
+    const isDisplayColorSwatch = ["swatch", "swatch_with_label"].includes(display.toLowerCase());
     let items = display.toLowerCase() === "tree" ? createHierarchicalFacet({
       indexValue: value,
       filter,
@@ -10326,8 +10358,10 @@ const ResultProduct = React__default.memo((props) => {
         }
       );
     };
-    if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length))
-      classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
+    if (isDisplayColorSwatch && (items == null ? void 0 : items.length))
+      classesUlElement.push(
+        display.toLowerCase() === "swatch" ? "sledge-instant-search__result-filter-item-color-swatches" : "sledge-instant-search__result-filter-item-color-swatches-with-label"
+      );
     if (display.toLowerCase() === "tree")
       classesUlElement.push("sledge-instant-search__result-filter-item-tree");
     if (((_b2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b2.layout) === "vertical" && (allowedFilter == null ? void 0 : allowedFilter.length) === 1)