@dnb/eufemia 9.12.0 → 9.12.4

package/es/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/es/components/dropdown/Dropdown.js

@@ -25,7 +25,7 @@ import Button, { buttonVariantPropType } from '../button/Button';
 import DrawerList from '../../fragments/drawer-list/DrawerList';
 import DrawerListContext from '../../fragments/drawer-list/DrawerListContext';
 import DrawerListProvider from '../../fragments/drawer-list/DrawerListProvider';
-import { parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
+import { drawerListPropTypes, parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
 export default class Dropdown extends React.PureComponent {
   static enableWebComponent() {
     registerElement(Dropdown === null || Dropdown === void 0 ? void 0 : Dropdown.tagName, Dropdown, Dropdown.defaultProps);
@@ -110,7 +110,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({}, spacingPropTypes), drawerListPropTypes), {}, {
   id: PropTypes.string,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   variant: buttonVariantPropType.variant,
@@ -155,8 +155,7 @@ process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_obje
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  class: PropTypes.string
-}, spacingPropTypes), {}, {
+  class: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
   custom_element: PropTypes.object,

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _circle, _path8;
 
-const _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
+const _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -266,6 +266,7 @@ export default class FormStatus extends React.PureComponent {
       stretch,
       class: _className,
       text_id,
+      label,
       status_id,
       id,
       text,

package/es/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/es/components/input-masked/InputMasked.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
+const _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -11,7 +11,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { format, cleanNumber, getCurrencySymbol, getDecimalSeparator, getThousandsSeparator } from '../number-format/NumberUtils';
 import Input, { inputPropTypes } from '../input/Input';
-import { isTrue, registerElement, extendPropsWithContext, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { warn, isTrue, registerElement, dispatchCustomElementEvent } from '../../shared/component-helper';
 import { IS_IE11 } from '../../shared/helpers';
 import _MaskedInput from 'react-text-mask';
 import Context from '../../shared/Context';
@@ -29,7 +29,9 @@ export default class InputMasked extends React.PureComponent {
   }
 
   render() {
-    let _extendPropsWithConte = extendPropsWithContext(this.props, InputMasked.defaultProps, this.context.InputMasked),
+    var _this$context;
+
+    let _this$props = this.props,
         {
       mask,
       number_mask,
@@ -37,14 +39,15 @@ export default class InputMasked extends React.PureComponent {
       number_format,
       as_currency,
       as_number,
+      as_percent,
       locale,
       show_mask,
       show_guide,
       pipe,
       keep_char_positions,
       placeholder_char
-    } = _extendPropsWithConte,
-        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+    } = _this$props,
+        props = _objectWithoutProperties(_this$props, _excluded);
 
     if (isTrue(number_mask)) {
       number_mask = {};
@@ -58,37 +61,55 @@ export default class InputMasked extends React.PureComponent {
       currency_mask = JSON.parse(currency_mask);
     }
 
-    if (as_number || as_currency) {
-      if (isTrue(as_number)) {
-        as_number = {};
-      } else if (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;
+
         const options = {
-          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 = format(props.value, options);
+        if (!isNaN(parseFloat(props.value))) {
+          props.value = format(props.value, options);
+        }
       }
 
       const thousandsSeparatorSymbol = getThousandsSeparator(locale).replace(' ', ' ');
@@ -99,16 +120,23 @@ export default class InputMasked extends React.PureComponent {
       }
 
       if (as_number) {
+        number_mask = _objectSpread({
+          decimalSymbol,
+          thousandsSeparatorSymbol
+        }, number_mask);
+      } else if (as_percent) {
+        var _props$value$match;
+
         number_mask = _objectSpread({
           decimalSymbol,
           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,
           thousandsSeparatorSymbol,
-          currency: getCurrencySymbol(locale, typeof as_currency !== 'string' ? null : as_currency)
+          currency: getCurrencySymbol(locale, typeof as_currency === 'string' ? as_currency : null)
         }, currency_mask);
       }
     }
@@ -116,18 +144,23 @@ export default class InputMasked extends React.PureComponent {
     let 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);
       const fix = typeof currency_mask === 'string' ? currency_mask : typeof currency_mask.currency === 'string' ? currency_mask.currency : 'kr';
 
       if (props.align === 'left') {
@@ -158,33 +191,51 @@ export default class InputMasked extends React.PureComponent {
           if (name === 'on_key_down' && (_maskParams = maskParams) !== null && _maskParams !== void 0 && _maskParams.decimalSymbol) {
             const keyCode = keycode(event);
             const hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
+            const allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
+            const hasDecimalValue = new RegExp("[,.'·][\\d]{1,}").test(value);
             const decimalSeparators = /[,.'·]/;
 
-            if ((maskParams.decimalLimit === 0 || maskParams.allowDecimal === false) && decimalSeparators.test(keyCode)) {
+            if (!allowedDecimals && decimalSeparators.test(keyCode)) {
               event.preventDefault();
-            } else if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {
-              const charAtSelection = value.slice(event.target.selectionStart, event.target.selectionStart + 1);
-
-              if (decimalSeparators.test(charAtSelection)) {
-                const index = value.indexOf(maskParams.decimalSymbol);
+            }
 
-                if (index > -1) {
-                  event.target.setSelectionRange(index + 1, index + 1);
+            const selStart = event.target.selectionStart;
+            const 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)) {
+                  const 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;
+              }
             }
           }
 
-          const cleaned_value = cleanNumber(value);
+          const numberValue = cleanNumber(value, {
+            decimalSeparator: maskParams.decimalSymbol || ',',
+            thousandsSeparator: maskParams.thousandsSeparatorSymbol || ' '
+          });
           return dispatchCustomElementEvent(this, name, {
             event,
             value,
-            cleaned_value
+            numberValue: Number(numberValue),
+            cleanedValue: numberValue,
+            cleaned_value: numberValue
           });
         };
 
@@ -250,6 +301,7 @@ _defineProperty(InputMasked, "defaultProps", _objectSpread(_objectSpread({}, Inp
   number_format: null,
   as_currency: null,
   as_number: null,
+  as_percent: null,
   locale: null,
   show_mask: false,
   show_guide: true,
@@ -272,6 +324,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   locale: PropTypes.string,
   as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   pipe: PropTypes.func,
@@ -289,9 +342,7 @@ export const fixPositionIssue = (elem, {
 } = {}) => {
   clearTimeout(_selectionTimeout);
   _selectionTimeout = setTimeout(() => {
-    const cleaned_value = cleanNumber(elem.value);
-
-    if (cleaned_value.length > 0) {
+    if (cleanNumber(elem.value).length > 0) {
       return;
     }
 
@@ -307,7 +358,9 @@ export const fixPositionIssue = (elem, {
 
         elem.setSelectionRange(pos, pos);
       }
-    } catch (e) {}
+    } catch (e) {
+      warn(e);
+    }
   }, 1);
 };
 

package/es/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;