@algolia/autocomplete-js 1.8.1 → 1.8.3

package/dist/esm/autocomplete.js

@@ -319,8 +319,6 @@ export function autocomplete(options) {
       } else {
         props.value.core.environment.document.body.removeChild(dom.value.detachedOverlay);
         props.value.core.environment.document.body.classList.remove('aa-Detached');
-        autocomplete.value.setQuery('');
-        autocomplete.value.refresh();
       }
     });
   }

package/dist/esm/createAutocompleteDom.js

@@ -109,6 +109,15 @@ export function createAutocompleteDom(_ref) {
   var panel = createDomElement('div', _objectSpread({
     class: classNames.panel
   }, panelProps));
+  var detachedSearchButtonQuery = createDomElement('div', {
+    class: classNames.detachedSearchButtonQuery,
+    textContent: state.query
+  });
+  var detachedSearchButtonPlaceholder = createDomElement('div', {
+    class: classNames.detachedSearchButtonPlaceholder,
+    hidden: Boolean(state.query),
+    textContent: placeholder
+  });
 
   if (process.env.NODE_ENV === 'test') {
     setProperties(panel, {
@@ -123,17 +132,13 @@ export function createAutocompleteDom(_ref) {
         environment: environment
       })]
     });
-    var detachedSearchButtonPlaceholder = createDomElement('div', {
-      class: classNames.detachedSearchButtonPlaceholder,
-      textContent: placeholder
-    });
     var detachedSearchButton = createDomElement('button', {
       type: 'button',
       class: classNames.detachedSearchButton,
       onClick: function onClick() {
         setIsModalOpen(true);
       },
-      children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder]
+      children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder, detachedSearchButtonQuery]
     });
     var detachedCancelButton = createDomElement('button', {
       type: 'button',
@@ -162,6 +167,8 @@ export function createAutocompleteDom(_ref) {
   return {
     detachedContainer: detachedContainer,
     detachedOverlay: detachedOverlay,
+    detachedSearchButtonQuery: detachedSearchButtonQuery,
+    detachedSearchButtonPlaceholder: detachedSearchButtonPlaceholder,
     inputWrapper: inputWrapper,
     input: input,
     root: root,

package/dist/esm/getDefaultOptions.js

@@ -23,6 +23,7 @@ var defaultClassNames = {
   detachedSearchButton: 'aa-DetachedSearchButton',
   detachedSearchButtonIcon: 'aa-DetachedSearchButtonIcon',
   detachedSearchButtonPlaceholder: 'aa-DetachedSearchButtonPlaceholder',
+  detachedSearchButtonQuery: 'aa-DetachedSearchButtonQuery',
   form: 'aa-Form',
   input: 'aa-Input',
   inputWrapper: 'aa-InputWrapper',

package/dist/esm/render.js

@@ -36,6 +36,12 @@ export function renderSearchBox(_ref) {
   setProperties(dom.clearButton, {
     hidden: !state.query
   });
+  setProperties(dom.detachedSearchButtonQuery, {
+    textContent: state.query
+  });
+  setProperties(dom.detachedSearchButtonPlaceholder, {
+    hidden: Boolean(state.query)
+  });
 }
 export function renderPanel(render, _ref2) {
   var autocomplete = _ref2.autocomplete,
@@ -98,11 +104,14 @@ export function renderPanel(render, _ref2) {
       className: classNames.list
     }, propGetters.getListProps(_objectSpread({
       state: state,
-      props: autocomplete.getListProps({})
+      props: autocomplete.getListProps({
+        sourceIndex: sourceIndex
+      })
     }, autocompleteScopeApi))), items.map(function (item) {
       var itemProps = autocomplete.getItemProps({
         item: item,
-        source: source
+        source: source,
+        sourceIndex: sourceIndex
       });
       return renderer.createElement("li", _extends({
         key: itemProps.id,

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

@@ -6,6 +6,7 @@ export declare type AutocompleteClassNames = {
     detachedSearchButton: string;
     detachedSearchButtonIcon: string;
     detachedSearchButtonPlaceholder: string;
+    detachedSearchButtonQuery: string;
     form: string;
     input: string;
     inputWrapper: string;

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

@@ -10,4 +10,6 @@ export declare type AutocompleteDom = {
     panel: HTMLDivElement;
     detachedContainer: HTMLDivElement;
     detachedOverlay: HTMLDivElement;
+    detachedSearchButtonQuery: HTMLDivElement;
+    detachedSearchButtonPlaceholder: HTMLDivElement;
 };

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.8.1 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 1.8.3 | 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.8.1';
+  var version = '1.8.3';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -1906,7 +1906,9 @@
       _excluded2 = ["inputElement", "formElement", "panelElement"],
       _excluded3 = ["inputElement"],
       _excluded4 = ["inputElement", "maxLength"],
-      _excluded5 = ["item", "source"];
+      _excluded5 = ["sourceIndex"],
+      _excluded6 = ["sourceIndex"],
+      _excluded7 = ["item", "source", "sourceIndex"];
 
   function ownKeys$6(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -2180,18 +2182,30 @@
       }, rest);
     };
 
-    var getLabelProps = function getLabelProps(rest) {
+    var getAutocompleteId = function getAutocompleteId(instanceId, sourceId) {
+      return typeof sourceId !== 'undefined' ? "".concat(instanceId, "-").concat(sourceId) : instanceId;
+    };
+
+    var getLabelProps = function getLabelProps(providedProps) {
+      var _ref3 = providedProps || {},
+          sourceIndex = _ref3.sourceIndex,
+          rest = _objectWithoutProperties$1(_ref3, _excluded5);
+
       return _objectSpread$6({
-        htmlFor: "".concat(props.id, "-input"),
-        id: "".concat(props.id, "-label")
+        htmlFor: "".concat(getAutocompleteId(props.id, sourceIndex), "-input"),
+        id: "".concat(getAutocompleteId(props.id, sourceIndex), "-label")
       }, rest);
     };
 
-    var getListProps = function getListProps(rest) {
+    var getListProps = function getListProps(providedProps) {
+      var _ref4 = providedProps || {},
+          sourceIndex = _ref4.sourceIndex,
+          rest = _objectWithoutProperties$1(_ref4, _excluded6);
+
       return _objectSpread$6({
         role: 'listbox',
-        'aria-labelledby': "".concat(props.id, "-label"),
-        id: "".concat(props.id, "-list")
+        'aria-labelledby': "".concat(getAutocompleteId(props.id, sourceIndex), "-label"),
+        id: "".concat(getAutocompleteId(props.id, sourceIndex), "-list")
       }, rest);
     };
 
@@ -2212,10 +2226,11 @@
     var getItemProps = function getItemProps(providedProps) {
       var item = providedProps.item,
           source = providedProps.source,
-          rest = _objectWithoutProperties$1(providedProps, _excluded5);
+          sourceIndex = providedProps.sourceIndex,
+          rest = _objectWithoutProperties$1(providedProps, _excluded7);
 
       return _objectSpread$6({
-        id: "".concat(props.id, "-item-").concat(item.__autocomplete_id),
+        id: "".concat(getAutocompleteId(props.id, sourceIndex), "-item-").concat(item.__autocomplete_id),
         role: 'option',
         'aria-selected': store.getState().activeItemId === item.__autocomplete_id,
         onMouseMove: function onMouseMove(event) {
@@ -3070,6 +3085,15 @@
     var panel = createDomElement('div', _objectSpread2({
       class: classNames.panel
     }, panelProps));
+    var detachedSearchButtonQuery = createDomElement('div', {
+      class: classNames.detachedSearchButtonQuery,
+      textContent: state.query
+    });
+    var detachedSearchButtonPlaceholder = createDomElement('div', {
+      class: classNames.detachedSearchButtonPlaceholder,
+      hidden: Boolean(state.query),
+      textContent: placeholder
+    });
 
     if ("development" === 'test') {
       setProperties(panel, {
@@ -3084,17 +3108,13 @@
           environment: environment
         })]
       });
-      var detachedSearchButtonPlaceholder = createDomElement('div', {
-        class: classNames.detachedSearchButtonPlaceholder,
-        textContent: placeholder
-      });
       var detachedSearchButton = createDomElement('button', {
         type: 'button',
         class: classNames.detachedSearchButton,
         onClick: function onClick() {
           setIsModalOpen(true);
         },
-        children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder]
+        children: [detachedSearchButtonIcon, detachedSearchButtonPlaceholder, detachedSearchButtonQuery]
       });
       var detachedCancelButton = createDomElement('button', {
         type: 'button',
@@ -3123,6 +3143,8 @@
     return {
       detachedContainer: detachedContainer,
       detachedOverlay: detachedOverlay,
+      detachedSearchButtonQuery: detachedSearchButtonQuery,
+      detachedSearchButtonPlaceholder: detachedSearchButtonPlaceholder,
       inputWrapper: inputWrapper,
       input: input,
       root: root,
@@ -3768,6 +3790,7 @@
     detachedSearchButton: 'aa-DetachedSearchButton',
     detachedSearchButtonIcon: 'aa-DetachedSearchButtonIcon',
     detachedSearchButtonPlaceholder: 'aa-DetachedSearchButtonPlaceholder',
+    detachedSearchButtonQuery: 'aa-DetachedSearchButtonQuery',
     form: 'aa-Form',
     input: 'aa-Input',
     inputWrapper: 'aa-InputWrapper',
@@ -3980,6 +4003,12 @@
     setProperties(dom.clearButton, {
       hidden: !state.query
     });
+    setProperties(dom.detachedSearchButtonQuery, {
+      textContent: state.query
+    });
+    setProperties(dom.detachedSearchButtonPlaceholder, {
+      hidden: Boolean(state.query)
+    });
   }
   function renderPanel(render, _ref2) {
     var autocomplete = _ref2.autocomplete,
@@ -4042,11 +4071,14 @@
         className: classNames.list
       }, propGetters.getListProps(_objectSpread2({
         state: state,
-        props: autocomplete.getListProps({})
+        props: autocomplete.getListProps({
+          sourceIndex: sourceIndex
+        })
       }, autocompleteScopeApi))), items.map(function (item) {
         var itemProps = autocomplete.getItemProps({
           item: item,
-          source: source
+          source: source,
+          sourceIndex: sourceIndex
         });
         return renderer.createElement("li", _extends({
           key: itemProps.id,
@@ -4398,8 +4430,6 @@
         } else {
           props.value.core.environment.document.body.removeChild(dom.value.detachedOverlay);
           props.value.core.environment.document.body.classList.remove('aa-Detached');
-          autocomplete.value.setQuery('');
-          autocomplete.value.refresh();
         }
       });
     }