instantsearch-ui-components 0.12.0 → 0.13.0

package/dist/cjs/components/autocomplete/AutocompleteIndex.js

@@ -13,13 +13,18 @@ function createAutocompleteIndexComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteIndex(userProps) {
     var items = userProps.items,
+      HeaderComponent = userProps.HeaderComponent,
       ItemComponent = userProps.ItemComponent,
       getItemProps = userProps.getItemProps,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
     return createElement("div", {
       className: (0, _cx.cx)('ais-AutocompleteIndex', classNames.root)
-    }, createElement("ol", {
+    }, HeaderComponent && createElement("div", {
+      className: (0, _cx.cx)('ais-AutocompleteIndexHeader', classNames.header)
+    }, createElement(HeaderComponent, {
+      items: items
+    })), createElement("ol", {
       className: (0, _cx.cx)('ais-AutocompleteIndexList', classNames.list)
     }, items.map(function (item, index) {
       var _getItemProps = getItemProps(item, index),

package/dist/cjs/components/autocomplete/AutocompleteSearch.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompleteSearchComponent = createAutocompleteSearchComponent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _icons = require("./icons");
+function createAutocompleteSearchComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteSearch(_ref2) {
+    var inputProps = _ref2.inputProps,
+      onClear = _ref2.onClear,
+      query = _ref2.query,
+      isSearchStalled = _ref2.isSearchStalled;
+    return createElement("form", {
+      className: "ais-AutocompleteForm",
+      action: "",
+      noValidate: true,
+      role: "search",
+      onSubmit: function onSubmit(e) {
+        return e.preventDefault();
+      }
+    }, createElement("div", {
+      className: "ais-AutocompleteInputWrapperPrefix"
+    }, createElement("label", {
+      className: "ais-AutocompleteLabel",
+      "aria-label": "Submit",
+      htmlFor: inputProps.id,
+      id: "".concat(inputProps.id, "-label")
+    }, createElement("button", {
+      className: "ais-AutocompleteSubmitButton",
+      type: "submit",
+      title: "Submit"
+    }, createElement(_icons.AutocompleteSubmitIcon, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-AutocompleteLoadingIndicator",
+      hidden: !isSearchStalled
+    }, createElement(_icons.AutocompleteLoadingIcon, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-AutocompleteInputWrapper"
+    }, createElement("input", (0, _extends2.default)({
+      className: "ais-AutocompleteInput",
+      "aria-autocomplete": "both",
+      "aria-labelledby": "".concat(inputProps.id, "-label"),
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      enterKeyHint: "search",
+      spellCheck: "false",
+      placeholder: "",
+      maxLength: 512,
+      type: "search",
+      value: query
+    }, inputProps))), createElement("div", {
+      className: "ais-AutocompleteInputWrapperSuffix"
+    }, createElement("button", {
+      className: "ais-AutocompleteClearButton",
+      type: "reset",
+      title: "Clear",
+      hidden: query.length === 0 || isSearchStalled,
+      onClick: onClear
+    }, createElement(_icons.AutocompleteClearIcon, {
+      createElement: createElement
+    }))));
+  };
+}

package/dist/cjs/components/autocomplete/createAutocompletePropGetters.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompletePropGetters = createAutocompletePropGetters;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+function createAutocompletePropGetters(_ref) {
+  var useEffect = _ref.useEffect,
+    useId = _ref.useId,
+    useMemo = _ref.useMemo,
+    useRef = _ref.useRef,
+    useState = _ref.useState;
+  return function usePropGetters(_ref2) {
+    var indices = _ref2.indices,
+      indicesConfig = _ref2.indicesConfig,
+      onRefine = _ref2.onRefine,
+      globalOnSelect = _ref2.onSelect;
+    var getElementId = createGetElementId(useId());
+    var rootRef = useRef(null);
+    var _useState = useState(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+    var _useState3 = useState(undefined),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeDescendant = _useState4[0],
+      setActiveDescendant = _useState4[1];
+    var _useMemo = useMemo(function () {
+        return buildItems({
+          indices: indices,
+          indicesConfig: indicesConfig,
+          getElementId: getElementId
+        });
+      }, [indices, indicesConfig, getElementId]),
+      items = _useMemo.items,
+      itemsIds = _useMemo.itemsIds;
+    useEffect(function () {
+      var onBodyClick = function onBodyClick(event) {
+        var _unwrapRef;
+        if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
+          return;
+        }
+        setIsOpen(false);
+      };
+      document.body.addEventListener('click', onBodyClick);
+      return function () {
+        document.body.removeEventListener('click', onBodyClick);
+      };
+    }, [rootRef]);
+    var getNextActiveDescendent = function getNextActiveDescendent(key) {
+      switch (key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          {
+            var prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
+            return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
+          }
+        case 'ArrowRight':
+        case 'ArrowDown':
+          {
+            var nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
+            return itemsIds[nextIndex] || itemsIds[0];
+          }
+        default:
+          return undefined;
+      }
+    };
+    var submit = function submit() {
+      var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
+      setIsOpen(false);
+      if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+        var _getQuery;
+        var _ref3 = items.get(actualActiveDescendant),
+          _item = _ref3.item,
+          _ref3$config = _ref3.config,
+          indexOnSelect = _ref3$config.onSelect,
+          getQuery = _ref3$config.getQuery,
+          getURL = _ref3$config.getURL;
+        var actualOnSelect = indexOnSelect !== null && indexOnSelect !== void 0 ? indexOnSelect : globalOnSelect;
+        actualOnSelect({
+          item: _item,
+          query: (_getQuery = getQuery === null || getQuery === void 0 ? void 0 : getQuery(_item)) !== null && _getQuery !== void 0 ? _getQuery : '',
+          url: getURL === null || getURL === void 0 ? void 0 : getURL(_item),
+          setQuery: function setQuery(query) {
+            return onRefine(query);
+          }
+        });
+        setActiveDescendant(undefined);
+      }
+    };
+    return {
+      getInputProps: function getInputProps() {
+        return {
+          id: getElementId('input'),
+          role: 'combobox',
+          'aria-autocomplete': 'list',
+          'aria-expanded': isOpen,
+          'aria-haspopup': 'grid',
+          'aria-controls': getElementId('panel'),
+          'aria-activedescendant': activeDescendant,
+          onFocus: function onFocus() {
+            return setIsOpen(true);
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Escape') {
+              setActiveDescendant(undefined);
+              setIsOpen(false);
+              return;
+            }
+            switch (event.key) {
+              case 'ArrowLeft':
+              case 'ArrowUp':
+              case 'ArrowRight':
+              case 'ArrowDown':
+                {
+                  var _document$getElementB;
+                  var nextActiveDescendent = getNextActiveDescendent(event.key);
+                  setActiveDescendant(nextActiveDescendent);
+                  (_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
+                  event.preventDefault();
+                  break;
+                }
+              case 'Enter':
+                {
+                  submit();
+                  break;
+                }
+              case 'Tab':
+                setIsOpen(false);
+                break;
+              default:
+                return;
+            }
+          },
+          onKeyUp: function onKeyUp(event) {
+            switch (event.key) {
+              case 'ArrowLeft':
+              case 'ArrowUp':
+              case 'ArrowRight':
+              case 'ArrowDown':
+              case 'Escape':
+              case 'Return':
+                event.preventDefault();
+                return;
+              default:
+                setActiveDescendant(undefined);
+                break;
+            }
+          }
+        };
+      },
+      getItemProps: function getItemProps(item, index) {
+        var id = getElementId('item', item.__indexName, index);
+        return {
+          id: id,
+          role: 'row',
+          'aria-selected': id === activeDescendant,
+          onSelect: function onSelect() {
+            return submit(id);
+          }
+        };
+      },
+      getPanelProps: function getPanelProps() {
+        return {
+          hidden: !isOpen,
+          id: getElementId('panel'),
+          role: 'grid',
+          'aria-labelledby': getElementId('input')
+        };
+      },
+      getRootProps: function getRootProps() {
+        return {
+          ref: rootRef
+        };
+      }
+    };
+  };
+}
+function buildItems(_ref4) {
+  var indices = _ref4.indices,
+    indicesConfig = _ref4.indicesConfig,
+    getElementId = _ref4.getElementId;
+  var itemsIds = [];
+  var items = new Map();
+  for (var i = 0; i < indicesConfig.length; i++) {
+    var _indices$i;
+    var config = indicesConfig[i];
+    var hits = ((_indices$i = indices[i]) === null || _indices$i === void 0 ? void 0 : _indices$i.hits) || [];
+    for (var position = 0; position < hits.length; position++) {
+      var itemId = getElementId('item', config.indexName, position);
+      items.set(itemId, {
+        item: hits[position],
+        config: config
+      });
+      itemsIds.push(itemId);
+    }
+  }
+  return {
+    items: items,
+    itemsIds: itemsIds
+  };
+}
+function createGetElementId(autocompleteId) {
+  return function getElementId() {
+    var prefix = 'autocomplete';
+    for (var _len = arguments.length, suffixes = new Array(_len), _key = 0; _key < _len; _key++) {
+      suffixes[_key] = arguments[_key];
+    }
+    return "".concat(prefix).concat(autocompleteId).concat(suffixes.join(':'));
+  };
+}
+
+/**
+ * Returns the framework-agnostic value of a ref.
+ */
+function unwrapRef(ref) {
+  return ref.current && (0, _typeof2.default)(ref.current) === 'object' && 'base' in ref.current ? ref.current.base // Preact
+  : ref.current; // React
+}

package/dist/cjs/components/autocomplete/icons.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteClearIcon = AutocompleteClearIcon;
+exports.AutocompleteLoadingIcon = AutocompleteLoadingIcon;
+exports.AutocompleteSubmitIcon = AutocompleteSubmitIcon;
+function AutocompleteSubmitIcon(_ref) {
+  var createElement = _ref.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteSubmitIcon",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    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 AutocompleteLoadingIcon(_ref2) {
+  var createElement = _ref2.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteLoadingIcon",
+    viewBox: "0 0 100 100",
+    width: "20",
+    height: "20"
+  }, 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 AutocompleteClearIcon(_ref3) {
+  var createElement = _ref3.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteClearIcon",
+    viewBox: "0 0 24 24",
+    width: "18",
+    height: "18",
+    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"
+  }));
+}

package/dist/cjs/components/autocomplete/index.js

@@ -36,6 +36,17 @@ Object.keys(_AutocompletePanel).forEach(function (key) {
     }
   });
 });
