@linzjs/lui 17.30.0 → 17.32.0

package/dist/lui.esm.js

@@ -520,13 +520,14 @@ var ICON_STATUS = {
     disabled: 'LuiIcon--disabled'
 };
 var LuiIcon = function (_a) {
-    var name = _a.name, className = _a.className, _b = _a.size, size = _b === void 0 ? 'ns' : _b, title = _a.title, alt = _a.alt, _c = _a.status, status = _c === void 0 ? 'none' : _c, spanProps = _a.spanProps;
+    var name = _a.name, className = _a.className, _b = _a.size, size = _b === void 0 ? 'ns' : _b, title = _a.title, alt = _a.alt, _c = _a.status, status = _c === void 0 ? 'none' : _c, spanProps = _a.spanProps, color = _a.color;
     var iconSVG = ICONS[name];
     if (!iconSVG) {
         console.warn("<LuiIcon>: No icon found for: ".concat(iconSVG));
         return null;
     }
-    return (React$1.createElement("span", __assign$3({ className: clsx$1('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps), iconSVG));
+    var customStyle = color ? { fill: color } : {};
+    return (React$1.createElement("span", __assign$3({ className: clsx$1('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps, { style: customStyle }), iconSVG));
 };
 
 function getMaterialIconForLevel(level) {
@@ -7713,12 +7714,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";
@@ -7743,7 +7744,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 };
 }
@@ -7844,7 +7845,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");
   }
@@ -7955,7 +7956,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];
     }
@@ -8201,7 +8202,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 };
@@ -18907,7 +18908,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");
   }
@@ -19536,7 +19537,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];
@@ -19724,7 +19725,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];
@@ -21729,7 +21730,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 = {
@@ -40091,8 +40092,12 @@ var buildHideClassDict = function (_a) {
     };
 };
 
+/**
+ * @deprecated: this is replaced by LuiHeaderV2
+ */
 var LuiHeader = function (_a) {
     var headingText = _a.headingText, _b = _a.size, size = _b === void 0 ? 'small' : _b, homeLink = _a.homeLink, transparent = _a.transparent, children = _a.children, _c = _a.sticky, sticky = _c === void 0 ? true : _c;
+    useDeprecatedWarning('LuiHeader');
     var logoElement = size === 'normal' ? (React__default.createElement("img", { className: "linz-logo", alt: "LINZ Logo", src: logo })) : (React__default.createElement("img", { className: "linz-motif", alt: "LINZ Logo", src: motif }));
     var logoContainer = logoElement;
     if (typeof homeLink === 'string') {
@@ -40117,12 +40122,15 @@ var LuiHeader = function (_a) {
             React__default.createElement("div", { className: "lui-header-col" }, children))));
 };
 /**
+ * @deprecated: this is replaced by LuiHeaderMenuItemV2
+ *
  * The \`LuiHeaderMenuItem\` is the base component for all menu items that are to be shown in the header.
  * Note that it depends on it being rendered inside a LuiHeader for its styles to apply properly.
  * To configure the item for responsiveness, ensure to set any of the hideOn* properties.
  */
 var LuiHeaderMenuItem = forwardRef(function (_a, ref) {
     var icon = _a.icon, label = _a.label, badge = _a.badge, hide = _a.hide, onClick = _a.onClick, _b = _a["data-testid"], dataTestId = _b === void 0 ? 'menu-item' : _b, children = _a.children;
+    useDeprecatedWarning('LuiHeaderMenuItem');
     var menuItemClasses = clsx$1('lui-header-menu-item', hide && buildHideClassDict(hide));
     var resolvedIcon = !icon && !label ? 'menu' : icon;
     return (React__default.createElement("div", { className: menuItemClasses, ref: ref },
@@ -40137,8 +40145,12 @@ var LuiCloseableHeaderMenuContext = createContext({
     open: function () { },
     close: function () { }
 });
+/**
+ * @deprecated replaced by LuiCloseableHeaderMenuItemV2
+ */
 var LuiCloseableHeaderMenuItem = function (_a) {
     var open = _a.open, setOpen = _a.setOpen, props = __rest$1(_a, ["open", "setOpen"]);
+    useDeprecatedWarning('LuiCloseableHeaderMenuItem');
     useEscapeFunction(function () { return setOpen(false); });
     var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
         if (!open) {
@@ -40162,12 +40174,77 @@ var LuiMenuCloseButton = function (_a) {
     return (React__default.createElement("i", { className: classes, onClick: menu.close, "data-testid": dataTestId }, icon));
 };
 
+var LuiHeaderV2 = function (_a) {
+    var headingText = _a.headingText, _b = _a.size, size = _b === void 0 ? 'small' : _b, homeLink = _a.homeLink, transparent = _a.transparent, children = _a.children, _c = _a.sticky, sticky = _c === void 0 ? true : _c, appMenu = _a.appMenu;
+    var logoElement = size === 'normal' ? (React__default.createElement("img", { className: "LuiHeaderV2-linz-logo", alt: "LINZ Logo", src: logo })) : (React__default.createElement("img", { className: "LuiHeaderV2-linz-motif", alt: "LINZ Logo", src: motif }));
+    var logoContainer = logoElement;
+    if (typeof homeLink === 'string') {
+        logoContainer = React__default.createElement("a", { href: homeLink }, logoElement);
+    }
+    else if (typeof homeLink === 'function') {
+        logoContainer = (React__default.createElement("div", { className: "clickable", onClick: function () {
+                homeLink();
+            } }, logoElement));
+    }
+    return (React__default.createElement("header", { className: clsx$1({
+            LuiHeaderV2: true,
+            'LuiHeaderV2-transparent': transparent,
+            'LuiHeaderV2-small': size === 'small',
+            'LuiHeaderV2-sticky': sticky
+        }) },
+        React__default.createElement("div", { className: "LuiHeaderV2-row" },
+            React__default.createElement("div", { className: "LuiHeaderV2-col" },
+                !!appMenu && appMenu,
+                React__default.createElement("div", { className: "LuiHeaderV2-logo" }, logoContainer),
+                headingText && (React__default.createElement("div", { className: "LuiHeaderV2-title" },
+                    React__default.createElement("h1", null, headingText)))),
+            React__default.createElement("div", { className: "LuiHeaderV2-col" }, children))));
+};
+var LuiHeaderMenuItemV2 = forwardRef(function (_a, ref) {
+    var icon = _a.icon, _b = _a.iconColor, iconColor = _b === void 0 ? '#ffffff' : _b, label = _a.label, badge = _a.badge, hide = _a.hide, onClick = _a.onClick, _c = _a["data-testid"], dataTestId = _c === void 0 ? 'menu-item' : _c, children = _a.children;
+    var menuItemClasses = clsx$1('LuiHeaderV2-menu-item', hide && buildHideClassDict(hide));
+    var resolvedIcon = !icon && !label ? 'ic_menu' : icon;
+    return (React__default.createElement("div", { className: menuItemClasses, ref: ref },
+        React__default.createElement("div", { className: "LuiHeaderV2-menu-button" },
+            resolvedIcon && (React__default.createElement("div", { className: clsx$1('LuiHeaderV2-menu-icon', onClick && 'clickable'), "data-testid": dataTestId, onClick: onClick },
+                React__default.createElement(LuiIcon, { size: "lg", name: resolvedIcon, alt: '', color: iconColor }))),
+            label && (React__default.createElement("div", { className: clsx$1(onClick && 'clickable', { 'LuiHeaderV2-menu-label': !!resolvedIcon }, { 'LuiHeaderV2-menu-label-only': !resolvedIcon }), onClick: onClick }, label)),
+            badge && React__default.createElement("div", { className: "LuiHeaderV2-badge" }, badge)),
+        !!children && children));
+});
+var LuiCloseableHeaderMenuItemV2 = function (_a) {
+    var open = _a.open, setOpen = _a.setOpen, children = _a.children, props = __rest$1(_a, ["open", "setOpen", "children"]);
+    useEscapeFunction(function () { return setOpen(false); });
+    var menuDiv = usePageClickFunction(function (event) { return open || event.stopPropagation(); }, function (event) {
+        if (!open) {
+            event.stopPropagation();
+            setOpen(false);
+        }
+    });
+    var menuControls = {
+        isOpen: function () { return open; },
+        open: function () { return setOpen(!open); },
+        close: function () { return setOpen(false); }
+    };
+    var menuItemProps = __assign$3({ onClick: function () { return menuControls.open(); } }, props);
+    return (React__default.createElement(LuiCloseableHeaderMenuContext.Provider, { value: menuControls },
+        React__default.createElement(LuiHeaderMenuItemV2, __assign$3({ ref: menuDiv }, menuItemProps), !!children && children)));
+};
+
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionsV2
+ */
 var LuiDrawerMenuOptions = function (_a) {
     var children = _a.children;
+    useDeprecatedWarning('LuiDrawerMenuOptions');
     return React__default.createElement("div", { className: "lui-menu-drawer-options" }, children);
 };
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionV2
+ */
 var LuiDrawerMenuOption = function (_a) {
     var icon = _a.icon, label = _a.label, badge = _a.badge, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
+    useDeprecatedWarning('LuiDrawerMenuOption');
     var menu = useContext(LuiCloseableHeaderMenuContext);
     return (React__default.createElement("div", { className: "lui-menu-drawer-option", onClick: function () {
             menu.close();
@@ -40178,8 +40255,12 @@ var LuiDrawerMenuOption = function (_a) {
             label),
         badge));
 };
+/**
+ * @deprecated replaced by LuiDrawerMenuV2
+ */
 var LuiDrawerMenu = function (_a) {
     var restOfProps = __rest$1(_a, []);
+    useDeprecatedWarning('LuiDrawerMenu');
     var children = restOfProps.children, _b = restOfProps.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, menuPropsCopy = __rest$1(restOfProps, ["children", "hasStickyHeader"]);
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen, icon: open ? 'close' : 'menu', onClick: function () { return setOpen(!open); } });
@@ -40202,8 +40283,12 @@ var LuiDrawerMenu = function (_a) {
                 'lui-menu-drawer-closed': !open
             }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
 };
+/**
+ * @deprecated  replaced by LuiDropdownMenuV2
+ */
 var LuiDropdownMenu = function (_a) {
     var restOfProps = __rest$1(_a, []);
+    useDeprecatedWarning('LuiDropdownMenu');
     var children = restOfProps.children, menuPropsCopy = __rest$1(restOfProps, ["children"]);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen });
@@ -40229,6 +40314,84 @@ var LuiDrawerMenuDivider = function () {
     return React__default.createElement("hr", { className: "LuiDrawerMenuDivider" });
 };
 
+var LuiDrawerMenuOptionsV2 = function (_a) {
+    var children = _a.children;
+    return (React__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.subMenu, subMenu = _c === void 0 ? false : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
+    var menu = useContext(LuiCloseableHeaderMenuContext);
+    return (React__default.createElement("div", { className: "LuiHeaderMenuV2-drawer-option", onClick: function () {
+            if (!subMenu) {
+                menu.close();
+            }
+            onClick();
+        }, "data-testid": 'drawer-option' },
+        React__default.createElement("div", { className: "LuiHeaderMenuV2-drawer-option-label" },
+            typeof icon === 'string' ? (React__default.createElement(LuiIcon, { size: iconSize, name: icon, alt: '', color: iconColor, "data-testid": 'drawer-option-icon' })) : (icon),
+            label),
+        badge));
+};
+var LuiDrawerMenuV2 = function (_a) {
+    var children = _a.children, _b = _a.hasStickyHeader, hasStickyHeader = _b === void 0 ? true : _b, menuPropsCopy = __rest$1(_a, ["children", "hasStickyHeader"]);
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open, setOpen: setOpen, icon: open ? 'ic_clear' : 'ic_menu', onClick: function () { return setOpen(!open); } });
+    useEffect(function () {
+        // Support for non-sticky headers. Scroll back to top when menu is opened
+        if (open && !hasStickyHeader) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        // Disable page scrolling while menu is open
+        if (open) {
+            document.body.classList.add('LuiHeaderMenuV2-drawer-open');
+        }
+        else {
+            document.body.classList.remove('LuiHeaderMenuV2-drawer-open');
+        }
+    }, [open, hasStickyHeader]);
+    return (React__default.createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
+        React__default.createElement("div", { className: clsx$1({
+                'LuiHeaderMenuV2-drawer': true,
+                'LuiHeaderMenuV2-drawer-closed': !open
+            }), "data-testid": 'drawer', "aria-hidden": !open }, children)));
+};
+var LuiDropdownMenuV2 = function (_a) {
+    var restOfProps = __rest$1(_a, []);
+    var children = restOfProps.children, _b = restOfProps.anchorOrigin, _c = _b === void 0 ? {
+        horizontal: 'left'
+    } : _b, _d = _c.horizontal, horizontal = _d === void 0 ? 'left' : _d, _e = restOfProps.size, size = _e === void 0 ? 'md' : _e, menuPropsCopy = __rest$1(restOfProps, ["children", "anchorOrigin", "size"]);
+    var _f = useState(null), open = _f[0], setOpen = _f[1];
+    var closeableMenuProps = __assign$3(__assign$3({}, menuPropsCopy), { open: open || false, setOpen: function (currentOpen) {
+            setOpen(function (preOpen) {
+                if (preOpen !== null) {
+                    return currentOpen;
+                }
+                // if the menu was not opened before, then ignore close event,
+                // thus apply -closed animation css only if the menu is closed from the open state
+                return currentOpen || null;
+            });
+        } });
+    return (React__default.createElement(LuiCloseableHeaderMenuItemV2, __assign$3({}, closeableMenuProps),
+        React__default.createElement("div", { className: "LuiHeaderMenuV2-dropdown-container" },
+            React__default.createElement("div", { className: clsx$1('LuiHeaderMenuV2-dropdown', 'lui-box-shadow', { 'anchor-horizontal-icon-left': horizontal === 'left' }, {
+                    'anchor-horizontal-icon-right': !menuPropsCopy.label && horizontal === 'right'
+                }, {
+                    'anchor-horizontal-label-right': menuPropsCopy.label && horizontal === 'right'
+                }, "dropdown-".concat(size), {
+                    'LuiHeaderMenuV2-dropdown-open': open
+                }, {
+                    'LuiHeaderMenuV2-dropdown-closed': open !== null && !open
+                }), "data-testid": 'dropdown', "aria-hidden": !open },
+                children,
+                ' '))));
+};
+var LuiDrawerMenuSectionV2 = function (props) {
+    return React__default.createElement(LuiDrawerMenuSection, __assign$3({}, props));
+};
+var LuiDrawerMenuDividerV2 = function () {
+    return React__default.createElement(LuiDrawerMenuDivider, null);
+};
+
 var lib = {exports: {}};
 
 var Modal$2 = {};
@@ -40257,7 +40420,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;
@@ -40265,17 +40437,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;
   }
@@ -40296,7 +40478,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));
@@ -40304,6 +40489,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;
@@ -40322,6 +40509,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;
 }
