diginet-core-ui 1.3.68 → 1.3.69-beta.1

package/components/button/index.js

@@ -12,6 +12,7 @@ import Ripple from './ripple-effect';
 import CircularProgress from '../progress/circular';
 import Icon from '../../icons';
 import { flexRow, alignCenter, justifyCenter, positionRelative, borderRadius4px, borderBox, noPadding, noBorder, cursorPointer, overflowHidden, pointerEventsNone, outlineNone, userSelectNone, backgroundTransparent, inlineFlex, noMargin } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -33,7 +34,8 @@ const {
   },
   typography: {
     uppercase
-  }
+  },
+  spacing
 } = theme;
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
@@ -83,12 +85,13 @@ export const getClassNameFromColor = color => {
   return !isColor(color) && !isColorName(color) ? color : 'custom-color';
 };
 const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
-const iconSizeMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
-const paddingSizeMap = new Map([['tiny', '4px 8px'], ['small', '6px 12px'], ['medium', '8px 16px'], ['large', '8px 20px'], ['giant', '8px 24px']]);
-const outlinedPaddingSizeMap = new Map([['tiny', '3px 7px'], ['small', '5px 11px'], ['medium', '7px 15px'], ['large', '7px 19px'], ['giant', '7px 23px']]);
+const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
+const paddingSizeMap = new Map([['tiny', spacing([1, 2])], ['small', spacing([1.5, 3])], ['medium', spacing([2, 4])], ['large', spacing([2, 5])], ['giant', spacing([2, 6])]]);
+const outlinedPaddingSizeMap = new Map([['tiny', spacing([0.75, 1.75])], ['small', spacing([1.25, 2.75])], ['medium', spacing([1.75, 3.75])], ['large', spacing([1.75, 4.75])], ['giant', spacing([1.75, 5.75])]]);
 const iconMarginSizeMap = new Map([['tiny', '4px'], ['small', '4px'], ['medium', '4px'], ['large', '6px'], ['giant', '8px']]);
 const typographySizeMap = new Map([['tiny', 'heading5'], ['small', 'heading5'], ['medium', 'heading4'], ['large', 'heading2'], ['giant', 'heading1']]);
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
+const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaArr = {
   hover: 0.1,
   focus: 0.2,
@@ -121,10 +124,11 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = minHeightSizeMap.get(size);
+  const minHeightSizeLink = minHeightSizeLinkMap.get(size);
 
   const _ButtonText = ButtonText(loading, iconMarginSize);
 
-  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
+  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
 
   useImperativeHandle(reference, () => ({
     element: ref.current,
@@ -219,7 +223,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: _onClick,
       id: id,
       type: type,
-      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
+      className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className),
       ...props
     }, start, jsx(Typography, {
       css: _ButtonText,
@@ -228,7 +232,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, children || label), end && end, !disabled && !loading && viewType !== 'link' && jsx(Ripple, {
       color: getRippleColor(color, viewType, allColors)
     }));
-  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon, label, type, className, children, id]);
+  }, [children, className, color, disabled, endIcon, id, label, loading, onClick, size, startIcon, type, viewType]);
 }));
 const ButtonIcon = css`
     ${flexRow};
@@ -244,7 +248,7 @@ const ButtonText = (loading, iconMarginSize) => css`
     margin: 0 ${loading ? iconMarginSize : 0};
 `;
 
-const ButtonRoot = (viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
+const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
@@ -413,6 +417,7 @@ const ButtonRoot = (viewType, size, paddingSize, minHeightSize, outlinedPaddingS
         }
     }
     &.link {
+        min-height: ${minHeightSizeLink};
         ${backgroundTransparent};
         ${noBorder};
         ${noPadding};

package/components/chip/index.js

@@ -6,34 +6,33 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
-import { darken } from '../../styles/color-helper';
+import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap, cursorNotAllowed, positionAbsolute } from '../../styles/general';
+import { hexToRGBA } from '../../styles/color-helper';
+import { useTheme } from '../../theme';
 const {
-  system: {
-    active,
-    rest,
-    white
-  },
-  semantic: {
-    danger
-  },
-  fill: {
-    disabled: fillDisabled,
-    hover: fillHover
-  },
-  line: {
-    normal,
-    disabled: lineDisabled
+  colors: {
+    danger,
+    info,
+    success,
+    warning,
+    system: {
+      active,
+      rest,
+      white,
+      disabled: disabledCl,
+      dark
+    }
   },
-  text: {
-    disabled: textDisabled
-  }
-} = colors;
-const iconSizeMap = new Map([['small', '12px'], ['medium', '16px']]);
+  spacing
+} = useTheme();
+const colorMap = new Map([['default', active], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+const iconSizeMap = new Map([['small', `${spacing(4)}px`], ['medium', `${spacing(5)}px`], ['large', `${spacing(6)}px`]]);
+const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
+const paddingSizeMap = new Map([['small', `0px ${spacing(1.5)}px`], ['medium', `0px ${spacing(2)}px`], ['large', `0px ${spacing(2.5)}px`]]);
+const minHeightSizeMap = new Map([['small', `${spacing(5)}px`], ['medium', `${spacing(6)}px`], ['large', `${spacing(7)}px`]]);
 const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
-  color,
+  color: colorProps,
   size,
   label,
   className,
@@ -41,21 +40,44 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onClick,
   onDbClick,
   onDoubleClick,
-  maxLength,
   startIcon,
   endIcon,
   clearAble,
   disabled,
   readOnly,
   children,
-  style
+  style,
+  labelProps
 }, reference) => {
   const ref = useRef(null);
   const IconRef = useRef(null);
   if (!onDbClick && onDoubleClick) onDbClick = onDoubleClick;
+  const color = colorMap.get(colorProps) || colorProps;
+  const infoChip = {
+    color: colorMap.get(colorProps) || colorProps,
+    contentColor: viewType !== 'filled' ? color : white,
+    backgroundColor: viewType !== 'filled' ? white : color,
+    iconSize: iconSizeMap.get(size),
+    paddingSize: paddingSizeMap.get(size),
+    typographySize: typographySizeMap.get(size),
+    minHeightSize: minHeightSizeMap.get(size),
+    viewType
+  };
+  infoChip.border = viewType === 'ghost' ? 'transparent !important' : colorProps === 'default' ? rest : infoChip === null || infoChip === void 0 ? void 0 : infoChip.color;
+  infoChip.contentColor = colorProps === 'default' && viewType === 'outlined' ? rest : infoChip === null || infoChip === void 0 ? void 0 : infoChip.contentColor;
+  infoChip.backgroundColor = colorProps === 'default' && viewType === 'filled' ? rest : infoChip === null || infoChip === void 0 ? void 0 : infoChip.backgroundColor;
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
 
   const onRemoveHandler = () => {
-    if (onRemove) onRemove(ref.current);
+    if (onRemove || disabled) onRemove(ref.current);
     setTimeout(() => {
       ref.current && ref.current.remove();
     }, 0);
@@ -71,213 +93,158 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onDbClick && event.stopPropagation();
     if (disabled) return;
     onDbClick && onDbClick(event);
-  };
+  }; // Start Icon
 
-  const renderLabel = () => {
-    if (maxLength && label && label.length > maxLength) {
-      label = label.slice(0, maxLength) + '...';
-    }
-
-    return label;
-  };
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
   const startIconView = useMemo(() => {
-    let node = startIcon;
-
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: node,
-        width: iconSizeMap.get(size),
-        height: iconSizeMap.get(size),
-        color: 'currentColor',
-        viewBox: false
+    if (typeof startIcon === 'string') {
+      return jsx(Icon, {
+        name: startIcon,
+        width: infoChip.iconSize,
+        height: infoChip.iconSize,
+        color: 'currentColor'
       });
-    }
+    } else return jsx("div", {
+      css: ChipIconCSS(info)
+    }, startIcon);
+  }, [startIcon, size]); // Label
 
-    return startIcon && jsx("div", {
-      css: ChipIconCSS,
-      className: size
-    }, node);
-  }, [startIcon, size]);
   const labelView = useMemo(() => {
-    return jsx("div", {
-      css: ChipLabelCSS(startIcon, endIcon, clearAble),
-      className: size
-    }, jsx(Typography, {
-      type: size === 'small' ? 'p2' : 'p1',
+    return jsx(Typography, {
+      css: ChipLabelCSS,
+      type: infoChip.typographySize,
       color: 'inherit',
-      lineClamp: 1
-    }, renderLabel()));
-  }, [label, size, startIcon, endIcon, clearAble]);
+      lineClamp: 1,
+      ...labelProps
+    }, label);
+  }, [label, size, startIcon, endIcon, clearAble]); // End Icon
+
   const endIconView = useMemo(() => {
     let node = endIcon;
 
     if (typeof node === 'string') {
-      node = jsx(Icon, {
+      return jsx(Icon, {
         name: node,
-        width: iconSizeMap.get(size),
-        height: iconSizeMap.get(size),
-        color: 'currentColor',
-        viewBox: false
+        width: infoChip.iconSize,
+        height: infoChip.iconSize,
+        color: infoChip.contentColor,
+        viewBox: true
       });
     }
 
-    return clearAble ? jsx("div", {
-      css: ChipIconCSS,
-      className: 'end-icon ' + size,
-      ref: IconRef
-    }, jsx(ButtonIcon, {
+    return clearAble ? jsx(ButtonIcon, {
+      ref: IconRef,
+      className: 'end-icon',
       viewType: 'ghost',
       name: 'Close',
-      color: viewType === 'outlined' && color ? 'inherit' : undefined,
+      width: infoChip.iconSize,
+      height: infoChip.iconSize,
+      color: infoChip.contentColor,
       disabled: disabled,
+      viewBox: true,
       onClick: onRemoveHandler
-    })) : endIcon && jsx("div", {
-      css: ChipIconCSS,
+    }) : node && jsx("div", {
+      css: ChipIconCSS(size),
       className: 'end-icon ' + size,
       ref: IconRef
     }, node);
   }, [clearAble, viewType, color, endIcon, size, disabled]);
   return jsx("div", {
-    css: ChipRootCSS(onClick, onDbClick, color),
+    css: ChipRootCSS(onClick, onDbClick, colorProps, infoChip),
     ref: ref,
-    className: ['DGN-UI-Chip', size, className, color && color !== 'default' && color, color && color !== 'default' && viewType, disabled && 'chip--disabled', readOnly && 'chip--readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Chip', className, disabled && 'chip--disabled', readOnly && 'chip--readOnly', viewType === 'filled' && 'chip--filled'].join(' '),
     style: style,
     onClick: _onClick,
     onDoubleClick: _onDbClick
-  }, startIconView, labelView, endIconView, children);
+  }, !!startIcon && startIconView, !!label && labelView, (!!endIcon || !!clearAble) && endIconView, children);
 }));
-const ChipIconCSS = css`
-    ${flexRow};
-    ${justifyCenter};
-    ${alignCenter};
-    ${positionRelative};
-    ${borderBox};
-    padding: 0 2px;
-    color: inherit;
-    img {
-        border-radius: 50%;
-    }
-    &.small {
-        width: 24px;
-        height: 24px;
-        img {
-            width: 20px;
-            height: 20px;
-        }
-    }
-    &.medium {
-        max-width: 32px;
-        max-height: 32px;
-        img {
-            min-width: 24px;
-            min-height: 24px;
-        }
-        &:not(.end-icon) {
-            margin-right: 4px;
-        }
-        &.end-icon {
-            width: 32px;
-            height: 26px;
-        }
-    }
-`;
-
-const ChipLabelCSS = (startIcon, endIcon, clearAble) => css`
+const ChipLabelCSS = css`
     ${flexRow};
     ${alignCenter};
     ${positionRelative};
     ${userSelectNone};
     ${whiteSpaceNoWrap};
-    padding-right: ${endIcon || clearAble ? 2 : 10}px;
-    padding-left: ${startIcon ? 2 : 10}px;
-    &.small {
-        max-height: 24px;
-    }
-    &.medium {
-        max-height: 32px;
-    }
 `;
 
