diginet-core-ui 1.3.73 → 1.3.74

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

@@ -5,58 +5,91 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } fro
 import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import theme from '../../../theme/settings';
-import { typography } from '../../../styles/typography';
-const {
-  colors
-} = theme;
 import { getGlobal } from '../../../global';
 import Icon from '../../../icons';
+import { Typography } from '../..';
+import { useTheme } from '../../../theme';
+import { classNames } 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
+    },
+    fill: {
+      hover: fillHover,
+      disabled: fillDisabled
+    },
+    line: {
+      normal: lineNormal,
+      hover: lineHover,
+      focus: lineFocus,
+      disabled: lineDisabled
+    },
+    text: {
+      main: textMain,
+      sub: textSub
+    }
+  },
+  typography: {
+    paragraph1
+  },
+  spacing
+} = useTheme();
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
-  viewType,
-  defaultValue,
-  value: valueProp,
-  placeholder,
-  resize,
-  status,
-  className,
+  action = {},
   autoComplete,
   autoFocus,
+  autoWidth,
+  className,
+  defaultValue,
+  delayOnChange,
   disabled,
-  readOnly,
-  multiline,
-  nonStyle,
-  refs,
-  startIcon,
   endIcon,
-  startIconProps,
   endIconProps,
-  inputRef: inputBaseRef,
-  inputProps,
+  hoverTooltip,
   iconStyle,
+  inputProps,
+  inputRef: inputBaseRef,
   inputStyle,
-  rows,
   maxRows,
-  onChange,
+  multiline,
+  nonStyle,
   onBlur,
+  onChange,
   onFocus,
   onInput,
   onKeyDown,
   onKeyUp,
