@sledge-app/react-instant-search 0.0.17 → 0.0.18

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

@@ -19,7 +19,9 @@ const SEARCH_RESULT_URL = "/pages/search-result";
 const SEPARATE_COMPONENT_DISPLAY_NAME = {
   PRODUCT: {
     CARDS: "ProductCards"
-  }
+  },
+  OTHER_INDEX_LISTS: "OtherIndexLists",
+  SUGGESTION_KEYWORD_LISTS: "SuggestionKeywordLists"
 };
 const SHOPIFY_GID = "gid://shopify/";
 const SHOPIFY_GID_PRODUCT_ID = `${SHOPIFY_GID}Product/`;
@@ -2200,10 +2202,19 @@ const SkeletonLoading = {
 const SearchIconWidget = (props) => {
   const { size = "sm", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
   let productCardsComponent = null;
+  let suggestionKeywordListsComponent = null;
+  let otherIndexListsComponent = null;
   React__default.Children.map(children, (child) => {
-    if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
+    if (React__default.isValidElement(child) && isFunction(child.type)) {
       const { component } = (child == null ? void 0 : child.props) || {};
-      productCardsComponent = component;
+      switch (child.type.name) {
+        case SEPARATE_COMPONENT_DISPLAY_NAME.SUGGESTION_KEYWORD_LISTS:
+          suggestionKeywordListsComponent = component;
+          break;
+        case SEPARATE_COMPONENT_DISPLAY_NAME.OTHER_INDEX_LISTS:
+          otherIndexListsComponent = component;
+          break;
+      }
     }
   });
   const { isRenderApp } = React__default.useContext(SledgeContext);
@@ -2233,11 +2244,55 @@ const SearchIconWidget = (props) => {
   }, [isRenderApp]);
   const handleShowWidget = () => {
     if (typeof window !== "undefined" && window.sledgeInstantSearchIconWidgetPopup)
-      window.sledgeInstantSearchIconWidgetPopup(onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, productCardsComponent);
+      window.sledgeInstantSearchIconWidgetPopup(
+        onAfterAddToCart,
+        onAfterAddWishlist,
+        onAfterRemoveWishlist,
+        onAfterRenderProduct,
+        productCardsComponent,
+        suggestionKeywordListsComponent,
+        otherIndexListsComponent
+      );
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
 };
 const SearchIconWidgetPopup$1 = "";
+const SuggestionKeywordLists = ({ listsComponent, keywords }) => {
+  return listsComponent ? listsComponent({ keywords }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Suggestions" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: keywords.map((keyword, index) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "a",
+        {
+          href: `${SEARCH_RESULT_URL}?q=${keyword}`,
+          className: "sledge-instant-search__icon-widget-search-form-result-list-link sledge-instant-search__icon-widget-search-form-result-list-link-suggestion",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 12, height: 12, color: "#677487" }),
+            " ",
+            keyword
+          ]
+        }
+      ) }, index);
+    }) })
+  ] });
+};
+const OtherIndexLists = ({ listsComponent, indexUid, name, items }) => {
+  console.log("OtherIndexLists listsComponent", listsComponent);
+  console.log("OtherIndexLists indexUid", indexUid);
+  console.log("OtherIndexLists name", name);
+  console.log("OtherIndexLists items", items);
+  return listsComponent ? listsComponent({ indexUid, name, items }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: name }),
+    (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: items.map((hit, index) => {
+      const { title, url } = hit;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__icon-widget-search-form-result-list-link", children: title }) }, index);
+    }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: [
+      "No ",
+      name == null ? void 0 : name.toLowerCase(),
+      " were found"
+    ] }) })
+  ] });
+};
 const SearchIconWidgetPopup = () => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -2260,7 +2315,9 @@ const SearchIconWidgetPopup = () => {
     },
     onAfterRenderProduct: (state) => {
     },
-    productCardsComponent: null
+    productCardsComponent: null,
+    otherIndexListsComponent: null,
+    suggestionKeywordListsComponent: null
   });
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
@@ -2350,6 +2407,8 @@ const SearchIconWidgetPopup = () => {
       }, onAfterRemoveWishlist = () => {
       }, onAfterRenderProduct = () => {
       }, productCardsComponent = () => {
+      }, otherIndexListsComponent = () => {
+      }, suggestionKeywordListsComponent = () => {
       }) => {
         setShowInfo(true);
         setHandleFunctions({
@@ -2357,7 +2416,9 @@ const SearchIconWidgetPopup = () => {
           onAfterAddWishlist,
           onAfterRemoveWishlist,
           onAfterRenderProduct,
-          productCardsComponent
+          productCardsComponent,
+          otherIndexListsComponent,
+          suggestionKeywordListsComponent
         });
         setTimeout(() => {
           if (searchFieldRef == null ? void 0 : searchFieldRef.current) {
@@ -2438,36 +2499,10 @@ const SearchIconWidgetPopup = () => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 6, type: "medium" }) })
       ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-other", children: [
-          Object.keys(suggestionSettings).length && ((_c = (_b = suggestionSettings[suggestionIndex]) == null ? void 0 : _b.keywords) == null ? void 0 : _c.active) && ((_f = (_e = (_d = suggestionSettings[suggestionIndex]) == null ? void 0 : _d.keywords) == null ? void 0 : _e.list) == null ? void 0 : _f.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Suggestions" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: suggestionSettings[suggestionIndex].keywords.list.map((keyword2, index) => {
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "a",
-                {
-                  href: `${SEARCH_RESULT_URL}?q=${keyword2}`,
-                  className: "sledge-instant-search__icon-widget-search-form-result-list-link sledge-instant-search__icon-widget-search-form-result-list-link-suggestion",
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 12, height: 12, color: "#677487" }),
-                    " ",
-                    keyword2
-                  ]
-                }
-              ) }, index);
-            }) })
-          ] }) : null,
+          Object.keys(suggestionSettings).length && ((_c = (_b = suggestionSettings[suggestionIndex]) == null ? void 0 : _b.keywords) == null ? void 0 : _c.active) && ((_f = (_e = (_d = suggestionSettings[suggestionIndex]) == null ? void 0 : _d.keywords) == null ? void 0 : _e.list) == null ? void 0 : _f.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SuggestionKeywordLists, { listsComponent: handleFunctions.suggestionKeywordListsComponent, keywords: suggestionSettings[suggestionIndex].keywords.list }) : null,
           searchResultOther && searchResultOther.map((item, index) => {
-            const { hits, name } = item;
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: name }),
-              (hits == null ? void 0 : hits.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: hits.map((hit, index2) => {
-                const { title, url } = hit;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__icon-widget-search-form-result-list-link", children: title }) }, index2);
-              }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: [
-                "No ",
-                name.toLowerCase(),
-                " were found"
-              ] }) })
-            ] }, index);
+            const { indexUid, hits, name } = item;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(OtherIndexLists, { listsComponent: handleFunctions.otherIndexListsComponent, indexUid, name, items: hits }) }, index);
           })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-product", children: [