diginet-core-ui 1.3.78 → 1.3.79

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import useInput from '../../../utils/useInput';
@@ -8,20 +7,19 @@ import { jsx, css } from '@emotion/core';
 import { getGlobal } from '../../../global';
 import Icon from '../../../icons';
 import { Typography } from '../..';
-import { useTheme } from '../../../theme';
-import { classNames } from '../../../utils';
+import { useTheme, useColor as colors } from '../../../theme';
+import { classNames, refType as ref } from '../../../utils';
 import { alignCenter, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from '../../../styles/general';
 const {
   colors: {
-    danger,
-    info,
-    success,
-    warning,
     system: {
       active: systemActive,
       white: systemWhite,
       disabled: systemDisabled
     },
+    semantic: {
+      info: semanticInfo
+    },
     fill: {
       hover: fillHover,
       disabled: fillDisabled
@@ -80,12 +78,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
-
   const _onChange = e => {
     onChange && onChange(e);
     dynamicWidth(e);
   };
-
   const {
     bind,
     value
@@ -97,24 +93,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const styleInputBase = useRef(null);
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
-
-  const _InputBaseRootCSS = InputBaseRootCSS(autoWidth, readOnly);
-
-  const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip, endIcon);
-
+  const _InputBaseCSS = InputBaseCSS(readOnly, status);
+  const _SingleLineCSS = SingleLineCSS(autoWidth);
+  const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip);
   const _TypoCSS = TypoCSS(disabled);
-
   const _TextAreaCSS = TextAreaCSS(resize, readOnly);
+  const _MultilineCSS = MultilineCSS(_TextAreaCSS.name, rows, maxRows);
+  const _InputBaseIconCSS = InputBaseIconCSS(multiline);
 
-  const _MultilineCSS = MultilineCSS(_TextAreaCSS.name, readOnly, rows, maxRows);
   /* Start handler */
-
-
   const onInputTextArea = e => {
     if (!/\d+/.test(rows)) {
       const el = e.target;
       const defaultHeight = 24;
-
       if (el.value) {
         el.style.height = 0;
         el.style.height = Math.max(defaultHeight, el.scrollHeight) + 'px';
@@ -122,10 +113,8 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         el.style.height = defaultHeight + 'px';
       }
     }
-
     !!onInput && onInput(e);
   };
-
   useEffect(() => {
     if (defaultValue !== undefined && defaultValue !== '') {
       if (multiline && !/\d+/.test(rows)) {
@@ -138,18 +127,15 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (multiline && !/\d+/.test(rows) && !(inputBaseRef.current.value || inputBaseRef.current.value === 0)) {
       inputBaseRef.current.style.height = '24px';
     }
-
     if (autoFocus) {
       inputBaseRef.current.focus();
     }
   }, [multiline]);
   useEffect(() => {
     const defaultHeight = 24;
-
     if (valueProp !== undefined) {
       valueArray.current.push(valueProp);
       inputBaseRef.current.value = valueProp;
-
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
         inputBaseRef.current.style.height = Math.max(defaultHeight, inputBaseRef.current.scrollHeight) + 'px';
@@ -161,7 +147,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       }
     }
-
     return () => {
       if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
         inputBaseRef.current.style.height = defaultHeight + 'px';
@@ -172,22 +157,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = inputBaseRef.current || {};
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
-
   const saveInitInfo = refs => {
     if (!autoWidth) return;
     const style = window.getComputedStyle(refs) || refs.currentStyle;
     if (!widthInit.current) widthInit.current = parseInt(style.width);
     styleInputBase.current = style;
   };
-
   const dynamicWidth = e => {
     if (!autoWidth || !inputBaseRef.current) return;
     if (!canvas || !styleInputBase.current || !inputBaseRef.current) return;
@@ -198,72 +180,65 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } = context.measureText(e.target.value);
     inputBaseRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
   };
-  /* Start component */
-
 
-  const newClass = (viewType === 'outlined' ? 'outlined' : 'underlined') + (nonStyle ? ' non-style' : '');
-  const MultipleInputComp = jsx("div", {
-    css: _MultilineCSS,
-    className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled'),
-    ref: ref,
-    ...props
-  }, jsx("textarea", {
-    placeholder: isEnabled ? placeholder : '',
-    defaultValue: defaultValue,
-    ...inputProps,
-    css: _TextAreaCSS,
-    readOnly: readOnly,
-    style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-    className: classNames(inputProps.className),
-    ref: inputBaseRef,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onInput: onInputTextArea,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    disabled: disabled,
-    ...bind
-  }));
+  /* Start component */
+  const newClass = viewType + (viewType === 'none' || nonStyle ? ' non-style' : '');
   const StartIcon = useMemo(() => {
     let node = startIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: startIcon,
         style: iconStyle
       });
     }
-
     return jsx("div", {
-      css: InputBaseIconCSS,
+      css: _InputBaseIconCSS,
       ...startIconProps,
-      className: classNames('start-icon', startIconProps.className)
+      className: classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className)
     }, node);
   }, [startIcon]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: endIcon,
         style: iconStyle
       });
     }
