@docsearch/react 3.0.0-alpha.38 → 3.0.0-alpha.42

package/README.md

@@ -2,16 +2,42 @@
 
 React package for [DocSearch](http://docsearch.algolia.com/), the best search experience for docs.
 
-[![Percy](https://percy.io/static/images/percy-badge.svg)](https://percy.io/DX/DocSearch)
-
 ## Installation
 
-```sh
+```bash
 yarn add @docsearch/react@alpha
 # or
 npm install @docsearch/react@alpha
 ```
 
+If you don’t want to use a package manager, you can use a standalone endpoint:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/react@alpha"></script>
+```
+
+## Get started
+
+DocSearch generates a fully accessible search box for you.
+
+```jsx App.js
+import { DocSearch } from '@docsearch/react';
+
+import '@docsearch/css';
+
+function App() {
+  return (
+    <DocSearch
+      appId="YOUR_APP_ID"
+      indexName="YOUR_INDEX_NAME"
+      apiKey="YOUR_SEARCH_API_KEY"
+    />
+  );
+}
+
+export default App;
+```
+
 ## Documentation
 
-[Read documentation →](https://autocomplete-experimental.netlify.app/docs/DocSearch)
+[Read documentation →](https://docsearch.algolia.com/docs/DocSearch-v3)

package/dist/esm/AlgoliaLogo.d.ts

@@ -1,2 +1,9 @@
 /// <reference types="react" />
-export declare function AlgoliaLogo(): JSX.Element;
+declare type AlgoliaLogoTranslations = Partial<{
+    searchByText: string;
+}>;
+declare type AlgoliaLogoProps = {
+    translations?: AlgoliaLogoTranslations;
+};
+export declare function AlgoliaLogo({ translations }: AlgoliaLogoProps): JSX.Element;
+export {};

package/dist/esm/AlgoliaLogo.js

@@ -1,12 +1,16 @@
 import React from 'react';
-export function AlgoliaLogo() {
+export function AlgoliaLogo(_ref) {
+  var _ref$translations = _ref.translations,
+      translations = _ref$translations === void 0 ? {} : _ref$translations;
+  var _translations$searchB = translations.searchByText,
+      searchByText = _translations$searchB === void 0 ? 'Search by' : _translations$searchB;
   return /*#__PURE__*/React.createElement("a", {
     href: "https://www.algolia.com/docsearch",
     target: "_blank",
     rel: "noopener noreferrer"
   }, /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Label"
-  }, "Search by"), /*#__PURE__*/React.createElement("svg", {
+  }, searchByText), /*#__PURE__*/React.createElement("svg", {
     width: "77",
     height: "19"
   }, /*#__PURE__*/React.createElement("path", {

package/dist/esm/DocSearch.d.ts

@@ -1,24 +1,31 @@
-import { AutocompleteState, AutocompleteOptions } from '@algolia/autocomplete-core';
-import { SearchClient } from 'algoliasearch/lite';
+import type { AutocompleteState, AutocompleteOptions } from '@algolia/autocomplete-core';
+import type { SearchOptions } from '@algolia/client-search';
+import type { SearchClient } from 'algoliasearch/lite';
 import React from 'react';
-import { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from './types';
+import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from './types';
+import type { ButtonTranslations, ModalTranslations } from '.';
+export declare type DocSearchTranslations = Partial<{
+    button: ButtonTranslations;
+    modal: ModalTranslations;
+}>;
 export interface DocSearchProps {
     appId?: string;
     apiKey: string;
     indexName: string;
     placeholder?: string;
-    searchParameters?: any;
-    transformItems?(items: DocSearchHit[]): DocSearchHit[];
-    hitComponent?(props: {
+    searchParameters?: SearchOptions;
+    transformItems?: (items: DocSearchHit[]) => DocSearchHit[];
+    hitComponent?: (props: {
         hit: InternalDocSearchHit | StoredDocSearchHit;
         children: React.ReactNode;
-    }): JSX.Element;
-    resultsFooterComponent?(props: {
+    }) => JSX.Element;
+    resultsFooterComponent?: (props: {
         state: AutocompleteState<InternalDocSearchHit>;
-    }): JSX.Element | null;
-    transformSearchClient?(searchClient: SearchClient): SearchClient;
+    }) => JSX.Element | null;
+    transformSearchClient?: (searchClient: SearchClient) => SearchClient;
     disableUserPersonalization?: boolean;
     initialQuery?: string;
     navigator?: AutocompleteOptions<InternalDocSearchHit>['navigator'];
+    translations?: DocSearchTranslations;
 }
 export declare function DocSearch(props: DocSearchProps): JSX.Element;

package/dist/esm/DocSearch.js

@@ -18,6 +18,8 @@ import { DocSearchButton } from './DocSearchButton';
 import { DocSearchModal } from './DocSearchModal';
 import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents';
 export function DocSearch(props) {
+  var _props$translations, _props$translations2;
+
   var searchButtonRef = React.useRef(null);
 
   var _React$useState = React.useState(false),
@@ -25,7 +27,7 @@ export function DocSearch(props) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState(undefined),
+  var _React$useState3 = React.useState((props === null || props === void 0 ? void 0 : props.initialQuery) || undefined),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       initialQuery = _React$useState4[0],
       setInitialQuery = _React$useState4[1];
@@ -48,11 +50,13 @@ export function DocSearch(props) {
     searchButtonRef: searchButtonRef
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DocSearchButton, {
-    onClick: onOpen,
-    ref: searchButtonRef
+    ref: searchButtonRef,
+    translations: props === null || props === void 0 ? void 0 : (_props$translations = props.translations) === null || _props$translations === void 0 ? void 0 : _props$translations.button,
+    onClick: onOpen
   }), isOpen && createPortal( /*#__PURE__*/React.createElement(DocSearchModal, _extends({}, props, {
     initialScrollY: window.scrollY,
     initialQuery: initialQuery,
+    translations: props === null || props === void 0 ? void 0 : (_props$translations2 = props.translations) === null || _props$translations2 === void 0 ? void 0 : _props$translations2.modal,
     onClose: onClose
   })), document.body));
 }

package/dist/esm/DocSearchButton.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-declare type Translations = Partial<{
+export declare type ButtonTranslations = Partial<{
     buttonText: string;
     buttonAriaLabel: string;
 }>;
 export declare type DocSearchButtonProps = React.ComponentProps<'button'> & {
-    translations?: Translations;
+    translations?: ButtonTranslations;
 };
-export declare const DocSearchButton: React.ForwardRefExoticComponent<Pick<DocSearchButtonProps, "form" | "slot" | "style" | "title" | "children" | "translations" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const DocSearchButton: React.ForwardRefExoticComponent<Pick<DocSearchButtonProps, "translations" | "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/DocSearchButton.js

@@ -1,3 +1,5 @@
+var _excluded = ["translations"];
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -17,7 +19,7 @@ function isAppleDevice() {
 export var DocSearchButton = React.forwardRef(function (_ref, ref) {
   var _ref$translations = _ref.translations,
       translations = _ref$translations === void 0 ? {} : _ref$translations,
-      props = _objectWithoutProperties(_ref, ["translations"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _translations$buttonT = translations.buttonText,
       buttonText = _translations$buttonT === void 0 ? 'Search' : _translations$buttonT,
@@ -40,11 +42,11 @@ export var DocSearchButton = React.forwardRef(function (_ref, ref) {
     className: "DocSearch-Button-Container"
   }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Button-Placeholder"
-  }, buttonText)), key !== null && /*#__PURE__*/React.createElement("span", {
+  }, buttonText)), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Button-Keys"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, key !== null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Button-Key"
   }, key === ACTION_KEY_DEFAULT ? /*#__PURE__*/React.createElement(ControlKeyIcon, null) : key), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Button-Key"
-  }, "K")));
+  }, "K"))));
 });

