@linzjs/lui 17.31.0 → 17.32.0

package/dist/index.js

@@ -7743,12 +7743,12 @@ function findDOMNode(draggable) {
   return node2;
 }
 var DraggableCore$2 = {};
-var log$1 = {};
-Object.defineProperty(log$1, "__esModule", {
+var log$1$1 = {};
+Object.defineProperty(log$1$1, "__esModule", {
   value: true
 });
-log$1.default = log;
-function log() {
+log$1$1.default = log$5;
+function log$5() {
 }
 function _typeof$2(obj) {
   "@babel/helpers - typeof";
@@ -7773,7 +7773,7 @@ var _reactDom$1 = _interopRequireDefault$5(reactDom.exports);
 var _domFns = domFns;
 var _positionFns = positionFns;
 var _shims = shims;
-var _log = _interopRequireDefault$5(log$1);
+var _log = _interopRequireDefault$5(log$1$1);
 function _interopRequireDefault$5(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -7874,7 +7874,7 @@ function _arrayWithHoles$1(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _classCallCheck$2(instance, Constructor) {
+function _classCallCheck$3(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
@@ -7985,7 +7985,7 @@ var DraggableCore$1 = /* @__PURE__ */ function(_React$Component) {
   var _super = _createSuper$1(DraggableCore2);
   function DraggableCore2() {
     var _this;
-    _classCallCheck$2(this, DraggableCore2);
+    _classCallCheck$3(this, DraggableCore2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -8231,7 +8231,7 @@ _defineProperty$2(DraggableCore$1, "defaultProps", {
   var _positionFns2 = positionFns;
   var _shims2 = shims;
   var _DraggableCore = _interopRequireDefault2(DraggableCore$2);
-  var _log2 = _interopRequireDefault2(log$1);
+  var _log2 = _interopRequireDefault2(log$1$1);
   var _excluded = ["axis", "bounds", "children", "defaultPosition", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "position", "positionOffset", "scale"];
   function _interopRequireDefault2(obj) {
     return obj && obj.__esModule ? obj : { default: obj };
@@ -18937,7 +18937,7 @@ function _typeof(obj) {
   }, _typeof(obj);
 }
 
-function _classCallCheck$1(instance, Constructor) {
+function _classCallCheck$2(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
@@ -19566,7 +19566,7 @@ var MenuPlacer = /*#__PURE__*/function (_Component) {
   function MenuPlacer() {
     var _this;
 
-    _classCallCheck$1(this, MenuPlacer);
+    _classCallCheck$2(this, MenuPlacer);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -19754,7 +19754,7 @@ var MenuPortal = /*#__PURE__*/function (_Component2) {
   function MenuPortal() {
     var _this2;
 
-    _classCallCheck$1(this, MenuPortal);
+    _classCallCheck$2(this, MenuPortal);
 
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
@@ -21759,7 +21759,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
   function Select(_props) {
     var _this;
 
-    _classCallCheck$1(this, Select);
+    _classCallCheck$2(this, Select);
 
     _this = _super.call(this, _props);
     _this.state = {
@@ -40348,10 +40348,12 @@ var LuiDrawerMenuOptionsV2 = function (_a) {
     return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-options" }, children));
 };
 var LuiDrawerMenuOptionV2 = function (_a) {
-    var icon = _a.icon, iconColor = _a.iconColor, label = _a.label, badge = _a.badge, _b = _a.iconSize, iconSize = _b === void 0 ? 'md' : _b, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c;
+    var icon = _a.icon, iconColor = _a.iconColor, label = _a.label, badge = _a.badge, _b = _a.iconSize, iconSize = _b === void 0 ? 'md' : _b, _c = _a.subMenu, subMenu = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
     var menu = React$1.useContext(LuiCloseableHeaderMenuContext);
     return (React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
-            menu.close();
+            if (!subMenu) {
+                menu.close();
+            }
             onClick();
         }, "data-testid": 'drawer-option' },
         React__default["default"].createElement("div", { className: "LuiHeaderMenuV2-drawer-option-label" },
@@ -40447,7 +40449,16 @@ exports.default = findTabbableDescendants;
  * http://api.jqueryui.com/category/ui-core/
  */
 
-var tabbableNode = /input|select|textarea|button|object/;
+var DISPLAY_NONE = "none";
+var DISPLAY_CONTENTS = "contents";
+
+var tabbableNode = /input|select|textarea|button|object|iframe/;
+
+function isNotOverflowing(element, style) {
+  return style.getPropertyValue("overflow") !== "visible" ||
+  // if 'overflow: visible' set, check if there is actually any overflow
+  element.scrollWidth <= 0 && element.scrollHeight <= 0;
+}
 
 function hidesContents(element) {
   var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;
@@ -40455,17 +40466,27 @@ function hidesContents(element) {
   // If the node is empty, this is good enough
   if (zeroSize && !element.innerHTML) return true;
 
-  // Otherwise we need to check some styles
-  var style = window.getComputedStyle(element);
-  return zeroSize ? style.getPropertyValue("overflow") !== "visible" ||
-  // if 'overflow: visible' set, check if there is actually any overflow
-  element.scrollWidth <= 0 && element.scrollHeight <= 0 : style.getPropertyValue("display") == "none";
+  try {
+    // Otherwise we need to check some styles
+    var style = window.getComputedStyle(element);
+    var displayValue = style.getPropertyValue("display");
+    return zeroSize ? displayValue !== DISPLAY_CONTENTS && isNotOverflowing(element, style) : displayValue === DISPLAY_NONE;
+  } catch (exception) {
+    // eslint-disable-next-line no-console
+    console.warn("Failed to inspect element style");
+    return false;
+  }
 }
 
 function visible(element) {
   var parentElement = element;
+  var rootNode = element.getRootNode && element.getRootNode();
   while (parentElement) {
     if (parentElement === document.body) break;
+
+    // if we are not hidden yet, skip to checking outside the Web Component
+    if (rootNode && parentElement === rootNode) parentElement = rootNode.host.parentNode;
+
     if (hidesContents(parentElement)) return false;
     parentElement = parentElement.parentNode;
   }
@@ -40486,7 +40507,10 @@ function tabbable(element) {
 }
 
 function findTabbableDescendants(element) {
-  return [].slice.call(element.querySelectorAll("*"), 0).filter(tabbable);
+  var descendants = [].slice.call(element.querySelectorAll("*"), 0).reduce(function (finished, el) {
+    return finished.concat(!el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot));
+  }, []);
+  return descendants.filter(tabbable);
 }
 module.exports = exports["default"];
 }(tabbable, tabbable.exports));
@@ -40494,6 +40518,8 @@ module.exports = exports["default"];
 Object.defineProperty(focusManager, "__esModule", {
   value: true
 });
+focusManager.resetState = resetState$4;
+focusManager.log = log$4;
 focusManager.handleBlur = handleBlur;
 focusManager.handleFocus = handleFocus;
 focusManager.markForFocusLater = markForFocusLater;
@@ -40512,6 +40538,25 @@ var focusLaterElements = [];
 var modalElement = null;
 var needToFocus = false;
 
+/* eslint-disable no-console */
+/* istanbul ignore next */
+function resetState$4() {
+  focusLaterElements = [];
+}
+
+/* istanbul ignore next */
+function log$4() {
+  if (process.env.NODE_ENV !== "production") {
+    console.log("focusManager ----------");
+    focusLaterElements.forEach(function (f) {
+      var check = f || {};
+      console.log(check.nodeName, check.className, check.id);
+    });
+    console.log("end focusManager ----------");
+  }
+}
+/* eslint-enable no-console */
+
 function handleBlur() {
   needToFocus = true;
 }
@@ -40543,11 +40588,13 @@ function markForFocusLater() {
 
 /* eslint-disable no-console */
 function returnFocus() {
+  var preventScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
   var toFocus = null;
   try {
     if (focusLaterElements.length !== 0) {
       toFocus = focusLaterElements.pop();
-      toFocus.focus();
+      toFocus.focus({ preventScroll: preventScroll });
     }
     return;
   } catch (e) {
@@ -40599,6 +40646,12 @@ var _tabbable2 = _interopRequireDefault(_tabbable);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function getActiveElement() {
+  var el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+
+  return el.activeElement.shadowRoot ? getActiveElement(el.activeElement.shadowRoot) : el.activeElement;
+}
+
 function scopeTab(node, event) {
   var tabbable = (0, _tabbable2.default)(node);
 
@@ -40613,19 +40666,20 @@ function scopeTab(node, event) {
   var shiftKey = event.shiftKey;
   var head = tabbable[0];
   var tail = tabbable[tabbable.length - 1];
+  var activeElement = getActiveElement();
 
   // proceed with default browser behavior on tab.
   // Focus on last element on shift + tab.
-  if (node === document.activeElement) {
+  if (node === activeElement) {
     if (!shiftKey) return;
     target = tail;
   }
 
-  if (tail === document.activeElement && !shiftKey) {
+  if (tail === activeElement && !shiftKey) {
     target = head;
   }
 
-  if (head === document.activeElement && shiftKey) {
+  if (head === activeElement && shiftKey) {
     target = tail;
   }
 
@@ -40653,7 +40707,7 @@ function scopeTab(node, event) {
   // the focus
   if (!isSafariDesktop) return;
 
-  var x = tabbable.indexOf(document.activeElement);
+  var x = tabbable.indexOf(activeElement);
 
   if (x > -1) {
     x += shiftKey ? -1 : 1;
@@ -40786,7 +40840,7 @@ var exenv = {exports: {}};
 Object.defineProperty(safeHTMLElement, "__esModule", {
   value: true
 });
-safeHTMLElement.canUseDOM = undefined;
+safeHTMLElement.canUseDOM = safeHTMLElement.SafeNodeList = safeHTMLElement.SafeHTMLCollection = undefined;
 
 var _exenv = exenv.exports;
 
@@ -40798,6 +40852,10 @@ var EE = _exenv2.default;
 
 var SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {};
 
+safeHTMLElement.SafeHTMLCollection = EE.canUseDOM ? window.HTMLCollection : {};
+
+safeHTMLElement.SafeNodeList = EE.canUseDOM ? window.NodeList : {};
+
 safeHTMLElement.canUseDOM = EE.canUseDOM;
 
 safeHTMLElement.default = SafeHTMLElement;
@@ -40805,13 +40863,14 @@ safeHTMLElement.default = SafeHTMLElement;
 Object.defineProperty(ariaAppHider$1, "__esModule", {
   value: true
 });
+ariaAppHider$1.resetState = resetState$3;
+ariaAppHider$1.log = log$3;
 ariaAppHider$1.assertNodeList = assertNodeList;
 ariaAppHider$1.setElement = setElement;
 ariaAppHider$1.validateElement = validateElement;
 ariaAppHider$1.hide = hide$2;
 ariaAppHider$1.show = show;
 ariaAppHider$1.documentNotReadyOrSSRTesting = documentNotReadyOrSSRTesting;
-ariaAppHider$1.resetForTesting = resetForTesting;
 
 var _warning = warning_1;
 
@@ -40823,6 +40882,36 @@ function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : {
 
 var globalElement = null;
 
+/* eslint-disable no-console */
+/* istanbul ignore next */
+function resetState$3() {
+  if (globalElement) {
+    if (globalElement.removeAttribute) {
+      globalElement.removeAttribute("aria-hidden");
+    } else if (globalElement.length != null) {
+      globalElement.forEach(function (element) {
+        return element.removeAttribute("aria-hidden");
+      });
+    } else {
+      document.querySelectorAll(globalElement).forEach(function (element) {
+        return element.removeAttribute("aria-hidden");
+      });
+    }
+  }
+  globalElement = null;
+}
+
+/* istanbul ignore next */
+function log$3() {
+  if (process.env.NODE_ENV !== "production") {
+    var check = globalElement || {};
+    console.log("ariaAppHider ----------");
+    console.log(check.nodeName, check.className, check.id);
+    console.log("end ariaAppHider ----------");
+  }
+}
+/* eslint-enable no-console */
+
 function assertNodeList(nodeList, selector) {
   if (!nodeList || !nodeList.length) {
     throw new Error("react-modal: No elements were found for selector " + selector + ".");
@@ -40834,31 +40923,74 @@ function setElement(element) {
   if (typeof useElement === "string" && _safeHTMLElement$1.canUseDOM) {
     var el = document.querySelectorAll(useElement);
     assertNodeList(el, useElement);
-    useElement = "length" in el ? el[0] : el;
+    useElement = el;
   }
   globalElement = useElement || globalElement;
   return globalElement;
 }
 
 function validateElement(appElement) {
-  if (!appElement && !globalElement) {
+  var el = appElement || globalElement;
+  if (el) {
+    return Array.isArray(el) || el instanceof HTMLCollection || el instanceof NodeList ? el : [el];
+  } else {
     (0, _warning2.default)(false, ["react-modal: App element is not defined.", "Please use `Modal.setAppElement(el)` or set `appElement={el}`.", "This is needed so screen readers don't see main content", "when modal is opened. It is not recommended, but you can opt-out", "by setting `ariaHideApp={false}`."].join(" "));
 
-    return false;
+    return [];
   }
-
-  return true;
 }
 
 function hide$2(appElement) {
-  if (validateElement(appElement)) {
-    (appElement || globalElement).setAttribute("aria-hidden", "true");
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = validateElement(appElement)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var el = _step.value;
+
+      el.setAttribute("aria-hidden", "true");
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
   }
 }
 
 function show(appElement) {
-  if (validateElement(appElement)) {
-    (appElement || globalElement).removeAttribute("aria-hidden");
+  var _iteratorNormalCompletion2 = true;
+  var _didIteratorError2 = false;
+  var _iteratorError2 = undefined;
+
+  try {
+    for (var _iterator2 = validateElement(appElement)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var el = _step2.value;
+
+      el.removeAttribute("aria-hidden");
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2.return) {
+        _iterator2.return();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
   }
 }
 
@@ -40866,43 +40998,62 @@ function documentNotReadyOrSSRTesting() {
   globalElement = null;
 }
 
-function resetForTesting() {
-  globalElement = null;
-}
-
 var classList = {};
 
 Object.defineProperty(classList, "__esModule", {
   value: true
 });
-classList.dumpClassLists = dumpClassLists;
+classList.resetState = resetState$2;
+classList.log = log$2;
 var htmlClassList = {};
 var docBodyClassList = {};
 
-function dumpClassLists() {
+/* eslint-disable no-console */
+/* istanbul ignore next */
+function removeClass(at, cls) {
+  at.classList.remove(cls);
+}
+
+/* istanbul ignore next */
+function resetState$2() {
+  var htmlElement = document.getElementsByTagName("html")[0];
+  for (var cls in htmlClassList) {
+    removeClass(htmlElement, htmlClassList[cls]);
+  }
+
+  var body = document.body;
+  for (var _cls in docBodyClassList) {
+    removeClass(body, docBodyClassList[_cls]);
+  }
+
+  htmlClassList = {};
+  docBodyClassList = {};
+}
+
+/* istanbul ignore next */
+function log$2() {
   if (process.env.NODE_ENV !== "production") {
     var classes = document.getElementsByTagName("html")[0].className;
     var buffer = "Show tracked classes:\n\n";
 
-    buffer += "<html /> (" + classes + "):\n";
+    buffer += "<html /> (" + classes + "):\n  ";
     for (var x in htmlClassList) {
-      buffer += "  " + x + " " + htmlClassList[x] + "\n";
+      buffer += "  " + x + " " + htmlClassList[x] + "\n  ";
     }
 
     classes = document.body.className;
 
-    // eslint-disable-next-line max-len
-    buffer += "\n\ndoc.body (" + classes + "):\n";
+    buffer += "\n\ndoc.body (" + classes + "):\n  ";
     for (var _x in docBodyClassList) {
-      buffer += "  " + _x + " " + docBodyClassList[_x] + "\n";
+      buffer += "  " + _x + " " + docBodyClassList[_x] + "\n  ";
     }
 
     buffer += "\n";
 
-    // eslint-disable-next-line no-console
     console.log(buffer);
   }
 }
+/* eslint-enable no-console */
 
 /**
  * Track the number of reference of a class.
@@ -40978,22 +41129,22 @@ classList.remove = function remove(element, classString) {
   return untrackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" "));
 };
 
-var portalOpenInstances = {exports: {}};
-
-(function (module, exports) {
+var portalOpenInstances$1 = {};
 
-Object.defineProperty(exports, "__esModule", {
+Object.defineProperty(portalOpenInstances$1, "__esModule", {
   value: true
 });
+portalOpenInstances$1.log = log$1;
+portalOpenInstances$1.resetState = resetState$1;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 // Tracks portals that are open and emits events to subscribers
 
 var PortalOpenInstances = function PortalOpenInstances() {
   var _this = this;
 
-  _classCallCheck(this, PortalOpenInstances);
+  _classCallCheck$1(this, PortalOpenInstances);
 
   this.register = function (openInstance) {
     if (_this.openInstances.indexOf(openInstance) !== -1) {
@@ -41038,11 +41189,34 @@ var PortalOpenInstances = function PortalOpenInstances() {
 
 var portalOpenInstances = new PortalOpenInstances();
 
-exports.default = portalOpenInstances;
-module.exports = exports["default"];
-}(portalOpenInstances, portalOpenInstances.exports));
+/* eslint-disable no-console */
+/* istanbul ignore next */
+function log$1() {
+  console.log("portalOpenInstances ----------");
+  console.log(portalOpenInstances.openInstances.length);
+  portalOpenInstances.openInstances.forEach(function (p) {
+    return console.log(p);
+  });
+  console.log("end portalOpenInstances ----------");
+}
+
+/* istanbul ignore next */
+function resetState$1() {
+  portalOpenInstances = new PortalOpenInstances();
+}
+/* eslint-enable no-console */
+
+portalOpenInstances$1.default = portalOpenInstances;
+
+var bodyTrap$1 = {};
+
+Object.defineProperty(bodyTrap$1, "__esModule", {
+  value: true
+});
+bodyTrap$1.resetState = resetState;
+bodyTrap$1.log = log;
 
-var _portalOpenInstances = portalOpenInstances.exports;
+var _portalOpenInstances = portalOpenInstances$1;
 
 var _portalOpenInstances2 = _interopRequireDefault$1(_portalOpenInstances);
 
@@ -41054,6 +41228,34 @@ var before = void 0,
     after = void 0,
     instances = [];
 
+/* eslint-disable no-console */
+/* istanbul ignore next */
+function resetState() {
+  var _arr = [before, after];
+
+  for (var _i = 0; _i < _arr.length; _i++) {
+    var item = _arr[_i];
+    if (!item) continue;
+    item.parentNode && item.parentNode.removeChild(item);
+  }
+  before = after = null;
+  instances = [];
+}
+
+/* istanbul ignore next */
+function log() {
+  console.log("bodyTrap ----------");
+  console.log(instances.length);
+  var _arr2 = [before, after];
+  for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
+    var item = _arr2[_i2];
+    var check = item || {};
+    console.log(check.nodeName, check.className, check.id);
+  }
+  console.log("edn bodyTrap ----------");
+}
+/* eslint-enable no-console */
+
 function focusContent() {
   if (instances.length === 0) {
     if (process.env.NODE_ENV !== "production") {
@@ -41066,7 +41268,7 @@ function focusContent() {
 }
 
 function bodyTrap(eventType, openInstances) {
-  if (!before || !after) {
+  if (!before && !after) {
     before = document.createElement("div");
     before.setAttribute("data-react-modal-body-trap", "");
     before.style.position = "absolute";
@@ -41114,8 +41316,6 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _react = React__default["default"];
 
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = propTypes.exports;
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -41140,7 +41340,7 @@ var _safeHTMLElement = safeHTMLElement;
 
 var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement);
 
-var _portalOpenInstances = portalOpenInstances.exports;
+var _portalOpenInstances = portalOpenInstances$1;
 
 var _portalOpenInstances2 = _interopRequireDefault(_portalOpenInstances);
 
@@ -41162,8 +41362,17 @@ var CLASS_NAMES = {
   content: "ReactModal__Content"
 };
 
-var TAB_KEY = 9;
-var ESC_KEY = 27;
+/**
+ * We need to support the deprecated `KeyboardEvent.keyCode` in addition to
+ * `KeyboardEvent.code` for apps that still support IE11. Can be removed when
+ * `react-modal` only supports React >18 (which dropped IE support).
+ */
+var isTabKey = function isTabKey(event) {
+  return event.code === "Tab" || event.keyCode === 9;
+};
+var isEscKey = function isEscKey(event) {
+  return event.code === "Escape" || event.keyCode === 27;
+};
 
 var ariaHiddenInstances = 0;
 
@@ -41190,13 +41399,16 @@ var ModalPortal = function (_Component) {
           appElement = _this$props.appElement,
           ariaHideApp = _this$props.ariaHideApp,
           htmlOpenClassName = _this$props.htmlOpenClassName,
-          bodyOpenClassName = _this$props.bodyOpenClassName;
+          bodyOpenClassName = _this$props.bodyOpenClassName,
+          parentSelector = _this$props.parentSelector;
 
-      // Remove classes.
 
-      bodyOpenClassName && classList$1.remove(document.body, bodyOpenClassName);
+      var parentDocument = parentSelector && parentSelector().ownerDocument || document;
+
+      // Remove classes.
+      bodyOpenClassName && classList$1.remove(parentDocument.body, bodyOpenClassName);
 
-      htmlOpenClassName && classList$1.remove(document.getElementsByTagName("html")[0], htmlOpenClassName);
+      htmlOpenClassName && classList$1.remove(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
 
       // Reset aria-hidden attribute if all modals have been removed
       if (ariaHideApp && ariaHiddenInstances > 0) {
@@ -41209,7 +41421,7 @@ var ModalPortal = function (_Component) {
 
       if (_this.props.shouldFocusAfterRender) {
         if (_this.props.shouldReturnFocusAfterClose) {
-          focusManager$1.returnFocus();
+          focusManager$1.returnFocus(_this.props.preventScroll);
           focusManager$1.teardownScopedFocus();
         } else {
           focusManager$1.popWithoutFocus();
@@ -41235,14 +41447,16 @@ var ModalPortal = function (_Component) {
         }
 
         _this.setState({ isOpen: true }, function () {
-          _this.setState({ afterOpen: true });
-
-          if (_this.props.isOpen && _this.props.onAfterOpen) {
-            _this.props.onAfterOpen({
-              overlayEl: _this.overlay,
-              contentEl: _this.content
-            });
-          }
+          _this.openAnimationFrame = requestAnimationFrame(function () {
+            _this.setState({ afterOpen: true });
+
+            if (_this.props.isOpen && _this.props.onAfterOpen) {
+              _this.props.onAfterOpen({
+                overlayEl: _this.overlay,
+                contentEl: _this.content
+              });
+            }
+          });
         });
       }
     };
@@ -41256,7 +41470,7 @@ var ModalPortal = function (_Component) {
     };
 
     _this.focusContent = function () {
-      return _this.content && !_this.contentHasFocus() && _this.content.focus();
+      return _this.content && !_this.contentHasFocus() && _this.content.focus({ preventScroll: true });
     };
 
     _this.closeWithTimeout = function () {
@@ -41276,11 +41490,11 @@ var ModalPortal = function (_Component) {
     };
 
     _this.handleKeyDown = function (event) {
-      if (event.keyCode === TAB_KEY) {
+      if (isTabKey(event)) {
         (0, _scopeTab2.default)(_this.content, event);
       }
 
-      if (_this.props.shouldCloseOnEsc && event.keyCode === ESC_KEY) {
+      if (_this.props.shouldCloseOnEsc && isEscKey(event)) {
         event.stopPropagation();
         _this.requestClose(event);
       }
@@ -41407,6 +41621,7 @@ var ModalPortal = function (_Component) {
         this.afterClose();
       }
       clearTimeout(this.closeTimer);
+      cancelAnimationFrame(this.openAnimationFrame);
     }
   }, {
     key: "beforeOpen",
@@ -41415,13 +41630,16 @@ var ModalPortal = function (_Component) {
           appElement = _props.appElement,
           ariaHideApp = _props.ariaHideApp,
           htmlOpenClassName = _props.htmlOpenClassName,
-          bodyOpenClassName = _props.bodyOpenClassName;
+          bodyOpenClassName = _props.bodyOpenClassName,
+          parentSelector = _props.parentSelector;
 
-      // Add classes.
 
-      bodyOpenClassName && classList$1.add(document.body, bodyOpenClassName);
+      var parentDocument = parentSelector && parentSelector().ownerDocument || document;
 
-      htmlOpenClassName && classList$1.add(document.getElementsByTagName("html")[0], htmlOpenClassName);
+      // Add classes.
+      bodyOpenClassName && classList$1.add(parentDocument.body, bodyOpenClassName);
+
+      htmlOpenClassName && classList$1.add(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
 
       if (ariaHideApp) {
         ariaHiddenInstances += 1;
@@ -41440,40 +41658,42 @@ var ModalPortal = function (_Component) {
           id = _props2.id,
           className = _props2.className,
           overlayClassName = _props2.overlayClassName,
-          defaultStyles = _props2.defaultStyles;
+          defaultStyles = _props2.defaultStyles,
+          children = _props2.children;
 
       var contentStyles = className ? {} : defaultStyles.content;
       var overlayStyles = overlayClassName ? {} : defaultStyles.overlay;
 
-      return this.shouldBeClosed() ? null : _react2.default.createElement(
-        "div",
-        {
-          ref: this.setOverlayRef,
-          className: this.buildClassName("overlay", overlayClassName),
-          style: _extends({}, overlayStyles, this.props.style.overlay),
-          onClick: this.handleOverlayOnClick,
-          onMouseDown: this.handleOverlayOnMouseDown
-        },
-        _react2.default.createElement(
-          "div",
-          _extends({
-            id: id,
-            ref: this.setContentRef,
-            style: _extends({}, contentStyles, this.props.style.content),
-            className: this.buildClassName("content", className),
-            tabIndex: "-1",
-            onKeyDown: this.handleKeyDown,
-            onMouseDown: this.handleContentOnMouseDown,
-            onMouseUp: this.handleContentOnMouseUp,
-            onClick: this.handleContentOnClick,
-            role: this.props.role,
-            "aria-label": this.props.contentLabel
-          }, this.attributesFromObject("aria", this.props.aria || {}), this.attributesFromObject("data", this.props.data || {}), {
-            "data-testid": this.props.testId
-          }),
-          this.props.children
-        )
-      );
+      if (this.shouldBeClosed()) {
+        return null;
+      }
+
+      var overlayProps = {
+        ref: this.setOverlayRef,
+        className: this.buildClassName("overlay", overlayClassName),
+        style: _extends({}, overlayStyles, this.props.style.overlay),
+        onClick: this.handleOverlayOnClick,
+        onMouseDown: this.handleOverlayOnMouseDown
+      };
+
+      var contentProps = _extends({
+        id: id,
+        ref: this.setContentRef,
+        style: _extends({}, contentStyles, this.props.style.content),
+        className: this.buildClassName("content", className),
+        tabIndex: "-1",
+        onKeyDown: this.handleKeyDown,
+        onMouseDown: this.handleContentOnMouseDown,
+        onMouseUp: this.handleContentOnMouseUp,
+        onClick: this.handleContentOnClick,
+        role: this.props.role,
+        "aria-label": this.props.contentLabel
+      }, this.attributesFromObject("aria", _extends({ modal: true }, this.props.aria)), this.attributesFromObject("data", this.props.data || {}), {
+        "data-testid": this.props.testId
+      });
+
+      var contentElement = this.props.contentElement(contentProps, children);
+      return this.props.overlayElement(overlayProps, contentElement);
     }
   }]);
 
@@ -41499,10 +41719,11 @@ ModalPortal.propTypes = {
   }),
   className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
   overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+  parentSelector: _propTypes2.default.func,
   bodyOpenClassName: _propTypes2.default.string,
   htmlOpenClassName: _propTypes2.default.string,
   ariaHideApp: _propTypes2.default.bool,
-  appElement: _propTypes2.default.instanceOf(_safeHTMLElement2.default),
+  appElement: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_safeHTMLElement2.default), _propTypes2.default.instanceOf(_safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(_safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]),
   onAfterOpen: _propTypes2.default.func,
   onAfterClose: _propTypes2.default.func,
   onRequestClose: _propTypes2.default.func,
@@ -41510,6 +41731,7 @@ ModalPortal.propTypes = {
   shouldFocusAfterRender: _propTypes2.default.bool,
   shouldCloseOnOverlayClick: _propTypes2.default.bool,
   shouldReturnFocusAfterClose: _propTypes2.default.bool,
+  preventScroll: _propTypes2.default.bool,
   role: _propTypes2.default.string,
   contentLabel: _propTypes2.default.string,
   aria: _propTypes2.default.object,
@@ -41519,6 +41741,8 @@ ModalPortal.propTypes = {
   overlayRef: _propTypes2.default.func,
   contentRef: _propTypes2.default.func,
   id: _propTypes2.default.string,
+  overlayElement: _propTypes2.default.func,
+  contentElement: _propTypes2.default.func,
   testId: _propTypes2.default.string
 };
 exports.default = ModalPortal;
@@ -41737,7 +41961,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var portalClassName = Modal$2.portalClassName = "ReactModalPortal";
 var bodyOpenClassName = Modal$2.bodyOpenClassName = "ReactModal__Body--open";
 
-var isReact16 = _reactDom2.default.createPortal !== undefined;
+var isReact16 = _safeHTMLElement.canUseDOM && _reactDom2.default.createPortal !== undefined;
+
+var createHTMLElement = function createHTMLElement(name) {
+  return document.createElement(name);
+};
 
 var getCreatePortal = function getCreatePortal() {
   return isReact16 ? _reactDom2.default.createPortal : _reactDom2.default.unstable_renderSubtreeIntoContainer;
@@ -41764,7 +41992,7 @@ var Modal$1 = function (_Component) {
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args))), _this), _this.removePortal = function () {
       !isReact16 && _reactDom2.default.unmountComponentAtNode(_this.node);
       var parent = getParentElement(_this.props.parentSelector);
-      if (parent) {
+      if (parent && parent.contains(_this.node)) {
         parent.removeChild(_this.node);
       } else {
         // eslint-disable-next-line no-console
@@ -41785,7 +42013,7 @@ var Modal$1 = function (_Component) {
       if (!_safeHTMLElement.canUseDOM) return;
 
       if (!isReact16) {
-        this.node = document.createElement("div");
+        this.node = createHTMLElement("div");
       }
       this.node.className = this.props.portalClassName;
 
@@ -41854,7 +42082,7 @@ var Modal$1 = function (_Component) {
       }
 
       if (!this.node && isReact16) {
-        this.node = document.createElement("div");
+        this.node = createHTMLElement("div");
       }
 
       var createPortal = getCreatePortal();
@@ -41897,7 +42125,7 @@ Modal$1.propTypes = {
     afterOpen: _propTypes2.default.string.isRequired,
     beforeClose: _propTypes2.default.string.isRequired
   })]),
-  appElement: _propTypes2.default.instanceOf(_safeHTMLElement2.default),
+  appElement: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_safeHTMLElement2.default), _propTypes2.default.instanceOf(_safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(_safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]),
   onAfterOpen: _propTypes2.default.func,
   onRequestClose: _propTypes2.default.func,
   closeTimeoutMS: _propTypes2.default.number,
@@ -41905,6 +42133,7 @@ Modal$1.propTypes = {
   shouldFocusAfterRender: _propTypes2.default.bool,
   shouldCloseOnOverlayClick: _propTypes2.default.bool,
   shouldReturnFocusAfterClose: _propTypes2.default.bool,
+  preventScroll: _propTypes2.default.bool,
   parentSelector: _propTypes2.default.func,
   aria: _propTypes2.default.object,
   data: _propTypes2.default.object,
@@ -41912,7 +42141,10 @@ Modal$1.propTypes = {
   contentLabel: _propTypes2.default.string,
   shouldCloseOnEsc: _propTypes2.default.bool,
   overlayRef: _propTypes2.default.func,
-  contentRef: _propTypes2.default.func
+  contentRef: _propTypes2.default.func,
+  id: _propTypes2.default.string,
+  overlayElement: _propTypes2.default.func,
+  contentElement: _propTypes2.default.func
 };
 Modal$1.defaultProps = {
   isOpen: false,
@@ -41925,8 +42157,23 @@ Modal$1.defaultProps = {
   shouldCloseOnEsc: true,
   shouldCloseOnOverlayClick: true,
   shouldReturnFocusAfterClose: true,
+  preventScroll: false,
   parentSelector: function parentSelector() {
     return document.body;
+  },
+  overlayElement: function overlayElement(props, contentEl) {
+    return _react2.default.createElement(
+      "div",
+      props,
+      contentEl
+    );
+  },
+  contentElement: function contentElement(props, children) {
+    return _react2.default.createElement(
+      "div",
+      props,
+      children
+    );
   }
 };
 Modal$1.defaultStyles = {
@@ -41957,6 +42204,12 @@ Modal$1.defaultStyles = {
 
 (0, _reactLifecyclesCompat.polyfill)(Modal$1);
 
+if (process.env.NODE_ENV !== "production") {
+  Modal$1.setCreateHTMLElement = function (fn) {
+    return createHTMLElement = fn;
+  };
+}
+
 Modal$2.default = Modal$1;
 
 (function (module, exports) {
@@ -41979,36 +42232,25 @@ var Modal = /*@__PURE__*/getDefaultExportFromCjs(lib.exports);
 
 var LuiUpdatesSplashModal = function (props) {
     var _a;
-    var node = React$1.useRef(null);
-    // We have to do this as the CSS takes over a lot of the page
-    // https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-with-react-hook-ba77c37c7e82
-    var handleClickOutside = React$1.useCallback(function (e) {
-        console.log('clicking anywhere');
-        // current DOES have a contains!
-        if ((node === null || node === void 0 ? void 0 : node.current) && node.current.contains(e.target)) {
-            // inside click
-            return;
-        }
-        // outside click
-        props.onClose();
-    }, [props]);
-    React$1.useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [handleClickOutside]);
+    var _b = React__default["default"].useState(props.enabled), showModal = _b[0], setshowModal = _b[1];
+    var currentVersion = window.localStorage.getItem(props.id);
+    var handleClose = function () {
+        setshowModal(false);
+        window.localStorage.setItem(props.id, props.releaseVersion);
+    };
     // process may be undefined, e.g. webpack 5 does not include a polyfill for it. Assume if process is undefined then
     // this isn't running in a test.
     if (typeof process === 'undefined' || ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) !== 'test') {
         Modal.setAppElement('#root');
     }
-    return (React__default["default"].createElement(Modal, { key: props.id, isOpen: true, shouldCloseOnOverlayClick: true, onRequestClose: props.onClose, contentLabel: "Recent updates", className: "lui-scrim", style: { overlay: { backgroundColor: 'transparent' } } },
-        React__default["default"].createElement("div", { ref: node, className: clsx$1('lui-large-feature-notification', props.wrapperClass) },
+    return (React__default["default"].createElement(Modal, { isOpen: props.enabled &&
+            showModal &&
+            props.releaseVersion.trim() !== currentVersion, shouldCloseOnEsc: true, onRequestClose: handleClose, shouldCloseOnOverlayClick: true, contentLabel: "Recent updates", className: "lui-splash-content", overlayClassName: "splash_overlay" },
+        React__default["default"].createElement("div", { className: clsx$1('lui-large-feature-notification', props.wrapperClass) },
             React__default["default"].createElement("div", { className: "lui-feature-header" },
                 React__default["default"].createElement("h1", null, props.header),
-                React__default["default"].createElement("button", { "aria-label": "Close dialog", onClick: props.onClose },
-                    React__default["default"].createElement("i", { className: "material-icons-round" }, "close"))),
+                React__default["default"].createElement("button", { "aria-label": "Close dialog", onClick: handleClose },
+                    React__default["default"].createElement(LuiIcon, { alt: "cross_icon", name: "ic_clear", status: "interactive", size: "md" }))),
             React__default["default"].createElement("div", { className: "lui-feature-img" },
                 React__default["default"].createElement("img", { className: "lui-hide-xs lui-hide-sm", alt: "What's new", src: props.bigImage }),
                 React__default["default"].createElement("img", { className: "lui-hide-md lui-hide-lg lui-hide-xl", alt: "What's new", src: props.smallImage })),