-
     return jsx("div", {
-      css: InputBaseIconCSS,
+      css: _InputBaseIconCSS,
       ...endIconProps,
-      className: classNames('end-icon', endIconProps.className)
+      className: classNames('DGN-UI-InputBase-End-Icon', endIconProps.className)
     }, ' ', node, ' ');
   }, [endIcon]);
+  const MultipleInputComp = jsx("div", {
+    css: [_InputBaseCSS, _MultilineCSS],
+    className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled'),
+    ref: ref,
+    ...props
+  }, startIcon && StartIcon, jsx("textarea", {
+    placeholder: isEnabled ? placeholder : '',
+    defaultValue: defaultValue,
+    ...inputProps,
+    css: _TextAreaCSS,
+    readOnly: readOnly,
+    style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
+    className: classNames('DGN-UI-InputBase-Textarea', inputProps.className),
+    ref: inputBaseRef,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onInput: onInputTextArea,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    disabled: disabled,
+    ...bind
+  }), endIcon && EndIcon);
   const InputComp = jsx("div", {
-    css: _InputBaseRootCSS,
+    css: [[_InputBaseCSS, _SingleLineCSS]],
     ref: ref,
     ...props,
-    className: classNames('DGN-UI-InputBase', newClass, className, status, disabled && 'disabled')
-  }, startIcon && StartIcon, jsx("div", {
-    css: InputBaseCSS
-  }, jsx("input", {
+    className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled')
+  }, startIcon && StartIcon, jsx("input", {
     type: type,
     autoComplete: autoComplete,
     placeholder: isEnabled ? placeholder : '',
@@ -271,7 +246,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...inputProps,
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-    className: classNames(newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
+    className: classNames('DGN-UI-InputBase-Input', newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
     ref: refs => {
       if (!refs) return;
       inputBaseRef.current = refs;
@@ -292,43 +267,92 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hoverTooltip: true,
     type: 'p1',
     style: {
-      lineHeight: '24px'
+      lineHeight: '26px',
+      width: '100%'
     }
-  }, value !== null && value !== void 0 ? value : '')), endIcon && EndIcon);
+  }, value !== null && value !== void 0 ? value : ''), endIcon && EndIcon);
   /* End component */
 
   return multiline ? MultipleInputComp : InputComp;
 }));
-
-const InputBaseRootCSS = (autoWidth, readOnly) => css`
+const InputBaseCSS = (readOnly, status) => css`
     ${flexRow};
-    ${alignCenter};
     ${positionRelative};
