diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, TreeView, Typography } from "../..";
@@ -38,22 +39,25 @@ const {
   spacing
 } = useTheme();
 const timing = {},
-  currentValue = {},
-  currentObjectDefault = {},
-  isSearch = {},
-  allValue = {};
+      currentValue = {},
+      currentObjectDefault = {},
+      isSearch = {},
+      allValue = {};
 const separatorPattern = /\{\w+\}/g;
 const regexBetween = /[^{}]+(?=})/g;
 const regexInclude = /{|}/g;
+
 const checkHasValue = value => {
   return Array.isArray(value) ? value.length > 0 : value === 0 || !!value;
 };
+
 const convertData = (dt, valueExpr) => {
   let data = dt || [];
   let valueTemp = Array.isArray(data) ? data : [data];
   valueTemp = valueTemp.map(i => i[valueExpr] || i);
   return valueTemp;
 };
+
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   allowSearch,
   children,
@@ -125,26 +129,36 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
   const [textValue, setTextValue] = useState('');
-  let valueTemp = valueProp || defaultValue || [];
+  let valueTemp = valueProp || defaultValue || []; // only mode multi
 
-  // only mode multi
   if (multiple) {
     valueTemp = convertData(valueTemp, valueExpr);
   }
+
   const [valueMulti, setValueMulti] = useState(valueTemp);
+
   const _isMobile = isMobile.any();
+
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
+
   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, _DropdownInputCSS.name);
 
+  const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
   /* Start handler */
+
+
   const triggerInput = e => {
     const target = e.currentTarget;
     target.style.pointerEvents = 'none';
+
     if (!dropdownListRef.current) {
       onClickInput();
     } else {
@@ -152,38 +166,48 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         target: null
       });
     }
+
     setTimeout(() => {
       target.style.pointerEvents = null;
     }, 200);
   };
+
   const triggerBlur = (blur = true) => {
     if ((currentValue[unique] || currentValue[unique] === 0) && !multiple) {
       setValueIntoInput(currentValue[unique]);
     } else if (!multiple) {
       setValueIntoInput('');
     }
+
     !!blur && inputRef.current.blur();
   };
+
   const onClickInput = e => {
     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))) {
         setOpenState(true);
       }
     }
   };
+
   const onClickOutsideOfInput = event => {
     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);
     }
   };
+
   const showDropdown = () => {
     var _displayExpr, _searchRef$current;
+
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
     }
+
     const keyArr = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.match(separatorPattern);
     const dropdown = children ? jsx("div", {
       css: _DropdownListCSS,
@@ -200,11 +224,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       left,
       height,
       width
-    } = formRef.current.getBoundingClientRect();
+    } = formRef.current.getBoundingClientRect(); // Calculate to set position of Dropdown box
 
-    // Calculate to set position of Dropdown box
     const dropdownHeight = Math.min(Math.max(1, (itemMode === 'normal' ? dropdown.props.children : mapParent(dataSource, treeViewID, treeViewParentID)).length || 1), 7) * 40 + (multiple ? 43 : 0);
     let positionTop = top + height + 4;
+
     if (top + height + 4 + dropdownHeight + (allowSearch ? 40 : 0) > innerHeight) {
       if (top - dropdownHeight > 0) {
         positionTop = top - dropdownHeight;
@@ -212,8 +236,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         positionTop = innerHeight - dropdownHeight;
       }
     }
+
     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", {
       css: _DropdownCSS,
       ref: dropdownRef,
@@ -242,28 +269,34 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(CircularProgress, {
       size: 24
     })) : null);
+
     if (!((multiple || allowSearch) && itemMode === 'normal' && !children)) {
       inputRef.current.addEventListener('keydown', pressESCHandler);
     }
