instantsearch-ui-components 0.14.0 → 0.15.0

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

@@ -10,6 +10,7 @@ function createAutocompleteRecentSearchComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteRecentSearch(_ref2) {
     var item = _ref2.item,
+      children = _ref2.children,
       onSelect = _ref2.onSelect,
       onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
       _ref2$classNames = _ref2.classNames,
@@ -25,7 +26,7 @@ function createAutocompleteRecentSearchComponent(_ref) {
       createElement: createElement
     })), createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
-    }, item.query)), createElement("div", {
+    }, children)), createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
     }, createElement("button", {
       className: (0, _lib.cx)('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),

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

@@ -14,6 +14,7 @@ function createAutocompleteSearchComponent(_ref) {
       onClear = _ref2.onClear,
       query = _ref2.query,
       isSearchStalled = _ref2.isSearchStalled;
+    var inputRef = inputProps.ref;
     return createElement("form", {
       className: "ais-AutocompleteForm",
       action: "",
@@ -21,6 +22,10 @@ function createAutocompleteSearchComponent(_ref) {
       role: "search",
       onSubmit: function onSubmit(e) {
         return e.preventDefault();
+      },
+      onReset: function onReset() {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       }
     }, createElement("div", {
       className: "ais-AutocompleteInputWrapperPrefix"

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

@@ -9,7 +9,7 @@ var _icons = require("./icons");
 function createAutocompleteSuggestionComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteSuggestion(_ref2) {
-    var item = _ref2.item,
+    var children = _ref2.children,
       onSelect = _ref2.onSelect,
       _ref2$classNames = _ref2.classNames,
       classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
@@ -24,6 +24,6 @@ function createAutocompleteSuggestionComponent(_ref) {
       createElement: createElement
     })), createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-    }, item.query)));
+    }, children)));
   };
 }

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

@@ -19,6 +19,7 @@ function createAutocompletePropGetters(_ref) {
       onRefine = _ref2.onRefine,
       globalOnSelect = _ref2.onSelect;
     var getElementId = createGetElementId(useId());
+    var inputRef = useRef(null);
     var rootRef = useRef(null);
     var _useState = useState(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -50,7 +51,7 @@ function createAutocompletePropGetters(_ref) {
         document.body.removeEventListener('click', onBodyClick);
       };
     }, [rootRef]);