-    ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
-    flex: 1 1 auto;
+    ${borderBox};
     &:hover,
     &:focus-within {
-        .start-icon:not(.non-effect) {
+        .DGN-UI-InputBase-Start-Icon:not(.non-effect) {
             path {
                 fill: ${systemActive};
             }
         }
     }
-    &:focus-within {
-        border-bottom-color: ${info};
+    &.disabled {
+        ${pointerEventsNone};
+        border-color: ${lineDisabled} !important;
+        &::before {
+            border-bottom-color: ${lineDisabled} !important;
+        }
+        &.outlined {
+            background-color: ${fillDisabled};
+        }
+        .DGN-UI-InputBase-Start-Icon,
+        .DGN-UI-InputBase-End-Icon {
+            &:not(.non-effect),
+            &.allow-disabled {
+                path {
+                    fill: ${systemDisabled};
+                }
+            }
+        }
+    }
+    &.outlined {
+        ${border(1, lineNormal)};
+        ${borderRadius4px};
+        padding: ${spacing([1.75, 4])};
+        &:not(:focus-within):hover {
+            ${!readOnly && `
+                background-color: ${fillHover};
+                border-color: ${lineHover};
+                input, textarea {
+                    ::placeholder {
+                        color: ${systemActive};
+                    }
+                }
+            `};
+        }
+        &:focus-within {
+            ${!readOnly && `
+                border-color: ${lineFocus};
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                &::after {
+                    border-color: inherit;
+                }
+            `}
+        }
         &::after {
-            border-bottom-color: inherit;
-            transform: scaleX(1);
+            content: '';
+            ${positionAbsolute};
+            ${borderRadius4px};
+            ${pointerEventsNone};
+            ${border(2, 'transparent')};
+            left: -2px;
+            right: -2px;
+            top: -2px;
+            bottom: -2px;
         }
     }
     &.underlined {
         padding-bottom: ${spacing([1])};
         padding-top: ${spacing([1])};
         &:not(:focus-within):hover {
-            &::before {
-                ${!readOnly && `border-bottom-color: ${lineHover}`};
-            }
-            input {
+            ${!readOnly && `
+                &::before {
+                border-bottom-color: ${lineHover};
+                }
+            `};
+            input,
+            textarea {
                 ::placeholder {
                     color: ${systemActive};
                 }
@@ -336,12 +360,11 @@ const InputBaseRootCSS = (autoWidth, readOnly) => css`
         }
         &:focus-within {
             ${!readOnly && `
-                    border-bottom-color: ${lineFocus};
-                    &::after {
-                        border-bottom-color: inherit;
-                        transform: scaleX(1);
-                    }
-                `}
+				&::after {
+					border-bottom-color: ${lineFocus};
+					transform: scaleX(1);
+				}
+			`}
         }
         &::before {
             content: '';
@@ -363,56 +386,14 @@ const InputBaseRootCSS = (autoWidth, readOnly) => css`
             transition: all 0.2s ease;
         }
     }
-    &.outlined {
-        ${border(1, lineNormal)};
-        ${borderRadius4px};
-        ${parseHeight(40)};
-        ${borderBox};
-        background-color: ${systemWhite};
-        &:not(:focus-within):hover {
-            ${!readOnly && `
-                            background-color: ${fillHover};
-                            border-color: ${lineHover};
-                            input {
-                                ::placeholder {
-                                    color: ${systemActive};
-                                }
-                            }
-                            
-                        `};
-        }
-        &:focus-within {
-            ${!readOnly && `
-                    border-color: ${lineFocus};
-                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                    &::after {
-                        border-color: inherit;
-                    }
-                `}
-        }
-        &::after {
-            content: '';
-            ${positionAbsolute};
-            ${border(2, 'transparent')};
-            ${borderRadius4px};
-            ${pointerEventsNone};
-            left: -2px;
-            right: -2px;
-            top: -2px;
-            bottom: -2px;
-        }
-        .start-icon {
-            margin-left: ${spacing([4])};
-        }
-        .end-icon {
-            margin-right: ${spacing([4])};
-        }
-    }
     &.non-style {
+        padding-bottom: ${spacing([1])};
+        padding-top: ${spacing([1])};
         border-color: transparent !important;
         box-shadow: none !important;
         background-color: transparent !important;
-        input {
+        input,
+        textarea {
             background-color: transparent !important;
         }
         &:before,
@@ -420,62 +401,32 @@ const InputBaseRootCSS = (autoWidth, readOnly) => css`
             border-color: transparent !important;
         }
     }
-    &.info {
-        border-color: ${info} !important;
-        &::before {
-            border-color: ${info} !important;
-        }
-    }
-    &.success {
-        border-color: ${success} !important;
-        &::before {
-            border-color: ${success} !important;
-        }
-    }
-    &.warning {
-        border-color: ${warning} !important;
-        &::before {
-            border-color: ${warning} !important;
-        }
-    }
-    &.danger {
-        border-color: ${danger} !important;
-        &::before {
-            border-color: ${danger} !important;
-        }
-    }
-    &.disabled {
-        ${pointerEventsNone};
-        border-color: ${lineDisabled} !important;
-        &::before {
-            border-bottom-color: ${lineDisabled} !important;
-        }
-        &.outlined {
-            background-color: ${fillDisabled};
-        }
-        .start-icon,
-        .end-icon {
-            &:not(.non-effect),
-            &.allow-disabled {
-                path {
-                    fill: ${systemDisabled};
-                }
-            }
-        }
-    }
+    ${status !== 'default' && `border-color: ${colors[status]} !important;&::before {
+        border-color: ${colors[status]} !important;
+    }`}
     & + .DGN-UI-HelperText {
         ${positionAbsolute};
         min-height: 16px;
         top: 100%;
     }
 `;
-
-const InputBaseCSS = css`
-    ${flexRow};
+const SingleLineCSS = autoWidth => css`
+    ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
+    ${alignCenter};
     flex: 1 1 auto;
+    &:focus-within {
+        border-bottom-color: ${semanticInfo};
+        &::after {
+            border-bottom-color: inherit;
+            transform: scaleX(1);
+        }
+    }
+    &.outlined {
+        ${parseHeight(40)};
+        background-color: ${systemWhite};
+    }
 `;
-
-const InputCSS = (autoWidth, isEnabled, hoverTooltip, endIcon) => css`
+const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     ${parseWidthHeight(autoWidth ? '10px' : '100%', 24)};
     ${borderNone};
     ${outlineNone};
@@ -483,6 +434,7 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip, endIcon) => css`
     color: ${textMain};
     background-color: transparent;
     padding-top: 0;
+    padding-bottom: 0;
     ${paragraph1};
     text-overflow: ellipsis;
     &::placeholder {
@@ -496,13 +448,7 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip, endIcon) => css`
     &:hover {
         color: ${systemActive};
     }
-    &.outlined {
-        padding-bottom: inherit;
-        padding-left: ${spacing([4])};
-        padding-right: ${endIcon ? 0 : spacing([4])};
-    }
     &.underlined {
-        padding-bottom: 0;
         padding-left: 0;
         padding-right: 0;
     }
@@ -511,14 +457,8 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip, endIcon) => css`
     }
     ${!isEnabled && hoverTooltip && 'display: none'};
 `;
-
 const TypoCSS = disabled => css`
     ${parseHeight(24)};
-    &.outlined {
-        padding-bottom: inherit;
-        padding-left: ${spacing([4])};
-        padding-right: ${spacing([4])};
-    }
     &:focus {
         background-color: transparent;
         color: ${systemActive};
@@ -528,16 +468,32 @@ const TypoCSS = disabled => css`
     }
     ${disabled && 'user-select: none'};
 `;
-
+const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
+    ${parseWidthHeight('100%', 'max-content')};
+    &.outlined {
+        .css-${TextAreaCSSName} {
+            ${parseHeight(24)};
+            ${rows && /\d+/.test(rows) && `height: ${20 * rows + 4}px`};
+            ${maxRows && /\d+/.test(maxRows) && `max-height: ${20 * maxRows + 4}px`};
+        }
+    }
+    &.underlined {
+        .css-${TextAreaCSSName} {
+            ${parseHeight(24)};
+            ${rows && /\d+/.test(rows) && `height: ${20 * rows + 4}px`};
+            ${maxRows && /\d+/.test(maxRows) && `max-height: ${20 * maxRows + 4}px`};
+        }
+    }
+`;
 const TextAreaCSS = (resize, readOnly) => css`
     ${displayBlock};
-    color: ${textMain};
     ${paragraph1};
     ${borderNone};
     ${outlineNone};
     ${positionRelative};
     ${borderBox};
     ${parseWidth('100%')};
+    color: ${textMain};
     min-height: max-content;
     min-width: max-content;
     background-color: transparent;
@@ -546,12 +502,12 @@ const TextAreaCSS = (resize, readOnly) => css`
     resize: ${resize};
     &:hover:not(:focus-within) {
         ${!readOnly && `
-                        border-color: ${systemActive};
-                        color: ${systemActive};
-                        ::placeholder {
-                            color: ${systemActive};
-                        }
-                    `};
+			border-color: ${systemActive};
+			color: ${systemActive};
+			::placeholder {
+				color: ${systemActive};
+			}
+		`};
     }
     &:focus-within {
         color: ${systemActive};
@@ -568,118 +524,17 @@ const TextAreaCSS = (resize, readOnly) => css`
         background-clip: content-box;
     }
 `;
-
-const MultilineCSS = (TextAreaCSSName, readOnly, rows, maxRows) => css`
-    ${displayBlock};
-    ${positionRelative};
-    ${borderBox};
-    ${parseWidthHeight('100%', 'max-content')};
-    &.outlined {
-        ${border(1, lineNormal)};
-        ${borderRadius4px};
-        padding: ${spacing([1.75, 4])};
-        .css-${TextAreaCSSName} {
-            ${parseHeight(24)};
-            ${rows && /\d+/.test(rows) && `height: ${20 * rows + 4}px`};
-            ${maxRows && /\d+/.test(maxRows) && `max-height: ${20 * maxRows + 4}px`};
-        }
-        &:not(:focus-within):hover {
-            ${!readOnly && `
-                            background-color: ${fillHover};
-                            border-color: ${lineHover};
-                        `};
-        }
-        &:focus-within {
-            ${!readOnly && `
-                    border-color: ${lineFocus};
-                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                    &::after {
-                        border-color: inherit;
-                    }
-                `}
-        }
-        &::after {
-            content: '';
-            ${positionAbsolute};
-            ${borderRadius4px};
-            ${pointerEventsNone};
-            ${border(2, 'transparent')}
-            left: -2px;
-            right: -2px;
-            top: -2px;
-            bottom: -2px;
-        }
-    }
-    &.underlined {
-        border: 0;
-        padding: ${spacing(1, 0)};
-        .css-${TextAreaCSSName} {
-            ${parseHeight(24)};
-            ${rows && /\d+/.test(rows) && `height: ${20 * rows + 4}px`};
-            ${maxRows && /\d+/.test(maxRows) && `max-height: ${20 * maxRows + 4}px`};
-        }
-        &:not(:focus-within):hover {
-            ${!readOnly && `
-                            &::before {
-                            border-bottom-color: ${lineHover};
-                            }
-                        `};
-        }
-        &:focus-within {
-            ${!readOnly && `
-                            &::after {
-                                border-bottom-color: ${lineFocus};
-                                transform: scaleX(1);
-                            }
-                        `}
-        }
-        &::before {
-            content: '';
-            ${positionAbsolute};
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-bottom: 1px solid ${lineNormal};
-        }
-        &::after {
-            content: '';
-            ${positionAbsolute};
-            left: 0px;
-            right: 0px;
-            bottom: -1px;
-            border-bottom: 2px solid transparent;
-            transform: scaleX(0);
-            transform-origin: center;
-            transition: all 0.2s ease;
-        }
-    }
-    &.disabled {
-        ${pointerEventsNone};
-        resize: none;
-        &.outlined {
-            background-color: ${fillDisabled};
-        }
-        &.underlined::before {
-            border-bottom-color: ${fillDisabled} !important;
-        }
-    }
-    & + .DGN-UI-HelperText {
-        ${positionAbsolute};
-        min-height: 16px;
-        top: 100%;
-    }
-`;
-
-const InputBaseIconCSS = css`
+const InputBaseIconCSS = multiple => css`
     ${flexRow};
+    ${multiple && 'align-self: flex-end'};
     color: inherit;
-    &.start-icon {
+    &.DGN-UI-InputBase-Start-Icon {
         margin-right: ${spacing([1])};
         & + input {
             padding-left: 0;
         }
     }
-    &.end-icon {
+    &.DGN-UI-InputBase-End-Icon {
         margin-left: ${spacing([1])};
     }
 `;
@@ -706,103 +561,67 @@ InputBase.defaultProps = {
   viewType: 'underlined'
 };
 InputBase.propTypes = {
-  /** the type of border you want to display */
-  viewType: PropTypes.oneOf(['underlined', 'outlined']),
-
-  /** default value is displayed for first render */
-  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** the displayed value for each change */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** hints for input */
-  placeholder: PropTypes.string,
-
-  /** type auto complete of input (like new-password) */
+  /** This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). */
   autoComplete: PropTypes.string,
-
-  /** allow resize multiline input (resize css style) */
-  resize: PropTypes.string,
-
-  /** class for InputBase component */
+  /** If `true`, the input element is focused during the first mount. */
+  autoFocus: PropTypes.bool,
+  /** If `true`, the width of the component will automatically be set according to the contents inside the input, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
+  /** Class for component. */
   className: PropTypes.string,
-
-  /** the number of rows of textarea */
-  rows: PropTypes.number,
-
-  /** the maximum of rows of textarea */
-  maxRows: PropTypes.number,
-
-  /** status type to display color for input (only available for type is inform) */
-  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
-
-  /** use multiline input if true */
-  multiline: PropTypes.bool,
-
-  /** transparent border color if true */
-  nonStyle: PropTypes.bool,
-
-  /** prevent all event if true, hide all icon */
+  /** The default value. Use when the component is not controlled. */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** The number of milliseconds to wait before call onChange. */
+  delayOnChange: PropTypes.number,
+  /** If `true`, the component is disabled.*/
   disabled: PropTypes.bool,
-
-  /** prevent all event if true */
-  readOnly: PropTypes.bool,
-
-  /** autofocus after first render */
-  autoFocus: PropTypes.bool,
-
-  /** At least one character is required */
-  required: PropTypes.bool,
-
-  /** icon element display in the left of input */
-  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /** icon element display in the right of input */
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /** props of input in InputBase component */
-  inputProps: PropTypes.object,
-
-  /** props of start icon in InputBase component */
-  startIconProps: PropTypes.object,
-
-  /** props of end icon in InputBase component */
+  /** Props of end icon. */
   endIconProps: PropTypes.object,
-
-  /** style inline of icon in InputBase component */
+  /** Style inline of icon. */
   iconStyle: PropTypes.object,
-
-  /** style inline of input in InputBase component */
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+  inputProps: PropTypes.object,
+  /** Pass a ref to the input element. */
+  inputRef: ref,
+  /** Style inline of input element. */
   inputStyle: PropTypes.object,
-
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
-
-  /** on key down function */
-  onKeyDown: PropTypes.func,
-
-  /** on key up function */
-  onKeyUp: PropTypes.func,
-
-  /** on input function */
-  onInput: PropTypes.func,
-
-  /** on change function */
-  onChange: PropTypes.func,
-
-  /** on blur function */
+  /** Maximum number of rows to display when multiline option is set to true. */
+  maxRows: PropTypes.number,
+  /** If `true`, a textarea element is rendered. */
+  multiline: PropTypes.bool,
+  /** Callback fired when the input is blurred. */
   onBlur: PropTypes.func,
-
-  /** on focus function */
+  /** Callback fired when the value is changed. */
+  onChange: PropTypes.func,
+  /** Callback fired when the input is focused. */
   onFocus: PropTypes.func,
-
-  /** inputRef of InputBase component */
-  inputRef: PropTypes.any,
-
-  /** delayOnChange of InputBase component */
-  delayOnChange: PropTypes.number,
-
-  /** autoWidth of TextInput component, don't run with multiline = true */
-  autoWidth: PropTypes.bool
+  /** Callback fired when input. */
+  onInput: PropTypes.func,
+  /** Callback fired when pressing a key. */
+  onKeyDown: PropTypes.func,
+  /** Callback fired when releases a key. */
+  onKeyUp: PropTypes.func,
+  /** The short hint displayed in the input before the user enters a value. */
+  placeholder: PropTypes.string,
+  /** If `true`, the component is readonly. */
+  readOnly: PropTypes.bool,
+  /** If `true`, the input element is required. */
+  required: PropTypes.bool,
+  /** allow resize multiline input (resize css style) */
+  resize: PropTypes.string,
+  /** Number of rows to display when multiline option is set to true. */
+  rows: PropTypes.number,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Props of start icon. */
+  startIconProps: PropTypes.object,
+  /** Status type to display color for input. */
+  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
+  /** The value of the input element, required for a controlled component. */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
 };
 export default InputBase;