package/dist/esm/DocSearchModal.d.ts

@@ -1,7 +1,15 @@
 /// <reference types="react" />
-import { DocSearchProps } from './DocSearch';
-export interface DocSearchModalProps extends DocSearchProps {
+import type { DocSearchProps } from './DocSearch';
+import type { FooterTranslations } from './Footer';
+import type { ScreenStateTranslations } from './ScreenState';
+import type { SearchBoxTranslations } from './SearchBox';
+export declare type ModalTranslations = Partial<{
+    searchBox: SearchBoxTranslations;
+    footer: FooterTranslations;
+}> & ScreenStateTranslations;
+export declare type DocSearchModalProps = DocSearchProps & {
     initialScrollY: number;
-    onClose?(): void;
-}
-export declare function DocSearchModal({ appId, apiKey, indexName, placeholder, searchParameters, onClose, transformItems, hitComponent, resultsFooterComponent, navigator, initialScrollY, transformSearchClient, disableUserPersonalization, initialQuery: initialQueryFromProp, }: DocSearchModalProps): JSX.Element;
+    onClose?: () => void;
+    translations?: ModalTranslations;
+};
+export declare function DocSearchModal({ appId, apiKey, indexName, placeholder, searchParameters, onClose, transformItems, hitComponent, resultsFooterComponent, navigator, initialScrollY, transformSearchClient, disableUserPersonalization, initialQuery: initialQueryFromProp, translations, }: DocSearchModalProps): JSX.Element;

