@sledge-app/react-instant-search 0.0.116 → 0.0.117

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

@@ -1,6 +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 $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-efe38901.js";
 import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
+import { useLocation } from "react-router-dom";
 import "react-dom";
 const ProductFilterWidget = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchResultWidget, { layoutType: "product-filter", ...props });
@@ -3241,7 +3242,7 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
   const {
@@ -3282,7 +3283,9 @@ const SearchResultWidget = (props) => {
         articleCardsComponent = articleCard;
     }
   });
-  const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
+  const { search: search2 } = useLocation();
+  const searchParams = new URLSearchParams(search2);
+  const keywordParam = searchParams == null ? void 0 : searchParams.get(queryKeyword);
   const [settings] = React__default.useState(typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}") : {});
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
@@ -3291,17 +3294,17 @@ const SearchResultWidget = (props) => {
   const [clickedTabIndexName, setClickedTabIndexName] = React__default.useState();
   const [resultComponent, setResultComponent] = React__default.useState(/* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}));
   const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(!propsData);
-  const [allowedSorts, setAllowedSorts] = React__default.useState(((_b = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b.allowed_sorts) || []);
-  const [allowedFilters, setAllowedFilters] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.filters) || []);
+  const [allowedSorts, setAllowedSorts] = React__default.useState(((_a = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _a.allowed_sorts) || []);
+  const [allowedFilters, setAllowedFilters] = React__default.useState(((_b = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b.filters) || []);
   const [allowedTabs, setAllowedTabs] = React__default.useState([]);
   const [facets, setFacets] = React__default.useState([]);
-  const [indexProduct, setIndexProduct] = React__default.useState(((_d = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d.index_product) || "");
+  const [indexProduct, setIndexProduct] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.index_product) || "");
   const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
-  const [hiddenTags, setHiddenTags] = React__default.useState(((_e = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _e.hidden_tags) || []);
-  const [displaySettings, setDisplaySettings] = React__default.useState(((_f = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _f.display) || {});
-  const [colorSwatches, setColorSwatches] = React__default.useState(((_g = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _g.colors) || []);
-  const [defaultSort, setDefaultSort] = React__default.useState(((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.default_sort) || "");
-  const [showOutOfStock, setShowOutOfStock] = React__default.useState((_i = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _i.show_out_of_stock);
+  const [hiddenTags, setHiddenTags] = React__default.useState(((_d = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d.hidden_tags) || []);
+  const [displaySettings, setDisplaySettings] = React__default.useState(((_e = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _e.display) || {});
+  const [colorSwatches, setColorSwatches] = React__default.useState(((_f = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _f.colors) || []);
+  const [defaultSort, setDefaultSort] = React__default.useState(((_g = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _g.default_sort) || "");
+  const [showOutOfStock, setShowOutOfStock] = React__default.useState((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.show_out_of_stock);
   const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
@@ -3436,11 +3439,10 @@ const SearchResultWidget = (props) => {
   React__default.useEffect(() => {
     if (!isRenderAppInstantSearch)
       return;
-    console.log("isRenderAppInstantSearch");
-    const searchParams2 = new URLSearchParams(document.location.search);
-    setKeyword((searchParams2 == null ? void 0 : searchParams2.get(queryKeyword)) || "");
+    console.log("isRenderAppInstantSearch", searchParams, keywordParam);
+    setKeyword(keywordParam || "");
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
-  }, [isRenderAppInstantSearch]);
+  }, [isRenderAppInstantSearch, keywordParam]);
   React__default.useEffect(() => {
     if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword) && layoutType === "default") {
       const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
@@ -3452,8 +3454,8 @@ const SearchResultWidget = (props) => {
     }
   }, [keyword]);
   const tabSkeleton = layoutType === "default" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-tab-list sledge-instant-search__result-tab-list-skeleton", children: [1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "122px", height: "28px", rounded: "md", color: "lighten" }, index)) }) : null;
-  const filterHorizontalSkeleton = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "lighten" }, index)) }) : null;
-  const filterVerticalSkeleton = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const filterHorizontalSkeleton = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.enable_on_search) && ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "lighten" }, index)) }) : null;
+  const filterVerticalSkeleton = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.enable_on_search) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -3669,7 +3671,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_total_products) && ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_total_products) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
         width: "117px",
@@ -3684,7 +3686,7 @@ const SearchResultWidget = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 12, type: "large" })
   ] });
   const searchAndSelectOptionSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "lighten", rounded: "md" }) }) : null,
+    ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.show_total_products) && ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "lighten", rounded: "md" }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-keyword-form", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
@@ -3715,7 +3717,7 @@ const SearchResultWidget = (props) => {
       tabSkeleton,
       filterHorizontalSkeleton,
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-wrapper sledge-instant-search__result-wrapper-skeleton", children: [
-        ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.enable_on_search) && ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : null,
+        ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.enable_on_search) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
           searchAndSelectOptionSkeleton,
           productGridSkeleton