@dnb/eufemia 9.16.3 → 9.18.0

package/es/components/modal/ModalContent.js

@@ -2,32 +2,77 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["triggeredBy"],
-      _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
+      _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import keycode from 'keycode';
 import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from './bodyScrollLock';
 import { warn, isTrue, makeUniqueId, InteractionInvalidation, findElementInChildren, combineLabelledBy, combineDescribedBy, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
 import ScrollView from '../../fragments/scroll-view/ScrollView';
 import ModalContext from './ModalContext';
-import ModalHeader, { ModalHeaderBar } from './ModalHeader';
-import { IS_IOS, IS_SAFARI, IS_MAC } from '../../shared/helpers';
+import ModalHeader from './components/ModalHeader';
+import ModalHeaderBar from './components/ModalHeaderBar';
+import { IS_IOS, IS_SAFARI, IS_MAC, isAndroid } from '../../shared/helpers';
+import { getListOfModalRoots, getModalRoot, addToIndex, removeFromIndex } from './helpers';
 export default class ModalContent extends React.PureComponent {
   constructor(props) {
     super(props);
 
     _defineProperty(this, "state", {
       triggeredBy: null,
-      triggeredByEvent: null
+      triggeredByEvent: null,
+      color: null
+    });
+
+    _defineProperty(this, "_contentRef", void 0);
+
+    _defineProperty(this, "_id", void 0);
+
+    _defineProperty(this, "_lockTimeout", void 0);
+
+    _defineProperty(this, "_focusTimeout", void 0);
+
+    _defineProperty(this, "_androidFocusTimeout", void 0);
+
+    _defineProperty(this, "_ii", void 0);
+
+    _defineProperty(this, "_iiLocal", void 0);
+
+    _defineProperty(this, "lockBody", () => {
+      const modalRoots = getListOfModalRoots();
+      const firstLevel = modalRoots[0];
+
+      if (firstLevel === this) {
+        this._ii = new InteractionInvalidation();
+
+        this._ii.setBypassSelector(['.dnb-modal__content *', `#dnb-modal-${this.props.root_id || 'root'} *`].filter(Boolean));
+
+        this._ii.activate();
+      } else {
+        modalRoots.forEach(modal => {
+          if (modal !== this && typeof modal._iiLocal === 'undefined' && typeof modal._contentRef !== 'undefined') {
+            modal._iiLocal = new InteractionInvalidation();
+
+            modal._iiLocal.activate(modal._contentRef.current);
+          }
+        });
+      }
+
+      if (typeof document !== 'undefined') {
+        document.addEventListener('keydown', this.onKeyDownHandler);
+      }
     });
 
     _defineProperty(this, "_androidFocusHelper", () => {
+      const {
+        animation_duration = null
+      } = this.props;
+      const timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
       clearTimeout(this._androidFocusTimeout);
       this._androidFocusTimeout = setTimeout(() => {
         try {
@@ -37,37 +82,37 @@ export default class ModalContent extends React.PureComponent {
             document.activeElement.scrollIntoView();
           }
         } catch (e) {}
-      }, 100);
+      }, timeoutDuration / 2);
     });
 
-    _defineProperty(this, "preventClick", e => {
-      if (e) {
-        e.stopPropagation();
+    _defineProperty(this, "preventClick", event => {
+      if (event) {
+        event.stopPropagation();
       }
     });
 
-    _defineProperty(this, "onCloseClickHandler", e => {
-      this.closeModal(e, {
+    _defineProperty(this, "onCloseClickHandler", event => {
+      this.closeModalContent(event, {
         triggeredBy: 'button'
       });
     });
 
-    _defineProperty(this, "onContentClickHandler", e => {
-      this.closeModal(e, {
+    _defineProperty(this, "onContentClickHandler", event => {
+      this.closeModalContent(event, {
         triggeredBy: 'overlay',
         ifIsLatest: false
       });
     });
 
-    _defineProperty(this, "onKeyDownHandler", e => {
-      switch (keycode(e)) {
+    _defineProperty(this, "onKeyDownHandler", event => {
+      switch (keycode(event)) {
         case 'esc':
           {
-            const mostCurrent = getListOfModalRoots(-1);
+            const mostCurrent = getModalRoot(-1);
 
             if (mostCurrent === this) {
-              e.preventDefault();
-              this.closeModal(e, {
+              event.preventDefault();
+              this.closeModalContent(event, {
                 triggeredBy: 'keyboard'
               });
             }
@@ -78,6 +123,7 @@ export default class ModalContent extends React.PureComponent {
     });
 
     _defineProperty(this, "setBackgroundColor", color => {
+      document.documentElement.style.setProperty('--modal-background-color', color);
       this.setState({
         color
       });
@@ -85,50 +131,45 @@ export default class ModalContent extends React.PureComponent {
 
     this._contentRef = React.createRef();
     this._id = props.id;
-    this._ii = new InteractionInvalidation();
-
-    this._ii.setBypassSelector(['.dnb-modal__content', `#dnb-modal-${props.root_id || 'root'}`]);
   }
 
   componentDidMount() {
-    this.addToIndex();
-    const modalRoots = getListOfModalRoots();
-    const firstLevel = modalRoots[0];
+    const {
+      id = null,
+      no_animation = false,
+      animation_duration = null
+    } = this.props;
+    const timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
+    addToIndex(this);
     this.removeScrollPossibility();
-
-    if (firstLevel === this) {
-      this._ii.activate();
-    } else {
-      modalRoots.forEach(modal => {
-        if (modal !== this && typeof modal._iiLocal === 'undefined' && typeof modal._contentRef !== 'undefined') {
-          modal._iiLocal = new InteractionInvalidation();
-
-          modal._iiLocal.activate(modal._contentRef.current);
-        }
-      });
-    }
-
-    this.setAndroidFocusHelper();
     this.setFocus();
-    const id = this.props.id;
+    this.setAndroidFocusHelper();
     dispatchCustomElementEvent(this, 'on_open', {
       id
     });
 
-    if (typeof document !== 'undefined') {
-      document.addEventListener('keydown', this.onKeyDownHandler);
+    if (isTrue(no_animation) || process.env.NODE_ENV === 'test') {
+      this.lockBody();
+    } else {
+      this._lockTimeout = setTimeout(this.lockBody, timeoutDuration * 1.2);
     }
   }
 
   componentWillUnmount() {
     clearTimeout(this._focusTimeout);
+    clearTimeout(this._lockTimeout);
+    this.removeLocks();
+  }
+
+  removeLocks() {
     const modalRoots = getListOfModalRoots();
     const firstLevel = modalRoots[0];
-    this.removeFromIndex();
+    removeFromIndex(this);
 
     if (firstLevel === this) {
-      this._ii.revert();
+      var _this$_ii;
 
+      (_this$_ii = this._ii) === null || _this$_ii === void 0 ? void 0 : _this$_ii.revert();
       this.revertScrollPossibility();
     } else {
       try {
@@ -162,7 +203,7 @@ export default class ModalContent extends React.PureComponent {
   }
 
   setAndroidFocusHelper() {
-    if (typeof window !== 'undefined' && typeof navigator !== 'undefined' && /Android/.test(navigator.appVersion)) {
+    if (typeof window !== 'undefined' && isAndroid()) {
       window.addEventListener('resize', this._androidFocusHelper);
     }
   }
@@ -172,45 +213,14 @@ export default class ModalContent extends React.PureComponent {
     clearTimeout(this._androidFocusTimeout);
   }
 
-  addToIndex() {
-    if (typeof window !== 'undefined') {
-      try {
-        if (!Array.isArray(window.__modalStack)) {
-          window.__modalStack = [];
-        }
-
-        window.__modalStack.push(this);
-      } catch (e) {
-        warn(e);
-      }
-    }
-  }
-
-  removeFromIndex() {
-    if (typeof window !== 'undefined') {
-      try {
-        if (!Array.isArray(window.__modalStack)) {
-          window.__modalStack = [];
-        }
-
-        window.__modalStack = window.__modalStack.filter(cur => cur !== this);
-
-        if (!window.__modalStack.length) {
-          delete window.__modalStack;
-        }
-      } catch (e) {
-        warn(e);
-      }
-    }
-  }
-
   setFocus() {
     const {
-      focus_selector,
-      no_animation,
-      animation_duration
+      focus_selector = null,
+      no_animation = null,
+      animation_duration = null
     } = this.props;
     const elem = this._contentRef.current;
+    const timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
 
     if (elem) {
       clearTimeout(this._focusTimeout);
@@ -231,7 +241,7 @@ export default class ModalContent extends React.PureComponent {
         } catch (e) {
           warn(e);
         }
-      }, isTrue(no_animation) ? 0 : parseFloat(animation_duration) || 0);
+      }, isTrue(no_animation) ? 0 : timeoutDuration || 0);
     }
   }
 
@@ -246,7 +256,7 @@ export default class ModalContent extends React.PureComponent {
     clearAllBodyScrollLocks();
   }
 
-  closeModal(event, _ref) {
+  closeModalContent(event, _ref) {
     var _event$persist;
 
     let {
@@ -268,7 +278,7 @@ export default class ModalContent extends React.PureComponent {
   render() {
     const _this$props = this.props,
           {
-      mode,
+      mode = 'modal',
       hide,
       title,
       labelled_by,
@@ -276,20 +286,18 @@ export default class ModalContent extends React.PureComponent {
       modal_content,
       bar_content,
       id: _id,
-      close_title,
-      dialog_title,
-      hide_close_button,
+      close_title = 'Lukk',
+      dialog_title = 'Vindu',
+      hide_close_button = false,
       close_button_attributes,
-      spacing,
-      prevent_close,
-      open_delay,
-      prevent_core_style,
+      spacing = true,
+      prevent_core_style = false,
       animation_duration,
-      no_animation,
-      no_animation_on_mobile,
+      no_animation = false,
+      no_animation_on_mobile = false,
       min_width,
       max_width,
-      fullscreen,
+      fullscreen = 'auto',
       align_content,
       container_placement,
       closeModal,
@@ -298,31 +306,30 @@ export default class ModalContent extends React.PureComponent {
       content_class,
       overlay_class,
       content_id,
-      toggleOpenClose,
       children
     } = _this$props,
           rest = _objectWithoutProperties(_this$props, _excluded2);
 
-    const contentId = content_id || makeUniqueId();
-    const style = this.state.color ? {
-      '--modal-background-color': `var(--color-${this.state.color})`
-    } : null;
+    const {
+      color
+    } = this.state;
+    const contentId = content_id || makeUniqueId('modal-');
     let minWidth = min_width;
     let maxWidth = max_width;
 
-    if (minWidth && !maxWidth && parseFloat(minWidth) > 0) {
+    if (minWidth && !maxWidth && parseFloat(String(minWidth)) > 0) {
       maxWidth = 0;
-    } else if (maxWidth && !minWidth && parseFloat(maxWidth) > 0) {
+    } else if (maxWidth && !minWidth && parseFloat(String(maxWidth)) > 0) {
       minWidth = 0;
     }
 
     const useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS);
     const contentParams = {
       role: useDialogRole ? 'dialog' : 'region',
-      'aria-modal': useDialogRole ? 'true' : undefined,
+      'aria-modal': useDialogRole ? true : undefined,
       'aria-labelledby': combineLabelledBy(this.props, title ? contentId + '-title' : null, labelled_by),
       'aria-describedby': combineDescribedBy(this.props, contentId + '-content'),
-      'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,
+      'aria-label': !title && !labelled_by ? dialog_title : undefined,
       className: classnames('dnb-modal__content', (container_placement || mode === 'drawer') && `dnb-modal__content--${container_placement || 'right'}`, isTrue(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, mode && `dnb-modal__content--${mode}`, hide && 'dnb-modal__content--hide', isTrue(spacing) && 'dnb-modal__content--spacing', align_content && `dnb-modal__content__align--${align_content}`, isTrue(no_animation) && 'dnb-modal__content--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__content--no-animation-on-mobile'),
       onClick: this.onContentClickHandler
     };
@@ -338,125 +345,38 @@ export default class ModalContent extends React.PureComponent {
       onKeyDown: this.onKeyDownHandler
     }, rest);
 
-    const overlayParams = {
-      className: classnames('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && `dnb-modal__overlay--${mode}`, isTrue(no_animation) && 'dnb-modal__overlay--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile')
-    };
     validateDOMAttributes(this.props, innerParams);
-    const bar = findElementInChildren(modal_content, cur => cur.type === ModalHeaderBar) ? null : React.createElement(ModalHeaderBar, null, bar_content);
-    const header = findElementInChildren(modal_content, cur => cur.type === ModalHeader) ? null : React.createElement(ModalHeader, {
-      title: title
-    }, header_content);
-    const content = React.createElement("div", {
-      id: contentId + '-content',
-      className: "dnb-modal__content__wrapper"
-    }, modal_content);
+    const barExists = findElementInChildren(modal_content, cur => cur.type === ModalHeaderBar);
+    const headerExists = findElementInChildren(modal_content, cur => cur.type === ModalHeader);
     return React.createElement(ModalContext.Provider, {
-      value: _objectSpread(_objectSpread({
-        id: contentId,
-        setBackgroundColor: this.setBackgroundColor
-      }, this.props), {}, {
+      value: {
+        id: this.props.id,
+        title,
+        hide_close_button,
+        close_button_attributes,
+        close_title,
+        mode,
+        setBackgroundColor: this.setBackgroundColor,
         onCloseClickHandler: this.onCloseClickHandler
-      })
+      }
     }, React.createElement("div", _extends({
       id: contentId
     }, contentParams), React.createElement(ScrollView, innerParams, React.createElement("div", {
-      tabIndex: "-1",
+      tabIndex: -1,
       className: "dnb-modal__content__spacing dnb-no-focus",
-      style: style,
+      style: color ? {
+        '--modal-background-color': `var(--color-${color})`
+      } : null,
       ref: this._contentRef
-    }, bar, header, content))), React.createElement("span", _extends({}, overlayParams, {
+    }, !barExists && React.createElement(ModalHeaderBar, null, bar_content), !headerExists && React.createElement(ModalHeader, {
+      title: title
+    }, header_content), React.createElement("div", {
+      id: contentId + '-content',
+      className: "dnb-modal__content__wrapper"
+    }, modal_content)))), React.createElement("span", {
+      className: classnames('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && `dnb-modal__overlay--${mode}`, isTrue(no_animation) && 'dnb-modal__overlay--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
       "aria-hidden": "true"
-    })));
-  }
-
-}
-
-_defineProperty(ModalContent, "defaultProps", {
-  mode: null,
-  bar_content: null,
-  header_content: null,
-  hide: null,
-  id: null,
-  root_id: null,
-  labelled_by: null,
-  focus_selector: null,
-  content_id: null,
-  title: null,
-  close_title: null,
-  dialog_title: null,
-  hide_close_button: null,
-  close_button_attributes: null,
-  spacing: null,
-  prevent_close: null,
-  prevent_core_style: null,
-  animation_duration: null,
-  no_animation: null,
-  no_animation_on_mobile: null,
-  min_width: null,
-  max_width: null,
-  fullscreen: null,
-  align_content: null,
-  container_placement: null,
-  class: null,
-  overlay_class: null,
-  content_class: null,
-  closeModal: null,
-  className: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalContent.propTypes = {
-  modal_content: PropTypes.node.isRequired,
-  mode: PropTypes.oneOf(['modal', 'drawer']),
-  bar_content: PropTypes.node,
-  header_content: PropTypes.node,
-  hide: PropTypes.bool,
-  id: PropTypes.string,
-  root_id: PropTypes.string,
-  labelled_by: PropTypes.string,
-  focus_selector: PropTypes.string,
-  content_id: PropTypes.string,
-  title: PropTypes.node,
-  close_title: PropTypes.string,
-  dialog_title: PropTypes.string,
-  hide_close_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  close_button_attributes: PropTypes.object,
-  spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  prevent_close: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  prevent_core_style: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  animation_duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  no_animation_on_mobile: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  min_width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  max_width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  fullscreen: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  align_content: PropTypes.string,
-  container_placement: PropTypes.string,
-  class: PropTypes.string,
-  content_class: PropTypes.string,
-  overlay_class: PropTypes.string,
-  closeModal: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
-} : void 0;
-export function getListOfModalRoots(index = null) {
-  if (typeof window !== 'undefined') {
-    try {
-      const stack = window.__modalStack || [];
-
-      if (index !== null) {
-        if (index === -1 && stack.length) {
-          return stack[stack.length - 1];
-        } else if (index > -1) {
-          return stack[index];
-        }
-      }
-
-      return stack;
-    } catch (e) {
-      warn(e);
-    }
+    }));
   }
 
-  return [];
 }