@sledge-app/react-instant-search 1.0.86 → 1.0.88

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

@@ -170,6 +170,7 @@ const OBJECT_DATA_STRING_KEY = {
   CURRENT_PAGE: "{{ current_page }}",
   TOTAL_PAGE: "{{ total_page }}",
   TOTAL_RESULT: "{{ total_result }}",
+  TOTAL_FILTER_ITEM: "{{ total_filter_item }}",
   COLLECTION_ID: "{{ collection_id }}",
   COLLECTION_NAME: "{{ collection_name }}",
   TOTAL_WISHLIST: "{{ total_wishlist }}",
@@ -298,6 +299,15 @@ const sanitizeDataId = (id) => {
     return getId;
   }
 };
+const getTextBetween = (params) => {
+  const { start, end, text } = params;
+  if (start && text.includes(start) && end && text.includes(end)) {
+    let getText = text.indexOf(start) + start.length;
+    return text.substring(getText, text.indexOf(end, getText));
+  } else {
+    return text;
+  }
+};
 const isFunction = (data) => typeof data === "function";
 const scrollToElement = (params) => {
   const { element, headerOffset } = params;
@@ -4571,6 +4581,7 @@ const FacetComponent = (props) => {
     generalDataSettings,
     searchFacetDistribution,
     clickedFacets,
+    setClickedFacets,
     handleFilterChange,
     defaultFacetStats,
     valueFilterPriceChange,
@@ -4583,15 +4594,25 @@ const FacetComponent = (props) => {
     scrollElementSelector,
     layoutType,
     collectionId,
-    colorSwatches
+    colorSwatches,
+    ulClasses = "",
+    languageSettings,
+    triggerClickedFacets,
+    setTriggerClickedFacets,
+    handleQueryStringFilter,
+    previousStateFromOutside
   } = props;
+  const [keywordFacet, setKeywordFacet] = React__default.useState("");
+  const [showFacet, setShowFacet] = React__default.useState(false);
+  const searchFacetRef = React__default.useRef(null);
+  const previousState = usePrevious({ keywordFacet });
   let aliases = {};
   if (filter.value === "hierarchicalProductType")
     aliases = settings.productTypeAliases || {};
   if (filter.value === "hierarchicalCollections")
     aliases = settings.collectionAliases || {};
   const { button_load_more } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
-  const { languages: languageSettings } = displaySettings || {};
+  const { search_filter_placeholder, search_filter_show_more_result, search_filter_no_result } = languageSettings || {};
   const {
     color: filter_option_color,
     font_size: filter_option_font_size,
@@ -4606,7 +4627,8 @@ const FacetComponent = (props) => {
     ...filter_option_text_transform && { textTransform: filter_option_text_transform }
   };
   let { value, label, display, indexFilter, items, settings: filterSettings } = filter;
-  const { prefix, filter_list, delete_prefix, selected_filter } = filterSettings || {};
+  const { prefix, filter_list, delete_prefix, selected_filter, show_search, auto_select_search, hide_filter_list } = filterSettings || {};
+  const show_filter_list_when_search = !hide_filter_list;
   if (isFirstLoading)
     return null;
   let blockComponent = null;
@@ -4614,6 +4636,11 @@ const FacetComponent = (props) => {
   const isHideFacetWhenZeroValue = (_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.hide_when_zero_value;
   const isDisplaySlider = display.toLowerCase() === "slider";
   const getValue = `${value}-${indexFilter}`;
+  if (show_search && keywordFacet && !isDisplaySlider)
+    items = items == null ? void 0 : items.filter(({ name }) => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = String(name)) == null ? void 0 : _a2.toLowerCase()) == null ? void 0 : _b2.includes(keywordFacet == null ? void 0 : keywordFacet.toLowerCase());
+    });
   const handleFacetValues = (items2) => {
     var _a2;
     let facetValues = [];
@@ -4666,12 +4693,56 @@ const FacetComponent = (props) => {
     let currentItems2 = sliced;
     return {
       haveNextPage: haveNextPage2,
-      currentItems: currentItems2
+      currentItems: currentItems2,
+      totalItems: Number(arrFacetValues == null ? void 0 : arrFacetValues.length)
     };
   };
-  const { haveNextPage, currentItems } = handleFacetLoadMore({
+  const handleSearchShowMore = () => {
+    var _a2, _b2;
+    setShowFacet(true);
+    (searchFacetRef == null ? void 0 : searchFacetRef.current) && ((_b2 = (_a2 = searchFacetRef == null ? void 0 : searchFacetRef.current) == null ? void 0 : _a2.focus) == null ? void 0 : _b2.call(_a2));
+  };
+  const { haveNextPage, currentItems, totalItems } = handleFacetLoadMore({
     facetItems: items
   });
+  const filterSearchShowMoreId = stringToSlug(`filter-search-show-more-${getValue}`);
+  React__default.useEffect(() => {
+    if (!show_search)
+      return;
+    setTimeout(() => {
+      var _a2;
+      return (_a2 = document.querySelector(`#${filterSearchShowMoreId}`)) == null ? void 0 : _a2.addEventListener("click", () => handleSearchShowMore());
+    }, 100);
+    let isKeywordFacetChanged = Boolean(previousState && previousState.keywordFacet !== keywordFacet);
+    let isPreviousStateFromOutsideChanged = Boolean(previousStateFromOutside && (previousStateFromOutside == null ? void 0 : previousStateFromOutside.clickedFacets) !== clickedFacets);
+    if (keywordFacet && isKeywordFacetChanged) {
+      const delayDebounceFn = setTimeout(() => {
+        var _a2, _b2;
+        const isAutoSelectFacet = Boolean(auto_select_search && totalItems && Number(totalItems) === 1);
+        let autoSelectFacets = (_a2 = currentItems == null ? void 0 : currentItems.map(({ value: itemValue }) => {
+          var _a3, _b3;
+          return ((_b3 = (_a3 = clickedFacets == null ? void 0 : clickedFacets[value]) == null ? void 0 : _a3.includes) == null ? void 0 : _b3.call(_a3, itemValue)) ? null : itemValue;
+        })) == null ? void 0 : _a2.filter((item) => item);
+        if (isAutoSelectFacet && (autoSelectFacets == null ? void 0 : autoSelectFacets.length)) {
+          let valueClickedFacets = {
+            ...clickedFacets,
+            ...{
+              [value]: [.../* @__PURE__ */ new Set([...((_b2 = clickedFacets == null ? void 0 : clickedFacets[value]) == null ? void 0 : _b2.length) ? clickedFacets == null ? void 0 : clickedFacets[value] : [], ...autoSelectFacets])]
+            }
+          };
+          let handleQueryStringFilterProp = valueClickedFacets;
+          if (Object.hasOwn(handleQueryStringFilterProp, "variants.inventory_quantity"))
+            handleQueryStringFilterProp == null ? true : delete handleQueryStringFilterProp["variants.inventory_quantity"];
+          handleQueryStringFilter == null ? void 0 : handleQueryStringFilter(handleQueryStringFilterProp);
+          setClickedFacets == null ? void 0 : setClickedFacets(valueClickedFacets);
+          setTriggerClickedFacets == null ? void 0 : setTriggerClickedFacets(!triggerClickedFacets);
+        }
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    }
+    if (!(showFacet && isPreviousStateFromOutsideChanged))
+      setShowFacet(false);
+  }, [keywordFacet, clickedFacets]);
   const loadMoreComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -4753,6 +4824,33 @@ const FacetComponent = (props) => {
   let scrollElement = document.querySelector(
     scrollElementSelector || `#filter-${indexFilter}-${layoutType}-${collectionId || "all"}-standard-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`
   );
+  const isShowSearch = Boolean(
+    show_search && (display.toLowerCase() === "checkbox" || display.toLowerCase() === "tree" || display.toLowerCase() === "radio") && (totalItems || keywordFacet && !totalItems)
+  );
+  const defaultSearchShowMoreFilter = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    totalItems,
+    " items found,",
+    " ",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-search-text-action", id: filterSearchShowMoreId, onClick: () => setShowFacet(true), children: "click here" }),
+    " ",
+    "to show"
+  ] });
+  let searchFilterShowMoreResult = search_filter_show_more_result;
+  if (searchFilterShowMoreResult) {
+    const getActionText = getTextBetween({
+      start: "<action>",
+      end: "</action>",
+      text: search_filter_show_more_result
+    });
+    searchFilterShowMoreResult = searchFilterShowMoreResult.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_FILTER_ITEM, String(Number(totalItems)));
+    searchFilterShowMoreResult = searchFilterShowMoreResult.replaceAll(
+      `<action>${getActionText}</action>`,
+      `
+            <span class="sledge-instant-search__result-filter-search-text-action" id="${filterSearchShowMoreId}">
+                ${getActionText}
+            </span>`
+    );
+  }
   if (isDisplaySlider) {
     items = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
     let valueFilterSliderChange = [];
@@ -4877,7 +4975,7 @@ const FacetComponent = (props) => {
       ) }, index);
     }) });
   } else {
-    blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "sledge-instant-search__result-filter-item-no-result", style: filter_option_style, children: "No result..." });
+    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..." });
   }
   if (haveNextPage) {
     blockComponent = React__default.cloneElement(
@@ -4887,7 +4985,26 @@ const FacetComponent = (props) => {
       ] })
     );
   }
