@dnb/eufemia 9.17.1 → 9.17.2

package/components/modal/ModalContent.js

@@ -22,8 +22,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import "core-js/modules/es.array.filter.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.regexp.exec.js";
 import "core-js/modules/es.parse-float.js";
+import "core-js/modules/es.regexp.exec.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); }; }
 
@@ -57,6 +57,31 @@ var ModalContent = function (_React$PureComponent) {
       triggeredByEvent: null
     });
 
+    _defineProperty(_assertThisInitialized(_this), "lockBody", function () {
+      var modalRoots = getListOfModalRoots();
+      var firstLevel = modalRoots[0];
+
+      if (firstLevel === _assertThisInitialized(_this)) {
+        _this._ii = new InteractionInvalidation();
+
+        _this._ii.setBypassSelector(['.dnb-modal__content *', "#dnb-modal-".concat(_this.props.root_id || 'root', " *")].filter(Boolean));
+
+        _this._ii.activate();
+      } else {
+        modalRoots.forEach(function (modal) {
+          if (modal !== _assertThisInitialized(_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(_assertThisInitialized(_this), "_androidFocusHelper", function () {
       clearTimeout(_this._androidFocusTimeout);
       _this._androidFocusTimeout = setTimeout(function () {
@@ -67,7 +92,7 @@ var ModalContent = function (_React$PureComponent) {
             document.activeElement.scrollIntoView();
           }
         } catch (e) {}
-      }, 100);
+      }, parseFloat(_this.props.animation_duration) / 2);
     });
 
     _defineProperty(_assertThisInitialized(_this), "preventClick", function (e) {
@@ -122,8 +147,6 @@ var ModalContent = function (_React$PureComponent) {
   _createClass(ModalContent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
-
       this.addToIndex();
       this.removeScrollPossibility();
       this.setFocus();
@@ -136,9 +159,7 @@ var ModalContent = function (_React$PureComponent) {
       if (isTrue(this.props.no_animation) || process.env.NODE_ENV === 'test') {
         this.lockBody();
       } else {
-        this._lockTimeout = setTimeout(function () {
-          _this2.lockBody();
-        }, 500);
+        this._lockTimeout = setTimeout(this.lockBody, parseFloat(this.props.animation_duration) * 1.2);
       }
     }
   }, {
@@ -148,34 +169,6 @@ var ModalContent = function (_React$PureComponent) {
       clearTimeout(this._lockTimeout);
       this.removeLocks();
     }
-  }, {
-    key: "lockBody",
-    value: function lockBody() {
-      var _this3 = this;
-
-      var modalRoots = getListOfModalRoots();
-      var firstLevel = modalRoots[0];
-
-      if (firstLevel === this) {
-        this._ii = new InteractionInvalidation();
-
-        this._ii.setBypassSelector(['.dnb-modal__content *', "#dnb-modal-".concat(this.props.root_id || 'root', " *")].filter(Boolean));
-
-        this._ii.activate();
-      } else {
-        modalRoots.forEach(function (modal) {
-          if (modal !== _this3 && 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);
-      }
-    }
   }, {
     key: "removeLocks",
     value: function removeLocks() {
@@ -248,7 +241,7 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "removeFromIndex",
     value: function removeFromIndex() {
-      var _this4 = this;
+      var _this2 = this;
 
       if (typeof window !== 'undefined') {
         try {
@@ -257,7 +250,7 @@ var ModalContent = function (_React$PureComponent) {
           }
 
           window.__modalStack = window.__modalStack.filter(function (cur) {
-            return cur !== _this4;
+            return cur !== _this2;
           });
         } catch (e) {
           warn(e);
@@ -312,7 +305,7 @@ var ModalContent = function (_React$PureComponent) {
     key: "closeModal",
     value: function closeModal(event, _ref) {
       var _event$persist,
-          _this5 = this;
+          _this3 = this;
 
       var triggeredBy = _ref.triggeredBy,
           params = _objectWithoutProperties(_ref, _excluded);
@@ -322,7 +315,7 @@ var ModalContent = function (_React$PureComponent) {
         triggeredBy: triggeredBy,
         triggeredByEvent: event
       }, function () {
-        _this5.props.closeModal(event, _objectSpread({
+        _this3.props.closeModal(event, _objectSpread({
           triggeredBy: triggeredBy
         }, params));
       });

package/es/components/input-masked/InputMaskedHooks.js

@@ -203,14 +203,19 @@ export const useEventMapping = ({
     onBeforeInput: event => callEvent({
       event
     }, 'on_before_input'),
+    onFocus: params => callEvent(params, 'on_focus'),
+    onBlur: params => callEvent(params, 'on_blur'),
     onMouseUp: event => callEvent({
       event
     }, 'on_mouse_up'),
-    on_focus: params => callEvent(params, 'on_focus'),
-    on_key_down: params => callEvent(params, 'on_key_down'),
-    on_submit: params => callEvent(params, 'on_submit'),
-    on_blur: params => callEvent(params, 'on_blur'),
-    on_change: params => callEvent(params, 'on_change')
+    onKeyDown: params => callEvent(params, 'on_key_down'),
+    onSubmit: params => callEvent(params, 'on_submit'),
+    onChange: params => callEvent(params, 'on_change'),
+    on_focus: undefined,
+    on_blur: undefined,
+    on_key_down: undefined,
+    on_submit: undefined,
+    on_change: undefined
   };
 };
 
@@ -221,11 +226,7 @@ const useCallEvent = ({
     props
   } = React.useContext(InputMaskedContext);
   const maskParams = useMaskParams();
-
-  if (!maskParams) {
-    return () => {};
-  }
-
+  const isNumberMask = useNumberMask();
   const decimalSeparators = /[,.'·]/;
   let isUnidentified = false;
 
@@ -247,7 +248,7 @@ const useCallEvent = ({
       isUnidentified = false;
     }
 
-    if (name === 'on_key_down' && !isUnidentified && !(maskParams !== null && maskParams !== void 0 && maskParams.allowLeadingZeroes) && (keyCode === '0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
+    if (name === 'on_key_down' && !isUnidentified && (isNumberMask && !(maskParams !== null && maskParams !== void 0 && maskParams.allowLeadingZeroes) || !isNumberMask && (maskParams === null || maskParams === void 0 ? void 0 : maskParams.allowLeadingZeroes) === false) && (keyCode === '0' || keyCode === 'numpad 0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
       const testValue = (value.slice(0, selStart) + '0' + value.slice(selStart + 1, value.length)).replace(/[^\d]/g, '');
 
       if (/^0/.test(testValue)) {
@@ -256,7 +257,7 @@ const useCallEvent = ({
       }
     }
 
-    if (name === 'on_key_down' && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
+    if (name === 'on_key_down' && isNumberMask && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
       const hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
       const allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
 

package/es/components/modal/Modal.d.ts

@@ -242,6 +242,10 @@ export interface ModalProps extends React.HTMLProps<HTMLElement> {
    * Set a function to call the callback function, once the modal/drawer should close: `close_modal={(close) => close()}`
    */
   close_modal?: (...args: any[]) => any;
+
+  /**
+   * Provide a custom trigger component. Like `trigger={<Anchor href="/" />}`. It will set the focus on it when the modal/drawer gets closed.
+   */
   trigger?: ModalTrigger;
 
   /**

package/es/components/modal/Modal.js

@@ -120,7 +120,6 @@ export default class Modal extends React.PureComponent {
           this.setState({
             hide: true
           });
-          clearTimeout(this._closeTimeout);
           this._closeTimeout = setTimeout(doItNow, parseFloat(this.props.animation_duration));
         } else {
           doItNow();
@@ -131,13 +130,14 @@ export default class Modal extends React.PureComponent {
         const delay = parseFloat(this.props.open_delay);
 
         if (delay > 0 && !isTrue(this.props.no_animation)) {
-          clearTimeout(this._openTimeout);
           this._openTimeout = setTimeout(toggleNow, delay);
         } else {
           toggleNow();
         }
       };
 
+      clearTimeout(this._closeTimeout);
+      clearTimeout(this._openTimeout);
       const {
         open_modal
       } = this.props;
@@ -184,13 +184,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();
       }
     });
 
@@ -245,16 +239,15 @@ export default class Modal extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    clearTimeout(this._openTimeout);
+    clearTimeout(this._closeTimeout);
+    this.removeActiveState(false);
+
     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 +258,7 @@ export default class Modal extends React.PureComponent {
 
   openBasedOnStateUpdate() {
     const {
-      hide,
-      modalActive
+      hide
     } = this.state;
     const {
       open_state
@@ -276,25 +268,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 = getListOfModalRoots(-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);
       }
     }
   }

package/es/components/modal/ModalContent.js

@@ -27,6 +27,31 @@ export default class ModalContent extends React.PureComponent {
       triggeredByEvent: null
     });
 
+    _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", () => {
       clearTimeout(this._androidFocusTimeout);
       this._androidFocusTimeout = setTimeout(() => {
@@ -37,7 +62,7 @@ export default class ModalContent extends React.PureComponent {
             document.activeElement.scrollIntoView();
           }
         } catch (e) {}
-      }, 100);
+      }, parseFloat(this.props.animation_duration) / 2);
     });
 
     _defineProperty(this, "preventClick", e => {
@@ -100,9 +125,7 @@ export default class ModalContent extends React.PureComponent {
     if (isTrue(this.props.no_animation) || process.env.NODE_ENV === 'test') {
       this.lockBody();
     } else {
-      this._lockTimeout = setTimeout(() => {
-        this.lockBody();
-      }, 500);
+      this._lockTimeout = setTimeout(this.lockBody, parseFloat(this.props.animation_duration) * 1.2);
     }
   }
 
@@ -112,31 +135,6 @@ export default class ModalContent extends React.PureComponent {
     this.removeLocks();
   }
 
-  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);
-    }
-  }
-
   removeLocks() {
     const modalRoots = getListOfModalRoots();
     const firstLevel = modalRoots[0];

package/esm/components/input-masked/InputMaskedHooks.js

@@ -220,26 +220,31 @@ export var useEventMapping = function useEventMapping(_ref) {
         event: event
       }, 'on_before_input');
     },
+    onFocus: function onFocus(params) {
+      return callEvent(params, 'on_focus');
+    },
+    onBlur: function onBlur(params) {
+      return callEvent(params, 'on_blur');
+    },
     onMouseUp: function onMouseUp(event) {
       return callEvent({
         event: event
       }, 'on_mouse_up');
     },
-    on_focus: function on_focus(params) {
-      return callEvent(params, 'on_focus');
-    },
-    on_key_down: function on_key_down(params) {
+    onKeyDown: function onKeyDown(params) {
       return callEvent(params, 'on_key_down');
     },
-    on_submit: function on_submit(params) {
+    onSubmit: function onSubmit(params) {
       return callEvent(params, 'on_submit');
     },
-    on_blur: function on_blur(params) {
-      return callEvent(params, 'on_blur');
-    },
-    on_change: function on_change(params) {
+    onChange: function onChange(params) {
       return callEvent(params, 'on_change');
-    }
+    },
+    on_focus: undefined,
+    on_blur: undefined,
+    on_key_down: undefined,
+    on_submit: undefined,
+    on_change: undefined
   };
 };
 
@@ -250,11 +255,7 @@ var useCallEvent = function useCallEvent(_ref2) {
       props = _React$useContext8.props;
 
   var maskParams = useMaskParams();
-
-  if (!maskParams) {
-    return function () {};
-  }
-
+  var isNumberMask = useNumberMask();
   var decimalSeparators = /[,.'·]/;
   var isUnidentified = false;
 
@@ -275,7 +276,7 @@ var useCallEvent = function useCallEvent(_ref2) {
       isUnidentified = false;
     }
 
-    if (name === 'on_key_down' && !isUnidentified && !(maskParams !== null && maskParams !== void 0 && maskParams.allowLeadingZeroes) && (keyCode === '0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
+    if (name === 'on_key_down' && !isUnidentified && (isNumberMask && !(maskParams !== null && maskParams !== void 0 && maskParams.allowLeadingZeroes) || !isNumberMask && (maskParams === null || maskParams === void 0 ? void 0 : maskParams.allowLeadingZeroes) === false) && (keyCode === '0' || keyCode === 'numpad 0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
       var testValue = (value.slice(0, selStart) + '0' + value.slice(selStart + 1, value.length)).replace(/[^\d]/g, '');
 
       if (/^0/.test(testValue)) {
@@ -284,7 +285,7 @@ var useCallEvent = function useCallEvent(_ref2) {
       }
     }
 
-    if (name === 'on_key_down' && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
+    if (name === 'on_key_down' && isNumberMask && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
       var hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
       var allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
 

package/esm/components/modal/Modal.d.ts

@@ -242,6 +242,10 @@ export interface ModalProps extends React.HTMLProps<HTMLElement> {
    * Set a function to call the callback function, once the modal/drawer should close: `close_modal={(close) => close()}`
    */
   close_modal?: (...args: any[]) => any;
+
+  /**
+   * Provide a custom trigger component. Like `trigger={<Anchor href="/" />}`. It will set the focus on it when the modal/drawer gets closed.
+   */
   trigger?: ModalTrigger;
 
   /**

package/esm/components/modal/Modal.js

@@ -94,7 +94,6 @@ var Modal = function (_React$PureComponent) {
             hide: true
           });
 
-          clearTimeout(_this._closeTimeout);
           _this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
         } else {
           doItNow();
@@ -105,13 +104,14 @@ var Modal = function (_React$PureComponent) {
         var delay = parseFloat(_this.props.open_delay);
 
         if (delay > 0 && !isTrue(_this.props.no_animation)) {
-          clearTimeout(_this._openTimeout);
           _this._openTimeout = setTimeout(toggleNow, delay);
         } else {
           toggleNow();
         }
       };
 
+      clearTimeout(_this._closeTimeout);
+      clearTimeout(_this._openTimeout);
       var open_modal = _this.props.open_modal;
 
       if (typeof open_modal === 'function') {
@@ -157,13 +157,7 @@ var Modal = function (_React$PureComponent) {
           } catch (e) {}
         }
 
-        var last = getListOfModalRoots(-1);
-
-        if (last) {
-          _this.setActiveState(last._id);
-        } else if (getListOfModalRoots().length <= 1) {
-          _this.setActiveState(false);
-        }
+        _this.removeActiveState();
       }
     });
 
@@ -221,16 +215,15 @@ var Modal = function (_React$PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      clearTimeout(this._openTimeout);
+      clearTimeout(this._closeTimeout);
+      this.removeActiveState(false);
+
       this._onUnmount.forEach(function (fn) {
         if (typeof fn === 'function') {
           fn();
         }
       });
-
-      clearTimeout(this._openTimeout);
-      clearTimeout(this._closeTimeout);
-      clearTimeout(this._sideEffectsTimeout);
-      clearTimeout(this._tryToOpenTimeout);
     }
   }, {
     key: "componentDidUpdate",
@@ -242,35 +235,48 @@ var Modal = function (_React$PureComponent) {
   }, {
     key: "openBasedOnStateUpdate",
     value: function openBasedOnStateUpdate() {
-      var _this$state = this.state,
-          hide = _this$state.hide,
-          modalActive = _this$state.modalActive;
+      var hide = this.state.hide;
       var open_state = this.props.open_state;
 
       if (!this.activeElement && typeof document !== 'undefined') {
         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);
       }
     }
+  }, {
+    key: "removeActiveState",
+    value: function removeActiveState() {
+      var last = getListOfModalRoots(-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);
+      }
+    }
   }, {
     key: "setActiveState",
     value: function 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);
         }
       }
     }
@@ -305,9 +311,9 @@ var Modal = function (_React$PureComponent) {
           trigger_class = props.trigger_class,
           rest = _objectWithoutProperties(props, _excluded);
 
-      var _this$state2 = this.state,
-          hide = _this$state2.hide,
-          modalActive = _this$state2.modalActive;
+      var _this$state = this.state,
+          hide = _this$state.hide,
+          modalActive = _this$state.modalActive;
       var modal_content = Modal.getContent(typeof this.props.children === 'function' ? Object.freeze(_objectSpread(_objectSpread({}, this.props), {}, {
         close: this.close
       })) : this.props);