instantsearch-ui-components 0.12.0 → 0.14.0

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

@@ -15,7 +15,7 @@ var _ChatMessage = require("./ChatMessage");
 var _ChatMessageError = require("./ChatMessageError");
 var _ChatMessageLoader = require("./ChatMessageLoader");
 var _icons = require("./icons");
-var _excluded = ["classNames", "messages", "messageComponent", "loaderComponent", "errorComponent", "actionsComponent", "tools", "indexUiState", "setIndexUiState", "status", "hideScrollToBottom", "onReload", "onClose", "translations", "userMessageProps", "assistantMessageProps", "isClearing", "onClearTransitionEnd", "isScrollAtBottom", "scrollRef", "contentRef", "onScrollToBottom"];
+var _excluded = ["classNames", "messageClassNames", "messageTranslations", "messages", "messageComponent", "loaderComponent", "errorComponent", "actionsComponent", "tools", "indexUiState", "setIndexUiState", "status", "hideScrollToBottom", "onReload", "onClose", "translations", "userMessageProps", "assistantMessageProps", "isClearing", "onClearTransitionEnd", "isScrollAtBottom", "scrollRef", "contentRef", "onScrollToBottom"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getTextContent = function getTextContent(message) {
@@ -45,8 +45,10 @@ function createDefaultMessageComponent(_ref) {
       setIndexUiState = _ref2.setIndexUiState,
       onReload = _ref2.onReload,
       onClose = _ref2.onClose,
-      translations = _ref2.translations,
-      actionsComponent = _ref2.actionsComponent;
+      actionsComponent = _ref2.actionsComponent,
+      classNames = _ref2.classNames,
+      messageTranslations = _ref2.messageTranslations,
+      translations = _ref2.translations;
     var defaultAssistantActions = [].concat((0, _toConsumableArray2.default)(hasTextContent(message) ? [{
       title: translations.copyToClipboardLabel,
       icon: function icon() {
@@ -78,7 +80,9 @@ function createDefaultMessageComponent(_ref) {
       onClose: onClose,
       actions: defaultActions,
       actionsComponent: actionsComponent,
-      "data-role": message.role
+      "data-role": message.role,
+      classNames: classNames,
+      translations: messageTranslations
     }, messageProps));
   };
 }
@@ -101,6 +105,9 @@ function createChatMessagesComponent(_ref3) {
   return function ChatMessages(userProps) {
     var _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      _userProps$messageCla = userProps.messageClassNames,
+      messageClassNames = _userProps$messageCla === void 0 ? {} : _userProps$messageCla,
+      messageTranslations = userProps.messageTranslations,
       _userProps$messages = userProps.messages,
       messages = _userProps$messages === void 0 ? [] : _userProps$messages,
       MessageComponent = userProps.messageComponent,
@@ -169,7 +176,9 @@ function createChatMessagesComponent(_ref3) {
         onReload: onReload,
         actionsComponent: ActionsComponent,
         onClose: onClose,
-        translations: translations
+        translations: translations,
+        classNames: messageClassNames,
+        messageTranslations: messageTranslations
       });
     }), status === 'submitted' && createElement(DefaultLoader, {
       translations: {

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.14.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/AutocompleteRecentSearch.d.ts

@@ -0,0 +1,37 @@
+/** @jsx createElement */
+import type { Renderer } from '../../types';
+export type AutocompleteRecentSearchProps<T = {
+    query: string;
+} & Record<string, unknown>> = {
+    item: T;
+    onSelect: () => void;
+    onRemoveRecentSearch: () => void;
+    classNames?: Partial<AutocompleteRecentSearchClassNames>;
+};
+export type AutocompleteRecentSearchClassNames = {
+    /**
+     * Class names to apply to the root element
+     **/
+    root: string | string[];
+    /**
+     * Class names to apply to the content element
+     **/
+    content: string | string[];
+    /**
+     * Class names to apply to the actions element
+     **/
+    actions: string | string[];
+    /**
+     * Class names to apply to the icon element
+     **/
+    icon: string | string[];
+    /**
+     * Class names to apply to the body element
+     **/
+    body: string | string[];
+    /**
+     * Class names to apply to the delete button element
+     **/
+    deleteButton: string | string[];
+};
+export declare function createAutocompleteRecentSearchComponent({ createElement, }: Renderer): ({ item, onSelect, onRemoveRecentSearch, classNames, }: AutocompleteRecentSearchProps) => JSX.Element;

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

@@ -0,0 +1,35 @@
+import { cx } from "../../lib/index.js";
+import { AutocompleteClockIcon, AutocompleteTrashIcon } from "./icons.js";
+export function createAutocompleteRecentSearchComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteRecentSearch(_ref2) {
+    var item = _ref2.item,
+      onSelect = _ref2.onSelect,
+      onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
+      _ref2$classNames = _ref2.classNames,
+      classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
+    return createElement("div", {
+      onClick: onSelect,
+      className: cx('ais-AutocompleteItemWrapper ais-AutocompleteRecentSearchWrapper', classNames.root)
+    }, createElement("div", {
+      className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteRecentSearchItemContent', classNames.content)
+    }, createElement("div", {
+      className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteRecentSearchItemIcon', classNames.content)
+    }, createElement(AutocompleteClockIcon, {
+      createElement: createElement
+    })), createElement("div", {
+      className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
+    }, item.query)), createElement("div", {
+      className: cx('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
+    }, createElement("button", {
+      className: cx('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),
+      title: "Remove ".concat(item.query, " from recent searches"),
+      onClick: function onClick(evt) {
+        evt.stopPropagation();
+        onRemoveRecentSearch();
+      }
+    }, createElement(AutocompleteTrashIcon, {
+      createElement: createElement
+    }))));
+  };
+}

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/AutocompleteSuggestion.d.ts

@@ -12,5 +12,13 @@ export type AutocompleteSuggestionClassNames = {
      * Class names to apply to the root element
      **/
     root: string | string[];
+    /** Class names to apply to the content element **/
+    content: string | string[];
+    /** Class names to apply to the actions element **/
+    actions: string | string[];
+    /** Class names to apply to the icon element **/
+    icon: string | string[];
+    /** Class names to apply to the body element **/
+    body: string | string[];
 };
 export declare function createAutocompleteSuggestionComponent({ createElement, }: Renderer): ({ item, onSelect, classNames, }: AutocompleteSuggestionProps) => JSX.Element;

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

@@ -1,4 +1,5 @@
 import { cx } from "../../lib/index.js";
+import { AutocompleteSubmitIcon } from "./icons.js";
 export function createAutocompleteSuggestionComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteSuggestion(_ref2) {
@@ -8,7 +9,15 @@ export function createAutocompleteSuggestionComponent(_ref) {
       classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
     return createElement("div", {
       onClick: onSelect,
-      className: cx('ais-AutocompleteSuggestion', classNames.root)
-    }, item.query);
+      className: cx('ais-AutocompleteItemWrapper', 'ais-AutocompleteSuggestionWrapper', classNames.root)
+    }, createElement("div", {
+      className: cx('ais-AutocompleteItemContent', 'ais-AutocompleteSuggestionItemContent', classNames.content)
+    }, createElement("div", {
+      className: cx('ais-AutocompleteItemIcon', 'ais-AutocompleteSuggestionItemIcon', classNames.content)
+    }, createElement(AutocompleteSubmitIcon, {
+      createElement: createElement
+    })), createElement("div", {
+      className: cx('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
+    }, item.query)));
   };
 }

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];
+};
+export 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 {};