diginet-core-ui 1.3.24 → 1.3.29

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

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,24 +5,50 @@ import { Fragment, memo, useState, useEffect, useMemo, useRef, useImperativeHand
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import Icon, { Account } from '../../../icons';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label } from '../../';
+import { Account } from '../../../icons';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
-import { useTheme } from '../../../theme';
+import { color as colors } from '../../../styles/colors';
+import { typography } from '../../../styles/typography';
+import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, cursorPointer, displayBlock, flexRow, flexWrap, inlineFlex, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
+import isMobile from '../../../utils/isMobile';
+const {
+  paragraph1,
+  paragraph3
+} = typography;
 const {
-  colors,
-  typography: {
-    fontSize,
-    fontFamily
+  system: {
+    active,
+    disabled: systemDisabled,
+    rest
+  },
+  semantic: {
+    danger
+  },
+  fill: {
+    hover,
+    'scrollbar-tabbar': scrollbar
+  },
+  line: {
+    focus
+  },
+  text: {
+    main,
+    sub
   }
-} = useTheme();
+} = colors;
 const timing = {},
       currentValue = {},
       currentObjectDefault = {},
       isSearch = {},
       allValue = {};
 const separatorPattern = /\{\w+\}/g;
+
+const checkHasValue = value => {
+  return Array.isArray(value) ? value.length > 0 : value === 0 || !!value;
+};
+
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   itemMode,
@@ -73,6 +97,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   errorStyle,
   refs,
   children,
