diginet-core-ui 1.3.85 → 1.3.86

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

@@ -1,54 +1,49 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { Fragment, memo, useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
-import ReactDOM from 'react-dom';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from "../../";
-import { mapParent, randomString, updatePosition } from "../../../utils";
+import { css, jsx } from '@emotion/core';
+import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, TreeView, Typography } from "../..";
 import { getGlobal } from "../../../global";
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexColReverse, flexRow, flexWrap, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone } from "../../../styles/general";
-import isMobile from "../../../utils/isMobile";
-import theme from "../../../theme/settings";
-import Avatar from "../../avatar";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
+import { bgColor, bgTransparent, border, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexColReverse, flexRow, flexWrap, inset, insetX, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone, z } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames, isMobile, mapParent, randomString, refType as ref, updatePosition } from "../../../utils";
 const {
   colors: {
     system: {
-      active,
+      active: systemActive,
       disabled: systemDisabled,
-      rest,
-      white
+      rest: systemRest,
+      white: systemWhite
     },
     semantic: {
-      danger
+      danger: semanticDanger
     },
     fill: {
-      hover,
-      'scrollbar-tabbar': scrollbar
+      hover: fillHover,
+      'scrollbar-tabbar': fillScrollbar
     },
     line: {
-      focus
+      focus: lineFocus
     },
     text: {
-      main,
-      sub
+      main: textMain,
+      sub: textSub
     }
   },
   typography: {
-    paragraph1,
-    paragraph3
+    paragraph1
   },
-  spacing,
-  zIndex: zIndexCORE
-} = theme;
+  spacing
+} = useTheme();
 const timing = {},
   currentValue = {},
   currentObjectDefault = {},
   isSearch = {},
   allValue = {};
 const separatorPattern = /\{\w+\}/g;
-const regexBetween = /[^{\}]+(?=})/g; // eslint-disable-line
+const regexBetween = /[^{}]+(?=})/g;
 const regexInclude = /{|}/g;
 const checkHasValue = value => {
   return Array.isArray(value) ? value.length > 0 : value === 0 || !!value;
@@ -60,61 +55,59 @@ const convertData = (dt, valueExpr) => {
   return valueTemp;
 };
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  viewType,
-  itemMode,
-  required,
+  allowSearch,
+  children,
   className,
-  label,
-  defaultValue,
-  value: valueProp,
-  searchDelayTime,
-  limit,
-  total,
-  placeholder,
-  error,
-  displayExpr,
-  subText,
-  valueExpr,
-  noDataText,
-  iconDefault,
-  iconExpr,
-  treeViewID,
-  treeViewParentID,
   clearAble,
   closeAfterSelect,
+  dataSource,
+  defaultValue,
   disabled,
-  readOnly,
-  multiple,
-  allowSearch,
-  selectBox,
+  displayExpr,
+  dropdownItemStyle,
+  error,
+  helperTextProps,
+  iconExpr,
+  inputProps,
+  inputStyle,
+  itemMode,
+  label,
+  labelProps,
+  limit,
   loading,
-  dataSource,
-  onKeyDown,
-  onInput,
+  maximumSelectionLength,
+  multilineSelectedItem,
+  multiple,
+  noDataText,
   onChange,
-  onLoadMore,
   onClosed,
+  onInput,
+  onKeyDown,
+  onLoadMore,
+  placeholder,
+  readOnly,
   renderItem,
   renderSelectedItem,
-  valueObjectDefault,
-  style,
-  inputProps,
-  inputStyle,
-  formStyle,
-  labelProps,
-  errorStyle,
-  children,
-  dropdownItemStyle,
+  required,
+  searchDelayTime,
   searchExpr,
   searchMode,
-  maximumSelectionLength,
-  multilineSelectedItem
+  selectBox,
+  style,
+  subText,
+  total,
+  treeViewID,
+  treeViewParentID,
+  value: valueProp,
+  valueExpr,
+  valueObjectDefault,
+  viewType
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (multiple && selectBox === undefined) selectBox = true;
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
   const ref = useRef(null);
   const dropdownRef = useRef(null);
-  const loadingProgressRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
   const inputRef = useRef(null);
@@ -141,12 +134,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [valueMulti, setValueMulti] = useState(valueTemp);
   const _isMobile = isMobile.any();
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
-  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, typeof renderSelectedItem === 'function', disabled);
-  const _IconCSS = IconCSS(viewType, loading, showClear);
+  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly);
+  const _IconCSS = IconCSS(viewType);
   const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, placeholder, _DropdownInputCSS.name);
   const _DropdownListCSS = DropdownListCSS(loading);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
-  const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _IconCSS.name, _DropdownInputCSS.name);
+  const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
 
   /* Start handler */
   const triggerInput = e => {
@@ -175,26 +168,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (disabled || readOnly || loading) return;
     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 ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
-          var _inputRef$current$chi;
-          inputRef.current.innerHTML = inputRef.current.textContent.trim();
-          // if (!allowSearch) inputRef.current.contentEditable = true;
-          const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
-          const range = document.createRange();
-          range.setStart(inputRef.current, caret);
-          range.setEnd(inputRef.current, caret);
-          const sel = window.getSelection();
-          sel.removeAllRanges();
-          sel.addRange(range);
-        }
         setOpenState(true);
       }
