@sledge-app/react-instant-search 2.0.16 → 2.0.18

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

@@ -4306,7 +4306,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
           const colorOptionClass = `${selectedOption === item ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
           const colorDataSettings = ((_a3 = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING))) == null ? void 0 : _a3.colors) || [];
           const getColorSwatch = (colorDataSettings == null ? void 0 : colorDataSettings.filter(({ name }) => name === item)[0]) || {};
-          const colorSwatch = (getColorSwatch == null ? void 0 : getColorSwatch.image) ? `url(${getColorSwatch == null ? void 0 : getColorSwatch.image})` : (getColorSwatch == null ? void 0 : getColorSwatch.rgb) || item;
+          const colorSwatch = (getColorSwatch == null ? void 0 : getColorSwatch.image) ? `url('${getColorSwatch == null ? void 0 : getColorSwatch.image}')` : (getColorSwatch == null ? void 0 : getColorSwatch.rgb) || item;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
@@ -7227,7 +7227,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 +7256,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 +7352,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 +7389,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,
@@ -8950,9 +8964,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 +8977,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 +9126,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)