@sledge-app/react-instant-search 2.0.6 → 2.0.8

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

@@ -4272,7 +4272,8 @@ const ProductCard = React__default.memo((props) => {
     dataWishlists,
     generalDataSettings,
     previewSettings,
-    isFlyout
+    isFlyout,
+    additionalCardProps
   } = props;
   const {
     show_vendor = true,
@@ -4317,6 +4318,7 @@ const ProductCard = React__default.memo((props) => {
   let isOutOfStock = showOptionOutOfStock ? !Boolean(selectedVariantStock > 0 || selectedVariantInventoryManagement === null || selectedVariantInventoryPolicy === "continue") : false;
   let isOnSale = parseFloat(String(compare_at_price)) ? parseFloat(String(compare_at_price)) > parseFloat(String(price)) : false;
   const { money_format } = generalDataSettings || {};
+  const { forLoopIndex, forLoopIndexWithPage } = additionalCardProps || {};
   let component = null;
   if (CardsComponent) {
     const CardsProps = {
@@ -4342,11 +4344,13 @@ const ProductCard = React__default.memo((props) => {
       },
       showPopupComponent,
       setShowPopupComponent,
-      sourceApp
+      sourceApp,
+      forLoopIndex,
+      forLoopIndexWithPage
     };
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
   } else {
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFlyout ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-flyout", children: [
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFlyout ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-flyout", "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-flyout-wishlist-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Trigger,
         {
@@ -4437,7 +4441,7 @@ const ProductCard = React__default.memo((props) => {
           )
         ] }) : null
       ] })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", "data-for-loop-index": forLoopIndex, "data-for-loop-index-with-page": forLoopIndexWithPage, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -4629,7 +4633,21 @@ const ProductCard = React__default.memo((props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
 });
 const ProductGrid = React__default.memo((props) => {
-  const { type, className = "", data, setting, sourceApp = null, useSlider = false, isFlyout = false, onAfterAddToCart, onAfterRenderProduct, currentColumnGrid, previewSettings } = props;
+  const {
+    type,
+    className = "",
+    data,
+    setting,
+    sourceApp = null,
+    useSlider = false,
+    isFlyout = false,
+    onAfterAddToCart,
+    onAfterRenderProduct,
+    currentColumnGrid,
+    previewSettings,
+    hitsPerPage,
+    currentPage
+  } = props;
   const { redirect_add_to_cart = true } = setting || {};
   const [clickedAddToCartId, setClickedAddToCartId] = React__default.useState(null);
   const [generalDataSettings, setGeneralDataSettings] = React__default.useState({});
@@ -4731,6 +4749,10 @@ const ProductGrid = React__default.memo((props) => {
             handleAddToCart,
             clickedAddToCartId,
             generalDataSettings,
+            additionalCardProps: {
+              forLoopIndex: index,
+              forLoopIndexWithPage: Number(currentPage) && Number(hitsPerPage) ? index + (Number(currentPage) - 1) * Number(hitsPerPage) : index
+            },
             ...props
           },
           `sledge-product-card_${index}`
@@ -7949,8 +7971,8 @@ const SummaryTextVertical = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical ${className}`, children });
 };
 const RenderLayout = (props) => {
-  const { children, device, layout = "" } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__render-layout", "data-render-device": device, "data-render-layout": layout, children });
+  const { children, device, layout = "", additionalProps = {} } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__render-layout", "data-render-device": device, "data-render-layout": layout, ...additionalProps, children });
 };
 const FilterHorizontalBlockMobile = (props) => {
   const { children } = props;
@@ -7969,7 +7991,7 @@ const ProductGridPaginationWrapper = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-product-grid-pagination-wrapper", children });
 };
 const FilterVerticalLayout = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     displaySettings,
     allowedFilter,
@@ -8011,7 +8033,7 @@ const FilterVerticalLayout = (props) => {
     }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
       isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultDataKeyword, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField }),
+        ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
@@ -8020,7 +8042,7 @@ const FilterVerticalLayout = (props) => {
       isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: productGridSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SummaryTextVertical, { className: "sledge-instant-search__result-summary-text-with-column-grid-selector-wrapper", children: [
           summaryText,
-          ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
         ] }),
         (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           productGrid,
@@ -8031,8 +8053,21 @@ const FilterVerticalLayout = (props) => {
   ] }) });
 };
 const FilterHorizontalLayout = (props) => {
-  var _a, _b;
-  const { displaySettings, allowedFilter, isFirstLoading, isLoading, isLoadingProduct, isLoadingSetting, searchResult = [], propsData, hideFilterWhenOneValue, components, skeleton } = props;
+  var _a, _b, _c;
+  const {
+    displaySettings,
+    allowedFilter,
+    isFirstLoading,
+    isLoading,
+    isLoadingProduct,
+    isLoadingSetting,
+    searchResult = [],
+    propsData,
+    hideFilterWhenOneValue,
+    components,
+    skeleton,
+    handleSearchResultFirstTime
+  } = props;
   const {
     filterHorizontal = null,
     summaryText = null,
@@ -8056,16 +8091,16 @@ const FilterHorizontalLayout = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     isShowFilter ? filterHorizontal == null ? void 0 : filterHorizontal({
       deviceType: "desktop",
-      isSkeleton: Boolean(isFirstLoading && !propsData || isLoadingSetting && !propsData)
+      isSkeleton: Boolean(handleSearchResultFirstTime || isFirstLoading && !propsData || isLoadingSetting && !propsData)
     }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(ResultWrapper, { displaySettings, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
       isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultDataKeyword, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField }),
+        handleSearchResultFirstTime ? summaryTextSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
+        ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit }),
-          ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
         ] })
       ] }),
       isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: productGridSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -8076,7 +8111,7 @@ const FilterHorizontalLayout = (props) => {
   ] });
 };
 const FilterFlyoutLayout$1 = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     displaySettings,
     languageSettings,
@@ -8135,7 +8170,7 @@ const FilterFlyoutLayout$1 = (props) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_filter || "Filter" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(FilterIcon, { width: 18, height: 18, color: "#393d4e" })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField })
+          ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
@@ -8145,7 +8180,7 @@ const FilterFlyoutLayout$1 = (props) => {
       isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: productGridSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SummaryTextVertical, { className: "sledge-instant-search__result-summary-text-with-column-grid-selector-wrapper", children: [
           summaryText,
-          ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
         ] }),
         (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           productGrid,
@@ -8156,7 +8191,7 @@ const FilterFlyoutLayout$1 = (props) => {
   ] });
 };
 const EnterpriseLayout = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     displaySettings,
     allowedFilter,
@@ -8202,7 +8237,8 @@ const EnterpriseLayout = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(FilterIcon, { width: 18, height: 18, color: "#393d4e" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null })
+      ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_search_bar) ? null : searchField,
+      ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) }) : null
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-filter-toggle-panel ${"animated"}`, "data-filter-toggle": openFilterToggle ? "open" : "closed", children: filterVertical == null ? void 0 : filterVertical({
@@ -8217,7 +8253,7 @@ const EnterpriseLayout = (props) => {
   ] }) });
 };
 const YuvaLayout = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     displaySettings,
     allowedFilter,
