@dnb/eufemia 9.16.3 → 9.18.0

package/es/components/modal/Modal.js

@@ -1,27 +1,26 @@
 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 = ["root_id", "content_id", "id", "open_state", "open_delay", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"],
-      _excluded2 = ["children", "direct_dom_return"];
+const _excluded = ["root_id", "content_id", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
 
 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 ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { SuffixContext } from '../../shared/helpers/Suffix';
 import Context from '../../shared/Context';
 import { warn, isTrue, makeUniqueId, extendPropsWithContext, registerElement, processChildren, dispatchCustomElementEvent } from '../../shared/component-helper';
-import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
-import { buttonVariantPropType } from '../button/Button';
+import { createSpacingClasses } from '../space/SpacingHelper';
 import HelpButtonInstance from '../help-button/HelpButtonInstance';
-import ModalContent, { getListOfModalRoots } from './ModalContent';
-import ModalContext from './ModalContext';
-import ModalInner from './ModalInner';
-import ModalHeader, { ModalHeaderBar, CloseButton } from './ModalHeader';
+import { getListOfModalRoots, getModalRoot } from './helpers';
+import ModalInner from './components/ModalInner';
+import ModalHeader from './components/ModalHeader';
+import ModalHeaderBar from './components/ModalHeaderBar';
+import CloseButton from './components/CloseButton';
+import ModalRoot from './ModalRoot';
+export const ANIMATION_DURATION = 300;
 export default class Modal extends React.PureComponent {
   static enableWebComponent() {
     registerElement(Modal === null || Modal === void 0 ? void 0 : Modal.tagName, Modal, Modal.defaultProps);
@@ -37,29 +36,6 @@ export default class Modal extends React.PureComponent {
     return processChildren(props);
   }
 
-  static insertModalRoot(id) {
-    if (typeof window === 'undefined') {
-      return false;
-    }
-
-    try {
-      id = `dnb-modal-${id || 'root'}`;
-      window.__modalRoot = document.getElementById(id);
-
-      if (!window.__modalRoot) {
-        window.__modalRoot = document.createElement('div');
-
-        window.__modalRoot.setAttribute('id', id);
-
-        document.body.insertBefore(window.__modalRoot, document.body.firstChild);
-      }
-    } catch (e) {
-      warn('Modal: Could not insert dnb-modal-root', e);
-    }
-
-    return window.__modalRoot;
-  }
-
   static getDerivedStateFromProps(props, state) {
     if (props.open_state !== state._open_state) {
       switch (props.open_state) {
@@ -92,6 +68,24 @@ export default class Modal extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "_id", void 0);
+
+    _defineProperty(this, "_triggerRef", void 0);
+
+    _defineProperty(this, "_onUnmount", void 0);
+
+    _defineProperty(this, "_openTimeout", void 0);
+
+    _defineProperty(this, "_closeTimeout", void 0);
+
+    _defineProperty(this, "_sideEffectsTimeout", void 0);
+
+    _defineProperty(this, "_tryToOpenTimeout", void 0);
+
+    _defineProperty(this, "activeElement", void 0);
+
+    _defineProperty(this, "isInTransition", void 0);
+
     _defineProperty(this, "state", {
       hide: false,
       modalActive: false
@@ -103,6 +97,11 @@ export default class Modal extends React.PureComponent {
       }
 
       const toggleNow = () => {
+        const {
+          animation_duration = ANIMATION_DURATION,
+          no_animation = false
+        } = this.props;
+        const timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
         const modalActive = typeof showModal === 'boolean' ? showModal : !this.state.modalActive;
         this.isInTransition = true;
 
@@ -116,28 +115,32 @@ export default class Modal extends React.PureComponent {
           });
         };
 
-        if (modalActive === false && !isTrue(this.props.no_animation)) {
+        if (modalActive === false && !isTrue(no_animation)) {
           this.setState({
             hide: true
           });
-          clearTimeout(this._closeTimeout);
-          this._closeTimeout = setTimeout(doItNow, parseFloat(this.props.animation_duration));
+          this._closeTimeout = setTimeout(doItNow, timeoutDuration);
         } else {
           doItNow();
         }
       };
 
       const waitBeforeOpen = () => {
-        const delay = parseFloat(this.props.open_delay);
+        const {
+          open_delay,
+          no_animation
+        } = this.props;
+        const delay = typeof open_delay === 'string' ? parseFloat(open_delay) : open_delay;
 
-        if (delay > 0 && !isTrue(this.props.no_animation)) {
-          clearTimeout(this._openTimeout);
+        if (delay > 0 && !isTrue(no_animation)) {
           this._openTimeout = setTimeout(toggleNow, delay);
         } else {
           toggleNow();
         }
       };
 
+      clearTimeout(this._closeTimeout);
+      clearTimeout(this._openTimeout);
       const {
         open_modal
       } = this.props;
@@ -154,11 +157,16 @@ export default class Modal extends React.PureComponent {
     });
 
     _defineProperty(this, "handleSideEffects", () => {
-      const modalActive = this.state.modalActive;
+      const {
+        modalActive
+      } = this.state;
+      const {
+        close_modal
+      } = this.props;
 
       if (modalActive) {
-        if (typeof this.props.close_modal === 'function') {
-          const fn = this.props.close_modal(() => {
+        if (typeof close_modal === 'function') {
+          const fn = close_modal(() => {
             this.toggleOpenClose(null, false);
           }, this);
 
@@ -175,7 +183,7 @@ export default class Modal extends React.PureComponent {
           });
         }
 
-        if ((this.props.open_state === 'opened' || this.props.open_state === true) && this.activeElement) {
+        if ((this.props.open_state === 'opened' || this.props.open_state === true) && this.activeElement && this.activeElement instanceof HTMLElement) {
           try {
             this.activeElement.focus({
               preventScroll: true
@@ -184,13 +192,7 @@ export default class Modal extends React.PureComponent {
           } catch (e) {}
         }
 
-        const last = getListOfModalRoots(-1);
-
-        if (last) {
-          this.setActiveState(last._id);
-        } else if (getListOfModalRoots().length <= 1) {
-          this.setActiveState(false);
-        }
+        this.removeActiveState();
       }
     });
 
@@ -200,12 +202,12 @@ export default class Modal extends React.PureComponent {
 
     _defineProperty(this, "close", (event, {
       ifIsLatest,
-      triggeredBy
+      triggeredBy = null
     } = {
       ifIsLatest: true
     }) => {
       const {
-        prevent_close
+        prevent_close = false
       } = this.props;
 
       if (isTrue(prevent_close)) {
@@ -223,7 +225,7 @@ export default class Modal extends React.PureComponent {
           const list = getListOfModalRoots();
 
           if (list.length > 1) {
-            const last = getListOfModalRoots(-1);
+            const last = getModalRoot(-1);
 
             if (last !== this) {
               return;
@@ -235,7 +237,7 @@ export default class Modal extends React.PureComponent {
       }
     });
 
-    this._id = props.id || makeUniqueId();
+    this._id = props.id || makeUniqueId('modal-');
     this._triggerRef = React.createRef();
     this._onUnmount = [];
   }
@@ -245,16 +247,15 @@ export default class Modal extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    clearTimeout(this._openTimeout);
+    clearTimeout(this._closeTimeout);
+    this.removeActiveState();
+
     this._onUnmount.forEach(fn => {
       if (typeof fn === 'function') {
         fn();
       }
     });
-
-    clearTimeout(this._openTimeout);
-    clearTimeout(this._closeTimeout);
-    clearTimeout(this._sideEffectsTimeout);
-    clearTimeout(this._tryToOpenTimeout);
   }
 
   componentDidUpdate(prevProps) {
@@ -265,8 +266,7 @@ export default class Modal extends React.PureComponent {
 
   openBasedOnStateUpdate() {
     const {
-      hide,
-      modalActive
+      hide
     } = this.state;
     const {
       open_state
@@ -276,25 +276,39 @@ export default class Modal extends React.PureComponent {
       this.activeElement = document.activeElement;
     }
 
-    if (!hide && !modalActive && (open_state === 'opened' || open_state === true)) {
+    if (!hide && (open_state === 'opened' || open_state === true)) {
       this.toggleOpenClose(null, true);
-    } else if (hide && modalActive && (open_state === 'closed' || open_state === false)) {
+    } else if (hide && (open_state === 'closed' || open_state === false)) {
       this.toggleOpenClose(null, false);
     }
   }
 
+  removeActiveState() {
+    const last = getModalRoot(-1);
+
+    if (last !== null && last !== void 0 && last._id && last._id !== this._id) {
+      return this.setActiveState(last._id);
+    }
+
+    try {
+      document.documentElement.removeAttribute('data-dnb-modal-active');
+      document.body.setAttribute('data-dnb-modal-active', 'false');
+    } catch (e) {
+      warn('Modal: Error on remove "data-dnb-modal-active"', e);
+    }
+  }
+
   setActiveState(modalId) {
+    if (!modalId) {
+      warn('Modal: A valid modalId is required');
+    }
+
     if (typeof document !== 'undefined') {
       try {
-        if (modalId) {
-          document.documentElement.setAttribute('data-dnb-modal-active', modalId);
-        } else {
-          document.documentElement.removeAttribute('data-dnb-modal-active');
-        }
-
-        document.body.setAttribute('data-dnb-modal-active', modalId ? 'true' : 'false');
+        document.documentElement.setAttribute('data-dnb-modal-active', modalId);
+        document.body.setAttribute('data-dnb-modal-active', 'true');
       } catch (e) {
-        warn('Modal: Error on set "data-dnb-modal-active" by using element.setAttribute()', e);
+        warn('Modal: Error on set "data-dnb-modal-active"', e);
       }
     }
   }
@@ -303,28 +317,28 @@ export default class Modal extends React.PureComponent {
     const props = extendPropsWithContext(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.FormRow, this.context.Modal);
 
     const {
-      root_id,
-      content_id,
+      root_id = 'root',
+      content_id = null,
+      disabled = null,
+      spacing = true,
+      labelled_by = null,
+      focus_selector = null,
+      header_content = null,
+      bar_content = null,
       id,
       open_state,
       open_delay,
-      disabled,
-      spacing,
-      labelled_by,
-      focus_selector,
-      header_content,
-      bar_content,
-      trigger,
-      trigger_attributes,
-      trigger_hidden,
-      trigger_disabled,
-      trigger_variant,
-      trigger_text,
-      trigger_title,
-      trigger_size,
+      trigger = null,
+      trigger_attributes = null,
+      trigger_hidden = 'false',
+      trigger_disabled = null,
+      trigger_variant = 'secondary',
+      trigger_text = null,
+      trigger_title = null,
+      trigger_size = null,
       trigger_icon,
-      trigger_icon_position,
-      trigger_class
+      trigger_icon_position = 'left',
+      trigger_class = null
     } = props,
           rest = _objectWithoutProperties(props, _excluded);
 
@@ -337,44 +351,39 @@ export default class Modal extends React.PureComponent {
     })) : this.props);
 
     const render = suffixProps => {
-      const modalProps = {};
-
-      const triggerAttributes = _objectSpread({}, trigger_attributes);
+      const triggerAttributes = _objectSpread({
+        hidden: trigger_hidden,
+        disabled: trigger_disabled,
+        variant: trigger_variant,
+        text: trigger_text,
+        title: trigger_title,
+        size: trigger_size,
+        icon: trigger_icon,
+        icon_position: trigger_icon_position,
+        class: trigger_class
+      }, trigger_attributes);
 
-      for (let prop in props) {
-        if (prop.includes('trigger_') && props[prop] !== null) {
-          const name = String(prop).replace('trigger_', '');
-
-          if (name !== 'attributes' && name !== 'props' && prop !== 'element') {
-            triggerAttributes[name] = props[prop];
-          }
-        }
+      if (isTrue(disabled)) {
+        triggerAttributes.disabled = true;
       }
 
       if (triggerAttributes.id) {
         this._id = triggerAttributes.id;
       }
 
-      if (!rest.title && triggerAttributes.title) {
-        modalProps.title = triggerAttributes.title;
-      } else if (!rest.title && suffixProps) {
-        modalProps.title = this.context.translation.HelpButton.title;
-      }
+      let fallbackTitle;
 
-      if (isTrue(disabled)) {
-        triggerAttributes.disabled = true;
+      if (triggerAttributes.title) {
+        fallbackTitle = triggerAttributes.title;
+      } else if (suffixProps) {
+        fallbackTitle = this.context.translation.HelpButton.title;
       }
 
       const TriggerButton = trigger ? trigger : HelpButtonInstance;
-      return React.createElement(ModalContext.Provider, {
-        value: _objectSpread({
-          id: this._id
-        }, rest)
-      }, TriggerButton && !isTrue(trigger_hidden) && React.createElement(TriggerButton, _extends({
+      return React.createElement(React.Fragment, null, TriggerButton && !isTrue(trigger_hidden) && React.createElement(TriggerButton, _extends({}, triggerAttributes, {
         id: this._id,
-        title: !triggerAttributes.text ? props.title || modalProps.title : null,
-        onClick: this.toggleOpenClose
-      }, triggerAttributes, {
+        title: !triggerAttributes.text ? rest.title || fallbackTitle : null,
+        onClick: this.toggleOpenClose,
         innerRef: this._triggerRef,
         className: classnames('dnb-modal__trigger', createSpacingClasses(props), triggerAttributes.class, triggerAttributes.className)
       })), modalActive && modal_content && React.createElement(ModalRoot, _extends({}, rest, {
@@ -389,8 +398,8 @@ export default class Modal extends React.PureComponent {
         spacing: spacing,
         closeModal: this.close,
         hide: hide,
-        toggleOpenClose: this.toggleOpenClose
-      }, modalProps)));
+        title: rest.title || fallbackTitle
+      })));
     };
 
     return React.createElement(SuffixContext.Consumer, null, render);
@@ -412,8 +421,6 @@ _defineProperty(Modal, "Inner", ModalInner);
 
 _defineProperty(Modal, "defaultProps", {
   id: null,
-  root_id: 'root',
-  mode: 'modal',
   focus_selector: null,
   labelled_by: null,
   title: null,
@@ -427,7 +434,7 @@ _defineProperty(Modal, "defaultProps", {
   close_button_attributes: null,
   prevent_close: false,
   prevent_core_style: false,
-  animation_duration: 300,
+  animation_duration: ANIMATION_DURATION,
   no_animation: false,
   no_animation_on_mobile: false,
   fullscreen: 'auto',
@@ -438,6 +445,7 @@ _defineProperty(Modal, "defaultProps", {
   open_state: null,
   direct_dom_return: false,
   class: null,
+  root_id: 'root',
   className: null,
   children: null,
   on_open: null,
@@ -463,136 +471,4 @@ _defineProperty(Modal, "defaultProps", {
   bar_content: null
 });
 
-process.env.NODE_ENV !== "production" ? Modal.propTypes = _objectSpread(_objectSpread({
-  id: PropTypes.string,
-  root_id: PropTypes.string,
-  mode: PropTypes.oneOf(['modal', 'drawer']),
-  focus_selector: PropTypes.string,
-  labelled_by: PropTypes.string,
-  title: PropTypes.node,
-  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  open_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  content_id: PropTypes.string,
-  dialog_title: PropTypes.string,
-  close_title: PropTypes.string,
-  hide_close_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  close_button_attributes: PropTypes.object,
-  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]),
-  fullscreen: PropTypes.oneOf(['auto', true, false, 'true', 'false']),
-  min_width: PropTypes.string,
-  max_width: PropTypes.string,
-  align_content: PropTypes.oneOf(['left', 'center', 'centered', 'right']),
-  container_placement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
-  open_state: PropTypes.oneOfType([PropTypes.oneOf(['opened', 'closed']), PropTypes.bool]),
-  direct_dom_return: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
-}, spacingPropTypes), {}, {
-  class: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  on_open: PropTypes.func,
-  on_close: PropTypes.func,
-  on_close_prevent: PropTypes.func,
-  open_modal: PropTypes.func,
-  close_modal: PropTypes.func,
-  trigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  trigger_attributes: PropTypes.object,
-  trigger_hidden: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  trigger_disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  trigger_variant: buttonVariantPropType.variant,
-  trigger_text: PropTypes.string,
-  trigger_title: PropTypes.string,
-  trigger_size: PropTypes.string,
-  trigger_icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  trigger_icon_position: PropTypes.oneOf(['left', 'right']),
-  trigger_class: PropTypes.string,
-  overlay_class: PropTypes.string,
-  content_class: PropTypes.string,
-  modal_content: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  header_content: PropTypes.node,
-  bar_content: PropTypes.node
-}) : void 0;
-
-class ModalRoot extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      isMounted: false
-    });
-  }
-
-  componentDidMount() {
-    if (!isTrue(this.props.direct_dom_return)) {
-      Modal.insertModalRoot(this.props.root_id);
-
-      try {
-        if (!this.portalElem) {
-          this.portalElem = document.createElement('div');
-          this.portalElem.className = 'dnb-modal-root__inner';
-        }
-
-        if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot) {
-          window.__modalRoot.appendChild(this.portalElem);
-        }
-      } catch (e) {
-        warn(e);
-      }
-
-      this.setState({
-        isMounted: true
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    try {
-      if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && window.__modalRoot.removeChild) {
-        window.__modalRoot.removeChild(this.portalElem);
-
-        this.portalElem = null;
-      }
-    } catch (e) {
-      warn(e);
-    }
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      children,
-      direct_dom_return
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, _excluded2);
-
-    if (isTrue(direct_dom_return)) {
-      return React.createElement(ModalContent, props, children);
-    }
-
-    if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && this.state.isMounted) {
-      return ReactDOM.createPortal(React.createElement(ModalContent, props, children), this.portalElem);
-    }
-
-    return null;
-  }
-
-}
-
-_defineProperty(ModalRoot, "defaultProps", {
-  id: null,
-  root_id: null,
-  direct_dom_return: false,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalRoot.propTypes = {
-  id: PropTypes.string,
-  root_id: PropTypes.string,
-  direct_dom_return: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
-} : void 0;
 export { CloseButton };