+
     document.documentElement.style.overflow = 'hidden';
     setTimeout(() => {
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
+
       if (onLoadMore && dataSource.length < total) {
         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;
+
       if (activeEl) {
         activeEl.focus();
         activeEl.scrollIntoView({
@@ -273,6 +306,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const pressESCHandler = e => {
     if (e.key === 'Escape' || e.key === 'Tab') {
       closeDropdown();
@@ -282,74 +316,94 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       dropdownListRef.current.firstChild.focus();
     }
   };
+
   const onWheelHandler = e => {
     var _dropdownRef$current;
+
     if (!dropdownRef.current) {
       document.removeEventListener('wheel', onWheelHandler);
       return;
     }
+
     if (!((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && _dropdownRef$current.contains(e.target))) {
       closeDropdown();
       triggerBlur();
     }
   };
+
   const closeDropdown = () => {
     if (dropdownRef.current) {
       setOpenState(false);
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
+
       if (onLoadMore && dropdownListRef.current) {
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
         dropdownListRef.current = null;
       }
     }
+
     document.documentElement.style.overflow = 'auto';
     if (searchRef.current) lastSearchRef.current = '';
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
+
   const renderDropdown = pattern => {
     var _displayExpr2;
+
     const keyArr = (_displayExpr2 = displayExpr) === null || _displayExpr2 === void 0 ? void 0 : _displayExpr2.match(separatorPattern);
     const dropdown = mapDropdown(pattern, keyArr);
     const el = document.createElement('div');
     el.className = `DGN-Dropdown-Box`;
+
     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(() => {
         if (onLoadMore && dataSource.length < total) {
           dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
         }
+
         updatePositionDropdown();
       }, 0);
     }
   };
+
   const handleRenderBySearch = (data, searchValue) => {
     let existExpr;
     typeof data === 'object' ? existExpr = searchExpr.filter(value => Object.keys(data).includes(value)) : existExpr = [data];
     return existExpr.every(key => {
       const _data = (data === null || data === void 0 ? void 0 : data[key]) || key.toString();
+
       if (searchMode === 'contains') {
         if (_data.indexOf(searchValue) !== -1) return false;
       }
+
       if (searchMode === 'startswith') {
         if (_data.lastIndexOf(searchValue) === 0) return false;
       }
+
       if (searchMode === 'equals') {
         if (_data === searchValue) return false;
       }
+
       return true;
     });
   };
+
   const mapDropdown = (pattern, keyArr) => {
     var _currentObjectDefault;
+
     const items = [];
     const dataSourceUsable = [...dataSource];
+
     if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
+
       for (let index = length - 1; index >= 0; index--) {
         if (!dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
           dataSourceUsable.unshift(currentObjectDefault[unique][index]);
@@ -358,20 +412,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           if (++existItemQuantity > limit) {
             continue;
           }
+
           currentObjectDefault[unique].splice(index, 1);
         }
       }
     }
+
     const length = dataSourceUsable.length;
+
     for (let index = 0; index < length; index++) {
       var _searchExpr;
+
       const data = dataSourceUsable[index];
       const itemHidden = typeof data === 'object' ? data['hidden'] : false;
       if (itemHidden) continue;
       let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
+
       if (((_searchExpr = searchExpr) === null || _searchExpr === void 0 ? void 0 : _searchExpr.length) > 0 && pattern) {
         if (handleRenderBySearch(data, pattern)) continue;
       } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
+
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
           data,
@@ -390,12 +450,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           index
         }) : data[subText] || subText));
       }
+
       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);
@@ -403,8 +465,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          className: 'DGN-UI-Dropdown-Item'
-          // onClick={() => {
+          className: 'DGN-UI-Dropdown-Item' // onClick={() => {
           // if (itemDisabled) return;
           // onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
           // onChangeValue(displayText, value, icon, data, index);
@@ -412,10 +473,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           ,
           onKeyPress: e => {
             if (itemDisabled) return;
-            if (e.key === 'Enter') e.currentTarget.firstChild.click();
-            // if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
+            if (e.key === 'Enter') e.currentTarget.firstChild.click(); // if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
-
           tabIndex: -1
         }, jsx(Checkbox, {
           css: CheckBoxCSS,
@@ -443,6 +502,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, icon, text));
       }
     }
+
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
@@ -451,6 +511,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tabIndex: -1
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
+
   const mapTreeView = () => {
     return jsx("div", {
       css: _DropdownListCSS,
@@ -477,13 +538,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       renderItem: renderItem
     }) : EmptyDataText);
   };
