@nulogy/components 8.1.4 → 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;
 
@@ -42421,41 +42440,6 @@
   var SHOW_DURATION = 2000; // in ms
 
   var ANIMATE_OUT_DURATION = 1000;
-  var TOAST_Y_MAX = "0px";
-  var TOAST_Y_MIN = "-32px";
-  var ACTIVE_Z_INDEX = 2;
-  var INACTIVE_Z_INDEX = ACTIVE_Z_INDEX - 1;
-  var SLIDE_IN_STYLES = {
-    transform: "translateY(" + TOAST_Y_MIN + ")",
-    transition: "transform 0.15s ease-out",
-    zIndex: ACTIVE_Z_INDEX
-  };
-  var SLIDE_OUT_STYLES = {
-    transform: "translateY(" + TOAST_Y_MAX + ")",
-    transition: "transform 0.9s ease-in",
-    zIndex: INACTIVE_Z_INDEX,
-    pointerEvents: "none"
-  };
-  var FADE_IN_STYLES = {
-    opacity: 1,
-    transition: "opacity 0.25s linear"
-  };
-  var FADE_OUT_STYLES = {
-    transition: "opacity 1s linear"
-  };
-  var AnimatedAlert = styled__default['default'](Alert).withConfig({
-    displayName: "Toast__AnimatedAlert",
-    componentId: "sc-1cheg2k-0"
-  })(function (_ref) {
-    var visible = _ref.visible,
-        theme = _ref.theme;
-    return Object.assign({
-      boxShadow: theme.shadows.medium,
-      minWidth: "200px",
-      maxWidth: "600px",
-      opacity: 0
-    }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
-  });
   var Toast = function Toast(_a) {
     var triggered = _a.triggered,
         onHide = _a.onHide,
@@ -42532,8 +42516,9 @@
       hideToast(0);
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
-      visible: visible,
+    return /*#__PURE__*/React__default['default'].createElement(AnimatePresence, {
+      initial: false
+    }, visible && /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
       onMouseEnter: onMouseIn,
       onFocus: onMouseIn,
       onMouseLeave: onMouseOut,
@@ -42545,15 +42530,37 @@
       marginLeft: "auto",
       marginRight: "auto",
       width: "fit-content",
-      transform: "translateY(" + TOAST_Y_MIN + ")"
-    }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
-      zIndex: zIndex
-    }), /*#__PURE__*/React__default['default'].createElement(AnimatedAlert, Object.assign({
-      visible: visible,
+      zIndex: zIndex,
+      boxShadow: "medium",
+      layout: true,
+      initial: {
+        opacity: 0,
+        y: 50
+      },
+      animate: {
+        opacity: 1,
+        y: -30,
+        transition: {
+          type: "spring",
+          bounce: 0.4,
+          duration: 0.6
+        }
+      },
+      exit: {
+        y: 50,
+        opacity: 0,
+        transition: {
+          ease: "easeOut",
+          duration: 0.15
+        }
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Alert, Object.assign({
+      minWidth: "200px",
+      maxWidth: "600px",
       isCloseable: isCloseable,
       onClose: handleCloseButtonClick,
       controlled: true
-    }, props), children));
+    }, props), children)));
   };
   Toast.defaultProps = {
     triggered: false,

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;
 
@@ -42395,41 +42414,6 @@ TruncatedText.defaultProps = {
 var SHOW_DURATION = 2000; // in ms
 
 var ANIMATE_OUT_DURATION = 1000;
-var TOAST_Y_MAX = "0px";
-var TOAST_Y_MIN = "-32px";
-var ACTIVE_Z_INDEX = 2;
-var INACTIVE_Z_INDEX = ACTIVE_Z_INDEX - 1;
-var SLIDE_IN_STYLES = {
-  transform: "translateY(" + TOAST_Y_MIN + ")",
-  transition: "transform 0.15s ease-out",
-  zIndex: ACTIVE_Z_INDEX
-};
-var SLIDE_OUT_STYLES = {
-  transform: "translateY(" + TOAST_Y_MAX + ")",
-  transition: "transform 0.9s ease-in",
-  zIndex: INACTIVE_Z_INDEX,
-  pointerEvents: "none"
-};
-var FADE_IN_STYLES = {
-  opacity: 1,
-  transition: "opacity 0.25s linear"
-};
-var FADE_OUT_STYLES = {
-  transition: "opacity 1s linear"
-};
-var AnimatedAlert = styled(Alert).withConfig({
-  displayName: "Toast__AnimatedAlert",
-  componentId: "sc-1cheg2k-0"
-})(function (_ref) {
-  var visible = _ref.visible,
-      theme = _ref.theme;
-  return Object.assign({
-    boxShadow: theme.shadows.medium,
-    minWidth: "200px",
-    maxWidth: "600px",
-    opacity: 0
-  }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
-});
 var Toast = function Toast(_a) {
   var triggered = _a.triggered,
       onHide = _a.onHide,
@@ -42506,8 +42490,9 @@ var Toast = function Toast(_a) {
     hideToast(0);
   };
 
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
-    visible: visible,
+  return /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    initial: false
+  }, visible && /*#__PURE__*/React__default.createElement(AnimatedBox, {
     onMouseEnter: onMouseIn,
     onFocus: onMouseIn,
     onMouseLeave: onMouseOut,
@@ -42519,15 +42504,37 @@ var Toast = function Toast(_a) {
     marginLeft: "auto",
     marginRight: "auto",
     width: "fit-content",
-    transform: "translateY(" + TOAST_Y_MIN + ")"
-  }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
-    zIndex: zIndex
-  }), /*#__PURE__*/React__default.createElement(AnimatedAlert, Object.assign({
-    visible: visible,
+    zIndex: zIndex,
+    boxShadow: "medium",
+    layout: true,
+    initial: {
+      opacity: 0,
+      y: 50
+    },
+    animate: {
+      opacity: 1,
+      y: -30,
+      transition: {
+        type: "spring",
+        bounce: 0.4,
+        duration: 0.6
+      }
+    },
+    exit: {
+      y: 50,
+      opacity: 0,
+      transition: {
+        ease: "easeOut",
+        duration: 0.15
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Alert, Object.assign({
+    minWidth: "200px",
+    maxWidth: "600px",
     isCloseable: isCloseable,
     onClose: handleCloseButtonClick,
     controlled: true
-  }, props), children));
+  }, props), children)));
 };
 Toast.defaultProps = {
   triggered: false,

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.4",
+  "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",