diginet-core-ui 1.3.34 → 1.3.35

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

@@ -7,12 +7,13 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Account } from '../../../icons';
+import AvatarDefault from '../../../assets/avatar/default.svg';
 import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
 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 { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexRow, flexWrap, inlineFlex, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
 import isMobile from '../../../utils/isMobile';
 const {
   paragraph1,
@@ -22,7 +23,8 @@ const {
   system: {
     active,
     disabled: systemDisabled,
-    rest
+    rest,
+    white
   },
   semantic: {
     danger
@@ -60,7 +62,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   defaultValue,
   value: valueProp,
   searchDelayTime,
-  skip,
   limit,
   total,
   placeholder,
@@ -98,333 +99,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   errorStyle,
   refs,
   children,
-  dropdownItemStyle,
-  ...props
+  dropdownItemStyle
 }, ref) => {
   const dropdownRef = useRef(null);
+  const timerRef = useRef(null);
+  const formRef = useRef(null);
+  const inputRef = useRef(null);
+  const iconRef = useRef(null);
+  const boxRef = useRef(null);
+  const searchRef = useRef(null);
+  const lastSearchRef = useRef(null);
+  const timeout = useRef(null);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
-  })),
-        timerRef = useRef(null),
-        formRef = useRef(null),
-        inputRef = useRef(null),
-        iconRef = useRef(null),
-        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`
-                ${flexRow}
-                flex: 1 1 auto;
-                ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
-            `;
-  const DropdownIcon = css`
-                ${inlineFlex}
-                ${alignCenter}
-        ${positionRelative}
-        ${overflowHidden}
-        height: inherit;
-                margin-right: 8px;
-                height: 32px;
-                width: 32px;
-                border-radius: 16px;
-                img {
-                    height: 32px;
-                    width: 32px;
-                    object-fit: cover;
-                }
-            `;
-  const DropdownInput = css`
-                ${flexRow}
-                ${alignCenter}
-        ${outlineNone}
-        ${backgroundTransparent}
-        ${paragraph1};
-                width: 100%;
-                border: none;
-                color: ${main};
-                padding-top: 0;
-                padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
-                padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
-                min-height: ${multiple ? 30 : 24}px;
-                &.dgn-dropdown-multiple {
-                    ${flexWrap}
-                    ${overflowHidden}
-            /* max-height: max-content; */
-            word-break: break-word;
-                    ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
-                    &::after {
-                        ${flexRow}
-                        ${positionAbsolute}
-                ${alignCenter}
-                ${justifyCenter}
-                content: '${placeholder}';
-                        color: ${sub};
-                    }
-                    &:not(:empty)::after {
-                        visibility: hidden;
-                    }
-                }
-                &:focus {
-                    ${backgroundTransparent}
-                }
-                .dropdown-item {
-                    &:not(:last-child) {
-                        margin-right: 5px;
-                    }
-                    svg {
-                        ${borderBox}
-                        padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
-                    }
-                }
-                .css-${DropdownIcon.name} {
-                    ${renderSelectedItem ? `
-                min-height: 24px;
-                min-width: 24px;
-            ` : `
-                height: 24px;
-                width: 24px;
-                img {
-                    height: 24px;
-                    width: 24px;
-                }
-            `}
-                }
-            `;
-  const forIcon = css`
-                ${flexRow}
-                ${alignCenter}
-        margin-left: 8px;
-                margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
-                color: inherit;
-                .icon-close {
-                    display: ${showClear ? 'flex' : 'none'};
-                    margin-right: 4px;
-                }
-                .dgn-dropdown-loading {
-                    display: ${loading ? 'flex' : 'none'};
-                }
-            `;
-  const DropdownForm = viewType !== 'outlined' ? css`
-                          ${flexRow}
-                          ${alignCenter}
-        ${positionRelative}
-        ${borderBox}
-        flex: 1 1 auto;
-                          padding-bottom: ${multiple ? 1 : 4}px;
-                          padding-top: ${multiple ? 1 : 4}px;
-                          &:not(:focus-within):hover {
-                              &::before {
-                                  border-bottom-color: ${active};
-                              }
-                              .css-${DropdownInput.name} {
-                                  color: ${active};
-                              }
-                          }
-                          &:focus-within {
-                              border-bottom-color: ${focus};
-                              &::after {
-                                  border-bottom-color: inherit;
-                                  transform: scaleX(1);
-                              }
-                              .css-${DropdownInput.name} {
-                                  color: ${active};
-                              }
-                          }
-                          &.dropdown-showing {
-                              .icon-dropdown {
-                                  transform: rotateX(180deg);
-                              }
-                          }
-                          &::placeholder {
-                              color: ${sub};
-                          }
-                          &::before {
-                              ${positionAbsolute}
-                              content: '';
-                              left: 0;
-                              right: 0;
-                              bottom: 0;
-                              border-bottom: 1px solid ${rest};
-                          }
-                          &::after {
-                              ${positionAbsolute}
-                              content: '';
-                              left: 0px;
-                              right: 0px;
-                              bottom: -1px;
-                              border-bottom: 2px solid transparent;
-                              transform: scaleX(0);
-                              transform-origin: center;
-                              transition: all 0.2s ease;
-                          }
-                      ` : css`
-                          ${flexRow}
-                          ${alignCenter}
-        ${positionRelative}
-        ${borderRadius4px}
-        ${borderBox}
-        flex: 1 1 auto;
-                          border: 1px solid ${rest};
-                          min-height: 40px;
-                          &:not(:focus-within):hover {
-                              background-color: ${hover};
-                              border-color: ${active};
-                              input {
-                                  background-color: ${hover};
-                              }
-                          }
-                          &:focus-within {
-                              border-color: ${focus};
-                          }
-                          &.dropdown-showing {
-                              .icon-dropdown {
-                                  transform: rotateX(180deg);
-                              }
-                          }
-                          &::placeholder {
-                              color: ${sub};
-                          }
-                          &::after {
-                              ${positionAbsolute}
-                              ${pointerEventsNone}
-            content: '';
-                              left: -2px;
-                              right: -2px;
-                              top: -2px;
-                              bottom: -2px;
-                              border: 2px solid transparent;
-                              border-radius: 4px;
-                          }
-                      `;
-  const DropdownBox = css`
-                ${displayBlock}
-                ${positionRelative}
-        ${borderBox}
-		width: 100%;
-                max-height: 280px;
-                overflow: auto;
-                background-color: #fff;
-                border-radius: 4px;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                z-index: 9001;
-                &::-webkit-scrollbar {
-                    width: 24px;
-                    background-color: #fff !important;
-                    border-radius: 4px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 24px;
-                    border: 8px solid transparent;
-                    mix-blend-mode: normal;
-                    background-color: ${scrollbar} !important;
-                    background-clip: content-box;
-                }
-                .DGN-UI-TreeView {
-                    padding: 1px;
-                }
-            `;
-  const DropdownItem = css`
-                ${flexRow}
-                ${positionRelative}
-        ${alignCenter}
-        ${justifyStart}
-        ${borderBox}
-        ${cursorPointer}
-        ${userSelectNone}
-		min-height: 40px;
-                width: 100%;
-                background-color: #fff;
-                padding: 8px ${multiple && selectBox ? 0 : '16px'};
-                color: ${main};
-                &.no-data {
-                    font-style: italic;
-                    justify-content: center;
-                    cursor: initial;
-                }
-                &:not(.no-data):hover,
-                &:not(.no-data):focus {
-                    background-color: ${hover};
-                    color: ${active};
-                    outline: none;
-                }
-            `;
-  const DropdownText = css`
-                ${paragraph1};
-                color: inherit;
-                .DGN-UI-Dropdown-PrimaryText {
-                    ${paragraph1};
-                    ${displayBlock}
-                }
-                .DGN-UI-Dropdown-SubText {
-                    ${paragraph3};
-                    ${displayBlock}
-                    color: ${sub};
-                }
-            `;
-  const DropdownRoot = css`
-                ${displayBlock}
-                ${positionRelative}
-        margin-bottom: 20px;
-                min-width: 150px;
-                height: max-content;
-                &.error {
-                    .css-${DropdownForm.name} {
-                        border-color: ${danger};
-                        path {
-                            fill: ${danger};
-                        }
-                        &::before {
-                            border-color: ${danger};
-                        }
-                    }
-                }
-                &.dgn-dropdown-loading,
-                &.disabled {
-                    ${pointerEventsNone}
-                    ${userSelectNone}
-            .css-${DropdownInput.name} {
-                        //color: ${systemDisabled} !important;
-                    }
-                    .css-${DropdownForm.name} {
-                        border-color: ${systemDisabled};
-                        .css-${forIcon.name} {
-                            path {
-                                fill: transparent;
-                            }
-                        }
-                        &::before {
-                            border-color: ${systemDisabled};
-                        }
-                    }
-                }
-                &.readOnly {
-                    .css-${forIcon.name} {
-                        ${pointerEventsNone}
-                    }
-                    .css-${DropdownInput.name} {
-                        .dropdown-item {
-                            ${pointerEventsNone}
-                        }
-                    }
-                }
-            `;
-  const Disabled = css`
-                pointer-events: none !important;
-                opacity: 0.4 !important;
-            `;
-  /* End styled */
-
   /* Start handler */
 
