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

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

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $d94698215c4408a7$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$be92b6f5f03c0fe9, m as $faa2e61a3361514f$export$13921ac0cc260818, n as $faa2e61a3361514f$export$9a58ef0d7ad3278c, o as $faa2e61a3361514f$export$6521433ed15a34db, p as $f99a8c78507165f7$export$be92b6f5f03c0fe9, q as $f99a8c78507165f7$export$6d08773d2e66f8f2, r as $f99a8c78507165f7$export$adb584737d712b70, s as $cc7e05a45900e73f$export$6d08773d2e66f8f2, t as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, u as $cc7e05a45900e73f$export$c3468e2714d175fa, v as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, w as $cc7e05a45900e73f$export$41fb9f06171c75f4, x as $cc7e05a45900e73f$export$4c8d1a57a761ef94, y as $cc7e05a45900e73f$export$f04a61298a47a40f, z as $cc7e05a45900e73f$export$602eac185826482c, A as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, B as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, C as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, D as $cc7e05a45900e73f$export$bf1aedc3039c8d63, E as motion, F as client, G as $d94698215c4408a7$export$a455218a85c89869, H as $d94698215c4408a7$export$7a7fa4424cb20976, I as $d94698215c4408a7$export$f69c19e57285b83a, J as $a093c7e1ec25a057$export$2881499e37b75b9a, K as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, L as $a093c7e1ec25a057$export$41fb9f06171c75f4, M as $a093c7e1ec25a057$export$602eac185826482c, N as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, O as $a093c7e1ec25a057$export$21b07c8f274aebd5, P as $57acba87d6e25586$export$be92b6f5f03c0fe9, Q as $57acba87d6e25586$export$d5c6c08dc2d3ca7, R as $57acba87d6e25586$export$9a4e88b92edfce6b, S as $57acba87d6e25586$export$6521433ed15a34db, T as MasonryResponsive, U as Masonry, V as useEmblaCarousel, W as useVirtualizer, X as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, Y as $5d3850c4d0b4e6c7$export$602eac185826482c, Z as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, _ as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-5ae8da85.js";
 import React__default, { useState, useEffect, createElement } from "react";
 import { SledgeContext, CustomComponents } from "@sledge-app/core";
-import "react-dom";
+import { createPortal } from "react-dom";
 const ProductFilterWidget = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchResultWidget, { layoutType: "product-filter", ...props });
 };
@@ -5348,17 +5348,20 @@ const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position
     }, 0);
   }, [open]);
   const showBlurEffect = withBlurEffect && !isScrollAtBottom;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__flyout-mobile ${className}`, "data-open": open, "data-position": position, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-overlay", onClick: () => setOpen(false) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__flyout-mobile-wrapper", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__flyout-header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-title", children: title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-close-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__flyout-close-field", type: "button", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: contentContainerRef, className: `sledge__flyout-mobile-content ${showBlurEffect ? "sledge__flyout-mobile-content-blur-effect" : ""}`, children: isLoading ? null : content }),
-      footer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-footer", children: isLoading ? null : footer }) : null
-    ] })
-  ] });
+  return createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__flyout-mobile ${className}`, "data-open": open, "data-position": position, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-overlay", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__flyout-mobile-wrapper", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__flyout-header", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-title", children: title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-close-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__flyout-close-field", type: "button", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: contentContainerRef, className: `sledge__flyout-mobile-content ${showBlurEffect ? "sledge__flyout-mobile-content-blur-effect" : ""}`, children: isLoading ? null : content }),
+        footer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-footer", children: isLoading ? null : footer }) : null
+      ] })
+    ] }),
+    document.body
+  );
 };
 const getElement = ({ selector, setUsedScrollElement }) => {
   const element = document.querySelector(selector);
@@ -7246,7 +7249,7 @@ const FilterHorizontal = (props) => {
     isHorizontalGroup = false,
     allowedFilterSlider
   } = props;
-  const { sort = null } = components;
+  const { sort = null, limit = null } = components;
   const wrapperAdditionalProps = {
     ...isHorizontalGroup && { "horizontal-group": "" }
   };
@@ -7274,7 +7277,8 @@ const FilterHorizontal = (props) => {
               isHorizontalGroup
             }
           )),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-sort", children: sort })
+          sort ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-sort", children: sort }) : null,
+          limit ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-limit", children: limit }) : null
         ]
       }
     ),
@@ -7971,8 +7975,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;
@@ -7991,7 +7995,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, _d;
   const {
     displaySettings,
     allowedFilter,
@@ -8033,16 +8037,16 @@ 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 })
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
         ] })
       ] }),
       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
+          ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
         ] }),
         (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           productGrid,
@@ -8053,8 +8057,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, _d;
+  const {
+    displaySettings,
+    allowedFilter,
+    isFirstLoading,
+    isLoading,
+    isLoadingProduct,
+    isLoadingSetting,
+    searchResult = [],
+    propsData,
+    hideFilterWhenOneValue,
+    components,
+    skeleton,
+    handleSearchResultFirstTime
+  } = props;
   const {
     filterHorizontal = null,
     summaryText = null,
@@ -8078,16 +8095,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.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit }),
+          ((_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: [
@@ -8098,7 +8115,7 @@ const FilterHorizontalLayout = (props) => {
   ] });
 };
 const FilterFlyoutLayout$1 = (props) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const {
     displaySettings,
     languageSettings,
@@ -8157,17 +8174,17 @@ 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 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
         ] })
       ] }),
       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
