@dnb/eufemia 9.12.0 → 9.12.4

package/cjs/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,51 @@
 import * as React from 'react';
+export type DropdownSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type DropdownTop = string | number | boolean;
+export type DropdownRight = string | number | boolean;
+export type DropdownBottom = string | number | boolean;
+export type DropdownLeft = string | number | boolean;
+export type DropdownUseDrawerOnMobile = string | boolean;
+export type DropdownIsPopup = string | boolean;
+export type DropdownAlignDrawer = 'left' | 'right';
+export type DropdownOptionsRender =
+  | Object
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type DropdownWrapperElement =
+  | Object
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type DropdownFixedPosition = string | boolean;
+export type DropdownPreventFocus = string | boolean;
+export type DropdownSkipKeysearch = string | boolean;
+export type DropdownSelectedValue = string | React.ReactNode;
+export type DropdownContent = string | React.ReactNode | string[];
+export type DropdownRawData = any[] | Object | ((...args: any[]) => any);
+export type DropdownIgnoreEvents = string | boolean;
 export type DropdownTitle = string | React.ReactNode;
 export type DropdownVariant =
   | 'primary'
@@ -64,35 +111,6 @@ export type DropdownOpened = string | boolean;
 export type DropdownDisabled = string | boolean;
 export type DropdownStretch = string | boolean;
 export type DropdownSkeleton = string | boolean;
-export type DropdownSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type DropdownTop = string | number | boolean;
-export type DropdownRight = string | number | boolean;
-export type DropdownBottom = string | number | boolean;
-export type DropdownLeft = string | number | boolean;
 export type DropdownChildren =
   | string
   | ((...args: any[]) => any)
@@ -104,6 +122,81 @@ export type DropdownChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface DropdownProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: DropdownSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: DropdownTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: DropdownRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: DropdownBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: DropdownLeft;
+  role?: string;
+
+  /**
+   * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`.
+   */
+  cache_hash?: string;
+  use_drawer_on_mobile?: DropdownUseDrawerOnMobile;
+  is_popup?: DropdownIsPopup;
+
+  /**
+   * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`.
+   */
+  align_drawer?: DropdownAlignDrawer;
+
+  /**
+   * Has to be a function, returning the items again. Se <a href="/uilib/components/fragments/drawer-list#example-usage-of-options_render">example</a>. This can be used to add additional options above the actual rendered list.
+   */
+  options_render?: DropdownOptionsRender;
+
+  /**
+   * Has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click.
+   */
+  wrapper_element?: DropdownWrapperElement;
+
+  /**
+   * Define a HTML class that will be set on the list, beside `dnb-drawer-list__list`.
+   */
+  list_class?: string;
+
+  /**
+   * If set to true, the DrawerList will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   */
+  fixed_position?: DropdownFixedPosition;
+  prevent_focus?: DropdownPreventFocus;
+
+  /**
+   * If set to true, search items by the first key will be ignored. Defaults to `false`.
+   */
+  skip_keysearch?: DropdownSkipKeysearch;
+  selected_value?: DropdownSelectedValue;
+  content?: DropdownContent;
+  prepared_data?: any[];
+  raw_data?: DropdownRawData;
+
+  /**
+   * If set to true, all keyboard and mouse events will be ignored. Defaults to `false`.
+   */
+  ignore_events?: DropdownIgnoreEvents;
+  handle_dismiss_focus?: (...args: any[]) => any;
+  on_pre_change?: (...args: any[]) => any;
+  on_resize?: (...args: any[]) => any;
   id?: string;
 
   /**
@@ -298,31 +391,6 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
    */
   skeleton?: DropdownSkeleton;
   class?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: DropdownSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: DropdownTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: DropdownRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: DropdownBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: DropdownLeft;
   className?: string;
 
   /**

package/cjs/components/dropdown/Dropdown.js

@@ -217,7 +217,7 @@ _defineProperty(Dropdown, "defaultProps", {
   on_state_update: null
 });
 
-process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_objectSpread({
+process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _SpacingHelper.spacingPropTypes), _DrawerListHelpers.drawerListPropTypes), {}, {
   id: _propTypes.default.string,
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   variant: _Button.buttonVariantPropType.variant,
@@ -262,8 +262,7 @@ process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_obje
   disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  class: _propTypes.default.string
-}, _SpacingHelper.spacingPropTypes), {}, {
+  class: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
   custom_element: _propTypes.default.object,

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

@@ -74,7 +74,7 @@ var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _circle, _path8;
 
-var _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
+var _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "label", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -298,6 +298,7 @@ var FormStatus = function (_React$PureComponent) {
           stretch = props.stretch,
           _className = props.class,
           text_id = props.text_id,
+          label = props.label,
           status_id = props.status_id,
           id = props.id,
           text = props.text,

package/cjs/components/input-masked/InputMasked.d.ts

@@ -5,6 +5,7 @@ export type InputMaskedCurrencyMask = string | boolean | Object;
 export type InputMaskedNumberFormat = string | Object;
 export type InputMaskedAsCurrency = string | boolean;
 export type InputMaskedAsNumber = string | boolean;
+export type InputMaskedAsPercent = string | boolean;
 export type InputMaskedShowMask = string | boolean;
 export type InputMaskedShowGuide = string | boolean;
 export type InputMaskedKeepCharPositions = string | boolean;
@@ -110,7 +111,7 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
   currency_mask?: InputMaskedCurrencyMask;
 
   /**
-   * Use an object with <a href="/uilib/components/number-format/properties">NumberFormat</a> e.g. `{ omit_rounding: true }`.
+   * Use an object with <a href="/uilib/components/number-format/properties">NumberFormat</a> e.g. `{ omit_rounding: false }`.
    */
   number_format?: InputMaskedNumberFormat;
 
