@dnb/eufemia 9.12.4 → 9.13.0

package/CHANGELOG.md

@@ -3,17 +3,18 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.12.4](https://github.com/dnbexperience/eufemia/compare/v9.12.3...v9.12.4) (2021-09-28)
+# [9.13.0](https://github.com/dnbexperience/eufemia/compare/v9.12.4...v9.13.0) (2021-10-04)
 
 
 ### Bug Fixes
 
-* add icons: file_xml, leaf ([7a6bc92](https://github.com/dnbexperience/eufemia/commit/7a6bc92c0bb689e3366cdd4303ea6de94637bfe7))
-* add new icons: megaphone and mobilephone ([5d3c426](https://github.com/dnbexperience/eufemia/commit/5d3c4264b20f6470b29c472f88096201ca7918b1))
-* enhance #autocomplete search capability with better result sorting ([d8b7e4f](https://github.com/dnbexperience/eufemia/commit/d8b7e4ff106e3c79e318540e2be54c9f7038883c))
-* fix #date-picker range de-selection on mouse leave ([c154cfc](https://github.com/dnbexperience/eufemia/commit/c154cfc701c5a44d0a836d500f83d4d70df6ea59))
-* fix #number-format percent usage in the aria return ([88a1fe0](https://github.com/dnbexperience/eufemia/commit/88a1fe0030b64db0b9a1240dd9224e3db742c807))
-* fix #textarea z-index issue inside #modals when used a custom background-color ([f99b6e0](https://github.com/dnbexperience/eufemia/commit/f99b6e046201d1a60b21034e1b2d07caf41874e3))
-* fix focus contrast issue when #drawer-list is selected and gets focus ([224a370](https://github.com/dnbexperience/eufemia/commit/224a3701c56bb5fde3795d13c6cd00db3e9aa999))
-* fix stretch support on #date-picker and #form-status ([649df67](https://github.com/dnbexperience/eufemia/commit/649df673679a875fcd85f21d76bde0c69ba2b118))
-* typescript types for step-indicator ([138ac52](https://github.com/dnbexperience/eufemia/commit/138ac521b469150160faed918791f95a644a7af0))
+* ensure date-picker fires on_change event when clearing a date – but only if there has been a valid one before ([147772a](https://github.com/dnbexperience/eufemia/commit/147772ab613e02b03d360ea30e2147cabd48a854))
+* ensure drawer-list has not animation when opening ([21dfd12](https://github.com/dnbexperience/eufemia/commit/21dfd12fc0232b902b8678e174ddbd7ac8fc198a))
+* fix aria-modal usage ([00ab329](https://github.com/dnbexperience/eufemia/commit/00ab32930546761ef0aed9aaf98601e0c598f656))
+* fix doc for default value of GlobalStatus's show property ([7764c83](https://github.com/dnbexperience/eufemia/commit/7764c83629fc8dd1b3f10f8b53e847f6fd461e00))
+* fix signal button to have ocean-green outline ([9b10829](https://github.com/dnbexperience/eufemia/commit/9b1082992eb6940bb5afc64cb1719c70f8b7a08a))
+
+
+### Features
+
+* **InputMasked:** revoke right alignment in favor of defaulting to left ([0bd3b5e](https://github.com/dnbexperience/eufemia/commit/0bd3b5e7d60985eeccb53ee9329b95ab846b2ad8))

package/cjs/components/autocomplete/Autocomplete.js

@@ -45,6 +45,8 @@ require("core-js/modules/es.string.trim.js");
 
 require("core-js/modules/es.array.slice.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.includes.js");
 
 require("core-js/modules/es.array.filter.js");
@@ -1272,22 +1274,13 @@ var AutocompleteInstance = function (_React$PureComponent2) {
             });
           } catch (e) {}
 
-          var selectDelay = function selectDelay() {
-            _this.setState({
-              inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, _this.context.drawerList.data),
-              skipFocusDuringChange: false,
-              _listenForPropChanges: false
-            });
-
-            _this.setFocusOnInput();
-          };
-
-          if ((0, _componentHelper.isTrue)(_this.props.no_animation)) {
-            selectDelay();
-          } else {
-            clearTimeout(_this._selectTimeout);
-            _this._selectTimeout = setTimeout(selectDelay, _DrawerListProvider.default.blurDelay);
-          }
+          _this.setState({
+            inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, _this.context.drawerList.data),
+            skipFocusDuringChange: false,
+            _listenForPropChanges: false
+          }, function () {
+            return _this.setFocusOnInput();
+          });
         } else {
           _this.setState({
             inputValue: AutocompleteInstance.getCurrentDataTitle(selected_item, _this.context.drawerList.data),

package/cjs/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.css

@@ -68,3 +68,7 @@
 .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: #fff;
   color: var(--color-white); }
+
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: #fff;
+  color: var(--color-white); }

package/cjs/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss

@@ -48,3 +48,6 @@
   .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: var(--color-white);
 }
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: var(--color-white);
+}

package/cjs/components/button/style/themes/_button-mixins.scss

@@ -2,7 +2,7 @@
 * Button mixins
 *
 */
-@mixin buttonHoverStyle($color, $background-color) {
+@mixin buttonHoverStyle($color, $background-color, $border-color) {
   // NB: to get "over" sibling, because of the extendFakeFocus
   // But if we would use it,
   // then then we have to take care of places we use position="absolute", like the Modal Close button
@@ -11,12 +11,17 @@
   color: $color;
   background-color: $background-color;
 
-  @include fakeBorder(var(--color-emerald-green), 0.125rem /*2px*/);
+  @include fakeBorder($border-color, 0.125rem /*2px*/);
 }
 
-@mixin buttonHover($color, $background-color, $enable-touch: null) {
+@mixin buttonHover(
+  $color,
+  $background-color,
+  $border-color: var(--color-emerald-green),
+  $enable-touch: null
+) {
   @include hover() {
-    @include buttonHoverStyle($color, $background-color);
+    @include buttonHoverStyle($color, $background-color, $border-color);
 
     @include IS_IE {
       // by setting opacity to 1, we make sure we don't get the artifact of a cutted border on top and bottom
@@ -29,7 +34,11 @@
   @if $enable-touch == 'touch' {
     html[data-whatintent='touch'] & {
       @include active() {
-        @include buttonHoverStyle($color, $background-color);
+        @include buttonHoverStyle(
+          $color,
+          $background-color,
+          $border-color
+        );
       }
     }
   }

package/cjs/components/button/style/themes/dnb-button-theme-open-banking.css

@@ -593,16 +593,16 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -615,17 +615,17 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }

package/cjs/components/button/style/themes/dnb-button-theme-ui.css

@@ -589,16 +589,16 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -611,17 +611,17 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }

package/cjs/components/button/style/themes/dnb-button-theme-ui.scss

@@ -321,6 +321,7 @@
     @include buttonHover(
       var(--color-ocean-green),
       var(--color-accent-yellow),
+      var(--color-ocean-green),
       'touch'
     );
     @include buttonFocus(

package/cjs/components/date-picker/DatePickerAddon.js

@@ -141,7 +141,7 @@ var DatePickerAddon = function (_React$PureComponent) {
           _ref2$event = _ref2.event,
           event = _ref2$event === void 0 ? null : _ref2$event;
 
-      this.context.setDate({
+      this.context.updateState({
         startDate: startDate,
         endDate: endDate,
         changeMonthViews: true

package/cjs/components/date-picker/DatePickerCalc.js

@@ -33,6 +33,8 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.fill.js");
 
+require("core-js/modules/es.parse-int.js");
+
 require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");

package/cjs/components/date-picker/DatePickerCalendar.js

@@ -233,7 +233,7 @@ var DatePickerCalendar = function (_React$PureComponent) {
 
         state.changeMonthViews = true;
 
-        _this.context.setDate(state, function () {
+        _this.context.updateState(state, function () {
           _this.callOnSelect({
             event: event,
             nr: nr,
@@ -558,7 +558,7 @@ var DatePickerCalendar = function (_React$PureComponent) {
                 resetDate: resetDate,
                 event: event,
                 onSelect: function onSelect(state) {
-                  return _this2.context.setDate(state, function () {
+                  return _this2.context.updateState(state, function () {
                     return _this2.callOnSelect({
                       event: event,
                       nr: nr,

package/cjs/components/date-picker/DatePickerFooter.js

@@ -102,7 +102,7 @@ var DatePickerFooter = function (_React$PureComponent) {
         args.event.persist();
       }
 
-      _this.context.setDate({
+      _this.context.updateState({
         startDate: startDate,
         endDate: endDate
       }, function () {
@@ -119,7 +119,7 @@ var DatePickerFooter = function (_React$PureComponent) {
         args.event.persist();
       }
 
-      _this.context.setDate({
+      _this.context.updateState({
         date: undefined,
         startDate: undefined,
         endDate: undefined

package/cjs/components/date-picker/DatePickerInput.js

@@ -53,6 +53,8 @@ require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.string.match.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.find-index.js");
 
 require("core-js/modules/es.array.concat.js");
@@ -251,26 +253,22 @@ var DatePickerInput = function (_React$PureComponent) {
     }());
 
     _defineProperty(_assertThisInitialized(_this), "callOnChangeAsInvalid", function (state) {
-      var _this$context$state = _objectSpread(_objectSpread({}, _this.context), state),
-          startDate = _this$context$state.startDate,
-          endDate = _this$context$state.endDate,
-          event = _this$context$state.event;
-
       _this.context.updateState({
         hoverDate: null
-      });
+      }, function () {
+        if (_this.context.hasHadValidDate) {
+          var _this$context$state = _objectSpread(_objectSpread({}, _this.context), state),
+              startDate = _this$context$state.startDate,
+              endDate = _this$context$state.endDate,
+              event = _this$context$state.event;
 
-      if (_this.context.hasHadValidDate) {
-        _this.context.callOnChangeHandler({
-          startDate: startDate,
-          endDate: endDate,
-          event: event
-        });
-
-        _this.context.updateState({
-          hasHadValidDate: false
-        });
-      }
+          _this.context.callOnChangeHandler({
+            startDate: startDate,
+            endDate: endDate,
+            event: event
+          });
+        }
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "callOnChange", function (_ref2) {
@@ -278,8 +276,7 @@ var DatePickerInput = function (_React$PureComponent) {
           endDate = _ref2.endDate,
           event = _ref2.event;
       var state = {
-        changeMonthViews: true,
-        hasHadValidDate: false
+        changeMonthViews: true
       };
 
       if (typeof startDate !== 'undefined' && (0, _isValid.default)(startDate)) {
@@ -294,7 +291,7 @@ var DatePickerInput = function (_React$PureComponent) {
         state.endDate = endDate;
       }
 
-      _this.context.setDate(state, function () {
+      _this.context.updateState(state, function () {
         if (typeof startDate !== 'undefined' && (0, _isValid.default)(startDate) || typeof endDate !== 'undefined' && (0, _isValid.default)(endDate)) {
           _this.context.callOnChangeHandler({
             event: event
@@ -607,7 +604,7 @@ var DatePickerInput = function (_React$PureComponent) {
       } else {
         var _this$callOnChangeAsI;
 
-        _this.context.setDate(_defineProperty({}, "".concat(mode, "Date"), null));
+        _this.context.updateState(_defineProperty({}, "".concat(mode, "Date"), null));
 
         _this.context.updateState(_defineProperty({}, "__".concat(mode).concat(type), value));
 

package/cjs/components/date-picker/DatePickerProvider.js

@@ -127,23 +127,8 @@ var DatePickerProvider = function (_React$PureComponent) {
       }), cb);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "setDate", function (state) {
-      var cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-      _this.setState(_objectSpread(_objectSpread({}, state), {}, {
-        _listenForPropChanges: false
-      }), cb);
-
-      var startDateIsValid = Boolean(state.startDate && (0, _isValid.default)(state.startDate));
-      var endDateIsValid = Boolean(state.endDate && (0, _isValid.default)(state.endDate));
-
-      _this.setState({
-        hasHadValidDate: startDateIsValid || endDateIsValid
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "callOnChangeHandler", function (args) {
-      if (_this.state.lastEventCallCache && String(_this.state.lastEventCallCache.startDate) === String(_this.state.startDate) && String(_this.state.lastEventCallCache.endDate) === String(_this.state.endDate)) {
+      if (_this.state.lastEventCallCache && _this.state.lastEventCallCache.startDate === _this.state.startDate && _this.state.lastEventCallCache.endDate === _this.state.endDate) {
         return;
       }
 
@@ -228,7 +213,6 @@ var DatePickerProvider = function (_React$PureComponent) {
         value: _objectSpread(_objectSpread({
           translation: this.context.translation,
           setViews: this.setViews,
-          setDate: this.setDate,
           updateState: this.updateState,
           getReturnObject: this.getReturnObject,
           callOnChangeHandler: this.callOnChangeHandler,
@@ -304,7 +288,7 @@ var DatePickerProvider = function (_React$PureComponent) {
         }
       }
 
-      if (state.lastEventCallCache && (String(state.lastEventCallCache.startDate) !== String(state.startDate) || String(state.lastEventCallCache.endDate) !== String(state.endDate))) {
+      if (state.lastEventCallCache && (state.lastEventCallCache.startDate !== state.startDate || state.lastEventCallCache.endDate !== state.endDate)) {
         state.lastEventCallCache = {};
       }
 
@@ -312,6 +296,7 @@ var DatePickerProvider = function (_React$PureComponent) {
         state.__startDay = pad((0, _format.default)(state.startDate, 'dd'), 2);
         state.__startMonth = pad((0, _format.default)(state.startDate, 'MM'), 2);
         state.__startYear = (0, _format.default)(state.startDate, 'yyyy');
+        state.hasHadValidDate = true;
       } else if (state.startDate === undefined) {
         state.__startDay = null;
         state.__startMonth = null;
@@ -322,6 +307,7 @@ var DatePickerProvider = function (_React$PureComponent) {
         state.__endDay = pad((0, _format.default)(state.endDate, 'dd'), 2);
         state.__endMonth = pad((0, _format.default)(state.endDate, 'MM'), 2);
         state.__endYear = (0, _format.default)(state.endDate, 'yyyy');
+        state.hasHadValidDate = true;
       } else if (state.endDate === undefined) {
         state.__endDay = null;
         state.__endMonth = null;

package/cjs/components/dropdown/Dropdown.js

@@ -41,6 +41,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.concat.js");
 
 var _react = _interopRequireDefault(require("react"));

package/cjs/components/form-status/FormStatus.js

@@ -52,6 +52,8 @@ require("core-js/modules/es.string.split.js");
 
 require("core-js/modules/es.array.reduce.js");
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/global-error/GlobalError.js

@@ -49,6 +49,8 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/global-status/GlobalStatus.d.ts

@@ -95,7 +95,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   state?: GlobalStatusState;
 
   /**
-   * Set to `true` or `false` to manually make the global status visible. Defaults to `show`.
+   * Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
    */
   show?: GlobalStatusShow;
 

package/cjs/components/global-status/GlobalStatus.js

@@ -47,6 +47,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.regexp.exec.js");

package/cjs/components/heading/Heading.js

@@ -57,6 +57,8 @@ Object.defineProperty(exports, "setNextLevel", {
 });
 exports.default = exports.levelResolution = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/heading/HeadingCounter.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Counter = exports.initCounter = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 var _HeadingHelpers = require("./HeadingHelpers");
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

package/cjs/components/heading/HeadingHelpers.js

@@ -33,6 +33,8 @@ exports.globalNextLevel = exports.globalResetNextTime = exports.correctHeadingLe
 
 require("core-js/modules/es.array.find.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.array.filter.js");

package/cjs/components/heading/HeadingProvider.js

@@ -35,6 +35,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/icon/Icon.js

@@ -53,6 +53,8 @@ require("core-js/modules/es.array.filter.js");
 
 require("core-js/modules/es.array.includes.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.string.includes.js");
 
 require("core-js/modules/es.string.replace.js");

package/cjs/components/input/Input.js

@@ -39,6 +39,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SubmitButton = exports.default = exports.inputPropTypes = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.concat.js");
 
 var _react = _interopRequireDefault(require("react"));

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

@@ -37,7 +37,9 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixPositionIssue = exports.default = void 0;
+exports.correctPositionSelection = exports.default = void 0;
+
+require("core-js/modules/es.parse-float.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
@@ -262,24 +264,17 @@ var InputMasked = function (_React$PureComponent) {
           allowDecimal: ((_number_mask = number_mask) === null || _number_mask === void 0 ? void 0 : _number_mask.decimalLimit) > 0,
           decimalSymbol: ','
         }, (_this$context5 = this.context) === null || _this$context5 === void 0 ? void 0 : (_this$context5$InputM = _this$context5.InputMasked) === null || _this$context5$InputM === void 0 ? void 0 : _this$context5$InputM.number_mask), number_mask);
-        props.align = props.align || 'right';
       } else if (currency_mask) {
         var _this$context6, _this$context6$InputM;
 
         show_mask = true;
         placeholder_char = null;
-        props.align = props.align || 'right';
         maskParams = _objectSpread(_objectSpread({
           allowDecimal: true,
           decimalSymbol: ','
         }, (_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : (_this$context6$InputM = _this$context6.InputMasked) === null || _this$context6$InputM === void 0 ? void 0 : _this$context6$InputM.currency_mask), currency_mask);
         var fix = typeof currency_mask === 'string' ? currency_mask : typeof currency_mask.currency === 'string' ? currency_mask.currency : 'kr';
-
-        if (props.align === 'left') {
-          maskParams.prefix = "".concat(fix, " ");
-        } else {
-          maskParams.suffix = " ".concat(fix);
-        }
+        maskParams.suffix = " ".concat(fix);
       }
 
       if (maskParams) {
@@ -351,21 +346,21 @@ var InputMasked = function (_React$PureComponent) {
           };
 
           props.onMouseUp = function (event) {
-            fixPositionIssue(event.target, props);
+            correctPositionSelection(event, maskParams);
             callEvent({
               event: event
             }, 'on_mouse_up');
           };
 
           props.onTouchEnd = function (event) {
-            fixPositionIssue(event.target, props);
+            correctPositionSelection(event, maskParams);
             callEvent({
               event: event
             }, 'on_touch_end');
           };
 
           props.on_focus = function (params) {
-            fixPositionIssue(params.event.target, props);
+            correctPositionSelection(params.event, maskParams);
             callEvent(params, 'on_focus');
           };
 
@@ -470,28 +465,29 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_blur: _propTypes.default.func
 }, _Input.inputPropTypes) : void 0;
 
-var fixPositionIssue = function fixPositionIssue(elem) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref3$align = _ref3.align,
-      align = _ref3$align === void 0 ? 'right' : _ref3$align;
-
+var correctPositionSelection = function correctPositionSelection(event, maskParams) {
   clearTimeout(_selectionTimeout);
   _selectionTimeout = setTimeout(function () {
-    if ((0, _NumberUtils.cleanNumber)(elem.value).length > 0) {
-      return;
-    }
-
     try {
-      var end = elem.selectionEnd;
+      var fix = (maskParams === null || maskParams === void 0 ? void 0 : maskParams.suffix) || (maskParams === null || maskParams === void 0 ? void 0 : maskParams.prefix);
 
-      if (elem.selectionStart === end && end === elem.value.length) {
-        var pos = 0;
+      if (fix) {
+        var elem = event.target;
+        var start = elem.selectionStart;
+        var fixStart = elem.value.indexOf(fix);
+        var fixEnd = fixStart + fix.length;
 
-        if (align === 'left') {
-          pos = end - 1;
-        }
+        if (start >= fixStart && start <= fixEnd) {
+          var pos = 0;
 
-        elem.setSelectionRange(pos, pos);
+          if (fixStart === 1) {
+            pos = fixStart - 1;
+          } else {
+            pos = fixStart;
+          }
+
+          elem.setSelectionRange(pos, pos);
+        }
       }
     } catch (e) {
       (0, _componentHelper.warn)(e);
@@ -499,6 +495,6 @@ var fixPositionIssue = function fixPositionIssue(elem) {
   }, 1);
 };
 
-exports.fixPositionIssue = fixPositionIssue;
+exports.correctPositionSelection = correctPositionSelection;
 
 var _selectionTimeout;