@@ -8232,7 +8268,8 @@ const YuvaLayout = (props) => {
     languageSettings,
     openFilterToggle = false,
     setOpenFilterToggle = () => {
-    }
+    },
+    handleSearchResultFirstTime
   } = props;
   const { filter: language_filter } = languageSettings || {};
   const {
@@ -8262,9 +8299,10 @@ const YuvaLayout = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_filter || "Filter" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(FilterIcon, { width: 18, height: 18, color: "#393d4e" })
       ] }),
+      ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_search_bar) ? null : searchField,
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
-        summaryText,
-        ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null,
+        handleSearchResultFirstTime ? summaryTextSkeleton : summaryText,
+        ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort })
       ] })
     ] }),
@@ -8281,8 +8319,21 @@ const YuvaLayout = (props) => {
   ] }) });
 };
 const ToyoLayout = (props) => {
-  var _a, _b, _c;
-  const { displaySettings, allowedFilter, isFirstLoading, isLoading, isLoadingProduct, isLoadingSetting, searchResult = [], propsData, hideFilterWhenOneValue, components, skeleton } = props;
+  var _a, _b, _c, _d;
+  const {
+    displaySettings,
+    allowedFilter,
+    isFirstLoading,
+    isLoading,
+    isLoadingProduct,
+    isLoadingSetting,
+    searchResult = [],
+    propsData,
+    hideFilterWhenOneValue,
+    components,
+    skeleton,
+    handleSearchResultFirstTime
+  } = props;
   const {
     filterHorizontal = null,
     filterActive = null,
@@ -8305,18 +8356,21 @@ const ToyoLayout = (props) => {
   } = skeleton || {};
   const isShowFilter = ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.enable_on_search) && ((_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.layout) === "toyo" && !hideFilterWhenOneValue;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResultWrapper, { displaySettings, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
-    isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultDataKeyword, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
-      isShowFilter ? filterHorizontal == null ? void 0 : filterHorizontal({
-        deviceType: "desktop",
-        isSkeleton: Boolean(isFirstLoading && !propsData || isLoadingSetting && !propsData),
-        isHorizontalGroup: true,
-        showOnlyItems: true,
-        components: {
-          sort
-        }
-      }) : null,
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null })
+    isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_search_bar) ? null : searchField,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultDataKeyword, { children: [
+        handleSearchResultFirstTime ? summaryTextSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
+        isShowFilter ? filterHorizontal == null ? void 0 : filterHorizontal({
+          deviceType: "desktop",
+          isSkeleton: Boolean(handleSearchResultFirstTime || isFirstLoading && !propsData || isLoadingSetting && !propsData),
+          isHorizontalGroup: true,
+          showOnlyItems: true,
+          components: {
+            sort
+          }
+        }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null })
+      ] })
     ] }),
     isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: productGridSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       filterActive == null ? void 0 : filterActive(),
