diginet-core-ui 1.3.55 → 1.3.56

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

@@ -11,40 +11,39 @@ import AvatarDefault from '../../../assets/avatar/default.svg';
 import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } 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, border, borderBox, borderNone, borderRadius4px, breakWord, 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, flexColReverse, flexRow, flexWrap, inlineFlex, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone } from '../../../styles/general';
 import isMobile from '../../../utils/isMobile';
-import { useTheme } from '../../../theme';
+import theme from '../../../theme/settings';
 const {
-  zIndex
-} = useTheme();
-const {
-  paragraph1,
-  paragraph3
-} = typography;
-const {
-  system: {
-    active,
-    disabled: systemDisabled,
-    rest,
-    white
-  },
-  semantic: {
-    danger
-  },
-  fill: {
-    hover,
-    'scrollbar-tabbar': scrollbar
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled,
+      rest,
+      white
+    },
+    semantic: {
+      danger
+    },
+    fill: {
+      hover,
+      'scrollbar-tabbar': scrollbar
+    },
+    line: {
+      focus
+    },
+    text: {
+      main,
+      sub
+    }
   },
-  line: {
-    focus
+  typography: {
+    paragraph1,
+    paragraph3
   },
-  text: {
-    main,
-    sub
-  }
-} = colors;
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const timing = {},
       currentValue = {},
       currentObjectDefault = {},
@@ -70,7 +69,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   total,
   placeholder,
   error,
-  keyExpr,
   displayExpr,
   subText,
   valueExpr,
@@ -106,12 +104,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   dropdownItemStyle
 }, reference) => {
   if (multiple && selectBox === undefined) selectBox = true;
+  const ref = useRef(null);
   const dropdownRef = useRef(null);
+  const loadingProgressRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
   const inputRef = useRef(null);
   const iconRef = useRef(null);
-  const boxRef = useRef(null);
+  const dropdownListRef = useRef(null);
   const searchRef = useRef(null);
   const lastSearchRef = useRef(null);
   const timeout = useRef(null);
@@ -123,6 +123,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [showClear, setShowClear] = useState(false);
 
   const _isMobile = isMobile.any();
+
+  const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
+
+  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
+
+  const _IconCSS = IconCSS(viewType, loading, showClear);
+
+  const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, _DropdownInputCSS.name);
+
+  const _DropdownListCSS = DropdownListCSS(loading);
+
+  const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
+
+  const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _IconCSS.name, _DropdownInputCSS.name);
   /* Start handler */
 
 
@@ -130,7 +144,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const target = e.currentTarget;
     target.style.pointerEvents = 'none';
 