+var _AutocompleteSearch = require("./AutocompleteSearch");
+Object.keys(_AutocompleteSearch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AutocompleteSearch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutocompleteSearch[key];
+    }
+  });
+});
 var _AutocompleteSuggestion = require("./AutocompleteSuggestion");
 Object.keys(_AutocompleteSuggestion).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -46,4 +57,15 @@ Object.keys(_AutocompleteSuggestion).forEach(function (key) {
       return _AutocompleteSuggestion[key];
     }
   });
+});
+var _createAutocompletePropGetters = require("./createAutocompletePropGetters");
+Object.keys(_createAutocompletePropGetters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _createAutocompletePropGetters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _createAutocompletePropGetters[key];
+    }
+  });
 });

package/dist/cjs/components/chat/icons.js

@@ -228,12 +228,12 @@ function StopIconComponent(_ref9) {
     rx: "1"
   }));
 }
-function ReloadIconComponent(_ref10) {
-  var createElement = _ref10.createElement,
-    _ref10$width = _ref10.width,
-    width = _ref10$width === void 0 ? 16 : _ref10$width,
-    _ref10$height = _ref10.height,
-    height = _ref10$height === void 0 ? 16 : _ref10$height;
+function ReloadIconComponent(_ref0) {
+  var createElement = _ref0.createElement,
+    _ref0$width = _ref0.width,
+    width = _ref0$width === void 0 ? 16 : _ref0$width,
+    _ref0$height = _ref0.height,
+    height = _ref0$height === void 0 ? 16 : _ref0$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -254,12 +254,12 @@ function ReloadIconComponent(_ref10) {
     d: "M3 21v-5h5"
   }));
 }