package/dist/esm/DocSearchModal.js

@@ -1,3 +1,5 @@
+var _excluded = ["footer", "searchBox"];
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -18,6 +20,10 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import { createAutocomplete } from '@algolia/autocomplete-core';
 import React from 'react';
 import { MAX_QUERY_SIZE } from './constants';
@@ -56,7 +62,13 @@ export function DocSearchModal(_ref) {
       _ref$disableUserPerso = _ref.disableUserPersonalization,
       disableUserPersonalization = _ref$disableUserPerso === void 0 ? false : _ref$disableUserPerso,
       _ref$initialQuery = _ref.initialQuery,
-      initialQueryFromProp = _ref$initialQuery === void 0 ? '' : _ref$initialQuery;
+      initialQueryFromProp = _ref$initialQuery === void 0 ? '' : _ref$initialQuery,
+      _ref$translations = _ref.translations,
+      translations = _ref$translations === void 0 ? {} : _ref$translations;
+
+  var footerTranslations = translations.footer,
+      searchBoxTranslations = translations.searchBox,
+      screenStateTranslations = _objectWithoutProperties(translations, _excluded);
 
   var _React$useState = React.useState({
     query: '',
@@ -117,16 +129,14 @@ export function DocSearchModal(_ref) {
         }
       },
       navigator: navigator,
-      onStateChange: function onStateChange(_ref2) {
-        var state = _ref2.state;
-        setState(state);
+      onStateChange: function onStateChange(props) {
+        setState(props.state);
       },
-      // @ts-ignore Temporarily ignore bad typing in autocomplete-core.
-      getSources: function getSources(_ref3) {
-        var query = _ref3.query,
-            state = _ref3.state,
-            setContext = _ref3.setContext,
-            setStatus = _ref3.setStatus;
+      getSources: function getSources(_ref2) {
+        var query = _ref2.query,
+            sourcesState = _ref2.state,
+            setContext = _ref2.setContext,
+            setStatus = _ref2.setStatus;
 
         if (!query) {
           if (disableUserPersonalization) {
@@ -135,17 +145,17 @@ export function DocSearchModal(_ref) {
 
           return [{
             sourceId: 'recentSearches',
-            onSelect: function onSelect(_ref4) {
-              var item = _ref4.item,
-                  event = _ref4.event;
+            onSelect: function onSelect(_ref3) {
+              var item = _ref3.item,
+                  event = _ref3.event;
               saveRecentSearch(item);
 
               if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
                 onClose();
               }
             },
-            getItemUrl: function getItemUrl(_ref5) {
-              var item = _ref5.item;
+            getItemUrl: function getItemUrl(_ref4) {
+              var item = _ref4.item;
               return item.url;
             },
             getItems: function getItems() {
@@ -153,17 +163,17 @@ export function DocSearchModal(_ref) {
             }
           }, {
             sourceId: 'favoriteSearches',
-            onSelect: function onSelect(_ref6) {
-              var item = _ref6.item,
-                  event = _ref6.event;
+            onSelect: function onSelect(_ref5) {
+              var item = _ref5.item,
+                  event = _ref5.event;
               saveRecentSearch(item);
 
               if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
                 onClose();
               }
             },
-            getItemUrl: function getItemUrl(_ref7) {
-              var item = _ref7.item;
+            getItemUrl: function getItemUrl(_ref6) {
+              var item = _ref6.item;
               return item.url;
             },
             getItems: function getItems() {
@@ -193,8 +203,8 @@ export function DocSearchModal(_ref) {
           }
 
           throw error;
-        }).then(function (_ref8) {
-          var results = _ref8.results;
+        }).then(function (_ref7) {
+          var results = _ref7.results;
           var _results$ = results[0],
               hits = _results$.hits,
               nbHits = _results$.nbHits;
@@ -203,7 +213,7 @@ export function DocSearchModal(_ref) {
           }); // We store the `lvl0`s to display them as search suggestions
           // in the "no results" screen.
 
-          if (state.context.searchSuggestions.length < Object.keys(sources).length) {
+          if (sourcesState.context.searchSuggestions.length < Object.keys(sources).length) {
             setContext({
               searchSuggestions: Object.keys(sources)
             });
@@ -215,27 +225,26 @@ export function DocSearchModal(_ref) {
           return Object.values(sources).map(function (items, index) {
             return {
               sourceId: "hits".concat(index),
-              onSelect: function onSelect(_ref9) {
-                var item = _ref9.item,
-                    event = _ref9.event;
+              onSelect: function onSelect(_ref8) {
+                var item = _ref8.item,
+                    event = _ref8.event;
                 saveRecentSearch(item);
 
                 if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
                   onClose();
                 }
               },
-              getItemUrl: function getItemUrl(_ref10) {
-                var item = _ref10.item;
+              getItemUrl: function getItemUrl(_ref9) {
+                var item = _ref9.item;
                 return item.url;
               },
               getItems: function getItems() {
                 return Object.values(groupBy(items, function (item) {
                   return item.hierarchy.lvl1;
-                })).map(transformItems).map(function (hits) {
-                  return hits.map(function (item) {
+                })).map(transformItems).map(function (groupedHits) {
+                  return groupedHits.map(function (item) {
                     return _objectSpread(_objectSpread({}, item), {}, {
-                      // eslint-disable-next-line @typescript-eslint/camelcase
-                      __docsearch_parent: item.type !== 'lvl1' && hits.find(function (siblingItem) {
+                      __docsearch_parent: item.type !== 'lvl1' && groupedHits.find(function (siblingItem) {
                         return siblingItem.type === 'lvl1' && siblingItem.hierarchy.lvl1 === item.hierarchy.lvl1;
                       })
                     });
@@ -320,6 +329,8 @@ export function DocSearchModal(_ref) {
     'aria-expanded': true
   }), {
     className: ['DocSearch', 'DocSearch-Container', state.status === 'stalled' && 'DocSearch-Container--Stalled', state.status === 'error' && 'DocSearch-Container--Errored'].filter(Boolean).join(' '),
+    role: "button",
+    tabIndex: 0,
     onMouseDown: function onMouseDown(event) {
       if (event.target === event.currentTarget) {
         onClose();
@@ -334,9 +345,10 @@ export function DocSearchModal(_ref) {
   }, /*#__PURE__*/React.createElement(SearchBox, _extends({}, autocomplete, {
     state: state,
     autoFocus: initialQuery.length === 0,
-    onClose: onClose,
     inputRef: inputRef,
-    isFromSelection: Boolean(initialQuery) && initialQuery === initialQueryFromSelection
+    isFromSelection: Boolean(initialQuery) && initialQuery === initialQueryFromSelection,
+    translations: searchBoxTranslations,
+    onClose: onClose
   }))), /*#__PURE__*/React.createElement("div", {
     className: "DocSearch-Dropdown",
     ref: dropdownRef
@@ -348,12 +360,15 @@ export function DocSearchModal(_ref) {
     disableUserPersonalization: disableUserPersonalization,
     recentSearches: recentSearches,
     favoriteSearches: favoriteSearches,
+    inputRef: inputRef,
+    translations: screenStateTranslations,
     onItemClick: function onItemClick(item) {
       saveRecentSearch(item);
       onClose();
-    },
-    inputRef: inputRef
+    }
   }))), /*#__PURE__*/React.createElement("footer", {
     className: "DocSearch-Footer"
-  }, /*#__PURE__*/React.createElement(Footer, null))));
+  }, /*#__PURE__*/React.createElement(Footer, {
+    translations: footerTranslations
+  }))));
 }

package/dist/esm/ErrorScreen.d.ts

@@ -1,2 +1,10 @@
 /// <reference types="react" />
-export declare function ErrorScreen(): JSX.Element;
+export declare type ErrorScreenTranslations = Partial<{
+    titleText: string;
+    helpText: string;
+}>;
+declare type ErrorScreenProps = {
+    translations?: ErrorScreenTranslations;
+};
+export declare function ErrorScreen({ translations }: ErrorScreenProps): JSX.Element;
+export {};

package/dist/esm/ErrorScreen.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import { ErrorIcon } from './icons';
-export function ErrorScreen() {
+export function ErrorScreen(_ref) {
+  var _ref$translations = _ref.translations,
+      translations = _ref$translations === void 0 ? {} : _ref$translations;
+  var _translations$titleTe = translations.titleText,
+      titleText = _translations$titleTe === void 0 ? 'Unable to fetch results' : _translations$titleTe,
+      _translations$helpTex = translations.helpText,
+      helpText = _translations$helpTex === void 0 ? 'You might want to check your network connection.' : _translations$helpTex;
   return /*#__PURE__*/React.createElement("div", {
     className: "DocSearch-ErrorScreen"
   }, /*#__PURE__*/React.createElement("div", {
     className: "DocSearch-Screen-Icon"
   }, /*#__PURE__*/React.createElement(ErrorIcon, null)), /*#__PURE__*/React.createElement("p", {
     className: "DocSearch-Title"
-  }, "Unable to fetch results"), /*#__PURE__*/React.createElement("p", {
+  }, titleText), /*#__PURE__*/React.createElement("p", {
     className: "DocSearch-Help"
-  }, "You might want to check your network connection."));
+  }, helpText));
 }

package/dist/esm/Footer.d.ts

@@ -1,2 +1,12 @@
 /// <reference types="react" />
-export declare function Footer(): JSX.Element;
+export declare type FooterTranslations = Partial<{
+    selectText: string;
+    navigateText: string;
+    closeText: string;
+    searchByText: string;
+}>;
+declare type FooterProps = Partial<{
+    translations: FooterTranslations;
+}>;
+export declare function Footer({ translations }: FooterProps): JSX.Element;
+export {};

package/dist/esm/Footer.js

@@ -1,9 +1,37 @@
 import React from 'react';
 import { AlgoliaLogo } from './AlgoliaLogo';
-export function Footer() {
+
+function CommandIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "15",
+    height: "15"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.2"
+  }, props.children));
+}
+
+export function Footer(_ref) {
+  var _ref$translations = _ref.translations,
+      translations = _ref$translations === void 0 ? {} : _ref$translations;
+  var _translations$selectT = translations.selectText,
+      selectText = _translations$selectT === void 0 ? 'to select' : _translations$selectT,
+      _translations$navigat = translations.navigateText,
+      navigateText = _translations$navigat === void 0 ? 'to navigate' : _translations$navigat,
+      _translations$closeTe = translations.closeText,
+      closeText = _translations$closeTe === void 0 ? 'to close' : _translations$closeTe,
+      _translations$searchB = translations.searchByText,
+      searchByText = _translations$searchB === void 0 ? 'Search by' : _translations$searchB;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "DocSearch-Logo"
-  }, /*#__PURE__*/React.createElement(AlgoliaLogo, null)), /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React.createElement(AlgoliaLogo, {
+    translations: {
+      searchByText: searchByText
+    }
+  })), /*#__PURE__*/React.createElement("ul", {
     className: "DocSearch-Commands"
   }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Commands-Key"
@@ -11,7 +39,7 @@ export function Footer() {
     d: "M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
   }))), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Label"
-  }, "to select")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+  }, selectText)), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Commands-Key"
   }, /*#__PURE__*/React.createElement(CommandIcon, null, /*#__PURE__*/React.createElement("path", {
     d: "M7.5 3.5v8M10.5 8.5l-3 3-3-3"
@@ -21,24 +49,11 @@ export function Footer() {
     d: "M7.5 11.5v-8M10.5 6.5l-3-3-3 3"
   }))), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Label"
-  }, "to navigate")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+  }, navigateText)), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Commands-Key"
   }, /*#__PURE__*/React.createElement(CommandIcon, null, /*#__PURE__*/React.createElement("path", {
     d: "M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
   }))), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Label"