-    if (!boxRef.current) {
+    if (!dropdownListRef.current) {
       onClickInput();
     } else {
       onClickOutsideOfInput({
@@ -154,9 +168,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickInput = e => {
-    if (!boxRef.current) {
+    if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : 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();
@@ -175,14 +189,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else if (multiple || itemMode === 'treeview') {
       if (searchRef.current) {
         searchRef.current.focus();
-      } else if (children && boxRef.current && boxRef.current.querySelector('input')) {
-        boxRef.current.querySelector('input').focus();
+      } else if (children && dropdownListRef.current && dropdownListRef.current.querySelector('input')) {
+        dropdownListRef.current.querySelector('input').focus();
       }
     }
   };
 
   const onClickOutsideOfInput = event => {
-    if (inputRef.current && !inputRef.current.contains(event.target) && iconRef.current && !iconRef.current.contains(event.target) && boxRef.current && !boxRef.current.parentNode.parentNode.contains(event.target)) {
+    var _inputRef$current, _iconRef$current, _dropdownListRef$curr, _dropdownListRef$curr2, _dropdownListRef$curr3;
+
+    if (inputRef.current && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.contains(event === null || event === void 0 ? void 0 : event.target)) && iconRef.current && !((_iconRef$current = iconRef.current) !== null && _iconRef$current !== void 0 && _iconRef$current.contains(event === null || event === void 0 ? void 0 : event.target)) && dropdownListRef.current && !((_dropdownListRef$curr = dropdownListRef.current) !== null && _dropdownListRef$curr !== void 0 && (_dropdownListRef$curr2 = _dropdownListRef$curr.parentNode) !== null && _dropdownListRef$curr2 !== void 0 && (_dropdownListRef$curr3 = _dropdownListRef$curr2.parentNode) !== null && _dropdownListRef$curr3 !== void 0 && _dropdownListRef$curr3.contains(event === null || event === void 0 ? void 0 : event.target))) {
       closeDropdown();
       triggerBlur(false);
     }
@@ -197,8 +213,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const keyArr = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.match(separatorPattern);
     const dropdown = children ? jsx("div", {
-      css: DropdownBoxCSS,
-      ref: boxRef
+      css: _DropdownListCSS,
+      ref: dropdownListRef,
+      className: 'DGN-Dropdown-List'
     }, children) : itemMode === 'normal' ? mapDropdown(null, keyArr) : mapTreeView();
     const {
       innerHeight
@@ -221,55 +238,32 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    let dropdownStyle = {
-      position: 'fixed',
-      top: `${positionTop}px`,
-      left: `${left}px`,
-      width: `${width}px`,
-      backgroundColor: '#FFF',
-      zIndex: zIndex(1)
-    };
-    if (_isMobile && allowSearch) dropdownStyle = { ...dropdownStyle,
-      bottom: 0,
-      top: 'auto',
-      display: 'flex',
-      flexDirection: 'column-reverse',
-      height: 'max-content'
-    };
-    const loadingStyle = {
-      display: 'none',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      backgroundColor: 'rgba(255, 255, 255, 0.6)',
-      borderRadius: 4,
-      zIndex: zIndex(2)
-    };
     const defaultSearch = lastSearchRef.current || (onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '');
+
+    const _DropdownCSS = DropdownCSS(positionTop, left, width, _isMobile, allowSearch);
+
     const el = jsx("div", {
-      className: `DGN-UI-Portal DGN-Dropdown-${unique}`,
-      style: dropdownStyle
+      css: _DropdownCSS,
+      ref: dropdownRef,
+      className: `DGN-UI-Portal DGN-Dropdown-${unique}`
     }, (multiple || allowSearch) && itemMode === 'normal' && !children && jsx("div", {
-      className: 'DGN-Dropdown-Box-Search'
+      className: 'DGN-Dropdown-Search'
     }, jsx(InputBase, {
       inputRef: searchRef,
       viewType: 'outlined',
       defaultValue: defaultSearch,
       onChange: onChangeInput,
       style: {
-        backgroundColor: '#FFF',
         marginBottom: 1
       },
       onKeyDown: pressESCHandler,
       autoFocus: true
     })), jsx("div", {
       className: 'DGN-Dropdown-Box'
-    }, dropdown), jsx("div", {
-      className: 'DGN-Dropdown-Loading',
-      style: loadingStyle
+    }, dropdown), loading && jsx("div", {
+      css: LoadingProgressCSS,
+      ref: loadingProgressRef,
+      className: 'DGN-Dropdown-Loading-Progress'
     }, jsx(CircularProgress, {
       size: 'xs'
     })));
@@ -283,16 +277,21 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
-      boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
+      dropdownListRef.current && dropdownListRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
-        boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+        dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
     return el;
   };
 
   const moveOnItem = e => {
+    if (e.key === 'Escape' || e.key === 'Tab') {
+      closeDropdown();
+      triggerBlur();
+    }
+
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       let activeEl = document.activeElement;
       activeEl = e.key === 'ArrowDown' ? activeEl.nextElementSibling : activeEl.previousElementSibling;
@@ -307,52 +306,49 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const pressESCHandler = event => {
-    if (event.key === 'Escape' || event.key === 'Tab') {
+  const pressESCHandler = e => {
+    if (e.key === 'Escape' || e.key === 'Tab') {
       closeDropdown();
       triggerBlur();
-    } else if (event.key === 'ArrowDown' && boxRef.current) {
-      boxRef.current.firstChild.focus();
+    } else if (e.key === 'ArrowDown' && dropdownListRef.current) {
+      e.preventDefault();
+      dropdownListRef.current.firstChild.focus();
     }
   };
 
   const onWheelHandler = e => {
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
+    var _dropdownRef$current;
 
-    if (!node) {
+    if (!dropdownRef.current) {
       document.removeEventListener('wheel', onWheelHandler);
       return;
     }
 
-    if (!node.contains(e.target)) {
+    if (!((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && _dropdownRef$current.contains(e.target))) {
       closeDropdown();
       triggerBlur();
     }
   };
 
   const closeDropdown = () => {
-    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`;
-      node.style.transition = `opacity 0.5s`;
-      node.style.opacity = 0;
-      timing[unique + 'Box'] = setTimeout(() => {
-        clearTimeout(timing[unique + 'Box']);
-        timing[unique + 'Box'] = null;
-        node.remove();
-        boxRef.current = null;
-      }, 300);
+    if (dropdownRef.current) {
+      // dropdownRef.current.style.pointerEvents = `none`;
+      // dropdownRef.current.style.transition = `opacity 0.5s`;
+      // dropdownRef.current.style.opacity = 0;
+      // timing[unique + 'Box'] = setTimeout(() => {
+      //     clearTimeout(timing[unique + 'Box']);
+      //     timing[unique + 'Box'] = null;
+      //     dropdownRef.current?.remove();
+      //     dropdownListRef.current = null;
+      // }, 300);
       setOpenState(false);
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
 
-      if (onLoadMore && boxRef.current) {
-        boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
-        boxRef.current = null;
+      if (onLoadMore && dropdownListRef.current) {
+        dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
+        dropdownListRef.current = null;
       } // if (!multiple) {
       //     inputRef.current.removeEventListener('keydown', pressESCHandler);
       //     inputRef.current.removeEventListener('input', onChangeInput);
@@ -371,16 +367,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const dropdown = mapDropdown(pattern, keyArr);
     const el = document.createElement('div');
     el.className = `DGN-Dropdown-Box`;
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
 
-    if (node) {
-      node.querySelector('.DGN-Dropdown-Box').remove();
-      ReactDOM.render(dropdown, node.appendChild(el));
+    if (dropdownRef.current) {
+      var _dropdownRef$current$;
+
+      (_dropdownRef$current$ = dropdownRef.current.querySelector('.DGN-Dropdown-Box')) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.remove();
+      ReactDOM.render(dropdown, dropdownRef.current.appendChild(el));
       setTimeout(() => {
-        boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
+        dropdownListRef.current && dropdownListRef.current.addEventListener('keydown', moveOnItem);
 
         if (onLoadMore && dataSource.length < total) {
-          boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+          dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
         }
 
         updatePositionDropdown();
@@ -394,8 +391,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const items = [];
     const dataSourceUsable = [...dataSource];
 
-    const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
-
     if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
@@ -446,19 +441,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          onClick: () => {
-            if (itemDisabled) return; // onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
-
-            onChangeValue(displayText, value, icon, data, index);
-          },
+          className: 'DGN-UI-Dropdown-Item' // 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 (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
+            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, {
-          defaultChecked: checked,
+          forTreeView: true,
+          checked: checked,
           style: {
             width: '100%',
             height: '100%',
@@ -492,20 +488,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, icon), jsx("div", {
           css: DropdownTextCSS
         }, displayText)));
-      }
+      } // if (items?.length === limit) {
+      //     timerRef.current = setTimeout(() => {
+      //         loadMoreItemsDropdown(index + 1, pattern);
+      //     }, 1000);
+      //     break;
+      // }
 
-      if (items.length === limit) {
-        timerRef.current = setTimeout(() => {
-          loadMoreItemsDropdown(index + 1, pattern);
-        }, 1000);
-        break;
-      }
     }
 
     return jsx("div", {
-      css: DropdownBoxCSS,
-      ref: boxRef
-    }, items.length ? items : jsx("div", {
+      css: _DropdownListCSS,
+      ref: dropdownListRef,
+      className: 'DGN-Dropdown-List'
+    }, items !== null && items !== void 0 && items.length ? items : jsx("div", {
       css: _DropdownItemCSS,
       className: 'no-data'
     }, ' ', noDataText, ' '));
@@ -514,8 +510,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const mapTreeView = () => {
     // if (!treeView[unique]) {
     return jsx("div", {
-      css: DropdownBoxCSS,
-      ref: boxRef
+      css: _DropdownListCSS,
+      ref: dropdownListRef,
+      className: 'DGN-Dropdown-List'
     }, jsx(TreeView, {
       dataSource: dataSource,
       displayExpr: displayExpr,
@@ -564,8 +561,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     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
@@ -604,7 +599,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (multiple && selectBox) {
         const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         item = jsx(Checkbox, {
-          defaultChecked: checked,
+          forTreeView: true,
+          checked: checked,
           style: {
             width: '100%',
             height: '100%',
@@ -623,11 +619,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText));
       }
 
-      if (!boxRef.current) {
+      if (!dropdownListRef.current) {
         return;
       }
 
-      ReactDOM.render(item, boxRef.current.appendChild(dropdownItem));
+      ReactDOM.render(item, dropdownListRef.current.appendChild(dropdownItem));
 
       if (++num === 100) {
         timerRef.current = setTimeout(() => {
@@ -696,33 +692,31 @@ 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 (dropdownListRef.current && _isMobile) dropdownListRef.current.style.maxHeight = `${Math.min(280, window.innerHeight) - (allowSearch ? 40 : 0)}px`;
 
-    if (!dropdownRef.current) {
+    if (!ref.current) {
       window.removeEventListener('resize', customizeWidthDropdown);
       return;
     }
 
     const {
       width
-    } = dropdownRef.current.getBoundingClientRect();
+    } = ref.current.getBoundingClientRect();
 
-    if (document.querySelector(`.DGN-Dropdown-${unique}`)) {
-      document.querySelector(`.DGN-Dropdown-${unique}`).style.width = width + 'px';
+    if (dropdownRef.current) {
+      dropdownRef.current.style.width = width + 'px';
     }
 
     updatePositionDropdown();
   };
 
   const updatePositionDropdown = () => {
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
-
-    if (!formRef.current || !node) {
+    if (!formRef.current || !dropdownRef.current) {
       document.removeEventListener('wheel', onWheelHandler);
       return;
     }
 
-    _isMobile ? updatePosition(formRef.current, node, null) : updatePosition(formRef.current, node, closeDropdown);
+    _isMobile ? updatePosition(formRef.current, dropdownRef.current, null) : updatePosition(formRef.current, dropdownRef.current, closeDropdown);
   };
 
   const onLoadMoreHandler = e => {
@@ -732,13 +726,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       offsetHeight
     } = e.target;
 
-    const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
+    if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
+      var _dropdownListRef$curr4, _currentObjectDefault3;
 
-    if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
-      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);
+      const length = ((_dropdownListRef$curr4 = dropdownListRef.current.children) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.length) - (((_currentObjectDefault3 = currentObjectDefault[unique]) === null || _currentObjectDefault3 === void 0 ? void 0 : _currentObjectDefault3.length) || 0);
+      dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
       !!onLoadMore && onLoadMore({
         skip: length,
         limit: limit
@@ -777,7 +769,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);
@@ -785,11 +777,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (timing[unique]) clearTimeout(timing[unique]);
     timing[unique] = setTimeout(() => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-
+      // if (timerRef.current) {
+      //     clearTimeout(timerRef.current);
+      //     timerRef.current = null;
+      // }
       renderDropdown(new RegExp(value.normalize(), 'gim'));
     }, timeout.current || searchDelayTime);
   };
@@ -817,7 +808,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
@@ -847,7 +838,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           value: newValueArr,
           data
         });
-      } else if (selectBox) {
+      } else {
         const index = newValueArr.indexOf(value);
         newValueArr.splice(index, 1);
 
@@ -901,15 +892,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (index !== -1) {
       currentValue[unique].splice(index, 1);
       setTimeout(() => {
-        if (boxRef.current && multiple && selectBox && !children) {
-          const input = boxRef.current.querySelector(`input[value="${value}"]`);
+        var _e$parentNode;
+
+        if (dropdownListRef.current && multiple && selectBox && !children) {
+          const input = dropdownListRef.current.querySelector(`input[value="${value}"]`);
 
           if (input) {
             input.checked = false;
           }
         }
 
-        !!e && !!e.parentNode && e.parentNode.remove();
+        e === null || e === void 0 ? void 0 : (_e$parentNode = e.parentNode) === null || _e$parentNode === void 0 ? void 0 : _e$parentNode.remove();
       }, 0);
       !!onChange && onChange({
         value: currentValue[unique],
@@ -925,14 +918,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (inputRef.current.tagName.toLowerCase() === 'div') {
       inputRef.current.innerHTML = '';
 
-      if (boxRef.current) {
-        boxRef.current.querySelectorAll('input').forEach(input => input.checked = false);
+      if (dropdownListRef.current) {
+        dropdownListRef.current.querySelectorAll('input').forEach(input => input.checked = false);
       }
     } else {
       inputRef.current.value = '';
     } // 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),
@@ -956,7 +950,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 = '';
@@ -969,7 +963,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(' - ');
@@ -988,7 +982,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       currentValue[unique] = [];
       inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
-        var _currentObjectDefault3;
+        var _currentObjectDefault4;
 
         for (let i = 0; i < length; i++) {
           if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
@@ -997,7 +991,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
 
-        if ((_currentObjectDefault3 = currentObjectDefault[unique]) !== null && _currentObjectDefault3 !== void 0 && _currentObjectDefault3.length) {
+        if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
 
           if (itemOfValue) {
@@ -1006,7 +1000,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       });
     } else {
-      var _currentObjectDefault4;
+      var _currentObjectDefault5;
 
       currentValue[unique] = source;
 
@@ -1017,7 +1011,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
+      if ((_currentObjectDefault5 = currentObjectDefault[unique]) !== null && _currentObjectDefault5 !== void 0 && _currentObjectDefault5.length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
 
         if (itemOfValue) {
@@ -1035,14 +1029,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,
@@ -1065,9 +1059,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
@@ -1095,7 +1089,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   useImperativeHandle(reference, () => {
-    const currentRef = dropdownRef.current || {};
+    const currentRef = ref.current || {};
     const _instance = {
       closeDropdown: () => {
         closeDropdown();
@@ -1133,7 +1127,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setValueIntoInput(value);
     };
 
-    currentRef.DOM = dropdownRef.current;
+    currentRef.DOM = ref.current;
     return currentRef;
   });
   useEffect(() => {
@@ -1189,38 +1183,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [valueProp]);
   useEffect(() => {
-    if (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) {
-          loadingNode.style.display = 'flex';
-          setTimeout(() => {
-            loadingNode.style.opacity = 1;
-          }, 0);
-        }
-      }
-
-      return () => {
-        if (iconRef.current && dropdownRef.current) {
-          if (boxRef.current) {
-            const loadingNode = document.querySelector('.DGN-Dropdown-Loading');
-
-            if (loadingNode) {
-              loadingNode.style.opacity = 0;
-              setTimeout(() => {
-                loadingNode.style.display = 'none';
-              }, 300);
-            }
-          }
-        }
-      };
-    }
-  }, [loading]);
-  useEffect(() => {
-    if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
+    if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
     }
   }, [valueProp, dataSource]);
@@ -1230,7 +1193,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!readOnly && !disabled) {
       inputRef.current.addEventListener('click', onClickInput);
       inputRef.current.addEventListener('input', onChangeInput);
-      !!onLoadMore && boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+      !!onLoadMore && dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
     } else {
       if (multiple) {
         inputRef.current.contentEditable = false;
@@ -1244,7 +1207,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return () => {
-      if (!dropdownRef.current || !inputRef.current || !iconRef.current) return;
+      if (!ref.current || !inputRef.current || !iconRef.current) return;
 
       if (!readOnly && !disabled) {
         inputRef.current.removeEventListener('click', onClickInput);
@@ -1282,20 +1245,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.addEventListener('click', onClickInput);
     }
 
-    if (boxRef.current) {
-      var _boxRef$current$query2, _currentObjectDefault5;
+    if (dropdownListRef.current) {
+      var _dropdownListRef$curr5, _dropdownListRef$curr6, _currentObjectDefault6;
 
       if (!disabled && !readOnly) {
         inputRef.current.addEventListener('input', onChangeInput);
       }
 
-      const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
-
-      const length = (_boxRef$current$query2 = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query2 === void 0 ? void 0 : _boxRef$current$query2.length;
+      const length = (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : (_dropdownListRef$curr6 = _dropdownListRef$curr5.children) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.length;
 
-      if (length < dataSource.length + ((_currentObjectDefault5 = currentObjectDefault[unique]) === null || _currentObjectDefault5 === void 0 ? void 0 : _currentObjectDefault5.length) && !isSearch[unique]) {
+      if (length < dataSource.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
-        !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+        !!onLoadMore && dataSource.length < total && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
       }
@@ -1311,25 +1272,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.removeEventListener('click', onClickInput);
       }
 
-      !!boxRef.current && boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
+      !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
   }, [dataSource]);
   /* End handler */
 
   /* Start component */
 
-  const labelComp = useMemo(() => label ? jsx(Label, {
+  const LabelView = useMemo(() => label ? jsx(Label, {
     required: required,
     disabled: disabled,
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
-  const inputComp = useMemo(() => {
-    const _InputCSS = InputCSS(multiple, renderSelectedItem);
-
-    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
-
-    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
-
+  const InputView = useMemo(() => {
     return jsx("div", {
       css: _DropdownFormCSS,
       ref: formRef,
@@ -1346,18 +1301,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: inputRef,
       css: _DropdownInputCSS,
       className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
-      type: "text",
       onChange: e => {
         e.preventDefault();
         return false;
       }
-    }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
+    }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
       contentEditable: !disabled,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
       className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
-      type: "text",
       onKeyDown: e => {
         if (e.key === 'Enter') {
           e.preventDefault();
@@ -1373,7 +1326,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled
     })), jsx("div", {
       ref: iconRef,
-      css: IconCSS(viewType, loading, showClear),
+      css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
     }, jsx("span", {
       className: 'dgn-dropdown-loading'
@@ -1396,7 +1349,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled || readOnly
     })));
   }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
-  const errorComp = useMemo(() => error && jsx(HelperText, {
+  const ErrorView = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
       minHeight: '16px',
@@ -1405,17 +1358,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...errorStyle
     }
   }, error), [error, disabled, errorStyle]);
-  const dropdownComp = useMemo(() => {
+  const DropdownView = useMemo(() => {
     return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
-  }, [openState, dataSource]);
+  }, [openState, dataSource, loading, multiple, selectBox]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
-    ref: dropdownRef,
-    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, 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);
+    ref: ref,
+    css: _DropdownRootCSS,
+    style: style,
+    className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' ')
+  }, LabelView, InputView, ErrorView), DropdownView);
 }));
 /* Start styled */
 
@@ -1430,17 +1383,14 @@ const DropdownIconCSS = css`
     ${alignCenter};
     ${positionRelative};
     ${overflowHidden};
-    height: inherit;
-    margin-right: 8px;
-    height: 32px;
+    ${parseWidthHeight(32)};
+    margin-right: ${spacing([2])};
     min-height: 32px;
-    width: 32px;
     min-width: 32px;
     border-radius: 16px;
     img {
-        height: 32px;
+        ${parseWidthHeight(32)};
         min-height: 32px;
-        width: 32px;
         min-width: 32px;
         object-fit: cover;
     }
@@ -1457,7 +1407,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
     color: ${disabled ? systemDisabled : main};
     padding-top: 0;
     padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
-    padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
+    padding-left: ${viewType !== 'outlined' ? 0 : spacing([4])};
     min-height: ${multiple ? 30 : 24}px;
     &.dgn-dropdown-multiple {
         ${flexWrap};
@@ -1522,19 +1472,19 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
 const IconCSS = (viewType, loading, showClear) => css`
     ${flexRow};
     ${alignCenter};
-    margin-left: 8px;
-    margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
+    margin-left: ${spacing([2])};
+    margin-right: ${viewType !== 'outlined' ? 0 : spacing([4])};
     color: inherit;
     .icon-close {
         display: ${showClear ? 'flex' : 'none'};
-        margin-right: 4px;
+        margin-right: ${spacing([1])};
     }
     .dgn-dropdown-loading {
         display: ${loading ? 'flex' : 'none'};
     }
 `;
 
-const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => viewType !== 'outlined' ? css`
+const DropdownFormCSS = (viewType, multiple, disabled, DropdownInputCSSName) => viewType !== 'outlined' ? css`
               ${flexRow};
               ${alignCenter};
               ${positionRelative};
@@ -1547,7 +1497,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                         &::before {
                             border-bottom-color: ${active};
                         }
-                        .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+                        .css-${DropdownInputCSSName} {
                             color: ${active};
                         }
                     }
@@ -1558,7 +1508,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                       border-bottom-color: inherit;
                       transform: scaleX(1);
                   }
-                  .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+                  .css-${DropdownInputCSSName} {
                       color: ${active};
                   }
               }
@@ -1631,20 +1581,20 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               }
           `;
 
-const DropdownBoxCSS = css`
+const DropdownListCSS = loading => css`
     ${displayBlock};
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     max-height: 280px;
-    overflow: auto;
+    ${loading ? overflowHidden : overflowAuto};
     background-color: ${white};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    z-index: ${zIndex(1)};
+    z-index: ${zIndexCORE(1)};
     &::-webkit-scrollbar {
         ${borderRadius4px};
-        width: 24px;
+        ${parseWidth(24)};
         background-color: ${white} !important;
     }
     &::-webkit-scrollbar-thumb {
@@ -1670,6 +1620,7 @@ const DropdownItemCSS = (multiple, selectBox) => css`
     min-height: 40px;
     width: 100%;
     background-color: ${white};
+    padding: ${spacing([2, multiple && selectBox ? 0 : 4])};
     padding: 8px ${multiple && selectBox ? 0 : '16px'};
     color: ${main};
     &.no-data {
@@ -1699,13 +1650,13 @@ const DropdownTextCSS = css`
     }
 `;
 
-const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear) => css`
+const DropdownRootCSS = (DropdownFormCSSName, IconCSSName, DropdownInputCSSName) => css`
     ${displayBlock};
     ${positionRelative};
     margin-bottom: 20px;
     height: max-content;
     &.error {
-        .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+        .css-${DropdownFormCSSName} {
             border-color: ${danger};
             path {
                 fill: ${danger};
@@ -1717,9 +1668,9 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     }
     &.dgn-dropdown-loading,
     &.disabled {
-        .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+        .css-${DropdownFormCSSName} {
             border-color: ${systemDisabled};
-            .css-${IconCSS(viewType, loading, showClear).name} {
+            .css-${IconCSSName} {
                 path {
                     fill: transparent;
                 }
@@ -1730,10 +1681,10 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
         }
     }
     &.readOnly {
-        .css-${IconCSS(viewType, loading, showClear).name} {
+        .css-${IconCSSName} {
             ${pointerEventsNone};
         }
-        .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+        .css-${DropdownInputCSSName} {
             .dropdown-item {
                 ${pointerEventsNone};
             }
@@ -1741,6 +1692,32 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     }
 `;
 
+const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
+    ${positionFixed};
+    ${parseWidth(width)};
+    top: ${top}px;
+    left: ${left}px;
+    background-color: ${white};
+    z-index: ${zIndexCORE(1)};
+    ${isMobile && allowSearch && `
+        bottom: 0;
+        top: auto;
+        height: max-content;
+        ${flexColReverse.styles};
+    `}
+`;
+
+const LoadingProgressCSS = css`
+    ${flexRow};
+    ${justifyCenter};
+    ${alignCenter};
+    ${positionAbsolute};
+    ${borderRadius4px};
+    ${parseWidthHeight('100%')}
+    top: 0;
+    background-color: rgba(255, 255, 255, 0.6);
+    z-index: ${zIndexCORE(2)};
+`;
 const DisabledCSS = css`
     pointer-events: none !important;
     opacity: 0.4 !important;
@@ -1769,54 +1746,53 @@ Dropdown.defaultProps = {
   required: false,
   multiple: false,
   allowSearch: false,
-  closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],
   onInput: null
 };
 Dropdown.propTypes = {
-  /** the type of border you want to display */
+  /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined']),
 
-  /** the mode of item when rendering */
+  /** The mode of item when rendering. */
   itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
 
-  /** Use for Chip component, the selected item was render default */
+  /** Use for [Chip](https://core.diginet.com.vn/ui/?path=/story/chip) component, default selected item when `multiple`. */
   itemMultipleSize: PropTypes.oneOf(['small', 'medium']),
 
-  /** class for dropdown */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** label for input */
+  /** The label of the input. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** hints for input */
+  /** The short hint displayed in the input before the user select a value. */
   placeholder: PropTypes.string,
 
-  /** error for input */
+  /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** Used to identify the parent key (only used for itemMode is 'treeview') */
+  /** Used to identify the parent key (only used for `itemMode` is 'treeview'). */
   treeViewID: PropTypes.string,
 
-  /** used for mapping into a nested list (only used for itemMode is 'treeview') */
+  /** Used for mapping into a nested list (only used for `itemMode` is 'treeview'). */
   treeViewParentID: PropTypes.string,
 
-  /** statement when there is no data */
+  /** Specifies a text string shown when there is no data. */
   noDataText: PropTypes.string,
 
-  /** display this icon if not found the icon follow iconExpr */
+  /** The icon to display if not found the icon follow `iconExpr`. */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1825,141 +1801,138 @@ Dropdown.propTypes = {
     style: PropTypes.object
   })]),
 
-  /** default value is displayed for first render */
+  /** Default value displayed when first render. */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** the displayed value for each change */
+  /** The displayed value of component. */
   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
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** display sub content */
+  /** Display sub content. */
   subText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
-  /** the field name used for the returned result */
+  /** The field name used for the returned result. */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If true, used default delayOnInput
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
 
-  /** number of items is ignored */
+  /** Number of items is ignored. */
   skip: PropTypes.number,
 
-  /** number of elements that are rendered each time */
+  /** Number of items that are rendered each time. */
   limit: PropTypes.number,
 
-  /** The total number of elements in the dropdown */
+  /** The total number of items in the dropdown list. */
   total: PropTypes.number,
 
-  /** display the clear icon if true */
+  /** If `true`, display clear icon.*/
   clearAble: PropTypes.bool,
 
-  /** shows data loading status */
+  /** If true, the loading indicator is shown. */
   loading: PropTypes.bool,
 
-  /** prevent all event if true, hide all icon */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** prevent all event if true */
+  /** If true, the component is read-only. */
   readOnly: PropTypes.bool,
 
-  /** auto close after select an item */
+  /** If `true`, dropdown will close after select an item. */
   closeAfterSelect: PropTypes.bool,
 
-  /** At least one item is required */
+  /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
 
-  /** allows to attach multiple items */
+  /** If `true`, value must be an array and the dropdown will support multiple selections. */
   multiple: PropTypes.bool,
 
-  /** display input box search if true */
+  /** If `true`, display input box search. */
   allowSearch: PropTypes.bool,
 
-  /** show checkbox in each dropdown item */
+  /** If `true`, show checkbox in each dropdown item. */
   selectBox: PropTypes.bool,
 
-  /** an object default for value (use for load more) */
+  /** An object default for value (use for load more). */
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
-  /** style inline for dropdown */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** props of input in Dropdown component */
+  /** Attributes applied to the input element. */
   inputProps: PropTypes.object,
 
-  /** style inline of input in Dropdown component */
+  /**  Style inline of input element. */
   inputStyle: PropTypes.object,
 
-  /** style inline of box contain input and icon in Dropdown component */
+  /**  Style inline of box contain input and icon. */
   formStyle: PropTypes.object,
 
-  /** style inline of label in Dropdown component */
+  /**  Style inline of label. */
   labelProps: PropTypes.object,
 
-  /** style inline of error in Dropdown component */
+  /**  Style inline of error. */
   errorStyle: PropTypes.object,
 
-  /** style inline of dropdown items in Dropdown component */
+  /**  Style inline of dropdown items. */
   dropdownItemStyle: PropTypes.object,
 
-  /** The array of elements that appear in the dropdown */
+  /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(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)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
-  /** the function will run when key down input */
+  /** Callback fired when key down input */
   onKeyDown: PropTypes.func,
 
-  /** the function will run when select or remove one item */
+  /** Callback fired when the value changes. */
   onChange: PropTypes.func,
 
-  /** the function will run when scroll near the end */
+  /** Callback fired when scroll near the end. */
   onLoadMore: PropTypes.func,
 
-  /** the function will run when dropdown closed */
+  /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
 
-  /** the contents in Dropdown box (Exp: TreeView) */
+  /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)