diginet-core-ui 1.3.78 → 1.3.79

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { Fragment, memo, useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
@@ -44,26 +43,22 @@ const {
   zIndex: zIndexCORE
 } = theme;
 const timing = {},
-      currentValue = {},
-      currentObjectDefault = {},
-      isSearch = {},
-      allValue = {};
+  currentValue = {},
+  currentObjectDefault = {},
+  isSearch = {},
+  allValue = {};
 const separatorPattern = /\{\w+\}/g;
 const regexBetween = /[^{\}]+(?=})/g; // eslint-disable-line
-
 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(({
   viewType,
   itemMode,
@@ -137,36 +132,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
   const [textValue, setTextValue] = useState('');
-  let valueTemp = valueProp || defaultValue || []; // only mode multi
+  let valueTemp = valueProp || defaultValue || [];
 
+  // 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, typeof renderSelectedItem === 'function', disabled);
-
   const _IconCSS = IconCSS(viewType, loading, showClear);
-
   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);
-  /* Start handler */
-
 
+  /* Start handler */
   const triggerInput = e => {
     const target = e.currentTarget;
     target.style.pointerEvents = 'none';
-
     if (!dropdownListRef.current) {
       onClickInput();
     } else {
@@ -174,32 +159,26 @@ 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))) {
         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;
-
+          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);
@@ -208,7 +187,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           sel.removeAllRanges();
           sel.addRange(range);
         }
-
         setOpenState(true);
       }
     } else if (multiple || itemMode === 'treeview') {
@@ -219,23 +197,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-
   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,
@@ -250,11 +223,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       left,
       height,
       width
-    } = formRef.current.getBoundingClientRect(); // Calculate to set position of Dropdown box
+    } = formRef.current.getBoundingClientRect();
 
+    // 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;
@@ -262,11 +235,8 @@ 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,
@@ -296,35 +266,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(CircularProgress, {
       size: 'xs'
     })));
-
     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);
       dropdownListRef.current && dropdownListRef.current.addEventListener('keydown', moveOnItem);
-
       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({
@@ -334,7 +298,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-
   const pressESCHandler = e => {
     if (e.key === 'Escape' || e.key === 'Tab') {
       closeDropdown();
@@ -344,21 +307,17 @@ 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) {
       // dropdownRef.current.style.pointerEvents = `none`;
@@ -374,80 +333,64 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
-
       if (onLoadMore && dropdownListRef.current) {
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
         dropdownListRef.current = null;
-      } // if (!multiple) {
+      }
+      // 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();
   };
-
   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(() => {
         dropdownListRef.current && dropdownListRef.current.addEventListener('keydown', moveOnItem);
-
         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 => {
       // 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;
       }
-
       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]);
@@ -456,26 +399,20 @@ 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,
@@ -491,11 +428,9 @@ 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);
-
       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);
@@ -503,7 +438,8 @@ 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);
@@ -511,8 +447,10 @@ 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, {
           forTreeView: true,
@@ -546,13 +484,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, icon && icon, jsx("div", {
           css: DropdownTextCSS
         }, displayText)));
-      } // if (items?.length === limit) {
+      }
+      // if (items?.length === limit) {
       //     timerRef.current = setTimeout(() => {
       //         loadMoreItemsDropdown(index + 1, pattern);
       //     }, 1000);
       //     break;
       // }
-
     }
 
     return jsx("div", {
@@ -561,7 +499,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List'
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
-
   const mapTreeView = () => {
     // if (!treeView[unique]) {
     return jsx("div", {
@@ -585,20 +522,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       value: typeof currentValue[unique] === 'string' ? [currentValue[unique]] : currentValue[unique],
       onChange: (e, value) => onChangeValue('', multiple ? value : e.value),
       renderItem: renderItem
-    }) : EmptyDataText); // }
+    }) : EmptyDataText);
+    // }
     // return treeView[unique];
   };
 
   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++;
@@ -606,26 +541,22 @@ 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;
       const value = typeof data === 'object' ? data[valueExpr] : data;
       const icon = getIconFromData(data);
-
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
           data,
@@ -641,7 +572,6 @@ 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;
@@ -650,7 +580,6 @@ 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, {
@@ -669,13 +598,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           css: DropdownTextCSS
         }, displayText));
       }
-
       if (!dropdownListRef.current) {
         return;
       }
-
       ReactDOM.render(item, dropdownListRef.current.appendChild(dropdownItem));
