@sledge-app/react-instant-search 2.0.9 → 2.0.11

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

@@ -692,14 +692,18 @@ const Popover = ({
   alignOffset = 0
 }) => {
   const [open, setOpen] = React__default.useState(withOpenState ? isOpen : false);
-  React__default.useEffect(() => {
-    var _a;
-    let arrowElement = (_a = document == null ? void 0 : document.querySelector(".PopoverArrow")) == null ? void 0 : _a.parentElement;
+  const popoverContentRef = React__default.useRef(null);
+  const handleCustomArrow = () => {
+    var _a, _b;
+    const popoverContentRefCurrent = popoverContentRef == null ? void 0 : popoverContentRef.current;
+    if (!popoverContentRefCurrent)
+      return;
+    let arrowElement = (_b = (_a = popoverContentRefCurrent == null ? void 0 : popoverContentRefCurrent.querySelector) == null ? void 0 : _a.call(popoverContentRefCurrent, ".PopoverArrow")) == null ? void 0 : _b.parentElement;
     if (arrowElement && (customArrow == null ? void 0 : customArrow.length)) {
       arrowElement.style.display = "inline-flex";
       arrowElement.innerHTML = customArrow;
     }
-  }, [open]);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
     {
@@ -721,8 +725,12 @@ const Popover = ({
             sideOffset,
             alignOffset,
             align,
+            ref: popoverContentRef,
             ...setIsOpen && {
-              onOpenAutoFocus: () => setIsOpen(true),
+              onOpenAutoFocus: () => {
+                setIsOpen(true);
+                handleCustomArrow();
+              },
               onCloseAutoFocus: () => setIsOpen(false)
             },
             children: [
@@ -1098,7 +1106,7 @@ const Pagination = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__pagination", "data-pagination-type": type, children: renderPaginationLayout() });
 };
 const RadioGroup$1 = "";
-const rowRenderer = ({ virtualized, item, id, labelStyle }) => {
+const rowRenderer$1 = ({ virtualized, item, id, labelStyle }) => {
   const { index, key = "" } = virtualized || {};
   const { label, value } = item;
   const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -1112,7 +1120,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
     VirtualizedList,
     {
       rowCount: items == null ? void 0 : items.length,
-      rowRenderer: ({ index, key }) => rowRenderer({
+      rowRenderer: ({ index, key }) => rowRenderer$1({
         virtualized: {
           index,
           key
@@ -1126,7 +1134,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
       parentRef
     }
   ) : items.map(
-    (item, index) => rowRenderer({
+    (item, index) => rowRenderer$1({
       virtualized: {
         index
       },
@@ -1169,8 +1177,25 @@ const ColorSwatch = ({ id, name, value, rgb, image, required, checked, onClick }
   );
 };
 const Select$1 = "";
-const Select = ({ name, placeholder, required, defaultValue, items, labelStyle = {}, onValueChange }) => {
+const rowRenderer = ({ virtualized, item, labelStyle }) => {
+  const { index, key = "" } = virtualized || {};
+  const { label, value } = item;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
+};
+const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, labelStyle = {}, onValueChange, useVirtualized = false }) => {
   const [isLoading, setIsLoading] = React__default.useState(true);
+  const [items, setItems] = React__default.useState([]);
+  const selectViewportRef = React__default.useRef(null);
+  const scrollToPosition = (direction) => {
+    const directionMultiplier = direction === "up" ? -1 : 1;
+    if (selectViewportRef.current) {
+      const currentPosition = selectViewportRef.current.scrollTop;
+      const scrollAmount = 500 * directionMultiplier;
+      selectViewportRef.current.scrollTo({
+        top: currentPosition + scrollAmount
+      });
+    }
+  };
   React__default.useEffect(() => {
     setIsLoading(true);
     setTimeout(() => {
@@ -1187,19 +1212,22 @@ const Select = ({ name, placeholder, required, defaultValue, items, labelStyle =
         selectRootElement.classList.toggle("sledge__select-root");
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", "data-use-virtualized": useVirtualized, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $cc7e05a45900e73f$export$be92b6f5f03c0fe9,
     {
       name,
       required,
       onValueChange,
-      onOpenChange: (open) => handleClassNameRoot(open),
+      onOpenChange: (open) => {
+        handleClassNameRoot(open);
+        setItems(open ? itemsProp : []);
+      },
       ...defaultValue ? {
         defaultValue
       } : {},
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "sledge__select-trigger", style: labelStyle, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
+          useVirtualized && defaultValue ? /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { children: defaultValue }) : /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
           /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "sledge__select-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "path",
             {
@@ -1211,30 +1239,62 @@ const Select = ({ name, placeholder, required, defaultValue, items, labelStyle =
           ) }) })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$602eac185826482c, { className: "sledge__select-portal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "sledge__select-content", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$2f60d3ec9ad468f2, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            $cc7e05a45900e73f$export$2f60d3ec9ad468f2,
             {
-              d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
-              fill: "currentColor",
-              fillRule: "evenodd",
-              clipRule: "evenodd"
+              className: "sledge__select-scroll-button",
+              ...useVirtualized ? {
+                onClick: () => scrollToPosition("up")
+              } : {},
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "path",
+                {
+                  d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
+                  fill: "currentColor",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd"
+                }
+              ) })
             }
-          ) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", children: items.map(
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", ref: selectViewportRef, children: useVirtualized ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            VirtualizedList,
+            {
+              rowCount: items == null ? void 0 : items.length,
+              rowRenderer: ({ index, key }) => rowRenderer({
+                virtualized: {
+                  index,
+                  key
+                },
+                item: items == null ? void 0 : items[index],
+                labelStyle
+              }),
+              parentRef: selectViewportRef
+            }
+          ) : items.map(
             (item, index) => {
               const { label, value } = item;
               return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$bf1aedc3039c8d63, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            $cc7e05a45900e73f$export$bf1aedc3039c8d63,
             {
-              d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
-              fill: "currentColor",
-              fillRule: "evenodd",
-              clipRule: "evenodd"
+              className: "sledge__select-scroll-button",
+              ...useVirtualized ? {
+                onClick: () => scrollToPosition("down")
+              } : {},
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "path",
+                {
+                  d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
+                  fill: "currentColor",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd"
+                }
+              ) })
             }
-          ) }) })
+          )
         ] }) })
       ]
     }
@@ -7462,7 +7522,8 @@ const Facet = (props) => {
     if (!is_item_pagination || isDisplaySlider) {
       return {
         haveNextPage: false,
-        currentItems: arrFacetValues
+        currentItems: arrFacetValues,
+        allItems: arrFacetValues
       };
     }
     const lastItemLimit = separatedFilterItem[getValue] || Number(item_pagination_limit);
@@ -7474,6 +7535,7 @@ const Facet = (props) => {
     return {
       haveNextPage: haveNextPage2,
       currentItems: currentItems2,
+      allItems: arrFacetValues,
       totalItems: Number(arrFacetValues == null ? void 0 : arrFacetValues.length)
     };
   };
@@ -7482,7 +7544,7 @@ const Facet = (props) => {
     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({
+  const { haveNextPage, currentItems, allItems, totalItems } = handleFacetLoadMore({
     facetItems: items
   });
   const filterSearchShowMoreId = stringToSlug(`filter-search-show-more-${getValue}`);
@@ -7523,7 +7585,7 @@ const Facet = (props) => {
     if (!(showFacet && isPreviousStateFromOutsideChanged))
       setShowFacet(false);
   }, [keywordFacet, clickedFacets]);
-  const loadMoreComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const loadMoreComponent = display.toLowerCase() === "select" ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       className: "sledge-instant-search__result-filter-item-show-more",
@@ -7756,7 +7818,7 @@ const Facet = (props) => {
         parentRef: ulListRef
       }
     ) });
-  } else if (display.toLowerCase() === "select" && (currentItems == null ? void 0 : currentItems.length)) {
+  } else if (display.toLowerCase() === "select" && (allItems == null ? void 0 : allItems.length)) {
     blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Select,
       {
@@ -7767,7 +7829,7 @@ const Facet = (props) => {
           value: getValue2,
           force: true
         }),
-        items: currentItems == null ? void 0 : currentItems.map((item) => {
+        items: allItems == null ? void 0 : allItems.map((item) => {
           const { labelName, value: value2, counter } = item;
           return {
             label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
@@ -7775,7 +7837,8 @@ const Facet = (props) => {
           };
         }),
         defaultValue: clickedFacets && ((_e = clickedFacets[value]) == null ? void 0 : _e.length) ? clickedFacets[value][0] : "",
-        labelStyle: filter_option_style
+        labelStyle: filter_option_style,
+        useVirtualized: true
       }
     ) });
   } else if (display.toLowerCase() === "swatch" && (currentItems == null ? void 0 : currentItems.length)) {
@@ -9573,7 +9636,7 @@ const SearchResultWidget = (props) => {
   ] });
 };
 const ResultProduct = React__default.memo((props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  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, _y, _z;
   const {
     layoutType,
     keyword,
@@ -9658,22 +9721,25 @@ const ResultProduct = React__default.memo((props) => {
   } = props || {};
   const { collectionId, collectionName } = params || {};
   const isLoadMore = ["load_more", "infinite_scroll"].includes((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.pagination_type);
+  const valueClickedLimitId = Number((searchParams == null ? void 0 : searchParams.get(queryLimit)) || defaultLimit || DEFAULT_LIMIT_VALUE[0]);
+  const valueDefaultLimit = ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.limit) || DEFAULT_LIMIT_VALUE[0];
+  const isLimitIdAvailable = Boolean((_g = (_f = (_e = (_d = (_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.allowed_limit) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (limit) => String(limit))) == null ? void 0 : _f.includes) == null ? void 0 : _g.call(_f, String(valueClickedLimitId)));
   const [isLoadingProduct, setIsLoadingProduct] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
-  const [clickedLimitId, setClickedLimitId] = React__default.useState(Number((searchParams == null ? void 0 : searchParams.get(queryLimit)) || defaultLimit || DEFAULT_LIMIT_VALUE[0]));
+  const [clickedLimitId, setClickedLimitId] = React__default.useState(Number(isLimitIdAvailable ? valueClickedLimitId : valueDefaultLimit));
   const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState(
     keyOpenFilters({
       items: allowedFilter
     })
   );
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
-  const [searchResult, setSearchResult] = React__default.useState(((_d = (_c = (_b = propsData == null ? void 0 : propsData.result) == null ? void 0 : _b.results) == null ? void 0 : _c[0]) == null ? void 0 : _d.hits) || []);
-  const [hitsPerPageResult, setHitsPerPageResult] = React__default.useState(((_g = (_f = (_e = propsData == null ? void 0 : propsData.result) == null ? void 0 : _e.results) == null ? void 0 : _f[0]) == null ? void 0 : _g.hitsPerPage) || 0);
+  const [searchResult, setSearchResult] = React__default.useState(((_j = (_i = (_h = propsData == null ? void 0 : propsData.result) == null ? void 0 : _h.results) == null ? void 0 : _i[0]) == null ? void 0 : _j.hits) || []);
+  const [hitsPerPageResult, setHitsPerPageResult] = React__default.useState(((_m = (_l = (_k = propsData == null ? void 0 : propsData.result) == null ? void 0 : _k.results) == null ? void 0 : _l[0]) == null ? void 0 : _m.hitsPerPage) || 0);
   const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
   const [currentPage, setCurrentPage] = React__default.useState(Number(searchParams == null ? void 0 : searchParams.get(queryPage)) && !isLoadMore ? Number(searchParams == null ? void 0 : searchParams.get(queryPage)) : 1);
   const [totalPage, setTotalPage] = React__default.useState(0);
-  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_j = (_i = (_h = propsData == null ? void 0 : propsData.result) == null ? void 0 : _h.results) == null ? void 0 : _i[0]) == null ? void 0 : _j.totalHits) || 0);
+  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_p = (_o = (_n = propsData == null ? void 0 : propsData.result) == null ? void 0 : _n.results) == null ? void 0 : _o[0]) == null ? void 0 : _p.totalHits) || 0);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
@@ -9725,13 +9791,13 @@ const ResultProduct = React__default.memo((props) => {
   };
   const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator(totalSearchResult) : null);
   const previousState = usePrevious({ clickedLimitId, clickedSortId, clickedFacets, clickedTabIndexId });