-  }, "to close"))));
-}
-
-function CommandIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "15",
-    height: "15"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.2"
-  }, props.children));
+  }, closeText))));
 }

package/dist/esm/Hit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DocSearchHit } from './types';
+import type { InternalDocSearchHit, StoredDocSearchHit } from './types';
 interface HitProps {
-    hit: DocSearchHit;
+    hit: InternalDocSearchHit | StoredDocSearchHit;
     children: React.ReactNode;
 }
 export declare function Hit({ hit, children }: HitProps): JSX.Element;

package/dist/esm/NoResultsScreen.d.ts

@@ -1,6 +1,14 @@
 /// <reference types="react" />
-import { ScreenStateProps } from './ScreenState';
-import { InternalDocSearchHit } from './types';
-declare type NoResultsScreenProps = ScreenStateProps<InternalDocSearchHit>;
-export declare function NoResultsScreen(props: NoResultsScreenProps): JSX.Element;
+import type { ScreenStateProps } from './ScreenState';
+import type { InternalDocSearchHit } from './types';
+export declare type NoResultsScreenTranslations = Partial<{
+    noResultsText: string;
+    suggestedQueryText: string;
+    openIssueText: string;
+    openIssueLinkText: string;
+}>;
+declare type NoResultsScreenProps = Omit<ScreenStateProps<InternalDocSearchHit>, 'translations'> & {
+    translations?: NoResultsScreenTranslations;
+};
+export declare function NoResultsScreen({ translations, ...props }: NoResultsScreenProps): JSX.Element;
 export {};