@@ -40353,11 +40559,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) {
@@ -40409,6 +40617,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);
 
@@ -40423,19 +40637,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;
   }
 
@@ -40463,7 +40678,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;
@@ -40596,7 +40811,7 @@ var exenv = {exports: {}};
 Object.defineProperty(safeHTMLElement, "__esModule", {
   value: true
 });
-safeHTMLElement.canUseDOM = undefined;
+safeHTMLElement.canUseDOM = safeHTMLElement.SafeNodeList = safeHTMLElement.SafeHTMLCollection = undefined;
 
 var _exenv = exenv.exports;
 
@@ -40608,6 +40823,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;
@@ -40615,13 +40834,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;
 
@@ -40633,6 +40853,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 + ".");
@@ -40644,31 +40894,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;
+      }
+    }
   }
 }
 
@@ -40676,43 +40969,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.
@@ -40788,22 +41100,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) {
@@ -40848,11 +41160,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 _portalOpenInstances = portalOpenInstances.exports;
+var bodyTrap$1 = {};
+
+Object.defineProperty(bodyTrap$1, "__esModule", {
+  value: true
+});
+bodyTrap$1.resetState = resetState;
+bodyTrap$1.log = log;
+
+var _portalOpenInstances = portalOpenInstances$1;
 
 var _portalOpenInstances2 = _interopRequireDefault$1(_portalOpenInstances);
 
@@ -40864,6 +41199,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") {
@@ -40876,7 +41239,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";
@@ -40924,8 +41287,6 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _react = React__default;
 
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = propTypes.exports;
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -40950,7 +41311,7 @@ var _safeHTMLElement = safeHTMLElement;
 
 var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement);
 
