@sledge-app/react-instant-search 1.0.16 → 1.0.18

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

@@ -4879,7 +4879,9 @@ const SearchWidget = (props) => {
   const [displaySettings, setDisplaySettings] = React__default.useState({});
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
+  const [showSearchResult, setShowSearchResult] = React__default.useState(false);
   const previousState = usePrevious({ keyword });
+  const searchFieldRef = React__default.useRef(null);
   const handleMultiSearch = async (data, onSearch = false) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2;
     if (!keyword.length)
@@ -4957,30 +4959,43 @@ const SearchWidget = (props) => {
   React__default.useEffect(() => {
     if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
       const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
+      if (!keyword)
+        setShowSearchResult(false);
       const delayDebounceFn = setTimeout(() => {
+        if (keyword)
+          setShowSearchResult(true);
         if (INSTANT_SEARCH_SETTING)
           handleMultiSearch(INSTANT_SEARCH_SETTING, true);
       }, 500);
       return () => clearTimeout(delayDebounceFn);
     }
   }, [keyword]);
+  React__default.useEffect(() => {
+    showSearchResult ? document.body.classList.add("sledge__open-element-inset") : document.body.classList.remove("sledge__open-element-inset");
+  }, [showSearchResult]);
   const wrapperStyle = {
     maxWidth: width
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-wrapper", style: wrapperStyle, children: [
+    showSearchResult ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__inset-full", onClick: () => setShowSearchResult(false) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       SearchInputField,
       {
         type: "text",
+        fieldRef: searchFieldRef,
         icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
         placeholder: "Search anything",
         value: keyword,
         onChange: ({ value }) => setKeyword(value),
         onResetField: () => setKeyword(""),
+        onFocus: () => {
+          if (keyword)
+            setShowSearchResult(true);
+        },
         withClearField: true
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "hidden", animate: keyword.length ? "visible" : "hidden", variants: VISIBLE_ANIMATION, className: "sledge-instant-search__widget-search-form-result", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "hidden", animate: showSearchResult ? "visible" : "hidden", variants: VISIBLE_ANIMATION, className: "sledge-instant-search__widget-search-form-result", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-other sledge-instant-search__widget-search-form-result-flex-item-other-skeleton", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           SkeletonLoading.Item,