+
   const loadMoreItemsDropdown = (i = 0, pattern) => {
     var _currentObjectDefault2, _displayExpr3;
-    const dataSourceUsable = [...dataSource];
-    // Nếu có load more thì đẩy đội tượng mặc định lên đầu
+
+    const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
+
     let notExistItem = 0;
+
     if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
       const length = currentObjectDefault[unique].length;
+
       for (let index = length - 1; index >= 0; index--) {
         if (!dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
           notExistItem++;
@@ -491,17 +556,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     const length = dataSourceUsable.length;
     let num = 0;
+
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
     }
+
     const keyArr = (_displayExpr3 = displayExpr) === null || _displayExpr3 === void 0 ? void 0 : _displayExpr3.match(separatorPattern);
+
     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
+      const data = { ...dataSourceUsable[i]
+      }; // Nếu đối tượng đã được hiển thị ở trên rồi thì không hiển thị ra nữa
+
       if (onLoadMore && i > notExistItem && currentObjectDefault[unique].some(valueObject => valueObject[valueExpr] === data[valueExpr])) continue;
       let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
       if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
@@ -510,6 +578,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const text = jsx(Typography, {
         type: 'p1'
       }, displayText);
+
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
           data,
@@ -528,6 +597,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           index: i
         }) : data[subText] || subText));
       }
+
       const dropdownItem = document.createElement('div');
       dropdownItem.className = `DGN-UI-Dropdown-Item css-${_DropdownItemCSS.name}`;
       dropdownItem.tabIndex = -1;
@@ -536,6 +606,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (e.key === 'Enter') dropdownItem.firstChild.click();
       });
       let item = null;
