@nice-digital/global-nav 5.0.940 → 7.0.930

package/lib/hooks/useEscapeKeydown.js

@@ -1,40 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 var _react = require("react");
-
 function useEscapeKeydown(action) {
-  var _this = this;
-
   var keydownRef = (0, _react.useRef)(null);
   var ESCAPE_KEYS = ["27", "Escape", "Esc"];
   var handleKeydown = (0, _react.useCallback)(function (event) {
-    (0, _newArrowCheck2["default"])(this, _this);
-
     if (ESCAPE_KEYS.includes(event.key)) {
       action(true);
     }
-  }.bind(this), [action]);
+  }, [action]);
   (0, _react.useEffect)(function () {
-    var _this2 = this;
-
-    (0, _newArrowCheck2["default"])(this, _this);
     document.addEventListener("keydown", handleKeydown, true);
     return function () {
-      (0, _newArrowCheck2["default"])(this, _this2);
       document.removeEventListener("keydown", handleKeydown, true);
-    }.bind(this);
-  }.bind(this), [handleKeydown]);
+    };
+  }, [handleKeydown]);
   return {
     keydownRef: keydownRef
   };
 }
-
 var _default = useEscapeKeydown;
-exports["default"] = _default;
+exports.default = _default;

package/lib/hooks/useIsClient.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsClient = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useIsClient = function useIsClient() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isClient = _useState2[0],
+    setClient = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setClient(true);
+  }, []);
+  return isClient;
+};
+exports.useIsClient = useIsClient;

package/lib/index.js

@@ -1,17 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Footer", {
+  enumerable: true,
+  get: function get() {
+    return _Footer.default;
+  }
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _Header.default;
+  }
+});
+Object.defineProperty(exports, "Main", {
+  enumerable: true,
+  get: function get() {
+    return _Main.default;
+  }
+});
 var _Header = _interopRequireDefault(require("./Header"));
-
-exports.Header = _Header["default"];
-
 var _Footer = _interopRequireDefault(require("./Footer"));
-
-exports.Footer = _Footer["default"];
-
-var _Main = _interopRequireDefault(require("./Main"));
-
-exports.Main = _Main["default"];
+var _Main = _interopRequireDefault(require("./Main"));

package/lib/renderer.js

@@ -1,78 +1,69 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.renderHeader = exports.renderFooter = exports.headerId = exports.footerId = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = require("react-dom");
-
+var _client = require("react-dom/client");
 var _Header = _interopRequireDefault(require("./Header"));
-
 var _Footer = _interopRequireDefault(require("./Footer"));
-
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var headerId = "global-nav-header";
 exports.headerId = headerId;
 var footerId = "global-nav-footer";
 exports.footerId = footerId;
-
 var createAndAttachDiv = function createAndAttachDiv(id, attachAtStart) {
   var divElement = document.createElement("div");
   divElement.setAttribute("id", id);
   if (attachAtStart) document.body.insertBefore(divElement, document.body.firstChild);else document.body.appendChild(divElement);
   return divElement;
-}; // Callback can either be a reference to a function or a string name of a global function
-
+};
 
+// Callback can either be a reference to a function or a string name of a global function
 var ensureCallback = function ensureCallback(callback) {
   if (callback) {
     callback = typeof callback === "function" ? callback : window[callback];
-
     if (typeof callback === "function") {
       return callback;
     }
   }
-
   return null;
 };
-
 var renderHeader = function renderHeader() {
   var config = window.global_nav_config || {};
-
   if (config.header !== false) {
     config.header = config.header || {};
     var headerElement = document.getElementById(headerId) || createAndAttachDiv(headerId, true);
     var onRendering = ensureCallback(config.header.onRendering);
-
     if (onRendering) {
       onRendering.call(window, headerElement);
     }
-
-    (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], (0, _extends2["default"])({
+    var root = (0, _client.createRoot)(headerElement),
+      _onRendered = ensureCallback(config.header.onRendered);
+    root.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, _objectSpread(_objectSpread({
       service: config.service
-    }, config.header)), headerElement, function () {
-      var onRendered = ensureCallback(config.header.onRendered);
-      onRendered && onRendered.call(window, headerElement);
-    });
+    }, config.header), {}, {
+      onRendered: function onRendered() {
+        _onRendered && _onRendered(headerElement);
+      }
+    })));
   }
 };