-  delayOnChange,
-  autoWidth,
+  placeholder,
+  readOnly,
+  resize,
+  rows,
+  startIcon,
+  startIconProps,
+  status,
+  type,
+  value: valueProp,
+  viewType,
   ...props
 }, reference) => {
+  if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
+
   const _onChange = e => {
     onChange && onChange(e);
     dynamicWidth(e);
   };
 
   const {
-    bind
+    bind,
+    value
   } = useInput(defaultValue, valueProp, _onChange, onInput, delayOnChange);
-  if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
   if (!inputBaseRef) inputBaseRef = useRef(null);
   const ref = useRef(null);
   const valueArray = useRef([]);
@@ -64,375 +97,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const styleInputBase = useRef(null);
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
-  /* Start styled */
-
-  const inputBaseRoot = css`
-                display: flex;
-                flex: 1 1 auto;
-                align-items: center;
-                position: relative;
-                height: max-content;
-                width: ${autoWidth ? 'max-content' : 'auto'};
-                &:hover,
-                &:focus-within {
-                    .start-icon:not(.non-effect) {
-                        path {
-                            fill: ${colors.primary};
-                        }
-                    }
-                }
-                &:focus-within {
-                    border-bottom-color: ${colors.info5};
-                    &::after {
-                        border-bottom-color: inherit;
-                        transform: scaleX(1);
-                    }
-                }
-                &.underlined {
-                    padding-bottom: 4px;
-                    padding-top: 4px;
-                    &:not(:focus-within):hover {
-                        &::before {
-                            ${!readOnly && `border-bottom-color: ${colors.brand}`};
-                        }
-                    }
-                    &:focus-within {
-                        ${!readOnly && `
-                    border-bottom-color: ${colors.info5};
-                    &::after {
-                        border-bottom-color: inherit;
-                        transform: scaleX(1);
-                    }
-                `}
-                    }
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        border-bottom: 1px solid ${colors.border};
-                    }
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        left: 0px;
-                        right: 0px;
-                        bottom: -1px;
-                        border-bottom: 2px solid transparent;
-                        transform: scaleX(0);
-                        transform-origin: center;
-                        transition: all 0.2s ease;
-                    }
-                }
-                &.outlined {
-                    border: 1px solid ${colors.border};
-                    border-radius: 4px;
-                    height: 40px;
-                    box-sizing: border-box;
-                    background-color: ${colors.white};
-                    &:not(:focus-within):hover {
-                        ${!readOnly && `
-                            background-color: ${colors.hover};
-                            border-color: ${colors.brand};
-                            input {
-                                background-color: ${colors.hover};
-                            }
-                        `};
-                    }
-                    &:focus-within {
-                        ${!readOnly && `
-                    border-color: ${colors.info5};
-                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                    &::after {
-                        border-color: inherit;
-                    }
-                `}
-                    }
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        left: -2px;
-                        right: -2px;
-                        top: -2px;
-                        bottom: -2px;
-                        border: 2px solid transparent;
-                        border-radius: 4px;
-                        pointer-events: none;
-                    }
-                    .start-icon {
-                        margin-left: 16px;
-                    }
-                    .end-icon {
-                        margin-right: 16px;
-                    }
-                }
-                &.non-style {
-                    border-color: transparent !important;
-                    box-shadow: none !important;
-                    background-color: transparent !important;
-                    input {
-                        background-color: transparent !important;
-                    }
-                    &:before,
-                    &:after {
-                        border-color: transparent !important;
-                    }
-                }
-                &.info {
-                    border-color: ${colors.info} !important;
-                    &::before {
-                        border-color: ${colors.info} !important;
-                    }
-                }
-                &.success {
-                    border-color: ${colors.success} !important;
-                    &::before {
-                        border-color: ${colors.success} !important;
-                    }
-                }
-                &.warning {
-                    border-color: ${colors.warning} !important;
-                    &::before {
-                        border-color: ${colors.warning} !important;
-                    }
-                }
-                &.danger {
-                    border-color: ${colors.danger} !important;
-                    &::before {
-                        border-color: ${colors.danger} !important;
-                    }
-                }
-                &.disabled {
-                    border-color: ${colors.disabled} !important;
-                    pointer-events: none;
-                    &::before {
-                        border-bottom-color: ${colors.disabled} !important;
-                    }
-                    &.outlined {
-                        background-color: ${colors.dark12};
-                    }
-                    /* input {
-                        color: ${colors.disabled};
-                    } */
-                    .start-icon,
-                    .end-icon {
-                        &:not(.non-effect),
-                        &.allow-disabled {
-                            path {
-                                fill: ${colors.disabled};
-                            }
-                        }
-                    }
-                }
-                & + .DGN-UI-HelperText {
-                    min-height: 16px;
-                    position: absolute;
-                    top: 100%;
-                }
-            `;
-  const inputBaseCSS = css`
-                display: flex;
-                flex: 1 1 auto;
-            `;
-  const inputCSS = css`
-                width: ${autoWidth ? '10px' : '100%'};
-                border: none;
-                outline: none;
-                transition: all 0.1s;
-                color: ${colors.input};
-                background-color: transparent;
-                padding-top: 0;
-                ${typography.paragraph1};
-                height: 24px;
-                text-overflow: ellipsis;
-                &::placeholder {
-                    color: ${colors.placeholder};
-                    ${typography.paragraph1};
-                }
-                &:focus {
-                    background-color: transparent;
-                    color: ${colors.primary};
-                }
-                &:hover {
-                    color: ${colors.primary};
-                }
-                &.outlined {
-                    padding-bottom: inherit;
-                    padding-left: 16px;
-                    padding-right: 16px;
-                }
-                &.underlined {
-                    padding-bottom: 0;
-                    padding-left: 0;
-                    padding-right: 0;
-                }
-                &:disabled {
-                    background-color: transparent;
-                }
-            `;
-  const textAreaCSS = css`
-                display: block;
-                color: ${colors.input};
-                ${typography.paragraph1};
-                min-height: max-content;
-                min-width: max-content;
-                outline: none;
-                border: none;
-                background-color: transparent;
-                padding: 2px 0;
-                width: 100%;
-                overflow-y: auto;
-                position: relative;
-                resize: ${resize};
-                box-sizing: border-box;
-                /* &:disabled {
-                    color: ${colors.disabled};
-                } */
-                &:hover:not(:focus-within) {
-                    ${!readOnly && `
-                        border-color: ${colors.brand};
-                        color: ${colors.primary};
-                        ::placeholder {
-                            color: ${colors.primary};
-                        }
-                    `};
-                }
-                &:focus-within {
-                    color: ${colors.primary};
-                }
-                &::-webkit-scrollbar {
-                    width: 4px;
-                    background-color: white;
-                    border-radius: 4px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 10px;
-                    mix-blend-mode: normal;
-                    background-color: ${colors.dark12};
-                    background-clip: content-box;
-                }
-            `;
-  const multilineCSS = css`
-                display: block;
-                position: relative;
-                height: max-content;
-                width: 100%;
-                box-sizing: border-box;
-                &.outlined {
-                    border: 1px solid ${colors.border};
-                    border-radius: 4px;
-                    /* height: 30px; */
-                    padding: 7px 16px;
-                    .css-${textAreaCSS.name} {
-                        height: 24px;
-                    }
-                    &:not(:focus-within):hover {
-                        ${!readOnly && `
-                            background-color: ${colors.hover};
-                            border-color: ${colors.brand};
-                            input {
-                                background-color: ${colors.hover};
-                            }
-                        `};
-                    }
-                    &:focus-within {
-                        ${!readOnly && `
-                    border-color: ${colors.info5};
-                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                    &::after {
-                        border-color: inherit;
-                    }
-                `}
-                    }
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        left: -2px;
-                        right: -2px;
-                        top: -2px;
-                        bottom: -2px;
-                        border: 2px solid transparent;
-                        border-radius: 4px;
-                        pointer-events: none;
-                    }
-                }
-                &.underlined {
-                    border: 0;
-                    /* height: 26px; */
-                    padding: 4px 0;
-                    .css-${textAreaCSS.name} {
-                        height: 24px;
-                    }
-                    &:not(:focus-within):hover {
-                        ${!readOnly && `
-                            &::before {
-                            border-bottom-color: ${colors.brand};
-                            }
-                        `};
-                    }
-                    &:focus-within {
-                        ${!readOnly && `
-                            &::after {
-                                border-bottom-color: ${colors.info5};
-                                transform: scaleX(1);
-                            }
-                        `}
-                    }
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        border-bottom: 1px solid ${colors.border};
-                    }
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        left: 0px;
-                        right: 0px;
-                        bottom: -1px;
-                        border-bottom: 2px solid transparent;
-                        transform: scaleX(0);
-                        transform-origin: center;
-                        transition: all 0.2s ease;
-                    }
-                }
-                &.disabled {
-                    pointer-events: none;
-                    resize: none;
-                    /* color: ${colors.disabled}; */
-                    &.outlined {
-                        background-color: ${colors.dark12};
-                    }
-                    &.underlined::before {
-                        border-bottom-color: ${colors.disabled} !important;
-                    }
-                }
-                & + .DGN-UI-HelperText {
-                    min-height: 16px;
-                    position: absolute;
-                    top: 100%;
-                }
-            `;
-  const inputBaseIconCSS = css`
-                display: flex;
-                color: inherit;
-                &.start-icon {
-                    margin-right: 4px;
-                    & + input {
-                        padding-left: 0;
-                    }
-                }
-                &.end-icon {
-                    margin-left: 4px;
-                }
-            `;
-  /* End styled */
 
+  const _InputBaseRootCSS = InputBaseRootCSS(autoWidth, readOnly);
+
+  const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip, endIcon);
+
+  const _TypoCSS = TypoCSS(disabled);
+
+  const _TextAreaCSS = TextAreaCSS(resize, readOnly);
+
+  const _MultilineCSS = MultilineCSS(_TextAreaCSS.name, readOnly, rows, maxRows);
   /* Start handler */
 