+
   const triggerInput = e => {
     const target = e.currentTarget;
     target.style.pointerEvents = 'none';
@@ -495,15 +192,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const showDropdown = () => {
-    var _searchRef$current;
+    var _displayExpr, _searchRef$current;
 
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
     }
 
-    const keyArr = displayExpr.match(separatorPattern);
+    const keyArr = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.match(separatorPattern);
     const dropdown = children ? jsx("div", {
-      css: DropdownBox,
+      css: DropdownBoxCSS,
       ref: boxRef
     }, children) : itemMode === 'normal' ? mapDropdown(null, keyArr) : mapTreeView();
     const {
@@ -554,7 +251,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       borderRadius: 4,
       zIndex: 9002
     };
-    const defaultSearch = onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '';
+    const defaultSearch = lastSearchRef.current || (onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '');
     const el = jsx("div", {
       className: `DGN-UI-Portal DGN-Dropdown-${unique}`,
       style: dropdownStyle
@@ -593,7 +290,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
-        boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+        boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
     return el;
@@ -683,7 +380,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderDropdown = pattern => {
-    const keyArr = displayExpr.match(separatorPattern);
+    var _displayExpr2;
+
+    const keyArr = (_displayExpr2 = displayExpr) === null || _displayExpr2 === void 0 ? void 0 : _displayExpr2.match(separatorPattern);
     const dropdown = mapDropdown(pattern, keyArr);
     const el = document.createElement('div');
     el.className = `DGN-Dropdown-Box`;
@@ -693,10 +392,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       node.querySelector('.DGN-Dropdown-Box').remove();
       ReactDOM.render(dropdown, node.appendChild(el));
       setTimeout(() => {
-        boxRef.current.addEventListener('keydown', moveOnItem);
+        boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
         if (onLoadMore && dataSource.length < total) {
-          boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+          boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
         }
 
         updatePositionDropdown();
@@ -708,6 +407,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const items = [];
     const dataSourceUsable = [...dataSource];
 
+    const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
+
     if (currentObjectDefault[unique] && currentObjectDefault[unique].length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
@@ -730,7 +431,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     for (let index = 0; index < length; index++) {
       const data = dataSourceUsable[index];
-      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] : data;
+      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
       if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
       if (renderItem && typeof renderItem === 'function') {
@@ -750,16 +451,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       const value = typeof data === 'object' ? data[valueExpr] : data;
-      const itemDisabled = typeof data === 'object' ? data['disabled'] : data;
+      const itemDisabled = typeof data === 'object' ? data['disabled'] : false;
       const icon = getIconFromData(data);
 
       if (multiple && selectBox) {
         const checked = currentValue[unique].includes(value);
         items.push(jsx("div", {
           key: index,
-          css: !itemDisabled ? DropdownItem : [Disabled, DropdownItem],
-          onClick: e => onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index),
+          css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
+          onClick: e => {
+            if (itemDisabled) return;
+            onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
+          },
           onKeyPress: e => {
+            if (itemDisabled) return;
             if (e.key === 'Enter') e.currentTarget.firstChild.click();
           },
           tabIndex: -1
@@ -770,27 +475,32 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             height: '100%',
             padding: '0 16px'
           },
-          value: value
+          value: value,
+          disabled: itemDisabled
         }, icon && jsx("div", {
-          css: DropdownIcon
+          css: DropdownIconCSS
         }, icon), jsx("div", {
-          css: DropdownText
+          css: DropdownTextCSS
         }, displayText))));
       } else {
         items.push(jsx("div", {
           key: index,
-          css: !itemDisabled ? DropdownItem : [Disabled, DropdownItem],
+          css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
           className: 'DGN-UI-Dropdown-Item',
-          onClick: () => onChangeValue(displayText, value, icon, data, index),
+          onClick: () => {
+            if (itemDisabled) return;
+            onChangeValue(displayText, value, icon, data, index);
+          },
           onKeyPress: e => {
+            if (itemDisabled) return;
             if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
           tabIndex: -1,
           style: dropdownItemStyle
         }, icon && jsx("div", {
-          css: DropdownIcon
+          css: DropdownIconCSS
         }, icon), jsx("div", {
-          css: DropdownText
+          css: DropdownTextCSS
         }, displayText)));
       }
 
@@ -803,10 +513,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return jsx("div", {
-      css: DropdownBox,
+      css: DropdownBoxCSS,
       ref: boxRef
     }, items.length ? items : jsx("div", {
-      css: DropdownItem,
+      css: _DropdownItemCSS,
       className: 'no-data'
     }, ' ', noDataText, ' '));
   };
@@ -814,7 +524,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const mapTreeView = () => {
     // if (!treeView[unique]) {
     return jsx("div", {
-      css: DropdownBox,
+      css: DropdownBoxCSS,
       ref: boxRef
     }, jsx(TreeView, {
       dataSource: dataSource,
@@ -838,6 +548,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const loadMoreItemsDropdown = (i = 0, pattern) => {
+    var _displayExpr3;
+
     const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
 
     let notExistItem = 0;
@@ -860,14 +572,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       displayExpr = displayExpr.join(' - ');
     }
 
-    const keyArr = displayExpr.match(separatorPattern);
+    const keyArr = (_displayExpr3 = displayExpr) === null || _displayExpr3 === void 0 ? void 0 : _displayExpr3.match(separatorPattern);
+
+    const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
     for (i; i < length; i++) {
       const data = { ...dataSourceUsable[i]
       }; // Nếu đối tượng đã được hiển thị ở trên rồi thì không hiển thị ra nữa
 
       if (onLoadMore && i > notExistItem && currentObjectDefault[unique].some(valueObject => valueObject[valueExpr] === data[valueExpr])) continue;
-      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] : data;
+      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
       if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
       const value = typeof data === 'object' ? data[valueExpr] : data;
       const icon = getIconFromData(data);
@@ -889,7 +603,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       const dropdownItem = document.createElement('div');
-      dropdownItem.className = `css-${DropdownItem.name}`;
+      dropdownItem.className = `css-${_DropdownItemCSS.name}`;
       dropdownItem.tabIndex = -1;
       dropdownItem.addEventListener('click', () => onChangeValue(displayText, value, icon, data, i));
       dropdownItem.addEventListener('keypress', e => {
@@ -907,15 +621,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             padding: '0 16px'
           }
         }, icon && jsx("div", {
-          css: DropdownIcon
+          css: DropdownIconCSS
         }, icon), jsx("div", {
-          css: DropdownText
+          css: DropdownTextCSS
         }, displayText));
       } else {
         item = jsx(Fragment, null, icon && jsx("div", {
-          css: DropdownIcon
+          css: DropdownIconCSS
         }, icon), jsx("div", {
-          css: DropdownText
+          css: DropdownTextCSS
         }, displayText));
       }
 
@@ -935,7 +649,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderData = (data, keyArr) => {
-    const pattern = keyArr.join('|').replace(/([\{\}])/g, '\\$1');
+    const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
     const separatorArr = displayExpr.split(new RegExp(pattern));
     let str = '';
     let i = 0;
@@ -988,15 +702,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onErrorRenderIcon = e => {
-    if (iconDefault) {
-      e.target.src = iconDefault;
-    } else {
-      const parent = e.target.parentNode;
-      e.target.remove();
-      parent.innerHTML = `<svg width="32" height="32" viewBox="0 0 20 20" fill="none">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47998 0 0 4.48 0 10C0 15.52 4.47998 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34003 9 7 7.66 7 6C7 4.34 8.34003 3 10 3ZM4 13.98C5.28998 15.92 7.5 17.2 10 17.2C12.5 17.2 14.71 15.92 16 13.98C15.97 11.99 11.99 10.9 10 10.9C8 10.9 4.03003 11.99 4 13.98Z" fill="#7F828E"/>
-            </svg>`;
-    }
+    e.target.src = iconDefault ? iconDefault : AvatarDefault;
   };
 
   const customizeWidthDropdown = () => {
@@ -1036,8 +742,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       offsetHeight
     } = e.target;
 
+    const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
+
     if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
-      const length = boxRef.current.querySelectorAll(`.css-${DropdownItem.name}`).length;
+      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
       boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
       !!onLoadMore && onLoadMore({
         skip: length,
@@ -1052,6 +760,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onChangeInput = e => {
+    if (searchRef.current) lastSearchRef.current = searchRef.current.value;
+
     if (onInput) {
       isSearch[unique] = true;
       const valueInput = e.target.value;
@@ -1151,8 +861,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newValueArr.splice(index, 1);
 
         if (valueProp === undefined) {
+          var _nodes$index;
+
           const nodes = inputRef.current.querySelectorAll('.dropdown-item');
-          nodes[index].remove();
+          (_nodes$index = nodes[index]) === null || _nodes$index === void 0 ? void 0 : _nodes$index.remove();
         }
 
         !!onChange && onChange({
@@ -1165,7 +877,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         updatePositionDropdown();
       }, 0);
     } else {
-      const isChanged = currentValue[unique] !== value ? true : false;
+      const isChanged = currentValue[unique] !== value;
 
       if (isChanged) {
         if (valueProp === undefined) {
@@ -1269,7 +981,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       displayExpr = displayExpr.join(' - ');
     }
 
-    const keyArr = displayKey.match(separatorPattern);
+    const keyArr = displayKey === null || displayKey === void 0 ? void 0 : displayKey.match(separatorPattern);
 
     if (multiple) {
       let valueArr = source;
@@ -1353,6 +1065,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
+    const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data[valueExpr] || data;
+
     if (renderSelectedItem && typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
@@ -1365,17 +1079,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else if (iconExpr && iconExpr !== 'none') {
       inputRef.current.innerHTML = '';
       const icon = getIconFromData(data);
-      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data;
       const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
-        css: DropdownIcon
+        css: DropdownIconCSS
       }, icon), jsx("div", {
-        css: DropdownText
+        css: DropdownTextCSS
       }, text));
       const el = document.createElement('div');
       el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
       ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
     } else {
-      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data;
       inputRef.current.value = text;
     }
   };
@@ -1545,7 +1257,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.addEventListener('input', onChangeInput);
       }
 
-      const length = boxRef.current.querySelectorAll(`.css-${DropdownItem.name}`).length;
+      const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
+
+      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
 
       if (length < dataSource.length + currentObjectDefault[unique].length && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
@@ -1577,70 +1291,78 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     required: required,
     disabled: disabled,
     ...labelProps
-  }, label) : null, [label, required, disabled]);
-  const inputComp = useMemo(() => jsx("div", {
-    css: DropdownForm,
-    ref: formRef,
-    className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
-    style: formStyle
-  }, jsx("div", {
-    css: forInput
-  }, multiple ? jsx("div", { ...inputProps,
-    style: {
-      cursor: 'text',
-      ...inputStyle
-    },
-    ref: inputRef,
-    css: DropdownInput,
-    className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
-    type: "text",
-    onChange: e => {
-      e.preventDefault();
-      return false;
-    }
-  }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-    contentEditable: true,
-    style: inputStyle,
-    ref: inputRef,
-    css: DropdownInput,
-    className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
-    type: "text",
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
+  }, label) : null, [label, required, disabled, labelProps]);
+  const inputComp = useMemo(() => {
+    const _InputCSS = InputCSS(multiple, renderSelectedItem, clearAble);
+
+    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+
+    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+
+    return jsx("div", {
+      css: _DropdownFormCSS,
+      ref: formRef,
+      className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
+      style: formStyle
+    }, jsx("div", {
+      css: _InputCSS
+    }, multiple ? jsx("div", { ...inputProps,
+      style: {
+        cursor: 'text',
+        ...inputStyle
+      },
+      ref: inputRef,
+      css: _DropdownInputCSS,
+      className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
+      type: "text",
+      onChange: e => {
         e.preventDefault();
         return false;
       }
-    }
-  }) : jsx("input", { ...inputProps,
-    style: inputStyle,
-    ref: inputRef,
-    css: DropdownInput,
-    type: "text",
-    placeholder: placeholder
-  })), jsx("div", {
-    ref: iconRef,
-    css: forIcon,
-    className: 'DGN-UI-Dropdown-Icon'
-  }, jsx("span", {
-    className: 'dgn-dropdown-loading'
-  }, jsx(CircularProgress, {
-    width: 24,
-    strokeWidth: 2
-  })), jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Close',
-    className: 'icon-close',
-    onClick: onClear
-  }), !loading && jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'ArrowDown',
-    className: 'icon-dropdown',
-    onClick: triggerInput,
-    style: {
-      transition: 'transform 0.5s'
-    },
-    disabled: disabled || readOnly
-  }))), [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, openState, showClear]);
+    }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
+      contentEditable: true,
+      style: inputStyle,
+      ref: inputRef,
+      css: _DropdownInputCSS,
+      className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
+      type: "text",
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          return false;
+        }
+      }
+    }) : jsx("input", { ...inputProps,
+      style: inputStyle,
+      ref: inputRef,
+      css: _DropdownInputCSS,
+      type: "text",
+      placeholder: placeholder
+    })), jsx("div", {
+      ref: iconRef,
+      css: IconCSS(viewType, loading, showClear),
+      className: 'DGN-UI-Dropdown-Icon'
+    }, jsx("span", {
+      className: 'dgn-dropdown-loading'
+    }, jsx(CircularProgress, {
+      width: 24,
+      strokeWidth: 2
+    })), jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Close',
+      className: 'icon-close',
+      onClick: onClear
+    }), !loading && jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'ArrowDown',
+      className: 'icon-dropdown',
+      onClick: triggerInput,
+      style: {
+        transition: 'transform 0.5s'
+      },
+      disabled: disabled || readOnly
+    })));
+  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
   const errorComp = useMemo(() => errorState && jsx(HelperText, {
     disabled: disabled,
     style: {
@@ -1649,17 +1371,326 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%',
       ...errorStyle
     }
-  }, error), [error, valueProp, disabled, errorState]);
+  }, error), [error, valueProp, disabled, errorStyle, errorState]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
-    css: DropdownRoot,
+    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
     className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