-function CopyIconComponent(_ref11) {
-  var createElement = _ref11.createElement,
-    _ref11$width = _ref11.width,
-    width = _ref11$width === void 0 ? 16 : _ref11$width,
-    _ref11$height = _ref11.height,
-    height = _ref11$height === void 0 ? 16 : _ref11$height;
+function CopyIconComponent(_ref1) {
+  var createElement = _ref1.createElement,
+    _ref1$width = _ref1.width,
+    width = _ref1$width === void 0 ? 16 : _ref1$width,
+    _ref1$height = _ref1.height,
+    height = _ref1$height === void 0 ? 16 : _ref1$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -281,12 +281,12 @@ function CopyIconComponent(_ref11) {
     d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
   }));
 }
-function MenuIconComponent(_ref12) {
-  var createElement = _ref12.createElement,
-    _ref12$width = _ref12.width,
-    width = _ref12$width === void 0 ? 16 : _ref12$width,
-    _ref12$height = _ref12.height,
-    height = _ref12$height === void 0 ? 16 : _ref12$height;
+function MenuIconComponent(_ref10) {
+  var createElement = _ref10.createElement,
+    _ref10$width = _ref10.width,
+    width = _ref10$width === void 0 ? 16 : _ref10$width,
+    _ref10$height = _ref10.height,
+    height = _ref10$height === void 0 ? 16 : _ref10$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -311,12 +311,12 @@ function MenuIconComponent(_ref12) {
     r: "1"
   }));
 }