+  dropdownItemStyle,
   ...props
 }, ref) => {
   const dropdownRef = useRef(null);
@@ -87,23 +112,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         boxRef = useRef(null),
         searchRef = useRef(null),
         timeout = useRef(null);
+  const [openState, setOpenState] = useState(false);
+  const [errorState, setErrorState] = useState(error && !valueProp && valueProp !== 0);
+  const [showClear, setShowClear] = useState(false);
+
+  const _isMobile = isMobile.any();
   /* Start styled */
 
+
   const forInput = css`
-        display: flex;
+        ${flexRow}
         flex: 1 1 auto;
         ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
     `;
   const DropdownIcon = css`
-        display: inline-flex;
-        align-items: center;
-        position: relative;
+        ${inlineFlex}
+        ${alignCenter}
+        ${positionRelative}
+        ${overflowHidden}
         height: inherit;
         margin-right: 8px;
         height: 32px;
         width: 32px;
         border-radius: 16px;
-        overflow: hidden;
         img {
             height: 32px;
             width: 32px;
@@ -111,49 +142,45 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const DropdownInput = css`
-        display: flex;
-        align-items: center;
+        ${flexRow}
+        ${alignCenter}
+        ${outlineNone}
+        ${backgroundTransparent}
+        ${paragraph1};
         width: 100%;
         border: none;
-        outline: none;
-        color: ${colors.input};
-        background-color: transparent;
+        color: ${main};
         padding-top: 0;
         padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
         padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
-        font-family: ${fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: ${multiple ? 30 : 24}px;
         min-height: ${multiple ? 30 : 24}px;
         &.dgn-dropdown-multiple {
-            flex-wrap: wrap;
+            ${flexWrap}
+            ${overflowHidden}
             /* max-height: max-content; */
             word-break: break-word;
-            overflow: hidden;
             ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
             &::after {
+                ${flexRow}
+                ${positionAbsolute}
+                ${alignCenter}
+                ${justifyCenter}
                 content: '${placeholder}';
-                display: flex;
-                position: absolute;
-                align-items: center;
-                justify-content: center;
-                color: ${colors.placeholder};
+                color: ${sub};
             }
             &:not(:empty)::after {
                 visibility: hidden;
             }
         }
         &:focus {
-            background-color: transparent;
+            ${backgroundTransparent}
         }
         .dropdown-item {
             &:not(:last-child) {
                 margin-right: 5px;
             }
             svg {
-                box-sizing: border-box;
+                ${borderBox}
                 padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
             }
         }
@@ -172,43 +199,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const forIcon = css`
-        display: flex;
+        ${flexRow}
+        ${alignCenter}
         margin-left: 8px;
         margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
         color: inherit;
-        align-items: center;
         .icon-close {
-            display: none;
+            display: ${showClear ? 'flex' : 'none'};
             margin-right: 4px;
         }
         .dgn-dropdown-loading {
-            display: none;
+            display: ${loading ? 'flex' : 'none'};
         }
 	`;
   const DropdownForm = viewType !== 'outlined' ? css`
-        display: flex;
+        ${flexRow}
+        ${alignCenter}
+        ${positionRelative}
+        ${borderBox}
         flex: 1 1 auto;
-        align-items: center;
-        position: relative;
         padding-bottom: ${multiple ? 1 : 4}px;
         padding-top: ${multiple ? 1 : 4}px;
-        box-sizing: border-box;
         &:not(:focus-within):hover {
             &::before {
-                border-bottom-color: ${colors.borderHover};
+                border-bottom-color: ${active};
             }
             .css-${DropdownInput.name} {
-                color: ${colors.inputHover};
+                color: ${active};
             }
         }
         &:focus-within {
-            border-bottom-color: ${colors.borderFocus};
+            border-bottom-color: ${focus};
             &::after {
                 border-bottom-color: inherit;
                 transform: scaleX(1);
             }
             .css-${DropdownInput.name} {
-                color: ${colors.inputHover};
+                color: ${active};
             }
         }
         &.dropdown-showing {
@@ -217,19 +244,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
         }
         &::placeholder {
-            color: ${colors.placeholder};
+            color: ${sub};
         }
         &::before {
+            ${positionAbsolute}
             content: '';
-            position: absolute;
             left: 0;
             right: 0;
             bottom: 0;
-            border-bottom: 1px solid ${colors.border};
+            border-bottom: 1px solid ${rest};
         }
         &::after {
+            ${positionAbsolute}
             content: '';
-            position: absolute;
             left: 0px;
             right: 0px;
             bottom: -1px;
@@ -239,26 +266,23 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             transition: all 0.2s ease;
         }
     ` : css`
-        display: flex;
+        ${flexRow}
+        ${alignCenter}
+        ${positionRelative}
+        ${borderRadius4px}
+        ${borderBox}
         flex: 1 1 auto;
-        align-items: center;
-        position: relative;
-        border: 1px solid ${colors.border};
-        border-radius: 4px;
+        border: 1px solid ${rest};
         min-height: 40px;
-        box-sizing: border-box;
         &:not(:focus-within):hover {
-            background-color: ${colors.hover};
-            border-color: ${colors.borderHover};
+            background-color: ${hover};
+            border-color: ${active};
             input {
-                background-color: ${colors.hover};
+                background-color: ${hover};
             }
         }
         &:focus-within {
-            border-color: ${colors.borderFocus};
-            &::after {
-                border-color: inherit;
-            }
+            border-color: ${focus};
         }
         &.dropdown-showing {
             .icon-dropdown {
@@ -266,28 +290,28 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
         }
         &::placeholder {
-            color: ${colors.placeholder};
+            color: ${sub};
         }
         &::after {
+            ${positionAbsolute}
+            ${pointerEventsNone}
             content: '';
-            position: absolute;
             left: -2px;
             right: -2px;
             top: -2px;
             bottom: -2px;
             border: 2px solid transparent;
             border-radius: 4px;
-            pointer-events: none;
         }
     `;
   const DropdownBox = css`
-		display: block;
-		position: relative;
+		${displayBlock}
+        ${positionRelative}
+        ${borderBox}
 		width: 100%;
 		max-height: 280px;
-		overflow: overlay;
+		overflow: auto;
         background-color: #FFF;
-		box-sizing: border-box;
 		border-radius: 4px;
 		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         z-index: 9001;
@@ -300,7 +324,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 			border-radius: 24px;
             border: 8px solid transparent;
 			mix-blend-mode: normal;
-			background-color: ${colors.scrollbar} !important;
+			background-color: ${scrollbar} !important;
 			background-clip: content-box;
 		}
         .DGN-UI-TreeView {
@@ -308,18 +332,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
     `;
   const DropdownItem = css`
-		display: flex;
-        position: relative;
+        ${flexRow}
+        ${positionRelative}
+        ${alignCenter}
+        ${justifyStart}
+        ${borderBox}
+        ${cursorPointer}
+        ${userSelectNone}
 		min-height: 40px;
 		width: 100%;
 		background-color: #FFF;
-		align-items: center;
-		justify-content: flex-start;
 		padding: 8px ${multiple && selectBox ? 0 : '16px'};
-        color: ${colors.text};
-		box-sizing: border-box;
-		user-select: none;
-		cursor: pointer;
+        color: ${main};
 		&.no-data {
             font-style: italic;
 			justify-content: center;
@@ -327,79 +351,67 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 		}
 		&:not(.no-data):hover,
 		&:not(.no-data):focus {
-			background-color: ${colors.hover};
-            color: ${colors.inputHover};
+			background-color: ${hover};
+            color: ${active};
             outline: none;
 		}
     `;
   const DropdownText = css`
-        font-family: ${fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: ${fontSize};
-        line-height: 20px;
+        ${paragraph1};
         color: inherit;
         .DGN-UI-Dropdown-PrimaryText {
-            display: block;
-            font-size: 14px;
-            line-height: 18px;
+            ${paragraph1};
+            ${displayBlock}
         }
         .DGN-UI-Dropdown-SubText {
-            display: block;
-            font-size: 12px;
-            line-height: 14px;
-            font-family: ${fontFamily};
-            color: ${colors.secondary};
+            ${paragraph3};
+            ${displayBlock}
+            color: ${sub};
         }
     `;
   const DropdownRoot = css`
-        display: block;
-        position: relative;
+        ${displayBlock}
+        ${positionRelative}
         margin-bottom: 20px;
         min-width: 150px;
         height: max-content;
         &.error {
             .css-${DropdownForm.name} {
-                border-color: ${colors.danger};
+                border-color: ${danger};
                 path {
-                    fill: ${colors.danger};
+                    fill: ${danger};
                 }
                 &::before {
-                    border-color: ${colors.danger};
+                    border-color: ${danger};
                 }
             }
         }
         &.dgn-dropdown-loading,
         &.disabled {
-            pointer-events: none;
-            user-select: none;
+            ${pointerEventsNone}
+            ${userSelectNone}
             .css-${DropdownInput.name} {
-                //color: ${colors.disabled} !important;
+                //color: ${systemDisabled} !important;
             }
             .css-${DropdownForm.name} {
-                border-color: ${colors.disabled};
+                border-color: ${systemDisabled};
                 .css-${forIcon.name} {
                     path {
                         fill: transparent;
                     }
                 }
                 &::before {
-                    border-color: ${colors.disabled};
+                    border-color: ${systemDisabled};
                 }
             }
         }
         &.readOnly {
-            pointer-events: none;
-            user-select: none;
             .css-${forIcon.name} {
-                pointer-events: none;
-                .icon-close {
-                    display: none !important;
-                }
+                ${pointerEventsNone}
             }
             .css-${DropdownInput.name} {
                 .dropdown-item {
-                    pointer-events: none;
+                    ${pointerEventsNone}
                 }
             }
         }
@@ -455,7 +467,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           sel.addRange(range);
         }
 
-        formRef.current.classList.add('dropdown-showing');
+        setOpenState(true);
         setTimeout(() => {
           showDropdown();
           setTimeout(() => {
@@ -515,7 +527,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const el = document.createElement('div');
     const elBox = document.createElement('div');
     const elLoading = document.createElement('div');
-    el.style.cssText = `position: fixed; top: ${positionTop}px; left: ${left}px; width: ${width}px; background-color: #FFF; opacity: 0; transition: opacity 0.3s; z-index: 9001;`;
+    let _cssText = `position: fixed; top: ${positionTop}px; left: ${left}px; width: ${width}px; background-color: #FFF; opacity: 0; transition: opacity 0.3s; z-index: 9001;`;
+    if (_isMobile && allowSearch) _cssText += `bottom: 0px; top: auto; display: flex; flex-direction: column-reverse; height: max-content`;
+    el.style.cssText = _cssText;
     elLoading.style.cssText = `display: none; justify-content: center; align-items: center;position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); border-radius: 4px; opacity: 0; transition: opacity 0.3s; z-index: 9002;`;
     el.className = `DGN-UI-Portal DGN-Dropdown-${unique}`;
     elBox.className = `DGN-Dropdown-Box`;
@@ -628,7 +642,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         node.remove();
         boxRef.current = null;
       }, 300);
