@nulogy/components 8.1.5 → 8.1.8

package/dist/main.js

@@ -23679,7 +23679,16 @@
    * 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;
@@ -23690,9 +23699,8 @@
     try {
       // 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";
+      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");
@@ -23702,8 +23710,13 @@
 
   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;
     }
@@ -23724,7 +23737,10 @@
   }
 
   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"];
   });
@@ -23764,13 +23780,14 @@
 
   /* istanbul ignore next */
   function log() {
-    if (process.env.NODE_ENV === "production") return;
-    console.log("focusManager ----------");
-    focusLaterElements.forEach(function (f) {
-      var check = f || {};
-      console.log(check.nodeName, check.className, check.id);
-    });
-    console.log("end focusManager ----------");
+    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 */
 
@@ -23873,6 +23890,12 @@
 
   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);
 
@@ -23887,19 +23910,20 @@
     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;
     }
 
@@ -23927,7 +23951,7 @@
     // the focus
     if (!isSafariDesktop) return;
 
-    var x = tabbable.indexOf(document.activeElement);
+    var x = tabbable.indexOf(activeElement);
 
     if (x > -1) {
       x += shiftKey ? -1 : 1;
@@ -24029,11 +24053,12 @@
 
   /* istanbul ignore next */
   function log() {
-    if (process.env.NODE_ENV === "production") return;
-    var check = globalElement || {};
-    console.log("ariaAppHider ----------");
-    console.log(check.nodeName, check.className, check.id);
-    console.log("end ariaAppHider ----------");
+    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 */
 
@@ -24168,26 +24193,26 @@
 
   /* istanbul ignore next */
   function log() {
-    if (process.env.NODE_ENV === "production") return;
-
-    var classes = document.getElementsByTagName("html")[0].className;
-    var buffer = "Show tracked classes:\n\n";
+    if (process.env.NODE_ENV !== "production") {
+      var classes = document.getElementsByTagName("html")[0].className;
+      var buffer = "Show tracked classes:\n\n";
 
-    buffer += "<html /> (" + classes + "):\n";
-    for (var x in htmlClassList) {
-      buffer += "  " + x + " " + htmlClassList[x] + "\n";
-    }
+      buffer += "<html /> (" + classes + "):\n  ";
+      for (var x in htmlClassList) {
+        buffer += "  " + x + " " + htmlClassList[x] + "\n  ";
+      }
 
-    classes = document.body.className;
+      classes = document.body.className;
 
-    buffer += "\n\ndoc.body (" + classes + "):\n";
-    for (var _x in docBodyClassList) {
-      buffer += "  " + _x + " " + docBodyClassList[_x] + "\n";
-    }
+      buffer += "\n\ndoc.body (" + classes + "):\n  ";
+      for (var _x in docBodyClassList) {
+        buffer += "  " + _x + " " + docBodyClassList[_x] + "\n  ";
+      }
 
-    buffer += "\n";
+      buffer += "\n";
 
-    console.log(buffer);
+      console.log(buffer);
+    }
   }
   /* eslint-enable no-console */
 
@@ -24515,8 +24540,17 @@
     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;
 
@@ -24543,13 +24577,16 @@
             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) {
@@ -24631,11 +24668,11 @@
       };
 
       _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);
         }
@@ -24771,13 +24808,16 @@
             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;
@@ -24857,6 +24897,7 @@
     }),
     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,
@@ -25529,7 +25570,8 @@
         appElement = _ref4.appElement,
         ariaHideApp = _ref4.ariaHideApp,
         footerContent = _ref4.footerContent,
