@dnb/eufemia 9.17.2 → 9.18.0

package/components/modal/Modal.js

@@ -13,8 +13,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _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"];
+var _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; }
 
@@ -24,30 +23,25 @@ import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.freeze.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/es.array.concat.js";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 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 var ANIMATION_DURATION = 300;
 
 var Modal = function (_React$PureComponent) {
   _inherits(Modal, _React$PureComponent);
@@ -61,6 +55,24 @@ var Modal = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "_id", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_triggerRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_onUnmount", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_openTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_closeTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_sideEffectsTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_tryToOpenTimeout", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "activeElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "isInTransition", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       hide: false,
       modalActive: false
@@ -75,6 +87,12 @@ var Modal = function (_React$PureComponent) {
       }
 
       var toggleNow = function toggleNow() {
+        var _this$props = _this.props,
+            _this$props$animation = _this$props.animation_duration,
+            animation_duration = _this$props$animation === void 0 ? ANIMATION_DURATION : _this$props$animation,
+            _this$props$no_animat = _this$props.no_animation,
+            no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat;
+        var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
         var modalActive = typeof showModal === 'boolean' ? showModal : !_this.state.modalActive;
         _this.isInTransition = true;
 
@@ -89,21 +107,24 @@ var Modal = function (_React$PureComponent) {
           });
         };
 