-const ChipRootCSS = (onClick, onDbClick, color) => css`
+const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
     ${inlineFlex};
     ${alignCenter};
     ${positionRelative};
     ${borderBox};
-    ${border(1, normal)};
+    ${border('1px', info.border)};
     width: max-content;
-    margin-right: 15px;
-    padding: 0 6px;
-    color: ${rest};
-    background: ${white};
-    border-radius: 20px;
+    padding: ${info === null || info === void 0 ? void 0 : info.paddingSize};
+    color: ${info === null || info === void 0 ? void 0 : info.contentColor};
+    background: ${info === null || info === void 0 ? void 0 : info.backgroundColor};
+    border-radius: ${spacing(4)}px;
     cursor: ${onClick || onDbClick ? 'pointer' : 'unset'};
-    &.small {
-        height: 24px;
-    }
-    &.medium {
-        min-height: 32px;
-        padding-top: 2px;
-        padding-bottom: 2px;
-    }
-    &:hover {
-        background: ${fillHover};
-        border-color: ${active};
-    }
-    &.chip--disabled {
-        color: ${textDisabled} !important;
-        background-color: ${fillDisabled} !important;
-        border-color: ${lineDisabled} !important;
-        pointer-events: none !important;
-        .css-${ChipIconCSS.name} {
-            path {
-                fill: ${textDisabled} !important;
+    height: ${info === null || info === void 0 ? void 0 : info.minHeightSize};
+    min-height: ${info === null || info === void 0 ? void 0 : info.minHeightSize};
+    gap: ${spacing()}px;
+    &.chip--filled {
+        &:not(.chip--disabled):not(.chip--readOnly) {
+            &::after {
+                border-radius: ${spacing(4)}px;
+                ${positionAbsolute};
+                top: 0;
+                left: 0;
+                content: '';
+                width: 100%;
+                height: 100%;
+            }
+            &:hover::after,
+            &:focus::after {
+                background: ${hexToRGBA(dark, 0.15)};
+            }
+            &:active::after {
+                background: ${hexToRGBA(dark, 0.3)};
             }
         }
     }
-    &.chip--readOnly {
-        cursor: unset !important;
-        .css-${ChipIconCSS.name} {
-            pointer-events: none !important;
+    &:not(.chip--filled) {
+        &:not(.chip--disabled):not(.chip--readOnly):hover {
+            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
+            background: ${hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.1)};
+            color: ${info === null || info === void 0 ? void 0 : info.color};
         }
-    }
-    &.outlined {
-        &.${color} {
-            color: ${colors[color] || color};
-            border-color: ${colors[color] || color};
+        &:not(.chip--disabled):not(.chip--readOnly):active {
+            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
+            background: ${hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.3)};
+            color: ${info === null || info === void 0 ? void 0 : info.color};
         }
-    }
-    &.filled {
-        color: ${white};
-        .clear-icon {
-            color: ${white};
-            &:hover {
-                color: ${danger};
-            }
-        }
-        &.${color} {
-            background-color: ${colors[color] || color};
-            border-color: ${darken(colors[color] || color, 0.22)};
+        &:not(.chip--disabled):not(.chip--readOnly):focus {
+            ${border('1px', info === null || info === void 0 ? void 0 : info.color)};
+            background: ${hexToRGBA(info === null || info === void 0 ? void 0 : info.color, 0.2)};
+            color: ${info === null || info === void 0 ? void 0 : info.color};
         }
     }
+    &.chip--disabled {
+        color: ${disabledCl} !important;
+        background-color: ${white} !important;
+        ${border('1px', disabledCl)};
+    }
+    &.chip--readOnly,
+    &.chip--disabled {
+        ${cursorNotAllowed}
+    }
+`;
+
+const ChipIconCSS = info => css`
+    ${flexRow};
+    ${justifyCenter};
+    ${alignCenter};
+    ${positionRelative};
+    ${borderBox};
+    width: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    min-width: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    height: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    min-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
 `;
 
 Chip.defaultProps = {
-  label: '',
-  className: '',
-  style: {},
   viewType: 'outlined',
-  size: 'small',
-  clearAble: false
+  size: 'medium',
+  color: 'default'
 };
 Chip.propTypes = {
   /** content to display in Chip */
@@ -290,7 +257,6 @@ Chip.propTypes = {
 
   /** style inline of component */
   style: PropTypes.object,
-  maxLength: PropTypes.number,
 
   /** the icon display at head of Chip */
   startIcon: PropTypes.any,
@@ -299,13 +265,13 @@ Chip.propTypes = {
   endIcon: PropTypes.any,
 
   /** type of chip */
-  viewType: PropTypes.oneOf(['outlined', 'filled']),
+  viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
 
   /** color for text or background of Chip */
   color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
 
   /** size of Chip */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
 
   /** show clear icon if true */
   clearAble: PropTypes.bool,
@@ -332,6 +298,9 @@ Chip.propTypes = {
   onDoubleClick: PropTypes.func,
 
   /** content to display on Chip (the same to label) */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /** props for Typography of label */
+  labelProps: PropTypes.object
 };
 export default Chip;

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

@@ -42,8 +42,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
-  width,
   labelProps,
+  width,
   stopPropagation,
   ...props
 }, reference) => {

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

@@ -55,7 +55,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   returnFormat,
   style,
   textAlign,
-  value,
+  value: valueProp,
   viewType,
   ...props
 }, reference) => {
@@ -86,6 +86,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const focusedValue = useRef(null);
   const [, setDisplayValue] = useState(Date.now());
   const [, setFocusedValue] = useState(Date.now());
+  const [value, setValue] = useState(valueProp || defaultValue);
 
   const _IconAreaCSS = IconAreaCSS(unique);
 
@@ -126,7 +127,12 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onChangeValue = e => {
-    setInputValue(e);
+    if (valueProp) {
+      closePicker();
+    } else {
+      setValue(e.value);
+    }
+
     !!onChange && onChange({
       value: formatValue(e.value, returnFormat)
     });
@@ -436,6 +442,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     }
   }, [value]);
+  useEffect(() => {
+    setValue(valueProp);
+  }, [valueProp]);
   useEffect(() => {
     if (!readOnly) {
       ipRef.current.addEventListener('focus', onInputFocus);
@@ -534,7 +543,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx(InputBase, {
     placeholder: placeholder,
     ...inputProps,
-    readOnly: true,
     ref: ipConRef,
     inputRef: ipRef,
     disabled: disabled,
@@ -544,7 +552,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...inputStyle
     },
     startIcon: startIcon,
-    endIcon: endIcon
+    endIcon: endIcon,
+    onKeyDown: e => e.preventDefault(),
+    readOnly: true
   })), isError && jsx(HelperText, { ...errorProps,
     style: {
       minHeight: 16,

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

@@ -79,13 +79,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -119,13 +119,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -397,10 +397,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),