+
       if (multiple && selectBox) {
         const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         item = jsx(Checkbox, {
@@ -546,10 +617,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else {
         item = jsx(Fragment, null, icon, text);
       }
+
       if (!dropdownListRef.current) {
         return;
       }
+
       ReactDOM.render(item, dropdownListRef.current.appendChild(dropdownItem));
+
       if (++num === 100) {
         timerRef.current = setTimeout(() => {
           loadMoreItemsDropdown(i + 1, pattern);
@@ -558,26 +632,34 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const renderData = (data, keyArr) => {
     const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
     const separatorArr = displayExpr.split(new RegExp(pattern));
     let str = '';
     let i = 0;
+
     for (i; i < keyArr.length; i++) {
       str += separatorArr[i] + (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
     }
+
     return str + separatorArr[i];
   };
+
   const getIconFromData = (data, insideChip = false) => {
     if (!iconExpr || iconExpr === 'none') return null;
+
     let _src;
+
     if (typeof iconExpr === 'string') _src = data[iconExpr];else {
       let prefix = iconExpr.prefix || '';
       const suffix = iconExpr.suffix || '';
       const url = data[iconExpr.key];
+
       if (prefix && /^http/i.test(prefix) && /^http/i.test(url)) {
         prefix = '';
       }
+
       _src = prefix + url + suffix;
     }
     return jsx(Avatar, {
@@ -585,45 +667,55 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       src: _src,
       width: insideChip ? 20 : 24,
       height: insideChip ? 20 : 24,
-      style: {
-        ...iconExpr.style,
+      style: { ...iconExpr.style,
         marginRight: spacing([insideChip ? 0 : 2])
       }
     });
   };
+
   const customizeWidthDropdown = () => {
     if (dropdownListRef.current && _isMobile) dropdownListRef.current.style.maxHeight = `${Math.min(280, window.innerHeight) - (allowSearch ? 40 : 0)}px`;
+
     if (!ref.current) {
       window.removeEventListener('resize', customizeWidthDropdown);
       return;
     }
+
     const {
       width
     } = ref.current.getBoundingClientRect();
+
     if (dropdownRef.current) {
       dropdownRef.current.style.width = width + 'px';
     }
+
     updatePositionDropdown();
   };
+
   const updatePositionDropdown = () => {
     if (!formRef.current || !dropdownRef.current) {
       document.removeEventListener('wheel', onWheelHandler);
       return;
     }
+
     _isMobile ? updatePosition(formRef.current, dropdownRef.current, null) : updatePosition(formRef.current, dropdownRef.current, closeDropdown);
   };
+
   const onLoadMoreHandler = e => {
     if (loadMoreTimer.current) {
       clearTimeout(loadMoreTimer.current);
     }
+
     loadMoreTimer.current = setTimeout(() => {
       const {
         scrollTop,
         scrollHeight,
         offsetHeight
       } = e.target;
+
       if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
         var _dropdownListRef$curr4, _currentObjectDefault3;
+
         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({
@@ -633,47 +725,54 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     });
   };
+
   const onPreventKeyDownHandler = e => {
     e.preventDefault();
     return false;
   };
+
   const onChangeInput = e => {
     if (searchRef.current) lastSearchRef.current = searchRef.current.value;
     const dataFilter = getData();
     dataChoosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
+
     if (onInput) {
-      isSearch[unique] = true;
-      // const valueInput = e.target.value;
+      isSearch[unique] = true; // const valueInput = e.target.value;
       // const text = (valueInput || e.target.textContent).normalize();
+
       if (timeout.current) {
         if (timing[unique]) {
           clearTimeout(timing[unique]);
         }
+
         timing[unique] = setTimeout(() => {
           // e.target.value = text;
-          onInput(e);
-          // e.target.value = valueInput;
+          onInput(e); // e.target.value = valueInput;
         }, timeout.current || searchDelayTime);
       } else {
         // e.target.value = text;
-        onInput(e);
-        // e.target.value = valueInput;
+        onInput(e); // e.target.value = valueInput;
       }
 
       return;
     }
+
     const value = e.target.value || e.target.textContent;
+
     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);
     }
+
     if (timing[unique]) clearTimeout(timing[unique]);
     timing[unique] = setTimeout(() => {
       var _searchExpr2;
+
       renderDropdown(((_searchExpr2 = searchExpr) === null || _searchExpr2 === void 0 ? void 0 : _searchExpr2.length) > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
     }, timeout.current || searchDelayTime);
   };
+
   const onChangeValue = (displayText, value, icon, data) => {
     if (itemMode === 'treeview') {
       if (valueProp === undefined) {
@@ -681,6 +780,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         setValueIntoInput(value);
         setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
       }
+
       !!onChange && onChange({
         value
       });
@@ -689,11 +789,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, 0);
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
-      const newValueArr = [...currentValue[unique]];
-      // const newValueArrState = [...valueMulti];
+      const newValueArr = [...currentValue[unique]]; // const newValueArrState = [...valueMulti];
+
       if (!currentValue[unique].some(v => JSON.stringify(v) === JSON.stringify(value))) {
-        newValueArr.push(value);
-        // newValueArrState.push(value);
+        newValueArr.push(value); // newValueArrState.push(value);
         // if (valueProp === undefined) {
         //     let item = null;
         //     if (typeof renderSelectedItem === 'function') {
@@ -718,14 +817,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         // }
       } else {
         const index = newValueArr.indexOf(value);
-        newValueArr.splice(index, 1);
-        // newValueArrState.splice(index, 1);
+        newValueArr.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: newValueArr,
         data
@@ -735,12 +834,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, 0);
     } else {
       const isChanged = currentValue[unique] !== value;
+
       if (isChanged) {
         if (valueProp === undefined) {
           allValue[unique].push(value);
           setValueIntoInput(value);
           setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
         }
+
         !!onChange && onChange({
           value,
           data
@@ -750,6 +851,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         triggerBlur(false);
       }
     }
+
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     } else {
@@ -757,22 +859,22 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         updatePositionDropdown();
       }, 0);
     }
-  };
-
-  // const onChangeValueWithCheckbox = e => {
+  }; // const onChangeValueWithCheckbox = e => {
   //     const firstChild = e.currentTarget.firstChild;
   //     if (!firstChild.contains(e.target)) {
   //         firstChild.click();
   //     }
   // };
 
+
   const onRemove = (e, value) => {
     var _ref;
+
     if (readOnly || disabled) return;
     const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
+
     if (index !== -1) {
-      currentValue[unique].splice(index, 1);
-      // setTimeout(() => {
+      currentValue[unique].splice(index, 1); // setTimeout(() => {
       //     if (dropdownListRef.current && multiple && selectBox && !children) {
       //         const input = dropdownListRef.current.querySelector(`input[value="${value}"]`);
       //         if (input) {
@@ -785,9 +887,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // }, 0);
       // setValueMulti([...valueMulti]?.filter(i=>i!==value) || []);
       // !!onChange && onChange({ value: currentValue[unique], removed: value });
-    }
+    } // logic mới
+
 
-    // logic mới
     const newValueArrState = ((_ref = [...valueMulti]) === null || _ref === void 0 ? void 0 : _ref.filter(i => i !== value)) || [];
     setValueMulti(newValueArrState);
     !!onChange && onChange({
@@ -795,25 +897,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       removed: value
     });
   };
+
   const onClear = e => {
     if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
-    if (inputRef.current.tagName.toLowerCase() === 'div') {
-      // inputRef.current.innerHTML = '';
+
+    if (inputRef.current.tagName.toLowerCase() === 'div') {// inputRef.current.innerHTML = '';
       // if (dropdownListRef.current) {
       //     dropdownListRef.current.querySelectorAll('input').forEach(input => (input.checked = false));
       // }
     } else {
       inputRef.current.value = '';
       setTextValue('');
-    }
-    // onChangeValue('', '');
+    } // onChangeValue('', '');
+
+
     setValueMulti([]);
     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),
+    onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
       target: {
         value: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.value
       }
@@ -822,10 +925,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       value: currentValue[unique]
     });
   };
+
   const setPreviousValue = () => {
     allValue[unique].pop();
     setValueIntoInput(allValue[unique][allValue[unique].length - 1]);
   };
+
   const setValueIntoInput = source => {
     if (!source && source !== 0) {
       if (multiple) {
@@ -838,34 +943,45 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inputRef.current.value = '';
           setTextValue('');
         }
+
         currentValue[unique] = '';
       }
+
       return;
     }
+
     const length = dataSource.length;
     const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
+
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
     }
+
     const keyArr = displayKey === null || displayKey === void 0 ? void 0 : displayKey.match(separatorPattern);
+
     if (multiple) {
       let valueArr = source;
+
       if (!Array.isArray(valueArr)) {
         valueArr = [valueArr];
       }
+
       valueArr = [...new Set(valueArr)];
-      currentValue[unique] = [];
-      // inputRef.current.innerHTML = '';
+      currentValue[unique] = []; // inputRef.current.innerHTML = '';
+
       valueArr.forEach(v => {
         var _currentObjectDefault4;
+
         for (let i = 0; i < length; i++) {
           if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
             setMultipleValueHandler(dataSource[i], v, keyArr, i);
             return;
           }
         }
+
         if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
+
           if (itemOfValue) {
             setMultipleValueHandler(itemOfValue, v, keyArr);
           }
@@ -873,25 +989,31 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     } else {
       var _currentObjectDefault5;
+
       currentValue[unique] = source;
+
       for (let i = 0; i < length; i++) {
         if (dataSource[i][valueExpr] === source || dataSource[i] === source) {
           setSingleValueHandler(dataSource[i], keyArr);
           return;
         }
       }
+
       if ((_currentObjectDefault5 = currentObjectDefault[unique]) !== null && _currentObjectDefault5 !== void 0 && _currentObjectDefault5.length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
+
         if (itemOfValue) {
           setSingleValueHandler(itemOfValue, keyArr);
           return;
         }
       }
+
       if (!isSearch[unique]) {
         inputRef.current.value = source;
       }
     }
   };
+
   const setMultipleValueHandler = (data, value) => {
     // let item = null;
     // if (typeof renderSelectedItem === 'function') {
@@ -917,8 +1039,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // ReactDOM.render(item, inputRef.current.appendChild(el));
     currentValue[unique].push(value);
   };
+
   const setSingleValueHandler = (data, keyArr) => {
     const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
+
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
@@ -944,6 +1068,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setTextValue(text);
     }
   };
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
@@ -959,22 +1084,30 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (allValue[unique][allValue[unique].length - 1] !== value) {
           allValue[unique].push(value);
         }
