@nulogy/components 8.1.5 → 8.1.7

package/dist/main.js

@@ -23679,7 +23679,7 @@
    * http://api.jqueryui.com/category/ui-core/
    */
 
-  var tabbableNode = /input|select|textarea|button|object/;
+  var tabbableNode = /input|select|textarea|button|object|iframe/;
 
   function hidesContents(element) {
     var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;
@@ -23702,8 +23702,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 +23729,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 +23772,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 +23882,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 +23902,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 +23943,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 +24045,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 +24185,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 */
 
@@ -25529,7 +25546,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 +25572,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 +25595,6 @@
     isOpen: true,
     title: undefined,
     ariaLabel: undefined,
-    children: undefined,
     onRequestClose: undefined,
     closeAriaLabel: undefined,
     onAfterOpen: undefined,
@@ -25590,7 +25608,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,7 @@ exports.default = findTabbableDescendants;
  * http://api.jqueryui.com/category/ui-core/
  */
 
-var tabbableNode = /input|select|textarea|button|object/;
+var tabbableNode = /input|select|textarea|button|object|iframe/;
 
 function hidesContents(element) {
   var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0;
@@ -23676,8 +23676,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 +23703,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 +23746,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 +23856,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 +23876,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 +23917,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 +24019,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 +24159,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 */
 
@@ -25503,7 +25520,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 +25546,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 +25569,6 @@ Modal.defaultProps = {
   isOpen: true,
   title: undefined,
   ariaLabel: undefined,
-  children: undefined,
   onRequestClose: undefined,
   closeAriaLabel: undefined,
   onAfterOpen: undefined,
@@ -25564,7 +25582,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.7",
   "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",