react-instantsearch 7.36.0 → 7.37.0

package/dist/cjs/widgets/Autocomplete.js

@@ -65,11 +65,14 @@ var AutocompleteDetachedSearchButton = (0, _instantsearchuicomponents.createAuto
     Fragment: _react.Fragment
 });
 var id = 0;
-var useAutocompleteInstanceId = _react.default.useId ? function() {
-    return _react.default.useId().replace(/:/g, '');
+// Colons (`:r0:`) preserved so concatenations like `autocomplete:r0:input`
+// have a recognisable boundary; callers that need a colon-free variant for
+// InstantSearch's `indexId` strip them at the use site.
+var useAutocompleteId = _react.default.useId ? function() {
+    return _react.default.useId();
 } : function() {
     return _react.default.useState(function() {
-        return "a".concat(id++);
+        return ":a".concat(id++, ":");
     })[0];
 };
 var usePropGetters = (0, _instantsearchuicomponents.createAutocompletePropGetters)({
@@ -221,6 +224,10 @@ function EXPERIMENTAL_Autocomplete(props) {
         "translations",
         "transformItems"
     ]);
+    var autoFocus = restProps.autoFocus, placeholder = restProps.placeholder, classNames = restProps.classNames;
+    // Eager-mount only when `autoFocus` is set — otherwise wait for first focus
+    // before registering the autocomplete subtree in the search graph.
+    var _useState = _sliced_to_array._((0, _react.useState)(autoFocus === true), 2), activated = _useState[0], setActivated = _useState[1];
     var translations = _object_spread._({}, DEFAULT_TRANSLATIONS, userTranslations);
     var _useInstantSearch = (0, _reactinstantsearchcore.useInstantSearch)(), indexUiState = _useInstantSearch.indexUiState, indexRenderState = _useInstantSearch.indexRenderState, status = _useInstantSearch.status;
     var compositionID = (0, _reactinstantsearchcore.useInstantSearchContext)().compositionID;
@@ -230,9 +237,8 @@ function EXPERIMENTAL_Autocomplete(props) {
     }, props.aiMode ? {
         opensChat: true
     } : {})).refine;
-    // In feeds-mode, indexId disambiguates multiple Autocomplete instances
-    // sharing the same compositionID. Mirrors the fallback at line 111 for React <18.
-    var instanceKey = useAutocompleteInstanceId();
+    var domId = useAutocompleteId();
+    var instanceKey = domId.replace(/:/g, '');
     if (isFeedsMode && indices !== undefined) {
         throw new Error('EXPERIMENTAL_Autocomplete: `feeds` and `indices` are mutually exclusive.');
     }
@@ -402,7 +408,84 @@ function EXPERIMENTAL_Autocomplete(props) {
         "indices",
         "feeds"
     ]);
