@nice-digital/global-nav 5.0.940 → 7.0.930

package/lib/Header/OldIEMessage/OldIEMessage.js

@@ -1,72 +1,70 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _react = _interopRequireWildcard(require("react"));
-
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = OldIEMessage;
+var _react = _interopRequireDefault(require("react"));
+var _ie = require("./ie");
 var _OldIEMessageModule = _interopRequireDefault(require("./OldIEMessage.module.scss"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var OldIEMessage = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(OldIEMessage, _Component);
-
-  function OldIEMessage() {
-    return _Component.apply(this, arguments) || this;
+var _jsxRuntime = require("react/jsx-runtime");
+function OldIEMessage() {
+  var ieVersion = (0, _ie.getIEVersion)();
+  if (!ieVersion || ieVersion > 10) {
+    return null;
   }
-
-  var _proto = OldIEMessage.prototype;
-
-  // See https://gist.github.com/padolsey/527683#gistcomment-768383
-  _proto.getIEVersion = function getIEVersion() {
-    if (typeof document === "undefined") return void 0;
-    var tmp = (document["documentMode"] || document.attachEvent) && "ev",
-        msie = tmp && (tmp = window[tmp + "al"]) && tmp("/*@cc_on 1;@*/") && +((/msie (\d+)/i.exec(navigator.userAgent) || [])[1] || 0);
-    return msie || void 0;
-  };
-
-  _proto.render = function render() {
-    var ieVersion = this.getIEVersion();
-
-    if (!ieVersion || ieVersion > 10) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react["default"].createElement("aside", {
-      className: _OldIEMessageModule["default"].container
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: _OldIEMessageModule["default"].alert
-    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Browser support"), ieVersion === 10 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Your browser, Internet Explorer (", /*#__PURE__*/_react["default"].createElement("abbr", {
-      title: "Internet Explorer"
-    }, "IE"), ") 10, will reach end of support on", " ", /*#__PURE__*/_react["default"].createElement("strong", null, /*#__PURE__*/_react["default"].createElement("time", {
-      dateTime: "2020-01-31"
-    }, "January 31, 2020")), ". Microsoft will no longer issue security patches from this date and your browser may become insecure. You can learn more about this in Microsoft\u2019s", " ", /*#__PURE__*/_react["default"].createElement("a", {
-      href: "https://support.microsoft.com/en-gb/help/17454/lifecycle-faq-internet-explorer"
-    }, "Internet Explorer Lifecycle Policy FAQ"), "."), /*#__PURE__*/_react["default"].createElement("p", null, "NICE will also stop supporting", " ", /*#__PURE__*/_react["default"].createElement("abbr", {
-      title: "Internet Explorer"
-    }, "IE"), " 10 from", " ", /*#__PURE__*/_react["default"].createElement("time", {
-      dateTime: "2020-01-31"
-    }, "January 31, 2020"), ". This means NICE websites and services may stop functioning correctly in", " ", /*#__PURE__*/_react["default"].createElement("abbr", {
-      title: "Internet Explorer"
-    }, "IE"), " 10 after this date.")) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Your web browser, Internet Explorer (", /*#__PURE__*/_react["default"].createElement("abbr", {
-      title: "Internet Explorer"
-    }, "IE"), ") ", ieVersion, ", is out of date. For the best experience, please update your browser to the latest version.")), /*#__PURE__*/_react["default"].createElement("p", null, "We recommend you upgrade to a newer browser such as", " ", /*#__PURE__*/_react["default"].createElement("a", {
-      href: "https://technet.microsoft.com/en-us/microsoft-edge"
-    }, "Microsoft Edge"), ", ", /*#__PURE__*/_react["default"].createElement("a", {
-      href: "https://www.google.com/chrome/"
-    }, "Google Chrome"), " ", "or\xA0", /*#__PURE__*/_react["default"].createElement("a", {
-      href: "https://www.mozilla.org/en-GB/firefox/new/"
-    }, "Firefox"), ".")));
-  };
-
-  return OldIEMessage;
-}(_react.Component);
-
-exports["default"] = OldIEMessage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+    className: _OldIEMessageModule.default.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _OldIEMessageModule.default.alert,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: "Browser support"
+      }), ieVersion === 10 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["Your browser, Internet Explorer (", /*#__PURE__*/(0, _jsxRuntime.jsx)("abbr", {
+            title: "Internet Explorer",
+            children: "IE"
+          }), ") 10, will reach end of support on", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
+              dateTime: "2020-01-31",
+              children: "January 31, 2020"
+            })
+          }), ". Microsoft will no longer issue security patches from this date and your browser may become insecure. You can learn more about this in Microsoft\u2019s", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: "https://support.microsoft.com/en-gb/help/17454/lifecycle-faq-internet-explorer",
+            children: "Internet Explorer Lifecycle Policy FAQ"
+          }), "."]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["NICE will also stop supporting", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("abbr", {
+            title: "Internet Explorer",
+            children: "IE"
+          }), " 10 from", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
+            dateTime: "2020-01-31",
+            children: "January 31, 2020"
+          }), ". This means NICE websites and services may stop functioning correctly in", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("abbr", {
+            title: "Internet Explorer",
+            children: "IE"
+          }), " 10 after this date."]
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["Your web browser, Internet Explorer (", /*#__PURE__*/(0, _jsxRuntime.jsx)("abbr", {
+            title: "Internet Explorer",
+            children: "IE"
+          }), ") ", ieVersion, ", is out of date. For the best experience, please update your browser to the latest version."]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        children: ["We recommend you upgrade to a newer browser such as", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: "https://technet.microsoft.com/en-us/microsoft-edge",
+          children: "Microsoft Edge"
+        }), ", ", /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: "https://www.google.com/chrome/",
+          children: "Google Chrome"
+        }), " or\xA0", /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: "https://www.mozilla.org/en-GB/firefox/new/",
+          children: "Firefox"
+        }), "."]
+      })]
+    })
+  });
+}