-
 exports.renderHeader = renderHeader;
-
 var renderFooter = function renderFooter() {
   var config = window.global_nav_config || {};
-
   if (config.footer !== false) {
     config.footer = config.footer || {};
     var footerElement = document.getElementById(footerId) || createAndAttachDiv(footerId, false);
-    (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], (0, _extends2["default"])({
+    var root = (0, _client.createRoot)(footerElement);
+    root.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, _objectSpread({
       service: config.service
-    }, config.footer)), footerElement);
+    }, config.footer)));
   }
 };
-
 exports.renderFooter = renderFooter;

package/lib/tracker/index.js

@@ -1,6 +1,8 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.trackEvent = exports.headerClickEventAction = exports.footerClickEventAction = exports.eventTimeout = exports.eventName = exports.ensureDataLayer = exports.defaultEventCategory = void 0;
 var eventTimeout = 2000;
 exports.eventTimeout = eventTimeout;
@@ -12,10 +14,10 @@ var headerClickEventAction = "Tophat click";
 exports.headerClickEventAction = headerClickEventAction;
 var footerClickEventAction = "Footer click";
 exports.footerClickEventAction = footerClickEventAction;
-
 var ensureDataLayer = function ensureDataLayer() {
   window.dataLayer = window.dataLayer || [];
 };
+
 /**
  * Pushes an event object to the GTM dataLayer
  *
@@ -26,23 +28,11 @@ var ensureDataLayer = function ensureDataLayer() {
  * @param {string} destinationUrl The optional link destination
  * @param {Function} callback The callback function to be called when the GTM event has fired
  */
-
-
 exports.ensureDataLayer = ensureDataLayer;