-        closeAriaLabel = _ref4.closeAriaLabel;
+        closeAriaLabel = _ref4.closeAriaLabel,
+        parentSelector = _ref4.parentSelector;
     var modalHasHeader = onRequestClose || title;
     var themeContext = React.useContext(styled.ThemeContext);
     return /*#__PURE__*/React__default['default'].createElement(StyledReactModal, {
@@ -25554,9 +25596,10 @@
         overlay: overlayStyle(themeContext)
       },
       appElement: appElement,
-      ariaHideApp: ariaHideApp
+      ariaHideApp: ariaHideApp,
+      parentSelector: parentSelector
     }, /*#__PURE__*/React__default['default'].createElement(PreventBodyElementScrolling, null, modalHasHeader && /*#__PURE__*/React__default['default'].createElement(ModalHeader, {
-      hasCloseButton: onRequestClose
+      hasCloseButton: Boolean(onRequestClose)
     }, title ? /*#__PURE__*/React__default['default'].createElement(Heading2, {
       id: "modal-title",
       mb: "none"
@@ -25576,7 +25619,6 @@
     isOpen: true,
     title: undefined,
     ariaLabel: undefined,
-    children: undefined,
     onRequestClose: undefined,
     closeAriaLabel: undefined,
     onAfterOpen: undefined,
@@ -25590,7 +25632,8 @@
     id: undefined,
     appElement: undefined,
     ariaHideApp: true,
-    footerContent: undefined
+    footerContent: undefined,
+    parentSelector: undefined
   };
   Modal.setAppElement = ReactModal.setAppElement;
 

package/dist/main.module.js

@@ -23653,7 +23653,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;
@@ -23664,9 +23673,8 @@ function hidesContents(element) {
   try {
     // 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";
+    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");
@@ -23676,8 +23684,13 @@ function hidesContents(element) {
 
 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;
   }
@@ -23698,7 +23711,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"];
 });
@@ -23738,13 +23754,14 @@ function resetState() {
 
 /* istanbul ignore next */
 function log() {
-  if (process.env.NODE_ENV === "production") return;
-  console.log("focusManager ----------");
-  focusLaterElements.forEach(function (f) {
-    var check = f || {};
-    console.log(check.nodeName, check.className, check.id);
-  });
-  console.log("end focusManager ----------");
+  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 */
 
@@ -23847,6 +23864,12 @@ var _tabbable2 = _interopRequireDefault(tabbable_1);
 
 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);
 
@@ -23861,19 +23884,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;
   }
 
@@ -23901,7 +23925,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;
@@ -24003,11 +24027,12 @@ function resetState() {
 
 /* istanbul ignore next */
 function log() {
-  if (process.env.NODE_ENV === "production") return;
-  var check = globalElement || {};
-  console.log("ariaAppHider ----------");
-  console.log(check.nodeName, check.className, check.id);
-  console.log("end ariaAppHider ----------");
+  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 */
 
@@ -24142,26 +24167,26 @@ function resetState() {
 
 /* istanbul ignore next */
 function log() {
-  if (process.env.NODE_ENV === "production") return;
-
-  var classes = document.getElementsByTagName("html")[0].className;
-  var buffer = "Show tracked classes:\n\n";
+  if (process.env.NODE_ENV !== "production") {
+    var classes = document.getElementsByTagName("html")[0].className;
+    var buffer = "Show tracked classes:\n\n";
 
-  buffer += "<html /> (" + classes + "):\n";
-  for (var x in htmlClassList) {
-    buffer += "  " + x + " " + htmlClassList[x] + "\n";
-  }
+    buffer += "<html /> (" + classes + "):\n  ";
+    for (var x in htmlClassList) {
+      buffer += "  " + x + " " + htmlClassList[x] + "\n  ";
+    }
 
-  classes = document.body.className;
+    classes = document.body.className;
 
-  buffer += "\n\ndoc.body (" + classes + "):\n";
-  for (var _x in docBodyClassList) {
-    buffer += "  " + _x + " " + docBodyClassList[_x] + "\n";
-  }
+    buffer += "\n\ndoc.body (" + classes + "):\n  ";
+    for (var _x in docBodyClassList) {
+      buffer += "  " + _x + " " + docBodyClassList[_x] + "\n  ";
+    }
 
-  buffer += "\n";
+    buffer += "\n";
 
-  console.log(buffer);
+    console.log(buffer);
+  }
 }
 /* eslint-enable no-console */
 
@@ -24489,8 +24514,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;
 
@@ -24517,13 +24551,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) {
@@ -24605,11 +24642,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);
       }
@@ -24745,13 +24782,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;
@@ -24831,6 +24871,7 @@ 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,
@@ -25503,7 +25544,8 @@ var Modal = function Modal(_ref4) {
       appElement = _ref4.appElement,
       ariaHideApp = _ref4.ariaHideApp,
       footerContent = _ref4.footerContent,
-      closeAriaLabel = _ref4.closeAriaLabel;
+      closeAriaLabel = _ref4.closeAriaLabel,
+      parentSelector = _ref4.parentSelector;
   var modalHasHeader = onRequestClose || title;
   var themeContext = useContext(ThemeContext$1);
   return /*#__PURE__*/React__default.createElement(StyledReactModal, {
@@ -25528,9 +25570,10 @@ var Modal = function Modal(_ref4) {
       overlay: overlayStyle(themeContext)
     },
     appElement: appElement,
-    ariaHideApp: ariaHideApp
+    ariaHideApp: ariaHideApp,
+    parentSelector: parentSelector
   }, /*#__PURE__*/React__default.createElement(PreventBodyElementScrolling, null, modalHasHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
-    hasCloseButton: onRequestClose
+    hasCloseButton: Boolean(onRequestClose)
   }, title ? /*#__PURE__*/React__default.createElement(Heading2, {
     id: "modal-title",
     mb: "none"
@@ -25550,7 +25593,6 @@ Modal.defaultProps = {
   isOpen: true,
   title: undefined,
   ariaLabel: undefined,
-  children: undefined,
   onRequestClose: undefined,
   closeAriaLabel: undefined,
   onAfterOpen: undefined,
@@ -25564,7 +25606,8 @@ Modal.defaultProps = {
   id: undefined,
   appElement: undefined,
   ariaHideApp: true,
-  footerContent: undefined
+  footerContent: undefined,
+  parentSelector: undefined
 };
 Modal.setAppElement = ReactModal.setAppElement;
 

package/dist/src/Modal/Modal.d.ts

@@ -1,3 +1,25 @@
-import ReactModal from "react-modal";
-declare const Modal: ReactModal;
+import React from "react";
+declare type ModalProps = {
+    isOpen?: boolean;
+    title?: string;
+    ariaLabel?: string;
+    onRequestClose?: (...args: any[]) => any;
+    closeAriaLabel?: string;
+    onAfterOpen?: (...args: any[]) => any;
+    shouldFocusAfterRender?: boolean;
+    shouldReturnFocusAfterClose?: boolean;
+    ariaDescribedBy?: string;
+    maxWidth?: string;
+    portalClassName?: string;
+    overlayClassName?: string;
+    className?: string;
+    id?: string;
+    appElement?: JSX.Element;
+    ariaHideApp?: boolean;
+    footerContent?: React.ReactNode;
+    parentSelector?: (...args: any) => HTMLElement;
+};
+declare const Modal: React.FC<ModalProps> & {
+    setAppElement: (element: string | HTMLElement) => void;
+};
 export default Modal;

package/dist/src/Modal/Modal.story.d.ts

@@ -52,6 +52,12 @@ export declare const WithSelectAndScrollingContent: {
         name: string;
     };
 };
+export declare const WithParentSelector: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
 export declare const ExampleControlledModal: {
     (): JSX.Element;
     story: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.1.5",
+  "version": "8.1.8",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -154,9 +154,9 @@
     "react-fast-compare": "^3.2.0",
     "react-i18next": "^11.14.2",
     "react-input-autosize": "^2.2.2",
-    "react-modal": "^3.10.1",
+    "react-modal": "^3.14.4",
     "react-popper": "1.3.7",
-    "react-popper-latest": "npm:react-popper@2.2.4",
+    "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^7.1.2",
     "react-windowed-select": "2.0.2",
     "smoothscroll-polyfill": "^0.4.4",