+
         setValueIntoInput(value);
       }
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    // keep old method
+
+    currentRef.instance = _instance; // keep old method
+
     currentRef.closeDropdown = () => closeDropdown();
+
     currentRef.showDropdown = () => setOpenState(true);
+
     currentRef.onClear = onClear;
     currentRef.setPreviousValue = setPreviousValue;
+
     currentRef.setValue = value => {
       if (allValue[unique][allValue[unique].length - 1] !== value) {
         allValue[unique].push(value);
       }
+
       setValueIntoInput(value);
     };
+
     currentRef.DOM = ref.current;
     return currentRef;
   });
@@ -991,16 +1124,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       currentObjectDefault[unique] = [];
     }
+
     return () => {
       currentObjectDefault[unique] = null;
     };
   }, [valueObjectDefault]);
   useEffect(() => {
     allValue[unique] = [];
+
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
       setValueIntoInput(defaultValue);
       setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loading);
     }
+
     return () => {
       allValue[unique] = null;
       closeDropdown();
@@ -1009,6 +1145,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (searchDelayTime) {
       var _searchDelayTime$matc, _searchDelayTime$matc2;
+
       if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
       const units = {
         m: 60000,
@@ -1025,10 +1162,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
       allValue[unique].push(valueProp);
     }
+
     if (multiple && valueProp) {
       setValueMulti(convertData(valueProp, valueExpr));
-    }
-    // Close dropdown treeview by children when select item
+    } // Close dropdown treeview by children when select item
+
+
     if (children && (closeAfterSelect === true || closeAfterSelect === undefined && !multiple)) {
       closeDropdown();
     }
@@ -1040,21 +1179,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [valueProp, dataSource]);
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
+
     if (!readOnly && !disabled) {
       !!onLoadMore && dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
     }