-
-var trackEvent = function trackEvent(category, action, label, value, destinationUrl, callback) {
-  if (value === void 0) {
-    value = null;
-  }
-
-  if (destinationUrl === void 0) {
-    destinationUrl = null;
-  }
-
-  if (callback === void 0) {
-    callback = null;
-  }
-
+var trackEvent = function trackEvent(category, action, label) {
+  var value = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var destinationUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  var callback = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
   ensureDataLayer();
   var dataLayerEvent = {
     event: eventName,
@@ -50,29 +40,22 @@ var trackEvent = function trackEvent(category, action, label, value, destination
     eventAction: action,
     eventLabel: label
   };
-
   if (value) {
     dataLayerEvent.eventValue = value;
   }
-
   if (destinationUrl) {
     dataLayerEvent.destinationUrl = destinationUrl;
   }
-
   if (callback) {
     var callbackTimeout;
-
     var wrappedCallback = function wrappedCallback() {
       clearTimeout(callbackTimeout);
       callback();
     };
-
     callbackTimeout = setTimeout(wrappedCallback, eventTimeout);
     dataLayerEvent.eventCallback = wrappedCallback;
     dataLayerEvent.eventTimeout = eventTimeout;
   }
-
   window.dataLayer.push(dataLayerEvent);
 };
-
 exports.trackEvent = trackEvent;

package/lib/utils.js

@@ -1,9 +1,10 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getCallbackFunction = getCallbackFunction;
 exports.isIosDevice = isIosDevice;
-
 /**
  * Test userAgent to see if we're on iOS
  * @returns {boolean}
@@ -11,22 +12,18 @@ exports.isIosDevice = isIosDevice;
 function isIosDevice() {
   return navigator && typeof navigator !== "undefined" && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));
 }
+
 /**
  * return callback function if it is available
  * @returns {function || undefined}
  */
-
-
 function getCallbackFunction(funcOrFuncName) {
   if (typeof funcOrFuncName === "function") {
     return funcOrFuncName;
   }
-
   var fn = window[funcOrFuncName];
-
   if (typeof fn === "function") {
     return fn;
   }
-
   return undefined;
 }

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@nice-digital/global-nav",
-  "version": "5.0.940",
+  "version": "7.0.930",
   "description": "Global header and footer components for NICE digital services",
   "main": "lib/index.js",
   "types": "./types.d.ts",
   "scripts": {
     "// LOCAL DEV": "",
-    "start": "webpack serve --mode development --hot --inline --config webpack.config.js",
-    "start:nohot": "cross-env HOT=false webpack serve --mode development",
+    "start": "webpack serve --mode development",
     "// PRODUCTION BUILDS": "",
-    "build": "webpack --mode=production --config webpack.config.prod.js",
+    "build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.prod.js",
     "es5ify": "cross-env NODE_ENV=production babel src -d lib --extensions \".js\",\".jsx\",\".snap\" --copy-files --no-copy-ignored --ignore \"src/**/*.test.js\",\"src/**/*.test.jsx\",\"src/setupTests.js\",\"src/polyfill/**/*.js\",\"src/cdn.js\",\"src/**/*.snap\"",
     "// TESTS": "",
     "test": "npm run lint && npm run test:unit",
-    "test:unit": "jest --notify",
+    "test:unit": "jest --notify --detectOpenHandles",
     "test:unit:watch": "jest --watch",
     "test:unit:coverage": "npm run test:unit -- --coverage",
     "// LINTING": "",
@@ -51,78 +50,82 @@
     "node": ">= 14"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-member-expression-literals": "^7.16.7",
-    "@babel/plugin-transform-property-literals": "^7.16.7",
-    "@babel/plugin-transform-react-jsx": "^7.16.7",
-    "@babel/plugin-transform-reserved-words": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.10",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "@nice-digital/browserslist-config": "^2.0.1",
     "@nice-digital/eslint-config": "^1.0.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.3",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^8.1.1",
-    "core-js": "^3.20.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "autoprefixer": "^10.4.14",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^9.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.29.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.7",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
-    "es3ify-loader": "^0.2.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-webpack-plugin": "^2.6.0",
-    "eslint-plugin-react": "^7.29.2",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-webpack-plugin": "^4.0.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-location-mock": "^1.0.9",
     "jest-teamcity-reporter": "^0.9.0",
     "mockdate": "^3.0.5",
-    "npm-audit-reporter-teamcity": "^0.3.1",
-    "postcss": "^8.4.5",
-    "postcss-loader": "^5.2.0",
-    "prettier": "^2.5.1",
-    "promise-polyfill": "^8.2.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-refresh": "^0.10.0",
-    "sass": "^1.49.0",
-    "sass-loader": "^11.1.1",
-    "source-map-loader": "^2.0.1",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.21.0",
-    "stylelint-webpack-plugin": "^2.3.2",
-    "terser-webpack-plugin": "^5.3.0",
-    "webpack": "^5.67.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^3.11.3",
-    "webpack-merge": "^5.7.3"
+    "node-notifier": "^10.0.1",
+    "npm-audit-reporter-teamcity": "^0.4.0",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.1.0",
+    "prettier": "^2.8.4",
+    "promise-polyfill": "^8.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-refresh": "^0.14.0",
+    "sass": "^1.59.3",
+    "sass-loader": "^13.2.0",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.2",
+    "stylelint": "^15.3.0",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^3.0.0",
+    "stylelint-webpack-plugin": "^4.1.0",
+    "terser-webpack-plugin": "^5.3.7",
+    "typescript": "^5.0.2",
+    "webpack": "^5.76.2",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.12.0",
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@mantine/hooks": "^4.2.12",
-    "@nice-digital/design-system": "^4.0.0",
+    "@babel/runtime": "^7.21.0",
+    "@headlessui/react": "^1.7.14",
+    "@mantine/hooks": "^6.0.2",
+    "@nice-digital/design-system": "^5.0.11",
     "@use-it/event-listener": "^0.1.7",
-    "accessible-autocomplete": "^2.0.3",
-    "classnames": "^2.3.1",
-    "es5-polyfill": "0.0.6",
-    "js-cookie": "^2.2.1",
+    "classnames": "^2.3.2",
+    "js-cookie": "^3.0.1",
     "prop-types": "^15.8.1",
-    "unfetch": "^4.2.0"
+    "unfetch": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
   },
   "files": [
     "lib",
@@ -132,6 +135,6 @@
     "lib": "lib"
   },
   "volta": {
-    "node": "14.20.0"
+    "node": "16.19.1"
   }
 }

package/types.d.ts

@@ -75,6 +75,7 @@ declare module "@nice-digital/global-nav" {
 		onDropdownClose?: string | (() => void);
 		onNavigating?: string | OnNavigatingCallback;
 		additionalSubMenuItems?: Array<AdditionalSubMenuItem>;
+		renderSearchOnly?: boolean;
 	};
 
 	export type FooterProps = {