diginet-core-ui 1.4.52 → 1.4.53-beta.10

package/components/form-control/date-picker/index.js

@@ -2,8 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Button, ButtonIcon, DateInput, HelperText, InputBase, Label, Popover, Tooltip } from "../..";
-import { format, isValid, parse } from 'date-fns';
-import { enUS, vi } from 'date-fns/locale';
+import { isValid, parse } from 'date-fns';
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import PropTypes from 'prop-types';
@@ -14,6 +13,7 @@ import useThemeProps from "../../../theme/utils/useThemeProps";
 import { capitalizeSentenceCase, classNames, isValidDate, useControlled } from "../../../utils";
 import Calendar from "../calendar";
 import { lowerCaseDayYear } from "../date-input/utils";
+import { parseDateString } from "../../../utils/getLang";
 const unique = {
   footer: 'DGN-UI-DatePicker-Footer',
   cancel: 'DGN-UI-DatePicker-cancel',
@@ -23,6 +23,10 @@ const unique = {
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
 const viDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'Q-YYYY'], ['month', 'MM-YYYY']]);
+const zhDisplayFormat = new Map([['year', 'YYYY年'], ['quarter', 'YYYY年第Q季度'], ['month', 'YYYY年MM月']]);
+const enDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY [Q]Q'],
+// Exp: 2025 Q1
+['month', 'MM/YYYY']]);
 const pickerReturnFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY-Q'], ['month', 'YYYY-MM']]);
 const parseValueToDate = valueProp => {
   if (!valueProp) return null;else if (isValidDate(valueProp)) {
@@ -42,8 +46,26 @@ const parseValueToDate = valueProp => {
     return valueProp;
   }
 };
-const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
-  var _ref, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
+const getDateFormats = (locale, minZoom) => {
+  let formatMap;
+  switch (locale) {
+    case 'vi':
+      formatMap = viDisplayFormat;
+      break;
+    case 'zh':
+      formatMap = zhDisplayFormat;
+      break;
+    case 'en':
+      formatMap = enDisplayFormat;
+      break;
+    default:
+      formatMap = pickerReturnFormat; // fallback
+      break;
+  }
+  return formatMap.get(minZoom);
+};
+const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
+  var _getDateFormats, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 
@@ -87,7 +109,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     ...other
   } = props;
   const dateLocale = locale.get();
-  const displayFormat = (_ref = dateLocale === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) !== null && _ref !== void 0 ? _ref : displayFormatProp;
+  const displayFormat = (_getDateFormats = getDateFormats(dateLocale, minZoom)) !== null && _getDateFormats !== void 0 ? _getDateFormats : displayFormatProp;
   const returnFormat = (_pickerReturnFormat$g = pickerReturnFormat.get(minZoom)) !== null && _pickerReturnFormat$g !== void 0 ? _pickerReturnFormat$g : returnFormatProp;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
   const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