-    } else if (multiple || itemMode === 'treeview') {
-      if (searchRef.current) {
-        searchRef.current.focus();
-      } else if (children && dropdownListRef.current && dropdownListRef.current.querySelector('input')) {
-        dropdownListRef.current.querySelector('input').focus();
-      }
     }
   };
   const onClickOutsideOfInput = event => {
@@ -213,7 +188,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const dropdown = children ? jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
-      className: 'DGN-Dropdown-List'
+      className: 'DGN-Dropdown-List',
+      onKeyDown: moveOnItem,
+      tabIndex: -1
     }, dataSource !== null && dataSource !== void 0 && dataSource.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown(null, keyArr) : mapTreeView();
     const {
       innerHeight
@@ -241,7 +218,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _DropdownCSS,
       ref: dropdownRef,
       className: `DGN-UI-Portal DGN-Dropdown-${unique}`
-    }, (multiple || allowSearch) && itemMode === 'normal' && !children && jsx("div", {
+    }, (multiple || allowSearch) && itemMode === 'normal' && !children ? jsx("div", {
       className: 'DGN-Dropdown-Search'
     }, jsx(InputBase, {
       inputRef: searchRef,
@@ -253,19 +230,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       onKeyDown: pressESCHandler,
       autoFocus: true
-    })), multiple && maximumSelectionLength && jsx(Typography, {
+    })) : null, multiple && maximumSelectionLength ? jsx(Typography, {
       style: {
         padding: spacing([2, 4])
       }
-    }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength), jsx("div", {
+    }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength) : null, jsx("div", {
       className: 'DGN-Dropdown-Box'
-    }, dropdown), loading && jsx("div", {
+    }, dropdown), loading ? jsx("div", {
       css: LoadingProgressCSS,
-      ref: loadingProgressRef,
       className: 'DGN-Dropdown-Loading-Progress'
     }, jsx(CircularProgress, {
-      size: 'xs'
-    })));
+      size: 24
+    })) : null);
     if (!((multiple || allowSearch) && itemMode === 'normal' && !children)) {
       inputRef.current.addEventListener('keydown', pressESCHandler);
     }
@@ -274,7 +250,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
-      dropdownListRef.current && dropdownListRef.current.addEventListener('keydown', moveOnItem);
       if (onLoadMore && dataSource.length < total) {
         dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
@@ -320,15 +295,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const closeDropdown = () => {
     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);
@@ -337,12 +303,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
         dropdownListRef.current = null;
       }
-      // if (!multiple) {
-      //     inputRef.current.removeEventListener('keydown', pressESCHandler);
-      //     inputRef.current.removeEventListener('input', onChangeInput);
-      // }
     }
-
     document.documentElement.style.overflow = 'auto';
     if (searchRef.current) lastSearchRef.current = '';
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
@@ -358,7 +319,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       (_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(() => {
-        dropdownListRef.current && dropdownListRef.current.addEventListener('keydown', moveOnItem);
         if (onLoadMore && dataSource.length < total) {
           dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
         }
@@ -367,10 +327,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const handleRenderBySearch = (data, searchValue) => {
-    let existExpr = [];
+    let existExpr;
     typeof data === 'object' ? existExpr = searchExpr.filter(value => Object.keys(data).includes(value)) : existExpr = [data];
     return existExpr.every(key => {
-      // return searchByMode(data?.[key] || key.toString(), searchValue);
       const _data = (data === null || data === void 0 ? void 0 : data[key]) || key.toString();
       if (searchMode === 'contains') {
         if (_data.indexOf(searchValue) !== -1) return false;
@@ -379,7 +338,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (_data.lastIndexOf(searchValue) === 0) return false;
       }
       if (searchMode === 'equals') {
-        if (_data == searchValue) return false;
+        if (_data === searchValue) return false;
       }
       return true;
     });
@@ -419,10 +378,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           index
         });
       } else if (subText) {
-        displayText = jsx(Fragment, null, jsx("span", {
-          className: 'DGN-UI-Dropdown-PrimaryText'
-        }, displayText), jsx("span", {
-          className: 'DGN-UI-Dropdown-SubText'
+        displayText = jsx(Fragment, null, jsx(Typography, {
+          className: 'DGN-UI-Dropdown-PrimaryText',
+          type: 'p1'
+        }, displayText), jsx(Typography, {
+          className: 'DGN-UI-Dropdown-SubText',
+          type: 'p3',
+          color: textSub
         }, typeof subText === 'function' ? subText({
           data,
           index
@@ -431,6 +393,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const value = typeof data === 'object' ? data[valueExpr] : data;
       let itemDisabled = typeof data === 'object' ? data['disabled'] : false;
       const icon = getIconFromData(data);
+      const text = jsx(Typography, {
+        type: 'p1'
+      }, displayText);
       if (multiple && selectBox) {
         const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
         const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
@@ -453,19 +418,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
           tabIndex: -1
         }, jsx(Checkbox, {
+          css: CheckBoxCSS,
           forTreeView: true,
           checked: checked,
-          style: {
-            width: '100%',
-            height: '100%',
-            padding: '0 16px'
-          },
           value: value,
           disabled: itemDisabled,
           onChange: () => onChangeValue(displayText, value, icon, data, index)
-        }, icon && icon, jsx("div", {
-          css: DropdownTextCSS
-        }, displayText))));
+        }, icon, text)));
       } else {
         items.push(jsx("div", {
           key: index,
@@ -481,30 +440,24 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           },
           tabIndex: -1,
           style: dropdownItemStyle
-        }, icon && icon, jsx("div", {
-          css: DropdownTextCSS
-        }, displayText)));
+        }, icon, text));
       }
