diginet-core-ui 1.3.96 → 1.3.97

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

@@ -2,28 +2,21 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, TreeView, Typography } from "../..";
+import Popover from "../../popover";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
-import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import ReactDOM, { createPortal } from 'react-dom';
-import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexColReverse, flexRow, flexWrap, inset, insetX, italic, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, textColor, userSelectNone, z } from "../../../styles/general";
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { animation, bgColor, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexRow, flexWrap, gap, inset, insetX, invisible, italic, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
-import { classNames, isMobile, mapParent, randomString, updatePosition } from "../../../utils";
+import { classNames, isMobile, randomString } from "../../../utils";
 const {
-  colors: {
-    system: {
-      white: systemWhite
-    },
-    fill: {
-      'scrollbar-tabbar': fillScrollbar
-    }
-  },
   typography: {
     paragraph1
-  },
-  spacing
+  }
 } = useTheme();
-const timing = {},
+const
+  // timing = {},
   currentValue = {},
   currentObjectDefault = {},
   isSearch = {},
@@ -95,13 +88,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
   const ref = useRef(null);
   const dropdownRef = useRef(null);
+  const timer = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
   const inputRef = useRef(null);
   const iconRef = useRef(null);
   const dropdownListRef = useRef(null);
   const searchRef = useRef(null);
-  const lastSearchRef = useRef(null);
+  // const lastSearchRef = useRef(null);
   const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
@@ -112,6 +106,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
   const [textValue, setTextValue] = useState('');
+  const [txtSearch, setTxtSearch] = useState('');
+  const [popoverWidth, setPopoverWidth] = useState(0);
   let valueTemp = valueProp || defaultValue || [];
 
   // only mode multi
@@ -129,19 +125,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
 
   /* Start handler */