-  return blockComponent;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    isShowSearch ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-search-wrapper", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SearchInputField,
+        {
+          type: "text",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+          placeholder: search_filter_placeholder || "Search filters...",
+          fieldRef: searchFacetRef,
+          value: keywordFacet,
+          onChange: ({ value: value2 }) => setKeywordFacet(value2),
+          onResetField: () => setKeywordFacet(""),
+          className: "sledge-instant-search__result-filter-search-form",
+          withClearField: true
+        }
+      ),
+      keywordFacet && totalItems && Number(totalItems) > 1 && !show_filter_list_when_search && !showFacet ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-search-text", style: filter_option_style, children: searchFilterShowMoreResult ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: searchFilterShowMoreResult } }) : defaultSearchShowMoreFilter }) : null
+    ] }) : null,
+    !show_search || show_search && (show_filter_list_when_search || !show_filter_list_when_search && (!totalItems || Number(totalItems) === 1 && keywordFacet) || showFacet) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: ulClasses, children: blockComponent }) : null
+  ] });
 };
 const FilterVerticalComponent = (props) => {
   const { filter, filterSettings, indexFilter, filterTitleStyle = {}, handleOpenFilterVertical, clickedOpenFilters, filterLayoutType, layoutType, collectionId } = props;
@@ -4906,7 +5023,9 @@ const FilterVerticalComponent = (props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filterTitleStyle, children: label }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(getValue) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
     ] }),