-function LoadingSpinnerIconComponent(_ref13) {
-  var createElement = _ref13.createElement,
-    _ref13$width = _ref13.width,
-    width = _ref13$width === void 0 ? 24 : _ref13$width,
-    _ref13$height = _ref13.height,
-    height = _ref13$height === void 0 ? 24 : _ref13$height;
+function LoadingSpinnerIconComponent(_ref11) {
+  var createElement = _ref11.createElement,
+    _ref11$width = _ref11.width,
+    width = _ref11$width === void 0 ? 24 : _ref11$width,
+    _ref11$height = _ref11.height,
+    height = _ref11$height === void 0 ? 24 : _ref11$height;
   return createElement("svg", {
     viewBox: "12 12 24 24",
     width: width,
@@ -333,12 +333,12 @@ function LoadingSpinnerIconComponent(_ref13) {
     stroke: "currentColor"
   }));
 }
-function ChevronLeftIconComponent(_ref14) {
-  var createElement = _ref14.createElement,
-    _ref14$width = _ref14.width,
-    width = _ref14$width === void 0 ? 16 : _ref14$width,
-    _ref14$height = _ref14.height,
-    height = _ref14$height === void 0 ? 16 : _ref14$height;
+function ChevronLeftIconComponent(_ref12) {
+  var createElement = _ref12.createElement,
+    _ref12$width = _ref12.width,
+    width = _ref12$width === void 0 ? 16 : _ref12$width,
+    _ref12$height = _ref12.height,
+    height = _ref12$height === void 0 ? 16 : _ref12$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -353,12 +353,12 @@ function ChevronLeftIconComponent(_ref14) {
     d: "m15 18-6-6 6-6"
   }));
 }
