diginet-core-ui 1.4.21 → 1.4.23-beta.1

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

@@ -11,10 +11,7 @@ import { animation, bgColor, border, borderBottom, borderBottomColor, borderColo
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, isMobile, randomString } from "../../../utils";
-const
-  // timing = {},
-  currentValue = {},
-  // currentObjectDefault = {},
+const currentValue = {},
   isSearch = {},
   allValue = {};
 const separatorPattern = /\{\w+\}/g;
@@ -70,8 +67,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     clearAble,
     closeAfterSelect,
     dataSource,
-    defaultValue,
-    disabled,
     displayExpr: displayExprProp,
     dropdownItemStyle,
     error,
@@ -111,7 +106,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     value: valueProp,
     valueExpr,
     valueObjectDefault,
-    viewType
+    viewType,
+    defaultValue,
+    disabled
   } = props;
   const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
   const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
@@ -128,8 +125,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const iconRef = useRef(null);
   const dropdownListRef = useRef(null);
   const searchRef = useRef(null);
-  // const lastSearchRef = useRef(null);
-  // const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
   const popupRef = useRef(null);
@@ -166,7 +161,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
   const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem, theme);
   const _IconCSS = IconCSS(viewType, theme);
-  const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, readOnly, placeholder, _DropdownInputCSS.name, theme);
+  const _DropdownFormCSS = viewType === 'outlined' ? DropdownFormOutlinedCSS(disabled, readOnly, placeholder, theme) : DropdownFormCSS(viewType, multiple, disabled, readOnly, placeholder, _DropdownInputCSS.name, theme);
   const _DropdownListCSS = DropdownListCSS(loadingState, theme);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox, theme);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name, theme);
@@ -192,26 +187,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       }
     }
   };
-
-  // const onClickOutsideOfInput = event => {
-  //     if (
-  //         inputRef.current &&
-  //         !inputRef.current?.contains(event?.target) &&
-  //         iconRef.current &&
-  //         !iconRef.current?.contains(event?.target) &&
-  //         dropdownListRef.current &&
-  //         !dropdownListRef.current?.parentNode?.parentNode?.contains(event?.target)
-  //     ) {
-  //         closeDropdown();
-  //         triggerBlur(false);
-  //     }
-  // };
-
   const showDropdown = () => {
-    // if (displayExpr && Array.isArray(displayExpr)) {
-    //     displayExpr = displayExpr.join(' - ');
-    // }
-    // const keyArr = displayExpr?.match(separatorPattern);
     const dropdown = children ? jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
@@ -220,33 +196,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       onScroll: onLoadMoreHandler,
       tabIndex: -1
     }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