-  const triggerInput = e => {
-    const target = e.currentTarget;
-    target.style.pointerEvents = 'none';
-    if (!dropdownListRef.current) {
-      onClickInput();
-    } else {
-      onClickOutsideOfInput({
-        target: null
-      });
-    }
-    setTimeout(() => {
-      target.style.pointerEvents = null;
-    }, 200);
+  const setShowDropdown = () => {
+    setOpenState(!openState);
   };
   const triggerBlur = (blur = true) => {
     if ((currentValue[unique] || currentValue[unique] === 0) && !multiple) {
@@ -159,58 +144,66 @@ 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 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 = () => {
-    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);
+    // if (displayExpr && Array.isArray(displayExpr)) {
+    //     displayExpr = displayExpr.join(' - ');
+    // }
+    // const keyArr = displayExpr?.match(separatorPattern);
     const dropdown = children ? jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown(null, keyArr) : mapTreeView();
-    const {
-      innerHeight
-    } = window;
-    const {
-      top,
-      left,
-      height,
-      width
-    } = formRef.current.getBoundingClientRect();
+    }, dataSource !== null && dataSource !== void 0 && dataSource.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 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,
-      className: `DGN-UI-Portal DGN-Dropdown-${unique}`
-    }, (multiple || allowSearch) && itemMode === 'normal' && !children ? jsx("div", {
+    // 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", {
       className: 'DGN-Dropdown-Search'
     }, jsx(InputBase, {
       inputRef: searchRef,
+      delayOnChange: searchDelayTime,
       viewType: 'outlined',
-      defaultValue: defaultSearch,
+      defaultValue: txtSearch,
       onChange: onChangeInput,
       style: {
         marginBottom: 1
@@ -218,9 +211,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onKeyDown: pressESCHandler,
       autoFocus: true
     })) : null, multiple && maximumSelectionLength ? jsx(Typography, {
-      style: {
-        padding: spacing([2, 4])
-      }
+      css: pd([2, 4])
     }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength) : null, jsx("div", {
       className: 'DGN-Dropdown-Box'
     }, dropdown), loading ? jsx("div", {
@@ -229,14 +220,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(CircularProgress, {
       size: 24
     })) : null);
-    if (!((multiple || allowSearch) && itemMode === 'normal' && !children)) {
-      inputRef.current.addEventListener('keydown', pressESCHandler);
-    }
-    document.documentElement.style.overflow = 'hidden';
+    // 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);
+      // document.addEventListener('wheel', onWheelHandler);
+      // document.addEventListener('mousedown', onClickOutsideOfInput);
       if (onLoadMore && dataSource.length < total) {
         dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
@@ -269,76 +260,107 @@ 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 onWheelHandler = e => {
+  //     if (!dropdownRef.current) {
+  //         document.removeEventListener('wheel', onWheelHandler);
+  //         return;
+  //     }
+  //     if (!dropdownRef.current?.contains(e.target)) {
+  //         closeDropdown();
+  //         triggerBlur();
+  //     }
+  // };
+
   const closeDropdown = () => {
     if (dropdownRef.current) {
       setOpenState(false);
-      document.removeEventListener('mousedown', onClickOutsideOfInput);
+      // document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
-      document.removeEventListener('wheel', onWheelHandler);
+      // document.removeEventListener('wheel', onWheelHandler);
       if (onLoadMore && dropdownListRef.current) {
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
         dropdownListRef.current = null;
       }
     }
-    document.documentElement.style.overflow = 'auto';
-    if (searchRef.current) lastSearchRef.current = '';
+    // document.documentElement.style.overflow = 'auto';
+    setTxtSearch('');
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
-  const renderDropdown = pattern => {
-    var _displayExpr2;
-    const keyArr = (_displayExpr2 = displayExpr) === null || _displayExpr2 === void 0 ? void 0 : _displayExpr2.match(separatorPattern);
-    const dropdown = mapDropdown(pattern, keyArr);
-    const el = document.createElement('div');
-    el.className = `DGN-Dropdown-Box`;
-    if (dropdownRef.current) {
-      var _dropdownRef$current$;
-      (_dropdownRef$current$ = dropdownRef.current.querySelector('.DGN-Dropdown-Box')) === null || _dropdownRef$current$ === void 0 ? void 0 : _dropdownRef$current$.remove();
-      ReactDOM.render(dropdown, dropdownRef.current.appendChild(el));
-      setTimeout(() => {
-        if (onLoadMore && dataSource.length < total) {
-          dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
-        }
-        updatePositionDropdown();
-      }, 0);
-    }
+
+  // const 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
+   * @return {boolean}
+   */
+  const handleRenderBySearch = (text = '') => {
+    if (!txtSearch || typeof text !== 'string') return true;
+    if (searchMode === 'startswith') {
+      return text.toLowerCase().startsWith(txtSearch.toLowerCase());
+    } else if (searchMode === 'equals') {
+      return text.toLowerCase() === txtSearch.toLowerCase();
+    } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
-  const handleRenderBySearch = (data, searchValue) => {
-    let existExpr;
-    typeof data === 'object' ? existExpr = searchExpr.filter(value => Object.keys(data).includes(value)) : existExpr = [data];
-    return existExpr.every(key => {
-      const _data = (data === null || data === void 0 ? void 0 : data[key]) || key.toString();
-      if (searchMode === 'contains') {
-        if (_data.indexOf(searchValue) !== -1) return false;
-      }
-      if (searchMode === 'startswith') {
-        if (_data.lastIndexOf(searchValue) === 0) return false;
-      }
-      if (searchMode === 'equals') {
-        if (_data === searchValue) return false;
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      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 _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => data[_]);
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
       }
-      return true;
-    });
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
   };
-  const mapDropdown = (pattern, keyArr) => {
-    var _currentObjectDefault;
+  const mapDropdown = () => {
+    var _dataSourceUsable, _currentObjectDefault;
     const items = [];
-    const dataSourceUsable = [...dataSource];
+    let dataSourceUsable = [...dataSource];
+
+    // search dataSource dựa trên txtSearch
+    dataSourceUsable = (_dataSourceUsable = dataSourceUsable) === null || _dataSourceUsable === void 0 ? void 0 : _dataSourceUsable.filter(i => {
+      if (searchExpr) {
+        // nếu map đc vs 1 trong những <key>(data[key]) của searchExpr
+        return !!searchExpr.find(j => handleRenderBySearch(i[j]));
+      } else {
+        // nếu map đc vs displayValue
+        return handleRenderBySearch(displayValue(i));
+      }
+    });
     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])) {
+        if ((currentObjectDefault[unique][index][valueExpr] || currentObjectDefault[unique][index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
           dataSourceUsable.unshift(currentObjectDefault[unique][index]);
         } else {
           // Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa
@@ -351,14 +373,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     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;
+      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 (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
           data,
@@ -371,7 +394,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText), jsx(Typography, {
           className: 'DGN-UI-Dropdown-SubText',
           type: 'p3',
-          color: 'text.sub'
+          color: 'text/sub'
         }, typeof subText === 'function' ? subText({
           data,
           index
@@ -464,8 +487,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       renderItem: renderItem
     }) : EmptyDataText);
   };
+
+  // remove item  cũ và append child item mới khi load more
   const loadMoreItemsDropdown = (i = 0, pattern) => {
-    var _currentObjectDefault2, _displayExpr3;
+    var _currentObjectDefault2, _displayExpr2;
     const dataSourceUsable = [...dataSource];
     // Nếu có load more thì đẩy đội tượng mặc định lên đầu
     let notExistItem = 0;
@@ -483,7 +508,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
     }
-    const keyArr = (_displayExpr3 = displayExpr) === null || _displayExpr3 === void 0 ? void 0 : _displayExpr3.match(separatorPattern);
+    const keyArr = (_displayExpr2 = displayExpr) === null || _displayExpr2 === void 0 ? void 0 : _displayExpr2.match(separatorPattern);
     for (i; i < length; i++) {
       const data = {
         ...dataSourceUsable[i]
@@ -509,7 +534,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText), jsx(Typography, {
           className: 'DGN-UI-Dropdown-SubText',
           type: 'p3',
-          color: 'text.sub'
+          color: 'text/sub'
         }, typeof subText === 'function' ? subText({
           data,
           index: i
@@ -568,37 +593,52 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       _src = prefix + url + suffix;
     }
     return jsx(Avatar, {
+      css: mgr([insideChip ? 0 : 2]),
       disabled: true,
       src: _src,
       width: insideChip ? 20 : 24,
       height: insideChip ? 20 : 24,
       style: {
-        ...iconExpr.style,
-        marginRight: spacing([insideChip ? 0 : 2])
+        ...iconExpr.style
       }
     });
   };
   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;
+    // if (dropdownListRef.current && _isMobile)
+    //     dropdownListRef.current.style.maxHeight = `${
+    //         Math.min(280, window.innerHeight) - (allowSearch ? 40 : 0)
+    //     }px`;
+    if (timer.current) {
+      clearTimeout(timer.current);
     }
-    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);
+    timer.current = setTimeout(() => {
+      if (!ref.current) {
+        window.removeEventListener('resize', customizeWidthDropdown);
+        return;
+      } else {
+        const {
+          width
+        } = ref.current.getBoundingClientRect();
+        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 onLoadMoreHandler = e => {
     if (loadMoreTimer.current) {
       clearTimeout(loadMoreTimer.current);
@@ -610,8 +650,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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);
+        var _dropdownListRef$curr, _currentObjectDefault3;
+        const length = ((_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length) - (((_currentObjectDefault3 = currentObjectDefault[unique]) === null || _currentObjectDefault3 === void 0 ? void 0 : _currentObjectDefault3.length) || 0);
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
         !!onLoadMore && onLoadMore({
           skip: length,
@@ -625,42 +665,48 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return false;
   };
   const onChangeInput = e => {
-    if (searchRef.current) lastSearchRef.current = searchRef.current.value;
-    const dataFilter = getData();
-    dataChosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
+    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;
+      // 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;
-    }
-    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 (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 (timing[unique]) clearTimeout(timing[unique]);
-    timing[unique] = setTimeout(() => {
-      var _searchExpr2;
-      renderDropdown(((_searchExpr2 = searchExpr) === null || _searchExpr2 === void 0 ? void 0 : _searchExpr2.length) > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
-    }, timeout.current || searchDelayTime);
+    // const 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) {
@@ -671,16 +717,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!onChange && onChange({
         value
       });
-      setTimeout(() => {
-        updatePositionDropdown();
-      }, 0);
+      // setTimeout(() => {
+      //     updatePositionDropdown();
+      // }, 0);
     } else if (multiple) {
       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);
+      // const newValueArr = [...currentValue[unique]];
+      const newValueArrState = [...valueMulti];
+      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') {
@@ -704,22 +750,23 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         //     ReactDOM.render(item, inputRef.current.appendChild(el));
         // }
       } else {
-        const index = newValueArr.indexOf(value);
-        newValueArr.splice(index, 1);
-        // newValueArrState.splice(index, 1);
+        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);
+
+      setValueMulti(newValueArrState);
       !!onChange && onChange({
-        value: newValueArr,
+        value: newValueArrState,
         data
       });
-      setTimeout(() => {
-        updatePositionDropdown();
-      }, 0);
+      // setTimeout(() => {
+      //     updatePositionDropdown();
+      // }, 0);
     } else {
       const isChanged = currentValue[unique] !== value;
       if (isChanged) {
@@ -739,11 +786,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
-    } else {
-      setTimeout(() => {
-        updatePositionDropdown();
-      }, 0);
     }
+    // else {
+    //     setTimeout(() => {
+    //         updatePositionDropdown();
+    //     }, 0);
+    // }
   };
 
   // const onChangeValueWithCheckbox = e => {
@@ -785,20 +833,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onClear = e => {
     if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
-    if (inputRef.current.tagName.toLowerCase() === 'div') {
+    if (multiple) {
+      setValueMulti([]);
       // inputRef.current.innerHTML = '';
       // if (dropdownListRef.current) {
       //     dropdownListRef.current.querySelectorAll('input').forEach(input => (input.checked = false));
       // }
     } else {
-      inputRef.current.value = '';
       setTextValue('');
     }
     // onChangeValue('', '');
     setValueMulti([]);
     setShowClear(false);
     e && e.target && e.target.blur();
-    updatePositionDropdown();
+    // updatePositionDropdown();
     onInput === null || onInput === void 0 ? void 0 : onInput({
       ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
       target: {
@@ -1065,11 +1113,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.addEventListener('click', onClickInput);
     }
     if (dropdownListRef.current) {
-      var _dropdownListRef$curr5, _dropdownListRef$curr6, _currentObjectDefault6;
+      var _dropdownListRef$curr2, _dropdownListRef$curr3, _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;
+      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 < 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);
@@ -1089,6 +1137,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
   }, [dataSource]);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const {
+        width
+      } = ref.current.getBoundingClientRect();
+      setPopoverWidth(width);
+    }
+  });
   /* End handler */
 
   /* Start component */
@@ -1122,12 +1178,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-UI-Dropdown-Form-Input'
     }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", {
       ...inputProps,
-      style: {
-        gap: spacing(0.5),
-        ...inputStyle
-      },
+      style: inputStyle,
       ref: inputRef,
-      css: _DropdownInputCSS,
+      css: [_DropdownInputCSS, gap([0.5])],
       className: classNames('dgn-dropdown-multiple', inputProps.className),
       onChange: e => {
         e.preventDefault();
@@ -1135,19 +1188,24 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, valueMulti.map((vl, index) => {
       let dataFilter = getData();
-      const data = dataFilter.find(v => v[valueExpr] === vl);
+      const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
       let text = '';
-      if (data) {
-        var _mask;
-        displayExpr = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr || valueExpr;
+      if (data || data === 0) {
+        displayExpr = displayExpr || valueExpr;
+        // 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]>}
         if (!mask && regexBetween.test(displayExpr)) {
-          var _displayExpr4;
-          mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
+          var _displayExpr3;
+          mask = (_displayExpr3 = displayExpr) === null || _displayExpr3 === void 0 ? void 0 : _displayExpr3.replace(regexBetween, _ => data[_]);
+        } else if (!mask) {
+          mask = typeof data !== 'object' ? data : '';
         }
-        text = (_mask = mask) === null || _mask === void 0 ? void 0 : _mask.replace(regexInclude, '');
+        text = mask.toString().replace(regexInclude, '');
       }
       let item;
       if (typeof renderSelectedItem === 'function') {
@@ -1157,6 +1215,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       } else {
         item = jsx(Chip, {
+          css: [parseWidth('100%'), parseMaxWidth('max-content')],
           key: index,
           startIcon: getIconFromData(data, true),
           label: text,
@@ -1203,13 +1262,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       name: 'Close',
       onClick: onClear
     }) : null, !loading ? jsx(ButtonIcon, {
+      key: openState,
+      css: animation,
       viewType: 'ghost',
-      name: 'ArrowDown',
-      className: 'icon-dropdown',
-      onClick: triggerInput,
-      style: {
-        transition: 'transform 0.5s'
-      },
+      name: openState ? 'ArrowUp' : 'ArrowDown',
+      onClick: setShowDropdown,
       disabled: disabled || readOnly
     }) : null));
   }, [openState, showClear, textValue, valueMulti, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, loading, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
@@ -1220,8 +1277,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, error) : null;
   }, [disabled, error, helperTextProps]);
   const DropdownView = useMemo(() => {
-    return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
-  }, [openState, valueMulti, dataSource, loading, maximumSelectionLength, multilineSelectedItem, multiple, selectBox]);
+    return jsx(Popover, {
+      css: [mgt([1]), overflowHidden],
+      ref: dropdownRef,
+      open: openState,
+      anchor: ref.current,
+      width: popoverWidth,
+      onClose: closeDropdown
+    }, showDropdown());
+    // return openState ? createPortal(showDropdown(), document.body) : null;
+  }, [openState, popoverWidth, valueMulti, dataSource, loading, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1242,12 +1307,12 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly, m
     ${displayFlex};
     ${itemsCenter};
     ${outlineNone};
-    ${bgTransparent};
+    ${bgColor('transparent')};
     ${borderNone};
     ${paragraph1};
     ${disabled ? cursorNotAllowed : readOnly ? cursorDefault : cursorPointer};
     ${parseWidth('100%')};
-    ${textColor('text.main')};
+    ${textColor('text/main')};
     ${pdt(0)};
     ${pdb([viewType !== 'outlined' ? 0 : 'inherit'])};
     ${pdl([viewType !== 'outlined' ? 0 : 4])};
@@ -1269,14 +1334,14 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly, m
             ${itemsCenter};
             ${justifyCenter};
             content: '${placeholder}';
-            ${textColor('text.sub')};
+            ${textColor('text/sub')};
         }
         &:not(:empty)::after {
-            visibility: hidden;
+            ${invisible};
         }
     }
     &:focus {
-        ${bgTransparent};
+        ${bgColor('transparent')};
     }
     .dropdown-item {
         &:not(:last-child) {
@@ -1288,7 +1353,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly, m
         }
     }
     .DGN-UI-Typography {
-        ${disabled && textColor('system.disabled')};
+        ${disabled && textColor('system/disabled')};
     }
 `;
 const IconCSS = viewType => css`
@@ -1308,52 +1373,47 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${!disabled && css`
                   &:not(:focus-within):hover {
                       &::before {
-                          ${borderBottomColor('system.active')};
+                          ${borderBottomColor('system/active')};
                       }
                       .css-${DropdownInputCSSName} {
-                          ${textColor('system.active')};
+                          ${textColor('system/active')};
                       }
                   }
               `}
               &:focus-within {
-                  ${borderBottomColor('line.focus')};
+                  ${borderBottomColor('line/focus')};
                   &::after {
                       ${borderBottomColor('inherit')};
                       transform: scaleX(1);
                   }
                   .css-${DropdownInputCSSName} {
-                      ${textColor('system.active')};
-                  }
-              }
-              &.dropdown-showing {
-                  .icon-dropdown {
-                      transform: rotateX(180deg);
+                      ${textColor('system/active')};
                   }
               }
               span:empty:before {
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  ${textColor('text.sub')};
+                  ${textColor('text/sub')};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  ${textColor('text.sub')};
+                  ${textColor('text/sub')};
               }
               &::before {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
-                  bottom: 0;
-                  ${viewType === 'underlined' && borderBottom(1, disabled ? 'system.disabled' : 'system.rest')}
+                  ${bottom(0)};
+                  ${viewType === 'underlined' && borderBottom(1, disabled ? 'system/disabled' : 'system/rest')}
               }
               &::after {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
-                  bottom: -1px;
+                  ${bottom(-1)};
                   ${borderBottom(2, 'transparent')};
                   transform: scaleX(0);
                   transform-origin: center;
@@ -1364,45 +1424,40 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${flexRow};
               ${itemsCenter};
               ${positionRelative};
-              ${borderRadius4px};
+              ${borderRadius(4)};
               ${boxBorder};
-              ${border(1, disabled ? 'system.disabled' : 'system.rest')};
+              ${border(1, disabled ? 'system/disabled' : 'system/rest')};
               ${parseWidth('100%')};
               ${parseMinHeight(40)};
               ${mgt([0.5])};
               ${!disabled && css`
                   &:not(:focus-within):hover {
-                      ${bgColor('fill.hover')};
-                      ${borderColor('system.active')};
+                      ${bgColor('fill/hover')};
+                      ${borderColor('system/active')};
                       input {
-                          ${bgColor('fill.hover')};
+                          ${bgColor('fill/hover')};
                       }
                   }
               `}
               &:focus-within {
-                  ${borderColor('line.focus')};
-              }
-              &.dropdown-showing {
-                  .icon-dropdown {
-                      transform: rotateX(180deg);
-                  }
+                  ${borderColor('line/focus')};
               }
               span:empty:before {
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  ${textColor('text.sub')};
+                  ${textColor('text/sub')};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  ${textColor('text.sub')};
+                  ${textColor('text/sub')};
               }
               &::after {
                   ${positionAbsolute};
                   ${pointerEventsNone};
-                  ${borderRadius4px};
+                  ${borderRadius(4)};
                   ${border(2, 'transparent')};
                   ${inset(-2)};
                   content: '';
@@ -1412,23 +1467,23 @@ const DropdownListCSS = loading => css`
     ${displayBlock};
     ${positionRelative};
     ${boxBorder};
-    ${borderRadius4px};
+    ${borderRadius(4)};
     ${parseWidth('100%')};
     ${parseMaxHeight(280)};
     ${loading ? overflowHidden : overflowAuto};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     ${z(1)};
     &::-webkit-scrollbar {
-        ${borderRadius4px};
+        ${borderRadius(4)};
         ${parseWidth(24)};
-        background-color: ${systemWhite} !important;
+        ${bgColor('system/white')};
     }
     &::-webkit-scrollbar-thumb {
         ${borderRadius(24)};
         ${border(8, 'transparent')};
+        ${bgColor('fill/scrollbar-tabbar')};
         mix-blend-mode: normal;
-        background-color: ${fillScrollbar} !important;
         background-clip: content-box;
     }
     .DGN-UI-TreeView {
@@ -1446,9 +1501,9 @@ const DropdownItemCSS = (multiple, selectBox) => css`
     ${userSelectNone};
     ${parseMinHeight(40)};
     ${parseWidth('100%')};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     ${pd([2, multiple && selectBox ? 0 : 4])};
-    ${textColor('text.main')};
+    ${textColor('text/main')};
     &.no-data {
         ${justifyCenter};
         ${cursorDefault};
@@ -1457,8 +1512,8 @@ const DropdownItemCSS = (multiple, selectBox) => css`
     &:not(.no-data):hover,
     &:not(.no-data):focus {
         ${outlineNone};
-        ${bgColor('fill.hover')};
-        ${textColor('system.active')};
+        ${bgColor('fill/hover')};
+        ${textColor('system/active')};
     }
 `;
 const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
@@ -1468,21 +1523,21 @@ const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
     ${parseHeight('max-content')};
     &.error {
         .css-${DropdownFormCSSName} {
-            ${borderColor('semantic.danger')};
+            ${borderColor('semantic/danger')};
             path {
-                ${fill('semantic.danger')};
+                ${fill('semantic/danger')};
             }
             &::before {
-                ${borderColor('semantic.danger')};
+                ${borderColor('semantic/danger')};
             }
         }
     }
     &.dgn-dropdown-loading,
     &.disabled {
         .css-${DropdownFormCSSName} {
-            ${borderColor('system.disabled')};
+            ${borderColor('system/disabled')};
             &::before {
-                ${borderColor('system.disabled')};
+                ${borderColor('system/disabled')};
             }
         }
     }
@@ -1494,32 +1549,36 @@ const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
         }
     }
 `;
-const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
-    ${positionFixed};
-    ${parseWidth(width)};
-    top: ${top}px;
-    left: ${left}px;
-    ${bgColor('system.white')};
-    ${z(1)};
-    ${isMobile && allowSearch && css`
-        ${parseHeight('max-content')};
-        ${displayFlex};
-        ${flexColReverse};
-        bottom: 0;
-        top: auto;
-    `}
-`;
+
+// const DropdownCSS = (topVl, leftVl, width, isMobile, allowSearch) => css`
+//     ${positionFixed};
+//     ${parseWidth(width)};
+//     ${top(topVl)};
+//     ${left(leftVl)};
+//     ${bgColor('system/white')};
+//     ${z(1)};
+//     ${isMobile &&
+//     allowSearch &&
+//     css`
+//         ${parseHeight('max-content')};
+//         ${displayFlex};
+//         ${flexColReverse};
+//         ${bottom(0)};
+//         ${top('auto')};
+//     `}
+// `;
+
 const LoadingProgressCSS = css`
     ${displayFlex};
     ${flexRow};
     ${justifyCenter};
     ${itemsCenter};
     ${positionAbsolute};
-    ${borderRadius4px};
+    ${borderRadius(4)};
     ${parseWidthHeight('100%')}
     ${bgColor('rgba(255, 255, 255, 0.6)')};
     ${z(2)};
-    top: 0;
+    ${top(0)};
 `;
 const DisabledCSS = css`
     pointer-events: none !important;
@@ -1552,6 +1611,7 @@ Dropdown.defaultProps = {
   placeholder: getGlobal('dropdownPlaceholder'),
   readOnly: false,
   required: false,
+  searchDelayTime: getGlobal('delayOnInput'),
   searchMode: 'contains',
   total: Number.MAX_SAFE_INTEGER,
   valueExpr: 'id',
@@ -1574,9 +1634,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Style inline of dropdown items. */
@@ -1585,14 +1645,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1626,8 +1686,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
   /** Callback fired when key down input */
@@ -1638,21 +1698,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1679,19 +1739,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };