@algolia/autocomplete-js 1.19.9 → 1.19.11

package/dist/esm/autocomplete.js

@@ -36,6 +36,19 @@ export function autocomplete(options) {
   var isDetached = reactive(function () {
     return props.value.core.environment.matchMedia(props.value.renderer.detachedMediaQuery).matches;
   });
+  function warnAboutOpenOnFocusInDetachedMode() {
+    var _props$value$core$ope;
+    // `openOnFocus` isn't resolved to its default at this layer yet (that
+    // happens inside `autocomplete-core`'s `createAutocomplete`), so we
+    // mirror its documented default (`false`) explicitly here rather than
+    // relying on falsiness, or reaching for `getDefaultProps` from
+    // `autocomplete-core` — that function has side effects (it generates
+    // an autocomplete id, builds the full `getSources` pipeline) that make
+    // it unsuitable for just reading one resolved option.
+    var openOnFocus = (_props$value$core$ope = props.value.core.openOnFocus) !== null && _props$value$core$ope !== void 0 ? _props$value$core$ope : false;
+    process.env.NODE_ENV !== 'production' ? warn(!(isDetached.value && !openOnFocus), "`openOnFocus: false` can lead to unexpected behavior in detached mode. We recommend using `openOnFocus: true` when detached mode is enabled.\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-openonfocus") : void 0;
+  }
+  warnAboutOpenOnFocusInDetachedMode();
   var autocomplete = reactive(function () {
     return createAutocomplete(_objectSpread(_objectSpread({}, props.value.core), {}, {
       onStateChange: function onStateChange(params) {
@@ -116,6 +129,7 @@ export function autocomplete(options) {
         panelPlacement: props.value.renderer.panelPlacement,
         container: dom.value.root,
         form: dom.value.form,
+        panel: dom.value.panel,
         environment: props.value.core.environment
       })
     });
@@ -138,6 +152,7 @@ export function autocomplete(options) {
     var render = !getItemsCount(state) && !hasNoResultsSourceTemplateRef.current && props.value.renderer.renderNoResults || props.value.renderer.render;
     renderSearchBox(renderProps);
     renderPanel(render, renderProps);
+    requestAnimationFrame(setPanelPosition);
   }
   runEffect(function () {
     var environmentProps = autocomplete.value.getEnvironmentProps({
@@ -216,6 +231,7 @@ export function autocomplete(options) {
       var previousIsDetached = isDetached.value;
       isDetached.value = props.value.core.environment.matchMedia(props.value.renderer.detachedMediaQuery).matches;
       if (previousIsDetached !== isDetached.value) {
+        warnAboutOpenOnFocusInDetachedMode();
         update({});
       } else {
         requestAnimationFrame(setPanelPosition);

package/dist/esm/getPanelPlacementStyle.d.ts

@@ -2,8 +2,9 @@ import { AutocompleteOptions } from './types';
 declare type GetPanelPlacementStyleParams = Pick<Required<AutocompleteOptions<any>>, 'panelPlacement' | 'environment'> & {
     container: HTMLElement;
     form: HTMLElement;
+    panel: HTMLElement;
 };
-export declare function getPanelPlacementStyle({ panelPlacement, container, form, environment, }: GetPanelPlacementStyleParams): {
+export declare function getPanelPlacementStyle({ panelPlacement, container, form, panel, environment, }: GetPanelPlacementStyleParams): {
     top: number;
     left: number;
     right?: undefined;

package/dist/esm/getPanelPlacementStyle.js

@@ -2,31 +2,43 @@ export function getPanelPlacementStyle(_ref) {
   var panelPlacement = _ref.panelPlacement,
     container = _ref.container,
     form = _ref.form,
+    panel = _ref.panel,
     environment = _ref.environment;
   var containerRect = container.getBoundingClientRect();
   // Some browsers have specificities to retrieve the document scroll position.
   // See https://stackoverflow.com/a/28633515/9940315
   var scrollTop = environment.pageYOffset || environment.document.documentElement.scrollTop || environment.document.body.scrollTop || 0;
+  var panelHeight = panel.offsetHeight;
+  var panelStyle = 'getComputedStyle' in environment && typeof environment.getComputedStyle === 'function' ? environment.getComputedStyle(panel) : panel.style;
+  var panelMarginTop = parseFloat(panelStyle.marginTop) || 0;
+  var panelMarginBottom = parseFloat(panelStyle.marginBottom) || 0;
+  var panelHeightWithMargins = panelHeight + panelMarginTop + panelMarginBottom;
+  var panelHeightAbove = panelHeight + panelMarginTop * 2;
   var top = scrollTop + containerRect.top + containerRect.height;
+  var panelTop = scrollTop + containerRect.top - panelHeightAbove;
+  var bottomSpace = environment.document.documentElement.clientHeight - (containerRect.top + containerRect.height);
+  var topSpace = containerRect.top;
+  var shouldPlacePanelAbove = panelHeightWithMargins > 0 && bottomSpace < panelHeightWithMargins && topSpace >= panelHeightAbove;
+  var verticalPosition = shouldPlacePanelAbove ? panelTop : top;
   switch (panelPlacement) {
     case 'start':
       {
         return {
-          top: top,
+          top: verticalPosition,
           left: containerRect.left
         };
       }
     case 'end':
       {
         return {
-          top: top,
+          top: verticalPosition,
           right: environment.document.documentElement.clientWidth - (containerRect.left + containerRect.width)
         };
       }
     case 'full-width':
       {
         return {
-          top: top,
+          top: verticalPosition,
           left: 0,
           right: 0,
           width: 'unset',
@@ -37,7 +49,7 @@ export function getPanelPlacementStyle(_ref) {
       {
         var formRect = form.getBoundingClientRect();
         return {
-          top: top,
+          top: verticalPosition,
           left: formRect.left,
           right: environment.document.documentElement.clientWidth - (formRect.left + formRect.width),
           width: 'unset',

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.19.9 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 1.19.11 | 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) :
@@ -327,7 +327,7 @@
     return undefined;
   }
 
-  var version = '1.19.9';
+  var version = '1.19.11';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -2518,9 +2518,11 @@
       // result in an unsolicited UI behavior.
       store.pendingRequests.cancelAll();
     } else if (event.key === 'Enter') {
+      var activeItem = store.getState().activeItemId !== null ? getActiveItem(store.getState()) : null;
+
       // No active item, so we let the browser handle the native `onSubmit` form
       // event.
-      if (store.getState().activeItemId === null || store.getState().collections.every(function (collection) {
+      if (!activeItem || store.getState().collections.every(function (collection) {
         return collection.items.length === 0;
       })) {
         var waitForSubmit = getPluginSubmitPromise(props.plugins, store.pendingRequests);
@@ -2539,11 +2541,10 @@
       // This prevents the `onSubmit` event to be sent because an item is
       // highlighted.
       event.preventDefault();
-      var _ref2 = getActiveItem(store.getState()),
-        item = _ref2.item,
-        itemInputValue = _ref2.itemInputValue,
-        itemUrl = _ref2.itemUrl,
-        source = _ref2.source;
+      var item = activeItem.item,
+        itemInputValue = activeItem.itemInputValue,
+        itemUrl = activeItem.itemUrl,
+        source = activeItem.source;
       if (event.metaKey || event.ctrlKey) {
         if (itemUrl !== undefined) {
           source.onSelect(_objectSpread$7({
@@ -3193,9 +3194,13 @@
         }
       case 'setCollections':
         {
-          return _objectSpread$4(_objectSpread$4({}, state), {}, {
+          var newItemsCount = getItemsCount({
             collections: action.payload
           });
+          return _objectSpread$4(_objectSpread$4({}, state), {}, {
+            collections: action.payload,
+            activeItemId: state.activeItemId !== null && state.activeItemId >= newItemsCount ? action.props.defaultActiveItemId : state.activeItemId
+          });
         }
       case 'setIsOpen':
         {
@@ -4663,31 +4668,43 @@
     var panelPlacement = _ref.panelPlacement,
       container = _ref.container,
       form = _ref.form,
+      panel = _ref.panel,
       environment = _ref.environment;
     var containerRect = container.getBoundingClientRect();
     // Some browsers have specificities to retrieve the document scroll position.
     // See https://stackoverflow.com/a/28633515/9940315
     var scrollTop = environment.pageYOffset || environment.document.documentElement.scrollTop || environment.document.body.scrollTop || 0;
+    var panelHeight = panel.offsetHeight;
+    var panelStyle = 'getComputedStyle' in environment && typeof environment.getComputedStyle === 'function' ? environment.getComputedStyle(panel) : panel.style;
+    var panelMarginTop = parseFloat(panelStyle.marginTop) || 0;
+    var panelMarginBottom = parseFloat(panelStyle.marginBottom) || 0;
+    var panelHeightWithMargins = panelHeight + panelMarginTop + panelMarginBottom;
+    var panelHeightAbove = panelHeight + panelMarginTop * 2;
     var top = scrollTop + containerRect.top + containerRect.height;
+    var panelTop = scrollTop + containerRect.top - panelHeightAbove;
+    var bottomSpace = environment.document.documentElement.clientHeight - (containerRect.top + containerRect.height);
+    var topSpace = containerRect.top;
+    var shouldPlacePanelAbove = panelHeightWithMargins > 0 && bottomSpace < panelHeightWithMargins && topSpace >= panelHeightAbove;
+    var verticalPosition = shouldPlacePanelAbove ? panelTop : top;
     switch (panelPlacement) {
       case 'start':
         {
           return {
-            top: top,
+            top: verticalPosition,
             left: containerRect.left
           };
         }
       case 'end':
         {
           return {
-            top: top,
+            top: verticalPosition,
             right: environment.document.documentElement.clientWidth - (containerRect.left + containerRect.width)
           };
         }
       case 'full-width':
         {
           return {
-            top: top,
+            top: verticalPosition,
             left: 0,
             right: 0,
             width: 'unset',
@@ -4698,7 +4715,7 @@
         {
           var formRect = form.getBoundingClientRect();
           return {
-            top: top,
+            top: verticalPosition,
             left: formRect.left,
             right: environment.document.documentElement.clientWidth - (formRect.left + formRect.width),
             width: 'unset',
@@ -4899,6 +4916,19 @@
     var isDetached = reactive(function () {
       return props.value.core.environment.matchMedia(props.value.renderer.detachedMediaQuery).matches;
     });
+    function warnAboutOpenOnFocusInDetachedMode() {
+      var _props$value$core$ope;
+      // `openOnFocus` isn't resolved to its default at this layer yet (that
+      // happens inside `autocomplete-core`'s `createAutocomplete`), so we
+      // mirror its documented default (`false`) explicitly here rather than
+      // relying on falsiness, or reaching for `getDefaultProps` from
+      // `autocomplete-core` — that function has side effects (it generates
+      // an autocomplete id, builds the full `getSources` pipeline) that make
+      // it unsuitable for just reading one resolved option.
+      var openOnFocus = (_props$value$core$ope = props.value.core.openOnFocus) !== null && _props$value$core$ope !== void 0 ? _props$value$core$ope : false;
+      "development" !== 'production' ? warn(!(isDetached.value && !openOnFocus), "`openOnFocus: false` can lead to unexpected behavior in detached mode. We recommend using `openOnFocus: true` when detached mode is enabled.\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-openonfocus") : void 0;
+    }
+    warnAboutOpenOnFocusInDetachedMode();
     var autocomplete = reactive(function () {
       return createAutocomplete(_objectSpread2(_objectSpread2({}, props.value.core), {}, {
         onStateChange: function onStateChange(params) {
@@ -4979,6 +5009,7 @@
           panelPlacement: props.value.renderer.panelPlacement,
           container: dom.value.root,
           form: dom.value.form,
+          panel: dom.value.panel,
           environment: props.value.core.environment
         })
       });
@@ -5001,6 +5032,7 @@
       var render = !getItemsCount(state) && !hasNoResultsSourceTemplateRef.current && props.value.renderer.renderNoResults || props.value.renderer.render;
       renderSearchBox(renderProps);
       renderPanel(render, renderProps);
+      requestAnimationFrame(setPanelPosition);
     }
     runEffect(function () {
       var environmentProps = autocomplete.value.getEnvironmentProps({
@@ -5079,6 +5111,7 @@
         var previousIsDetached = isDetached.value;
         isDetached.value = props.value.core.environment.matchMedia(props.value.renderer.detachedMediaQuery).matches;
         if (previousIsDetached !== isDetached.value) {
+          warnAboutOpenOnFocusInDetachedMode();
           update({});
         } else {
           requestAnimationFrame(setPanelPosition);