-    style: style,
-    ...props
+    style: style
   }, labelComp, inputComp, errorComp), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
 }));
+/* Start styled */
+
+const InputCSS = (multiple, renderSelectedItem, clearAble) => css`
+    ${flexRow};
+    flex: 1 1 auto;
+    ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
+`;
+
+const DropdownIconCSS = css`
+    ${inlineFlex};
+    ${alignCenter};
+    ${positionRelative};
+    ${overflowHidden};
+    height: inherit;
+    margin-right: 8px;
+    height: 32px;
+    width: 32px;
+    border-radius: 16px;
+    img {
+        height: 32px;
+        width: 32px;
+        object-fit: cover;
+    }
+`;
+
+const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => css`
+    ${flexRow};
+    ${alignCenter};
+    ${outlineNone};
+    ${backgroundTransparent};
+    ${borderNone};
+    ${paragraph1};
+    width: 100%;
+    color: ${main};
+    padding-top: 0;
+    padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
+    padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
+    min-height: ${multiple ? 30 : 24}px;
+    &.dgn-dropdown-multiple {
+        ${flexWrap};
+        ${overflowHidden};
+        ${breakWord};
+        /* max-height: max-content; */
+        ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+        &::after {
+            ${flexRow};
+            ${positionAbsolute};
+            ${alignCenter};
+            ${justifyCenter};
+            content: '${placeholder}';
+            color: ${sub};
+        }
+        &:not(:empty)::after {
+            visibility: hidden;
+        }
+    }
+    &:focus {
+        ${backgroundTransparent};
+    }
+    .dropdown-item {
+        &:not(:last-child) {
+            margin-right: 5px;
+        }
+        svg {
+            ${borderBox};
+            padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
+        }
+    }
+    .css-${DropdownIconCSS.name} {
+        ${renderSelectedItem ? `
+            min-height: 24px;
+            min-width: 24px;
+            ` : `
+            height: 24px;
+            width: 24px;
+            img {
+                height: 24px;
+                width: 24px;
+            }
+            `}
+    }
+`;
+
+const IconCSS = (viewType, loading, showClear) => css`
+    ${flexRow};
+    ${alignCenter};
+    margin-left: 8px;
+    margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
+    color: inherit;
+    .icon-close {
+        display: ${showClear ? 'flex' : 'none'};
+        margin-right: 4px;
+    }
+    .dgn-dropdown-loading {
+        display: ${loading ? 'flex' : 'none'};
+    }
+`;
+
+const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => viewType !== 'outlined' ? css`
+              ${flexRow};
+              ${alignCenter};
+              ${positionRelative};
+              ${borderBox};
+              flex: 1 1 auto;
+              padding-bottom: ${multiple ? 1 : 4}px;
+              padding-top: ${multiple ? 1 : 4}px;
+              &:not(:focus-within):hover {
+                  &::before {
+                      border-bottom-color: ${active};
+                  }
+                  .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+                      color: ${active};
+                  }
+              }
+              &:focus-within {
+                  border-bottom-color: ${focus};
+                  &::after {
+                      border-bottom-color: inherit;
+                      transform: scaleX(1);
+                  }
+                  .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+                      color: ${active};
+                  }
+              }
+              &.dropdown-showing {
+                  .icon-dropdown {
+                      transform: rotateX(180deg);
+                  }
+              }
+              &::placeholder {
+                  color: ${sub};
+              }
+              &::before {
+                  ${positionAbsolute};
+                  content: '';
+                  left: 0;
+                  right: 0;
+                  bottom: 0;
+                  border-bottom: 1px solid ${rest};
+              }
+              &::after {
+                  ${positionAbsolute};
+                  content: '';
+                  left: 0px;
+                  right: 0px;
+                  bottom: -1px;
+                  border-bottom: 2px solid transparent;
+                  transform: scaleX(0);
+                  transform-origin: center;
+                  transition: all 0.2s ease;
+              }
+          ` : css`
+              ${flexRow};
+              ${alignCenter};
+              ${positionRelative};
+              ${borderRadius4px};
+              ${borderBox};
+              ${border(1, rest)};
+              flex: 1 1 auto;
+              min-height: 40px;
+              &:not(:focus-within):hover {
+                  background-color: ${hover};
+                  border-color: ${active};
+                  input {
+                      background-color: ${hover};
+                  }
+              }
+              &:focus-within {
+                  border-color: ${focus};
+              }
+              &.dropdown-showing {
+                  .icon-dropdown {
+                      transform: rotateX(180deg);
+                  }
+              }
+              &::placeholder {
+                  color: ${sub};
+              }
+              &::after {
+                  ${positionAbsolute};
+                  ${pointerEventsNone};
+                  ${borderRadius4px};
+                  content: '';
+                  left: -2px;
+                  right: -2px;
+                  top: -2px;
+                  bottom: -2px;
+                  border: 2px solid transparent;
+              }
+          `;
+
+const DropdownBoxCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderBox};
+    ${borderRadius4px};
+    width: 100%;
+    max-height: 280px;
+    overflow: auto;
+    background-color: ${white};
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    z-index: 9001;
+    &::-webkit-scrollbar {
+        ${borderRadius4px};
+        width: 24px;
+        background-color: ${white} !important;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 24px;
+        border: 8px solid transparent;
+        mix-blend-mode: normal;
+        background-color: ${scrollbar} !important;
+        background-clip: content-box;
+    }
+    .DGN-UI-TreeView {
+        padding: 1px;
+    }
+`;
+
+const DropdownItemCSS = (multiple, selectBox) => css`
+    ${flexRow};
+    ${positionRelative};
+    ${alignCenter};
+    ${justifyStart};
+    ${borderBox};
+    ${cursorPointer};
+    ${userSelectNone};
+    min-height: 40px;
+    width: 100%;
+    background-color: ${white};
+    padding: 8px ${multiple && selectBox ? 0 : '16px'};
+    color: ${main};
+    &.no-data {
+        ${justifyCenter};
+        font-style: italic;
+        cursor: initial;
+    }
+    &:not(.no-data):hover,
+    &:not(.no-data):focus {
+        ${outlineNone};
+        background-color: ${hover};
+        color: ${active};
+    }
+`;
+
+const DropdownTextCSS = css`
+    ${paragraph1};
+    color: inherit;
+    .DGN-UI-Dropdown-PrimaryText {
+        ${paragraph1};
+        ${displayBlock};
+    }
+    .DGN-UI-Dropdown-SubText {
+        ${paragraph3};
+        ${displayBlock};
+        color: ${sub};
+    }
+`;
+
+const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear) => css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: 20px;
+    /* min-width: 150px; */
+    height: max-content;
+    &.error {
+        .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+            border-color: ${danger};
+            path {
+                fill: ${danger};
+            }
+            &::before {
+                border-color: ${danger};
+            }
+        }
+    }
+    &.dgn-dropdown-loading,
+    &.disabled {
+        ${pointerEventsNone};
+        ${userSelectNone};
+        .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+            border-color: ${systemDisabled};
+            .css-${IconCSS(viewType, loading, showClear).name} {
+                path {
+                    fill: transparent;
+                }
+            }
+            &::before {
+                border-color: ${systemDisabled};
+            }
+        }
+    }
+    &.readOnly {
+        .css-${IconCSS(viewType, loading, showClear).name} {
+            ${pointerEventsNone};
+        }
+        .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+            .dropdown-item {
+                ${pointerEventsNone};
+            }
+        }
+    }
+`;
+
+const DisabledCSS = css`
+    pointer-events: none !important;
+    opacity: 0.4 !important;
+`;
+/* End styled */
+
 Dropdown.defaultProps = {
   viewType: 'underlined',
   itemMode: 'normal',