@sledge-app/react-instant-search 1.0.39 → 1.0.41

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

@@ -175,6 +175,11 @@ const PAYLOAD_API_ALIASES = {
   PUT: "dEnOjbvTzULLK",
   DELETE: "pLC93Tvsu6g7H"
 };
+const HIERARCHICAL_FACET_OBJECT_ALIASES = {
+  collections: "hierarchicalCollections",
+  product_type: "hierarchicalProductType"
+};
+const MAX_LIMIT_HIERARCHICAL = 7;
 async function swr(url, options) {
   if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
     const data = await getData(url);
@@ -382,6 +387,7 @@ const getFillRating = ({
 const stripTags = (html) => {
   return html.replace(/(<([^>]+)>)/gi, "");
 };
+const stringToSlug = (text) => text.toLowerCase().replace(/[^\w ]+/g, "").replace(/ +/g, "-");
 const root = "";
 const Loading = "";
 const ConfirmationPopup = "";
@@ -3847,7 +3853,7 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
   const {
     layoutType = "default",
     width = DEFAULT_MAX_WIDTH_COMPONENT,
@@ -3888,6 +3894,7 @@ const SearchResultWidget = (props) => {
   const [defaultSort, setDefaultSort] = React__default.useState(((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.default_sort) || "");
   const [showOutOfStock, setShowOutOfStock] = React__default.useState((_i = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _i.show_out_of_stock);
   const [languageSettings, setLanguageSettings] = React__default.useState(((_j = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _j.languages) || {});
+  const [hierarchicalProductTypeSettings, setHierarchicalProductTypeSettings] = React__default.useState(((_k = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _k.hierarchical_product_type) || {});
   const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const [defaultFacetStats, setDefaultFacetStats] = React__default.useState({});
   const [hideFilterWhenOneValue, setHideFilterWhenOneValue] = React__default.useState(false);
@@ -3915,7 +3922,7 @@ const SearchResultWidget = (props) => {
   });
   const { isRenderApp, isJsVersion, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
-  const { value: valueRenderInstantSearchResult, trigger: triggerRenderInstantSearchResult } = ((_k = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.instantSearch) == null ? void 0 : _k.searchResult) || {};
+  const { value: valueRenderInstantSearchResult, trigger: triggerRenderInstantSearchResult } = ((_l = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.instantSearch) == null ? void 0 : _l.searchResult) || {};
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const handleChangeTabIndex = (params2) => {
@@ -3936,13 +3943,14 @@ const SearchResultWidget = (props) => {
         let isSetFilter = false;
         let getFacets = !isSetFilter ? filters == null ? void 0 : filters.map((filter) => {
           const { collections, items } = filter;
+          const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] : value);
           if (collectionId && (collections == null ? void 0 : collections.includes(Number(collectionId)))) {
             isSetFilter = true;
-            return items == null ? void 0 : items.map(({ value }) => value);
+            return newItems;
           } else {
             if (collections == null ? void 0 : collections.includes("all")) {
               isSetFilter = true;
-              return items == null ? void 0 : items.map(({ value }) => value);
+              return newItems;
             }
           }
         }) : [];
@@ -4028,7 +4036,7 @@ const SearchResultWidget = (props) => {
     response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
     if (!response)
       return;
-    const { allowed_sorts, default_sort, filters, index_product, tabs, hidden_tags, display, colors, show_out_of_stock, languages } = response;
+    const { allowed_sorts, default_sort, filters, index_product, tabs, hidden_tags, display, colors, show_out_of_stock, languages, hierarchical_product_type } = response;
     setAllowedSorts((allowed_sorts == null ? void 0 : allowed_sorts.length) ? allowed_sorts : []);
     setAllowedFilters((filters == null ? void 0 : filters.length) ? filters : []);
     setIndexProduct(index_product);
@@ -4038,6 +4046,7 @@ const SearchResultWidget = (props) => {
     setDefaultSort(default_sort);
     setShowOutOfStock(show_out_of_stock);
     setLanguageSettings(languages);
+    setHierarchicalProductTypeSettings(hierarchical_product_type);
     getFirstIndex = tabs.find(({ index }) => index.includes(index_product));
     if (Object.keys(getFirstIndex).length) {
       setClickedTabIndexId(getFirstIndex.index);
@@ -4074,8 +4083,8 @@ const SearchResultWidget = (props) => {
   }, [keyword]);
   const filterHorizontalSkeletonComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "lighten" }, index)) });
   const tabSkeleton = layoutType === "default" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-tab-list sledge-instant-search__result-tab-list-skeleton", children: [1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "122px", height: "28px", rounded: "md", color: "lighten" }, index)) }) : null;
-  const filterHorizontalSkeleton = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" && !hideFilterWhenOneValue ? filterHorizontalSkeletonComponent : null;
-  const filterVerticalSkeleton = ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.enable_on_search) && ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout) === "vertical" && !hideFilterWhenOneValue ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const filterHorizontalSkeleton = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.enable_on_search) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.layout) === "horizontal" && !hideFilterWhenOneValue ? filterHorizontalSkeletonComponent : null;
+  const filterVerticalSkeleton = ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.enable_on_search) && ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.layout) === "vertical" && !hideFilterWhenOneValue ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -4291,7 +4300,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.show_total_products) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
         width: "117px",
