diginet-core-ui 1.3.49 → 1.3.51-beta.2

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

@@ -70,7 +70,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   total,
   placeholder,
   error,
-  keyExpr,
   displayExpr,
   subText,
   valueExpr,
@@ -156,10 +155,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onClickInput = e => {
     if (!boxRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e.target))) {
-        if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple) {
+        if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
+          var _inputRef$current$chi;
+
           inputRef.current.innerHTML = inputRef.current.textContent.trim();
           inputRef.current.contentEditable = 'plaintext-only';
-          const caret = inputRef.current.childNodes.length ? 1 : 0;
+          const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
           const range = document.createRange();
           range.setStart(inputRef.current, caret);
           range.setEnd(inputRef.current, caret);
@@ -281,7 +282,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
-      document.addEventListener('keydown', preventScroll);
       boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
@@ -306,15 +306,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const preventScroll = e => {
-    if (/Arrow(Up|Down)/.test(e.key)) {
-      e.preventDefault();
-      return false;
-    }
-
-    return true;
-  };
-
   const pressESCHandler = event => {
     if (event.key === 'Escape' || event.key === 'Tab') {
       closeDropdown();
@@ -339,11 +330,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const closeDropdown = () => {
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
-
-    if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple && inputRef.current) {
-      inputRef.current.contentEditable = true;
-    }
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`); // if ((renderSelectedItem || (iconExpr && iconExpr !== 'none')) && !multiple && inputRef.current && !disabled) {
+    //     inputRef.current.contentEditable = true;
+    // }
 
     if (node) {
       node.style.pointerEvents = `none`;
@@ -359,7 +348,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
-      document.removeEventListener('keydown', preventScroll);
 
       if (onLoadMore && boxRef.current) {
         boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
@@ -400,12 +388,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const mapDropdown = (pattern, keyArr) => {
+    var _currentObjectDefault;
+
     const items = [];
     const dataSourceUsable = [...dataSource];
 
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-    if (currentObjectDefault[unique] && currentObjectDefault[unique].length) {
+    if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
 
@@ -455,13 +445,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          onClick: e => {
-            if (itemDisabled) return;
-            onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
+          onClick: () => {
+            if (itemDisabled) return; // onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
+
+            onChangeValue(displayText, value, icon, data, index);
           },
           onKeyPress: e => {
-            if (itemDisabled) return;
-            if (e.key === 'Enter') e.currentTarget.firstChild.click();
+            if (itemDisabled) return; // if (e.key === 'Enter') e.currentTarget.firstChild.click();
+
+            if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
           tabIndex: -1
         }, jsx(Checkbox, {
@@ -472,7 +464,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             padding: '0 16px'
           },
           value: value,
-          disabled: itemDisabled
+          disabled: itemDisabled,
+          onChange: () => onChangeValue(displayText, value, icon, data, index)
         }, icon && jsx("div", {
           css: DropdownIconCSS
         }, icon), jsx("div", {
@@ -500,7 +493,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText)));
       }
 
-      if (items.length === limit) {
+      if ((items === null || items === void 0 ? void 0 : items.length) === limit) {
         timerRef.current = setTimeout(() => {
           loadMoreItemsDropdown(index + 1, pattern);
         }, 1000);
@@ -511,7 +504,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: DropdownBoxCSS,
       ref: boxRef
-    }, items.length ? items : jsx("div", {
+    }, items !== null && items !== void 0 && items.length ? items : jsx("div", {
       css: _DropdownItemCSS,
       className: 'no-data'
     }, ' ', noDataText, ' '));
@@ -544,13 +537,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const loadMoreItemsDropdown = (i = 0, pattern) => {
-    var _displayExpr3;
+    var _currentObjectDefault2, _displayExpr3;
 
     const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
 
     let notExistItem = 0;
 
-    if (onLoadMore && currentObjectDefault[unique].length) {
+    if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
       const length = currentObjectDefault[unique].length;
 
       for (let index = length - 1; index >= 0; index--) {
@@ -741,7 +734,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
     if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
-      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
+      var _boxRef$current$query;
+
+      const length = (_boxRef$current$query = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query === void 0 ? void 0 : _boxRef$current$query.length;
       boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
       !!onLoadMore && onLoadMore({
         skip: length,
@@ -759,9 +754,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (searchRef.current) lastSearchRef.current = searchRef.current.value;
 
     if (onInput) {
-      isSearch[unique] = true;
-      const valueInput = e.target.value;
-      const text = (valueInput || e.target.textContent).normalize();
+      isSearch[unique] = true; // const valueInput = e.target.value;
+      // const text = (valueInput || e.target.textContent).normalize();
 
       if (timeout.current) {
         if (timing[unique]) {
@@ -769,14 +763,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
 
         timing[unique] = setTimeout(() => {
-          e.target.value = text;
-          onInput(e);
-          e.target.value = valueInput;
-        }, timeout.current);
+          // e.target.value = text;
+          onInput(e); // e.target.value = valueInput;
+        }, timeout.current || searchDelayTime);
       } else {
-        e.target.value = text;
-        onInput(e);
-        e.target.value = valueInput;
+        // e.target.value = text;
+        onInput(e); // e.target.value = valueInput;
       }
 
       return;
@@ -784,7 +776,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const value = e.target.value || e.target.textContent;
 
-    if (renderSelectedItem && e.target.childNodes && Array.from(e.target.childNodes).some(node => node.toString() !== '[object Text]')) {
+    if (typeof renderSelectedItem === 'function' && e.target.childNodes && Array.from(e.target.childNodes).some(node => node.toString() !== '[object Text]')) {
       const cursor = document.getSelection().anchorOffset;
       e.target.innerHTML = value;
       document.getSelection().collapse(e.target, cursor);
@@ -798,7 +790,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       renderDropdown(new RegExp(value.normalize(), 'gim'));
-    }, timeout.current || 700);
+    }, timeout.current || searchDelayTime);
   };
 
   const onChangeValue = (displayText, value, icon, data, index) => {
@@ -824,7 +816,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (valueProp === undefined) {
           let item = null;
 
-          if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+          if (typeof renderSelectedItem === 'function') {
             item = renderSelectedItem({
               data,
               index
@@ -894,15 +886,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
-  };
-
-  const onChangeValueWithCheckbox = e => {
-    const firstChild = e.currentTarget.firstChild;
+  }; // const onChangeValueWithCheckbox = e => {
+  //     const firstChild = e.currentTarget.firstChild;
+  //     if (!firstChild.contains(e.target)) {
+  //         firstChild.click();
+  //     }
+  // };
 
-    if (!firstChild.contains(e.target)) {
-      firstChild.click();
-    }
-  };
 
   const onRemove = (e, value) => {
     const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
@@ -928,7 +918,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClear = e => {
-    if (disabled || readOnly || loading) return;
+    if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
 
     if (inputRef.current.tagName.toLowerCase() === 'div') {
@@ -942,6 +932,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } // onChangeValue('', '');
 
 
+    setShowClear(false);
     e && e.target && e.target.blur();
     updatePositionDropdown();
     onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
@@ -965,7 +956,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.innerHTML = '';
         currentValue[unique] = [];
       } else {
-        if (renderSelectedItem || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
+        if (typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
           inputRef.current.innerHTML = '';
         } else if (!isSearch[unique]) {
           inputRef.current.value = '';
@@ -978,7 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     const length = dataSource.length;
-    const displayKey = keyExpr || displayExpr;
+    const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
 
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -997,6 +988,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       currentValue[unique] = [];
       inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
+        var _currentObjectDefault3;
+
         for (let i = 0; i < length; i++) {
           if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
             setMultipleValueHandler(dataSource[i], v, keyArr, i);
@@ -1004,7 +997,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
 
-        if (currentObjectDefault[unique].length) {
+        if ((_currentObjectDefault3 = currentObjectDefault[unique]) !== null && _currentObjectDefault3 !== void 0 && _currentObjectDefault3.length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
 
           if (itemOfValue) {
@@ -1013,6 +1006,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       });
     } else {
+      var _currentObjectDefault4;
+
       currentValue[unique] = source;
 
       for (let i = 0; i < length; i++) {
@@ -1022,7 +1017,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      if (currentObjectDefault[unique].length) {
+      if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
 
         if (itemOfValue) {
@@ -1040,14 +1035,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const setMultipleValueHandler = (data, value, keyArr, index) => {
     let item = null;
 
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+    if (typeof renderSelectedItem === 'function') {
       item = renderSelectedItem({
         data,
         index
       });
     } else {
       const icon = getIconFromData(data);
-      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr];
+      const text = keyArr ? renderData(data, keyArr) : data[renderSelectedItem || displayExpr];
       item = jsx(Chip, {
         startIcon: icon,
         label: text,
@@ -1070,9 +1065,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data[valueExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr || valueExpr] || data;
 
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+    if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
         data
@@ -1288,15 +1283,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (boxRef.current) {
+      var _boxRef$current$query2, _currentObjectDefault5;
+
       if (!disabled && !readOnly) {
         inputRef.current.addEventListener('input', onChangeInput);
       }
 
       const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
+      const length = (_boxRef$current$query2 = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query2 === void 0 ? void 0 : _boxRef$current$query2.length;
 
-      if (length < dataSource.length + currentObjectDefault[unique].length && !isSearch[unique]) {
+      if (length < dataSource.length + ((_currentObjectDefault5 = currentObjectDefault[unique]) === null || _currentObjectDefault5 === void 0 ? void 0 : _currentObjectDefault5.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
         !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
@@ -1327,11 +1324,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const inputComp = useMemo(() => {
-    const _InputCSS = InputCSS(multiple, renderSelectedItem);
+    const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
 
-    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
+    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
-    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
     return jsx("div", {
       css: _DropdownFormCSS,
@@ -1354,8 +1351,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         e.preventDefault();
         return false;
       }
-    }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-      contentEditable: true,
+    }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
+      contentEditable: !disabled,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1415,7 +1412,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
-    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
+    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', loading, showClear),
     className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
   }, labelComp, inputComp, errorComp), dropdownComp);
@@ -1449,7 +1446,7 @@ const DropdownIconCSS = css`
     }
 `;
 
-const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => css`
+const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => css`
     ${flexRow};
     ${alignCenter};
     ${outlineNone};
@@ -1457,7 +1454,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
     ${borderNone};
     ${paragraph1};
     width: 100%;
-    color: ${main};
+    color: ${disabled ? systemDisabled : main};
     padding-top: 0;
     padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
     padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
@@ -1491,7 +1488,19 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
         }
     }
+    .DGN-UI-Typography {
+        ${disabled && `
+            color: ${systemDisabled}
+        `}
+    }
     .css-${DropdownIconCSS.name} {
+        ${disabled && `
+            svg {
+                path {
+                    fill: ${systemDisabled};
+                }
+            }
+        `}
         ${renderSelectedItem ? `
             min-height: 24px;
             min-width: 24px;
@@ -1540,10 +1549,9 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                         }
                         .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
                             color: ${active};
+                        }
                     }