-        if (modalActive === false && !isTrue(_this.props.no_animation)) {
+        if (modalActive === false && !isTrue(no_animation)) {
           _this.setState({
             hide: true
           });
 
-          _this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
+          _this._closeTimeout = setTimeout(doItNow, timeoutDuration);
         } else {
           doItNow();
         }
       };
 
       var waitBeforeOpen = function waitBeforeOpen() {
-        var delay = parseFloat(_this.props.open_delay);
+        var _this$props2 = _this.props,
+            open_delay = _this$props2.open_delay,
+            no_animation = _this$props2.no_animation;
+        var delay = typeof open_delay === 'string' ? parseFloat(open_delay) : open_delay;
 
-        if (delay > 0 && !isTrue(_this.props.no_animation)) {
+        if (delay > 0 && !isTrue(no_animation)) {
           _this._openTimeout = setTimeout(toggleNow, delay);
         } else {
           toggleNow();
@@ -127,10 +148,11 @@ var Modal = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "handleSideEffects", function () {
       var modalActive = _this.state.modalActive;
+      var close_modal = _this.props.close_modal;
 
       if (modalActive) {
-        if (typeof _this.props.close_modal === 'function') {
-          var fn = _this.props.close_modal(function () {
+        if (typeof close_modal === 'function') {
+          var fn = close_modal(function () {
             _this.toggleOpenClose(null, false);
           }, _assertThisInitialized(_this));
 
@@ -147,7 +169,7 @@ var Modal = function (_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
@@ -170,9 +192,11 @@ var Modal = function (_React$PureComponent) {
         ifIsLatest: true
       },
           ifIsLatest = _ref.ifIsLatest,
-          triggeredBy = _ref.triggeredBy;
+          _ref$triggeredBy = _ref.triggeredBy,
+          triggeredBy = _ref$triggeredBy === void 0 ? null : _ref$triggeredBy;
 
-      var prevent_close = _this.props.prevent_close;
+      var _this$props$prevent_c = _this.props.prevent_close,
+          prevent_close = _this$props$prevent_c === void 0 ? false : _this$props$prevent_c;
 
       if (isTrue(prevent_close)) {
         var id = _this._id;
@@ -189,7 +213,7 @@ var Modal = function (_React$PureComponent) {
           var list = getListOfModalRoots();
 
           if (list.length > 1) {
-            var last = getListOfModalRoots(-1);
+            var last = getModalRoot(-1);
 
             if (last !== _assertThisInitialized(_this)) {
               return;
@@ -217,7 +241,7 @@ var Modal = function (_React$PureComponent) {
     value: function componentWillUnmount() {
       clearTimeout(this._openTimeout);
       clearTimeout(this._closeTimeout);
-      this.removeActiveState(false);
+      this.removeActiveState();
 
       this._onUnmount.forEach(function (fn) {
         if (typeof fn === 'function') {
@@ -251,7 +275,7 @@ var Modal = function (_React$PureComponent) {
   }, {
     key: "removeActiveState",
     value: function removeActiveState() {
-      var last = getListOfModalRoots(-1);
+      var last = getModalRoot(-1);
 
       if (last !== null && last !== void 0 && last._id && last._id !== this._id) {
         return this.setActiveState(last._id);
@@ -287,28 +311,46 @@ var Modal = function (_React$PureComponent) {
 
       var props = extendPropsWithContext(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.FormRow, this.context.Modal);
 
-      var root_id = props.root_id,
-          content_id = props.content_id,
+      var _props$root_id = props.root_id,
+          root_id = _props$root_id === void 0 ? 'root' : _props$root_id,
+          _props$content_id = props.content_id,
+          content_id = _props$content_id === void 0 ? null : _props$content_id,
+          _props$disabled = props.disabled,
+          disabled = _props$disabled === void 0 ? null : _props$disabled,
+          _props$spacing = props.spacing,
+          spacing = _props$spacing === void 0 ? true : _props$spacing,
+          _props$labelled_by = props.labelled_by,
+          labelled_by = _props$labelled_by === void 0 ? null : _props$labelled_by,
+          _props$focus_selector = props.focus_selector,
+          focus_selector = _props$focus_selector === void 0 ? null : _props$focus_selector,
+          _props$header_content = props.header_content,
+          header_content = _props$header_content === void 0 ? null : _props$header_content,
+          _props$bar_content = props.bar_content,
+          bar_content = _props$bar_content === void 0 ? null : _props$bar_content,
           id = props.id,
           open_state = props.open_state,
           open_delay = props.open_delay,
-          disabled = props.disabled,
-          spacing = props.spacing,
-          labelled_by = props.labelled_by,
-          focus_selector = props.focus_selector,
-          header_content = props.header_content,
-          bar_content = props.bar_content,
-          trigger = props.trigger,
-          trigger_attributes = props.trigger_attributes,
-          trigger_hidden = props.trigger_hidden,
-          trigger_disabled = props.trigger_disabled,
-          trigger_variant = props.trigger_variant,
-          trigger_text = props.trigger_text,
-          trigger_title = props.trigger_title,
-          trigger_size = props.trigger_size,
+          _props$trigger = props.trigger,
+          trigger = _props$trigger === void 0 ? null : _props$trigger,
+          _props$trigger_attrib = props.trigger_attributes,
+          trigger_attributes = _props$trigger_attrib === void 0 ? null : _props$trigger_attrib,
+          _props$trigger_hidden = props.trigger_hidden,
+          trigger_hidden = _props$trigger_hidden === void 0 ? 'false' : _props$trigger_hidden,
+          _props$trigger_disabl = props.trigger_disabled,
+          trigger_disabled = _props$trigger_disabl === void 0 ? null : _props$trigger_disabl,
+          _props$trigger_varian = props.trigger_variant,
+          trigger_variant = _props$trigger_varian === void 0 ? 'secondary' : _props$trigger_varian,
+          _props$trigger_text = props.trigger_text,
+          trigger_text = _props$trigger_text === void 0 ? null : _props$trigger_text,
+          _props$trigger_title = props.trigger_title,
+          trigger_title = _props$trigger_title === void 0 ? null : _props$trigger_title,
+          _props$trigger_size = props.trigger_size,
+          trigger_size = _props$trigger_size === void 0 ? null : _props$trigger_size,
           trigger_icon = props.trigger_icon,
-          trigger_icon_position = props.trigger_icon_position,
-          trigger_class = props.trigger_class,
+          _props$trigger_icon_p = props.trigger_icon_position,
+          trigger_icon_position = _props$trigger_icon_p === void 0 ? 'left' : _props$trigger_icon_p,
+          _props$trigger_class = props.trigger_class,
+          trigger_class = _props$trigger_class === void 0 ? null : _props$trigger_class,
           rest = _objectWithoutProperties(props, _excluded);
 
       var _this$state = this.state,
@@ -319,44 +361,39 @@ var Modal = function (_React$PureComponent) {
       })) : this.props);
 
       var render = function render(suffixProps) {
-        var modalProps = {};
-
-        var triggerAttributes = _objectSpread({}, trigger_attributes);
+        var 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 (var prop in props) {
-          if (prop.includes('trigger_') && props[prop] !== null) {
-            var 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) {
           _this2._id = triggerAttributes.id;
         }
 
-        if (!rest.title && triggerAttributes.title) {
-          modalProps.title = triggerAttributes.title;
-        } else if (!rest.title && suffixProps) {
-          modalProps.title = _this2.context.translation.HelpButton.title;
-        }
+        var fallbackTitle;
 
-        if (isTrue(disabled)) {
-          triggerAttributes.disabled = true;
+        if (triggerAttributes.title) {
+          fallbackTitle = triggerAttributes.title;
+        } else if (suffixProps) {
+          fallbackTitle = _this2.context.translation.HelpButton.title;
         }
 
         var TriggerButton = trigger ? trigger : HelpButtonInstance;
-        return React.createElement(ModalContext.Provider, {
-          value: _objectSpread({
-            id: _this2._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: _this2._id,
-          title: !triggerAttributes.text ? props.title || modalProps.title : null,
-          onClick: _this2.toggleOpenClose
-        }, triggerAttributes, {
+          title: !triggerAttributes.text ? rest.title || fallbackTitle : null,
+          onClick: _this2.toggleOpenClose,
           innerRef: _this2._triggerRef,
           className: classnames('dnb-modal__trigger', createSpacingClasses(props), triggerAttributes.class, triggerAttributes.className)
         })), modalActive && modal_content && React.createElement(ModalRoot, _extends({}, rest, {
@@ -371,8 +408,8 @@ var Modal = function (_React$PureComponent) {
           spacing: spacing,
           closeModal: _this2.close,
           hide: hide,
-          toggleOpenClose: _this2.toggleOpenClose
-        }, modalProps)));
+          title: rest.title || fallbackTitle
+        })));
       };
 
       return React.createElement(SuffixContext.Consumer, null, render);
@@ -393,30 +430,6 @@ var Modal = function (_React$PureComponent) {
 
       return processChildren(props);
     }
-  }, {
-    key: "insertModalRoot",
-    value: function insertModalRoot(id) {
-      if (typeof window === 'undefined') {
-        return false;
-      }
-
-      try {
-        id = "dnb-modal-".concat(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;
-    }
   }, {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
@@ -466,8 +479,6 @@ _defineProperty(Modal, "Inner", ModalInner);
 
 _defineProperty(Modal, "defaultProps", {
   id: null,
-  root_id: 'root',
-  mode: 'modal',
   focus_selector: null,
   labelled_by: null,
   title: null,
@@ -481,7 +492,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',
@@ -492,6 +503,7 @@ _defineProperty(Modal, "defaultProps", {
   open_state: null,
   direct_dom_return: false,
   class: null,
+  root_id: 'root',
   className: null,
   children: null,
   on_open: null,
@@ -518,154 +530,4 @@ _defineProperty(Modal, "defaultProps", {
 });
 
 export { Modal as default };
-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;
-
-var ModalRoot = function (_React$PureComponent2) {
-  _inherits(ModalRoot, _React$PureComponent2);
-
-  var _super2 = _createSuper(ModalRoot);
-
-  function ModalRoot() {
-    var _this3;
-
-    _classCallCheck(this, ModalRoot);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this3), "state", {
-      isMounted: false
-    });
-
-    return _this3;
-  }
-
-  _createClass(ModalRoot, [{
-    key: "componentDidMount",
-    value: function 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
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function 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);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          direct_dom_return = _this$props.direct_dom_return,
-          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;
-    }
-  }]);
-
-  return ModalRoot;
-}(React.PureComponent);
-
-_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 };