@@ -4312,12 +4321,12 @@ const SearchResultWidget = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "150px", height: "42px", color: "lighten", rounded: "lg" }) })
   ] });
   const searchAndSelectOptionSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-    ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.show_total_products) && ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout) === "horizontal" ? summaryTextSkeleton : null,
+    ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_total_products) && ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.layout) === "horizontal" ? summaryTextSkeleton : null,
     searchFieldSkeletonComponent,
     selectOptionSkeletonComponent
   ] });
   const mobileFilterWithSearchAndSelectOptionSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg sledge-instant-search__mobile-filter-search-skeleton", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-    ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.show_total_products) && ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "horizontal" ? summaryTextSkeleton : null,
+    ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.show_total_products) && ((_v = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _v.layout) === "horizontal" ? summaryTextSkeleton : null,
     searchFieldSkeletonComponent,
     filterHorizontalSkeletonComponent,
     selectOptionSkeletonComponent
@@ -4350,7 +4359,7 @@ const SearchResultWidget = (props) => {
       mobileFilterWithSearchAndSelectOptionSkeleton,
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalSkeleton }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-wrapper sledge-instant-search__result-wrapper-skeleton", children: [
-        ((_v = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _v.enable_on_search) && ((_w = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _w.layout) === "vertical" && !hideFilterWhenOneValue ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : null,
+        ((_w = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _w.enable_on_search) && ((_x = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _x.layout) === "vertical" && !hideFilterWhenOneValue ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: searchAndSelectOptionSkeleton }),
           productGridSkeleton
@@ -4375,6 +4384,7 @@ const SearchResultWidget = (props) => {
       defaultSort,
       showOutOfStock,
       languageSettings,
+      hierarchicalProductTypeSettings,
       query,
       params,
       isJsVersion,
@@ -4428,6 +4438,7 @@ const ResultProduct = (props) => {
     defaultSort,
     showOutOfStock,
     languageSettings,
+    hierarchicalProductTypeSettings,
     query,
     params,
     isJsVersion,
@@ -4486,6 +4497,7 @@ const ResultProduct = (props) => {
     pagination_info: language_pagination_info,
     total_result_text: language_total_result_text
   } = languageSettings || {};
+  const { separator: hierarchical_separator } = hierarchicalProductTypeSettings || {};
   const summaryTextGenerator = (totalResult) => {
     var _a2;
     const defaultSummaryText = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -4618,7 +4630,7 @@ const ResultProduct = (props) => {
     handleQueryStringFilter({});
     setValueFilterPriceChange([]);
   };
-  const handleFilterChange = (parentId, value, force = false) => {
+  const handleFilterChange = ({ parentId, value, force = false }) => {
     var _a2;
     let facets2 = [value];
     let isRange = ["variants.price"].includes(parentId);
@@ -4679,18 +4691,48 @@ const ResultProduct = (props) => {
     if (isRefreshPage)
       setCurrentPage(1);
     setIsLoading(true);
+    let hierarchicalFacetAliases = Object.entries(HIERARCHICAL_FACET_OBJECT_ALIASES).map((hierarchicalFacetAlias) => hierarchicalFacetAlias[1]);
+    let facetHierarchical = hierarchicalFacetAliases.reduce((item, key) => {
+      let defaultLevelHierarchical = {};
+      for (let iLevel = 0; iLevel < MAX_LIMIT_HIERARCHICAL; iLevel++) {
+        defaultLevelHierarchical[`lvl${iLevel}`] = [];
+      }
+      return { ...item, [key]: defaultLevelHierarchical };
+    }, {});
     let detectClickedFacets = detectQueryStringFilter(clickedFacets);
     let response;
     let filters = Object.entries(detectClickedFacets).map((facet) => {
-      var _a3, _b3;
+      var _a3, _b3, _c2;
       if ((facet == null ? void 0 : facet.length) && facet[1].length) {
-        let value = `'${facet[0]}'`;
         let isCustom = ["variants.inventory_quantity"].includes(facet[0]);
         let isRange = ["variants.price"].includes(facet[0]);
         let isArray = ["tags"].includes(facet[0]);
-        let items = Array.isArray(facet[1]) && ((_a3 = facet[1]) == null ? void 0 : _a3.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN ${JSON.stringify(facet[1])}` : `(${(_b3 = facet[1]) == null ? void 0 : _b3.map((item) => {
-          return isCustom ? `${value} ${item}` : `${value} = '${item}'`;
-        }).join(" OR ")})` : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN ${JSON.stringify(facet[1])}` : `${value} = '${facet[1]}'`;
+        let isHierarchical = hierarchicalFacetAliases.includes(facet[0]);
+        if (isHierarchical) {
+          (_a3 = facet[1]) == null ? void 0 : _a3.map((item) => {
+            const arrItem = String(item).split(hierarchical_separator);
+            if (arrItem == null ? void 0 : arrItem.length) {
+              if (Object.hasOwn(facetHierarchical[facet[0]], `lvl${arrItem.length - 1}`))
+                facetHierarchical[facet[0]][`lvl${arrItem.length - 1}`].push(item);
+            }
+          });
+          let arrItemHierarchicals = [];
+          Object.entries(facetHierarchical[facet[0]]).map((itemHierarchical) => {
+            var _a4;
+            if ((_a4 = itemHierarchical[1]) == null ? void 0 : _a4.length)
+              arrItemHierarchicals.push([`${facet[0]}.${itemHierarchical[0]}`, itemHierarchical[1]]);
+          });
+          let itemHierarchicals = arrItemHierarchicals == null ? void 0 : arrItemHierarchicals.map((filterHierarchical) => {
+            var _a4, _b4;
+            return Array.isArray(filterHierarchical[1]) && ((_a4 = filterHierarchical[1]) == null ? void 0 : _a4.length) > 1 ? `(${(_b4 = filterHierarchical[1]) == null ? void 0 : _b4.map((item) => {
+              return `'${filterHierarchical[0]}' = '${item}'`;
+            }).join(" OR ")})` : `'${filterHierarchical[0]}' = '${filterHierarchical[1]}'`;
+          }).join(" AND ");
+          return itemHierarchicals;
+        }
+        let items = Array.isArray(facet[1]) && ((_b3 = facet[1]) == null ? void 0 : _b3.length) > 1 ? isRange ? `'${facet[0]}' >= ${facet[1][0]} AND '${facet[0]}' <= ${facet[1][1]}` : isArray ? `'${facet[0]}' IN ${JSON.stringify(facet[1])}` : `(${(_c2 = facet[1]) == null ? void 0 : _c2.map((item) => {
+          return isCustom ? `'${facet[0]}' ${item}` : `'${facet[0]}' = '${item}'`;
+        }).join(" OR ")})` : isCustom ? `'${facet[0]}' ${facet[1]}` : isArray ? `'${facet[0]}' IN ${JSON.stringify(facet[1])}` : `'${facet[0]}' = '${facet[1]}'`;
         return items;
       } else
         return null;
@@ -4723,13 +4765,19 @@ const ResultProduct = (props) => {
     if (!isSetFilter)
       allowedFilters == null ? void 0 : allowedFilters.map((filter) => {
         const { collections, items } = filter;
+        const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => {
+          return {
+            ...otherItem,
+            value: (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] : value
+          };
+        });
         if (collectionId && (collections == null ? void 0 : collections.includes(Number(collectionId)))) {
           isSetFilter = true;
-          valueAllowedFilter = items;
+          valueAllowedFilter = newItems;
         } else {
           if (collections == null ? void 0 : collections.includes("all")) {
             isSetFilter = true;
-            valueAllowedFilter = items;
+            valueAllowedFilter = newItems;
           }
         }
       });
@@ -4819,15 +4867,25 @@ const ResultProduct = (props) => {
         ": ",
         (_a2 = String(valueText)) == null ? void 0 : _a2.replaceAll("_", " ")
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-refine-title-clear", onClick: () => handleFilterChange(name, value), children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 12, height: 12, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "path",
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
         {
-          d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
-          fill: "currentColor",
-          fillRule: "evenodd",
-          clipRule: "evenodd"
+          className: "sledge-instant-search__result-filter-item-refine-title-clear",
+          onClick: () => handleFilterChange({
+            parentId: name,
+            value
+          }),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 12, height: 12, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+              fill: "currentColor",
+              fillRule: "evenodd",
+              clipRule: "evenodd"
+            }
+          ) })
         }
-      ) }) })
+      )
     ] }, index);
   };
   const handleConditionNotUpdateFacetDistribution = (value) => {
@@ -4840,26 +4898,74 @@ const ResultProduct = (props) => {
     return isNoneFacetSelected || isOnFacetSelectedOne || isPriorityFacet;
   };
   const facetComponent = (filter) => {
-    var _a2, _b2;
-    const { value, label, display } = filter;
+    var _a2, _b2, _c2, _d2;
+    let { value, label, display, items } = filter;
     if (isFirstLoading)
       return null;
     let blockComponent = null;
-    let items = searchResultFacets[value];
     let isShowNumberMatchingProduct = (_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_number_matching_product;
-    let itemsComponent = [];
-    if (["checkbox", "radio", "select"].includes(display.toLowerCase()))
-      itemsComponent = items == null ? void 0 : items.map((item) => {
+    const handleFacetValues = (items2) => {
+      return items2 == null ? void 0 : items2.map((item) => {
+        const isFacetHierarchical = Object.hasOwn(item, "children");
         let labelName = item.name;
+        let getValue = isFacetHierarchical ? `${value}.lvl${item.level}` : value;
         if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
           labelName = languageSettings[item.value] || languageSettings[item.name];
-        let counter = handleConditionNotUpdateFacetDistribution(value) ? (item == null ? void 0 : item.total) || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][item.value] ? searchFacetDistribution[value][item.value] : 0;
+        let counter = handleConditionNotUpdateFacetDistribution(getValue) ? (item == null ? void 0 : item.total) || 0 : searchFacetDistribution[getValue] && searchFacetDistribution[getValue][item.value] ? searchFacetDistribution[getValue][item.value] : 0;
         return {
           ...item,
           labelName,
           counter
         };
       });
+    };
+    const handleFacetCheckbox = (facetValues) => {
+      var _a3;
+      return (_a3 = handleFacetValues(facetValues)) == null ? void 0 : _a3.map((facetValue, index) => {
+        var _a4;
+        const { labelName, value: itemValue, counter, children, level } = facetValue;
+        const isFacetHierarchical = Object.hasOwn(facetValue, "children");
+        const isHasChildren = isFacetHierarchical && (children == null ? void 0 : children.length);
+        const isChecked = Boolean(clickedFacets && ((_a4 = clickedFacets[value]) == null ? void 0 : _a4.includes(itemValue)));
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "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}` : ""}`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Checkbox,
+                  {
+                    id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
+                    name: value,
+                    value: itemValue,
+                    label: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
+                    onClick: (e) => handleFilterChange({
+                      parentId: value,
+                      value: e.currentTarget.value
+                    }),
+                    checked: isChecked,
+                    labelStyle: filter_option_style
+                  }
+                ),
+                isHasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  motion.div,
+                  {
+                    initial: false,
+                    animate: isChecked ? "open" : "closed",
+                    variants: ROTATE_FILTER_ARROW_ANIMATION,
+                    className: "sledge-instant-search__result-filter-checkbox-item-level-arrow",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" })
+                  }
+                ) : null
+              ]
+            },
+            index
+          ),
+          isHasChildren && isChecked ? handleFacetCheckbox(children) : null
+        ] });
+      });
+    };
     if (display.toLowerCase() === "slider") {
       items = defaultFacetStats[value] && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
       let defaultValueMin = valueFilterPriceChange[0] || (items == null ? void 0 : items.min);
@@ -4874,7 +4980,10 @@ const ResultProduct = (props) => {
             },
             max: items == null ? void 0 : items.max,
             step: 1,
-            setValueCommit: (valueCommit) => handleFilterChange(value, valueCommit),
+            setValueCommit: (valueCommit) => handleFilterChange({
+              parentId: value,
+              value: valueCommit
+            }),
             setValueChange: (valueChange) => setValueFilterPriceChange(valueChange)
           }
         ),