-function ChevronRightIconComponent(_ref15) {
-  var createElement = _ref15.createElement,
-    _ref15$width = _ref15.width,
-    width = _ref15$width === void 0 ? 16 : _ref15$width,
-    _ref15$height = _ref15.height,
-    height = _ref15$height === void 0 ? 16 : _ref15$height;
+function ChevronRightIconComponent(_ref13) {
+  var createElement = _ref13.createElement,
+    _ref13$width = _ref13.width,
+    width = _ref13$width === void 0 ? 16 : _ref13$width,
+    _ref13$height = _ref13.height,
+    height = _ref13$height === void 0 ? 16 : _ref13$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '0.12.0';
+var _default = exports.default = '0.13.0';

package/dist/es/components/autocomplete/Autocomplete.d.ts

@@ -1,6 +1,6 @@
 /** @jsx createElement */
 import type { ComponentChildren, ComponentProps, Renderer } from '../../types';
-export type AutocompleteProps = ComponentProps<'div'> & {
+export type AutocompleteProps = Omit<ComponentProps<'div'>, 'children'> & {
     children?: ComponentChildren;
     classNames?: Partial<AutocompleteClassNames>;
 };

package/dist/es/components/autocomplete/AutocompleteIndex.d.ts

@@ -5,6 +5,9 @@ export type AutocompleteIndexProps<T = {
     __indexName: string;
 } & Record<string, unknown>> = {
     items: T[];
+    HeaderComponent?: (props: {
+        items: T[];
+    }) => JSX.Element;
     ItemComponent: (props: {
         item: T;
         onSelect: () => void;
@@ -23,6 +26,10 @@ export type AutocompleteIndexClassNames = {
      * Class names to apply to the list element
      */
     list: string | string[];
+    /**
+     * Class names to apply to the header element
+     */
+    header: string | string[];
     /**
      * Class names to apply to each item element
      */

package/dist/es/components/autocomplete/AutocompleteIndex.js

@@ -6,13 +6,18 @@ export function createAutocompleteIndexComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteIndex(userProps) {
     var items = userProps.items,
+      HeaderComponent = userProps.HeaderComponent,
       ItemComponent = userProps.ItemComponent,
       getItemProps = userProps.getItemProps,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
     return createElement("div", {
       className: cx('ais-AutocompleteIndex', classNames.root)
-    }, createElement("ol", {
+    }, HeaderComponent && createElement("div", {
+      className: cx('ais-AutocompleteIndexHeader', classNames.header)
+    }, createElement(HeaderComponent, {
+      items: items
+    })), createElement("ol", {
       className: cx('ais-AutocompleteIndexList', classNames.list)
     }, items.map(function (item, index) {
       var _getItemProps = getItemProps(item, index),

package/dist/es/components/autocomplete/AutocompletePanel.d.ts

@@ -1,6 +1,6 @@
 /** @jsx createElement */
 import type { ComponentChildren, ComponentProps, Renderer } from '../../types';
-export type AutocompletePanelProps = ComponentProps<'div'> & {
+export type AutocompletePanelProps = Omit<ComponentProps<'div'>, 'children'> & {
     children?: ComponentChildren;
     classNames?: Partial<AutocompletePanelClassNames>;
 };

package/dist/es/components/autocomplete/AutocompleteSearch.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, Renderer } from '../..';
+export type AutocompleteSearchProps = {
+    inputProps: Partial<ComponentProps<'input'>>;
+    onClear: () => void;
+    query: string;
+    isSearchStalled: boolean;
+};
+export declare function createAutocompleteSearchComponent({ createElement }: Renderer): ({ inputProps, onClear, query, isSearchStalled, }: AutocompleteSearchProps) => JSX.Element;

package/dist/es/components/autocomplete/AutocompleteSearch.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { AutocompleteClearIcon, AutocompleteLoadingIcon, AutocompleteSubmitIcon } from "./icons.js";
+export function createAutocompleteSearchComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteSearch(_ref2) {
+    var inputProps = _ref2.inputProps,
+      onClear = _ref2.onClear,
+      query = _ref2.query,
+      isSearchStalled = _ref2.isSearchStalled;
+    return createElement("form", {
+      className: "ais-AutocompleteForm",
+      action: "",
+      noValidate: true,
+      role: "search",
+      onSubmit: function onSubmit(e) {
+        return e.preventDefault();
+      }
+    }, createElement("div", {
+      className: "ais-AutocompleteInputWrapperPrefix"
+    }, createElement("label", {
+      className: "ais-AutocompleteLabel",
+      "aria-label": "Submit",
+      htmlFor: inputProps.id,
+      id: "".concat(inputProps.id, "-label")
+    }, createElement("button", {
+      className: "ais-AutocompleteSubmitButton",
+      type: "submit",
+      title: "Submit"
+    }, createElement(AutocompleteSubmitIcon, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-AutocompleteLoadingIndicator",
+      hidden: !isSearchStalled
+    }, createElement(AutocompleteLoadingIcon, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-AutocompleteInputWrapper"
+    }, createElement("input", _extends({
+      className: "ais-AutocompleteInput",
+      "aria-autocomplete": "both",
+      "aria-labelledby": "".concat(inputProps.id, "-label"),
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      enterKeyHint: "search",
+      spellCheck: "false",
+      placeholder: "",
+      maxLength: 512,
+      type: "search",
+      value: query
+    }, inputProps))), createElement("div", {
+      className: "ais-AutocompleteInputWrapperSuffix"
+    }, createElement("button", {
+      className: "ais-AutocompleteClearButton",
+      type: "reset",
+      title: "Clear",
+      hidden: query.length === 0 || isSearchStalled,
+      onClick: onClear
+    }, createElement(AutocompleteClearIcon, {
+      createElement: createElement
+    }))));
+  };
+}

package/dist/es/components/autocomplete/createAutocompletePropGetters.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps } from '../../types';
+type BaseHit = Record<string, unknown>;
+export type AutocompleteIndexConfig<TItem extends BaseHit> = {
+    indexName: string;
+    getQuery?: (item: TItem) => string;
+    getURL?: (item: TItem) => string;
+    onSelect?: (params: {
+        item: TItem;
+        query: string;
+        setQuery: (query: string) => void;
+        url?: string;
+    }) => void;
+};
+type GetInputProps = () => Partial<ComponentProps<'input'>>;
+type GetItemProps = (item: {
+    __indexName: string;
+} & Record<string, unknown>, index: number) => Pick<ComponentProps<'li'>, 'id' | 'role' | 'aria-selected'> & {
+    onSelect: () => void;
+};
+type GetPanelProps = () => Pick<ComponentProps<'div'>, 'id' | 'hidden' | 'role' | 'aria-labelledby'>;
+type GetRootProps = () => Pick<ComponentProps<'div'>, 'ref'>;
+type CreateAutocompletePropGettersParams = {
+    useEffect: (effect: () => void, inputs?: readonly unknown[]) => void;
+    useId: () => string;
+    useMemo: <TType>(factory: () => TType, inputs: readonly unknown[]) => TType;
+    useRef: <TType>(initialValue: TType | null) => {
+        current: TType | null;
+    };
+    useState: <TType>(initialState: TType) => [TType, (newState: TType) => unknown];
+};
+type UsePropGetters<TItem extends BaseHit> = (params: {
+    indices: Array<{
+        indexName: string;
+        indexId: string;
+        hits: Array<{
+            [key: string]: unknown;
+        }>;
+    }>;
+    indicesConfig: Array<AutocompleteIndexConfig<TItem>>;
+    onRefine: (query: string) => void;
+    onSelect: NonNullable<AutocompleteIndexConfig<TItem>['onSelect']>;
+}) => {
+    getInputProps: GetInputProps;
+    getItemProps: GetItemProps;
+    getPanelProps: GetPanelProps;
+    getRootProps: GetRootProps;
+};
+export declare function createAutocompletePropGetters({ useEffect, useId, useMemo, useRef, useState, }: CreateAutocompletePropGettersParams): <TItem extends BaseHit>({ indices, indicesConfig, onRefine, onSelect: globalOnSelect, }: Parameters<UsePropGetters<TItem>>[0]) => ReturnType<UsePropGetters<TItem>>;
+export {};

package/dist/es/components/autocomplete/createAutocompletePropGetters.js

@@ -0,0 +1,215 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export function createAutocompletePropGetters(_ref) {
+  var useEffect = _ref.useEffect,
+    useId = _ref.useId,
+    useMemo = _ref.useMemo,
+    useRef = _ref.useRef,
+    useState = _ref.useState;
+  return function usePropGetters(_ref2) {
+    var indices = _ref2.indices,
+      indicesConfig = _ref2.indicesConfig,
+      onRefine = _ref2.onRefine,
+      globalOnSelect = _ref2.onSelect;
+    var getElementId = createGetElementId(useId());
+    var rootRef = useRef(null);
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+    var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeDescendant = _useState4[0],
+      setActiveDescendant = _useState4[1];
+    var _useMemo = useMemo(function () {
+        return buildItems({
+          indices: indices,
+          indicesConfig: indicesConfig,
+          getElementId: getElementId
+        });
+      }, [indices, indicesConfig, getElementId]),
+      items = _useMemo.items,
+      itemsIds = _useMemo.itemsIds;
+    useEffect(function () {
+      var onBodyClick = function onBodyClick(event) {
+        var _unwrapRef;
+        if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
+          return;
+        }
+        setIsOpen(false);
+      };
+      document.body.addEventListener('click', onBodyClick);
+      return function () {
+        document.body.removeEventListener('click', onBodyClick);
+      };
+    }, [rootRef]);
+    var getNextActiveDescendent = function getNextActiveDescendent(key) {
+      switch (key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          {
+            var prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
+            return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
+          }
+        case 'ArrowRight':
+        case 'ArrowDown':
+          {
+            var nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
+            return itemsIds[nextIndex] || itemsIds[0];
+          }
+        default:
+          return undefined;
+      }
+    };
+    var submit = function submit() {
+      var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
+      setIsOpen(false);
+      if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+        var _getQuery;
+        var _ref3 = items.get(actualActiveDescendant),
+          _item = _ref3.item,
+          _ref3$config = _ref3.config,
+          indexOnSelect = _ref3$config.onSelect,
+          getQuery = _ref3$config.getQuery,
+          getURL = _ref3$config.getURL;
+        var actualOnSelect = indexOnSelect !== null && indexOnSelect !== void 0 ? indexOnSelect : globalOnSelect;
+        actualOnSelect({
+          item: _item,
+          query: (_getQuery = getQuery === null || getQuery === void 0 ? void 0 : getQuery(_item)) !== null && _getQuery !== void 0 ? _getQuery : '',
+          url: getURL === null || getURL === void 0 ? void 0 : getURL(_item),
+          setQuery: function setQuery(query) {
+            return onRefine(query);
+          }
+        });
+        setActiveDescendant(undefined);
+      }
+    };
+    return {
+      getInputProps: function getInputProps() {
+        return {
+          id: getElementId('input'),
+          role: 'combobox',
+          'aria-autocomplete': 'list',
+          'aria-expanded': isOpen,
+          'aria-haspopup': 'grid',
+          'aria-controls': getElementId('panel'),
+          'aria-activedescendant': activeDescendant,
+          onFocus: function onFocus() {
+            return setIsOpen(true);
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Escape') {
+              setActiveDescendant(undefined);
+              setIsOpen(false);
+              return;
+            }
+            switch (event.key) {
+              case 'ArrowLeft':
+              case 'ArrowUp':
+              case 'ArrowRight':
+              case 'ArrowDown':
+                {
+                  var _document$getElementB;
+                  var nextActiveDescendent = getNextActiveDescendent(event.key);
+                  setActiveDescendant(nextActiveDescendent);
+                  (_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
+                  event.preventDefault();
+                  break;
+                }
+              case 'Enter':
+                {
+                  submit();
+                  break;
+                }
+              case 'Tab':
+                setIsOpen(false);
+                break;
+              default:
+                return;
+            }
+          },
+          onKeyUp: function onKeyUp(event) {
+            switch (event.key) {
+              case 'ArrowLeft':
+              case 'ArrowUp':
+              case 'ArrowRight':
+              case 'ArrowDown':
+              case 'Escape':
+              case 'Return':
+                event.preventDefault();
+                return;
+              default:
+                setActiveDescendant(undefined);
+                break;
+            }
+          }
+        };
+      },
+      getItemProps: function getItemProps(item, index) {
+        var id = getElementId('item', item.__indexName, index);
+        return {
+          id: id,
+          role: 'row',
+          'aria-selected': id === activeDescendant,
+          onSelect: function onSelect() {
+            return submit(id);
+          }
+        };
+      },
+      getPanelProps: function getPanelProps() {
+        return {
+          hidden: !isOpen,
+          id: getElementId('panel'),
+          role: 'grid',
+          'aria-labelledby': getElementId('input')
+        };
+      },
+      getRootProps: function getRootProps() {
+        return {
+          ref: rootRef
+        };
+      }
+    };
+  };
+}
+function buildItems(_ref4) {
+  var indices = _ref4.indices,
+    indicesConfig = _ref4.indicesConfig,
+    getElementId = _ref4.getElementId;
+  var itemsIds = [];
+  var items = new Map();
+  for (var i = 0; i < indicesConfig.length; i++) {
+    var _indices$i;
+    var config = indicesConfig[i];
+    var hits = ((_indices$i = indices[i]) === null || _indices$i === void 0 ? void 0 : _indices$i.hits) || [];
+    for (var position = 0; position < hits.length; position++) {
+      var itemId = getElementId('item', config.indexName, position);
+      items.set(itemId, {
+        item: hits[position],
+        config: config
+      });
+      itemsIds.push(itemId);
+    }
+  }
+  return {
+    items: items,
+    itemsIds: itemsIds
+  };
+}
+function createGetElementId(autocompleteId) {
+  return function getElementId() {
+    var prefix = 'autocomplete';
+    for (var _len = arguments.length, suffixes = new Array(_len), _key = 0; _key < _len; _key++) {
+      suffixes[_key] = arguments[_key];
+    }
+    return "".concat(prefix).concat(autocompleteId).concat(suffixes.join(':'));
+  };
+}
+
+/**
+ * Returns the framework-agnostic value of a ref.
+ */
+function unwrapRef(ref) {
+  return ref.current && _typeof(ref.current) === 'object' && 'base' in ref.current ? ref.current.base // Preact
+  : ref.current; // React
+}

package/dist/es/components/autocomplete/icons.d.ts

@@ -0,0 +1,7 @@
+/** @jsx createElement */
+import type { Renderer } from '../../types';
+type IconProps = Pick<Renderer, 'createElement'>;
+export declare function AutocompleteSubmitIcon({ createElement }: IconProps): JSX.Element;
+export declare function AutocompleteLoadingIcon({ createElement }: IconProps): JSX.Element;
+export declare function AutocompleteClearIcon({ createElement }: IconProps): JSX.Element;
+export {};

package/dist/es/components/autocomplete/icons.js

@@ -0,0 +1,48 @@
+export function AutocompleteSubmitIcon(_ref) {
+  var createElement = _ref.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteSubmitIcon",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    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"
+  }));
+}
+export function AutocompleteLoadingIcon(_ref2) {
+  var createElement = _ref2.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteLoadingIcon",
+    viewBox: "0 0 100 100",
+    width: "20",
+    height: "20"
+  }, 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"
+  })));
+}
+export function AutocompleteClearIcon(_ref3) {
+  var createElement = _ref3.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteClearIcon",
+    viewBox: "0 0 24 24",
+    width: "18",
+    height: "18",
+    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"
+  }));
+}