-    clickedOpenFilters.includes(getValue) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() })
+    clickedOpenFilters.includes(getValue) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-item-wrapper", children: getFacetComponent({
+      ulClasses: classesUlElement.join(" ")
+    }) })
   ] }, indexFilter) : null;
 };
 const FilterHorizontalComponent = (props) => {
@@ -4955,7 +5074,9 @@ const FilterHorizontalComponent = (props) => {
           ]
         }
       ),
-      content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", id: filterItemId, children: isOpenFilterHorizontal && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() }) }),
+      content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", id: filterItemId, children: isOpenFilterHorizontal && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-item-wrapper", children: getFacetComponent({
+        ulClasses: classesUlElement.join(" ")
+      }) }) }),
       withOpenState: true,
       isOpen: isOpenFilterHorizontal,
       setIsOpen: (open) => {
@@ -6233,33 +6354,43 @@ const ResultProduct = (props) => {
       isRender = !defaultValueMin && !defaultValueMax ? false : true;
     }
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
-    const getFacetComponent = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FacetComponent,
-      {
-        filter: {
-          ...filter,
-          items
-        },
-        isFirstLoading,
-        displaySettings,
-        generalDataSettings,
-        settings,
-        searchFacetDistribution,
-        clickedFacets,
-        handleFilterChange,
-        defaultFacetStats,
-        valueFilterPriceChange,
-        setValueFilterPriceChange,
-        valueFilterOnSaleChange,
-        setValueFilterOnSaleChange,
-        separatedFilterItem,
-        setSeparatedFilterItem,
-        scrollElementSelector,
-        layoutType,
-        collectionId,
-        colorSwatches
-      }
-    );
+    const getFacetComponent = (props2) => {
+      const { ulClasses = "" } = props2 || {};
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FacetComponent,
+        {
+          filter: {
+            ...filter,
+            items
+          },
+          isFirstLoading,
+          displaySettings,
+          generalDataSettings,
+          settings,
+          searchFacetDistribution,
+          clickedFacets,
+          setClickedFacets,
+          handleFilterChange,
+          defaultFacetStats,
+          valueFilterPriceChange,
+          setValueFilterPriceChange,
+          valueFilterOnSaleChange,
+          setValueFilterOnSaleChange,
+          separatedFilterItem,
+          setSeparatedFilterItem,
+          scrollElementSelector,
+          layoutType,
+          collectionId,
+          colorSwatches,
+          ulClasses,
+          languageSettings,
+          triggerClickedFacets,
+          setTriggerClickedFacets,
+          handleQueryStringFilter,
+          previousStateFromOutside: previousState
+        }
+      );
+    };
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length))
       classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
     if (display.toLowerCase() === "tree")