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

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" }) => {
@@ -7553,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)
@@ -7732,6 +7725,33 @@ const Facet = (props) => {
       ] });
     });
   };
+  const colorSwatchComponent = ({ item = {}, index }) => {
+    var _a2, _b2;
+    let getColorSwatch = ((_a2 = colorSwatches == null ? void 0 : colorSwatches.filter(({ name }) => {
+      var _a3;
+      return (name == null ? void 0 : name.toLowerCase()) === ((_a3 = item == null ? void 0 : item.value) == null ? void 0 : _a3.toLowerCase());
+    })) == null ? void 0 : _a2[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 && ((_b2 = clickedFacets[value]) == null ? void 0 : _b2.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`
   );
@@ -7898,26 +7918,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..." });
   }
@@ -10263,6 +10276,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,
@@ -10347,8 +10361,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)