-    // const { innerHeight } = window;
-    // const { top, left, height, width } = 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;
-    //     } else {
-    //         positionTop = innerHeight - dropdownHeight;
-    //     }
-    // }
-    // const _DropdownCSS = DropdownCSS(positionTop, left, width, _isMobile, allowSearch);
-    const el = jsx(Fragment, null, (multiple || allowSearch) && itemMode === 'normal' && !children ? jsx("div", {
+    return jsx(Fragment, null, (multiple || allowSearch) && itemMode === 'normal' && !children ? jsx("div", {
       className: 'DGN-Dropdown-Search'
     }, jsx(InputBase, {
       inputRef: searchRef,
@@ -272,20 +222,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }, 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 && dataSourceState.length < totalState) {
-    // dropdownListRef.current &&
-    //     dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
-    // }
-    // }, 10);
-    return el;
   };
   const moveOnItem = e => {
     if (e.key === 'Escape' || e.key === 'Tab') {
@@ -313,55 +249,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       dropdownListRef.current.firstChild.focus();
     }
   };
-
-  // const onWheelHandler = e => {
-  //     if (!dropdownRef.current) {
-  //         document.removeEventListener('wheel', onWheelHandler);
-  //         return;
-  //     }
-  //     if (!dropdownRef.current?.contains(e.target)) {
-  //         closeDropdown();
-  //         triggerBlur();
-  //     }
-  // };
-
   const closeDropdown = () => {
     var _searchRef$current;
     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';
-    // setTxtSearch('');
+    }
     onClosed === null || onClosed === void 0 ? void 0 : onClosed({
       recentSearch: (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value
     });
   };
 
-  // const renderDropdown = pattern => {
-  //     const keyArr = displayExpr?.match(separatorPattern);
-  //     const dropdown = mapDropdown(pattern, keyArr);
-  //     const el = document.createElement('div');
-  //     el.className = `DGN-Dropdown-Box`;
-  //     if (dropdownRef.current) {
-  //         dropdownRef.current.querySelector('.DGN-Dropdown-Box')?.remove();
-  //         ReactDOM.render(dropdown, dropdownRef.current.appendChild(el));
-  //         setTimeout(() => {
-  //             if (onLoadMore && dataSource.length < total) {
-  //                 dropdownListRef.current &&
-  //                     dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
-  //             }
-  //             updatePositionDropdown();
-  //         }, 0);
-  //     }
-  // };
-
   /**
    * So sánh text đầu vào cáo map với txtSearch
    * @param text
@@ -427,11 +324,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           if (++existItemQuantity > limit) {
             continue;
           }
-          // currentObjectDefault[unique].splice(index, 1);
         }
       }
     }
-
     const length = (_dataSourceUsable2 = dataSourceUsable) === null || _dataSourceUsable2 === void 0 ? void 0 : _dataSourceUsable2.length;
     for (let index = 0; index < length; index++) {
       const data = dataSourceUsable[index];
@@ -439,11 +334,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       const itemHidden = typeof data === 'object' ? data['hidden'] : false;
       if (itemHidden) continue;
       let displayText = displayValue(data);
-
-      // if (searchExpr?.length > 0 && pattern) {
-      //     if (handleRenderBySearch(data, pattern)) continue;
-      // } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
-
       if (subText) {
         displayText = jsx(Fragment, null, jsx(Typography, {
           className: 'DGN-UI-Dropdown-PrimaryText',
@@ -473,19 +363,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          className: 'DGN-UI-Dropdown-Item'
-          // onClick={() => {
-          // if (itemDisabled) return;
-          // onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index);
-          // onChangeValue(displayText, value, icon, data, index);
-          // }}
-          ,
+          className: 'DGN-UI-Dropdown-Item',
           onKeyDown: e => {
             if (itemDisabled) return;
             if (e.key === 'Enter') e.currentTarget.firstChild.click();
-            // if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
           },
-
           tabIndex: -1
         }, jsx(Checkbox, {
           css: _CheckBoxCSS,
@@ -632,22 +514,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       }
     }
   };
-
-  // 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 (!data || !iconExpr || iconExpr === 'none') return null;
     let _src;
@@ -674,18 +540,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     });
   };
   const customizeWidthDropdown = () => {
-    // if (dropdownListRef.current && _isMobile)
-    //     dropdownListRef.current.style.maxHeight = `${
-    //         Math.min(280, window.innerHeight) - (allowSearch ? 40 : 0)
-    //     }px`;
     if (timer.current) {
       clearTimeout(timer.current);
     }
     timer.current = setTimeout(() => {
-      // if (!ref.current) {
-      //     window.removeEventListener('resize', customizeWidthDropdown);
-      //     return;
-      // } else {
       if (ref.current) {
         const {
           width
@@ -693,23 +551,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         setPopoverWidth(width);
       }
     }, 300);
-
-    // 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 handleActionLoadData = isReset => {
     const {
       skip,
@@ -805,50 +647,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     var _e$target$value;
     if (!dropdownRef.current) return; // Kiểm tra nếu dropdown đóng trước searchDelayTime thì không chạy
     setTxtSearch((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '');
-    // if (searchRef.current) lastSearchRef.current = searchRef.current.value;
-    // const dataFilter = getData();
-    // dataChosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i?.[valueExpr]));
     if (onInput) {
-      // 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;
-      // }, timeout.current || searchDelayTime);
-      // } else {
-      // e.target.value = text;
-      // onInput(e);
-      // e.target.value = valueInput;
-      // }
-      // return;
     }
-
     if (action !== null && action !== void 0 && action.loadData && !!onLoadMore) {
       filter.current.strSearch = e.target.value;
       handleActionLoadData(true);
     }
-    // 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(() => {
-    //     renderDropdown(searchExpr?.length > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
-    // }, timeout.current || searchDelayTime);
   };
-
   const onChangeValue = (displayText, value, icon, data) => {
     if (itemMode === 'treeview') {
       if (valueProp === undefined) {
@@ -859,9 +665,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       !!onChange && onChange({
         value
       });
-      // setTimeout(() => {
-      //     updatePositionDropdown();
-      // }, 0);
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       // const newValueArr = [...currentValue[unique]];
@@ -869,46 +672,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
         // newValueArr.push(value);
         newValueArrState.push(value);
-        // if (valueProp === undefined) {
-        //     let item = null;
-        //     if (typeof renderSelectedItem === 'function') {
-        //         item = renderSelextedItem({ data, index });
-        //     } else {
-        //         item = (
-        //             <Chip
-        //                 startIcon={icon}
-        //                 label={displayText}
-        //                 size={itemMultipleSize}
-        //                 disabled={disabled}
-        //                 clearAble
-        //                 onRemove={e => onRemove(e, value)}
-        //                 style={{ margin: '3px 0', width: '100%' }}
-        //             />
-        //         );
-        //     }
-        //     const el = document.createElement('div');
-        //     el.className = 'dropdown-item';
-        //     el.style.display = 'flex';
-        //     ReactDOM.render(item, inputRef.current.appendChild(el));
-        // }
       } else {
         const index = newValueArrState.indexOf(value);
-        // newValueArr.splice(index, 1);
         newValueArrState.splice(index, 1);
-        // if (valueProp === undefined) {
-        //     const nodes = inputRef.current.querySelectorAll('.dropdown-item');
-        //     nodes[index]?.remove();
-        // }
       }
-
       setValueMulti(newValueArrState);
       !!onChange && onChange({
         value: newValueArrState,
         data
       });
-      // setTimeout(() => {
-      //     updatePositionDropdown();
-      // }, 0);
     } else {
       const isChanged = currentValue[unique] !== value;
       if (isChanged) {
@@ -929,39 +701,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
-    // else {
-    //     setTimeout(() => {
-    //         updatePositionDropdown();
-    //     }, 0);
-    // }
   };
-
-  // 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(() => {
-      //     if (dropdownListRef.current && multiple && selectBox && !children) {
-      //         const input = dropdownListRef.current.querySelector(`input[value="${value}"]`);
-      //         if (input) {
-      //             input.checked = false;
-      //         }
-      //     }
-      // e?.parentNode?.remove();
-      // }, 0);
-      // }, 0);
-      // }, 0);
-      // setValueMulti([...valueMulti]?.filter(i=>i!==value) || []);
-      // !!onChange && onChange({ value: currentValue[unique], removed: value });
     }
 
     // logic mới
@@ -977,18 +723,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     currentValue[unique] = multiple ? [] : '';
     if (multiple) {
       setValueMulti([]);
-      // inputRef.current.innerHTML = '';
-      // if (dropdownListRef.current) {
-      //     dropdownListRef.current.querySelectorAll('input').forEach(input => (input.checked = false));
-      // }
     } else {
       setValueSingle('');
     }
-    // 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),
       target: {
@@ -1007,17 +747,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const setValueIntoInput = source => {
     if (!source && source !== 0) {
       if (multiple) {
-        // inputRef.current.innerHTML = '';
         currentValue[unique] = [];
       } else {
-        // if (
-        //     typeof renderSelectedItem === 'function' ||
-        //     (iconExpr && iconExpr !== 'none' && !isSearch[unique])
-        // ) {
-        //     inputRef.current.innerHTML = '';
-        // } else if (!isSearch[unique]) {
-        //     inputRef.current.value = '';
-        // }
         currentValue[unique] = '';
         setValueSingle('');
       }
@@ -1036,7 +767,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       }
       valueArr = [...new Set(valueArr)];
       currentValue[unique] = [];
-      // inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
         for (let i = 0; i < length; i++) {
           if (!dataSourceState[i]) continue;
@@ -1068,34 +798,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           return;
         }
       }
-      if (!isSearch[unique]) {
-        // inputRef.current.value = source;
-      }
     }
   };
   const setMultipleValueHandler = (data, value) => {
-    // let item = null;
-    // if (typeof renderSelectedItem === 'function') {
-    //     item = renderSelectedItem({ data, index });
-    // } else {
-    //     const icon = getIconFromData(data);
-    //     const text = keyArr ? renderData(data, keyArr) : data[renderSelectedItem || displayExpr];
-    //     item = (
-    //         <Chip
-    //             startIcon={icon}
-    //             label={text}
-    //             size={itemMultipleSize}
-    //             disabled={disabled}
-    //             clearAble
-    //             onRemove={e => onRemove(e, value)}
-    //             style={{ margin: '3px 0', width: '100%' }}
-    //         />
-    //     );
-    // }
-    // const el = document.createElement('div');
-    // el.className = 'dropdown-item';
-    // el.style.display = 'flex';
-    // ReactDOM.render(item, inputRef.current.appendChild(el));
     currentValue[unique].push(value);
   };
   const setSingleValueHandler = (data, keyArr) => {
@@ -1106,33 +811,21 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       hoverTooltip: !_isMobile
     }, content);
     if (typeof renderSelectedItem === 'function') {
-      // inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
         data
       });
-      // const el = document.createElement('div');
-      // el.style.display = 'flex';
-      // el.style.width = '100%';
-      // el.style.minHeight = '24px';
-      // if (!multilineSelectedItem) el.style.maxHeight = '24px';
       const el = jsx("div", {
         css: [displayFlex, parseWidth('100%'), parseMinHeight(24), !multilineSelectedItem && parseMaxHeight(24)]
       }, item);
       setValueSingle(el);
-      // ReactDOM.render(item, inputRef.current.appendChild(el));
     } else if (iconExpr && iconExpr !== 'none') {
-      // inputRef.current.innerHTML = '';
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && icon, renderContent(text));
-      // const el = document.createElement('div');
-      // el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
       const el = jsx("div", {
         css: [displayFlex, itemsCenter, parseMinHeight(24)]
       }, valueWithIcon);
       setValueSingle(el);
-      // ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
     } else {
-      // inputRef.current.value = text;
       setValueSingle(text);
     }
   };
@@ -1200,51 +893,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
-        // currentObjectDefault[unique] = [...valueObjectDefault];
         setVlObjDefaultState([...dataChosen.current, ...valueObjectDefault]);
       } else if (typeof valueObjectDefault === 'object') {
         var _Object$keys;
-        // currentObjectDefault[unique] =
-        //     Object.keys(valueObjectDefault).length !== 0 ? [valueObjectDefault] : [];
         setVlObjDefaultState(((_Object$keys = Object.keys(valueObjectDefault)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 0 ? [...dataChosen.current, valueObjectDefault] : [...dataChosen.current]);
       }
     } else {
-      // currentObjectDefault[unique] = [];
       setVlObjDefaultState([...dataChosen.current]);
     }
   }, [valueObjectDefault, valueMulti]);
   useEffect(() => {
     allValue[unique] = [];
-    if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
+    if (action !== null && action !== void 0 && action.loadData) handleActionLoadData(true);else if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
       setValueIntoInput(defaultValue);
       setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loadingState);
     }
-    if (action !== null && action !== void 0 && action.loadData) handleActionLoadData();
     return () => {
       allValue[unique] = null;
       closeDropdown();
     };
   }, []);
-
-  // useEffect(() => {
-  //     if (searchDelayTime) {
-  //         if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
-  //         const units = {
-  //             m: 60000,
-  //             s: 1000,
-  //             ms: 1,
-  //         };
-  //         timeout.current =
-  //             typeof searchDelayTime === 'number'
-  //                 ? searchDelayTime
-  //                 : (searchDelayTime.match(/[^a-z]+/i)?.[0] || 1) *
-  //                   units[searchDelayTime.match(/ms|s|m/i)?.[0] || 's'];
-  //         return () => {
-  //             timeout.current = null;
-  //         };
-  //     }
-  // }, [searchDelayTime]);
-
   useEffect(() => {
     var _allValue$unique4;
     if (allValue[unique][((_allValue$unique4 = allValue[unique]) === null || _allValue$unique4 === void 0 ? void 0 : _allValue$unique4.length) - 1] !== valueProp) {
@@ -1265,11 +933,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   }, [valueProp, dataSourceState, vlObjDefaultState]);
   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 {
@@ -1309,9 +972,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
       const length = (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : (_dropdownListRef$curr3 = _dropdownListRef$curr2.children) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.length;
       if (length < (dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length) + (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
-        // !!onLoadMore &&
-        // dataSourceState.length < totalState &&
-        // dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
       }
@@ -1320,13 +980,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         inputRef.current.addEventListener('input', onChangeInput);
       }
     }
+    // Fix set defaultValue before action loadData
+    if (action !== null && action !== void 0 && action.loadData && (!valueSingle || (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) === 0) && defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
+      setValueIntoInput(defaultValue);
+      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loadingState);
+    }
     return () => {
       if (inputRef.current) {
         inputRef.current.removeEventListener('input', onChangeInput);
         inputRef.current.removeEventListener('click', onClickInput);
       }
-      // !!dropdownListRef.current &&
-      //     dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
   }, [dataSourceState]);
   useEffect(() => {
@@ -1360,121 +1023,111 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   }, label) : null, [label, required, disabled, labelProps]);
   const getData = () => {
     let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
-    // dataFilter = [...dataFilter, ...dataChosen.current];
-    // if (Array.isArray(valueObjectDefault)) {
-    //     dataFilter = [...dataFilter, ...vlObjDefaultState];
-    // } else if (typeof valueObjectDefault === 'object') {
-    //     dataFilter = [...dataFilter, { ...vlObjDefaultState }];
-    // }
     dataFilter = uniqBy([...vlObjDefaultState, ...dataFilter], data => data === null || data === void 0 ? void 0 : data[valueExpr]);
     return dataFilter;
   };
-  const InputView = useMemo(() => {
-    return jsx("div", {
-      css: _DropdownFormCSS,
-      ref: formRef,
-      className: classNames('DGN-UI-Dropdown-Form', openState && 'dropdown-showing')
-    }, jsx("div", {
-      css: _InputCSS,
-      className: 'DGN-UI-Dropdown-Form-Input'
-    }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", {
-      ...inputProps,
-      style: inputStyle,
-      ref: inputRef,
-      css: [_DropdownInputCSS],
-      className: classNames('dgn-dropdown-multiple', inputProps.className),
-      onChange: e => {
+  const InputView = jsx("div", {
+    css: _DropdownFormCSS,
+    ref: formRef,
+    className: classNames('DGN-UI-Dropdown-Form', openState && 'dropdown-showing')
+  }, jsx("div", {
+    css: _InputCSS,
+    className: 'DGN-UI-Dropdown-Form-Input'
+  }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", {
+    ...inputProps,
+    style: inputStyle,
+    ref: inputRef,
+    css: [_DropdownInputCSS],
+    className: classNames('dgn-dropdown-multiple', inputProps.className),
+    onChange: e => {
+      e.preventDefault();
+      return false;
+    }
+  }, valueMulti.map((vl, index) => {
+    const dataFilter = getData();
+    const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
+    if (data) {
+      const displayText = displayValue(data);
+      let item;
+      if (typeof renderSelectedItem === 'function') {
+        item = renderSelectedItem({
+          data,
+          index
+        });
+      } else {
+        item = jsx(Chip, {
+          css: [parseWidth('100%'), parseMaxWidth('max-content')],
+          key: index,
+          startIcon: getIconFromData(data, true),
+          label: displayText,
+          size: 'medium',
+          disabled: disabled,
+          clearAble: !readOnly && !disabled,
+          onRemove: e => onRemove(e, vl)
+        });
+      }
+      return item;
+    }
+  })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
+    ...inputProps,
+    style: inputStyle,
+    ref: inputRef,
+    css: _DropdownInputCSS,
+    className: classNames('dgn-dropdown-multiple', inputProps.className),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
         e.preventDefault();
         return false;
       }
-    }, valueMulti.map((vl, index) => {
-      const dataFilter = getData();
-      const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
-      if (data) {
-        const displayText = displayValue(data);
-        let item;
-        if (typeof renderSelectedItem === 'function') {
-          item = renderSelectedItem({
-            data,
-            index
-          });
-        } else {
-          item = jsx(Chip, {
-            css: [parseWidth('100%'), parseMaxWidth('max-content')],
-            key: index,
-            startIcon: getIconFromData(data, true),
-            label: displayText,
-            size: 'medium',
-            disabled: disabled,
-            clearAble: !readOnly && !disabled,
-            onRemove: e => onRemove(e, vl)
-          });
-        }
-        return item;
-      }
-    })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
-      ...inputProps,
-      style: inputStyle,
-      ref: inputRef,
-      css: _DropdownInputCSS,
-      className: classNames('dgn-dropdown-multiple', inputProps.className),
-      onKeyDown: e => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          return false;
-        }
-      }
-    }, valueSingle) : jsx("div", {
-      css: _DropdownInputCSS,
-      onClick: onClickInput
-    }, jsx(Typography, {
-      ref: inputRef,
-      hoverTooltip: true,
-      lineClamp: multilineSelectedItem ? undefined : 1,
-      type: 'p1',
-      style: {
-        lineHeight: multiple ? '30px' : '24px'
-      },
-      tabIndex: -1
-    }, valueSingle))), jsx("div", {
-      ref: iconRef,
-      css: _IconCSS,
-      className: 'DGN-UI-Dropdown-Icon'
-    }, loadingState ? jsx(CircularProgress, {
-      size: 24
-    }) : null, showClear ? jsx(ButtonIcon, {
-      css: css`
-                                    margin-right: ${spacing([1])};
-                                `,
-      viewType: 'ghost',
-      name: 'Close',
-      onClick: onClear
-    }) : null, !loadingState ? jsx(ButtonIcon, {
-      key: openState,
-      css: animation,
-      viewType: 'ghost',
-      name: openState ? 'ArrowUp' : 'ArrowDown',
-      onClick: setShowDropdown,
-      disabled: disabled || readOnly
-    }) : null));
-  }, [openState, showClear, valueSingle, valueMulti, loadingState, dataSourceState, vlObjDefaultState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType, theme]);
+    }
+  }, valueSingle) : jsx("div", {
+    css: _DropdownInputCSS,
+    onClick: onClickInput
+  }, jsx(Typography, {
+    ref: inputRef,
+    hoverTooltip: true,
+    lineClamp: multilineSelectedItem ? undefined : 1,
+    type: 'p1',
+    style: {
+      lineHeight: multiple ? '30px' : '24px'
+    },
+    tabIndex: -1
+  }, valueSingle))), jsx("div", {
+    ref: iconRef,
+    css: _IconCSS,
+    className: 'DGN-UI-Dropdown-Icon'
+  }, loadingState ? jsx(CircularProgress, {
+    size: 24
+  }) : null, showClear ? jsx(ButtonIcon, {
+    css: css`
+                                margin-right: ${spacing([1])};
+                            `,
+    viewType: 'ghost',
+    name: 'Close',
+    onClick: onClear
+  }) : null, !loadingState ? jsx(ButtonIcon, {
+    key: openState,
+    css: animation,
+    viewType: 'ghost',
+    name: openState ? 'ArrowUp' : 'ArrowDown',
+    onClick: setShowDropdown,
+    disabled: disabled || readOnly
+  }) : null));
   const ErrorView = useMemo(() => {
     return error ? jsx(HelperText, {
       ...helperTextProps,
       disabled: disabled
     }, error) : null;
   }, [disabled, error, helperTextProps]);
-  const DropdownView = useMemo(() => {
-    return jsx(Popover, {
-      css: PopoverCSS(theme),
-      ref: dropdownRef,
-      open: openState,
-      anchor: ref.current,
-      width: popoverWidth,
-      onClose: closeDropdown
-    }, showDropdown());
-    // return openState ? createPortal(showDropdown(), document.body) : null;
-  }, [openState, popoverWidth, valueMulti, loadingState, dataSourceState, dataSource, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch, theme]);
+  const DropdownView = jsx(Popover, {
+    css: PopoverCSS(theme),
+    ref: dropdownRef,
+    open: openState,
+    anchor: ref.current,
+    width: popoverWidth,
+    onClose: closeDropdown
+  }, showDropdown());
+
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1567,111 +1220,115 @@ const IconCSS = (viewType, {
     margin-left: ${spacing([2])};
     margin-right: ${spacing([viewType !== 'outlined' ? 0 : 4])};
 `;
+const DropdownFormOutlinedCSS = (disabled, readOnly, placeholder, {
+  colors,
+  spacing
+}) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${positionRelative};
+    ${borderRadius(4)};
+    ${boxBorder};
+    ${border(1, disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest'))};
+    ${parseWidth('100%')};
+    ${parseMinHeight(40)};
+    margin-top: ${spacing([0.5])};
+    ${!disabled && !readOnly && css`
+        &:not(:focus-within):hover {
+            ${bgColor(getProp(colors, 'fill/hover'))};
+            ${borderColor(getProp(colors, 'system/active'))};
+            input {
+                ${bgColor(getProp(colors, 'fill/hover'))};
+            }
+        }
+    `}
+    &:focus-within {
+        ${borderColor(getProp(colors, 'line/focus'))};
+    }
+    span:empty:before {
+        content: '${placeholder}';
+        ${parseHeight('100%')};
+        ${overflowHidden};
+        ${textColor(getProp(colors, 'text/sub'))};
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+    }
+    &::placeholder {
+        ${textColor(getProp(colors, 'text/sub'))};
+    }
+    &::after {
+        ${positionAbsolute};
+        ${pointerEventsNone};
+        ${borderRadius(4)};
+        ${border(2, 'transparent')};
+        ${inset(-2)};
+        content: '';
+    }
+`;
 const DropdownFormCSS = (viewType, multiple, disabled, readOnly, placeholder, DropdownInputCSSName, {
   colors,
   spacing
-}) => viewType !== 'outlined' ? css`
-              ${displayFlex};
-              ${flexRow};
-              ${itemsCenter};
-              ${positionRelative};
-              ${boxBorder};
-              ${parseWidth('100%')};
-              padding-top: ${spacing([multiple ? 0.25 : 1])};
-              padding-bottom: ${spacing([multiple ? 0.25 : 1])};
-              ${!disabled && !readOnly && css`
-                  &:not(:focus-within):hover {
-                      &::before {
-                          ${borderBottomColor(getProp(colors, 'system/active'))};
-                      }
-                      .css-${DropdownInputCSSName} {
-                          ${textColor(getProp(colors, 'system/active'))};
-                      }
-                  }
-              `}
-              &:focus-within {
-                  ${borderBottomColor(getProp(colors, 'line/focus'))};
-                  &::after {
-                      ${borderBottomColor('inherit')};
-                      transform: scaleX(1);
-                  }
-                  .css-${DropdownInputCSSName} {
-                      ${textColor(getProp(colors, 'system/active'))};
-                  }
-              }
-              span:empty:before {
-                  content: '${placeholder}';
-                  ${parseHeight('100%')};
-                  ${overflowHidden};
-                  ${textColor(getProp(colors, 'text/sub'))};
-                  display: -webkit-box;
-                  -webkit-line-clamp: 1;
-                  -webkit-box-orient: vertical;
-              }
-              &::placeholder {
-                  ${textColor(getProp(colors, 'text/sub'))};
-              }
-              &::before {
-                  ${positionAbsolute};
-                  content: '';
-                  ${insetX(0)};
-                  ${bottom(0)};
-                  ${viewType === 'underlined' && borderBottom(1, disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest'))}
-              }
-              &::after {
-                  ${positionAbsolute};
-                  content: '';
-                  ${insetX(0)};
-                  ${bottom(-1)};
-                  ${borderBottom(2, 'transparent')};
-                  transform: scaleX(0);
-                  transform-origin: center;
-                  transition: all 0.2s ease;
-              }
-          ` : css`
-              ${displayFlex};
-              ${flexRow};
-              ${itemsCenter};
-              ${positionRelative};
-              ${borderRadius(4)};
-              ${boxBorder};
-              ${border(1, disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest'))};
-              ${parseWidth('100%')};
-              ${parseMinHeight(40)};
-              margin-top: ${spacing([0.5])};
-              ${!disabled && !readOnly && css`
-                  &:not(:focus-within):hover {
-                      ${bgColor(getProp(colors, 'fill/hover'))};
-                      ${borderColor(getProp(colors, 'system/active'))};
-                      input {
-                          ${bgColor(getProp(colors, 'fill/hover'))};
-                      }
-                  }
-              `}
-              &:focus-within {
-                  ${borderColor(getProp(colors, 'line/focus'))};
-              }
-              span:empty:before {
-                  content: '${placeholder}';
-                  ${parseHeight('100%')};
-                  ${overflowHidden};
-                  ${textColor(getProp(colors, 'text/sub'))};
-                  display: -webkit-box;
-                  -webkit-line-clamp: 1;
-                  -webkit-box-orient: vertical;
-              }
-              &::placeholder {
-                  ${textColor(getProp(colors, 'text/sub'))};
-              }
-              &::after {
-                  ${positionAbsolute};
-                  ${pointerEventsNone};
-                  ${borderRadius(4)};
-                  ${border(2, 'transparent')};
-                  ${inset(-2)};
-                  content: '';
-              }
-          `;
+}) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${positionRelative};
+    ${boxBorder};
+    ${parseWidth('100%')};
+    padding-top: ${spacing([multiple ? 0.25 : 1])};
+    padding-bottom: ${spacing([multiple ? 0.25 : 1])};
+    ${!disabled && !readOnly && css`
+        &:not(:focus-within):hover {
+            &::before {
+                ${borderBottomColor(getProp(colors, 'system/active'))};
+            }
+            .css-${DropdownInputCSSName} {
+                ${textColor(getProp(colors, 'system/active'))};
+            }
+        }
+    `}
+    &:focus-within {
+        ${borderBottomColor(getProp(colors, 'line/focus'))};
+        &::after {
+            ${borderBottomColor('inherit')};
+            transform: scaleX(1);
+        }
+        .css-${DropdownInputCSSName} {
+            ${textColor(getProp(colors, 'system/active'))};
+        }
+    }
+    span:empty:before {
+        content: '${placeholder}';
+        ${parseHeight('100%')};
+        ${overflowHidden};
+        ${textColor(getProp(colors, 'text/sub'))};
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+    }
+    &::placeholder {
+        ${textColor(getProp(colors, 'text/sub'))};
+    }
+    &::before {
+        ${positionAbsolute};
+        content: '';
+        ${insetX(0)};
+        ${bottom(0)};
+        ${viewType === 'underlined' && borderBottom(1, disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest'))}
+    }
+    &::after {
+        ${positionAbsolute};
+        content: '';
+        ${insetX(0)};
+        ${bottom(-1)};
+        ${borderBottom(2, 'transparent')};
+        transform: scaleX(0);
+        transform-origin: center;
+        transition: all 0.2s ease;
+    }
+`;
 const DropdownListCSS = (loading, {
   colors,
   spacing
@@ -1823,34 +1480,34 @@ Dropdown.propTypes = {
   action: PropTypes.shape({
     loadData: PropTypes.func
   }),
-  /** If `true`, display input box search. */
+  /** If `true`, the input box for searching will be displayed. */
   allowSearch: PropTypes.bool,
-  /** The contents in Dropdown box (Exp: TreeView). */
+  /** The content to be displayed inside the Dropdown box, such as TreeView. */
   children: PropTypes.node,
-  /** Class for component. */
+  /** The CSS class for the component. */
   className: PropTypes.string,
-  /** If `true`, display clear icon.*/
+  /** If `true`, the clear button will be displayed. */
   clearAble: PropTypes.bool,
-  /** If `true`, dropdown will close after select an item. */
+  /** If `true`, the dropdown will automatically close after selecting an item. */
   closeAfterSelect: PropTypes.bool,
   /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
-  /** Default value displayed when first render. */
+  /** The default value to be displayed when the Dropdown first renders. */
   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
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-  /**  Style inline of dropdown items. */
+  /**  Inline style for dropdown items. */
   dropdownItemStyle: PropTypes.object,
-  /** Error displayed below input. */
+  /** Error message displayed below the 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/>
+  /** The field name used for displaying icons.<br/>
    * Example:<br/>
    * &nbsp;&nbsp;string: 'icon'<br/>
    * &nbsp;&nbsp;object: {<br/>
@@ -1867,82 +1524,82 @@ Dropdown.propTypes = {
   })]),
   /** Attributes applied to the input element. */
   inputProps: PropTypes.object,
-  /**  Style inline of input element. */
+  /**  Inline style for the input element. */
   inputStyle: PropTypes.object,
-  /** The mode of item when rendering. */
+  /** The mode of rendering for items. */
   itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
-  /** The label of the input. */
+  /** The label for 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. */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) applied to the label element. */
   labelProps: PropTypes.object,
-  /** Number of items that are rendered each time. */
+  /** Number of items to render at a time. */
   limit: PropTypes.number,
-  /** If `true`, the loading indicator is shown. */
+  /** If `true`, a loading indicator is shown. */
   loading: PropTypes.bool,
-  /** Set restrictions regarding the maximum number of options that can be selected. (Use with prop `multiple`) */
+  /** Maximum number of options that can be selected (used with `multiple` prop).*/
   maximumSelectionLength: PropTypes.number,
-  /** If `true`, show multi-line selected item(s). */
+  /** If `true`, multi-line selected item(s) will be shown. */
   multilineSelectedItem: PropTypes.bool,
-  /** If `true`, value must be an array and the dropdown will support multiple selections. */
+  /** If `true`, the Dropdown supports multiple selections (value must be an array). */
   multiple: PropTypes.bool,
-  /** Specifies a text string shown when there is no data. */
+  /** Text shown when there is no data. */
   noDataText: PropTypes.string,
-  /** Callback fired when the value changes. */
+  /** Callback function fired when the value changes. */
   onChange: PropTypes.func,
-  /** Callback fired when dropdown closed. */
+  /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
-  /** Callback fired when key down input */
+  /** Callback function fired when a key is pressed down in the input. */
   onKeyDown: PropTypes.func,
-  /** Callback fired when scroll near the end. */
+  /** Callback function fired when scrolling near the end of the dropdown. */
   onLoadMore: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  /** The short hint displayed in the input before the user select a value. */
+  /** The short hint displayed in the input before the user selects 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 used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   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 to display selected items.<br/>
+   * Example: `(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/>
+   * Duration to wait after entering search content before triggering a search.<br/>
    * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+   * If `true`, the default delayOnInput will be used.
    */
   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. */
+  /** Specifies the field name or expression used to compare values with the search string. */
   searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  /** Specifies a comparison operation used to search items. */
+  /** Specifies the comparison operation used to search items. */
   searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
-  /** If `true`, show checkbox in each dropdown item. */
+  /** If `true`, checkboxes will be shown next to each dropdown item. */
   selectBox: PropTypes.bool,
-  /** Style inline of component. */
+  /** Inline style for the component. */
   style: PropTypes.object,
-  /** Display sub content. */
+  /** Sub content to display. */
   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'). */
+  /** Used to identify the parent key (only used when `itemMode` is 'treeview'). */
   treeViewID: PropTypes.string,
-  /** Used for mapping into a nested list (only used for `itemMode` is 'treeview'). */
+  /** Used for mapping into a nested list (only used when `itemMode` is 'treeview'). */
   treeViewParentID: PropTypes.string,
-  /** The displayed value of component. */
+  /** The displayed value of the 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). */
+  /** An object default for value (used for load more). */
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  /**The variant to use. */
+  /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
   /**
    * ref methods