-      // if (items?.length === limit) {
-      //     timerRef.current = setTimeout(() => {
-      //         loadMoreItemsDropdown(index + 1, pattern);
-      //     }, 1000);
-      //     break;
-      // }
     }
-
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
-      className: 'DGN-Dropdown-List'
+      className: 'DGN-Dropdown-List',
+      onKeyDown: moveOnItem,
+      tabIndex: -1
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
   const mapTreeView = () => {
-    // if (!treeView[unique]) {
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
-      className: 'DGN-Dropdown-List'
+      className: 'DGN-Dropdown-List',
+      onKeyDown: moveOnItem,
+      tabIndex: -1
     }, dataSource !== null && dataSource !== void 0 && dataSource.length ? jsx(TreeView, {
       dataSource: dataSource,
       displayExpr: displayExpr,
@@ -523,10 +476,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange: (e, value) => onChangeValue('', multiple ? value : e.value),
       renderItem: renderItem
     }) : EmptyDataText);
-    // }
-    // return treeView[unique];
   };
-
   const loadMoreItemsDropdown = (i = 0, pattern) => {
     var _currentObjectDefault2, _displayExpr3;
     const dataSourceUsable = [...dataSource];
@@ -557,16 +507,22 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
       const value = typeof data === 'object' ? data[valueExpr] : data;
       const icon = getIconFromData(data);
+      const text = jsx(Typography, {
+        type: 'p1'
+      }, displayText);
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
           data,
           index: i
         });
       } else if (subText) {
-        displayText = jsx(Fragment, null, jsx("span", {
-          className: 'DGN-UI-Dropdown-PrimaryText'
-        }, displayText), jsx("span", {
-          className: 'DGN-UI-Dropdown-SubText'
+        displayText = jsx(Fragment, null, jsx(Typography, {
+          className: 'DGN-UI-Dropdown-PrimaryText',
+          type: 'p1'
+        }, displayText), jsx(Typography, {
+          className: 'DGN-UI-Dropdown-SubText',
+          type: 'p3',
+          color: textSub
         }, typeof subText === 'function' ? subText({
           data,
           index: i
@@ -583,20 +539,12 @@ 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, {
+          css: CheckBoxCSS,
           forTreeView: true,
-          checked: checked,
-          style: {
-            width: '100%',
-            height: '100%',
-            padding: '0 16px'
-          }
-        }, icon && icon, jsx("div", {
-          css: DropdownTextCSS
-        }, displayText));
+          checked: checked
+        }, icon, text);
       } else {
-        item = jsx(Fragment, null, icon && icon, jsx("div", {
-          css: DropdownTextCSS
-        }, displayText));
+        item = jsx(Fragment, null, icon, text);
       }
       if (!dropdownListRef.current) {
         return;
@@ -622,7 +570,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const getIconFromData = (data, insideChip = false) => {
     if (!iconExpr || iconExpr === 'none') return null;
-    let _src = iconDefault;
+    let _src;
     if (typeof iconExpr === 'string') _src = data[iconExpr];else {
       let prefix = iconExpr.prefix || '';
       const suffix = iconExpr.suffix || '';
@@ -723,10 +671,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (timing[unique]) clearTimeout(timing[unique]);
     timing[unique] = setTimeout(() => {
       var _searchExpr2;
-      // if (timerRef.current) {
-      //     clearTimeout(timerRef.current);
-      //     timerRef.current = null;
-      // }
       renderDropdown(((_searchExpr2 = searchExpr) === null || _searchExpr2 === void 0 ? void 0 : _searchExpr2.length) > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
     }, timeout.current || searchDelayTime);
   };
@@ -746,10 +690,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       const newValueArr = [...currentValue[unique]];
-      const newValueArrState = [...valueMulti];
+      // const newValueArrState = [...valueMulti];
       if (!currentValue[unique].some(v => JSON.stringify(v) === JSON.stringify(value))) {
         newValueArr.push(value);
-        newValueArrState.push(value);
+        // newValueArrState.push(value);
         // if (valueProp === undefined) {
         //     let item = null;
         //     if (typeof renderSelectedItem === 'function') {
@@ -775,16 +719,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else {
         const index = newValueArr.indexOf(value);
         newValueArr.splice(index, 1);
-        newValueArrState.splice(index, 1);
+        // newValueArrState.splice(index, 1);
         // if (valueProp === undefined) {
         //     const nodes = inputRef.current.querySelectorAll('.dropdown-item');
         //     nodes[index]?.remove();
         // }
       }
-
-      setValueMulti(newValueArrState);
+      // setValueMulti(newValueArrState);
       !!onChange && onChange({
-        value: newValueArrState,
+        value: newValueArr,
         data
       });
       setTimeout(() => {
@@ -1098,15 +1041,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
     if (!readOnly && !disabled) {
-      inputRef.current.addEventListener('click', onClickInput);
-      inputRef.current.addEventListener('input', onChangeInput);
       !!onLoadMore && dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
     }
-    // else {
-    //     if (multiple || allowSearch) {
-    //         inputRef.current.contentEditable = false;
-    //     }
-    // }
     if (disabled || readOnly || children) {
       inputRef.current.addEventListener('keydown', onPreventKeyDownHandler);
     } else {
@@ -1114,15 +1050,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     return () => {
       if (!ref.current || !inputRef.current || !iconRef.current) return;
-      if (!readOnly && !disabled) {
-        inputRef.current.removeEventListener('click', onClickInput);
-        inputRef.current.removeEventListener('input', onChangeInput);
-      }
-      // else {
-      //     if (multiple && !allowSearch) {
-      //         inputRef.current.contentEditable = true;
-      //     }
-      // }
       if (disabled || readOnly || children) {
         inputRef.current.removeEventListener('keydown', onPreventKeyDownHandler);
       } else {
@@ -1178,7 +1105,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const EmptyDataText = jsx("div", {
     css: _DropdownItemCSS,
     className: 'no-data'
-  }, ' ', noDataText, ' ');
+  }, noDataText);
   const LabelView = useMemo(() => label ? jsx(Label, {
     required: required,
     disabled: disabled,
@@ -1199,21 +1126,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: _DropdownFormCSS,
       ref: formRef,
-      className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
-      style: formStyle
+      className: classNames('DGN-UI-Dropdown-Form', openState && 'dropdown-showing')
     }, jsx("div", {
       css: _InputCSS,
       className: 'DGN-UI-Dropdown-Form-Input'
     }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", {
       ...inputProps,
       style: {
-        cursor: 'text',
         gap: spacing(0.5),
         ...inputStyle
       },
       ref: inputRef,
       css: _DropdownInputCSS,
-      className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
+      className: classNames('dgn-dropdown-multiple', inputProps.className),
       onChange: e => {
         e.preventDefault();
         return false;
@@ -1234,7 +1159,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
         text = (_mask = mask) === null || _mask === void 0 ? void 0 : _mask.replace(regexInclude, '');
       }
-      let item = null;
+      let item;
       if (typeof renderSelectedItem === 'function') {
         item = renderSelectedItem({
           data,
@@ -1254,11 +1179,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return item;
     })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
       ...inputProps,
-      // contentEditable={!disabled && !allowSearch}
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
-      className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
+      className: classNames('dgn-dropdown-multiple', inputProps.className),
       onKeyDown: e => {
         if (e.key === 'Enter') {
           e.preventDefault();
@@ -1272,7 +1196,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       lineClamp: multilineSelectedItem ? undefined : 1,
       type: 'p1',
       style: {
-        lineHeight: '24px'
+        lineHeight: multiple ? '30px' : '24px'
       },
       onClick: onClickInput,
       tabIndex: -1
@@ -1280,17 +1204,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
-    }, jsx("span", {
-      className: 'dgn-dropdown-loading'
-    }, jsx(CircularProgress, {
-      width: 24,
-      strokeWidth: 2
-    })), jsx(ButtonIcon, {
+    }, loading ? jsx(CircularProgress, {
+      size: 24
+    }) : null, showClear ? jsx(ButtonIcon, {
+      css: mgr([1]),
       viewType: 'ghost',
       name: 'Close',
-      className: 'icon-close',
       onClick: onClear
-    }), !loading && jsx(ButtonIcon, {
+    }) : null, !loading ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: 'ArrowDown',
       className: 'icon-dropdown',
@@ -1299,125 +1220,117 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         transition: 'transform 0.5s'
       },
       disabled: disabled || readOnly
-    })));
-  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, dataSource, valueObjectDefault, valueExpr, displayExpr, multilineSelectedItem, openState, showClear, textValue, valueMulti]);
-  const ErrorView = useMemo(() => error && jsx(HelperText, {
-    disabled: disabled,
-    style: {
-      minHeight: '16px',
-      position: 'absolute',
-      top: '100%',
-      ...errorStyle
-    }
-  }, error), [error, disabled, errorStyle]);
+    }) : null));
+  }, [openState, showClear, textValue, valueMulti, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, loading, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const DropdownView = useMemo(() => {
     return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
-  }, [openState, valueMulti, dataSource, loading, multiple, selectBox, maximumSelectionLength, multilineSelectedItem]);
+  }, [openState, valueMulti, dataSource, loading, maximumSelectionLength, multilineSelectedItem, multiple, selectBox]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     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, ' ')
+    className: classNames('DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
   }, LabelView, InputView, ErrorView), DropdownView);
 }));
 
 /* Start styled */
 const InputCSS = (multiple, renderSelectedItem) => css`
-    ${flexRow};
+    ${displayFlex};
     ${positionRelative};
-    width: 100%;
-    ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
+    ${parseWidth(!multiple && renderSelectedItem ? 'calc(100% - 34px)' : '100%')};
 `;
