instantsearch.js 4.45.1 → 4.46.1

package/cjs/widgets/voice-search/defaultTemplates.js

@@ -5,22 +5,94 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var getButtonInnerElement = function getButtonInnerElement(status, errorCode, isListening) {
+var _preact = require("preact");
+
+/** @jsx h */
+var _ref2 = (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("line", {
+  x1: "1",
+  y1: "1",
+  x2: "23",
+  y2: "23"
+}), (0, _preact.h)("path", {
+  d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"
+}), (0, _preact.h)("path", {
+  d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"
+}), (0, _preact.h)("line", {
+  x1: "12",
+  y1: "19",
+  x2: "12",
+  y2: "23"
+}), (0, _preact.h)("line", {
+  x1: "8",
+  y1: "23",
+  x2: "16",
+  y2: "23"
+}));
+
+var _ref3 = (0, _preact.h)("path", {
+  d: "M19 10v2a7 7 0 0 1-14 0v-2"
+});
+
+var _ref4 = (0, _preact.h)("line", {
+  x1: "12",
+  y1: "19",
+  x2: "12",
+  y2: "23"
+});
+
+var _ref5 = (0, _preact.h)("line", {
+  x1: "8",
+  y1: "23",
+  x2: "16",
+  y2: "23"
+});
+
+var ButtonInnerElement = function ButtonInnerElement(_ref) {
+  var status = _ref.status,
+      errorCode = _ref.errorCode,
+      isListening = _ref.isListening;
+
   if (status === 'error' && errorCode === 'not-allowed') {
-    return "<line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\n            <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6\"></path>\n            <path d=\"M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23\"></path>\n            <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n            <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>";
+    return _ref2;
   }
 
-  return "<path\n            d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"\n            fill=\"".concat(isListening ? 'currentColor' : 'none', "\">\n          </path>\n          <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path>\n          <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n          <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>");
+  return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("path", {
+    d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z",
+    fill: isListening ? 'currentColor' : 'none'
+  }), _ref3, _ref4, _ref5);
 };
 
 var defaultTemplates = {
-  buttonText: function buttonText(_ref) {
-    var status = _ref.status,
-        errorCode = _ref.errorCode,
-        isListening = _ref.isListening;
-    return "<svg\n       width=\"16\"\n       height=\"16\"\n       viewBox=\"0 0 24 24\"\n       fill=\"none\"\n       stroke=\"currentColor\"\n       stroke-width=\"2\"\n       stroke-linecap=\"round\"\n       stroke-linejoin=\"round\"\n     >\n       ".concat(getButtonInnerElement(status, errorCode, isListening), "\n     </svg>");
+  buttonText: function buttonText(_ref6) {
+    var status = _ref6.status,
+        errorCode = _ref6.errorCode,
+        isListening = _ref6.isListening;
+    return (0, _preact.h)("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor"
+      /* eslint-disable react/no-unknown-property */
+      // Preact supports kebab case attributes, and using camel case would
+      // require using `preact/compat`.
+      // @TODO: reconsider using the `react` ESLint preset
+      ,
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+      /* eslint-enable react/no-unknown-property */
+
+    }, (0, _preact.h)(ButtonInnerElement, {
+      status: status,
+      errorCode: errorCode,
+      isListening: isListening
+    }));
   },
-  status: "<p>{{transcript}}</p>"
+  status: function status(_ref7) {
+    var transcript = _ref7.transcript;
+    return (0, _preact.h)("p", null, transcript);
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/dist/instantsearch.development.d.ts

@@ -3,6 +3,11 @@
 import type { AlgoliaSearchHelper } from 'algoliasearch-helper';
 import EventEmitter from '@algolia/events';
 import { FindAnswersOptions } from 'algoliasearch-helper/types/algoliasearch.js';
+import { h } from 'preact';
+import type { HighlightClassNames as HighlightClassNames_2 } from '@algolia/ui-components-highlight-vdom';
+import type { HighlightProps as HighlightProps_3 } from '@algolia/ui-components-highlight-vdom';
+import type { HoganOptions } from 'hogan.js';
+import type { html } from 'htm/preact';
 import type { InsightsClient as InsightsClient_2 } from 'search-insights';
 import type { InsightsMethodMap } from 'search-insights';
 import type * as Places from 'places.js';
@@ -11,6 +16,7 @@ import { default as qs_2 } from 'qs';
 import { SearchClient } from 'algoliasearch-helper/types/algoliasearch.js';
 import type { SearchParameters } from 'algoliasearch-helper';
 import type { SearchResults } from 'algoliasearch-helper';
+import { VNode } from 'preact';
 
 declare type AlgoliaHit<THit extends BaseHit = Record<string, any>> = {
     objectID: string;
@@ -584,7 +590,9 @@ declare type ClearRefinementsTemplates = Partial<{
     /**
      * Template for the content of the button
      */
-    resetLabel: Template;
+    resetLabel: Template<{
+        hasRefinements: boolean;
+    }>;
 }>;
 
 declare type ClearRefinementsWidget = WidgetFactory<ClearRefinementsWidgetDescription & {
@@ -1169,6 +1177,8 @@ declare const EXPERIMENTAL_connectDynamicWidgets: DynamicWidgetsConnector;
 /** @deprecated use dynamicWidgets */
 declare const EXPERIMENTAL_dynamicWidgets: DynamicWidgetsWidget;
 
+declare type FacetValue = string | boolean | number;
+
 declare type GeoHit<THit extends BaseHit = Record<string, any>> = Hit<THit> & Required<Pick<Hit, '_geoloc'>>;
 
 declare type GeoLoc = {
@@ -1588,6 +1598,8 @@ declare type HierarchicalMenuTemplates = Partial<{
         count: number;
         isRefined: boolean;
         url: string;
+        label: string;
+        cssClasses: HierarchicalMenuCSSClasses;
     }>;
     /**
      * Template used for the show more text, provided with `isShowingMore` data property.
@@ -1738,8 +1750,12 @@ declare type HierarchicalMenuWidgetParams = {
     cssClasses?: HierarchicalMenuCSSClasses;
 };
 
+declare function Highlight<THit extends Hit<BaseHit>>({ hit, attribute, cssClasses, ...props }: HighlightProps<THit>): h.JSX.Element;
+
 declare function highlight({ attribute, highlightedTagName, hit, cssClasses, }: HighlightOptions): string;
 
+declare type HighlightClassNames = HighlightClassNames_2;
+
 declare type HighlightOptions = {
     attribute: string | string[];
     highlightedTagName?: string;
@@ -1749,6 +1765,16 @@ declare type HighlightOptions = {
     }>;
 };
 
+declare type HighlightProps<THit extends Hit<BaseHit>> = {
+    hit: THit;
+    attribute: keyof THit | string[];
+    cssClasses?: HighlightProps_2['classNames'];
+} & PartialKeys<Omit<HighlightProps_2, 'parts' | 'classNames'>, 'highlightedTagName' | 'nonHighlightedTagName' | 'separator'>;
+
+declare type HighlightProps_2 = Omit<HighlightProps_3, 'classNames'> & {
+    classNames?: Partial<HighlightClassNames>;
+};
+
 declare function historyRouter<TRouteState = UiState>({ createURL, parseURL, writeDelay, windowTitle, getLocation, }?: Partial<BrowserHistoryArgs<TRouteState>>): BrowserHistory<TRouteState>;
 
 declare type Hit<THit extends BaseHit = Record<string, any>> = {
@@ -1942,7 +1968,7 @@ declare type HitsTemplates = Partial<{
      *
      * @default 'No Results'
      */
-    empty: Template;
+    empty: Template<SearchResults>;
     /**
      * Template to use for each result. This template will receive an object containing a single record.
      *
@@ -1980,11 +2006,13 @@ declare type HitsWidgetParams = {
     cssClasses?: HitsCSSClasses;
 };
 
+declare type HoganHelpers<TKeys extends string = string> = Record<TKeys, (text: string, render: (value: string) => string) => string>;
+
 declare type HTMLMarkerArguments = {
     __id: string;
     position: google.maps.LatLngLiteral;
     map: google.maps.Map;
-    template: string;
+    template: ReturnType<typeof renderTemplate>;
     title?: string;
     className: string;
     anchor?: {
@@ -2163,9 +2191,7 @@ declare type InfiniteHitsTemplates = Partial<{
     /**
      * The template to use when there are no results.
      */
-    empty: Template<{
-        results: SearchResults;
-    }>;
+    empty: Template<SearchResults>;
     /**
      * The template to use for the “Show previous” label.
      */
@@ -2360,7 +2386,12 @@ declare class InstantSearch<TUiState extends UiState = UiState, TRouteState = TU
         cancel(): void;
     };
     scheduleStalledRender(): void;
-    setUiState(uiState: TUiState | ((previousUiState: TUiState) => TUiState)): void;
+    /**
+     * Set the UI state and trigger a search.
+     * @param uiState The next UI state or a function computing it from the current state
+     * @param callOnStateChange private parameter used to know if the method is called from a state change
+     */
+    setUiState(uiState: TUiState | ((previousUiState: TUiState) => TUiState), callOnStateChange?: boolean): void;
     getUiState(): TUiState;
     onInternalStateChange: ((...args: any[]) => void) & {
         wait(): Promise<void>;
@@ -2755,6 +2786,7 @@ declare type MiddlewareDefinition<TUiState extends UiState = UiState> = {
         uiState: TUiState;
     }): void;
     subscribe(): void;
+    started(): void;
     unsubscribe(): void;
 };
 
@@ -3235,6 +3267,11 @@ declare type ParseURL<TRouteState> = (args: {
     location: Location;
 }) => TRouteState;
 
+/**
+ * Make certain keys of an object optional.
+ */
+declare type PartialKeys<TObj, TKeys extends keyof TObj> = Omit<TObj, TKeys> & Partial<Pick<TObj, TKeys>>;
+
 declare type PlacesInstance = Places.PlacesInstance;
 
 declare type PlacesWidget = WidgetFactory<PlacesWidgetDescription, PlacesWidgetParams, PlacesWidgetParams>;
@@ -3749,9 +3786,15 @@ declare type RatingMenuTemplates = Partial<{
      */
     item: Template<{
         name: string;
+        label: string;
+        value: string;
         count: number;
         isRefined: boolean;
         url: string;
+        stars: [boolean, boolean, boolean, boolean, boolean];
+        cssClasses: RatingMenuCSSClasses;
+        attribute?: string;
+        isFromSearch?: boolean;
     }>;
 }>;
 
@@ -3954,6 +3997,10 @@ declare type RefinementListItemData = {
      * Object containing all the classes computed for the item.
      */
     cssClasses: RefinementListCSSClasses;
+    /**
+     * Whether the `items` prop contains facet values from the global search or from the search inside the items.
+     */
+    isFromSearch: boolean;
 };
 
 declare type RefinementListOwnCSSClasses = Partial<{
@@ -4019,7 +4066,9 @@ declare type RefinementListOwnTemplates = Partial<{
     /**
      * Template used for the show more text, provided with `isShowingMore` data property.
      */
-    showMoreText: Template;
+    showMoreText: Template<{
+        isShowingMore: boolean;
+    }>;
     /**
      * Templates to use for search for facet values when there are no results.
      */
@@ -4271,6 +4320,16 @@ declare type RenderState = {
 
 declare type RenderStateLifeCycle<TWidgetDescription extends WidgetDescription & WidgetParams> = TWidgetDescription extends RequiredKeys<WidgetDescription, 'renderState' | 'indexRenderState'> & WidgetParams ? RequiredRenderStateLifeCycle<TWidgetDescription> : Partial<RequiredRenderStateLifeCycle<TWidgetDescription>>;
 
+declare function renderTemplate({ templates, templateKey, compileOptions, helpers, data, bindEvent, sendEvent, }: {
+    templates: Templates;
+    templateKey: string;
+    compileOptions?: HoganOptions;
+    helpers?: HoganHelpers;
+    data?: Record<string, any>;
+    bindEvent?: BindEventForHits;
+    sendEvent?: SendEventForHits;
+}): string | VNode<    {}> | VNode<    {}>[];
+
 declare type RequiredKeys<TObject, TKeys extends keyof TObject> = Expand<Required<Pick<TObject, TKeys>> & Omit<TObject, TKeys>>;
 
 declare type RequiredRenderStateLifeCycle<TWidgetDescription extends WidgetDescription & WidgetParams> = {
@@ -4348,8 +4407,12 @@ declare type RequiredWidgetType<TWidgetDescription extends WidgetDescription> =
     $$widgetType: TWidgetDescription['$$widgetType'];
 };
 
+declare function ReverseHighlight<THit extends Hit<BaseHit>>({ hit, attribute, cssClasses, ...props }: ReverseHighlightProps<THit>): h.JSX.Element;
+
 declare function reverseHighlight({ attribute, highlightedTagName, hit, cssClasses, }: ReverseHighlightOptions): string;
 
+declare type ReverseHighlightClassNames = HighlightClassNames_2;
+
 declare type ReverseHighlightOptions = {
     attribute: string | string[];
     highlightedTagName?: string;
@@ -4359,8 +4422,22 @@ declare type ReverseHighlightOptions = {
     }>;
 };
 
+declare type ReverseHighlightProps<THit extends Hit<BaseHit>> = {
+    hit: THit;
+    attribute: keyof THit | string[];
+    cssClasses?: ReverseHighlightProps_2['classNames'];
+} & PartialKeys<Omit<ReverseHighlightProps_2, 'parts' | 'classNames'>, 'highlightedTagName' | 'nonHighlightedTagName' | 'separator'>;
+
+declare type ReverseHighlightProps_2 = Omit<HighlightProps_3, 'classNames'> & {
+    classNames?: Partial<ReverseHighlightClassNames>;
+};
+
+declare function ReverseSnippet<THit extends Hit<BaseHit>>({ hit, attribute, cssClasses, ...props }: ReverseSnippetProps<THit>): h.JSX.Element;
+
 declare function reverseSnippet({ attribute, highlightedTagName, hit, cssClasses, }: ReverseSnippetOptions): string;
 
+declare type ReverseSnippetClassNames = HighlightClassNames_2;
+
 declare type ReverseSnippetOptions = {
     attribute: string | string[];
     highlightedTagName?: string;
@@ -4370,6 +4447,16 @@ declare type ReverseSnippetOptions = {
     }>;
 };
 
+declare type ReverseSnippetProps<THit extends Hit<BaseHit>> = {
+    hit: THit;
+    attribute: keyof THit | string[];
+    cssClasses?: ReverseSnippetProps_2['classNames'];
+} & PartialKeys<Omit<ReverseSnippetProps_2, 'parts' | 'classNames'>, 'highlightedTagName' | 'nonHighlightedTagName' | 'separator'>;
+
+declare type ReverseSnippetProps_2 = Omit<HighlightProps_3, 'classNames'> & {
+    classNames?: Partial<ReverseSnippetClassNames>;
+};
+
 /**
  * The router is the part that saves and reads the object from the storage.
  * Usually this is the URL.
@@ -4422,6 +4509,8 @@ declare type ScopedResult = {
 
 declare const searchBox: SearchBoxWidget;
 
+declare type SearchBoxComponentCSSClasses = ComponentCSSClasses<SearchBoxCSSClasses>;
+
 declare type SearchBoxConnector = Connector<SearchBoxWidgetDescription, SearchBoxConnectorParams>;
 
 declare type SearchBoxConnectorParams = {
@@ -4507,15 +4596,21 @@ declare type SearchBoxTemplates = Partial<{
     /**
      * Template used for displaying the submit button. Can accept a function or a Hogan string.
      */
-    submit: Template;
+    submit: Template<{
+        cssClasses: SearchBoxComponentCSSClasses;
+    }>;
     /**
      * Template used for displaying the reset button. Can accept a function or a Hogan string.
      */
-    reset: Template;
+    reset: Template<{
+        cssClasses: SearchBoxComponentCSSClasses;
+    }>;
     /**
      * Template used for displaying the loading indicator. Can accept a function or a Hogan string.
      */
-    loadingIndicator: Template;
+    loadingIndicator: Template<{
+        cssClasses: SearchBoxComponentCSSClasses;
+    }>;
 }>;
 
 /**
@@ -4614,8 +4709,12 @@ declare function simpleStateMapping<TUiState extends UiState = UiState>(): State
 
 declare function singleIndexStateMapping<TUiState extends UiState = UiState>(indexName: keyof TUiState): StateMapping<TUiState, TUiState[typeof indexName]>;
 
+declare function Snippet<THit extends Hit<BaseHit>>({ hit, attribute, cssClasses, ...props }: SnippetProps<THit>): h.JSX.Element;
+
 declare function snippet({ attribute, highlightedTagName, hit, cssClasses, }: SnippetOptions): string;
 
+declare type SnippetClassNames = HighlightClassNames_2;
+
 declare type SnippetOptions = {
     attribute: string | string[];
     highlightedTagName?: string;
@@ -4625,6 +4724,16 @@ declare type SnippetOptions = {
     };
 };
 
+declare type SnippetProps<THit extends Hit<BaseHit>> = {
+    hit: THit;
+    attribute: keyof THit | string[];
+    cssClasses?: SnippetProps_2['classNames'];
+} & PartialKeys<Omit<SnippetProps_2, 'parts' | 'classNames'>, 'highlightedTagName' | 'nonHighlightedTagName' | 'separator'>;
+
+declare type SnippetProps_2 = Omit<HighlightProps_3, 'classNames'> & {
+    classNames?: Partial<SnippetClassNames>;
+};
+
 /**
  * Transforms the given items.
  */
@@ -4877,13 +4986,9 @@ declare type StatsRenderState = {
 
 declare type StatsTemplates = Partial<{
     /**
-     * Text template, provided with `hasManyResults`, `hasNoResults`, `hasOneResult`, `hitsPerPage`, `nbHits`, `nbSortedHits`, `nbPages`, `areHitsSorted`, `page`, `processingTimeMS`, `query`.
+     * Text template, provided with `hasManyResults`, `hasNoResults`, `hasOneResult`, `hasNoSortedResults`, `hasOneSortedResults`, `hasManySortedResults`, `hitsPerPage`, `nbHits`, `nbSortedHits`, `nbPages`, `areHitsSorted`, `page`, `processingTimeMS`, `query`.
      */
-    text: Template<{
-        hasManyResults: boolean;
-        hasNoResults: boolean;
-        hasOneResult: boolean;
-    } & StatsRenderState>;
+    text: Template<TextTemplateProps & StatsRenderState>;
 }>;
 
 declare type StatsWidget = WidgetFactory<StatsWidgetDescription & {
@@ -4915,9 +5020,33 @@ declare type StatsWidgetParams = {
 
 declare type Status = 'initial' | 'askingPermission' | 'waiting' | 'recognizing' | 'finished' | 'error';
 
-declare type Template<TTemplateData = void> = string | ((data: TTemplateData) => string);
+declare type Template<TTemplateData = void> = string | ((data: TTemplateData, params: TemplateParams) => VNode | VNode[] | string);
+
+declare type TemplateParams = BindEventForHits & {
+    html: typeof html;
+    components: {
+        Highlight: typeof Highlight;
+        ReverseHighlight: typeof ReverseHighlight;
+        Snippet: typeof Snippet;
+        ReverseSnippet: typeof ReverseSnippet;
+    };
+    sendEvent?: SendEventForHits;
+};
+
+declare type Templates = {
+    [key: string]: Template<any> | TemplateWithBindEvent<any> | undefined;
+};
 
-declare type TemplateWithBindEvent<TTemplateData = void> = string | ((data: TTemplateData, bindEvent: BindEventForHits) => string);
+declare type TemplateWithBindEvent<TTemplateData = void> = string | ((data: TTemplateData, params: TemplateParams) => VNode | VNode[] | string);
+
+declare type TextTemplateProps = {
+    hasManyResults: boolean;
+    hasNoResults: boolean;
+    hasOneResult: boolean;
+    hasNoSortedResults: boolean;
+    hasOneSortedResults: boolean;
+    hasManySortedResults: boolean;
+};
 
 /**
  * The toggleRefinement widget lets the user either:
@@ -4944,11 +5073,11 @@ declare type ToggleRefinementConnectorParams = {
      * Value to filter on when toggled.
      * @default "true"
      */
-    on?: string | string[] | boolean | boolean[] | number | number[];
+    on?: FacetValue | FacetValue[];
     /**
      * Value to filter on when not toggled.
      */
-    off?: string | string[] | boolean | boolean[] | number | number[];
+    off?: FacetValue | FacetValue[];
 };
 
 declare type ToggleRefinementCSSClasses = Partial<{
@@ -5018,7 +5147,9 @@ declare type ToggleRefinementTemplates = Partial<{
     /**
      * the text that describes the toggle action
      */
-    labelText: Template<ToggleRefinementValue>;
+    labelText: Template<ToggleRefinementValue & {
+        name: string;
+    }>;
 }>;
 
 declare type ToggleRefinementValue = {