@@ -4883,38 +4992,27 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: defaultValueMax })
         ] })
       ] });
-    } else if (display.toLowerCase() === "checkbox" && (items == null ? void 0 : items.length)) {
-      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: itemsComponent == null ? void 0 : itemsComponent.map((item, index) => {
-        var _a3;
-        const { labelName, value: itemValue, counter } = item;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Checkbox,
-          {
-            id: `${value}_${index}`,
-            name: value,
-            value: itemValue,
-            label: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
-            onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            checked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(itemValue))),
-            labelStyle: filter_option_style
-          }
-        ) }, index);
-      }) });
+    } else if ((display.toLowerCase() === "checkbox" || display.toLowerCase() === "tree") && (items == null ? void 0 : items.length)) {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: handleFacetCheckbox(items) });
     } else if (display.toLowerCase() === "radio" && (items == null ? void 0 : items.length)) {
       blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         RadioGroup,
         {
           id: value,
           name: value,
-          onValueChange: (getValue) => handleFilterChange(value, getValue, true),
-          items: items == null ? void 0 : items.map((item) => {
+          onValueChange: (getValue) => handleFilterChange({
+            parentId: value,
+            value: getValue,
+            force: true
+          }),
+          items: (_b2 = handleFacetValues(items)) == null ? void 0 : _b2.map((item) => {
             const { labelName, value: value2, counter } = item;
             return {
               label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
               value: value2
             };
           }),
-          defaultValue: clickedFacets && ((_b2 = clickedFacets[value]) == null ? void 0 : _b2.length) ? clickedFacets[value][0] : "",
+          defaultValue: clickedFacets && ((_c2 = clickedFacets[value]) == null ? void 0 : _c2.length) ? clickedFacets[value][0] : "",
           labelStyle: filter_option_style
         }
       ) });