+
     if (disabled || readOnly || children) {
       inputRef.current.addEventListener('keydown', onPreventKeyDownHandler);
     } else {
       inputRef.current.addEventListener('keydown', onKeyDown);
     }
+
     return () => {
       if (!ref.current || !inputRef.current || !iconRef.current) return;
+
       if (disabled || readOnly || children) {
         inputRef.current.removeEventListener('keydown', onPreventKeyDownHandler);
       } else {
         inputRef.current.removeEventListener('keydown', onKeyDown);
       }
+
       closeDropdown();
     };
   }, [disabled, readOnly, displayExpr, multiple, allowSearch, viewType, closeAfterSelect, selectBox]);
@@ -1063,6 +1207,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.addEventListener('click', onClickInput);
       inputRef.current.addEventListener('input', onChangeInput);
     }
+
     return () => {
       if (!disabled && !readOnly && inputRef.current) {
         inputRef.current.removeEventListener('click', onClickInput);
@@ -1074,12 +1219,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!disabled && !readOnly) {
       inputRef.current.addEventListener('click', onClickInput);
     }
+
     if (dropdownListRef.current) {
       var _dropdownListRef$curr5, _dropdownListRef$curr6, _currentObjectDefault6;
+
       if (!disabled && !readOnly) {
         inputRef.current.addEventListener('input', onChangeInput);
       }
+
       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 + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
         !!onLoadMore && dataSource.length < total && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
@@ -1091,17 +1240,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.addEventListener('input', onChangeInput);
       }
     }
+
     return () => {
       if (inputRef.current) {
         inputRef.current.removeEventListener('input', onChangeInput);
         inputRef.current.removeEventListener('click', onClickInput);
       }
+
       !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
   }, [dataSource]);
   /* End handler */
 
   /* Start component */