package/dist/es/components/autocomplete/index.d.ts

@@ -1,4 +1,6 @@
 export * from './Autocomplete';
 export * from './AutocompleteIndex';
 export * from './AutocompletePanel';
+export * from './AutocompleteSearch';
 export * from './AutocompleteSuggestion';
+export * from './createAutocompletePropGetters';

package/dist/es/components/autocomplete/index.js

@@ -1,4 +1,6 @@
 export * from "./Autocomplete.js";
 export * from "./AutocompleteIndex.js";
 export * from "./AutocompletePanel.js";
-export * from "./AutocompleteSuggestion.js";
+export * from "./AutocompleteSearch.js";
+export * from "./AutocompleteSuggestion.js";
+export * from "./createAutocompletePropGetters.js";

package/dist/es/components/chat/icons.js

@@ -208,12 +208,12 @@ export function StopIconComponent(_ref9) {
     rx: "1"
   }));
 }
-export function ReloadIconComponent(_ref10) {
-  var createElement = _ref10.createElement,
-    _ref10$width = _ref10.width,
-    width = _ref10$width === void 0 ? 16 : _ref10$width,
-    _ref10$height = _ref10.height,
-    height = _ref10$height === void 0 ? 16 : _ref10$height;
+export function ReloadIconComponent(_ref0) {
+  var createElement = _ref0.createElement,
+    _ref0$width = _ref0.width,
+    width = _ref0$width === void 0 ? 16 : _ref0$width,
+    _ref0$height = _ref0.height,
+    height = _ref0$height === void 0 ? 16 : _ref0$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -234,12 +234,12 @@ export function ReloadIconComponent(_ref10) {
     d: "M3 21v-5h5"
   }));
 }