-    var getNextActiveDescendent = function getNextActiveDescendent(key) {
+    var getNextActiveDescendant = function getNextActiveDescendant(key) {
       switch (key) {
         case 'ArrowLeft':
         case 'ArrowUp':
@@ -69,11 +70,21 @@ function createAutocompletePropGetters(_ref) {
       }
     };
     var submit = function submit() {
-      var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
-      setIsOpen(false);
-      if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+      var _override$activeDesce;
+      var override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      if (isOpen) {
+        setIsOpen(false);
+      } else {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+      }
+      var actualDescendant = (_override$activeDesce = override.activeDescendant) !== null && _override$activeDesce !== void 0 ? _override$activeDesce : activeDescendant;
+      if (!actualDescendant && override.query) {
+        onRefine(override.query);
+      }
+      if (actualDescendant && items.has(actualDescendant)) {
         var _getQuery;
-        var _ref3 = items.get(actualActiveDescendant),
+        var _ref3 = items.get(actualDescendant),
           _item = _ref3.item,
           _ref3$config = _ref3.config,
           indexOnSelect = _ref3$config.onSelect,
@@ -95,6 +106,7 @@ function createAutocompletePropGetters(_ref) {
       getInputProps: function getInputProps() {
         return {
           id: getElementId('input'),
+          ref: inputRef,
           role: 'combobox',
           'aria-autocomplete': 'list',
           'aria-expanded': isOpen,
@@ -105,33 +117,42 @@ function createAutocompletePropGetters(_ref) {
             return setIsOpen(true);
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Escape') {
-              setActiveDescendant(undefined);
-              setIsOpen(false);
-              return;
-            }
             switch (event.key) {
+              case 'Escape':
+                {
+                  if (isOpen) {
+                    setIsOpen(false);
+                    event.preventDefault();
+                  } else {
+                    setActiveDescendant(undefined);
+                  }
+                  break;
+                }
               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);
+                  setIsOpen(true);
+                  var nextActiveDescendant = getNextActiveDescendant(event.key);
+                  setActiveDescendant(nextActiveDescendant);
+                  (_document$getElementB = document.getElementById(nextActiveDescendant)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
                   event.preventDefault();
                   break;
                 }
               case 'Enter':
                 {
-                  submit();
+                  submit({
+                    query: event.target.value
+                  });
                   break;
                 }
               case 'Tab':
                 setIsOpen(false);
                 break;
               default:
+                setIsOpen(true);
                 return;
             }
           },
@@ -159,7 +180,9 @@ function createAutocompletePropGetters(_ref) {
           role: 'row',
           'aria-selected': id === activeDescendant,
           onSelect: function onSelect() {
-            return submit(id);
+            return submit({
+              activeDescendant: id
+            });
           }
         };
       },

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

@@ -52,7 +52,13 @@ function createAutocompleteStorage(_ref) {
       return {
         objectID: value,
         query: value,
-        __indexName: 'recent-searches'
+        __indexName: 'recent-searches',
+        _highlightResult: getHighlightedAttribute({
+          item: {
+            query: value
+          },
+          query: query || ''
+        })
       };
     });
     var indicesForPropGetters = (0, _toConsumableArray2.default)(indices);
@@ -88,6 +94,24 @@ function isLocalStorageSupported() {
     return false;
   }
 }
+function getHighlightedAttribute(_ref3) {
+  var item = _ref3.item,
+    query = _ref3.query;
+  if (!query.trim().length) {
+    return {
+      query: {
+        matchLevel: 'none'
+      }
+    };
+  }
+  return {
+    query: {
+      value: item.query.replace(new RegExp(query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'), function (match) {
+        return "<mark>".concat(match, "</mark>");
+      })
+    }
+  };
+}
 function getLocalStorage() {
   var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LOCAL_STORAGE_KEY;
   if (!isLocalStorageSupported()) {
@@ -112,10 +136,10 @@ function getLocalStorage() {
     }
   };
 }
-function createStorage(_ref3) {
-  var _ref3$limit = _ref3.limit,
-    limit = _ref3$limit === void 0 ? 5 : _ref3$limit,
-    storageKey = _ref3.storageKey;
+function createStorage(_ref4) {
+  var _ref4$limit = _ref4.limit,
+    limit = _ref4$limit === void 0 ? 5 : _ref4$limit,
+    storageKey = _ref4.storageKey;
   var storage = getLocalStorage(storageKey);
   var updateListener = null;
   return {

package/dist/cjs/version.js

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

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

@@ -1,9 +1,10 @@
 /** @jsx createElement */
-import type { Renderer } from '../../types';
+import type { ComponentChildren, Renderer } from '../../types';
 export type AutocompleteRecentSearchProps<T = {
     query: string;
 } & Record<string, unknown>> = {
     item: T;
+    children?: ComponentChildren;
     onSelect: () => void;
     onRemoveRecentSearch: () => void;
     classNames?: Partial<AutocompleteRecentSearchClassNames>;
@@ -34,4 +35,4 @@ export type AutocompleteRecentSearchClassNames = {
      **/
     deleteButton: string | string[];
 };
-export declare function createAutocompleteRecentSearchComponent({ createElement, }: Renderer): ({ item, onSelect, onRemoveRecentSearch, classNames, }: AutocompleteRecentSearchProps) => JSX.Element;
+export declare function createAutocompleteRecentSearchComponent({ createElement, }: Renderer): ({ item, children, onSelect, onRemoveRecentSearch, classNames, }: AutocompleteRecentSearchProps) => JSX.Element;

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

@@ -4,6 +4,7 @@ export function createAutocompleteRecentSearchComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteRecentSearch(_ref2) {
     var item = _ref2.item,
+      children = _ref2.children,
       onSelect = _ref2.onSelect,
       onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
       _ref2$classNames = _ref2.classNames,
@@ -19,7 +20,7 @@ export function createAutocompleteRecentSearchComponent(_ref) {
       createElement: createElement
     })), createElement("div", {
       className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
-    }, item.query)), createElement("div", {
+    }, children)), createElement("div", {
       className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
     }, createElement("button", {
       className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),

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

@@ -7,6 +7,7 @@ export function createAutocompleteSearchComponent(_ref) {
       onClear = _ref2.onClear,
       query = _ref2.query,
       isSearchStalled = _ref2.isSearchStalled;
+    var inputRef = inputProps.ref;
     return createElement("form", {
       className: "ais-AutocompleteForm",
       action: "",
@@ -14,6 +15,10 @@ export function createAutocompleteSearchComponent(_ref) {
       role: "search",
       onSubmit: function onSubmit(e) {
         return e.preventDefault();
+      },
+      onReset: function onReset() {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       }
     }, createElement("div", {
       className: "ais-AutocompleteInputWrapperPrefix"

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

@@ -1,10 +1,11 @@
 /** @jsx createElement */
-import type { Renderer } from '../../types';
+import type { ComponentChildren, Renderer } from '../../types';
 export type AutocompleteSuggestionProps<T = {
     query: string;
 } & Record<string, unknown>> = {
     item: T;
     onSelect: () => void;
+    children: ComponentChildren;
     classNames?: Partial<AutocompleteSuggestionClassNames>;
 };
 export type AutocompleteSuggestionClassNames = {
@@ -21,4 +22,4 @@ export type AutocompleteSuggestionClassNames = {
     /** Class names to apply to the body element **/
     body: string | string[];
 };
-export declare function createAutocompleteSuggestionComponent({ createElement, }: Renderer): ({ item, onSelect, classNames, }: AutocompleteSuggestionProps) => JSX.Element;
+export declare function createAutocompleteSuggestionComponent({ createElement, }: Renderer): ({ children, onSelect, classNames, }: AutocompleteSuggestionProps) => JSX.Element;

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

@@ -3,7 +3,7 @@ import { AutocompleteSubmitIcon } from "./icons.js";
 export function createAutocompleteSuggestionComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteSuggestion(_ref2) {
-    var item = _ref2.item,
+    var children = _ref2.children,
       onSelect = _ref2.onSelect,
       _ref2$classNames = _ref2.classNames,
       classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
@@ -18,6 +18,6 @@ export function createAutocompleteSuggestionComponent(_ref) {
       createElement: createElement
     })), createElement("div", {
       className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-    }, item.query)));
+    }, children)));
   };
 }

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

@@ -12,6 +12,7 @@ export function createAutocompletePropGetters(_ref) {
       onRefine = _ref2.onRefine,
       globalOnSelect = _ref2.onSelect;
     var getElementId = createGetElementId(useId());
+    var inputRef = useRef(null);
     var rootRef = useRef(null);
     var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -43,7 +44,7 @@ export function createAutocompletePropGetters(_ref) {
         document.body.removeEventListener('click', onBodyClick);
       };
     }, [rootRef]);
-    var getNextActiveDescendent = function getNextActiveDescendent(key) {
+    var getNextActiveDescendant = function getNextActiveDescendant(key) {
       switch (key) {
         case 'ArrowLeft':
         case 'ArrowUp':
@@ -62,11 +63,21 @@ export function createAutocompletePropGetters(_ref) {
       }
     };
     var submit = function submit() {
-      var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
-      setIsOpen(false);
-      if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+      var _override$activeDesce;
+      var override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      if (isOpen) {
+        setIsOpen(false);
+      } else {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+      }
+      var actualDescendant = (_override$activeDesce = override.activeDescendant) !== null && _override$activeDesce !== void 0 ? _override$activeDesce : activeDescendant;
+      if (!actualDescendant && override.query) {
+        onRefine(override.query);
+      }
+      if (actualDescendant && items.has(actualDescendant)) {
         var _getQuery;
-        var _ref3 = items.get(actualActiveDescendant),
+        var _ref3 = items.get(actualDescendant),
           _item = _ref3.item,
           _ref3$config = _ref3.config,
           indexOnSelect = _ref3$config.onSelect,
@@ -88,6 +99,7 @@ export function createAutocompletePropGetters(_ref) {
       getInputProps: function getInputProps() {
         return {
           id: getElementId('input'),
+          ref: inputRef,
           role: 'combobox',
           'aria-autocomplete': 'list',
           'aria-expanded': isOpen,
@@ -98,33 +110,42 @@ export function createAutocompletePropGetters(_ref) {
             return setIsOpen(true);
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Escape') {
-              setActiveDescendant(undefined);
-              setIsOpen(false);
-              return;
-            }
             switch (event.key) {
+              case 'Escape':
+                {
+                  if (isOpen) {
+                    setIsOpen(false);
+                    event.preventDefault();
+                  } else {
+                    setActiveDescendant(undefined);
+                  }
+                  break;
+                }
               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);
+                  setIsOpen(true);
+                  var nextActiveDescendant = getNextActiveDescendant(event.key);
+                  setActiveDescendant(nextActiveDescendant);
+                  (_document$getElementB = document.getElementById(nextActiveDescendant)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
                   event.preventDefault();
                   break;
                 }
               case 'Enter':
                 {
-                  submit();
+                  submit({
+                    query: event.target.value
+                  });
                   break;
                 }
               case 'Tab':
                 setIsOpen(false);
                 break;
               default:
+                setIsOpen(true);
                 return;
             }
           },
@@ -152,7 +173,9 @@ export function createAutocompletePropGetters(_ref) {
           role: 'row',
           'aria-selected': id === activeDescendant,
           onSelect: function onSelect() {
-            return submit(id);
+            return submit({
+              activeDescendant: id
+            });
           }
         };
       },

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

@@ -38,6 +38,17 @@ export declare function createAutocompleteStorage({ useEffect, useMemo, useState
         objectID: string;
         query: string;
         __indexName: string;
+        _highlightResult: {
+            query: {
+                matchLevel: string;
+                value?: undefined;
+            };
+        } | {
+            query: {
+                value: string;
+                matchLevel?: undefined;
+            };
+        };
     }[];
     indicesForPropGetters: {
         indexName: string;

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

@@ -44,7 +44,13 @@ export function createAutocompleteStorage(_ref) {
       return {
         objectID: value,
         query: value,
-        __indexName: 'recent-searches'
+        __indexName: 'recent-searches',
+        _highlightResult: getHighlightedAttribute({
+          item: {
+            query: value
+          },
+          query: query || ''
+        })
       };
     });
     var indicesForPropGetters = _toConsumableArray(indices);
@@ -80,6 +86,24 @@ function isLocalStorageSupported() {
     return false;
   }
 }
+function getHighlightedAttribute(_ref3) {
+  var item = _ref3.item,
+    query = _ref3.query;
+  if (!query.trim().length) {
+    return {
+      query: {
+        matchLevel: 'none'
+      }
+    };
+  }
+  return {
+    query: {
+      value: item.query.replace(new RegExp(query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'), function (match) {
+        return "<mark>".concat(match, "</mark>");
+      })
+    }
+  };
+}
 function getLocalStorage() {
   var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LOCAL_STORAGE_KEY;
   if (!isLocalStorageSupported()) {
@@ -104,10 +128,10 @@ function getLocalStorage() {
     }
   };
 }
-export function createStorage(_ref3) {
-  var _ref3$limit = _ref3.limit,
-    limit = _ref3$limit === void 0 ? 5 : _ref3$limit,
-    storageKey = _ref3.storageKey;
+export function createStorage(_ref4) {
+  var _ref4$limit = _ref4.limit,
+    limit = _ref4$limit === void 0 ? 5 : _ref4$limit,
+    storageKey = _ref4.storageKey;
   var storage = getLocalStorage(storageKey);
   var updateListener = null;
   return {

package/dist/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.14.0";
+declare const _default: "0.15.0";
 export default _default;

package/dist/es/version.js

@@ -1 +1 @@
-export default '0.14.0';
+export default '0.15.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch-ui-components",
-  "version": "0.14.0",
+  "version": "0.15.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": "6e4bcd74b92f96761f514bee14824537ba36adf2"
+  "gitHead": "b4cb69c8cfaa9dc22dfe8fe695568cf5200f3893"
 }