@dnb/eufemia 9.17.1 → 9.17.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.17.2](https://github.com/dnbexperience/eufemia/compare/v9.17.1...v9.17.2) (2021-12-15)
+
+
+### Bug Fixes
+
+* fix Modal DOM attribute cleanup during close when open_state is used ([28d14ae](https://github.com/dnbexperience/eufemia/commit/28d14aefa71d8af3a20126979ccd93d3b4c2930e))
+* **InputMasked:** allow leading zero when custom mask is given ([d3ecada](https://github.com/dnbexperience/eufemia/commit/d3ecadae0ef86dc108840a833a2476cfd064dc9e))
+
 ## [9.17.1](https://github.com/dnbexperience/eufemia/compare/v9.17.0...v9.17.1) (2021-12-14)
 
 

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

@@ -313,26 +313,31 @@ 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
   };
 };
 
@@ -345,11 +350,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;
 
@@ -370,7 +371,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)) {
@@ -379,7 +380,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/cjs/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/cjs/components/modal/Modal.js

@@ -175,7 +175,6 @@ var Modal = function (_React$PureComponent) {
             hide: true
           });
 
-          clearTimeout(_this._closeTimeout);
           _this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
         } else {
           doItNow();
@@ -186,13 +185,14 @@ var Modal = function (_React$PureComponent) {
         var delay = parseFloat(_this.props.open_delay);
 
         if (delay > 0 && !(0, _componentHelper.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') {
@@ -238,13 +238,7 @@ var Modal = function (_React$PureComponent) {
           } catch (e) {}
         }
 
-        var last = (0, _ModalContent.getListOfModalRoots)(-1);
-
-        if (last) {
-          _this.setActiveState(last._id);
-        } else if ((0, _ModalContent.getListOfModalRoots)().length <= 1) {
-          _this.setActiveState(false);
-        }
+        _this.removeActiveState();
       }
     });
 
@@ -302,16 +296,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",
@@ -323,35 +316,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 = (0, _ModalContent.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) {
+        (0, _componentHelper.warn)('Modal: Error on remove "data-dnb-modal-active"', e);
+      }
+    }
   }, {
     key: "setActiveState",
     value: function setActiveState(modalId) {
+      if (!modalId) {
+        (0, _componentHelper.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) {
-          (0, _componentHelper.warn)('Modal: Error on set "data-dnb-modal-active" by using element.setAttribute()', e);
+          (0, _componentHelper.warn)('Modal: Error on set "data-dnb-modal-active"', e);
         }
       }
     }
@@ -386,9 +392,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);

package/cjs/components/modal/ModalContent.js

@@ -42,10 +42,10 @@ require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
 require("core-js/modules/es.parse-float.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -124,6 +124,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 _componentHelper.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 _componentHelper.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 () {
@@ -134,7 +159,7 @@ var ModalContent = function (_React$PureComponent) {
             document.activeElement.scrollIntoView();
           }
         } catch (e) {}
-      }, 100);
+      }, parseFloat(_this.props.animation_duration) / 2);
     });
 
     _defineProperty(_assertThisInitialized(_this), "preventClick", function (e) {
@@ -189,8 +214,6 @@ var ModalContent = function (_React$PureComponent) {
   _createClass(ModalContent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
-
       this.addToIndex();
       this.removeScrollPossibility();
       this.setFocus();
@@ -203,9 +226,7 @@ var ModalContent = function (_React$PureComponent) {
       if ((0, _componentHelper.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);
       }
     }
   }, {
@@ -215,34 +236,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 _componentHelper.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 _componentHelper.InteractionInvalidation();
-
-            modal._iiLocal.activate(modal._contentRef.current);
-          }
-        });
-      }
-
-      if (typeof document !== 'undefined') {
-        document.addEventListener('keydown', this.onKeyDownHandler);
-      }
-    }
   }, {
     key: "removeLocks",
     value: function removeLocks() {
@@ -315,7 +308,7 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "removeFromIndex",
     value: function removeFromIndex() {
-      var _this4 = this;
+      var _this2 = this;
 
       if (typeof window !== 'undefined') {
         try {
@@ -324,7 +317,7 @@ var ModalContent = function (_React$PureComponent) {
           }
 
           window.__modalStack = window.__modalStack.filter(function (cur) {
-            return cur !== _this4;
+            return cur !== _this2;
           });
         } catch (e) {
           (0, _componentHelper.warn)(e);
@@ -379,7 +372,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);
@@ -389,7 +382,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/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/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/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);