-const DropdownInputCSS = (viewType, multiple, placeholder, renderSelectedItem, disabled) => css`
-    ${flexRow};
-    ${alignCenter};
+const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) => css`
+    ${displayFlex};
+    ${itemsCenter};
     ${outlineNone};
-    ${backgroundTransparent};
+    ${bgTransparent};
     ${borderNone};
     ${paragraph1};
-    width: 100%;
-    color: ${main};
-    padding-top: 0;
-    padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
-    padding-left: ${viewType !== 'outlined' ? 0 : spacing([4])};
-    min-height: ${multiple ? 30 : 24}px;
+    ${disabled ? cursorNotAllowed : readOnly ? cursorDefault : cursorPointer};
+    ${parseWidth('100%')};
+    color: ${textMain};
+    ${pdt(0)};
+    ${pdb([viewType !== 'outlined' ? 0 : 'inherit'])};
+    ${pdl([viewType !== 'outlined' ? 0 : 4])};
+    ${parseMinHeight(multiple ? 30 : 24)};
     &.dgn-dropdown-multiple {
+        ${displayFlex};
         ${flexWrap};
         ${overflowHidden};
         ${breakWord};
-        ${!multiple ? 'min-height: 24px; max-width: 100%;' : ''}
+        ${!multiple && `
+            ${parseMinHeight(24)}; 
+            ${parseMaxWidth('100%')};
+        `};
         &::after {
+            ${displayFlex};
             ${flexRow};
             ${positionAbsolute};
-            ${alignCenter};
+            ${itemsCenter};
             ${justifyCenter};
             content: '${placeholder}';
-            color: ${sub};
+            color: ${textSub};
         }
         &:not(:empty)::after {
             visibility: hidden;
         }
     }
     &:focus {
-        ${backgroundTransparent};
+        ${bgTransparent};
     }
     .dropdown-item {
         &:not(:last-child) {
-            margin-right: 5px;
+            ${mgr([1.25])};
         }
         svg {
-            ${borderBox};
-            padding: 2px;
+            ${boxBorder};
+            ${pd([0.5])};
         }
     }
     .DGN-UI-Typography {
-        ${disabled && `
-            color: ${systemDisabled}
-        `}
+        ${disabled && `color: ${systemDisabled}`};
     }
 `;
-const IconCSS = (viewType, loading, showClear) => css`
-    ${flexRow};
-    ${alignCenter};
-    margin-left: ${spacing([2])};
-    margin-right: ${viewType !== 'outlined' ? 0 : spacing([4])};
-    color: inherit;
-    .icon-close {
-        display: ${showClear ? 'flex' : 'none'};
-        margin-right: ${spacing([1])};
-    }
-    .dgn-dropdown-loading {
-        display: ${loading ? 'flex' : 'none'};
-    }
+const IconCSS = viewType => css`
+    ${displayFlex};
+    ${itemsCenter};
+    ${mgl([2])};
+    ${mgr([viewType !== 'outlined' ? 0 : 4])};
 `;
 const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInputCSSName) => viewType !== 'outlined' ? css`
+              ${displayFlex};
               ${flexRow};
-              ${alignCenter};
+              ${itemsCenter};
               ${positionRelative};
-              ${borderBox};
-              width: 100%;
-              padding-bottom: ${multiple ? 1 : 4}px;
-              padding-top: ${multiple ? 1 : 4}px;
+              ${boxBorder};
+              ${parseWidth('100%')};
+              ${pdy([multiple ? 0.25 : 1])};
               ${!disabled && `
                     &:not(:focus-within):hover {
                         &::before {
-                            border-bottom-color: ${active};
+                            border-bottom-color: ${systemActive};
                         }
                         .css-${DropdownInputCSSName} {
-                            color: ${active};
+                            color: ${systemActive};
                         }
                     }
               `}
               &:focus-within {
-                  border-bottom-color: ${focus};
+                  border-bottom-color: ${lineFocus};
                   &::after {
                       border-bottom-color: inherit;
                       transform: scaleX(1);
                   }
                   .css-${DropdownInputCSSName} {
-                      color: ${active};
+                      color: ${systemActive};
                   }
               }
               &.dropdown-showing {
@@ -1427,29 +1340,27 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               }
               span:empty:before {
                   content: '${placeholder}';
-                  color: ${sub};
-                  height: 100%;
-                  ${overflowHidden}
+                  ${parseHeight('100%')};
+                  ${overflowHidden};
+                  color: ${textSub};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  color: ${sub};
+                  color: ${textSub};
               }
               &::before {
                   ${positionAbsolute};
                   content: '';
-                  left: 0;
-                  right: 0;
+                  ${insetX(0)};
                   bottom: 0;
-                  ${viewType === 'underlined' && `border-bottom: 1px solid ${disabled ? systemDisabled : rest};`}
+                  ${viewType === 'underlined' && `border-bottom: 1px solid ${disabled ? systemDisabled : systemRest};`}
               }
               &::after {
                   ${positionAbsolute};
                   content: '';
-                  left: 0px;
-                  right: 0px;
+                  ${insetX(0)};
                   bottom: -1px;
                   border-bottom: 2px solid transparent;
                   transform: scaleX(0);
@@ -1457,25 +1368,27 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   transition: all 0.2s ease;
               }
           ` : css`
+              ${displayFlex};
               ${flexRow};
-              ${alignCenter};
+              ${itemsCenter};
               ${positionRelative};
               ${borderRadius4px};
-              ${borderBox};
-              ${border(1, disabled ? systemDisabled : rest)};
-              width: 100%;
-              min-height: 40px;
+              ${boxBorder};
+              ${border(1, disabled ? systemDisabled : systemRest)};
+              ${parseWidth('100%')};
+              ${parseMinHeight(40)};
+              ${mgt([0.5])};
               ${!disabled && `
                 &:not(:focus-within):hover {
-                    background-color: ${hover};
-                    border-color: ${active};
+                    ${bgColor(fillHover)};
+                    border-color: ${systemActive};
                     input {
-                        background-color: ${hover};
+                        ${bgColor(fillHover)};
                     }
                 }
               `}
               &:focus-within {
-                  border-color: ${focus};
+                  border-color: ${lineFocus};
               }
               &.dropdown-showing {
                   .icon-dropdown {
@@ -1484,107 +1397,91 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               }
               span:empty:before {
                   content: '${placeholder}';
-                  color: ${sub};
-                  height: 100%;
-                  ${overflowHidden}
+                  ${parseHeight('100%')};
+                  ${overflowHidden};
+                  color: ${textSub};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  color: ${sub};
+                  color: ${textSub};
               }
               &::after {
                   ${positionAbsolute};
                   ${pointerEventsNone};
                   ${borderRadius4px};
+                  ${border(2, 'transparent')};
+                  ${inset(-2)};
                   content: '';
-                  left: -2px;
-                  right: -2px;
-                  top: -2px;
-                  bottom: -2px;
-                  border: 2px solid transparent;
               }
           `;
 const DropdownListCSS = loading => css`
     ${displayBlock};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${borderRadius4px};
-    width: 100%;
-    max-height: 280px;
+    ${parseWidth('100%')};
+    ${parseMaxHeight(280)};
     ${loading ? overflowHidden : overflowAuto};
-    background-color: ${white};
+    ${bgColor(systemWhite)};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    z-index: ${zIndexCORE(1)};
+    ${z(1)};
     &::-webkit-scrollbar {
         ${borderRadius4px};
         ${parseWidth(24)};
-        background-color: ${white} !important;
+        background-color: ${systemWhite} !important;
     }
     &::-webkit-scrollbar-thumb {
-        border-radius: 24px;
-        border: 8px solid transparent;
+        ${borderRadius(24)};
+        ${border(8, 'transparent')};
         mix-blend-mode: normal;
-        background-color: ${scrollbar} !important;
+        background-color: ${fillScrollbar} !important;
         background-clip: content-box;
     }
     .DGN-UI-TreeView {
-        padding: 1px;
+        ${pd([0.25])};
     }
 `;
 const DropdownItemCSS = (multiple, selectBox) => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyStart};
