react-instantsearch 7.23.1 → 7.24.0

package/dist/umd/ReactInstantSearch.js

@@ -7,7 +7,7 @@
 
   var React__default = 'default' in React ? React['default'] : React;
 
-  var version = '7.23.1';
+  var version = '7.24.0';
 
   // Copyright Joyent, Inc. and other Node contributors.
   //
@@ -4651,7 +4651,7 @@
 
   var sortAndMergeRecommendations_1 = sortAndMergeRecommendations;
 
-  var version$1 = '3.27.0';
+  var version$1 = '3.27.1';
 
   var escapeFacetValue$3 = escapeFacetValue_1.escapeFacetValue;
 
@@ -10743,6 +10743,12 @@
         helper.searchWithoutTriggeringOnStateChange = function () {
           return mainHelper.search();
         };
+
+        // We use the same pattern for the `searchForFacetValues`.
+        helper.searchForFacetValues = function (facetName, facetValue, maxFacetHits, userState) {
+          var state = mergeSearchParameters.apply(void 0, [mainHelper.state].concat(_toConsumableArray$1(resolveSearchParameters(_this3)))).setQueryParameters(userState);
+          return mainHelper.searchForFacetValues(facetName, facetValue, maxFacetHits, state);
+        };
         var isolatedHelper = indexName ? helper : algoliasearchHelper_1({}, '__empty_index__', {});
         var derivingHelper = isolated ? isolatedHelper : nearestIsolatedHelper(parent, mainHelper);
         derivedHelper = derivingHelper.derive(function () {
@@ -13355,7 +13361,7 @@
     };
   }
 
-  var version$3 = '4.87.1';
+  var version$3 = '4.88.0';
 
   function _typeof$q(o) {
     "@babel/helpers - typeof";
@@ -16744,6 +16750,12 @@
   var MemorySearchToolType = 'algolia_memory_search';
   var PonderToolType = 'algolia_ponder';
 
+  function flat$1(arr) {
+    return arr.reduce(function (acc, array) {
+      return acc.concat(array);
+    }, []);
+  }
+
   function _typeof$z(o) {
     "@babel/helpers - typeof";
 
@@ -16798,12 +16810,56 @@
     }
     return ("string" === r ? String : Number)(t);
   }
+  function _toConsumableArray$5(r) {
+    return _arrayWithoutHoles$5(r) || _iterableToArray$5(r) || _unsupportedIterableToArray$e(r) || _nonIterableSpread$5();
+  }
+  function _nonIterableSpread$5() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  function _iterableToArray$5(r) {
+    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+  }
+  function _arrayWithoutHoles$5(r) {
+    if (Array.isArray(r)) return _arrayLikeToArray$e(r);
+  }
+  function _objectWithoutProperties$a(e, t) {
+    if (null == e) return {};
+    var o,
+      r,
+      i = _objectWithoutPropertiesLoose$b(e, t);
+    if (Object.getOwnPropertySymbols) {
+      var n = Object.getOwnPropertySymbols(e);
+      for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    }
+    return i;
+  }
+  function _objectWithoutPropertiesLoose$b(r, e) {
+    if (null == r) return {};
+    var t = {};
+    for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+      if (-1 !== e.indexOf(n)) continue;
+      t[n] = r[n];
+    }
+    return t;
+  }
   function _slicedToArray$a(r, e) {
     return _arrayWithHoles$a(r) || _iterableToArrayLimit$a(r, e) || _unsupportedIterableToArray$e(r, e) || _nonIterableRest$a();
   }
   function _nonIterableRest$a() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