-var _portalOpenInstances = portalOpenInstances.exports;
+var _portalOpenInstances = portalOpenInstances$1;
 
 var _portalOpenInstances2 = _interopRequireDefault(_portalOpenInstances);
 
@@ -40972,8 +41333,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;
 
@@ -41000,13 +41370,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;
 
-      htmlOpenClassName && classList$1.remove(document.getElementsByTagName("html")[0], htmlOpenClassName);
+      // Remove classes.
+      bodyOpenClassName && classList$1.remove(parentDocument.body, bodyOpenClassName);
+
+      htmlOpenClassName && classList$1.remove(parentDocument.getElementsByTagName("html")[0], htmlOpenClassName);
 
       // Reset aria-hidden attribute if all modals have been removed
       if (ariaHideApp && ariaHiddenInstances > 0) {
@@ -41019,7 +41392,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();
@@ -41045,14 +41418,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
+              });
+            }
+          });
         });
       }
     };
@@ -41066,7 +41441,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 () {
@@ -41086,11 +41461,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);
       }
@@ -41217,6 +41592,7 @@ var ModalPortal = function (_Component) {
         this.afterClose();
       }
       clearTimeout(this.closeTimer);
+      cancelAnimationFrame(this.openAnimationFrame);
     }
   }, {
     key: "beforeOpen",
@@ -41225,13 +41601,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;
@@ -41250,40 +41629,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);
     }
   }]);
 