@@ -4924,8 +5022,12 @@ const ResultProduct = (props) => {
         {
           placeholder: `Select ${label}`,
           name: value,
-          onValueChange: (getValue) => handleFilterChange(value, getValue, true),
-          items: items == null ? void 0 : items.map((item) => {
+          onValueChange: (getValue) => handleFilterChange({
+            parentId: value,
+            value: getValue,
+            force: true
+          }),
+          items: (_d2 = handleFacetValues(items)) == null ? void 0 : _d2.map((item) => {
             const { labelName, value: value2, counter } = item;
             return {
               label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
@@ -4947,7 +5049,10 @@ const ResultProduct = (props) => {
             value: item.value,
             rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
             image: getColorSwatch == null ? void 0 : getColorSwatch.image,
-            onClick: (e) => handleFilterChange(value, e.currentTarget.value),
+            onClick: (e) => handleFilterChange({
+              parentId: value,
+              value: e.currentTarget.value
+            }),
             defaultChecked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)))
           }
         ) }, index);
@@ -4955,15 +5060,58 @@ const ResultProduct = (props) => {
     }
     return blockComponent;
   };
-  const filterVerticalComponents = allowedFilter.map((filter, indexFilter) => {
-    const { value, label, display } = filter;
-    let items = searchResultFacets[value];
+  const handleHierarchicalFacet = (indexValue) => {
+    var _a2;
+    let hierarchicalFacets = [];
+    for (let level = 0; level < MAX_LIMIT_HIERARCHICAL; level++) {
+      const facets2 = searchResultFacets[`${indexValue}.lvl${level}`];
+      let parent = hierarchicalFacets;
+      for (let facet of facets2) {
+        let names = facet.name.split(hierarchical_separator);
+        if (level > 0) {
+          parent = hierarchicalFacets;
+          for (let i = 0; i < names.length - 1; i++) {
+            let foundIndex = parent.findIndex((f) => f.name.trim().toLowerCase() === names[i].trim().toLowerCase());
+            parent = (_a2 = parent[foundIndex]) == null ? void 0 : _a2.children;
+          }
+          parent.push({
+            ...facet,
+            name: names[names.length - 1].trim(),
+            level,
+            children: []
+          });
+        }
+        if (level === 0)
+          parent.push({
+            ...facet,
+            name: names[names.length - 1].trim(),
+            level: 0,
+            children: []
+          });
+      }
+    }
+    return hierarchicalFacets;
+  };
+  const filterSettings = (filter) => {
+    const { value, display, indexFilter } = filter;
+    let isActive = clickedOpenFilterId === value;
+    let items = display.toLowerCase() === "tree" ? handleHierarchicalFacet(value) : searchResultFacets[value];
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
-    let getFacetComponent = facetComponent(filter);
-    if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
+    let getFacetComponent = facetComponent({
+      ...filter,
+      items
+    });
+    if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length))
       classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
-    }
+    if (display.toLowerCase() === "tree")
+      classesUlElement.push("sledge-instant-search__result-filter-item-tree");
+    let isLastIndex = allowedFilter.length - 1 === indexFilter;
+    return { isActive, isRender, classesUlElement, getFacetComponent, isLastIndex };
+  };
+  const filterVerticalComponents = allowedFilter.map((filter, indexFilter) => {
+    const { value, label } = filter;
+    const { isRender, classesUlElement, getFacetComponent } = filterSettings(filter);
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
@@ -4973,16 +5121,8 @@ const ResultProduct = (props) => {
     ] }, indexFilter) : null;
   });
   const filterHorizontalComponents = allowedFilter.map((filter, indexFilter) => {
-    const { value, label, display } = filter;
-    let isActive = clickedOpenFilterId === value;
-    let items = searchResultFacets[value];
-    let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
-    let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
-    let getFacetComponent = facetComponent(filter);
-    if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
-      classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
-    }
-    let isLastIndex = allowedFilter.length - 1 === indexFilter;
+    const { value, label } = filter;
+    const { isActive, isRender, classesUlElement, getFacetComponent, isLastIndex } = filterSettings(filter);
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Popover,
       {