-export function CopyIconComponent(_ref11) {
-  var createElement = _ref11.createElement,
-    _ref11$width = _ref11.width,
-    width = _ref11$width === void 0 ? 16 : _ref11$width,
-    _ref11$height = _ref11.height,
-    height = _ref11$height === void 0 ? 16 : _ref11$height;
+export function CopyIconComponent(_ref1) {
+  var createElement = _ref1.createElement,
+    _ref1$width = _ref1.width,
+    width = _ref1$width === void 0 ? 16 : _ref1$width,
+    _ref1$height = _ref1.height,
+    height = _ref1$height === void 0 ? 16 : _ref1$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -261,12 +261,12 @@ export function CopyIconComponent(_ref11) {
     d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
   }));
 }
-export function MenuIconComponent(_ref12) {
-  var createElement = _ref12.createElement,
-    _ref12$width = _ref12.width,
-    width = _ref12$width === void 0 ? 16 : _ref12$width,
-    _ref12$height = _ref12.height,
-    height = _ref12$height === void 0 ? 16 : _ref12$height;
+export function MenuIconComponent(_ref10) {
+  var createElement = _ref10.createElement,
+    _ref10$width = _ref10.width,
+    width = _ref10$width === void 0 ? 16 : _ref10$width,
+    _ref10$height = _ref10.height,
+    height = _ref10$height === void 0 ? 16 : _ref10$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -291,12 +291,12 @@ export function MenuIconComponent(_ref12) {
     r: "1"
   }));
 }