-      !!formRef.current && formRef.current.classList.remove('dropdown-showing');
+      setOpenState(false);
       document.removeEventListener('click', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
@@ -745,11 +759,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? DropdownItem : [Disabled, DropdownItem],
+          className: 'DGN-UI-Dropdown-Item',
           onClick: () => onChangeValue(displayText, value, icon, data, index),
           onKeyPress: e => {
             if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
-          tabIndex: -1
+          tabIndex: -1,
+          style: dropdownItemStyle
         }, icon && jsx("div", {
           css: DropdownIcon
         }, icon), jsx("div", {
@@ -963,6 +979,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const customizeWidthDropdown = () => {
+    if (boxRef.current && _isMobile) boxRef.current.style.maxHeight = `${Math.min(280, window.innerHeight) - (allowSearch ? 40 : 0)}px`;
+
     if (!dropdownRef.current) {
       window.removeEventListener('resize', customizeWidthDropdown);
       return;
@@ -987,7 +1005,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return;
     }
 
-    updatePosition(formRef.current, node, closeDropdown);
+    _isMobile ? updatePosition(formRef.current, node, null) : updatePosition(formRef.current, node, closeDropdown);
   };
 
   const onLoadMoreHandler = e => {
@@ -1060,6 +1078,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (itemMode === 'treeview') {
       if (valueProp === undefined) {
         setValueIntoInput(value);
+        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
       }
 
       !!onChange && onChange({
@@ -1129,12 +1148,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       if (isChanged) {
         if (valueProp === undefined) {
-          if (clearAble) {
-            iconRef.current.querySelector('.icon-close').style.display = 'flex';
-          }
-
           allValue[unique].push(value);
           setValueIntoInput(value);
+          setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
         }
 
         !!onChange && onChange({
@@ -1181,6 +1197,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClear = e => {
+    if (disabled || readOnly || loading) return;
     currentValue[unique] = multiple ? [] : '';
 
     if (inputRef.current.tagName.toLowerCase() === 'div') {
@@ -1196,11 +1213,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     e && e.target && e.target.blur();
     updatePositionDropdown();
-
-    if (clearAble) {
-      iconRef.current.querySelector('.icon-close').style.display = null;
-    }
-
     !!onChange && onChange({
       value: currentValue[unique]
     });
@@ -1264,10 +1276,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
       });
-
-      if (clearAble && iconRef.current && iconRef.current.querySelector('.icon-close')) {
-        iconRef.current.querySelector('.icon-close').style.display = valueArr.length ? 'flex' : null;
-      }
     } else {
       currentValue[unique] = source;
 
@@ -1290,10 +1298,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!isSearch[unique]) {
         inputRef.current.value = '';
       }
-
-      if (clearAble && iconRef.current && iconRef.current.querySelector('.icon-close')) {
-        iconRef.current.querySelector('.icon-close').style.display = null;
-      }
     }
   };
 
@@ -1353,10 +1357,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data;
       inputRef.current.value = text;
     }
-
-    if (clearAble) {
-      iconRef.current.querySelector('.icon-close').style.display = 'flex';
-    }
   };
 
   useImperativeHandle(ref, () => ({
@@ -1370,6 +1370,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setPreviousValue,
     DOM: dropdownRef.current
   }));
+  useEffect(() => {
+    setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
+  }, [clearAble, valueProp, disabled, readOnly, loading]);
   useEffect(() => {
     currentObjectDefault[unique] = onLoadMore && valueObjectDefault ? Array.isArray(valueObjectDefault) ? [...valueObjectDefault] : [valueObjectDefault] : [];
     return () => {
@@ -1382,6 +1385,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
       setValueIntoInput(defaultValue);
+      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loading);
     }
 
     return () => {
@@ -1411,22 +1415,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [valueProp]);
   useEffect(() => {
     if (loading) {
-      iconRef.current.querySelector('.dgn-dropdown-loading').style.display = 'flex';
-
-      if (clearAble) {
-        iconRef.current.querySelector('.icon-close').style.display = null;
-      }
-
-      iconRef.current.querySelector('.icon-dropdown').style.display = 'none';
-      dropdownRef.current.classList.add('dgn-dropdown-loading');
-
       if (boxRef.current) {
         var _boxRef$current$paren, _boxRef$current$paren2;
 
         const loadingNode = (_boxRef$current$paren = boxRef.current.parentNode) === null || _boxRef$current$paren === void 0 ? void 0 : (_boxRef$current$paren2 = _boxRef$current$paren.parentNode) === null || _boxRef$current$paren2 === void 0 ? void 0 : _boxRef$current$paren2.querySelector('.DGN-Dropdown-Loading');
 
         if (loadingNode) {
-          // boxRef.current.style.overflow = 'hidden';
           loadingNode.style.display = 'flex';
           setTimeout(() => {
             loadingNode.style.opacity = 1;
@@ -1436,21 +1430,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       return () => {
         if (iconRef.current && dropdownRef.current) {
-          iconRef.current.querySelector('.dgn-dropdown-loading').style.display = null;
-          iconRef.current.querySelector('.icon-dropdown').style.display = null;
-
-          if (clearAble && currentValue[unique] && typeof currentValue[unique] === 'string') {
-            iconRef.current.querySelector('.icon-close').style.display = 'flex';
-          }
-
-          dropdownRef.current.classList.remove('dgn-dropdown-loading');
-
           if (boxRef.current) {
-            // const loadingNode = boxRef.current.parentNode?.parentNode?.querySelector('.DGN-Dropdown-Loading');
             const loadingNode = document.querySelector('.DGN-Dropdown-Loading');
 
             if (loadingNode) {
-              // boxRef.current.style.overflow = null;
               loadingNode.style.opacity = 0;
               setTimeout(() => {
                 loadingNode.style.display = 'none';
@@ -1462,14 +1445,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [loading]);
   useEffect(() => {
-    if (error && !valueProp && valueProp !== 0) {
-      dropdownRef.current.classList.add('error');
-      return () => {
-        if (dropdownRef.current) {
-          dropdownRef.current.classList.remove('error');
-        }
-      };
-    }
+    setErrorState(error && (!valueProp && valueProp !== 0 || (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) === 0));
   }, [error, valueProp]);
   useEffect(() => {
     if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
@@ -1479,17 +1455,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
 
-    if (disabled) {
-      dropdownRef.current.classList.add('disabled');
-      iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = 'none';
-    } else if (!readOnly) {
+    if (!readOnly && !disabled) {
       inputRef.current.addEventListener('click', onClickInput);
       inputRef.current.addEventListener('input', onChangeInput);
       !!onLoadMore && boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
     } else {
-      dropdownRef.current.classList.add('readOnly');
-      iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = 'none';
-
       if (multiple) {
         inputRef.current.contentEditable = false;
       }
@@ -1504,16 +1474,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return () => {
       if (!dropdownRef.current || !inputRef.current || !iconRef.current) return;
 
-      if (disabled) {
-        dropdownRef.current.classList.remove('disabled');
-        iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = null;
-      } else if (!readOnly) {
+      if (!readOnly && !disabled) {
         inputRef.current.removeEventListener('click', onClickInput);
         inputRef.current.removeEventListener('input', onChangeInput);
       } else {
-        dropdownRef.current.classList.remove('readOnly');
-        iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = null;
-
         if (multiple) {
           inputRef.current.contentEditable = true;
         }
@@ -1579,18 +1543,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   /* Start component */
 
-  const labelComp = useMemo(() => label ? jsx(Label, _extends({
+  const labelComp = useMemo(() => label ? jsx(Label, {
     required: required,
-    disabled: disabled
-  }, labelProps), label) : null, [label, required, disabled]);
+    disabled: disabled,
+    ...labelProps
+  }, label) : null, [label, required, disabled]);
   const inputComp = useMemo(() => jsx("div", {
     css: DropdownForm,
     ref: formRef,
-    className: 'DGN-UI-Dropdown-Form',
+    className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
     style: formStyle
   }, jsx("div", {
     css: forInput
-  }, multiple ? jsx("div", _extends({}, inputProps, {
+  }, multiple ? jsx("div", { ...inputProps,
     style: {
       cursor: 'text',
       ...inputStyle
@@ -1603,7 +1568,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       e.preventDefault();
       return false;
     }
-  })) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", _extends({}, inputProps, {
+  }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
     contentEditable: true,
     style: inputStyle,
     ref: inputRef,
@@ -1616,35 +1581,37 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return false;
       }
     }
-  })) : jsx("input", _extends({}, inputProps, {
+  }) : jsx("input", { ...inputProps,
     style: inputStyle,
     ref: inputRef,
     css: DropdownInput,
     type: "text",
     placeholder: placeholder
-  }))), jsx("div", {
+  })), jsx("div", {
     ref: iconRef,
-    css: forIcon
+    css: forIcon,
+    className: 'DGN-UI-Dropdown-Icon'
   }, jsx("span", {
     className: 'dgn-dropdown-loading'
   }, jsx(CircularProgress, {
     width: 24,
     strokeWidth: 2
-  })), clearAble && jsx(Icon, {
+  })), jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Close',
-    width: 12,
     className: 'icon-close',
     onClick: onClear
-  }), jsx(Icon, {
+  }), !loading && jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'ArrowDown',
     className: 'icon-dropdown',
     onClick: triggerInput,
     style: {
-      transition: 'transform 0.5s',
-      minHeight: '24px'
-    }
-  }))), [viewType, inputProps, inputStyle, multiple, clearAble, onChange]);
-  const errorComp = useMemo(() => !!error && !valueProp && valueProp !== 0 && jsx(HelperText, {
+      transition: 'transform 0.5s'
+    },
+    disabled: disabled || readOnly
+  }))), [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, openState, showClear]);
+  const errorComp = useMemo(() => errorState && jsx(HelperText, {
     disabled: disabled,
     style: {
       minHeight: '16px',
@@ -1652,15 +1619,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%',
       ...errorStyle
     }
-  }, error), [error, valueProp, disabled]);
+  }, error), [error, valueProp, disabled, errorState]);
   /* End component */
 
-  return jsx("div", _extends({
+  return jsx("div", {
     ref: dropdownRef,
     css: DropdownRoot,
-    className: ['DGN-UI-Dropdown', className].join(' ').trim(),
-    style: style
-  }, props), labelComp, inputComp, errorComp);
+    className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
+    ...props
+  }, labelComp, inputComp, errorComp);
 }));
 Dropdown.defaultProps = {
   viewType: 'underlined',
@@ -1825,6 +1793,9 @@ Dropdown.propTypes = {
   /** style inline of error in Dropdown component */
   errorStyle: PropTypes.object,
 
+  /** style inline of dropdown items in Dropdown component */
+  dropdownItemStyle: PropTypes.object,
+
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,