@sledge-app/react-instant-search 2.0.70 → 2.0.72

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

@@ -2886,6 +2886,7 @@ const Badge = (props) => {
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const [data, setData] = React__default.useState({});
   const [openFlyoutWishlistWidget, setOpenFlyoutWishlistWidget] = React__default.useState(false);
+  const [shouldMountWidget, setShouldMountWidget] = React__default.useState(false);
   const { use_wishlist_flyout } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) || {};
   const { floating_button_type } = (dataSettings == null ? void 0 : dataSettings.launch_point) || {};
   const { alert_login, alert, login_button, header_title: language_header_title, see_all_wishlist } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
@@ -2969,6 +2970,10 @@ const Badge = (props) => {
       triggerRenderWishlistBadge(false);
     handleGetWishlistInfo();
   }, [valueRenderWishlistBadge, isRenderAppWishlist]);
+  React__default.useEffect(() => {
+    if (openFlyoutWishlistWidget)
+      setShouldMountWidget(true);
+  }, [openFlyoutWishlistWidget]);
   const mainClassName = "sledge-wishlist__badge-wrapper";
   let productCardsComponent = null;
   if (React__default.Children.count(children)) {
@@ -3099,10 +3104,10 @@ const Badge = (props) => {
         ...sledgeAnonymId && !is_required_login ? {
           flyoutInfoContent: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { dangerouslySetInnerHTML: { __html: alert || "Please login to save your wishlist across devices." } })
         } : {},
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-content", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Widget.Root, { isFlyout: useWishlistFlyout, children: [
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-content", children: shouldMountWidget ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Widget.Root, { isFlyout: useWishlistFlyout, dataInfo: data, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CustomComponents, { productCard: productCardsComponent }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Widget.List, {})
-        ] }) }),
+        ] }) : null }),
         footer: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-footer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: urlWishlistWidget, className: "sledge-flyout-widget__wishlist-see-all-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "success", fullWidth: true, children: see_all_wishlist || "See All Wishlist" }) }) }),
         open: openFlyoutWishlistWidget,
         setOpen: setOpenFlyoutWishlistWidget,
@@ -5834,8 +5839,16 @@ const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position
           /* @__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" }) }) })
         ] }),
         flyoutInfoContent ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-info", children: flyoutInfoContent }) : null,
-        /* @__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
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ref: contentContainerRef,
+            className: `sledge__flyout-mobile-content ${showBlurEffect ? "sledge__flyout-mobile-content-blur-effect" : ""}`,
+            style: isLoading ? { display: "none" } : void 0,
+            children: content
+          }
+        ),
+        footer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-footer", style: isLoading ? { display: "none" } : void 0, children: footer }) : null
       ] })
     ] }),
     document.body
@@ -9141,7 +9154,7 @@ const DesktopLayout = (props) => {
   );
 };
 const FilterFlyoutLayout = (props) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const {
     displaySettings,
     languageSettings,
@@ -9178,6 +9191,7 @@ const FilterFlyoutLayout = (props) => {
     searchAndSelectOption: searchAndSelectOptionSkeleton,
     productGrid: productGridSkeleton
   } = skeleton || {};
+  const columnGridElement = ((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       FlyoutSidebar,
@@ -9193,23 +9207,26 @@ const FilterFlyoutLayout = (props) => {
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ResultWrapper, { displaySettings, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(ResultDataKeyword, { children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.show_total_products) ? summaryTextSkeleton : null,
+        ((_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.show_total_products) ? summaryTextSkeleton : null,
         searchFieldSkeletonComponent,
         filterHorizontalSkeleton,
         selectOptionSkeletonComponent
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryTextHorizontal, { children: summaryText }),
-        ((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(SummaryTextHorizontal, { children: [
+          summaryText,
+          ((_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_search_bar) ? columnGridElement : null
+        ] }),
+        ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.hide_search_bar) ? null : columnGridElement,
         /* @__PURE__ */ jsxRuntimeExports.jsx(FilterHorizontalBlockMobile, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultSearchFieldFlex, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", className: "sledge-instant-search__trigger-filter-flyout", onClick: () => setOpenFilterFlyout == null ? void 0 : setOpenFilterFlyout(true), children: [
             /* @__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
+          ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.hide_search_bar) ? null : searchField
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectFieldWrapper, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: sort }),
-          ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
+          ((_f = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _f.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: [
@@ -9344,7 +9361,7 @@ const StickyFilterButtonLayout = (props) => {
   ] });
 };
 const MobileLayout = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const { displaySettings } = props;
   const renderLayout = () => {
     var _a2;
@@ -9366,7 +9383,8 @@ const MobileLayout = (props) => {
       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
+        "data-hide-limit-options": (_c = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _c.hide_limit_options,
+        "data-show-switch-view-option": (_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.show_switch_view_option
       },
       children: renderLayout()
     }