+  function _unsupportedIterableToArray$e(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray$e(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$e(r, a) : void 0;
+    }
+  }
+  function _arrayLikeToArray$e(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
   function _iterableToArrayLimit$a(r, l) {
     var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
     if (null != t) {
@@ -16834,66 +16890,72 @@
   function _arrayWithHoles$a(r) {
     if (Array.isArray(r)) return r;
   }
-  function _toConsumableArray$5(r) {
-    return _arrayWithoutHoles$5(r) || _iterableToArray$5(r) || _unsupportedIterableToArray$e(r) || _nonIterableSpread$5();
-  }
-  function _nonIterableSpread$5() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-  function _unsupportedIterableToArray$e(r, a) {
-    if (r) {
-      if ("string" == typeof r) return _arrayLikeToArray$e(r, a);
-      var t = {}.toString.call(r).slice(8, -1);
-      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$e(r, a) : void 0;
-    }
-  }
-  function _iterableToArray$5(r) {
-    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-  }
-  function _arrayWithoutHoles$5(r) {
-    if (Array.isArray(r)) return _arrayLikeToArray$e(r);
-  }
-  function _arrayLikeToArray$e(r, a) {
-    (null == a || a > r.length) && (a = r.length);
-    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-    return n;
-  }
-  function _objectWithoutProperties$a(e, t) {
-    if (null == e) return {};
-    var o,
-      r,
-      i = _objectWithoutPropertiesLoose$b(e, t);
-    if (Object.getOwnPropertySymbols) {
-      var n = Object.getOwnPropertySymbols(e);
-      for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-    }
-    return i;
-  }
-  function _objectWithoutPropertiesLoose$b(r, e) {
-    if (null == r) return {};
-    var t = {};
-    for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-    return t;
-  }
   var withUsage$6 = createDocumentationMessageGenerator({
     name: 'chat',
     connector: true
   });
+  function getAttributesToClear(_ref) {
+    var results = _ref.results,
+      helper = _ref.helper;
+    return uniq(getRefinements(results, helper.state, true).map(function (refinement) {
+      return refinement.attribute;
+    }));
+  }
+  function updateStateFromSearchToolInput(params, helper) {
+    // clear all filters first
+    var attributesToClear = getAttributesToClear({
+      results: helper.lastResults,
+      helper: helper
+    });
+    helper.setState(clearRefinements({
+      helper: helper,
+      attributesToClear: attributesToClear
+    }));
+    if (params.facetFilters) {
+      var attributes = flat$1(params.facetFilters).map(function (filter) {
+        var _filter$split = filter.split(':'),
+          _filter$split2 = _slicedToArray$a(_filter$split, 2),
+          attribute = _filter$split2[0],
+          value = _filter$split2[1];
+        return {
+          attribute: attribute,
+          value: value
+        };
+      });
+      attributes.forEach(function (_ref2) {
+        var attribute = _ref2.attribute,
+          value = _ref2.value;
+        if (!helper.state.isConjunctiveFacet(attribute) && !helper.state.isHierarchicalFacet(attribute) && !helper.state.isDisjunctiveFacet(attribute)) {
+          var s = helper.state.addDisjunctiveFacet(attribute);
+          helper.setState(s);
+          helper.toggleFacetRefinement(attribute, value);
+        } else {
+          var _helper$state$hierarc;
+          var attr = ((_helper$state$hierarc = helper.state.hierarchicalFacets.find(function (facet) {
+            return facet.name === attribute;
+          })) === null || _helper$state$hierarc === void 0 ? void 0 : _helper$state$hierarc.name) || attribute;
+          helper.toggleFacetRefinement(attr, value);
+        }
+      });
+    }
+    if (params.query) {
+      helper.setQuery(params.query);
+    }
+    helper.search();
+    return helper.state;
+  }
   var connectChat = (function connectChat(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
     checkRendering(renderFn, withUsage$6());
     return function (widgetParams) {
-      var _ref = widgetParams || {},
-        _ref$resume = _ref.resume,
-        resume = _ref$resume === void 0 ? false : _ref$resume,
-        _ref$tools = _ref.tools,
-        tools = _ref$tools === void 0 ? {} : _ref$tools,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'chat' : _ref$type,
-        options = _objectWithoutProperties$a(_ref, _excluded$a);
+      var _ref3 = widgetParams || {},
+        _ref3$resume = _ref3.resume,
+        resume = _ref3$resume === void 0 ? false : _ref3$resume,
+        _ref3$tools = _ref3.tools,
+        tools = _ref3$tools === void 0 ? {} : _ref3$tools,
+        _ref3$type = _ref3.type,
+        type = _ref3$type === void 0 ? 'chat' : _ref3$type,
+        options = _objectWithoutProperties$a(_ref3, _excluded$a);
       var _chatInstance;
       var input = '';
       var open = false;
@@ -16994,10 +17056,10 @@
               'x-algolia-api-Key': apiKey,
               'x-algolia-agent': getAlgoliaAgent(instantSearchInstance.client)
             },
-            prepareSendMessagesRequest: function prepareSendMessagesRequest(_ref2) {
-              var messages = _ref2.messages,
-                trigger = _ref2.trigger,
-                rest = _objectWithoutProperties$a(_ref2, _excluded2$2);
+            prepareSendMessagesRequest: function prepareSendMessagesRequest(_ref4) {
+              var messages = _ref4.messages,
+                trigger = _ref4.trigger,
+                rest = _objectWithoutProperties$a(_ref4, _excluded2$2);
               return {
                 // Bypass cache when regenerating to ensure fresh responses
                 api: trigger === 'regenerate-message' ? "".concat(baseApi, "&cache=false") : baseApi,
@@ -17017,8 +17079,8 @@
         return new Chat(_objectSpread$s(_objectSpread$s({}, options), {}, {
           transport: transport,
           sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-          onToolCall: function onToolCall(_ref3) {
-            var toolCall = _ref3.toolCall;
+          onToolCall: function onToolCall(_ref5) {
+            var toolCall = _ref5.toolCall;
             var tool = tools[toolCall.toolName];
             if (!tool) {
               return _chatInstance.addToolResult({
@@ -17028,8 +17090,8 @@
               });
             }
             if (tool.onToolCall) {
-              var addToolResult = function addToolResult(_ref4) {
-                var output = _ref4.output;
+              var addToolResult = function addToolResult(_ref6) {
+                var output = _ref6.output;
                 return _chatInstance.addToolResult({
                   output: output,
                   tool: toolCall.toolName,
@@ -17089,7 +17151,8 @@
         },
         getWidgetRenderState: function getWidgetRenderState(renderOptions) {
           var instantSearchInstance = renderOptions.instantSearchInstance,
-            parent = renderOptions.parent;
+            parent = renderOptions.parent,
+            helper = renderOptions.helper;
           if (!_chatInstance) {
             this.init(_objectSpread$s(_objectSpread$s({}, renderOptions), {}, {
               uiState: {},
@@ -17103,13 +17166,17 @@
               widgetType: this.$$type
             });
           }
+          function applyFilters(params) {
+            return updateStateFromSearchToolInput(params, helper);
+          }
           var toolsWithAddToolResult = {};
-          Object.entries(tools).forEach(function (_ref5) {
-            var _ref6 = _slicedToArray$a(_ref5, 2),
-              key = _ref6[0],
-              tool = _ref6[1];
+          Object.entries(tools).forEach(function (_ref7) {
+            var _ref8 = _slicedToArray$a(_ref7, 2),
+              key = _ref8[0],
+              tool = _ref8[1];
             var toolWithAddToolResult = _objectSpread$s(_objectSpread$s({}, tool), {}, {
-              addToolResult: _chatInstance.addToolResult
+              addToolResult: _chatInstance.addToolResult,
+              applyFilters: applyFilters
             });
             toolsWithAddToolResult[key] = toolWithAddToolResult;
           });
@@ -17294,7 +17361,7 @@
             scopedResults = _ref2.scopedResults,
             results = _ref2.results;
           connectorState.attributesToClear = scopedResults.reduce(function (attributesToClear, scopedResult) {
-            return attributesToClear.concat(getAttributesToClear({
+            return attributesToClear.concat(getAttributesToClear$1({
               scopedResult: scopedResult,
               includedAttributes: includedAttributes,
               excludedAttributes: excludedAttributes,
@@ -17336,7 +17403,7 @@
       };
     };
   };
-  function getAttributesToClear(_ref5) {
+  function getAttributesToClear$1(_ref5) {
     var scopedResult = _ref5.scopedResult,
       includedAttributes = _ref5.includedAttributes,
       excludedAttributes = _ref5.excludedAttributes,
@@ -23596,7 +23663,203 @@
     };
   }
 
-  var _excluded$g = ["className", "onSelect", "onApply"];
+  function createAutocompleteDetachedContainerComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function AutocompleteDetachedContainer(userProps) {
+      var children = userProps.children,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+      return createElement("div", {
+        className: cx('ais-AutocompleteDetachedContainer', classNames.detachedContainer),
+        onMouseDown: function onMouseDown(event) {
+          event.stopPropagation();
+        }
+      }, children);
+    };
+  }
+
+  var _excluded$g = ["variant", "size", "iconOnly", "className", "children"];
+  function createButtonComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function Button(userProps) {
+      var _userProps$variant = userProps.variant,
+        variant = _userProps$variant === void 0 ? 'primary' : _userProps$variant,
+        _userProps$size = userProps.size,
+        size = _userProps$size === void 0 ? 'md' : _userProps$size,
+        _userProps$iconOnly = userProps.iconOnly,
+        iconOnly = _userProps$iconOnly === void 0 ? false : _userProps$iconOnly,
+        className = userProps.className,
+        children = userProps.children,
+        props = _objectWithoutProperties$g(userProps, _excluded$g);
+      return createElement("button", _extends$2({
+        type: "button",
+        className: cx('ais-Button', "ais-Button--".concat(variant), "ais-Button--".concat(size), iconOnly && 'ais-Button--icon-only', className)
+      }, props), children);
+    };
+  }
+
+  function createAutocompleteDetachedFormContainerComponent(_ref) {
+    var createElement = _ref.createElement;
+    var Button = createButtonComponent({
+      createElement: createElement
+    });
+    return function AutocompleteDetachedFormContainer(userProps) {
+      var children = userProps.children,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        onCancel = userProps.onCancel,
+        translations = userProps.translations;
+      return createElement("div", {
+        className: cx('ais-AutocompleteDetachedFormContainer', classNames.detachedFormContainer)
+      }, children, createElement(Button, {
+        variant: "ghost",
+        className: cx('ais-AutocompleteDetachedCancelButton', classNames.detachedCancelButton),
+        onClick: onCancel
+      }, translations.detachedCancelButtonText));
+    };
+  }
+
+  function createAutocompleteDetachedOverlayComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function AutocompleteDetachedOverlay(userProps) {
+      var children = userProps.children,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        onClose = userProps.onClose;
+      return createElement("div", {
+        className: cx('ais-AutocompleteDetachedOverlay', classNames.detachedOverlay),
+        onMouseDown: onClose
+      }, children);
+    };
+  }
+
+  function SubmitIcon(_ref) {
+    var createElement = _ref.createElement;
+    return createElement("svg", {
+      className: "ais-AutocompleteSubmitIcon",
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+    }));
+  }
+  function LoadingIcon(_ref2) {
+    var createElement = _ref2.createElement;
+    return createElement("svg", {
+      className: "ais-AutocompleteLoadingIcon",
+      viewBox: "0 0 100 100"
+    }, createElement("circle", {
+      cx: "50",
+      cy: "50",
+      fill: "none",
+      r: "35",
+      stroke: "currentColor",
+      strokeDasharray: "164.93361431346415 56.97787143782138",
+      strokeWidth: "6"
+    }, createElement("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;90 50 50;180 50 50;360 50 50",
+      keyTimes: "0;0.40;0.65;1"
+    })));
+  }
+  function ClearIcon(_ref3) {
+    var createElement = _ref3.createElement;
+    return createElement("svg", {
+      className: "ais-AutocompleteClearIcon",
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
+    }));
+  }
+  function ClockIcon(_ref4) {
+    var createElement = _ref4.createElement;
+    return createElement("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+    }));
+  }
+  function TrashIcon(_ref5) {
+    var createElement = _ref5.createElement;
+    return createElement("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"
+    }));
+  }
+  function ApplyIcon(_ref6) {
+    var createElement = _ref6.createElement;
+    return createElement("svg", {
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+    }));
+  }
+  function SearchIcon(_ref7) {
+    var createElement = _ref7.createElement;
+    return createElement("svg", {
+      className: "ais-AutocompleteDetachedSearchIcon",
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, createElement("path", {
+      d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+    }));
+  }
+
+  function createAutocompleteDetachedSearchButtonComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function AutocompleteDetachedSearchButton(userProps) {
+      var query = userProps.query,
+        _userProps$placeholde = userProps.placeholder,
+        placeholder = _userProps$placeholde === void 0 ? 'Search' : _userProps$placeholde,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        onClick = userProps.onClick,
+        onClear = userProps.onClear,
+        translations = userProps.translations;
+      return createElement("div", {
+        className: cx('ais-AutocompleteDetachedSearchButton', classNames.detachedSearchButton),
+        onClick: onClick,
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick();
+          }
+        },
+        role: "button",
+        tabIndex: 0,
+        title: translations.detachedSearchButtonTitle
+      }, createElement("div", {
+        className: cx('ais-AutocompleteDetachedSearchButtonIcon', classNames.detachedSearchButtonIcon)
+      }, createElement(SearchIcon, {
+        createElement: createElement
+      })), createElement("div", {
+        className: cx('ais-AutocompleteDetachedSearchButtonPlaceholder', classNames.detachedSearchButtonPlaceholder),
+        hidden: Boolean(query)
+      }, placeholder), createElement("div", {
+        className: cx('ais-AutocompleteDetachedSearchButtonQuery', classNames.detachedSearchButtonQuery)
+      }, query), query && onClear && createElement("button", {
+        type: "reset",
+        className: cx('ais-AutocompleteDetachedSearchButtonClear', classNames.detachedSearchButtonClear),
+        title: translations.detachedClearButtonTitle,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          onClear();
+        }
+      }, createElement(ClearIcon, {
+        createElement: createElement
+      })));
+    };
+  }
+
+  var _excluded$h = ["className", "onSelect", "onApply"];
   function createAutocompleteIndexComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteIndex(userProps) {
@@ -23622,7 +23885,7 @@
           className = _getItemProps.className,
           onSelect = _getItemProps.onSelect,
           onApply = _getItemProps.onApply,
-          itemProps = _objectWithoutProperties$g(_getItemProps, _excluded$g);
+          itemProps = _objectWithoutProperties$g(_getItemProps, _excluded$h);
         return createElement("li", _extends$2({
           key: "".concat(itemProps.id, ":").concat(item.objectID)
         }, itemProps, {
@@ -23636,7 +23899,7 @@
     };
   }
 
-  var _excluded$h = ["children", "classNames", "hidden"];
+  var _excluded$i = ["children", "classNames", "hidden"];
   function createAutocompletePanelComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompletePanel(userProps) {
@@ -23644,7 +23907,7 @@
         _userProps$classNames = userProps.classNames,
         classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
         hidden = userProps.hidden,
-        props = _objectWithoutProperties$g(userProps, _excluded$h);
+        props = _objectWithoutProperties$g(userProps, _excluded$i);
       return createElement("div", _extends$2({}, props, {
         "aria-hidden": hidden,
         className: cx('ais-AutocompletePanel', !hidden && 'ais-AutocompletePanel--open', classNames.root, props.className),
@@ -24306,76 +24569,6 @@
     return str.slice(0, prefix.length) === prefix;
   }
 
-  function SubmitIcon(_ref) {
-    var createElement = _ref.createElement;
-    return createElement("svg", {
-      className: "ais-AutocompleteSubmitIcon",
-      viewBox: "0 0 24 24",
-      fill: "currentColor"
-    }, createElement("path", {
-      d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
-    }));
-  }
-  function LoadingIcon(_ref2) {
-    var createElement = _ref2.createElement;
-    return createElement("svg", {
-      className: "ais-AutocompleteLoadingIcon",
-      viewBox: "0 0 100 100"
-    }, createElement("circle", {
-      cx: "50",
-      cy: "50",
-      fill: "none",
-      r: "35",
-      stroke: "currentColor",
-      strokeDasharray: "164.93361431346415 56.97787143782138",
-      strokeWidth: "6"
-    }, createElement("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      repeatCount: "indefinite",
-      dur: "1s",
-      values: "0 50 50;90 50 50;180 50 50;360 50 50",
-      keyTimes: "0;0.40;0.65;1"
-    })));
-  }
-  function ClearIcon(_ref3) {
-    var createElement = _ref3.createElement;
-    return createElement("svg", {
-      className: "ais-AutocompleteClearIcon",
-      viewBox: "0 0 24 24",
-      fill: "currentColor"
-    }, createElement("path", {
-      d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
-    }));
-  }
-  function ClockIcon(_ref4) {
-    var createElement = _ref4.createElement;
-    return createElement("svg", {
-      viewBox: "0 0 24 24",
-      fill: "currentColor"
-    }, createElement("path", {
-      d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
-    }));
-  }
-  function TrashIcon(_ref5) {
-    var createElement = _ref5.createElement;
-    return createElement("svg", {
-      viewBox: "0 0 24 24",
-      fill: "currentColor"
-    }, createElement("path", {
-      d: "M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z"
-    }));
-  }
-  function ApplyIcon(_ref6) {
-    var createElement = _ref6.createElement;
-    return createElement("svg", {
-      viewBox: "0 0 24 24",
-      fill: "currentColor"
-    }, createElement("path", {
-      d: "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
-    }));
-  }
-
   function createAutocompleteRecentSearchComponent(_ref) {
     var createElement = _ref.createElement;
     return function AutocompleteRecentSearch(userProps) {
@@ -24535,7 +24728,10 @@
         onRefine = _ref2.onRefine,
         globalOnSelect = _ref2.onSelect,
         _onApply = _ref2.onApply,
-        placeholder = _ref2.placeholder;
+        onSubmit = _ref2.onSubmit,
+        placeholder = _ref2.placeholder,
+        _ref2$isDetached = _ref2.isDetached,
+        isDetached = _ref2$isDetached === void 0 ? false : _ref2$isDetached;
       var getElementId = createGetElementId(useId());
       var inputRef = useRef(null);
       var rootRef = useRef(null);
@@ -24557,6 +24753,11 @@
         items = _useMemo.items,
         itemsIds = _useMemo.itemsIds;
       useEffect(function () {
+        // In detached mode, we don't close the panel on body click
+        // because the overlay handles closing
+        if (isDetached) {
+          return function () {};
+        }
         var onBodyClick = function onBodyClick(event) {
           var _unwrapRef;
           if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
@@ -24568,7 +24769,7 @@
         return function () {
           document.body.removeEventListener('click', onBodyClick);
         };
-      }, [rootRef]);
+      }, [rootRef, isDetached]);
       var getNextActiveDescendant = function getNextActiveDescendant(key) {
         switch (key) {
           case 'ArrowLeft':
@@ -24619,6 +24820,7 @@
           });
           setActiveDescendant(undefined);
         }
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
       };
       return {
         getInputProps: function getInputProps() {
@@ -24668,7 +24870,10 @@
                     break;
                   }
                 case 'Tab':
-                  setIsOpen(false);
+                  // In detached mode, Tab doesn't close the panel
+                  if (!isDetached) {
+                    setIsOpen(false);
+                  }
                   break;
                 default:
                   setIsOpen(true);
@@ -24724,6 +24929,12 @@
           return {
             ref: rootRef
           };
+        },
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        focusInput: function focusInput() {
+          var _inputRef$current2;
+          (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
         }
       };
     };
@@ -25005,26 +25216,6 @@
     };
   }
 
-  var _excluded$i = ["variant", "size", "iconOnly", "className", "children"];
-  function createButtonComponent(_ref) {
-    var createElement = _ref.createElement;
-    return function Button(userProps) {
-      var _userProps$variant = userProps.variant,
-        variant = _userProps$variant === void 0 ? 'primary' : _userProps$variant,
-        _userProps$size = userProps.size,
-        size = _userProps$size === void 0 ? 'md' : _userProps$size,
-        _userProps$iconOnly = userProps.iconOnly,
-        iconOnly = _userProps$iconOnly === void 0 ? false : _userProps$iconOnly,
-        className = userProps.className,
-        children = userProps.children,
-        props = _objectWithoutProperties$g(userProps, _excluded$i);
-      return createElement("button", _extends$2({
-        type: "button",
-        className: cx('ais-Button', "ais-Button--".concat(variant), "ais-Button--".concat(size), iconOnly && 'ais-Button--icon-only', className)
-      }, props), children);
-    };
-  }
-
   function createDefaultEmptyComponent(_ref) {
     var createElement = _ref.createElement,
       Fragment = _ref.Fragment;
@@ -25738,6 +25929,7 @@
               indexUiState: indexUiState,
               setIndexUiState: setIndexUiState,
               addToolResult: boundAddToolResult,
+              applyFilters: tool.applyFilters,
               onClose: onClose
             }));
           }
@@ -27023,15 +27215,17 @@
   });
   function AutocompleteSearch(_ref) {
     var inputProps = _ref.inputProps,
-      clearQuery = _ref.clearQuery;
-    var _useSearchBox = useSearchBox(),
-      query = _useSearchBox.query,
-      refine = _useSearchBox.refine,
-      isSearchStalled = _useSearchBox.isSearchStalled;
+      clearQuery = _ref.clearQuery,
+      onQueryChange = _ref.onQueryChange,
+      query = _ref.query,
+      refine = _ref.refine,
+      isSearchStalled = _ref.isSearchStalled;
     return /*#__PURE__*/React__default.createElement(AutocompleteSearchComponent, {
       inputProps: _objectSpread2(_objectSpread2({}, inputProps), {}, {
         onChange: function onChange(event) {
-          return refine(event.currentTarget.value);
+          var value = event.currentTarget.value;
+          refine(value);
+          onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(value);
         }
       }),
       onClear: clearQuery,
@@ -27088,8 +27282,8 @@
     }));
   }
 
-  var _excluded$B = ["indices", "showSuggestions", "showRecent", "searchParameters"],
-    _excluded2$6 = ["indicesConfig", "refineSearchBox", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "recentSearchConfig", "showSuggestions", "transformItems", "placeholder"];
+  var _excluded$B = ["indices", "showSuggestions", "showRecent", "searchParameters", "detachedMediaQuery", "translations"],
+    _excluded2$6 = ["indicesConfig", "refineSearchBox", "isSearchStalled", "getSearchPageURL", "onSelect", "indexUiState", "isSearchPage", "panelComponent", "showRecent", "recentSearchConfig", "showSuggestions", "transformItems", "placeholder", "detachedMediaQuery", "translations", "classNames"];
   var Autocomplete = createAutocompleteComponent({
     createElement: React.createElement,
     Fragment: React.Fragment
@@ -27110,6 +27304,22 @@
     createElement: React.createElement,
     Fragment: React.Fragment
   });
+  var AutocompleteDetachedContainer = createAutocompleteDetachedContainerComponent({
+    createElement: React.createElement,
+    Fragment: React.Fragment
+  });
+  var AutocompleteDetachedOverlay = createAutocompleteDetachedOverlayComponent({
+    createElement: React.createElement,
+    Fragment: React.Fragment
+  });
+  var AutocompleteDetachedFormContainer = createAutocompleteDetachedFormContainerComponent({
+    createElement: React.createElement,
+    Fragment: React.Fragment
+  });
+  var AutocompleteDetachedSearchButton = createAutocompleteDetachedSearchButtonComponent({
+    createElement: React.createElement,
+    Fragment: React.Fragment
+  });
   var usePropGetters = createAutocompletePropGetters({
     useEffect: React.useEffect,
     useId: React.useId,
@@ -27122,6 +27332,127 @@
     useMemo: React.useMemo,
     useState: React.useState
   });
+  var DEFAULT_DETACHED_MEDIA_QUERY = '(max-width: 680px)';
+  var DEFAULT_DETACHED_MODAL_MEDIA_QUERY = '(min-width: 680px)';
+  var DETACHED_MEDIA_QUERY_CSS_VAR = '--ais-autocomplete-detached-media-query';
+  var DETACHED_MODAL_MEDIA_QUERY_CSS_VAR = '--ais-autocomplete-detached-modal-media-query';
+  var DEFAULT_TRANSLATIONS = {
+    detachedCancelButtonText: 'Cancel',
+    detachedSearchButtonTitle: 'Search',
+    detachedClearButtonTitle: 'Clear'
+  };
+  function getCssMediaQueryValue(name) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      return '';
+    }
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+  function resolveMediaQuery(value, cssVarName, fallback) {
+    if (value === '') {
+      return '';
+    }
+    if (value) {
+      return value;
+    }
+    return getCssMediaQueryValue(cssVarName) || fallback;
+  }
+  function getMediaQueryList(mediaQuery) {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return null;
+    }
+    return window.matchMedia(mediaQuery);
+  }
+
+  /**
+   * Hook to manage detached (mobile) mode state
+   */
+  function useDetachedMode(mediaQuery) {
+    var resolvedMediaQuery = React.useMemo(function () {
+      return resolveMediaQuery(mediaQuery, DETACHED_MEDIA_QUERY_CSS_VAR, DEFAULT_DETACHED_MEDIA_QUERY);
+    }, [mediaQuery]);
+    var _useState = React.useState(function () {
+        var _getMediaQueryList;
+        return resolvedMediaQuery ? Boolean((_getMediaQueryList = getMediaQueryList(resolvedMediaQuery)) === null || _getMediaQueryList === void 0 ? void 0 : _getMediaQueryList.matches) : false;
+      }),
+      _useState2 = _slicedToArray$j(_useState, 2),
+      isDetached = _useState2[0],
+      setIsDetached = _useState2[1];
+    var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray$j(_useState3, 2),
+      isModalOpen = _useState4[0],
+      setIsModalOpen = _useState4[1];
+    var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray$j(_useState5, 2),
+      isModalDetached = _useState6[0],
+      setIsModalDetached = _useState6[1];
+    React.useEffect(function () {
+      if (!resolvedMediaQuery) {
+        setIsDetached(false);
+        return function () {};
+      }
+      var mql = getMediaQueryList(resolvedMediaQuery);
+      if (!mql) {
+        setIsDetached(false);
+        return function () {};
+      }
+      var handler = function handler(event) {
+        var wasDetached = isDetached;
+        setIsDetached(event.matches);
+        // Close modal if switching from detached to non-detached
+        if (wasDetached && !event.matches) {
+          setIsModalOpen(false);
+        }
+      };
+      mql.addEventListener('change', handler);
+      return function () {
+        return mql.removeEventListener('change', handler);
+      };
+    }, [resolvedMediaQuery, isDetached]);
+    React.useEffect(function () {
+      if (!isDetached) {
+        setIsModalDetached(false);
+        return function () {};
+      }
+      var modalMediaQuery = resolveMediaQuery(undefined, DETACHED_MODAL_MEDIA_QUERY_CSS_VAR, DEFAULT_DETACHED_MODAL_MEDIA_QUERY);
+      if (!modalMediaQuery) {
+        setIsModalDetached(false);
+        return function () {};
+      }
+      var mql = getMediaQueryList(modalMediaQuery);
+      if (!mql) {
+        setIsModalDetached(false);
+        return function () {};
+      }
+      var handler = function handler(event) {
+        setIsModalDetached(event.matches);
+      };
+      setIsModalDetached(mql.matches);
+      mql.addEventListener('change', handler);
+      return function () {
+        return mql.removeEventListener('change', handler);
+      };
+    }, [isDetached]);
+    React.useEffect(function () {
+      if (typeof document === 'undefined') return function () {};
+      if (isModalOpen) {
+        var scrollY = window.scrollY;
+        document.body.style.top = "-".concat(scrollY, "px");
+        document.body.classList.add('ais-Autocomplete--detached');
+        return function () {
+          document.body.classList.remove('ais-Autocomplete--detached');
+          document.body.style.top = '';
+          window.scrollTo(0, scrollY);
+        };
+      }
+      return function () {};
+    }, [isModalOpen]);
+    return {
+      isDetached: isDetached,
+      isModalDetached: isModalDetached,
+      isModalOpen: isModalOpen,
+      setIsModalOpen: setIsModalOpen
+    };
+  }
   function EXPERIMENTAL_Autocomplete(_ref) {
     var _showRecent$className, _showRecent$className2, _showRecent$className3, _showRecent$className4;
     var _ref$indices = _ref.indices,
@@ -27129,15 +27460,21 @@
       showSuggestions = _ref.showSuggestions,
       showRecent = _ref.showRecent,
       userSearchParameters = _ref.searchParameters,
+      detachedMediaQuery = _ref.detachedMediaQuery,
+      _ref$translations = _ref.translations,
+      userTranslations = _ref$translations === void 0 ? {} : _ref$translations,
       props = _objectWithoutProperties$f(_ref, _excluded$B);
+    var translations = _objectSpread2(_objectSpread2({}, DEFAULT_TRANSLATIONS), userTranslations);
     var _useInstantSearch = useInstantSearch(),
       indexUiState = _useInstantSearch.indexUiState,
-      indexRenderState = _useInstantSearch.indexRenderState;
+      indexRenderState = _useInstantSearch.indexRenderState,
+      status = _useInstantSearch.status;
     var _useSearchBox = useSearchBox({}, {
         $$type: 'ais.autocomplete',
         $$widgetType: 'ais.autocomplete'
       }),
       refine = _useSearchBox.refine;
+    var isSearchStalled = status === 'stalled';
     var searchParameters = _objectSpread2({
       hitsPerPage: 5
     }, userSearchParameters);
@@ -27194,16 +27531,20 @@
     }), /*#__PURE__*/React__default.createElement(InnerAutocomplete, _extends$1({}, props, {
       indicesConfig: indicesConfig,
       refineSearchBox: refine,
+      isSearchStalled: isSearchStalled,
       indexUiState: indexUiState,
       isSearchPage: isSearchPage,
       showRecent: showRecent,
       recentSearchConfig: recentSearchConfig,
-      showSuggestions: showSuggestions
+      showSuggestions: showSuggestions,
+      detachedMediaQuery: detachedMediaQuery,
+      translations: translations
     }))));
   }
   function InnerAutocomplete(_ref3) {
     var indicesConfig = _ref3.indicesConfig,
       refineSearchBox = _ref3.refineSearchBox,
+      isSearchStalled = _ref3.isSearchStalled,
       getSearchPageURL = _ref3.getSearchPageURL,
       userOnSelect = _ref3.onSelect,
       indexUiState = _ref3.indexUiState,
@@ -27214,6 +27555,10 @@
       showSuggestions = _ref3.showSuggestions,
       transformItems = _ref3.transformItems,
       placeholder = _ref3.placeholder,
+      _ref3$detachedMediaQu = _ref3.detachedMediaQuery,
+      detachedMediaQuery = _ref3$detachedMediaQu === void 0 ? DEFAULT_DETACHED_MEDIA_QUERY : _ref3$detachedMediaQu,
+      translations = _ref3.translations,
+      classNames = _ref3.classNames,
       props = _objectWithoutProperties$f(_ref3, _excluded2$6);
     var _useAutocomplete = useAutocomplete({
         transformItems: transformItems
@@ -27221,6 +27566,12 @@
       indices = _useAutocomplete.indices,
       refineAutocomplete = _useAutocomplete.refine,
       currentRefinement = _useAutocomplete.currentRefinement;
+    var _useDetachedMode = useDetachedMode(detachedMediaQuery),
+      isDetached = _useDetachedMode.isDetached,
+      isModalDetached = _useDetachedMode.isModalDetached,
+      isModalOpen = _useDetachedMode.isModalOpen,
+      setIsModalOpen = _useDetachedMode.setIsModalOpen;
+    var previousIsDetachedRef = React.useRef(isDetached);
     var _useStorage = useStorage({
         showRecent: showRecent,
         query: currentRefinement,
@@ -27259,12 +27610,41 @@
           }
           setQuery(query);
         },
-        placeholder: placeholder
+        onSubmit: function onSubmit() {
+          // Close the detached modal when form is submitted
+          if (isDetached) {
+            setIsModalOpen(false);
+          }
+        },
+        placeholder: placeholder,
+        isDetached: isDetached
       }),
       getInputProps = _usePropGetters.getInputProps,
       getItemProps = _usePropGetters.getItemProps,
       getPanelProps = _usePropGetters.getPanelProps,
-      getRootProps = _usePropGetters.getRootProps;
+      getRootProps = _usePropGetters.getRootProps,
+      isOpen = _usePropGetters.isOpen,
+      setIsOpen = _usePropGetters.setIsOpen,
+      focusInput = _usePropGetters.focusInput;
+
+    // Open panel and focus input when modal opens
+    React.useEffect(function () {
+      if (isDetached && isModalOpen) {
+        setIsOpen(true);
+        // Focus input to show the keyboard on mobile
+        focusInput();
+      }
+    }, [isDetached, isModalOpen, setIsOpen, focusInput]);
+
+    // Keep the modal open if the panel was open before switching to detached
+    React.useEffect(function () {
+      var wasDetached = previousIsDetachedRef.current;
+      var switchedToDetached = !wasDetached && isDetached;
+      if (switchedToDetached && isOpen) {
+        setIsModalOpen(true);
+      }
+      previousIsDetachedRef.current = isDetached;
+    }, [isDetached, isOpen, setIsModalOpen]);
     var elements = {};
     if (showRecent && recentSearchConfig) {
       var RecentSearchItemComponent = recentSearchConfig.itemComponent;
@@ -27326,18 +27706,66 @@
         classNames: currentIndexConfig.classNames
       });
     });
-    return /*#__PURE__*/React__default.createElement(Autocomplete, _extends$1({}, props, getRootProps()), /*#__PURE__*/React__default.createElement(AutocompleteSearch, {
+    var searchBoxContent = /*#__PURE__*/React__default.createElement(AutocompleteSearch, {
       inputProps: getInputProps(),
       clearQuery: function clearQuery() {
         refineSearchBox('');
         refineAutocomplete('');
-      }
-    }), /*#__PURE__*/React__default.createElement(AutocompletePanel, getPanelProps(), PanelComponent ? /*#__PURE__*/React__default.createElement(PanelComponent, {
+      },
+      onQueryChange: function onQueryChange(query) {
+        refineAutocomplete(query);
+      },
+      query: currentRefinement || indexUiState.query || '',
+      refine: refineSearchBox,
+      isSearchStalled: isSearchStalled
+    });
+    var panelContent = /*#__PURE__*/React__default.createElement(AutocompletePanel, getPanelProps(), PanelComponent ? /*#__PURE__*/React__default.createElement(PanelComponent, {
       elements: elements,
       indices: indices
     }) : Object.keys(elements).map(function (elementId) {
       return elements[elementId];
-    })));
+    }));
+    var detachedContainerClassNames = isModalDetached ? _objectSpread2(_objectSpread2({}, classNames), {}, {
+      detachedContainer: cx('ais-AutocompleteDetachedContainer--modal', classNames === null || classNames === void 0 ? void 0 : classNames.detachedContainer)
+    }) : classNames;
+    if (isDetached) {
+      return /*#__PURE__*/React__default.createElement(Autocomplete, _extends$1({}, props, getRootProps(), {
+        classNames: classNames
+      }), /*#__PURE__*/React__default.createElement(AutocompleteDetachedSearchButton, {
+        query: currentRefinement || indexUiState.query || '',
+        placeholder: placeholder,
+        classNames: classNames,
+        onClick: function onClick() {
+          setIsModalOpen(true);
+          setIsOpen(true);
+        },
+        onClear: function onClear() {
+          refineSearchBox('');
+          refineAutocomplete('');
+        },
+        translations: translations
+      }), isModalOpen && /*#__PURE__*/React__default.createElement(AutocompleteDetachedOverlay, {
+        classNames: classNames,
+        onClose: function onClose() {
+          setIsModalOpen(false);
+          setIsOpen(false);
+        }
+      }, /*#__PURE__*/React__default.createElement(AutocompleteDetachedContainer, {
+        classNames: detachedContainerClassNames
+      }, /*#__PURE__*/React__default.createElement(AutocompleteDetachedFormContainer, {
+        classNames: classNames,
+        onCancel: function onCancel() {
+          setIsModalOpen(false);
+          setIsOpen(false);
+        },
+        translations: translations
+      }, searchBoxContent), panelContent)));
+    }
+
+    // Normal (non-detached) rendering
+    return /*#__PURE__*/React__default.createElement(Autocomplete, _extends$1({}, props, getRootProps(), {
+      classNames: classNames
+    }), searchBoxContent, panelContent);
   }
   function ConditionalReverseHighlight(_ref7) {
     var _item$_highlightResul;
@@ -27480,8 +27908,7 @@
     });
     function SearchLayoutComponent(_ref) {
       var message = _ref.message,
-        indexUiState = _ref.indexUiState,
-        setIndexUiState = _ref.setIndexUiState,
+        applyFilters = _ref.applyFilters,
         onClose = _ref.onClose;
       var input = message === null || message === void 0 ? void 0 : message.input;
       var output = message === null || message === void 0 ? void 0 : message.output;
@@ -27490,15 +27917,13 @@
         return function (props) {
           return /*#__PURE__*/React__default.createElement(HeaderComponent, _extends$1({
             nbHits: output === null || output === void 0 ? void 0 : output.nbHits,
-            query: input === null || input === void 0 ? void 0 : input.query,
+            input: input,
             hitsPerPage: items.length,
-            setIndexUiState: setIndexUiState,
-            indexUiState: indexUiState,
-            getSearchPageURL: getSearchPageURL,
-            onClose: onClose
+            onClose: onClose,
+            applyFilters: applyFilters
           }, props));
         };
-      }, [items.length, input === null || input === void 0 ? void 0 : input.query, output === null || output === void 0 ? void 0 : output.nbHits, setIndexUiState, onClose, indexUiState]);
+      }, [items.length, input, output === null || output === void 0 ? void 0 : output.nbHits, applyFilters, onClose]);
       return /*#__PURE__*/React__default.createElement(Carousel, {
         items: items,
         itemComponent: itemComponent,
@@ -27513,11 +27938,9 @@
         scrollLeft = _ref2.scrollLeft,
         scrollRight = _ref2.scrollRight,
         nbHits = _ref2.nbHits,
-        query = _ref2.query,
+        input = _ref2.input,
         hitsPerPage = _ref2.hitsPerPage,
-        setIndexUiState = _ref2.setIndexUiState,
-        indexUiState = _ref2.indexUiState,
-        getSearchPageURL = _ref2.getSearchPageURL,
+        applyFilters = _ref2.applyFilters,
         onClose = _ref2.onClose;
       if ((hitsPerPage !== null && hitsPerPage !== void 0 ? hitsPerPage : 0) < 1) {
         return null;
@@ -27532,20 +27955,15 @@
         variant: "ghost",
         size: "sm",
         onClick: function onClick() {
-          if (!query) return;
-          var nextUiState = _objectSpread2(_objectSpread2({}, indexUiState), {}, {
-            query: query
+          if (!input || !applyFilters) return;
+          var params = applyFilters({
+            query: input.query,
+            facetFilters: input.facet_filters
           });
-
-          // If no main search page URL or we are on the search page, just update the state
-          if (!getSearchPageURL || getSearchPageURL && new URL(getSearchPageURL(nextUiState)).pathname === window.location.pathname) {
-            setIndexUiState(nextUiState);
-            onClose();
-            return;
+          if (getSearchPageURL && new URL(getSearchPageURL(params)).pathname !== window.location.pathname) {
+            window.location.href = getSearchPageURL(params);
           }
-
-          // Navigate to different page
-          window.location.href = getSearchPageURL(nextUiState);
+          onClose();
         },
         className: "ais-ChatToolSearchIndexCarouselHeaderViewAll"
       }, "View all", /*#__PURE__*/React__default.createElement(ArrowRightIcon, {