-  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.title) || {};
+  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.title) || {};
   const {
     color: filter_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.option) || {};
+  } = ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -9744,7 +9810,7 @@ const ResultProduct = React__default.memo((props) => {
     font_size: filter_button_font_size,
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
-  } = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.button) || {};
+  } = ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -10003,11 +10069,16 @@ const ResultProduct = React__default.memo((props) => {
     if (isReplaceData) {
       setCurrentPage(1);
       setSearchResult([]);
-      const searchParams2 = new URLSearchParams(document.location.search);
-      searchParams2.set(queryPage, String(1));
-      searchParams2.set(queryLimit, String(clickedLimitId));
+      searchParams.set(queryPage, String(1));
+      searchParams.set(queryLimit, String(clickedLimitId));
       if (!objectPresent(previewSettings))
-        window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
+        window.history.pushState(null, "", `${document.location.pathname}?${searchParams.toString()}`);
+    } else {
+      if (!isLimitIdAvailable) {
+        searchParams.set(queryLimit, String(valueDefaultLimit));
+        if (!objectPresent(previewSettings))
+          window.history.pushState(null, "", `${document.location.pathname}?${searchParams.toString()}`);
+      }
     }
     setIsLoading(isReplaceData ? true : !isLoadMore2);
     let response;
@@ -10299,7 +10370,7 @@ const ResultProduct = React__default.memo((props) => {
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     PaginationOrLoadMore,
     {
-      type: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.pagination_type,
+      type: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.pagination_type,
       isLoadMore,
       isLoadingButtonLoadMore,
       handleLoadMore: () => {
@@ -10308,7 +10379,7 @@ const ResultProduct = React__default.memo((props) => {
         setIsReplaceWidgetList == null ? void 0 : setIsReplaceWidgetList(true);
       },
       buttonLoadMoreText: isLoadingButtonLoadMore ? button_loading || "Loading..." : button_load_more || "Load More",
-      isInfiniteScroll: ((_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.pagination_type) === "infinite_scroll",
+      isInfiniteScroll: ((_u = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _u.pagination_type) === "infinite_scroll",
       currentPage,
       totalPage,
       totalResult: totalSearchResult,
@@ -10317,7 +10388,7 @@ const ResultProduct = React__default.memo((props) => {
       handlePageChange
     }
   );
-  const summaryTextComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) ? summaryText : null });
+  const summaryTextComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_v = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _v.show_total_products) ? summaryText : null });
   const searchFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { placeholder: language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product, value: keyword, handleChangeSearch: handleChangeKeyword });
   /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { placeholder: language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product, value: keyword, handleChangeSearch: handleChangeKeyword });
   const sortComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10330,7 +10401,7 @@ const ResultProduct = React__default.memo((props) => {
       overridePlaceholderOnMobile: !mobileShowSelectedSort ? mobile_sort_placeholder || "Sort" : null
     }
   );
-  const limitComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Limit, { label: language_limit, options: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.allowed_limit, clickedOption: clickedLimitId, handleChangeOption: handleChangeLimit });
+  const limitComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Limit, { label: language_limit, options: (_w = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _w.allowed_limit, clickedOption: clickedLimitId, handleChangeOption: handleChangeLimit });
   const productGridComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     ProductGrid,
     {
@@ -10344,9 +10415,9 @@ const ResultProduct = React__default.memo((props) => {
         };
       }),
       setting: {
-        show_vendor: (_r = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _r.show_vendor,
-        show_sku: (_s = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _s.show_sku,
-        show_price: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.show_price,
+        show_vendor: (_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.show_vendor,
+        show_sku: (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.show_sku,
+        show_price: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_price,
         language_button_add_to_cart: language_add_to_cart,
         language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
       },