@algolia/autocomplete-js 1.6.2 → 1.7.1

package/dist/esm/createAutocompleteDom.js

@@ -78,10 +78,7 @@ export function createAutocompleteDom(_ref) {
     getInputProps: propGetters.getInputProps,
     getInputPropsCore: autocomplete.getInputProps,
     autocompleteScopeApi: autocompleteScopeApi,
-    onDetachedEscape: isDetached ? function () {
-      autocomplete.setIsOpen(false);
-      setIsModalOpen(false);
-    } : undefined
+    isDetached: isDetached
   });
   var inputWrapperPrefix = createDomElement('div', {
     class: classNames.inputWrapperPrefix,

package/dist/esm/elements/Input.d.ts

@@ -6,7 +6,7 @@ declare type InputProps = {
     environment: AutocompleteEnvironment;
     getInputProps: AutocompletePropGetters<any>['getInputProps'];
     getInputPropsCore: AutocompleteCoreApi<any>['getInputProps'];
-    onDetachedEscape?(): void;
+    isDetached: boolean;
     state: AutocompleteState<any>;
 };
 export declare const Input: AutocompleteElement<InputProps, HTMLInputElement>;

package/dist/esm/elements/Input.js

@@ -1,4 +1,4 @@
-var _excluded = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "onDetachedEscape", "state"];
+var _excluded = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "isDetached", "state"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18,7 +18,7 @@ export var Input = function Input(_ref) {
       classNames = _ref.classNames,
       getInputProps = _ref.getInputProps,
       getInputPropsCore = _ref.getInputPropsCore,
-      onDetachedEscape = _ref.onDetachedEscape,
+      isDetached = _ref.isDetached,
       state = _ref.state,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -33,9 +33,8 @@ export var Input = function Input(_ref) {
   }, autocompleteScopeApi));
   setProperties(element, _objectSpread(_objectSpread({}, inputProps), {}, {
     onKeyDown: function onKeyDown(event) {
-      if (onDetachedEscape && event.key === 'Escape') {
-        event.preventDefault();
-        onDetachedEscape();
+      // In detached mode we don't want to close the panel when hittin `Tab`.
+      if (isDetached && event.key === 'Tab') {
         return;
       }
 

package/dist/esm/getDefaultOptions.d.ts

@@ -9,12 +9,14 @@ export declare function getDefaultOptions<TItem extends BaseItem>(options: Autoc
             props: {
                 onTouchStart(event: TouchEvent): void;
                 onTouchMove(event: TouchEvent): void;
+                onMouseDown(event: MouseEvent): void;
             };
         } & {
             state: import("./types").AutocompleteState<TItem>;
         } & import("@algolia/autocomplete-core").AutocompleteScopeApi<TItem>) => {
             onTouchStart(event: TouchEvent): void;
             onTouchMove(event: TouchEvent): void;
+            onMouseDown(event: MouseEvent): void;
         };
         getFormProps: (params: {
             props: {

package/dist/esm/getDefaultOptions.js

@@ -83,7 +83,7 @@ export function getDefaultOptions(options) {
 
   var containerElement = getHTMLElement(environment, container);
   invariant(containerElement.tagName !== 'INPUT', 'The `container` option does not support `input` elements. You need to change the container to a `div`.');
-  process.env.NODE_ENV !== 'production' ? warn(!(render && renderer && !(renderer !== null && renderer !== void 0 && renderer.render)), "You provided the `render` option but did not provide a `renderer.render`. Since v1.6.0, you can provide a `render` function directly in `renderer`." + "\nTo get rid of this warning, do any of the following depending on your use case." + "\n- If you are using the `render` option only to override Autocomplete's default `render` function, pass the `render` function into `renderer` and remove the `render` option." + '\n- If you are using the `render` option to customize the layout, pass your `render` function into `renderer` and use it from the provided parameters of the `render` option.' + '\nSee https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-render') : void 0;
+  process.env.NODE_ENV !== 'production' ? warn(!(render && renderer && !(renderer !== null && renderer !== void 0 && renderer.render)), "You provided the `render` option but did not provide a `renderer.render`. Since v1.6.0, you can provide a `render` function directly in `renderer`." + "\nTo get rid of this warning, do any of the following depending on your use case." + "\n- If you are using the `render` option only to override Autocomplete's default `render` function, pass the `render` function into `renderer` and remove the `render` option." + '\n- If you are using the `render` option to customize the layout, pass your `render` function into `renderer` and use it from the provided parameters of the `render` option.' + '\n- If you are using the `render` option to work with React 18, pass an empty `render` function into `renderer`.' + '\nSee https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-render') : void 0;
   process.env.NODE_ENV !== 'production' ? warn(!renderer || render || renderer.Fragment && renderer.createElement && renderer.render, "You provided an incomplete `renderer` (missing: ".concat([!(renderer !== null && renderer !== void 0 && renderer.createElement) && '`renderer.createElement`', !(renderer !== null && renderer !== void 0 && renderer.Fragment) && '`renderer.Fragment`', !(renderer !== null && renderer !== void 0 && renderer.render) && '`renderer.render`'].filter(Boolean).join(', '), "). This can cause rendering issues.") + '\nSee https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-renderer') : void 0;
 
   var defaultedRenderer = _objectSpread(_objectSpread({}, defaultRenderer), renderer);

package/dist/esm/types/AutocompleteRenderer.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare type Pragma = (type: any, props: Record<string, any> | null, ...children: ComponentChildren[]) => JSX.Element;
 export declare type PragmaFrag = any;
-declare type ComponentChild = VNode<any> | object | string | number | boolean | null | undefined;
+declare type ComponentChild = VNode<any> | string | number | boolean | null | undefined;
 declare type ComponentChildren = ComponentChild[] | ComponentChild;
-export declare type VNode<TProps = any> = {
+export declare type VNode<TProps = {}> = {
     type: any;
+    key: string | number | any;
     props: TProps & {
         children: ComponentChildren;
-        key?: any;
     };
 };
 export declare type Render = (vnode: ComponentChild, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text | undefined) => void;

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.6.2 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 1.7.1 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -353,7 +353,7 @@
 
   var noop = function noop() {};
 
-  var version = '1.6.2';
+  var version = '1.7.1';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -1751,6 +1751,13 @@
       // pending and could reopen the panel once they resolve, because that would
       // result in an unsolicited UI behavior.
 
+      store.pendingRequests.cancelAll();
+    } else if (event.key === 'Tab') {
+      store.dispatch('blur', null); // Hitting the `Escape` key signals the end of a user interaction with the
+      // autocomplete. At this point, we should ignore any requests that are still
+      // pending and could reopen the panel once they resolve, because that would
+      // result in an unsolicited UI behavior.
+
       store.pendingRequests.cancelAll();
     } else if (event.key === 'Enter') {
       // No active item, so we let the browser handle the native `onSubmit` form
@@ -1758,6 +1765,14 @@
       if (store.getState().activeItemId === null || store.getState().collections.every(function (collection) {
         return collection.items.length === 0;
       })) {
+        // If requests are still pending when the panel closes, they could reopen
+        // the panel once they resolve.
+        // We want to prevent any subsequent query from reopening the panel
+        // because it would result in an unsolicited UI behavior.
+        if (!props.debug) {
+          store.pendingRequests.cancelAll();
+        }
+
         return;
       } // This prevents the `onSubmit` event to be sent because an item is
       // highlighted.
@@ -1942,42 +1957,49 @@
           panelElement = providedProps.panelElement,
           rest = _objectWithoutProperties$1(providedProps, _excluded2);
 
-      return _objectSpread$6({
-        // On touch devices, we do not rely on the native `blur` event of the
-        // input to close the panel, but rather on a custom `touchstart` event
-        // outside of the autocomplete elements.
-        // This ensures a working experience on mobile because we blur the input
-        // on touch devices when the user starts scrolling (`touchmove`).
-        // @TODO: support cases where there are multiple Autocomplete instances.
+      function onMouseDownOrTouchStart(event) {
+        // The `onTouchStart`/`onMouseDown` events shouldn't trigger the `blur`
+        // handler when it's not an interaction with Autocomplete.
+        // We detect it with the following heuristics:
+        // - the panel is closed AND there are no pending requests
+        //   (no interaction with the autocomplete, no future state updates)
+        // - OR the touched target is the input element (should open the panel)
+        var isAutocompleteInteraction = store.getState().isOpen || !store.pendingRequests.isEmpty();
+
+        if (!isAutocompleteInteraction || event.target === inputElement) {
+          return;
+        } // @TODO: support cases where there are multiple Autocomplete instances.
         // Right now, a second instance makes this computation return false.
-        onTouchStart: function onTouchStart(event) {
-          // The `onTouchStart` event shouldn't trigger the `blur` handler when
-          // it's not an interaction with Autocomplete. We detect it with the
-          // following heuristics:
-          // - the panel is closed AND there are no pending requests
-          //   (no interaction with the autocomplete, no future state updates)
-          // - OR the touched target is the input element (should open the panel)
-          var isAutocompleteInteraction = store.getState().isOpen || !store.pendingRequests.isEmpty();
-
-          if (!isAutocompleteInteraction || event.target === inputElement) {
-            return;
-          }
 
-          var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
-            return isOrContainsNode(contextNode, event.target);
-          });
 
-          if (isTargetWithinAutocomplete === false) {
-            store.dispatch('blur', null); // If requests are still pending when the user closes the panel, they
-            // could reopen the panel once they resolve.
-            // We want to prevent any subsequent query from reopening the panel
-            // because it would result in an unsolicited UI behavior.
+        var isTargetWithinAutocomplete = [formElement, panelElement].some(function (contextNode) {
+          return isOrContainsNode(contextNode, event.target);
+        });
+
+        if (isTargetWithinAutocomplete === false) {
+          store.dispatch('blur', null); // If requests are still pending when the user closes the panel, they
+          // could reopen the panel once they resolve.
+          // We want to prevent any subsequent query from reopening the panel
+          // because it would result in an unsolicited UI behavior.
 
-            if (!props.debug) {
-              store.pendingRequests.cancelAll();
-            }
+          if (!props.debug) {
+            store.pendingRequests.cancelAll();
           }
-        },
+        }
+      }
+
+      return _objectSpread$6({
+        // We do not rely on the native `blur` event of the input to close the
+        // panel, but rather on a custom `touchstart`/`mousedown` event outside
+        // of the autocomplete elements.
+        // This ensures we don't mistakenly interpret interactions within the
+        // autocomplete (but outside of the input) as a signal to close the panel.
+        // For example, clicking reset button causes an input blur, but if
+        // `openOnFocus=true`, it shouldn't close the panel.
+        // On touch devices, scrolling results (`touchmove`) causes an input blur
+        // but shouldn't close the panel.
+        onTouchStart: onMouseDownOrTouchStart,
+        onMouseDown: onMouseDownOrTouchStart,
         // When scrolling on touch devices (mobiles, tablets, etc.), we want to
         // mimic the native platform behavior where the input is blurred to
         // hide the virtual keyboard. This gives more vertical space to
@@ -2056,8 +2078,6 @@
         store.dispatch('focus', null);
       }
 
-      var isTouchDevice = ('ontouchstart' in props.environment);
-
       var _ref2 = providedProps || {};
           _ref2.inputElement;
           var _ref2$maxLength = _ref2.maxLength,
@@ -2065,7 +2085,7 @@
           rest = _objectWithoutProperties$1(_ref2, _excluded4);
 
       var activeItem = getActiveItem(store.getState());
-      var userAgent = (_props$environment$na = props.environment.navigator) === null || _props$environment$na === void 0 ? void 0 : _props$environment$na.userAgent;
+      var userAgent = ((_props$environment$na = props.environment.navigator) === null || _props$environment$na === void 0 ? void 0 : _props$environment$na.userAgent) || '';
       var shouldFallbackKeyHint = isSamsung(userAgent);
       var enterKeyHint = activeItem !== null && activeItem !== void 0 && activeItem.itemUrl && !shouldFallbackKeyHint ? 'go' : 'search';
       return _objectSpread$6({
@@ -2102,20 +2122,10 @@
           }, setters));
         },
         onFocus: onFocus,
-        onBlur: function onBlur() {
-          // We do rely on the `blur` event on touch devices.
-          // See explanation in `onTouchStart`.
-          if (!isTouchDevice) {
-            store.dispatch('blur', null); // If requests are still pending when the user closes the panel, they
-            // could reopen the panel once they resolve.
-            // We want to prevent any subsequent query from reopening the panel
-            // because it would result in an unsolicited UI behavior.
-
-            if (!props.debug) {
-              store.pendingRequests.cancelAll();
-            }
-          }
-        },
+        // We don't rely on the `blur` event.
+        // See explanation in `onTouchStart`/`onMouseDown`.
+        // @MAJOR See if we need to keep this handler.
+        onBlur: noop,
         onClick: function onClick(event) {
           // When the panel is closed and you click on the input while
           // the input is focused, the `onFocus` event is not triggered
@@ -2311,11 +2321,11 @@
     };
   }
   function injectMetadata(_ref3) {
-    var _environment$navigato;
+    var _environment$navigato, _environment$navigato2;
 
     var metadata = _ref3.metadata,
         environment = _ref3.environment;
-    var isMetadataEnabled = (_environment$navigato = environment.navigator) === null || _environment$navigato === void 0 ? void 0 : _environment$navigato.userAgent.includes('Algolia Crawler');
+    var isMetadataEnabled = (_environment$navigato = environment.navigator) === null || _environment$navigato === void 0 ? void 0 : (_environment$navigato2 = _environment$navigato.userAgent) === null || _environment$navigato2 === void 0 ? void 0 : _environment$navigato2.includes('Algolia Crawler');
 
     if (isMetadataEnabled) {
       var metadataContainer = environment.document.createElement('meta');
@@ -2851,14 +2861,14 @@
     };
   }
 
-  var _excluded$3 = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "onDetachedEscape", "state"];
+  var _excluded$3 = ["autocompleteScopeApi", "environment", "classNames", "getInputProps", "getInputPropsCore", "isDetached", "state"];
   var Input = function Input(_ref) {
     var autocompleteScopeApi = _ref.autocompleteScopeApi,
         environment = _ref.environment;
         _ref.classNames;
         var getInputProps = _ref.getInputProps,
         getInputPropsCore = _ref.getInputPropsCore,
-        onDetachedEscape = _ref.onDetachedEscape,
+        isDetached = _ref.isDetached,
         state = _ref.state,
         props = _objectWithoutProperties$4(_ref, _excluded$3);
 
@@ -2873,9 +2883,8 @@
     }, autocompleteScopeApi));
     setProperties(element, _objectSpread2(_objectSpread2({}, inputProps), {}, {
       onKeyDown: function onKeyDown(event) {
-        if (onDetachedEscape && event.key === 'Escape') {
-          event.preventDefault();
-          onDetachedEscape();
+        // In detached mode we don't want to close the panel when hittin `Tab`.
+        if (isDetached && event.key === 'Tab') {
           return;
         }
 
@@ -2981,10 +2990,7 @@
       getInputProps: propGetters.getInputProps,
       getInputPropsCore: autocomplete.getInputProps,
       autocompleteScopeApi: autocompleteScopeApi,
-      onDetachedEscape: isDetached ? function () {
-        autocomplete.setIsOpen(false);
-        setIsModalOpen(false);
-      } : undefined
+      isDetached: isDetached
     });
     var inputWrapperPrefix = createDomElement('div', {
       class: classNames.inputWrapperPrefix,
@@ -3773,7 +3779,7 @@
 
     var containerElement = getHTMLElement(environment, container);
     invariant(containerElement.tagName !== 'INPUT', 'The `container` option does not support `input` elements. You need to change the container to a `div`.');
-    "development" !== 'production' ? warn(!(render && renderer && !(renderer !== null && renderer !== void 0 && renderer.render)), "You provided the `render` option but did not provide a `renderer.render`. Since v1.6.0, you can provide a `render` function directly in `renderer`." + "\nTo get rid of this warning, do any of the following depending on your use case." + "\n- If you are using the `render` option only to override Autocomplete's default `render` function, pass the `render` function into `renderer` and remove the `render` option." + '\n- If you are using the `render` option to customize the layout, pass your `render` function into `renderer` and use it from the provided parameters of the `render` option.' + '\nSee https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-render') : void 0;
+    "development" !== 'production' ? warn(!(render && renderer && !(renderer !== null && renderer !== void 0 && renderer.render)), "You provided the `render` option but did not provide a `renderer.render`. Since v1.6.0, you can provide a `render` function directly in `renderer`." + "\nTo get rid of this warning, do any of the following depending on your use case." + "\n- If you are using the `render` option only to override Autocomplete's default `render` function, pass the `render` function into `renderer` and remove the `render` option." + '\n- If you are using the `render` option to customize the layout, pass your `render` function into `renderer` and use it from the provided parameters of the `render` option.' + '\n- If you are using the `render` option to work with React 18, pass an empty `render` function into `renderer`.' + '\nSee https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-render') : void 0;
     "development" !== 'production' ? warn(!renderer || render || renderer.Fragment && renderer.createElement && renderer.render, "You provided an incomplete `renderer` (missing: ".concat([!(renderer !== null && renderer !== void 0 && renderer.createElement) && '`renderer.createElement`', !(renderer !== null && renderer !== void 0 && renderer.Fragment) && '`renderer.Fragment`', !(renderer !== null && renderer !== void 0 && renderer.render) && '`renderer.render`'].filter(Boolean).join(', '), "). This can cause rendering issues.") + '\nSee https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-renderer') : void 0;
 
     var defaultedRenderer = _objectSpread2(_objectSpread2({}, defaultRenderer), renderer);