-              }
               `}
-
               &:focus-within {
                   border-bottom-color: ${focus};
                   &::after {
@@ -1568,7 +1576,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                   left: 0;
                   right: 0;
                   bottom: 0;
-                  border-bottom: 1px solid ${rest};
+                  border-bottom: 1px solid ${disabled ? systemDisabled : rest};
               }
               &::after {
                   ${positionAbsolute};
@@ -1587,7 +1595,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${positionRelative};
               ${borderRadius4px};
               ${borderBox};
-              ${border(1, rest)};
+              ${border(1, disabled ? systemDisabled : rest)};
               width: 100%;
               min-height: 40px;
               ${!disabled && `
@@ -1823,9 +1831,6 @@ Dropdown.propTypes = {
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display in input */
-  keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-
   /** field name used for text display<br/>
    * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
    * Note: don't use 'id - name', return undefined
@@ -1917,7 +1922,7 @@ Dropdown.propTypes = {
   /** function displays selected items by custom, example:<br/>
    * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
-  renderSelectedItem: PropTypes.func,
+  renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   /** the function will run when entering input<br/>
    * if undefined: the filter function will run (default)

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

@@ -86,7 +86,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     padding-top: 4px;
                     &:not(:focus-within):hover {
                         &::before {
-                            border-bottom-color: ${colors.brand};
+                            ${!readOnly && `border-bottom-color: ${colors.brand}`};
                         }
                     }
                     &:focus-within {
@@ -125,11 +125,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     box-sizing: border-box;
                     background-color: ${colors.white};
                     &:not(:focus-within):hover {
-                        background-color: ${colors.hover};
-                        border-color: ${colors.brand};
-                        input {
+                        ${!readOnly && `
                             background-color: ${colors.hover};
-                        }
+                            border-color: ${colors.brand};
+                            input {
+                                background-color: ${colors.hover};
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
@@ -203,9 +205,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     &.outlined {
                         background-color: ${colors.dark12};
                     }
-                    input {
+                    /* input {
                         color: ${colors.disabled};
-                    }
+                    } */
                     .start-icon,
                     .end-icon {
                         &:not(.non-effect),
@@ -276,15 +278,17 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 position: relative;
                 resize: ${resize};
                 box-sizing: border-box;
-                &:disabled {
+                /* &:disabled {
                     color: ${colors.disabled};
-                }
+                } */
                 &:hover:not(:focus-within) {
-                    border-color: ${colors.brand};
-                    color: ${colors.primary};
-                    ::placeholder {
+                    ${!readOnly && `
+                        border-color: ${colors.brand};
                         color: ${colors.primary};
-                    }
+                        ::placeholder {
+                            color: ${colors.primary};
+                        }
+                    `};
                 }
                 &:focus-within {
                     color: ${colors.primary};
@@ -316,11 +320,13 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         height: 24px;
                     }
                     &:not(:focus-within):hover {
-                        background-color: ${colors.hover};
-                        border-color: ${colors.brand};
-                        input {
+                        ${!readOnly && `
                             background-color: ${colors.hover};
-                        }
+                            border-color: ${colors.brand};
+                            input {
+                                background-color: ${colors.hover};
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
@@ -351,17 +357,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         height: 24px;
                     }
                     &:not(:focus-within):hover {
-                        &::before {
+                        ${!readOnly && `
+                            &::before {
                             border-bottom-color: ${colors.brand};
-                        }
+                            }
+                        `};
                     }
                     &:focus-within {
                         ${!readOnly && `
-                    &::after {
-                        border-bottom-color: ${colors.info5};
-                        transform: scaleX(1);
-                    }
-                `}
+                            &::after {
+                                border-bottom-color: ${colors.info5};
+                                transform: scaleX(1);
+                            }
+                        `}
                     }
                     &::before {
                         content: '';
@@ -386,7 +394,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 &.disabled {
                     pointer-events: none;
                     resize: none;
-                    color: ${colors.disabled};
+                    /* color: ${colors.disabled}; */
                     &.outlined {
                         background-color: ${colors.dark12};
                     }

package/components/modal/modal.js

@@ -8,6 +8,10 @@ import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
 import { animations } from '../../styles/animation';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
+const {
+  zIndex: zIndexCORE
+} = useTheme();
 import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, positionFixed, positionRelative } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
 const {
@@ -19,10 +23,6 @@ const {
   }
 } = colors;
 const fadeInDown = animations.fadeInDown;
-import { useTheme } from '../../theme';
-const {
-  zIndex: zIndexCORE
-} = useTheme();
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   moveable,