package/lib/Header/OldIEMessage/ie.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIEVersion = void 0;
+// See https://gist.github.com/padolsey/527683#gistcomment-768383
+var getIEVersion = function getIEVersion() {
+  if (typeof document === "undefined") return void 0;
+  var tmp = (document["documentMode"] || document.attachEvent) && "ev",
+    msie = tmp && (tmp = window[tmp + "al"]) && tmp("/*@cc_on 1;@*/") && +((/msie (\d+)/i.exec(navigator.userAgent) || [])[1] || 0);
+  return msie || void 0;
+};
+exports.getIEVersion = getIEVersion;

package/lib/Header/OldIEMessage/index.js

@@ -1,10 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _OldIEMessage = _interopRequireDefault(require("./OldIEMessage"));
-
-exports["default"] = _OldIEMessage["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _OldIEMessage.default;
+  }
+});
+var _OldIEMessage = _interopRequireDefault(require("./OldIEMessage"));

package/lib/Header/Search/Autocomplete/Autocomplete.js

@@ -1,225 +1,200 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.rateLimitWait = exports["default"] = void 0;
-
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Autocomplete;
+exports.rateLimitWait = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
-
+var _react2 = require("@headlessui/react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _useDebouncedValue3 = require("@mantine/hooks/esm/use-debounced-value/use-debounced-value");
 var _AutocompleteModule = _interopRequireDefault(require("./Autocomplete.module.scss"));
-
 var _suggester = require("./suggester");
-
-var _utils = require("./../../../utils");
-
+var _useIsClient = require("../../../hooks/useIsClient");
 var _tracker = require("./../../../tracker");
-
+var _utils = require("./../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** The maximum number of autocomplete results to return */var maxResults = 5;
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/**
- * Debounce
- * See http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
- *
- * @param      {Function}  func       The function to debounce
- * @param      {Integer}  execAsap   Whether to execute the function now
- * @param      {Integer}  threshold  The detection period, in milliseconds
- * @param      {Object}  scope  The context for the debounced function
- * @return     {Function}  { The debounced function }
- */
-var debounce = function debounce(func, execAsap, threshold, scope) {
-  if (execAsap === void 0) {
-    execAsap = false;
-  }
-
-  if (threshold === void 0) {
-    threshold = 100;
-  }
+/** The minimum number of characters that should be entered before the autocomplete will attempt to suggest options. */
+var minAutocompleteLength = 3;
 
-  if (scope === void 0) {
-    scope = null;
-  }
-
-  var timeout;
-  return function debounced() {
-    var context = scope || this,
-        args = arguments;
-
-    function delayed() {
-      if (!execAsap) func.apply(context, args);
-      timeout = null;
-    }
-
-    if (timeout) clearTimeout(timeout);else if (execAsap) func.apply(context, args);
-    timeout = setTimeout(delayed, threshold);
-  };
-};
-/** The maximum number of autocomplete results to return */
-
-
-var maxResults = 5;
 /** Delay in millieconds before loading results */
-
 var rateLimitWait = 100;
 exports.rateLimitWait = rateLimitWait;
-
-var inputValueTemplate = function inputValueTemplate(suggestion) {
-  if (!suggestion || !suggestion.Title) return "";
-  return suggestion && suggestion.Title;
-},
-    suggestionTemplateDefault = function suggestionTemplateDefault(suggestion) {
+var suggestionTemplateDefault = function suggestionTemplateDefault(suggestion) {
   if (!suggestion || !suggestion.Link) return "";
-  return "<a href=\"" + suggestion.Link + "\">" + (suggestion.TitleHtml || suggestion.Title) + "</a>";
+  return "<a href=\"".concat(suggestion.Link, "\">").concat(suggestion.TitleHtml || suggestion.Title, "</a>");
 };
-
-var Autocomplete = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Autocomplete, _Component);
-
-  function Autocomplete(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-    _this.state = {
-      canUseDOM: false
+function Autocomplete(props) {
+  var query = props.query,
+    onNavigating = props.onNavigating,
+    placeholder = props.placeholder,
+    suggestionTemplate = props.suggestionTemplate,
+    _props$source = props.source,
+    sourceProp = _props$source === void 0 ? false : _props$source;
+  var isClient = (0, _useIsClient.useIsClient)(),
+    _useState = (0, _react.useState)(query || ""),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    queryText = _useState2[0],
+    setQueryText = _useState2[1],
+    _useDebouncedValue = (0, _useDebouncedValue3.useDebouncedValue)(queryText, rateLimitWait),
+    _useDebouncedValue2 = (0, _slicedToArray2.default)(_useDebouncedValue, 1),
+    debouncedQueryText = _useDebouncedValue2[0],
+    _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    suggestions = _useState4[0],
+    setSuggestions = _useState4[1],
+    inputChangeHandler = function inputChangeHandler(event) {
+      setQueryText(event.target.value);
     };
-    return _this;
-  }
-
-  var _proto = Autocomplete.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.setState({
-      canUseDOM: true
-    });
+  var onValueChangeHandler = function onValueChangeHandler(suggestion) {
+    if (!suggestion) return;
+    var element = document.querySelector(".autocomplete__option a[href='" + suggestion.Link + "']"),
+      inputText = document.getElementById("autocomplete").value;
+    var eventCallback = function eventCallback() {
+      var onNavigatingCallback = (0, _utils.getCallbackFunction)(onNavigating);
+      if (onNavigatingCallback) {
+        onNavigatingCallback({
+          element: element,
+          href: suggestion.Link
+        });
+      } else window.location.assign(suggestion.Link);
+    };
+    if (suggestion.TypeAheadType) {
+      (0, _tracker.trackEvent)("Search - Typeahead select", "Selected: " + suggestion.TypeAheadType, (suggestion.Title + " | " + inputText).toLowerCase(), null, suggestion.Link, eventCallback);
+    } else {
+      (0, _tracker.trackEvent)("Search", "Typeahead select", suggestion.Title + " | " + inputText, null, suggestion.Link, eventCallback);
+    }
   };
-
-  _proto.onConfirm = function onConfirm(suggestion) {
-    if (suggestion) {
-      var selectedEl = document.querySelectorAll(".autocomplete__option a[href='" + suggestion.Link + "']"); //This var is declared outside the eventcallback function to avoid
-      //loosing the component scope due to hoisting
-      // eslint-disable-next-line react/prop-types
-
-      var onNavigating = this.props.onNavigating;
-
-      var eventCallback = function eventCallback() {
-        var onNavigatingCallback = (0, _utils.getCallbackFunction)(onNavigating);
-
-        if (onNavigatingCallback) {
-          onNavigatingCallback({
-            element: selectedEl,
-            href: suggestion.Link
-          });
-        } else window.location.href = suggestion.Link;
-      };
-
-      if (suggestion.TypeAheadType) {
-        (0, _tracker.trackEvent)("Search - Typeahead select", "Selected: " + suggestion.TypeAheadType, (suggestion.Title + " | " + document.getElementById("autocomplete").value).toLowerCase(), null, suggestion.Link, eventCallback);
-      } else {
-        (0, _tracker.trackEvent)("Search", "Typeahead select", suggestion.Title + " | " + document.getElementById("autocomplete").value, null, suggestion.Link, eventCallback);
-      }
+  var suggestionClickHandler = function suggestionClickHandler(suggestion) {
+    setQueryText(suggestion.Title);
+  };
+  var suggestionKeyDownHandler = function suggestionKeyDownHandler(event, suggestion) {
+    if (event.key === "Enter") {
+      suggestionClickHandler(suggestion);
     }
   };
-
-  _proto.suggest = function suggest(query, populateResults) {
-    var _this2 = this;
-
-    if (this.props.source === false || query === "" || query === this.props.placeholder) return;
+  (0, _react.useEffect)(function () {
+    if (sourceProp === false || debouncedQueryText === "" || debouncedQueryText.length < minAutocompleteLength) {
+      setSuggestions([]);
+      return;
+    }
     var source;
-
-    if (Array.isArray(this.props.source)) {
-      source = this.props.source;
+    if (Array.isArray(sourceProp)) {
+      source = sourceProp;
     }
-
-    if (typeof this.props.source === "string" && this.props.source.indexOf("/") === -1) {
-      source = window[this.props.source];
+    if (typeof sourceProp === "string" && sourceProp.indexOf("/") === -1) {
+      source = window[sourceProp];
       if (!source) return;
     }
-
     if (source) {
-      populateResults((0, _suggester.suggester)(source, query, maxResults));
+      setSuggestions((0, _suggester.suggester)(source, debouncedQueryText, maxResults));
       return;
-    } // Default to a URL for asynchronously loading suggestions from the server
-
+    }
 
-    fetch("" + this.props.source + (this.props.source.indexOf("?") === -1 ? "?" : "&") + "q=" + query).then(function (response) {
-      (0, _newArrowCheck2["default"])(this, _this2);
+    // Default to a URL for asynchronously loading suggestions from the server
+    fetch("".concat(sourceProp).concat(sourceProp.indexOf("?") === -1 ? "?" : "&", "q=").concat(debouncedQueryText)).then(function (response) {
       return response.json();
-    }.bind(this)).then(function (data) {
-      (0, _newArrowCheck2["default"])(this, _this2);
-      populateResults(data.slice(0, maxResults));
-    }.bind(this));
-  };
-
-  _proto.render = function render() {
-    var templates = {
-      inputValue: inputValueTemplate,
-      suggestion: this.props.suggestionTemplate || suggestionTemplateDefault
-    };
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _AutocompleteModule["default"].ac
-    }, !this.props.source || !this.state.canUseDOM ? /*#__PURE__*/_react["default"].createElement("div", {
-      className: "autocomplete__wrapper"
-    }, /*#__PURE__*/_react["default"].createElement("input", {
-      type: "search",
-      id: "autocomplete",
-      name: "q",
-      className: "autocomplete__input autocomplete__input--default",
-      placeholder: this.props.placeholder,
-      defaultValue: this.props.query,
-      "data-hj-allow": "",
-      maxLength: 512
-    })) : /*#__PURE__*/_react["default"].createElement(_react2["default"], {
-      id: "autocomplete",
-      name: "q",
-      placeholder: this.props.placeholder,
-      displayMenu: (0, _utils.isIosDevice)() ? "inline" : "overlay",
-      minLength: 3,
-      source: debounce(this.suggest, false, rateLimitWait, this),
-      templates: templates,
-      onConfirm: function (s) {
-        this.onConfirm(s);
-      }.bind(this),
-      confirmOnBlur: false,
-      showNoOptionsFound: false,
-      defaultValue: this.props.query,
-      ref: function ref(acElement) {
-        // This relies on an inner implementation detail of the autocomplete component, can we do this in a better way?
-        var inputEl = acElement && acElement.elementReferences && acElement.elementReferences[-1];
-
-        if (inputEl) {
-          inputEl.setAttribute("data-hj-allow", "");
-          inputEl.setAttribute("maxlength", 512);
-        }
-      }
-    }));
-  };
-
-  return Autocomplete;
-}(_react.Component);
-
-exports["default"] = Autocomplete;
+    }).then(function (data) {
+      setSuggestions(data.slice(0, maxResults));
+    });
+  }, [debouncedQueryText]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _AutocompleteModule.default.ac,
+    children: !sourceProp || !isClient ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "autocomplete__wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "search",
+        id: "autocomplete",
+        name: "q",
+        className: "autocomplete__input autocomplete__input--default",
+        placeholder: placeholder,
+        defaultValue: query,
+        "data-hj-allow": "",
+        maxLength: 512
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react2.Combobox, {
+      value: queryText,
+      onChange: onValueChangeHandler,
+      nullable: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Combobox.Label, {
+        className: "visually-hidden",
+        children: placeholder
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Combobox.Input, {
+        id: "autocomplete",
+        name: "q",
+        className: "autocomplete__input autocomplete__input--default",
+        autoComplete: "off",
+        maxLength: 512,
+        "data-hj-allow": "",
+        placeholder: placeholder,
+        onChange: inputChangeHandler
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react2.Combobox.Options, {
+        className: "autocomplete__menu autocomplete__menu--overlay",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Combobox.Option, {
+          as: _react.Fragment,
+          value: {
+            Link: "/search?q=".concat(queryText),
+            Title: queryText
+          },
+          children: function children(_ref) {
+            var active = _ref.active;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              className: "visually-hidden autocomplete__option ".concat(active ? "autocomplete__option--focused" : ""),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: "/search?q=".concat(queryText),
+                children: queryText.length === 0 ? "Empty search" : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: ["Search for ", /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
+                    children: queryText
+                  })]
+                })
+              })
+            });
+          }
+        }), suggestions.map(function (suggestion) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Combobox.Option, {
+            value: suggestion,
+            as: _react.Fragment,
+            children: function children(_ref2) {
+              var active = _ref2.active;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                className: "autocomplete__option ".concat(active ? "autocomplete__option--focused" : ""),
+                dangerouslySetInnerHTML: {
+                  __html: (suggestionTemplate || suggestionTemplateDefault)(suggestion)
+                },
+                onClick: function onClick() {
+                  return suggestionClickHandler(suggestion);
+                },
+                onKeyDown: function onKeyDown(event) {
+                  return suggestionKeyDownHandler(event, suggestion);
+                },
+                role: "option",
+                tabIndex: 0,
+                "aria-selected": active ? "true" : "false"
+              });
+            }
+          }, suggestion.Title);
+        })]
+      })]
+    })
+  });
+}
 Autocomplete.propTypes = {
-  source: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    Title: _propTypes["default"].string.isRequired,
-    TitleHtml: _propTypes["default"].string,
-    TypeAheadType: _propTypes["default"].string,
-    Link: _propTypes["default"].string.isRequired
+  source: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
+    Title: _propTypes.default.string.isRequired,
+    TitleHtml: _propTypes.default.string,
+    TypeAheadType: _propTypes.default.string,
+    Link: _propTypes.default.string.isRequired
   }))]),
-  suggestionTemplate: _propTypes["default"].func,
-  placeholder: _propTypes["default"].string,
-  query: _propTypes["default"].string,
-  onNavigating: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func])
-};
-Autocomplete.defaultProps = {
-  source: false
+  suggestionTemplate: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  query: _propTypes.default.string,
+  onNavigating: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
 };

package/lib/Header/Search/Autocomplete/Autocomplete.module.scss

@@ -14,7 +14,15 @@
     .autocomplete__wrapper {
       position: relative;
     }
-
+    .visually-hidden {
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
     .autocomplete__hint,
     .autocomplete__input {
       -webkit-appearance: none;

package/lib/Header/Search/Autocomplete/index.js

@@ -1,10 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
-
-exports["default"] = _Autocomplete["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Autocomplete.default;
+  }
+});
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));