-export function LoadingSpinnerIconComponent(_ref13) {
-  var createElement = _ref13.createElement,
-    _ref13$width = _ref13.width,
-    width = _ref13$width === void 0 ? 24 : _ref13$width,
-    _ref13$height = _ref13.height,
-    height = _ref13$height === void 0 ? 24 : _ref13$height;
+export function LoadingSpinnerIconComponent(_ref11) {
+  var createElement = _ref11.createElement,
+    _ref11$width = _ref11.width,
+    width = _ref11$width === void 0 ? 24 : _ref11$width,
+    _ref11$height = _ref11.height,
+    height = _ref11$height === void 0 ? 24 : _ref11$height;
   return createElement("svg", {
     viewBox: "12 12 24 24",
     width: width,
@@ -313,12 +313,12 @@ export function LoadingSpinnerIconComponent(_ref13) {
     stroke: "currentColor"
   }));
 }
-export function ChevronLeftIconComponent(_ref14) {
-  var createElement = _ref14.createElement,
-    _ref14$width = _ref14.width,
-    width = _ref14$width === void 0 ? 16 : _ref14$width,
-    _ref14$height = _ref14.height,
-    height = _ref14$height === void 0 ? 16 : _ref14$height;
+export function ChevronLeftIconComponent(_ref12) {
+  var createElement = _ref12.createElement,
+    _ref12$width = _ref12.width,
+    width = _ref12$width === void 0 ? 16 : _ref12$width,
+    _ref12$height = _ref12.height,
+    height = _ref12$height === void 0 ? 16 : _ref12$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -333,12 +333,12 @@ export function ChevronLeftIconComponent(_ref14) {
     d: "m15 18-6-6 6-6"
   }));
 }
-export function ChevronRightIconComponent(_ref15) {
-  var createElement = _ref15.createElement,
-    _ref15$width = _ref15.width,
-    width = _ref15$width === void 0 ? 16 : _ref15$width,
-    _ref15$height = _ref15.height,
-    height = _ref15$height === void 0 ? 16 : _ref15$height;
+export function ChevronRightIconComponent(_ref13) {
+  var createElement = _ref13.createElement,
+    _ref13$width = _ref13.width,
+    width = _ref13$width === void 0 ? 16 : _ref13$width,
+    _ref13$height = _ref13.height,
+    height = _ref13$height === void 0 ? 16 : _ref13$height;
   return createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,

package/dist/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.12.0";
+declare const _default: "0.13.0";
 export default _default;

package/dist/es/version.js

@@ -1 +1 @@
-export default '0.12.0';
+export default '0.13.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch-ui-components",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Common UI components for InstantSearch.",
   "types": "dist/es/index.d.ts",
   "main": "dist/cjs/index.js",
@@ -53,5 +53,5 @@
     "zod": "^3.25.76 || ^4",
     "zod-to-json-schema": "3.24.6"
   },
-  "gitHead": "7cc565086f06a9ec74155002c26596b68efc53bc"
+  "gitHead": "89dc58afb61fbabb29e326d18543e51907eaea88"
 }