+
   const onInputTextArea = e => {
     if (!/\d+/.test(rows)) {
       const el = e.target;
@@ -450,8 +127,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   useEffect(() => {
-    !!refs && refs(ref);
-
     if (defaultValue !== undefined && defaultValue !== '') {
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
@@ -459,36 +134,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, []);
-  useEffect(() => {
-    if (/\d+/.test(rows)) {
-      inputBaseRef.current.style.height = 20 * rows + 4 + 'px';
-      return () => {
-        if (inputBaseRef.current) {
-          inputBaseRef.current.style.height = null;
-        }
-      };
-    }
-  }, [rows]);
-  useEffect(() => {
-    if (/\d+/.test(maxRows)) {
-      inputBaseRef.current.style.maxHeight = 20 * maxRows + 4 + 'px';
-      return () => {
-        if (inputBaseRef.current) {
-          inputBaseRef.current.style.maxHeight = null;
-        }
-      };
-    }
-  }, [maxRows]);
-  useEffect(() => {
-    if (viewType === 'outlined' && endIcon) {
-      inputBaseRef.current.style.paddingRight = '0';
-      return () => {
-        if (inputBaseRef.current) {
-          inputBaseRef.current.style.paddingRight = null;
-        }
-      };
-    }
-  }, [viewType]);
   useEffect(() => {
     if (multiline && !/\d+/.test(rows) && !(inputBaseRef.current.value || inputBaseRef.current.value === 0)) {
       inputBaseRef.current.style.height = '24px';
@@ -497,12 +142,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (autoFocus) {
       inputBaseRef.current.focus();
     }
-  }, [multiline]); // useEffect(() => {
-  //     if (placeholder !== undefined) {
-  //         inputBaseRef.current.placeholder = placeholder;
-  //     }
-  // }, [placeholder]);
-
+  }, [multiline]);
   useEffect(() => {
     const defaultHeight = 24;
 
@@ -528,24 +168,20 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [valueProp]);
-  useEffect(() => {
-    if (disabled) {
-      if (ref.current) {
-        ref.current.classList.add('disabled');
-      }
+  /* End handler */
 
-      inputBaseRef.current.disabled = disabled;
-    }
+  useImperativeHandle(reference, () => {
+    const currentRef = inputBaseRef.current || {};
+    const _instance = { ...action
+    }; // methods
 
-    return () => {
-      ref.current && ref.current.classList.remove('disabled');
-      inputBaseRef.current && inputBaseRef.current.removeAttribute('disabled');
-    };
-  }, [disabled]);
-  /* End handler */
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
 
   const saveInitInfo = refs => {
-    inputBaseRef.current = refs;
     if (!autoWidth) return;
     const style = window.getComputedStyle(refs) || refs.currentStyle;
     if (!widthInit.current) widthInit.current = parseInt(style.width);
@@ -567,25 +203,25 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const newClass = (viewType === 'outlined' ? 'outlined' : 'underlined') + (nonStyle ? ' non-style' : '');
   const MultipleInputComp = jsx("div", {
-    css: multilineCSS,
-    className: ['DGN-UI-InputBase', newClass, className].join(' ').trim(),
+    css: _MultilineCSS,
+    className: classNames('DGN-UI-InputBase', newClass, className, disabled && 'disabled'),
     ref: ref,
     ...props
   }, jsx("textarea", {
-    type: "text",
     placeholder: isEnabled ? placeholder : '',
     defaultValue: defaultValue,
     ...inputProps,
-    css: textAreaCSS,
+    css: _TextAreaCSS,
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-    className: inputProps.className ? inputProps.className : '',
+    className: classNames(inputProps.className),
     ref: inputBaseRef,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInputTextArea,
     onBlur: onBlur,
     onFocus: onFocus,
+    disabled: disabled,
     ...bind
   }));
   const StartIcon = useMemo(() => {
@@ -599,9 +235,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("div", {
-      css: inputBaseIconCSS,
+      css: InputBaseIconCSS,
       ...startIconProps,
-      className: ['start-icon', startIconProps.className ? startIconProps.className : ''].join(' ').trim()
+      className: classNames('start-icon', startIconProps.className)
     }, node);
   }, [startIcon]);
   const EndIcon = useMemo(() => {
@@ -615,18 +251,18 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("div", {
-      css: inputBaseIconCSS,
+      css: InputBaseIconCSS,
       ...endIconProps,
-      className: ['end-icon', endIconProps.className ? endIconProps.className : ''].join(' ').trim()
+      className: classNames('end-icon', endIconProps.className)
     }, ' ', node, ' ');
   }, [endIcon]);
   const InputComp = jsx("div", {
-    css: inputBaseRoot,
+    css: _InputBaseRootCSS,
     ref: ref,
     ...props,
-    className: ['DGN-UI-InputBase', newClass, className, status].join(' ').trim()
+    className: classNames('DGN-UI-InputBase', newClass, className, status, disabled && 'disabled')
   }, startIcon && StartIcon, jsx("div", {
-    css: inputBaseCSS
+    css: InputBaseCSS
   }, jsx("input", {
     type: type,
     autoComplete: autoComplete,
@@ -635,53 +271,439 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...inputProps,
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-    className: [newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className].join(' '),
+    className: classNames(newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
     ref: refs => {
       if (!refs) return;
+      inputBaseRef.current = refs;
       saveInitInfo(refs);
     },
-    css: inputCSS,
+    css: _InputCSS,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInput,
     onBlur: onBlur,
     onFocus: onFocus,
+    disabled: disabled,
     ...bind
-  })), endIcon && EndIcon);
-  const InputBaseComp = multiline ? MultipleInputComp : InputComp;
+  }), !isEnabled && hoverTooltip && jsx(Typography, {
+    css: _TypoCSS,
+    className: classNames(newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
+    lineClamp: 1,
+    hoverTooltip: true,
+    type: 'p1',
+    style: {
+      lineHeight: '24px'
+    }
+  }, value !== null && value !== void 0 ? value : '')), endIcon && EndIcon);
   /* End component */
 
-  useImperativeHandle(reference, () => {
-    const currentRef = inputBaseRef.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return InputBaseComp;
+  return multiline ? MultipleInputComp : InputComp;
 }));
+
+const InputBaseRootCSS = (autoWidth, readOnly) => css`
+    ${flexRow};
+    ${alignCenter};
+    ${positionRelative};
+    ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
+    flex: 1 1 auto;
+    &:hover,
+    &:focus-within {
+        .start-icon:not(.non-effect) {
+            path {
+                fill: ${systemActive};
+            }
+        }
+    }
+    &:focus-within {
+        border-bottom-color: ${info};
+        &::after {
+            border-bottom-color: inherit;
+            transform: scaleX(1);
+        }
+    }
+    &.underlined {
+        padding-bottom: ${spacing([1])};
+        padding-top: ${spacing([1])};
+        &:not(:focus-within):hover {
+            &::before {
+                ${!readOnly && `border-bottom-color: ${lineHover}`};
+            }
+            input {
+                ::placeholder {
+                    color: ${systemActive};
+                }
+            }
+        }
+        &:focus-within {
+            ${!readOnly && `
+                    border-bottom-color: ${lineFocus};
+                    &::after {
+                        border-bottom-color: inherit;
+                        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;
+        }
+    }
+    &.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 {
+        border-color: transparent !important;
+        box-shadow: none !important;
+        background-color: transparent !important;
+        input {
+            background-color: transparent !important;
+        }
+        &:before,
+        &:after {
+            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};
+                }
+            }
+        }
+    }
+    & + .DGN-UI-HelperText {
+        ${positionAbsolute};
+        min-height: 16px;
+        top: 100%;
+    }
+`;
+
+const InputBaseCSS = css`
+    ${flexRow};
+    flex: 1 1 auto;
+`;
+
+const InputCSS = (autoWidth, isEnabled, hoverTooltip, endIcon) => css`
+    ${parseWidthHeight(autoWidth ? '10px' : '100%', 24)};
+    ${borderNone};
+    ${outlineNone};
+    transition: all 0.1s;
+    color: ${textMain};
+    background-color: transparent;
+    padding-top: 0;
+    ${paragraph1};
+    text-overflow: ellipsis;
+    &::placeholder {
+        color: ${textSub};
+        ${paragraph1};
+    }
+    &:focus {
+        background-color: transparent;
+        color: ${systemActive};
+    }
+    &: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;
+    }
+    &:disabled {
+        background-color: transparent;
+    }
+    ${!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};
+    }
+    &:hover {
+        color: ${systemActive};
+    }
+    ${disabled && 'user-select: none'};
+`;
+
+const TextAreaCSS = (resize, readOnly) => css`
+    ${displayBlock};
+    color: ${textMain};
+    ${paragraph1};
+    ${borderNone};
+    ${outlineNone};
+    ${positionRelative};
+    ${borderBox};
+    ${parseWidth('100%')};
+    min-height: max-content;
+    min-width: max-content;
+    background-color: transparent;
+    padding: ${spacing(0.5, 0)};
+    overflow-y: auto;
+    resize: ${resize};
+    &:hover:not(:focus-within) {
+        ${!readOnly && `
+                        border-color: ${systemActive};
+                        color: ${systemActive};
+                        ::placeholder {
+                            color: ${systemActive};
+                        }
+                    `};
+    }
+    &:focus-within {
+        color: ${systemActive};
+    }
+    &::-webkit-scrollbar {
+        ${borderRadius4px};
+        ${parseWidth(4)};
+        background-color: ${systemWhite};
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        mix-blend-mode: normal;
+        background-color: ${fillDisabled};
+        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`
+    ${flexRow};
+    color: inherit;
+    &.start-icon {
+        margin-right: ${spacing([1])};
+        & + input {
+            padding-left: 0;
+        }
+    }
+    &.end-icon {
+        margin-left: ${spacing([1])};
+    }
+`;
 InputBase.defaultProps = {
   autoComplete: 'off',
+  autoFocus: false,
   className: '',
   defaultValue: '',
-  placeholder: getGlobal('inputPlaceholder'),
-  resize: 'none',
-  status: 'default',
-  type: 'text',
-  viewType: 'underlined',
-  autoFocus: false,
-  nonStyle: false,
   disabled: false,
-  multiline: false,
-  readOnly: false,
-  required: false,
   endIconProps: {},
+  hoverTooltip: false,
   iconStyle: {},
   inputProps: {},
   inputStyle: {},
-  startIconProps: {}
+  multiline: false,
+  nonStyle: false,
+  placeholder: getGlobal('inputPlaceholder'),
+  readOnly: false,
+  required: false,
+  resize: 'none',
+  startIconProps: {},
+  status: 'default',
+  type: 'text',
+  viewType: 'underlined'
 };
 InputBase.propTypes = {
   /** the type of border you want to display */
@@ -726,7 +748,7 @@ InputBase.propTypes = {
   /** prevent all event if true */
   readOnly: PropTypes.bool,
 
-  /** auto focus after first render */
+  /** autofocus after first render */
   autoFocus: PropTypes.bool,
 
   /** At least one character is required */