@@ -129,6 +130,11 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
    */
   as_number?: InputMaskedAsNumber;
 
+  /**
+   * Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale.
+   */
+  as_percent?: InputMaskedAsPercent;
+
   /**
    * Show mask when input is empty and has no focus. Defaults to `false`.
    */

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

@@ -43,14 +43,22 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.string.match.js");
+
 require("core-js/modules/es.array.includes.js");
 
 require("core-js/modules/es.string.includes.js");
 
+require("core-js/modules/es.regexp.constructor.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
 require("core-js/modules/es.array.slice.js");
 
 require("core-js/modules/es.array.index-of.js");
 
+require("core-js/modules/es.number.constructor.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -73,7 +81,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
-var _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
+var _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "as_percent", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -134,22 +142,24 @@ var InputMasked = function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
-
-      var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(this.props, InputMasked.defaultProps, this.context.InputMasked),
-          mask = _extendPropsWithConte.mask,
-          number_mask = _extendPropsWithConte.number_mask,
-          currency_mask = _extendPropsWithConte.currency_mask,
-          number_format = _extendPropsWithConte.number_format,
-          as_currency = _extendPropsWithConte.as_currency,
-          as_number = _extendPropsWithConte.as_number,
-          locale = _extendPropsWithConte.locale,
-          show_mask = _extendPropsWithConte.show_mask,
-          show_guide = _extendPropsWithConte.show_guide,
-          pipe = _extendPropsWithConte.pipe,
-          keep_char_positions = _extendPropsWithConte.keep_char_positions,
-          placeholder_char = _extendPropsWithConte.placeholder_char,
-          props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+      var _this$context,
+          _this = this;
+
+      var _this$props = this.props,
+          mask = _this$props.mask,
+          number_mask = _this$props.number_mask,
+          currency_mask = _this$props.currency_mask,
+          number_format = _this$props.number_format,
+          as_currency = _this$props.as_currency,
+          as_number = _this$props.as_number,
+          as_percent = _this$props.as_percent,
+          locale = _this$props.locale,
+          show_mask = _this$props.show_mask,
+          show_guide = _this$props.show_guide,
+          pipe = _this$props.pipe,
+          keep_char_positions = _this$props.keep_char_positions,
+          placeholder_char = _this$props.placeholder_char,
+          props = _objectWithoutProperties(_this$props, _excluded);
 
       if ((0, _componentHelper.isTrue)(number_mask)) {
         number_mask = {};
@@ -163,37 +173,55 @@ var InputMasked = function (_React$PureComponent) {
         currency_mask = JSON.parse(currency_mask);
       }
 
-      if (as_number || as_currency) {
-        if ((0, _componentHelper.isTrue)(as_number)) {
-          as_number = {};
-        } else if ((0, _componentHelper.isTrue)(as_currency)) {
-          as_currency = {};
-        }
-
-        if (!locale && this.context) {
-          locale = this.context.locale;
-        }
+      if (!locale && (_this$context = this.context) !== null && _this$context !== void 0 && _this$context.locale) {
+        locale = this.context.locale;
+      }
 
+      if (as_number || as_percent || as_currency || number_mask || currency_mask) {
         if (props.value !== 'initval') {
+          var _this$context2, _this$context2$InputM;
+
           var options = {
-            locale: locale
+            locale: locale,
+            decimals: 0,
+            omit_rounding: true
           };
 
           if (typeof number_format === 'string' && number_format[0] === '{') {
             number_format = JSON.parse(number_format);
           }
 
-          if (number_format) {
-            _extends(options, number_format);
+          _extends(options, (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : (_this$context2$InputM = _this$context2.InputMasked) === null || _this$context2$InputM === void 0 ? void 0 : _this$context2$InputM.number_format, number_format);
+
+          if (currency_mask || as_currency) {
+            var _this$context3, _this$context3$InputM;
+
+            currency_mask = _objectSpread(_objectSpread({}, (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : (_this$context3$InputM = _this$context3.InputMasked) === null || _this$context3$InputM === void 0 ? void 0 : _this$context3$InputM.currency_mask), currency_mask);
+
+            if (currency_mask.allowDecimal !== false) {
+              currency_mask.decimalLimit = options.decimals = typeof currency_mask.decimalLimit !== 'undefined' ? currency_mask.decimalLimit : 2;
+            } else if (currency_mask.decimalLimit > 0) {
+              options.decimals = currency_mask.decimalLimit;
+            }
+          } else if (number_mask || as_number || as_percent) {
+            var _this$context4, _this$context4$InputM;
+
+            number_mask = _objectSpread(_objectSpread({}, (_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : (_this$context4$InputM = _this$context4.InputMasked) === null || _this$context4$InputM === void 0 ? void 0 : _this$context4$InputM.number_mask), number_mask);
+
+            if (number_mask.allowDecimal === true) {
+              number_mask.decimalLimit = options.decimals = typeof number_mask.decimalLimit !== 'undefined' ? number_mask.decimalLimit : 2;
+            } else if (number_mask.decimalLimit > 0) {
+              options.decimals = number_mask.decimalLimit;
+            }
           }
 
-          if (as_currency) {
-            currency_mask = currency_mask || {};
-            options.decimals = currency_mask.decimalLimit || 2;
-            currency_mask.decimalLimit = options.decimals;
+          if (as_percent) {
+            options.percent = true;
           }
 
-          props.value = (0, _NumberUtils.format)(props.value, options);
+          if (!isNaN(parseFloat(props.value))) {
+            props.value = (0, _NumberUtils.format)(props.value, options);
+          }
         }
 
         var thousandsSeparatorSymbol = (0, _NumberUtils.getThousandsSeparator)(locale).replace(' ', ' ');
@@ -204,16 +232,23 @@ var InputMasked = function (_React$PureComponent) {
         }
 
         if (as_number) {
+          number_mask = _objectSpread({
+            decimalSymbol: decimalSymbol,
+            thousandsSeparatorSymbol: thousandsSeparatorSymbol
+          }, number_mask);
+        } else if (as_percent) {
+          var _props$value$match;
+
           number_mask = _objectSpread({
             decimalSymbol: decimalSymbol,
             thousandsSeparatorSymbol: thousandsSeparatorSymbol,
-            decimalLimit: null
+            suffix: ((_props$value$match = props.value.match(/((\s|)%)$/g, '$1')) === null || _props$value$match === void 0 ? void 0 : _props$value$match[0]) || ' %'
           }, number_mask);
         } else if (as_currency) {
           currency_mask = _objectSpread({
             decimalSymbol: decimalSymbol,
             thousandsSeparatorSymbol: thousandsSeparatorSymbol,
-            currency: (0, _NumberUtils.getCurrencySymbol)(locale, typeof as_currency !== 'string' ? null : as_currency)
+            currency: (0, _NumberUtils.getCurrencySymbol)(locale, typeof as_currency === 'string' ? as_currency : null)
           }, currency_mask);
         }
       }
@@ -221,18 +256,23 @@ var InputMasked = function (_React$PureComponent) {
       var maskParams = null;
 
       if (number_mask) {
-        maskParams = _objectSpread({
-          allowDecimal: true,
+        var _number_mask, _this$context5, _this$context5$InputM;
+
+        maskParams = _objectSpread(_objectSpread({
+          allowDecimal: ((_number_mask = number_mask) === null || _number_mask === void 0 ? void 0 : _number_mask.decimalLimit) > 0,
           decimalSymbol: ','
-        }, number_mask);
+        }, (_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({
+        maskParams = _objectSpread(_objectSpread({
           allowDecimal: true,
           decimalSymbol: ','
-        }, currency_mask);
+        }, (_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') {
@@ -262,33 +302,51 @@ var InputMasked = function (_React$PureComponent) {
             if (name === 'on_key_down' && (_maskParams = maskParams) !== null && _maskParams !== void 0 && _maskParams.decimalSymbol) {
               var keyCode = (0, _keycode.default)(event);
               var hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
+              var allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
+              var hasDecimalValue = new RegExp("[,.'·][\\d]{1,}").test(value);
               var decimalSeparators = /[,.'·]/;
 
-              if ((maskParams.decimalLimit === 0 || maskParams.allowDecimal === false) && decimalSeparators.test(keyCode)) {
+              if (!allowedDecimals && decimalSeparators.test(keyCode)) {
                 event.preventDefault();
-              } else if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {
-                var charAtSelection = value.slice(event.target.selectionStart, event.target.selectionStart + 1);
-
-                if (decimalSeparators.test(charAtSelection)) {
-                  var index = value.indexOf(maskParams.decimalSymbol);
+              }
 
-                  if (index > -1) {
-                    event.target.setSelectionRange(index + 1, index + 1);
+              var selStart = event.target.selectionStart;
+              var charAtSelection = value.slice(selStart, selStart + 1);
+
+              if (allowedDecimals) {
+                if (keyCode === 'delete' && charAtSelection === maskParams.decimalSymbol) {
+                  event.preventDefault();
+                  event.target.setSelectionRange(selStart + 1, selStart + 1);
+                } else if (keyCode === 'backspace' && hasDecimalValue && value.slice(selStart - 1, selStart) === maskParams.decimalSymbol) {
+                  event.preventDefault();
+                  event.target.setSelectionRange(selStart - 1, selStart - 1);
+                } else if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {
+                  if (decimalSeparators.test(charAtSelection)) {
+                    var index = value.indexOf(maskParams.decimalSymbol);
+
+                    if (index > -1) {
+                      event.target.setSelectionRange(index + 1, index + 1);
+                    }
                   }
-                }
 
-                event.preventDefault();
-              } else if (!hasDecimalSymbol && keyCode !== maskParams.decimalSymbol && decimalSeparators.test(keyCode) && maskParams.decimalLimit !== 0) {
-                value = value.slice(0, event.target.selectionStart);
-                event.target.value = value + maskParams.decimalSymbol;
+                  event.preventDefault();
+                } else if (!hasDecimalSymbol && keyCode !== maskParams.decimalSymbol && decimalSeparators.test(keyCode)) {
+                  value = value.slice(0, selStart);
+                  event.target.value = value + maskParams.decimalSymbol;
+                }
               }
             }
 
-            var cleaned_value = (0, _NumberUtils.cleanNumber)(value);
+            var numberValue = (0, _NumberUtils.cleanNumber)(value, {
+              decimalSeparator: maskParams.decimalSymbol || ',',
+              thousandsSeparator: maskParams.thousandsSeparatorSymbol || ' '
+            });
             return (0, _componentHelper.dispatchCustomElementEvent)(_this, name, {
               event: event,
               value: value,
-              cleaned_value: cleaned_value
+              numberValue: Number(numberValue),
+              cleanedValue: numberValue,
+              cleaned_value: numberValue
             });
           };
 
@@ -375,6 +433,7 @@ _defineProperty(InputMasked, "defaultProps", _objectSpread(_objectSpread({}, _In
   number_format: null,
   as_currency: null,
   as_number: null,
+  as_percent: null,
   locale: null,
   show_mask: false,
   show_guide: true,
@@ -397,6 +456,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   locale: _propTypes.default.string,
   as_currency: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   as_number: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  as_percent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   show_mask: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   show_guide: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   pipe: _propTypes.default.func,
@@ -417,9 +477,7 @@ var fixPositionIssue = function fixPositionIssue(elem) {
 
   clearTimeout(_selectionTimeout);
   _selectionTimeout = setTimeout(function () {
-    var cleaned_value = (0, _NumberUtils.cleanNumber)(elem.value);
-
-    if (cleaned_value.length > 0) {
+    if ((0, _NumberUtils.cleanNumber)(elem.value).length > 0) {
       return;
     }
 
@@ -435,7 +493,9 @@ var fixPositionIssue = function fixPositionIssue(elem) {
 
         elem.setSelectionRange(pos, pos);
       }
-    } catch (e) {}
+    } catch (e) {
+      (0, _componentHelper.warn)(e);
+    }
   }, 1);
 };
 

package/cjs/components/number-format/NumberUtils.d.ts

@@ -71,4 +71,12 @@ export const format: (
   options?: formatOptionParams
 ) => formatReturnType;
 
-export const cleanNumber: (num: number | string) => void;
+type cleanNumberOptions = {
+  decimalSeparator?: string;
+  thousandsSeparator?: string;
+};
+
+export const cleanNumber: (
+  num: number | string,
+  options?: cleanNumberOptions
+) => void;