+          ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null
         ] }),
         (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           productGrid,
@@ -8178,7 +8195,7 @@ const FilterFlyoutLayout$1 = (props) => {
   ] });
 };
 const EnterpriseLayout = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const {
     displaySettings,
     allowedFilter,
@@ -8224,7 +8241,9 @@ 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_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit }),
+      ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.hide_search_bar) ? null : searchField,
+      ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.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({
@@ -8239,7 +8258,7 @@ const EnterpriseLayout = (props) => {
   ] }) });
 };
 const YuvaLayout = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const {
     displaySettings,
     allowedFilter,
@@ -8254,7 +8273,8 @@ const YuvaLayout = (props) => {
     languageSettings,
     openFilterToggle = false,
     setOpenFilterToggle = () => {
-    }
+    },
+    handleSearchResultFirstTime
   } = props;
   const { filter: language_filter } = languageSettings || {};
   const {
@@ -8284,10 +8304,12 @@ 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,
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort })
+        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 }),
+        ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
@@ -8303,8 +8325,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, _e;
+  const {
+    displaySettings,
+    allowedFilter,
+    isFirstLoading,
+    isLoading,
+    isLoadingProduct,
+    isLoadingSetting,
+    searchResult = [],
+    propsData,
+    hideFilterWhenOneValue,
+    components,
+    skeleton,
+    handleSearchResultFirstTime
+  } = props;
   const {
     filterHorizontal = null,
     filterActive = null,
@@ -8327,18 +8362,22 @@ 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,
+            limit: ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.hide_limit_options) ? null : limit
+          }
+        }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.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(),
@@ -8348,8 +8387,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, _d;
+  const {
+    displaySettings,
+    allowedFilter,
+    isFirstLoading,
+    isLoading,
+    isLoadingProduct,
+    isLoadingSetting,
+    searchResult = [],
+    propsData,
+    hideFilterWhenOneValue,
+    components,
+    skeleton,
+    handleSearchResultFirstTime
+  } = props;
   const {
     filterHorizontal = null,
     summaryText = null,
@@ -8373,17 +8425,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.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit }),
+          ((_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: [
@@ -8394,7 +8446,7 @@ const FilterHorizontalGroupLayout = (props) => {
   ] });
 };
 const DesktopLayout = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { displaySettings } = props;
   const renderLayout = () => {
     var _a2;
@@ -8417,10 +8469,21 @@ 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,
+        "data-hide-limit-options": (_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options
+      },
+      children: renderLayout()
+    }
+  );
 };
 const FilterFlyoutLayout = (props) => {
-  var _a;
+  var _a, _b, _c;
   const {
     displaySettings,
     languageSettings,
@@ -8484,11 +8547,11 @@ const FilterFlyoutLayout = (props) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_filter || "Filter" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(FilterIcon, { width: 18, height: 18, color: "#393d4e" })
           ] }),
-          searchField
+          ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : searchField
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
         ] })
       ] }) }),
       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: [
@@ -8499,7 +8562,7 @@ const FilterFlyoutLayout = (props) => {
   ] });
 };
 const FilterStandardLayout = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { displaySettings, languageSettings, allowedFilter, isFirstLoading, isLoading, isLoadingProduct, isLoadingSetting, searchResult = [], components, skeleton } = props;
   const {
     filterHorizontal = null,
@@ -8531,12 +8594,12 @@ const FilterStandardLayout = (props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(FilterHorizontalBlockMobile, { children: [
-        searchField,
+        ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : searchField,
         filterHorizontal == null ? void 0 : filterHorizontal({ deviceType: "mobile" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
+        ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
       ] })
     ] }) }),
     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: [
@@ -8546,7 +8609,7 @@ const FilterStandardLayout = (props) => {
   ] }) }) });
 };
 const StickyFilterButtonLayout = (props) => {
-  var _a;
+  var _a, _b, _c;
   const {
     displaySettings,
     languageSettings,
@@ -8609,10 +8672,10 @@ const StickyFilterButtonLayout = (props) => {
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(FilterHorizontalBlockMobile, { children: searchField }),
+        ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(FilterHorizontalBlockMobile, { children: searchField }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
         ] })
       ] }) }),
       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: [
@@ -8623,7 +8686,7 @@ const StickyFilterButtonLayout = (props) => {
   ] });
 };
 const MobileLayout = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { displaySettings } = props;
   const renderLayout = () => {
     var _a2;
@@ -8638,7 +8701,18 @@ const MobileLayout = (props) => {
         return null;
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(RenderLayout, { device: "mobile", layout: (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.mobile_layout, children: renderLayout() });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    RenderLayout,
+    {
+      device: "mobile",
+      layout: (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.mobile_layout,
+      additionalProps: {
+        "data-hide-search-bar": (_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.hide_search_bar,
+        "data-hide-limit-options": (_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options
+      },
+      children: renderLayout()
+    }
+  );
 };
 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, _x, _y, _z, _A;