@docsearch/react 3.5.2 → 3.6.0

package/dist/esm/DocSearchButton.js

@@ -60,9 +60,50 @@ export var DocSearchButton = React.forwardRef(function (_ref, ref) {
     className: "DocSearch-Button-Placeholder"
   }, buttonText)), /*#__PURE__*/React.createElement("span", {
     className: "DocSearch-Button-Keys"
-  }, key !== null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("kbd", {
-    className: "DocSearch-Button-Key"
-  }, key === ACTION_KEY_DEFAULT ? /*#__PURE__*/React.createElement(ControlKeyIcon, null) : key), /*#__PURE__*/React.createElement("kbd", {
-    className: "DocSearch-Button-Key"
+  }, key !== null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DocSearchButtonKey, {
+    reactsToKey: key === ACTION_KEY_DEFAULT ? ACTION_KEY_DEFAULT : 'Meta'
+  }, key === ACTION_KEY_DEFAULT ? /*#__PURE__*/React.createElement(ControlKeyIcon, null) : key), /*#__PURE__*/React.createElement(DocSearchButtonKey, {
+    reactsToKey: "k"
   }, "K"))));
-});
+});
+
+function DocSearchButtonKey(_ref2) {
+  var reactsToKey = _ref2.reactsToKey,
+      children = _ref2.children;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isKeyDown = _useState4[0],
+      setIsKeyDown = _useState4[1];
+
+  useEffect(function () {
+    if (!reactsToKey) {
+      return undefined;
+    }
+
+    function handleKeyDown(e) {
+      if (e.key === reactsToKey) {
+        setIsKeyDown(true);
+      }
+    }
+
+    function handleKeyUp(e) {
+      if (e.key === reactsToKey || // keyup doesn't fire when Command is held down,
+      // workaround is to mark key as also released when Command is released
+      // See https://stackoverflow.com/a/73419500
+      e.key === 'Meta') {
+        setIsKeyDown(false);
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [reactsToKey]);
+  return /*#__PURE__*/React.createElement("kbd", {
+    className: isKeyDown ? 'DocSearch-Button-Key DocSearch-Button-Key--pressed' : 'DocSearch-Button-Key'
+  }, children);
+}

package/dist/esm/DocSearchModal.js

@@ -315,7 +315,7 @@ export function DocSearchModal(_ref) {
       document.body.classList.remove('DocSearch--active'); // IE11 doesn't support `scrollTo` so we check that the method exists
       // first.
 
-      (_window$scrollTo = (_window = window).scrollTo) === null || _window$scrollTo === void 0 ? void 0 : _window$scrollTo.call(_window, 0, initialScrollY);
+      (_window$scrollTo = (_window = window).scrollTo) === null || _window$scrollTo === void 0 || _window$scrollTo.call(_window, 0, initialScrollY);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React.useEffect(function () {

package/dist/esm/SearchBox.d.ts

@@ -7,6 +7,7 @@ export declare type SearchBoxTranslations = Partial<{
     resetButtonAriaLabel: string;
     cancelButtonText: string;
     cancelButtonAriaLabel: string;
+    searchInputLabel: string;
 }>;
 interface SearchBoxProps extends AutocompleteApi<InternalDocSearchHit, React.FormEvent, React.MouseEvent, React.KeyboardEvent> {
     state: AutocompleteState<InternalDocSearchHit>;

package/dist/esm/SearchBox.js

@@ -23,7 +23,9 @@ export function SearchBox(_ref) {
       _translations$cancelB = translations.cancelButtonText,
       cancelButtonText = _translations$cancelB === void 0 ? 'Cancel' : _translations$cancelB,
       _translations$cancelB2 = translations.cancelButtonAriaLabel,
-      cancelButtonAriaLabel = _translations$cancelB2 === void 0 ? 'Cancel' : _translations$cancelB2;
+      cancelButtonAriaLabel = _translations$cancelB2 === void 0 ? 'Cancel' : _translations$cancelB2,
+      _translations$searchI = translations.searchInputLabel,
+      searchInputLabel = _translations$searchI === void 0 ? 'Search' : _translations$searchI;
 
   var _props$getFormProps = props.getFormProps({
     inputElement: props.inputRef.current
@@ -48,7 +50,9 @@ export function SearchBox(_ref) {
     onReset: onReset
   }, /*#__PURE__*/React.createElement("label", _extends({
     className: "DocSearch-MagnifierLabel"
-  }, props.getLabelProps()), /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement("div", {
+  }, props.getLabelProps()), /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement("span", {
+    className: "DocSearch-VisuallyHiddenForAccessibility"
+  }, searchInputLabel)), /*#__PURE__*/React.createElement("div", {
     className: "DocSearch-LoadingIndicator"
   }, /*#__PURE__*/React.createElement(LoadingIcon, null)), /*#__PURE__*/React.createElement("input", _extends({
     className: "DocSearch-Input",

package/dist/esm/__tests__/api.test.js

@@ -43,22 +43,15 @@ function noResultSearch(_queries, _requestOptions) {
 }
 
 describe('api', function () {
-  var container;
   var docSearchSelector = '.DocSearch';
-  beforeEach(function () {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-  afterEach(function () {
-    document.body.removeChild(container);
-    container = null;
-  });
   it('renders with minimal parameters', function () {
     render( /*#__PURE__*/React.createElement(DocSearch, null));
     expect(document.querySelector(docSearchSelector)).toBeInTheDocument();
   });
   describe('translations', function () {
     it('overrides the default DocSearchButton text', function () {
+      var _document$querySelect, _document$querySelect2;
+
       render( /*#__PURE__*/React.createElement(DocSearch, {
         translations: {
           button: {
@@ -68,8 +61,8 @@ describe('api', function () {
         }
       }));
       expect(document.querySelector(docSearchSelector)).toBeInTheDocument();
-      expect(document.querySelector('.DocSearch-Button-Placeholder').innerHTML).toBe('Recherche');
-      expect(document.querySelector('.DocSearch-Button').getAttribute('aria-label')).toBe('Recherche');
+      expect((_document$querySelect = document.querySelector('.DocSearch-Button-Placeholder')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.innerHTML).toBe('Recherche');
+      expect((_document$querySelect2 = document.querySelector('.DocSearch-Button')) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getAttribute('aria-label')).toBe('Recherche');
     });
     it('overrides the default DocSearchModal startScreen text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -202,6 +195,9 @@ describe('api', function () {
       }, _callee5);
     })));
     it('overrides the default DocSearchModal searchbox text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+      var _document$querySelect3, _document$querySelect4, _document$querySelect5, _document$querySelect6;
+
+      var searchInputLabel;
       return regeneratorRuntime.wrap(function _callee7$(_context7) {
         while (1) switch (_context7.prev = _context7.next) {
           case 0:
@@ -212,13 +208,13 @@ describe('api', function () {
                     resetButtonTitle: 'Effacer',
                     resetButtonAriaLabel: 'Effacer',
                     cancelButtonText: 'Annuler',
-                    cancelButtonAriaLabel: 'Annuler'
+                    cancelButtonAriaLabel: 'Annuler',
+                    searchInputLabel: 'Recherche'
                   }
                 }
               }
             }));
-            expect(document.querySelector(docSearchSelector)).toBeInTheDocument();
-            _context7.next = 4;
+            _context7.next = 3;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
               return regeneratorRuntime.wrap(function _callee6$(_context6) {
                 while (1) switch (_context6.prev = _context6.next) {
@@ -239,13 +235,16 @@ describe('api', function () {
               }, _callee6);
             })));
 
-          case 4:
-            expect(document.querySelector('.DocSearch-Cancel').innerHTML).toBe('Annuler');
-            expect(document.querySelector('.DocSearch-Cancel').getAttribute('aria-label')).toBe('Annuler');
-            expect(document.querySelector('.DocSearch-Reset').getAttribute('title')).toBe('Effacer');
-            expect(document.querySelector('.DocSearch-Reset').getAttribute('aria-label')).toBe('Effacer');
+          case 3:
+            searchInputLabel = document.querySelector('.DocSearch-MagnifierLabel');
+            expect(document.querySelector(docSearchSelector)).toBeInTheDocument();
+            expect((_document$querySelect3 = document.querySelector('.DocSearch-Cancel')) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.innerHTML).toBe('Annuler');
+            expect((_document$querySelect4 = document.querySelector('.DocSearch-Cancel')) === null || _document$querySelect4 === void 0 ? void 0 : _document$querySelect4.getAttribute('aria-label')).toBe('Annuler');
+            expect((_document$querySelect5 = document.querySelector('.DocSearch-Reset')) === null || _document$querySelect5 === void 0 ? void 0 : _document$querySelect5.getAttribute('title')).toBe('Effacer');
+            expect((_document$querySelect6 = document.querySelector('.DocSearch-Reset')) === null || _document$querySelect6 === void 0 ? void 0 : _document$querySelect6.getAttribute('aria-label')).toBe('Effacer');
+            expect(searchInputLabel === null || searchInputLabel === void 0 ? void 0 : searchInputLabel.textContent).toBe('Recherche');
 
-          case 8:
+          case 10:
           case "end":
             return _context7.stop();
         }
@@ -449,7 +448,7 @@ describe('api', function () {
             expect(screen.getByText(/No results for/)).toBeInTheDocument();
             link = document.querySelector('.DocSearch-Help a');
             expect(link).toBeInTheDocument();
-            expect(link.getAttribute('href')).toBe('https://github.com/algolia/docsearch/issues/new?title=q');
+            expect(link === null || link === void 0 ? void 0 : link.getAttribute('href')).toBe('https://github.com/algolia/docsearch/issues/new?title=q');
 
           case 9:
           case "end":

package/dist/esm/icons/SearchIcon.js

@@ -4,7 +4,8 @@ export function SearchIcon() {
     width: "20",
     height: "20",
     className: "DocSearch-Search-Icon",
-    viewBox: "0 0 20 20"
+    viewBox: "0 0 20 20",
+    "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",
     stroke: "currentColor",

package/dist/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.5.2";
+export declare const version = "3.6.0";

package/dist/esm/version.js

@@ -1 +1 @@
-export var version = '3.5.2';
+export var version = '3.6.0';