@@ -8326,8 +8380,21 @@ const ToyoLayout = (props) => {
   ] }) }) });
 };
 const FilterHorizontalGroupLayout = (props) => {
-  var _a, _b;
-  const { displaySettings, allowedFilter, isFirstLoading, isLoading, isLoadingProduct, isLoadingSetting, searchResult = [], propsData, hideFilterWhenOneValue, components, skeleton } = props;
+  var _a, _b, _c;
+  const {
+    displaySettings,
+    allowedFilter,
+    isFirstLoading,
+    isLoading,
+    isLoadingProduct,
+    isLoadingSetting,
+    searchResult = [],
+    propsData,
+    hideFilterWhenOneValue,
+    components,
+    skeleton,
+    handleSearchResultFirstTime
+  } = props;
   const {
     filterHorizontal = null,
     summaryText = null,
@@ -8351,17 +8418,17 @@ const FilterHorizontalGroupLayout = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     isShowFilter ? filterHorizontal == null ? void 0 : filterHorizontal({
       deviceType: "desktop",
-      isSkeleton: Boolean(isFirstLoading && !propsData || isLoadingSetting && !propsData),
+      isSkeleton: Boolean(handleSearchResultFirstTime || isFirstLoading && !propsData || isLoadingSetting && !propsData),
       isHorizontalGroup: true
     }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(ResultWrapper, { displaySettings, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
       isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultDataKeyword, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField }),
+        handleSearchResultFirstTime ? summaryTextSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
+        ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFieldDesktop, { children: searchField }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit }),
-          ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
         ] })
       ] }),
       isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: productGridSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -8372,7 +8439,7 @@ const FilterHorizontalGroupLayout = (props) => {
   ] });
 };
 const DesktopLayout = (props) => {
-  var _a;
+  var _a, _b;
   const { displaySettings } = props;
   const renderLayout = () => {
     var _a2;
@@ -8395,7 +8462,17 @@ const DesktopLayout = (props) => {
         return null;
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(RenderLayout, { device: "desktop", layout: (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.layout, children: renderLayout() });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    RenderLayout,
+    {
+      device: "desktop",
+      layout: (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.layout,
+      additionalProps: {
+        "data-hide-search-bar": (_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar
+      },
+      children: renderLayout()
+    }
+  );
 };
 const FilterFlyoutLayout = (props) => {
   var _a;
@@ -9477,7 +9554,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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const {
     layoutType,
     keyword,
@@ -9573,10 +9650,11 @@ const ResultProduct = React__default.memo((props) => {
   );
   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 [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(((_g = (_f = (_e = propsData == null ? void 0 : propsData.result) == null ? void 0 : _e.results) == null ? void 0 : _f[0]) == null ? void 0 : _g.totalHits) || 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 [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
@@ -9628,13 +9706,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 } = ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.title) || {};
+  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_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.option) || {};
+  } = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -9647,7 +9725,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
-  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.button) || {};
+  } = ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -9834,7 +9912,7 @@ const ResultProduct = React__default.memo((props) => {
     const result = layoutType === "default" && isFirstTimeOrOnSearch ? (_b2 = resultData == null ? void 0 : resultData.find) == null ? void 0 : _b2.call(resultData, ({ indexUid }) => indexUid.includes(index_product)) : resultData;
     if (!result)
       return;
-    const { hits, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
+    const { hits, hitsPerPage, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
     const updateTabs = () => {
       const valueAllowedTabs = objectPresent(previewSettings) ? tabs : allowedTabs;
       if (valueAllowedTabs == null ? void 0 : valueAllowedTabs.length) {
@@ -9891,6 +9969,7 @@ const ResultProduct = React__default.memo((props) => {
     setIsLoadingButtonLoadMore(false);
     setIsReplaceWidgetList == null ? void 0 : setIsReplaceWidgetList(false);
     setSearchResult(!(hits == null ? void 0 : hits.length) ? [] : (prevState) => (searchResult == null ? void 0 : searchResult.length) && isLoadMore2 ? [...prevState, ...hits] : hits);
+    setHitsPerPageResult(hitsPerPage);
     setSearchProcessingTimeMs(processingTimeMs || 0);
     setTotalPage(totalPages);
     setTotalSearchResult(totalHits || 0);
@@ -10201,7 +10280,7 @@ const ResultProduct = React__default.memo((props) => {
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     PaginationOrLoadMore,
     {
-      type: (_k = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _k.pagination_type,
+      type: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.pagination_type,
       isLoadMore,
       isLoadingButtonLoadMore,
       handleLoadMore: () => {
@@ -10210,7 +10289,7 @@ const ResultProduct = React__default.memo((props) => {
         setIsReplaceWidgetList == null ? void 0 : setIsReplaceWidgetList(true);
       },
       buttonLoadMoreText: isLoadingButtonLoadMore ? button_loading || "Loading..." : button_load_more || "Load More",
-      isInfiniteScroll: ((_l = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _l.pagination_type) === "infinite_scroll",
+      isInfiniteScroll: ((_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.pagination_type) === "infinite_scroll",
       currentPage,
       totalPage,
       totalResult: totalSearchResult,
@@ -10219,7 +10298,7 @@ const ResultProduct = React__default.memo((props) => {
       handlePageChange
     }
   );
-  const summaryTextComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_total_products) ? summaryText : null });
+  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 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(
@@ -10232,7 +10311,7 @@ const ResultProduct = React__default.memo((props) => {
       overridePlaceholderOnMobile: !mobileShowSelectedSort ? mobile_sort_placeholder || "Sort" : null
     }
   );
-  const limitComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Limit, { label: language_limit, options: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.allowed_limit, clickedOption: clickedLimitId, handleChangeOption: handleChangeLimit });
+  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 productGridComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
     ProductGrid,
     {
@@ -10246,9 +10325,9 @@ const ResultProduct = React__default.memo((props) => {
         };
       }),
       setting: {
-        show_vendor: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_vendor,
-        show_sku: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_sku,
-        show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price,
+        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,
         language_button_add_to_cart: language_add_to_cart,
         language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
       },
@@ -10262,7 +10341,9 @@ const ResultProduct = React__default.memo((props) => {
       dataWishlists: propsData == null ? void 0 : propsData.wishlists,
       dataReviews: propsData == null ? void 0 : propsData.reviews,
       currentColumnGrid,
-      previewSettings
+      previewSettings,
+      hitsPerPage: hitsPerPageResult,
+      currentPage
     }
   );
   const resultEmptyComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, { ...props });