-
       if (++num === 100) {
         timerRef.current = setTimeout(() => {
           loadMoreItemsDropdown(i + 1, pattern);
@@ -684,20 +610,16 @@ 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 = iconDefault;
@@ -705,11 +627,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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, {
@@ -717,55 +637,45 @@ 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({
@@ -775,50 +685,44 @@ 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;
-
       // if (timerRef.current) {
       //     clearTimeout(timerRef.current);
       //     timerRef.current = null;
@@ -826,7 +730,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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) {
@@ -834,7 +737,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         setValueIntoInput(value);
         setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
       }
-
       !!onChange && onChange({
         value
       });
@@ -845,10 +747,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       const newValueArr = [...currentValue[unique]];
       const newValueArrState = [...valueMulti];
-
       if (!currentValue[unique].some(v => JSON.stringify(v) === JSON.stringify(value))) {
         newValueArr.push(value);
-        newValueArrState.push(value); // if (valueProp === undefined) {
+        newValueArrState.push(value);
+        // if (valueProp === undefined) {
         //     let item = null;
         //     if (typeof renderSelectedItem === 'function') {
         //         item = renderSelextedItem({ data, index });
@@ -873,7 +775,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       } else {
         const index = newValueArr.indexOf(value);
         newValueArr.splice(index, 1);
-        newValueArrState.splice(index, 1); // if (valueProp === undefined) {
+        newValueArrState.splice(index, 1);
+        // if (valueProp === undefined) {
         //     const nodes = inputRef.current.querySelectorAll('.dropdown-item');
         //     nodes[index]?.remove();
         // }
@@ -889,14 +792,12 @@ 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
@@ -906,7 +807,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         triggerBlur(false);
       }
     }
-
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     } else {
@@ -914,22 +814,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) {
@@ -942,9 +842,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({
@@ -952,26 +852,25 @@ 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
       }
@@ -980,12 +879,10 @@ 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) {
@@ -998,45 +895,34 @@ 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);
           }
@@ -1044,31 +930,25 @@ 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') {
@@ -1094,10 +974,8 @@ 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({
@@ -1123,7 +1001,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setTextValue(text);
     }
   };
-
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
@@ -1139,30 +1016,22 @@ 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;
   });
@@ -1179,19 +1048,16 @@ 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();
@@ -1200,7 +1066,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (searchDelayTime) {
       var _searchDelayTime$matc, _searchDelayTime$matc2;
-
       if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
       const units = {
         m: 60000,
@@ -1217,12 +1082,10 @@ 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();
     }
@@ -1234,43 +1097,37 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [valueProp, dataSource]);
   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 {
+    }
+    // else {
     //     if (multiple || allowSearch) {
     //         inputRef.current.contentEditable = false;
     //     }
     // }
-
-
     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 (!readOnly && !disabled) {
         inputRef.current.removeEventListener('click', onClickInput);
         inputRef.current.removeEventListener('input', onChangeInput);
-      } // else {
+      }
+      // else {
       //     if (multiple && !allowSearch) {
       //         inputRef.current.contentEditable = true;
       //     }
       // }
-
-
       if (disabled || readOnly || children) {
         inputRef.current.removeEventListener('keydown', onPreventKeyDownHandler);
       } else {
         inputRef.current.removeEventListener('keydown', onKeyDown);
       }
-
       closeDropdown();
     };
   }, [disabled, readOnly, displayExpr, multiple, allowSearch, viewType, closeAfterSelect, selectBox]);
@@ -1279,7 +1136,6 @@ 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);
@@ -1291,16 +1147,12 @@ 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);
@@ -1312,20 +1164,17 @@ 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'
@@ -1335,20 +1184,17 @@ 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,
@@ -1358,7 +1204,8 @@ 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: {
         cursor: 'text',
         gap: spacing(0.5),
@@ -1375,24 +1222,19 @@ 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]; // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+        let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
 
+        // 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 = null;
-
       if (typeof renderSelectedItem === 'function') {
         item = renderSelectedItem({
           data,
@@ -1409,9 +1251,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,
       // contentEditable={!disabled && !allowSearch}
       style: inputStyle,
       ref: inputRef,
@@ -1480,15 +1322,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' ')
   }, LabelView, InputView, ErrorView), DropdownView);
 }));
-/* Start styled */
 
+/* Start styled */
 const InputCSS = (multiple, renderSelectedItem) => css`
     ${flexRow};
     ${positionRelative};
     width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
 `;
-
 const DropdownInputCSS = (viewType, multiple, placeholder, renderSelectedItem, disabled) => css`
     ${flexRow};
     ${alignCenter};
@@ -1537,7 +1378,6 @@ const DropdownInputCSS = (viewType, multiple, placeholder, renderSelectedItem, d
         `}
     }
 `;
-
 const IconCSS = (viewType, loading, showClear) => css`
     ${flexRow};
     ${alignCenter};
@@ -1552,7 +1392,6 @@ const IconCSS = (viewType, loading, showClear) => css`
         display: ${loading ? 'flex' : 'none'};
     }
 `;
-
 const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInputCSSName) => viewType !== 'outlined' ? css`
               ${flexRow};
               ${alignCenter};
@@ -1667,7 +1506,6 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   border: 2px solid transparent;
               }
           `;
-
 const DropdownListCSS = loading => css`
     ${displayBlock};
     ${positionRelative};
@@ -1695,7 +1533,6 @@ const DropdownListCSS = loading => css`
         padding: 1px;
     }
 `;
-
 const DropdownItemCSS = (multiple, selectBox) => css`
     ${flexRow};
     ${positionRelative};
@@ -1722,7 +1559,6 @@ const DropdownItemCSS = (multiple, selectBox) => css`
         color: ${active};
     }
 `;
-
 const DropdownTextCSS = css`
     ${paragraph1};
     color: inherit;
@@ -1736,7 +1572,6 @@ const DropdownTextCSS = css`
         color: ${sub};
     }
 `;
-
 const DropdownRootCSS = (DropdownFormCSSName, IconCSSName, DropdownInputCSSName) => css`
     ${displayBlock};
     ${positionRelative};
@@ -1778,7 +1613,6 @@ const DropdownRootCSS = (DropdownFormCSSName, IconCSSName, DropdownInputCSSName)
         }
     }
 `;
-
 const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
     ${positionFixed};
     ${parseWidth(width)};
@@ -1793,7 +1627,6 @@ const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
         ${flexColReverse.styles};
     `}
 `;
-
 const LoadingProgressCSS = css`
     ${flexRow};
     ${justifyCenter};
@@ -1842,34 +1675,24 @@ Dropdown.defaultProps = {
 Dropdown.propTypes = {
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
-
   /** The mode of item when rendering. */
   itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
-
   /** 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,
-
   /** 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,
-
   /** Field name used for icon display.<br/>
    * Example:<br/>
    * &nbsp;&nbsp;string: 'icon'<br/>
@@ -1885,138 +1708,98 @@ 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. */
   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,
-
   /** 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/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-
   /** 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 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,
-
   /** 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,
-
   /**
    * ref methods
    *