+
   const EmptyDataText = jsx("div", {
     css: _DropdownItemCSS,
     className: 'no-data'
@@ -1111,17 +1263,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled,
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
+
   const getData = () => {
     let dataFilter = JSON.parse(JSON.stringify(dataSource));
+
     if (Array.isArray(valueObjectDefault)) {
       dataFilter = [...dataFilter, ...dataChoosen.current, ...valueObjectDefault];
     } else if (typeof valueObjectDefault === 'object') {
-      dataFilter = [...dataFilter, ...dataChoosen.current, {
-        ...valueObjectDefault
+      dataFilter = [...dataFilter, ...dataChoosen.current, { ...valueObjectDefault
       }];
     }
+
     return dataFilter;
   };
+
   const InputView = useMemo(() => {
     return jsx("div", {
       css: _DropdownFormCSS,
@@ -1130,8 +1285,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("div", {
       css: _InputCSS,
       className: 'DGN-UI-Dropdown-Form-Input'
-    }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", {
-      ...inputProps,
+    }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", { ...inputProps,
       style: {
         gap: spacing(0.5),
         ...inputStyle
@@ -1147,19 +1301,24 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let dataFilter = getData();
       const data = dataFilter.find(v => v[valueExpr] === vl);
       let text = '';
+
       if (data) {
         var _mask;
+
         displayExpr = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr || valueExpr;
-        let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+        let mask = data === null || data === void 0 ? void 0 : data[displayExpr]; // convert {id} - {name} to {<data[id]>} - {<data[name]>}
 
-        // convert {id} - {name} to {<data[id]>} - {<data[name]>}
         if (!mask && regexBetween.test(displayExpr)) {
           var _displayExpr4;
+
           mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
         }
+
         text = (_mask = mask) === null || _mask === void 0 ? void 0 : _mask.replace(regexInclude, '');
       }
+
       let item;
+
       if (typeof renderSelectedItem === 'function') {
         item = renderSelectedItem({
           data,
@@ -1176,9 +1335,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           onRemove: e => onRemove(e, vl)
         });
       }
+
       return item;
-    })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
-      ...inputProps,
+    })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1223,8 +1382,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : 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,
+    return error ? jsx(HelperText, { ...helperTextProps,
       disabled: disabled
     }, error) : null;
   }, [disabled, error, helperTextProps]);
@@ -1240,13 +1398,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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`
     ${displayFlex};
     ${positionRelative};
     ${parseWidth(!multiple && renderSelectedItem ? 'calc(100% - 34px)' : '100%')};
 `;
+
 const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) => css`
     ${displayFlex};
     ${itemsCenter};
@@ -1299,12 +1458,14 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
         ${disabled && `color: ${systemDisabled}`};
     }
 `;
+
 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};
@@ -1416,6 +1577,7 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '';
               }
           `;
+
 const DropdownListCSS = loading => css`
     ${displayBlock};
     ${positionRelative};
@@ -1443,6 +1605,7 @@ const DropdownListCSS = loading => css`
         ${pd([0.25])};
     }
 `;
+
 const DropdownItemCSS = (multiple, selectBox) => css`
     ${displayFlex};
     ${flexRow};
@@ -1469,6 +1632,7 @@ const DropdownItemCSS = (multiple, selectBox) => css`
         color: ${systemActive};
     }
 `;
+
 const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
     ${displayBlock};
     ${positionRelative};
@@ -1502,6 +1666,7 @@ const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
         }
     }
 `;
+
 const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
     ${positionFixed};
     ${parseWidth(width)};
@@ -1516,6 +1681,7 @@ const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
         top: auto;
     `}
 `;
+
 const LoadingProgressCSS = css`
     ${displayFlex};
     ${flexRow};
@@ -1567,39 +1733,51 @@ Dropdown.defaultProps = {
 Dropdown.propTypes = {
   /** 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,
+
   /** 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
+
+  /** 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]),
+
   /** 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/>
-   * &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,
@@ -1607,98 +1785,133 @@ Dropdown.propTypes = {
     suffix: PropTypes.string,
     style: PropTypes.object
   })]),
+
   /** Attributes applied to the input element. */
   inputProps: PropTypes.object,
+
   /**  Style inline of input element. */
   inputStyle: PropTypes.object,
+
   /** 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,
+
   /** 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)
+
+  /** 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'}
+
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(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.oneOfType([PropTypes.func, PropTypes.string]),
+
   /** 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.
+
+  /**
+   * 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]),
+
   /** 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']),
+
   /** 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
-   *
-   * 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: ref
 };