-    ${borderBox};
+    ${boxBorder};
     ${cursorPointer};
     ${userSelectNone};
-    min-height: 40px;
-    width: 100%;
-    background-color: ${white};
-    padding: ${spacing([2, multiple && selectBox ? 0 : 4])};
-    padding: 8px ${multiple && selectBox ? 0 : '16px'};
-    color: ${main};
+    ${parseMinHeight(40)};
+    ${parseWidth('100%')};
+    ${bgColor(systemWhite)};
+    ${pd([2, multiple && selectBox ? 0 : 4])};
+    color: ${textMain};
     &.no-data {
         ${justifyCenter};
+        ${cursorDefault};
         font-style: italic;
-        cursor: initial;
     }
     &:not(.no-data):hover,
     &:not(.no-data):focus {
         ${outlineNone};
-        background-color: ${hover};
-        color: ${active};
+        ${bgColor(fillHover)};
+        color: ${systemActive};
     }
 `;
-const DropdownTextCSS = css`
-    ${paragraph1};
-    color: inherit;
-    .DGN-UI-Dropdown-PrimaryText {
-        ${paragraph1};
-        ${displayBlock};
-    }
-    .DGN-UI-Dropdown-SubText {
-        ${paragraph3};
-        ${displayBlock};
-        color: ${sub};
-    }
-`;
-const DropdownRootCSS = (DropdownFormCSSName, IconCSSName, DropdownInputCSSName) => css`
+const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
     ${displayBlock};
     ${positionRelative};