@@ -41309,10 +41690,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,
@@ -41320,6 +41702,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,
@@ -41329,6 +41712,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;
@@ -41547,7 +41932,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;
@@ -41574,7 +41963,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
@@ -41595,7 +41984,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;
 
@@ -41664,7 +42053,7 @@ var Modal$1 = function (_Component) {
       }
 
       if (!this.node && isReact16) {
-        this.node = document.createElement("div");
+        this.node = createHTMLElement("div");
       }
 
       var createPortal = getCreatePortal();
@@ -41707,7 +42096,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,
@@ -41715,6 +42104,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,
@@ -41722,7 +42112,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,
@@ -41735,8 +42128,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 = {
@@ -41767,6 +42175,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) {
@@ -41789,36 +42203,25 @@ var Modal = /*@__PURE__*/getDefaultExportFromCjs(lib.exports);
 
 var LuiUpdatesSplashModal = function (props) {
     var _a;
-    var node = 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 = 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]);
-    useEffect(function () {
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [handleClickOutside]);
+    var _b = React__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.createElement(Modal, { key: props.id, isOpen: true, shouldCloseOnOverlayClick: true, onRequestClose: props.onClose, contentLabel: "Recent updates", className: "lui-scrim", style: { overlay: { backgroundColor: 'transparent' } } },
-        React__default.createElement("div", { ref: node, className: clsx$1('lui-large-feature-notification', props.wrapperClass) },
+    return (React__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.createElement("div", { className: clsx$1('lui-large-feature-notification', props.wrapperClass) },
             React__default.createElement("div", { className: "lui-feature-header" },
                 React__default.createElement("h1", null, props.header),
-                React__default.createElement("button", { "aria-label": "Close dialog", onClick: props.onClose },
-                    React__default.createElement("i", { className: "material-icons-round" }, "close"))),
+                React__default.createElement("button", { "aria-label": "Close dialog", onClick: handleClose },
+                    React__default.createElement(LuiIcon, { alt: "cross_icon", name: "ic_clear", status: "interactive", size: "md" }))),
             React__default.createElement("div", { className: "lui-feature-img" },
                 React__default.createElement("img", { className: "lui-hide-xs lui-hide-sm", alt: "What's new", src: props.bigImage }),
                 React__default.createElement("img", { className: "lui-hide-md lui-hide-lg lui-hide-xl", alt: "What's new", src: props.smallImage })),
@@ -57961,5 +58364,33 @@ function LuiSideMenuItem(_a) {
             React__default.createElement("span", { className: "navText" }, label))));
 }
 
-export { CheckboxItemRenderer, FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuItem, LuiComboSelect, LuiControlledMenu, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuOption, LuiDrawerMenuOptions, LuiDrawerMenuSection, LuiDropdownMenu, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, FloatingWindowContextProvider as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useLOLGlobalClientRefContext, useLOLUserContext, useFloatingWindow as useLuiFloatingWindow, useShowLUIMessage };
+var breakpoints = {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    xxl: 1600
+};
+var breakpointQuery = {
+    up: function (bp) { return "(min-width: ".concat(breakpoints[bp], "px)"); },
+    down: function (bp) { return "(max-width: ".concat(breakpoints[bp], "px)"); },
+    between: function (bp1, bp2) {
+        return "(min-width: ".concat(breakpoints[bp1], "px) and (max-width: ").concat(breakpoints[bp2], "px)");
+    }
+};
+var useMediaQuery = function (query) {
+    var _a = useState(false), matches = _a[0], setMatches = _a[1];
+    useEffect(function () {
+        var media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        var listener = function () { return setMatches(media.matches); };
+        window.addEventListener('resize', listener);
+        return function () { return window.removeEventListener('resize', listener); };
+    }, [matches, query]);
+    return matches;
+};
+
+export { CheckboxItemRenderer, FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, FloatingWindowContextProvider as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, breakpointQuery, breakpoints, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useLOLGlobalClientRefContext, useLOLUserContext, useFloatingWindow as useLuiFloatingWindow, useMediaQuery, useShowLUIMessage };
 //# sourceMappingURL=lui.esm.js.map