+    var instance = (0, _reactinstantsearchcore.useInstantSearchContext)();
+    var detached = useDetachedMode(detachedMediaQuery);
+    var isDetached = detached.isDetached, setIsModalOpen = detached.setIsModalOpen;
+    // Lazy activation only: when `activated` flips from false to true, the
+    // newly-mounted isolated `<Index>` schedules the parent's search even
+    // though the parent's state hasn't changed. Cancel it so only the
+    // autocomplete's own search fires on activation. Skip when `autoFocus`
+    // mounts the inner eagerly — the parent's legitimate initial search
+    // shares the same defer slot and must not be cancelled.
+    var initialActivatedRef = (0, _react.useRef)(activated);
+    (0, _react.useLayoutEffect)(function() {
+        if (activated && !initialActivatedRef.current) {
+            initialActivatedRef.current = true;
+            instance.scheduleSearch.cancel();
+        }
+    }, [
+        activated,
+        instance
+    ]);
+    if (!activated) {
+        var _indexUiState_query, _indexUiState_query1;
+        restProps.indices; restProps.feeds; restProps.autoFocus; restProps.placeholder; restProps.classNames; restProps.aiMode; restProps.panelComponent; restProps.getSearchPageURL; restProps.onSelect; var shellRootProps = _object_without_properties._(restProps, [
+            "indices",
+            "feeds",
+            "autoFocus",
+            "placeholder",
+            "classNames",
+            "aiMode",
+            "panelComponent",
+            "getSearchPageURL",
+            "onSelect"
+        ]);
+        var activateWithQueryMirror = function activateWithQueryMirror() {
+            // Routing only fills the parent index's UI state, not the
+            // autocomplete's isolated one, so without this, the autocomplete
+            // would activate with an empty query and fire a useless search.
+            // We copy the parent's query into the autocomplete's slot of
+            // `_initialUiState` right before flipping `activated`: that's the
+            // moment the isolated `<Index>` is about to mount and read it.
+            // Doing this later would mean firing a second search to correct
+            // the first.
+            if (indexUiState.query) {
+                var isoIndexId = "ais-autocomplete-".concat(instanceKey);
+                var initial = instance._initialUiState;
+                initial[isoIndexId] = _object_spread_props._(_object_spread._({}, initial[isoIndexId]), {
+                    query: indexUiState.query
+                });
+            }
+            setActivated(true);
+        };
+        return /*#__PURE__*/ _react.default.createElement(Autocomplete, _object_spread_props._(_object_spread._({}, shellRootProps), {
+            classNames: classNames
+        }), isDetached ? /*#__PURE__*/ _react.default.createElement(AutocompleteDetachedSearchButton, {
+            query: (_indexUiState_query = indexUiState.query) !== null && _indexUiState_query !== void 0 ? _indexUiState_query : '',
+            placeholder: placeholder,
+            classNames: classNames,
+            translations: translations,
+            onClick: function onClick() {
+                setIsModalOpen(true);
+                activateWithQueryMirror();
+            }
+        }) : /*#__PURE__*/ _react.default.createElement(_AutocompleteSearch.AutocompleteSearch, {
+            inputProps: {
+                id: "autocomplete".concat(domId, "input"),
+                role: 'combobox',
+                placeholder: placeholder,
+                onFocus: activateWithQueryMirror
+            },
+            clearQuery: function clearQuery() {},
+            query: (_indexUiState_query1 = indexUiState.query) !== null && _indexUiState_query1 !== void 0 ? _indexUiState_query1 : '',
+            isSearchStalled: false,
+            classNames: classNames
+        }));
+    }
     var innerAutocomplete = /*#__PURE__*/ _react.default.createElement(InnerAutocomplete, _object_spread_props._(_object_spread._({}, forwardedProps), {
+        autoFocus: true,
+        domId: domId,
+        detached: detached,
         indicesConfig: indicesConfig,
         refineSearchBox: refine,
         isSearchStalled: isSearchStalled,
@@ -411,7 +494,6 @@ function EXPERIMENTAL_Autocomplete(props) {
         showRecent: showRecent,
         recentSearchConfig: recentSearchConfig,
         showQuerySuggestions: normalizedShowQuerySuggestions,
-        detachedMediaQuery: detachedMediaQuery,
         translations: translations,
         showPromptSuggestions: normalizedShowPromptSuggestions,
         transformItems: effectiveTransformItems,
@@ -430,16 +512,18 @@ function EXPERIMENTAL_Autocomplete(props) {
         }), innerAutocomplete);
     }
     return /*#__PURE__*/ _react.default.createElement(_reactinstantsearchcore.Index, {
-        EXPERIMENTAL_isolated: true
+        EXPERIMENTAL_isolated: true,
+        indexId: "ais-autocomplete-".concat(instanceKey)
     }, /*#__PURE__*/ _react.default.createElement(_reactinstantsearchcore.Configure, searchParameters), indicesConfig.map(function(index) {
         return /*#__PURE__*/ _react.default.createElement(_reactinstantsearchcore.Index, {
             key: index.indexName,
-            indexName: index.indexName
+            indexName: index.indexName,
+            indexId: "ais-autocomplete-".concat(instanceKey, "-").concat(index.indexName)
         }, /*#__PURE__*/ _react.default.createElement(_reactinstantsearchcore.Configure, index.searchParameters));
     }), innerAutocomplete);
 }
 function InnerAutocomplete(_0) {
-    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, aiMode = _0.aiMode, props = _object_without_properties._(_0, [
+    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, translations = _0.translations, classNames = _0.classNames, aiMode = _0.aiMode, domId = _0.domId, detached = _0.detached, props = _object_without_properties._(_0, [
         "indicesConfig",
         "refineSearchBox",
         "isSearchStalled",
@@ -456,10 +540,11 @@ function InnerAutocomplete(_0) {
         "transformItems",
         "placeholder",
         "autoFocus",
-        "detachedMediaQuery",
         "translations",
         "classNames",
-        "aiMode"
+        "aiMode",
+        "domId",
+        "detached"
     ]);
     var _indexUiState_query, _ref;
     var _showPromptSuggestions_searchParameters;
@@ -470,7 +555,7 @@ function InnerAutocomplete(_0) {
         }
     }), indices = _useAutocomplete.indices, refineAutocomplete = _useAutocomplete.refine, currentRefinement = _useAutocomplete.currentRefinement;
     var resolvedQuery = currentRefinement !== undefined ? currentRefinement : (_indexUiState_query = indexUiState.query) !== null && _indexUiState_query !== void 0 ? _indexUiState_query : '';
-    var _useDetachedMode = useDetachedMode(detachedMediaQuery), isDetached = _useDetachedMode.isDetached, isModalDetached = _useDetachedMode.isModalDetached, isModalOpen = _useDetachedMode.isModalOpen, setIsModalOpen = _useDetachedMode.setIsModalOpen;
+    var isDetached = detached.isDetached, isModalDetached = detached.isModalDetached, isModalOpen = detached.isModalOpen, setIsModalOpen = detached.setIsModalOpen;
     var previousIsDetachedRef = (0, _react.useRef)(isDetached);
     var _useStorage = useStorage({
         showRecent: showRecent,
@@ -536,6 +621,7 @@ function InnerAutocomplete(_0) {
     });
     var shouldHideEmptyPanel = allIndicesEmpty && recentEmpty && !hasNoResultsTemplate && !PanelComponent;
     var _usePropGetters = usePropGetters({
+        id: domId,
         indices: indicesForPropGettersWithPromptSuggestions,
         indicesConfig: indicesConfigForPropGetters,
         onRefine: function onRefine(query) {
@@ -656,7 +742,7 @@ function InnerAutocomplete(_0) {
             NoResultsComponent: currentIndexConfig.noResultsComponent,
             items: hits.map(function(item) {
                 return _object_spread_props._(_object_spread._({}, item), {
-                    __indexName: indexId
+                    __indexName: indexName
                 });
             }),
             getItemProps: getItemProps,

package/dist/es/widgets/Autocomplete.js

@@ -1,13 +1,13 @@
-import { _ as _$1 } from '@swc/helpers/esm/_object_spread.js';
-import { _ as _$3 } from '@swc/helpers/esm/_object_spread_props.js';
+import { _ as _$2 } from '@swc/helpers/esm/_object_spread.js';
+import { _ as _$4 } from '@swc/helpers/esm/_object_spread_props.js';
 import { _ } from '@swc/helpers/esm/_object_without_properties.js';
-import { _ as _$5 } from '@swc/helpers/esm/_sliced_to_array.js';
-import { _ as _$2 } from '@swc/helpers/esm/_to_consumable_array.js';
-import { _ as _$4 } from '@swc/helpers/esm/_type_of.js';
+import { _ as _$1 } from '@swc/helpers/esm/_sliced_to_array.js';
+import { _ as _$3 } from '@swc/helpers/esm/_to_consumable_array.js';
+import { _ as _$5 } from '@swc/helpers/esm/_type_of.js';
 import { createAutocompleteComponent, createAutocompletePanelComponent, createAutocompleteIndexComponent, createAutocompleteSuggestionComponent, createAutocompletePromptSuggestionComponent, createAutocompleteRecentSearchComponent, createAutocompleteDetachedContainerComponent, createAutocompleteDetachedOverlayComponent, createAutocompleteDetachedFormContainerComponent, createAutocompleteDetachedSearchButtonComponent, createAutocompletePropGetters, createAutocompleteStorage, cx, getPromptSuggestionHits, isPromptSuggestion } from 'instantsearch-ui-components';
 import { openChat, isChatBusy } from 'instantsearch.js/es/lib/chat/index.js';
 import 'instantsearch.js/es/lib/utils/index.js';
-import React, { createElement, Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createElement, Fragment, useEffect, useMemo, useRef, useState, useLayoutEffect } from 'react';
 import { useInstantSearch, useInstantSearchContext, useSearchBox, Index, Configure, Feeds, useAutocomplete } from 'react-instantsearch-core';
 import { AutocompleteSearch } from '../components/AutocompleteSearch.js';
 import { Highlight } from './Highlight.js';
@@ -54,11 +54,14 @@ var AutocompleteDetachedSearchButton = createAutocompleteDetachedSearchButtonCom
     Fragment: Fragment
 });
 var id = 0;
-var useAutocompleteInstanceId = React.useId ? function() {
-    return React.useId().replace(/:/g, '');
+// Colons (`:r0:`) preserved so concatenations like `autocomplete:r0:input`
+// have a recognisable boundary; callers that need a colon-free variant for
+// InstantSearch's `indexId` strip them at the use site.
+var useAutocompleteId = React.useId ? function() {
+    return React.useId();
 } : function() {
     return React.useState(function() {
-        return "a".concat(id++);
+        return ":a".concat(id++, ":");
     })[0];
 };
 var usePropGetters = createAutocompletePropGetters({
@@ -115,12 +118,12 @@ function getMediaQueryList(mediaQuery) {
     }, [
         mediaQuery
     ]);
-    var _useState = _$5(useState(function() {
+    var _useState = _$1(useState(function() {
         var _getMediaQueryList;
         return resolvedMediaQuery ? Boolean((_getMediaQueryList = getMediaQueryList(resolvedMediaQuery)) === null || _getMediaQueryList === void 0 ? void 0 : _getMediaQueryList.matches) : false;
     }), 2), isDetached = _useState[0], setIsDetached = _useState[1];
-    var _useState1 = _$5(useState(false), 2), isModalOpen = _useState1[0], setIsModalOpen = _useState1[1];
-    var _useState2 = _$5(useState(false), 2), isModalDetached = _useState2[0], setIsModalDetached = _useState2[1];
+    var _useState1 = _$1(useState(false), 2), isModalOpen = _useState1[0], setIsModalOpen = _useState1[1];
+    var _useState2 = _$1(useState(false), 2), isModalDetached = _useState2[0], setIsModalDetached = _useState2[1];
     useEffect(function() {
         if (!resolvedMediaQuery) {
             setIsDetached(false);
@@ -210,18 +213,21 @@ function EXPERIMENTAL_Autocomplete(props) {
         "translations",
         "transformItems"
     ]);
-    var translations = _$1({}, DEFAULT_TRANSLATIONS, userTranslations);
+    var autoFocus = restProps.autoFocus, placeholder = restProps.placeholder, classNames = restProps.classNames;
+    // Eager-mount only when `autoFocus` is set — otherwise wait for first focus
+    // before registering the autocomplete subtree in the search graph.
+    var _useState = _$1(useState(autoFocus === true), 2), activated = _useState[0], setActivated = _useState[1];
+    var translations = _$2({}, DEFAULT_TRANSLATIONS, userTranslations);
     var _useInstantSearch = useInstantSearch(), indexUiState = _useInstantSearch.indexUiState, indexRenderState = _useInstantSearch.indexRenderState, status = _useInstantSearch.status;
     var compositionID = useInstantSearchContext().compositionID;
-    var refine = useSearchBox({}, _$1({
+    var refine = useSearchBox({}, _$2({
         $$type: 'ais.autocomplete',
         $$widgetType: 'ais.autocomplete'
     }, props.aiMode ? {
         opensChat: true
     } : {})).refine;
-    // In feeds-mode, indexId disambiguates multiple Autocomplete instances
-    // sharing the same compositionID. Mirrors the fallback at line 111 for React <18.
-    var instanceKey = useAutocompleteInstanceId();
+    var domId = useAutocompleteId();
+    var instanceKey = domId.replace(/:/g, '');
     if (isFeedsMode && indices !== undefined) {
         throw new Error('EXPERIMENTAL_Autocomplete: `feeds` and `indices` are mutually exclusive.');
     }
@@ -229,7 +235,7 @@ function EXPERIMENTAL_Autocomplete(props) {
         throw new Error('EXPERIMENTAL_Autocomplete in feeds-mode requires a composition-based <InstantSearch> (compositionID must be set).');
     }
     var isSearchStalled = status === 'stalled';
-    var searchParameters = _$1({
+    var searchParameters = _$2({
         hitsPerPage: 5
     }, userSearchParameters);
     // In feeds-mode `indexName` carries the feedID so downstream matching
@@ -248,10 +254,10 @@ function EXPERIMENTAL_Autocomplete(props) {
                 getQuery: feed.getQuery,
                 classNames: feed.classNames
             };
-        }) : _$2(indices !== null && indices !== void 0 ? indices : []);
+        }) : _$3(indices !== null && indices !== void 0 ? indices : []);
         if (querySuggestionsKey) {
             var _showQuerySuggestions_classNames, _showQuerySuggestions_classNames1, _showQuerySuggestions_classNames2, _showQuerySuggestions_classNames3;
-            var querySuggestionsSearchParameters = isFeedsMode ? undefined : _$1({
+            var querySuggestionsSearchParameters = isFeedsMode ? undefined : _$2({
                 hitsPerPage: 3
             }, showQuerySuggestions.searchParameters);
             config.unshift({
@@ -282,7 +288,7 @@ function EXPERIMENTAL_Autocomplete(props) {
         }
         if (promptSuggestionsKey) {
             var _showPromptSuggestions_classNames, _showPromptSuggestions_classNames1, _showPromptSuggestions_classNames2, _showPromptSuggestions_classNames3;
-            var promptSuggestionsSearchParameters = isFeedsMode ? undefined : _$1({
+            var promptSuggestionsSearchParameters = isFeedsMode ? undefined : _$2({
                 hitsPerPage: 3
             }, showPromptSuggestions.searchParameters);
             config.push({
@@ -329,7 +335,7 @@ function EXPERIMENTAL_Autocomplete(props) {
             return undefined;
         }
         if (isFeedsMode) {
-            return _$3(_$1({}, showQuerySuggestions), {
+            return _$4(_$2({}, showQuerySuggestions), {
                 indexName: querySuggestionsKey
             });
         }
@@ -344,7 +350,7 @@ function EXPERIMENTAL_Autocomplete(props) {
             return undefined;
         }
         if (isFeedsMode) {
-            return _$3(_$1({}, showPromptSuggestions), {
+            return _$4(_$2({}, showPromptSuggestions), {
                 indexName: promptSuggestionsKey
             });
         }
@@ -362,7 +368,7 @@ function EXPERIMENTAL_Autocomplete(props) {
     var effectiveTransformItems = useMemo(function() {
         return isFeedsMode ? function(items) {
             var remapped = items.map(function(item) {
-                return _$3(_$1({}, item), {
+                return _$4(_$2({}, item), {
                     indexName: item.indexId
                 });
             });
@@ -373,13 +379,13 @@ function EXPERIMENTAL_Autocomplete(props) {
         transformItems
     ]);
     var recentSearchConfig = showRecent ? {
-        headerComponent: (typeof showRecent === "undefined" ? "undefined" : _$4(showRecent)) === 'object' ? showRecent.headerComponent : undefined,
-        itemComponent: (typeof showRecent === "undefined" ? "undefined" : _$4(showRecent)) === 'object' && showRecent.itemComponent ? showRecent.itemComponent : AutocompleteRecentSearch,
+        headerComponent: (typeof showRecent === "undefined" ? "undefined" : _$5(showRecent)) === 'object' ? showRecent.headerComponent : undefined,
+        itemComponent: (typeof showRecent === "undefined" ? "undefined" : _$5(showRecent)) === 'object' && showRecent.itemComponent ? showRecent.itemComponent : AutocompleteRecentSearch,
         classNames: {
-            root: cx('ais-AutocompleteRecentSearches', (typeof showRecent === "undefined" ? "undefined" : _$4(showRecent)) === 'object' ? (_showRecent_classNames = showRecent.classNames) === null || _showRecent_classNames === void 0 ? void 0 : _showRecent_classNames.root : undefined),
-            list: cx('ais-AutocompleteRecentSearchesList', (typeof showRecent === "undefined" ? "undefined" : _$4(showRecent)) === 'object' ? (_showRecent_classNames1 = showRecent.classNames) === null || _showRecent_classNames1 === void 0 ? void 0 : _showRecent_classNames1.list : undefined),
-            header: cx('ais-AutocompleteRecentSearchesHeader', (typeof showRecent === "undefined" ? "undefined" : _$4(showRecent)) === 'object' ? (_showRecent_classNames2 = showRecent.classNames) === null || _showRecent_classNames2 === void 0 ? void 0 : _showRecent_classNames2.header : undefined),
-            item: cx('ais-AutocompleteRecentSearchesItem', (typeof showRecent === "undefined" ? "undefined" : _$4(showRecent)) === 'object' ? (_showRecent_classNames3 = showRecent.classNames) === null || _showRecent_classNames3 === void 0 ? void 0 : _showRecent_classNames3.item : undefined)
+            root: cx('ais-AutocompleteRecentSearches', (typeof showRecent === "undefined" ? "undefined" : _$5(showRecent)) === 'object' ? (_showRecent_classNames = showRecent.classNames) === null || _showRecent_classNames === void 0 ? void 0 : _showRecent_classNames.root : undefined),
+            list: cx('ais-AutocompleteRecentSearchesList', (typeof showRecent === "undefined" ? "undefined" : _$5(showRecent)) === 'object' ? (_showRecent_classNames1 = showRecent.classNames) === null || _showRecent_classNames1 === void 0 ? void 0 : _showRecent_classNames1.list : undefined),
+            header: cx('ais-AutocompleteRecentSearchesHeader', (typeof showRecent === "undefined" ? "undefined" : _$5(showRecent)) === 'object' ? (_showRecent_classNames2 = showRecent.classNames) === null || _showRecent_classNames2 === void 0 ? void 0 : _showRecent_classNames2.header : undefined),
+            item: cx('ais-AutocompleteRecentSearchesItem', (typeof showRecent === "undefined" ? "undefined" : _$5(showRecent)) === 'object' ? (_showRecent_classNames3 = showRecent.classNames) === null || _showRecent_classNames3 === void 0 ? void 0 : _showRecent_classNames3.item : undefined)
         }
     } : undefined;
     var isSearchPage = useMemo(function() {
@@ -391,7 +397,84 @@ function EXPERIMENTAL_Autocomplete(props) {
         "indices",
         "feeds"
     ]);
-    var innerAutocomplete = /*#__PURE__*/ React.createElement(InnerAutocomplete, _$3(_$1({}, forwardedProps), {
+    var instance = useInstantSearchContext();
+    var detached = useDetachedMode(detachedMediaQuery);
+    var isDetached = detached.isDetached, setIsModalOpen = detached.setIsModalOpen;
+    // Lazy activation only: when `activated` flips from false to true, the
+    // newly-mounted isolated `<Index>` schedules the parent's search even
+    // though the parent's state hasn't changed. Cancel it so only the
+    // autocomplete's own search fires on activation. Skip when `autoFocus`
+    // mounts the inner eagerly — the parent's legitimate initial search
+    // shares the same defer slot and must not be cancelled.
+    var initialActivatedRef = useRef(activated);
+    useLayoutEffect(function() {
+        if (activated && !initialActivatedRef.current) {
+            initialActivatedRef.current = true;
+            instance.scheduleSearch.cancel();
+        }
+    }, [
+        activated,
+        instance
+    ]);
+    if (!activated) {
+        var _indexUiState_query, _indexUiState_query1;
+        restProps.indices; restProps.feeds; restProps.autoFocus; restProps.placeholder; restProps.classNames; restProps.aiMode; restProps.panelComponent; restProps.getSearchPageURL; restProps.onSelect; var shellRootProps = _(restProps, [
+            "indices",
+            "feeds",
+            "autoFocus",
+            "placeholder",
+            "classNames",
+            "aiMode",
+            "panelComponent",
+            "getSearchPageURL",
+            "onSelect"
+        ]);
+        var activateWithQueryMirror = function activateWithQueryMirror() {
+            // Routing only fills the parent index's UI state, not the
+            // autocomplete's isolated one, so without this, the autocomplete
+            // would activate with an empty query and fire a useless search.
+            // We copy the parent's query into the autocomplete's slot of
+            // `_initialUiState` right before flipping `activated`: that's the
+            // moment the isolated `<Index>` is about to mount and read it.
+            // Doing this later would mean firing a second search to correct
+            // the first.
+            if (indexUiState.query) {
+                var isoIndexId = "ais-autocomplete-".concat(instanceKey);
+                var initial = instance._initialUiState;
+                initial[isoIndexId] = _$4(_$2({}, initial[isoIndexId]), {
+                    query: indexUiState.query
+                });
+            }
+            setActivated(true);
+        };
+        return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$2({}, shellRootProps), {
+            classNames: classNames
+        }), isDetached ? /*#__PURE__*/ React.createElement(AutocompleteDetachedSearchButton, {
+            query: (_indexUiState_query = indexUiState.query) !== null && _indexUiState_query !== void 0 ? _indexUiState_query : '',
+            placeholder: placeholder,
+            classNames: classNames,
+            translations: translations,
+            onClick: function onClick() {
+                setIsModalOpen(true);
+                activateWithQueryMirror();
+            }
+        }) : /*#__PURE__*/ React.createElement(AutocompleteSearch, {
+            inputProps: {
+                id: "autocomplete".concat(domId, "input"),
+                role: 'combobox',
+                placeholder: placeholder,
+                onFocus: activateWithQueryMirror
+            },
+            clearQuery: function clearQuery() {},
+            query: (_indexUiState_query1 = indexUiState.query) !== null && _indexUiState_query1 !== void 0 ? _indexUiState_query1 : '',
+            isSearchStalled: false,
+            classNames: classNames
+        }));
+    }
+    var innerAutocomplete = /*#__PURE__*/ React.createElement(InnerAutocomplete, _$4(_$2({}, forwardedProps), {
+        autoFocus: true,
+        domId: domId,
+        detached: detached,
         indicesConfig: indicesConfig,
         refineSearchBox: refine,
         isSearchStalled: isSearchStalled,
@@ -400,7 +483,6 @@ function EXPERIMENTAL_Autocomplete(props) {
         showRecent: showRecent,
         recentSearchConfig: recentSearchConfig,
         showQuerySuggestions: normalizedShowQuerySuggestions,
-        detachedMediaQuery: detachedMediaQuery,
         translations: translations,
         showPromptSuggestions: normalizedShowPromptSuggestions,
         transformItems: effectiveTransformItems,
@@ -419,16 +501,18 @@ function EXPERIMENTAL_Autocomplete(props) {
         }), innerAutocomplete);
     }
     return /*#__PURE__*/ React.createElement(Index, {
-        EXPERIMENTAL_isolated: true
+        EXPERIMENTAL_isolated: true,
+        indexId: "ais-autocomplete-".concat(instanceKey)
     }, /*#__PURE__*/ React.createElement(Configure, searchParameters), indicesConfig.map(function(index) {
         return /*#__PURE__*/ React.createElement(Index, {
             key: index.indexName,
-            indexName: index.indexName
+            indexName: index.indexName,
+            indexId: "ais-autocomplete-".concat(instanceKey, "-").concat(index.indexName)
         }, /*#__PURE__*/ React.createElement(Configure, index.searchParameters));
     }), innerAutocomplete);
 }
 function InnerAutocomplete(_0) {
-    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, _0_detachedMediaQuery = _0.detachedMediaQuery, detachedMediaQuery = _0_detachedMediaQuery === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _0_detachedMediaQuery, translations = _0.translations, classNames = _0.classNames, aiMode = _0.aiMode, props = _(_0, [
+    var indicesConfig = _0.indicesConfig, refineSearchBox = _0.refineSearchBox, isSearchStalled = _0.isSearchStalled, getSearchPageURL = _0.getSearchPageURL, userOnSelect = _0.onSelect, indexUiState = _0.indexUiState, isSearchPage = _0.isSearchPage, PanelComponent = _0.panelComponent, showRecent = _0.showRecent, recentSearchConfig = _0.recentSearchConfig, showQuerySuggestions = _0.showQuerySuggestions, showPromptSuggestions = _0.showPromptSuggestions, chatRenderState = _0.chatRenderState, transformItems = _0.transformItems, placeholder = _0.placeholder, autoFocus = _0.autoFocus, translations = _0.translations, classNames = _0.classNames, aiMode = _0.aiMode, domId = _0.domId, detached = _0.detached, props = _(_0, [
         "indicesConfig",
         "refineSearchBox",
         "isSearchStalled",
@@ -445,10 +529,11 @@ function InnerAutocomplete(_0) {
         "transformItems",
         "placeholder",
         "autoFocus",
-        "detachedMediaQuery",
         "translations",
         "classNames",
-        "aiMode"
+        "aiMode",
+        "domId",
+        "detached"
     ]);
     var _indexUiState_query, _ref;
     var _showPromptSuggestions_searchParameters;
@@ -459,7 +544,7 @@ function InnerAutocomplete(_0) {
         }
     }), indices = _useAutocomplete.indices, refineAutocomplete = _useAutocomplete.refine, currentRefinement = _useAutocomplete.currentRefinement;
     var resolvedQuery = currentRefinement !== undefined ? currentRefinement : (_indexUiState_query = indexUiState.query) !== null && _indexUiState_query !== void 0 ? _indexUiState_query : '';
-    var _useDetachedMode = useDetachedMode(detachedMediaQuery), isDetached = _useDetachedMode.isDetached, isModalDetached = _useDetachedMode.isModalDetached, isModalOpen = _useDetachedMode.isModalOpen, setIsModalOpen = _useDetachedMode.setIsModalOpen;
+    var isDetached = detached.isDetached, isModalDetached = detached.isModalDetached, isModalOpen = detached.isModalOpen, setIsModalOpen = detached.setIsModalOpen;
     var previousIsDetachedRef = useRef(isDetached);
     var _useStorage = useStorage({
         showRecent: showRecent,
@@ -478,11 +563,11 @@ function InnerAutocomplete(_0) {
                 });
             }) : index.hits;
             if (index.indexName !== promptSuggestionsIndexName) {
-                return _$3(_$1({}, index), {
+                return _$4(_$2({}, index), {
                     hits: dedupedHits
                 });
             }
-            return _$3(_$1({}, index), {
+            return _$4(_$2({}, index), {
                 hits: getPromptSuggestionHits({
                     hits: dedupedHits,
                     limit: promptSuggestionsLimit
@@ -502,7 +587,7 @@ function InnerAutocomplete(_0) {
             if (index.indexName !== promptSuggestionsIndexName) {
                 return index;
             }
-            return _$3(_$1({}, index), {
+            return _$4(_$2({}, index), {
                 hits: getPromptSuggestionHits({
                     hits: index.hits,
                     limit: promptSuggestionsLimit
@@ -525,6 +610,7 @@ function InnerAutocomplete(_0) {
     });
     var shouldHideEmptyPanel = allIndicesEmpty && recentEmpty && !hasNoResultsTemplate && !PanelComponent;
     var _usePropGetters = usePropGetters({
+        id: domId,
         indices: indicesForPropGettersWithPromptSuggestions,
         indicesConfig: indicesConfigForPropGetters,
         onRefine: function onRefine(query) {
@@ -553,7 +639,7 @@ function InnerAutocomplete(_0) {
                 return;
             }
             if (!isSearchPage && typeof getSearchPageURL !== 'undefined') {
-                window.location.href = getSearchPageURL(_$3(_$1({}, indexUiState), {
+                window.location.href = getSearchPageURL(_$4(_$2({}, indexUiState), {
                     query: query
                 }));
                 return;
@@ -644,8 +730,8 @@ function InnerAutocomplete(_0) {
             ItemComponent: currentIndexConfig.itemComponent,
             NoResultsComponent: currentIndexConfig.noResultsComponent,
             items: hits.map(function(item) {
-                return _$3(_$1({}, item), {
-                    __indexName: indexId
+                return _$4(_$2({}, item), {
+                    __indexName: indexName
                 });
             }),
             getItemProps: getItemProps,
@@ -691,7 +777,7 @@ function InnerAutocomplete(_0) {
         aiModeButtonDisabled: aiMode ? isChatBusy(chatRenderState) : undefined,
         classNames: classNames
     });
-    var panelContent = /*#__PURE__*/ React.createElement(AutocompletePanel, _$3(_$1({}, getPanelProps()), {
+    var panelContent = /*#__PURE__*/ React.createElement(AutocompletePanel, _$4(_$2({}, getPanelProps()), {
         classNames: {
             root: classNames === null || classNames === void 0 ? void 0 : classNames.panel,
             open: classNames === null || classNames === void 0 ? void 0 : classNames.panelOpen,
@@ -703,14 +789,14 @@ function InnerAutocomplete(_0) {
     }) : Object.keys(elements).map(function(elementId) {
         return elements[elementId];
     }));
-    var detachedContainerClassNames = isModalDetached ? _$3(_$1({}, classNames), {
+    var detachedContainerClassNames = isModalDetached ? _$4(_$2({}, classNames), {
         detachedContainer: cx('ais-AutocompleteDetachedContainer--modal', classNames === null || classNames === void 0 ? void 0 : classNames.detachedContainer)
     }) : classNames;
     var _getRootProps = getRootProps(), rootRef = _getRootProps.ref, rootProps = _(_getRootProps, [
         "ref"
     ]);
     if (isDetached) {
-        return /*#__PURE__*/ React.createElement(Autocomplete, _$3(_$1({}, props, rootProps), {
+        return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$2({}, props, rootProps), {
             rootRef: rootRef,
             classNames: classNames
         }), /*#__PURE__*/ React.createElement(AutocompleteDetachedSearchButton, {
@@ -736,7 +822,7 @@ function InnerAutocomplete(_0) {
         }, searchBoxContent), panelContent)));
     }
     // Normal (non-detached) rendering
-    return /*#__PURE__*/ React.createElement(Autocomplete, _$3(_$1({}, props, rootProps), {
+    return /*#__PURE__*/ React.createElement(Autocomplete, _$4(_$2({}, props, rootProps), {
         rootRef: rootRef,
         classNames: classNames
     }), searchBoxContent, panelContent);