@constructor-io/constructorio-ui-autocomplete 1.23.26 → 1.23.27

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -13,6 +13,7 @@ const useSections_1 = tslib_1.__importDefault(require("./useSections"));
 const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecommendationsObserver"));
 const typeGuards_1 = require("../typeGuards");
 const useNormalizedProps_1 = tslib_1.__importDefault(require("./useNormalizedProps"));
+const useCustomBlur_1 = tslib_1.__importDefault(require("./useCustomBlur"));
 exports.defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -39,6 +40,7 @@ const useCioAutocomplete = (options) => {
         onSubmit,
         cioClient,
         previousQuery }, rest));
+    (0, useCustomBlur_1.default)(isOpen, closeMenu, autocompleteClassName);
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
     // Track recommendation view

package/lib/cjs/hooks/useCustomBlur.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useCustomBlur = (isOpen, closeMenu, autocompleteClassName) => {
+    const handleDocumentClick = (0, react_1.useCallback)((event) => {
+        var _a;
+        if (isOpen && !((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest(`.${autocompleteClassName}`))) {
+            closeMenu();
+        }
+    }, [closeMenu, isOpen, autocompleteClassName]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('mousedown', handleDocumentClick);
+        return () => {
+            document.removeEventListener('mousedown', handleDocumentClick);
+        };
+    }, [handleDocumentClick]);
+};
+exports.default = useCustomBlur;

package/lib/cjs/hooks/useDownShift.js

@@ -49,6 +49,13 @@ const useDownShift = (_a) => {
                     }
                 }
             }
+        }, stateReducer: (state, actionAndChanges) => {
+            const { type, changes } = actionAndChanges;
+            // Override dropdown close on blur
+            if (type === downshift_1.useCombobox.stateChangeTypes.InputBlur) {
+                return Object.assign(Object.assign({}, changes), { isOpen: state.isOpen });
+            }
+            return changes;
         } }, rest));
 };
 exports.default = useDownShift;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.23.26';
+exports.default = '1.23.27';

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -9,6 +9,7 @@ import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
 import { isCustomSection, isRecommendationsSection } from '../typeGuards';
 import useNormalizedProps from './useNormalizedProps';
+import useCustomBlur from './useCustomBlur';
 export const defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -38,6 +39,7 @@ const useCioAutocomplete = (options) => {
         previousQuery,
         ...rest,
     });
+    useCustomBlur(isOpen, closeMenu, autocompleteClassName);
     // Log console errors
     useConsoleErrors(sections, activeSections);
     // Track recommendation view

package/lib/mjs/hooks/useCustomBlur.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect } from 'react';
+const useCustomBlur = (isOpen, closeMenu, autocompleteClassName) => {
+    const handleDocumentClick = useCallback((event) => {
+        if (isOpen && !event.target?.closest(`.${autocompleteClassName}`)) {
+            closeMenu();
+        }
+    }, [closeMenu, isOpen, autocompleteClassName]);
+    useEffect(() => {
+        document.addEventListener('mousedown', handleDocumentClick);
+        return () => {
+            document.removeEventListener('mousedown', handleDocumentClick);
+        };
+    }, [handleDocumentClick]);
+};
+export default useCustomBlur;

package/lib/mjs/hooks/useDownShift.js

@@ -47,6 +47,14 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
             }
         }
     },
+    stateReducer: (state, actionAndChanges) => {
+        const { type, changes } = actionAndChanges;
+        // Override dropdown close on blur
+        if (type === useCombobox.stateChangeTypes.InputBlur) {
+            return { ...changes, isOpen: state.isOpen };
+        }
+        return changes;
+    },
     ...rest,
 });
 export default useDownShift;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.26';
+export default '1.23.27';

package/lib/types/hooks/useCustomBlur.d.ts

@@ -0,0 +1,2 @@
+declare const useCustomBlur: (isOpen: boolean, closeMenu: () => void, autocompleteClassName: string) => void;
+export default useCustomBlur;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.26";
+declare const _default: "1.23.27";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.23.26",
+  "version": "1.23.27",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",