-    margin-bottom: 20px;
-    height: max-content;
+    ${mgb([5])};
+    ${parseHeight('max-content')};
     &.error {
         .css-${DropdownFormCSSName} {
-            border-color: ${danger};
+            border-color: ${semanticDanger};
             path {
-                fill: ${danger};
+                fill: ${semanticDanger};
             }
             &::before {
-                border-color: ${danger};
+                border-color: ${semanticDanger};
             }
         }
     }
@@ -1592,20 +1489,12 @@ const DropdownRootCSS = (DropdownFormCSSName, IconCSSName, DropdownInputCSSName)
     &.disabled {
         .css-${DropdownFormCSSName} {
             border-color: ${systemDisabled};
-            .css-${IconCSSName} {
-                path {
-                    fill: transparent;
-                }
-            }
             &::before {
                 border-color: ${systemDisabled};
             }
         }
     }
     &.readOnly {
-        .css-${IconCSSName} {
-            ${pointerEventsNone};
-        }
         .css-${DropdownInputCSSName} {
             .dropdown-item {
                 ${pointerEventsNone};
@@ -1618,81 +1507,91 @@ const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
     ${parseWidth(width)};
     top: ${top}px;
     left: ${left}px;
-    background-color: ${white};
-    z-index: ${zIndexCORE(1)};
+    ${bgColor(systemWhite)};
+    ${z(1)};
     ${isMobile && allowSearch && `
+        ${parseHeight('max-content')};
+        ${flexColReverse};
         bottom: 0;
         top: auto;
-        height: max-content;
-        ${flexColReverse.styles};
     `}
 `;
 const LoadingProgressCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${justifyCenter};
-    ${alignCenter};
+    ${itemsCenter};
     ${positionAbsolute};
     ${borderRadius4px};
     ${parseWidthHeight('100%')}
+    ${bgColor('rgba(255, 255, 255, 0.6)')};
+    ${z(2)};
     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;
 `;
+const CheckBoxCSS = css`
+    ${parseWidthHeight('100%')};
+    ${pd([0, 4])};
+`;
 /* End styled */
 
 Dropdown.defaultProps = {
-  viewType: 'underlined',
-  itemMode: 'normal',
+  allowSearch: true,
   className: '',
-  label: '',
-  placeholder: getGlobal('dropdownPlaceholder'),
+  clearAble: false,
+  dataSource: [],
+  disabled: false,
+  displayExpr: 'name',
   error: '',
   iconExpr: 'none',
-  valueExpr: 'id',
-  displayExpr: 'name',
-  noDataText: getGlobal('noDataText'),
-  skip: 0,
+  inputProps: {},
+  itemMode: 'normal',
+  label: '',
   limit: 50,
-  total: Number.MAX_SAFE_INTEGER,
-  clearAble: false,
   loading: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
+  multilineSelectedItem: false,
   multiple: false,
-  allowSearch: true,
-  inputProps: {},
-  formStyle: {},
-  dataSource: [],
+  noDataText: getGlobal('noDataText'),
   onInput: null,
+  placeholder: getGlobal('dropdownPlaceholder'),
+  readOnly: false,
+  required: false,
   searchMode: 'contains',
-  multilineSelectedItem: false
+  total: Number.MAX_SAFE_INTEGER,
+  valueExpr: 'id',
+  viewType: 'underlined'
 };
 Dropdown.propTypes = {
-  /**The variant to use. */
-  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
-  /** The mode of item when rendering. */
-  itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
+  /** If `true`, display input box search. */
+  allowSearch: PropTypes.bool,
+  /** The contents in Dropdown box (Exp: TreeView). */
+  children: PropTypes.node,
   /** Class for component. */
   className: PropTypes.string,
-  /** The label of the input. */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** The short hint displayed in the input before the user select a value. */
-  placeholder: PropTypes.string,
+  /** If `true`, display clear icon.*/
+  clearAble: PropTypes.bool,
+  /** If `true`, dropdown will close after select an item. */
+  closeAfterSelect: PropTypes.bool,
+  /** The array of elements that appear in the dropdown list. */
+  dataSource: PropTypes.array,
+  /** Default value displayed when first render. */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** 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]),
+  /**  Style inline of dropdown items. */
+  dropdownItemStyle: PropTypes.object,
   /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** 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'). */
-  treeViewParentID: PropTypes.string,
-  /** Specifies a text string shown when there is no data. */
-  noDataText: PropTypes.string,
-  /** The icon to display if not found the icon follow `iconExpr`. */
-  iconDefault: PropTypes.string,
+  /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
+  helperTextProps: PropTypes.object,
   /** Field name used for icon display.<br/>
    * Example:<br/>
    * &nbsp;&nbsp;string: 'icon'<br/>
@@ -1708,67 +1607,44 @@ Dropdown.propTypes = {
     suffix: PropTypes.string,
     style: PropTypes.object
   })]),
-  /** Default value displayed when first render. */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-  /** The displayed value of component. */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-  /** 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. */
-  subText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  /** 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.
-   */
-  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-  /** Number of items is ignored. */
-  skip: PropTypes.number,
-  /** Number of items that are rendered each time. */
-  limit: PropTypes.number,
-  /** The total number of items in the dropdown list. */
-  total: PropTypes.number,
-  /** If `true`, display clear icon.*/
-  clearAble: PropTypes.bool,
-  /** If true, the loading indicator is shown. */
-  loading: PropTypes.bool,
-  /** If true, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** If true, the component is read-only. */
-  readOnly: PropTypes.bool,
-  /** If `true`, dropdown will close after select an item. */
-  closeAfterSelect: PropTypes.bool,
-  /** If `true`, the label will indicate that the input is required. */
-  required: PropTypes.bool,
-  /** If `true`, value must be an array and the dropdown will support multiple selections. */
-  multiple: PropTypes.bool,
-  /** If `true`, display input box search. */
-  allowSearch: PropTypes.bool,
-  /** If `true`, show checkbox in each dropdown item. */
-  selectBox: PropTypes.bool,
-  /** An object default for value (use for load more). */
-  valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  /** Style inline of component. */
-  style: PropTypes.object,
   /** Attributes applied to the input element. */
   inputProps: PropTypes.object,
   /**  Style inline of input element. */
   inputStyle: PropTypes.object,
-  /**  Style inline of box contain input and icon. */
-  formStyle: PropTypes.object,
-  /**  Style inline of label. */
+  /** The mode of item when rendering. */
+  itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
+  /** The label of the input. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
   labelProps: PropTypes.object,
-  /**  Style inline of error. */
-  errorStyle: PropTypes.object,
-  /**  Style inline of dropdown items. */
-  dropdownItemStyle: PropTypes.object,
-  /** The array of elements that appear in the dropdown list. */
-  dataSource: PropTypes.array,
+  /** Number of items that are rendered each time. */
+  limit: PropTypes.number,
+  /** If `true`, the loading indicator is shown. */
+  loading: PropTypes.bool,
+  /** Set restrictions regarding the maximum number of options that can be selected. (Use with prop `multiple`) */
+  maximumSelectionLength: PropTypes.number,
+  /** If `true`, show multi-line selected item(s). */
+  multilineSelectedItem: PropTypes.bool,
+  /** If `true`, value must be an array and the dropdown will support multiple selections. */
+  multiple: PropTypes.bool,
+  /** Specifies a text string shown when there is no data. */
+  noDataText: PropTypes.string,
+  /** Callback fired when the value changes. */
+  onChange: PropTypes.func,
+  /** Callback fired when dropdown closed. */
+  onClosed: PropTypes.func,
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
+   */
+  onInput: PropTypes.func,
+  /** Callback fired when key down input */
+  onKeyDown: PropTypes.func,
+  /** Callback fired when scroll near the end. */
+  onLoadMore: PropTypes.func,
+  /** The short hint displayed in the input before the user select a value. */
+  placeholder: PropTypes.string,
+  /** If `true`, the component is read-only. */
+  readOnly: PropTypes.bool,
   /** Function displays items by custom.<br/>
    * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
    * --> such as: displayExpr={'name - role'}
@@ -1778,28 +1654,38 @@ Dropdown.propTypes = {
    * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** If `true`, the label will indicate that the input is required. */
+  required: PropTypes.bool,
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
-  onInput: PropTypes.func,
-  /** Callback fired when key down input */
-  onKeyDown: PropTypes.func,
-  /** Callback fired when the value changes. */
-  onChange: PropTypes.func,
-  /** Callback fired when scroll near the end. */
-  onLoadMore: PropTypes.func,
-  /** Callback fired when dropdown closed. */
-  onClosed: PropTypes.func,
-  /** The contents in Dropdown box (Exp: TreeView). */
-  children: PropTypes.node,
+  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
   searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   /** Specifies a comparison operation used to search items. */
   searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
-  /** Set restrictions regarding the maximum number of options that can be selected. (Use with prop `multiple`) */
-  maximumSelectionLength: PropTypes.number,
-  /** If `true`, show multi-line selected item(s). */
-  multilineSelectedItem: PropTypes.bool,
+  /** If `true`, show checkbox in each dropdown item. */
+  selectBox: PropTypes.bool,
+  /** Style inline of component. */
+  style: PropTypes.object,
+  /** Display sub content. */
+  subText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /** The total number of items in the dropdown list. */
+  total: PropTypes.number,
+  /** 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'). */
+  treeViewParentID: PropTypes.string,
+  /** The displayed value of component. */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  /** The field name used for the returned result. */
+  valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** An object default for value (use for load more). */
+  valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /**The variant to use. */
+  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
   /**
    * ref methods
    *
@@ -1814,8 +1700,6 @@ Dropdown.propTypes = {
    * * setValue(value): Set value of dropdown
    *  * @param {value} - string || number || array
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default Dropdown;