@@ -112,9 +134,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   };
   const formatValue = (value, formatStr) => {
     // return moment(value).format(format, utc = false);
-    return format(value, lowerCaseDayYear(formatStr), {
-      locale: dateLocale === 'vi' ? vi : enUS
-    });
+    return parseDateString(value, lowerCaseDayYear(formatStr), dateLocale);
   };
   const onChangeValue = e => {
     const vl = (e === null || e === void 0 ? void 0 : e.value) || e;

package/components/form-control/date-range-picker/index.js

@@ -65,7 +65,7 @@ const isAfter = (max, time) => {
 const parseDate = day => {
   return Date.parse(new Date(day));
 };
-const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   // props priority: `inProps` > `themeDefaultProps`
   const props = useThemeProps({
     props: inProps,

package/components/form-control/dropdown/index.js

@@ -47,7 +47,7 @@ const uniqBy = (arr, iteratee) => {
     return true;
   });
 };
-const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -294,6 +294,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
+    if (text === null || text === undefined) text = '';
     if (typeof text !== 'string') text = text.toString();
     if (!txtSearch) return true;
     if (searchMode === 'startswith') {
@@ -436,6 +437,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
   const mapTreeView = () => {
+    console.log('here');
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,

package/components/form-control/dropdown-box/index.js

@@ -1,14 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
+const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

package/components/form-control/form-group/index.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Children, forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
 import { useTheme } from "../../../theme";
-const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const FormGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   fullWidth,
   oneHelperText,
   marginRight,

package/components/form-control/helper-text/index.js

@@ -9,7 +9,7 @@ import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
 const colorMap = new Map([['default', 'semantic/danger'], ['success', 'semantic/success'], ['warning', 'semantic/warning'], ['danger', 'semantic/danger'], ['info', 'semantic/info']]);
-const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const HelperText = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/input-base/UncontrolledInputBase.js

@@ -9,7 +9,7 @@ import { bgColor, border, borderBottom, borderBottomColor, borderColor, borderNo
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, refType as ref, getProp } from "../../../utils";
-const UncontrolledInputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const UncontrolledInputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/input-base/index.js

@@ -9,7 +9,7 @@ import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, border
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, refType as ref, useInput, getProp } from "../../../utils";
-const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const InputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/label/index.js

@@ -9,7 +9,7 @@ import { flexRow, parseMinHeight, typographyTypes } from "../../../styles/genera
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Label = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/money-input/index.js

@@ -10,6 +10,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react'
 import { displayBlock, positionRelative } from "../../../styles/general";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { onValidate } from "../../../utils";
+import { getThousandSeparatorByCountry } from "../../../utils/getLang";
 const num2WordsVi = function () {
   let t = ['không', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'],
     r = function (r, n) {
@@ -72,7 +73,62 @@ const num2WordsEn = n => {
   if (n === '0') return 'zero';
   return comp(chunk(3))(reverse)(arr(n)).map(makeGroup).map(thousand).filter(comp(not)(isEmpty)).reverse().join(' ');
 };
-const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const num2WordsZh = (() => {
+  const t = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+  const units = ['', '十', '百', '千'];
+  const bigUnits = ['', '万', '亿', '兆'];
+  const readSection = num => {
+    let str = '';
+    let zero = true;
+    for (let i = 0; i < 4 && num > 0; i++) {
+      const digit = num % 10;
+      if (digit === 0) {
+        if (!zero) {
+          zero = true;
+          str = t[0] + str;
+        }
+      } else {
+        zero = false;
+        str = t[digit] + units[i] + str;
+      }
+      num = Math.floor(num / 10);
+    }
+    return str;
+  };
+  return {
+    convert: num => {
+      if (num === 0) return t[0];
+      let str = '';
+      let unitPos = 0;
+      let needZero = false;
+      while (num > 0) {
+        const section = num % 10000;
+        if (section === 0) {
+          if (needZero) {
+            str = t[0] + str;
+            needZero = false;
+          }
+        } else {
+          const sectionStr = readSection(section) + bigUnits[unitPos];
+          str = sectionStr + str;
+          needZero = true;
+        }
+        num = Math.floor(num / 10000);
+        unitPos++;
+      }
+
+      // Special cases
+      str = str.replace(/^一十/, '十'); // "一十X" => "十X"
+      return str;
+    }
+  };
+})();
+const converters = {
+  vi: num2WordsVi,
+  en: num2WordsEn,
+  zh: num2WordsZh
+};
+const MoneyInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`
@@ -116,6 +172,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     viewType,
     defaultValue,
     value,
+    fixedDecimalDigit,
     ...other
   } = props;
   const ref = useRef(null);
@@ -125,7 +182,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     isPaste: false,
     clipboardText: ''
   });
-  const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : locale.get() === 'vi' ? '.' : ',';
+  const separatorSymbol = typeof thousandSeparator === 'string' ? thousandSeparator : getThousandSeparatorByCountry(locale.get());
   const decimalSymbol = separatorSymbol === '.' ? ',' : '.';
   const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
   const isError = !!error && !value && value !== 0;
@@ -145,7 +202,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       if (decimal && decimal.length > decimalDigit) {
         if (decimalDigit) {
           decimal = decimal.slice(0, decimalDigit);
-          return number + decimalSymbol + decimal;
+          return parseValueWithFix(number + decimalSymbol + decimal);
         } else {
           return number;
         }
@@ -332,11 +389,26 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       if (value === null) {
         inputRef.current.value = '';
       } else {
-        const v = getValueWithDecimal(value.toString().replace('.', decimalSymbol));
+        let number = value;
+        if (fixedDecimalDigit && !!decimalDigit) {
+          var _strVal$split;
+          const strVal = String(value);
+          const isDecimalNum = strVal.indexOf('.') > -1 && (((_strVal$split = strVal.split('.')) === null || _strVal$split === void 0 ? void 0 : _strVal$split[1]) || '').length >= decimalDigit;
+          if (isDecimalNum) {
+            const coreToFixed = (num, precision) => {
+              return (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision)).toFixed(precision);
+            };
+            const val = coreToFixed(Number(String(value).replace(thousandSeparator, '')), decimalDigit);
+            number = String(val);
+          }
+        }
+        const v = getValueWithDecimal(number.toString().replace('.', decimalSymbol));
         if (convertToWords && !decimalDigit && (disabled || readOnly)) {
           let valueConverted = getGlobal('helperInvalid');
-          if (Number.isInteger(value)) {
-            valueConverted = locale.get() === 'vi' ? num2WordsVi.convert(value) : num2WordsEn(value);
+          if (Number.isInteger(number)) {
+            const currentLocale = locale.get();
+            const converter = converters[currentLocale] || num2WordsVi; // fallback VN
+            valueConverted = converter.convert(number);
           }
           inputRef.current.value = parseValueWithFix(valueConverted);
         } else {
@@ -345,11 +417,12 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       }
     }
   }, [disabled, readOnly, value, prefix, suffix]);
-  useEffect(() => {
-    const valueInput = inputRef.current.value;
-    inputRef.current.value = getValueWithDecimal(valueInput);
-  }, [decimalDigit]);
-  /* End handler */
+
+  // useEffect(() => {
+  //     const valueInput = inputRef.current.value;
+  //     inputRef.current.value = getValueWithDecimal(valueInput);
+  // }, [decimalDigit]);
+  // /* End handler */
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -508,6 +581,8 @@ MoneyInput.propTypes = {
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
   labelProps: PropTypes.object,
   /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
-  helperTextProps: PropTypes.object
+  helperTextProps: PropTypes.object,
+  /** If `true`, decimal digit is fixed. */
+  fixedDecimalDigit: PropTypes.bool
 };
 export default MoneyInput;

package/components/form-control/number-input/index2.js

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min,
+    min: minProp,
     nonStyle,
     onBlur,
     onChange,
@@ -69,9 +69,12 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
+  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
+  if (!min && min !== 0) min = -Infinity;
+  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
@@ -111,6 +114,18 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
       }
     } = inputRef;
     let number = convertMoneyToNumber(vl, isNumber);
+    if (fixedDecimalDigit && !!decimalDigit) {
+      var _strVal$split;
+      const strVal = String(vl);
+      const isDecimalNum = strVal.indexOf('.') > -1 && (((_strVal$split = strVal.split('.')) === null || _strVal$split === void 0 ? void 0 : _strVal$split[1]) || '').length >= decimalDigit;
+      if (isDecimalNum) {
+        const coreToFixed = (num, precision) => {
+          return (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision)).toFixed(precision);
+        };
+        const val = coreToFixed(Number(String(vl).replaceAll(thousandSymbol, '')), decimalDigit);
+        number = String(val);
+      }
+    }
 
     // if (disabledNegative && Number(number || 0) < 0) number = clamp(number, min, max);
     // if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max);
@@ -134,15 +149,6 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     if (((_number3 = number) === null || _number3 === void 0 ? void 0 : _number3.indexOf(thousandSymbol)) > -1 && selectionStart !== number.length + 1) {
       pos.current = selectionStart + (number.toString().length - 1 === vl.toString().length ? 1 : 0);
     }
-    if (fixedDecimalDigit && !!decimalDigit) {
-      var _strVal$split;
-      const strVal = String(vl);
-      const isDecimalNum = strVal.indexOf('.') > -1 && (((_strVal$split = strVal.split('.')) === null || _strVal$split === void 0 ? void 0 : _strVal$split[1]) || '').length >= decimalDigit;
-      if (isDecimalNum) {
-        const val = Number(vl).toFixed(decimalDigit);
-        number = String(val);
-      }
-    }
     return number;
   }, [decimalSymbol, max, value, decimalDigit, fixedDecimalDigit]);
 
@@ -178,7 +184,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     if (flag) _onChange(e);
   }, [min, max, decimalDigit]);
   const _onBlur = useCallback(e => {
-    var _e$value;
+    var _e$value, _e$value2;
     let value = (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : e.target.value;
     if (fixedDecimalDigit) value = Number(value).toFixed(decimalDigit);
     value = convertMoneyToNumber(value);
@@ -190,6 +196,15 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
         target
       }, true);
     }
+    if (((_e$value2 = e.value) !== null && _e$value2 !== void 0 ? _e$value2 : e.target.value).slice(-1) === decimalSymbol) {
+      var _e$value3;
+      const target = e.target;
+      target.value = Number(String((_e$value3 = e.value) !== null && _e$value3 !== void 0 ? _e$value3 : e.target.value).replaceAll(thousandSymbol, ''));
+      _onInput({
+        ...e,
+        target
+      }, true);
+    }
     onBlur && onBlur(e);
   }, [min, max]);
   const _onKeyDown = e => {
@@ -280,6 +295,10 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     const target = e.target;
     target.value = globalRef.current.valueString;
     target.valueString = globalRef.current.returnValue;
+    // eslint-disable-next-line no-extra-boolean-cast
+    if (String(e.target.valueString).slice(-1) === decimalSymbol) {
+      return;
+    }
     onChange({
       ...e,
       value: globalRef.current.value,
@@ -315,8 +334,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
         // nếu không cho nhập số âm mà value đầu vào là âm thì reset value về 0
         valueProps = clamp(0, min, max);
       }
-
-      // setValue(parseNumberToMoney(valueProps?.toString().replace(regexValidNumber, ''), true));
+      // setValue(valueProps);
       setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
     }
   }, [valueProps, decimalDigit]);
@@ -384,29 +402,28 @@ const NumberInputRootCSS = ({
         ${cursorNotAllowed};
     }
 `;
-
-// NumberInput.defaultProps = {
-//     autoFocus: false,
-//     className: '',
-//     decimalDigit: Infinity,
-//     decimalSymbol: locale.get() === 'vi' ? ',' : '.',
-//     disabled: false,
-//     disabledNegative: false,
-//     endIcon: '',
-//     error: '',
-//     fixedDecimalDigit: false,
-//     label: '',
-//     max: Infinity,
-//     min: -Infinity,
-//     readOnly: false,
-//     required: false,
-//     startIcon: '',
-//     step: 1,
-//     style: {},
-//     thousandSeparator: false,
-//     viewType: 'underlined',
-// };
-
+NumberInput.defaultProps = {
+  // delayOnChange: 500,
+  // autoFocus: false,
+  // className: '',
+  // decimalDigit: Infinity,
+  // decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+  // disabled: false,
+  // disabledNegative: false,
+  // endIcon: '',
+  // error: '',
+  // fixedDecimalDigit: false,
+  // label: '',
+  // max: Infinity,
+  // min: -Infinity,
+  // readOnly: false,
+  // required: false,
+  // startIcon: '',
+  // step: 1,
+  // style: {},
+  // thousandSeparator: false,
+  // viewType: 'underlined',
+};
 NumberInput.propTypes = {
   /** If `true`, the input element is focused during the first mount. */
   autoFocus: PropTypes.bool,

package/components/form-control/password-input/index.js

@@ -8,7 +8,7 @@ import { cursorNotAllowed, displayBlock, positionRelative } from "../../../style
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const PasswordInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/form-control/phone-input/index.js

@@ -17,7 +17,7 @@ const ensigns = {
     mark: '____ _______'
   }
 };
-const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PhoneInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   viewType,
   ensign,
   required,

package/components/form-control/radio/index.js

@@ -8,7 +8,7 @@ import { boxBorder, cursorNoDrop, cursorPointer, displayBlock, displayNone, posi
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, randomString } from "../../../utils";
-const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Radio = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {