diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,1624 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, Popup, TreeView, Typography } from "../..";
-import Popover from "../../popover";
-import { getGlobal } from "../../../global";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, 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, inset, insetX, invisible, italic, itemsCenter, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor, top, userSelectNone, z } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, getProp, isMobile, randomString } from "../../../utils";
-const currentValue = {},
-  isSearch = {},
-  allValue = {};
-const separatorPattern = /\{\w+\}/g;
-const regexBetween = /[^{}]+(?=})/g;
-const regexInclude = /{|}/g;
-const checkHasValue = value => {
-  return Array.isArray(value) ? value.length > 0 : value === 0 || !!value;
-};
-const convertData = (dt, valueExpr) => {
-  let data = dt || [];
-  let valueTemp = Array.isArray(data) ? data : [data];
-  valueTemp = valueTemp.map(i => i[valueExpr] || i);
-  return valueTemp;
-};
-const convertSearchDelayTime = searchDelayTime => {
-  var _searchDelayTime$matc, _searchDelayTime$matc2;
-  if (searchDelayTime === true) return getGlobal('delayOnInput');
-  const units = {
-    m: 60000,
-    s: 1000,
-    ms: 1
-  };
-  return typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
-};
-const uniqBy = (arr, iteratee) => {
-  const seen = new Set();
-  return arr.filter(item => {
-    const val = iteratee(item);
-    if (seen.has(val)) {
-      return false;
-    }
-    seen.add(val);
-    return true;
-  });
-};
-const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    spacing
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Dropdown'
-  });
-  const {
-    action = {},
-    allowSearch,
-    children,
-    className,
-    clearAble,
-    closeAfterSelect,
-    dataSource,
-    displayExpr: displayExprProp,
-    dropdownItemStyle,
-    error,
-    helperTextProps,
-    iconExpr,
-    inputProps,
-    inputStyle,
-    itemMode,
-    label,
-    labelProps,
-    limit,
-    loading,
-    maximumSelectionLength,
-    multilineSelectedItem,
-    multiple,
-    noDataText: noDataTextProp,
-    onChange,
-    onClosed,
-    onInput,
-    onKeyDown,
-    onLoadMore,
-    placeholder: placeholderProp,
-    readOnly,
-    renderItem,
-    renderSelectedItem,
-    required,
-    searchDelayTime: searchDelayTimeProp,
-    searchExpr: searchExprProp,
-    searchMode,
-    selectBox: selectBoxProp,
-    skip,
-    style,
-    subText,
-    total,
-    treeViewID,
-    treeViewParentID,
-    value: valueProp,
-    valueExpr,
-    valueObjectDefault,
-    viewType,
-    defaultValue,
-    disabled
-  } = props;
-  const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
-  const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
-  const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp === undefined ? getGlobal('delayOnInput') : searchDelayTimeProp);
-  let displayExpr = displayExprProp;
-  const noDataText = noDataTextProp || getGlobal('noDataText');
-  const placeholder = placeholderProp || getGlobal('dropdownPlaceholder');
-  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 loadMoreTimer = useRef(null);
-  const dataChosen = useRef([]);
-  const popupRef = useRef(null);
-  const filter = useRef({
-    skip: skip || 0,
-    limit: limit || 50
-  });
-  const [unique] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
-  const [openState, setOpenState] = useState(false);
-  const [showClear, setShowClear] = useState(false);
-  const [valueSingle, setValueSingle] = useState('');
-  const [txtSearch, setTxtSearch] = useState('');
-  const [popoverWidth, setPopoverWidth] = useState(0);
-  const [loadingState, setLoadingState] = useState(loading);
-  const [totalState, setTotalState] = useState(total);
-  const [dataSourceState, setDataSourceState] = useState(dataSource || []);
-  const [popupDataState, setPopupDataState] = useState({
-    title: '',
-    substitle: '',
-    description: ''
-  });
-  const [vlObjDefaultState, setVlObjDefaultState] = useState([]);
-  let valueTemp = valueProp || defaultValue || [];
-
-  // only mode multi
-  if (multiple) {
-    valueTemp = convertData(valueTemp, valueExpr);
-  }
-  const [valueMulti, setValueMulti] = useState(valueTemp);
-  const _isMobile = isMobile.any();
-  const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
-  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem, theme);
-  const _IconCSS = IconCSS(viewType, 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);
-  const _CheckBoxCSS = CheckBoxCSS(theme);
-
-  /* Start handler */
-  const setShowDropdown = () => {
-    setOpenState(!openState);
-  };
-  const triggerBlur = (blur = true) => {
-    if ((currentValue[unique] || currentValue[unique] === 0) && !multiple) {
-      setValueIntoInput(currentValue[unique]);
-    } else if (!multiple) {
-      setValueIntoInput('');
-    }
-    !!blur && inputRef.current.blur();
-  };
-  const onClickInput = e => {
-    if (disabled || readOnly || loadingState) return;
-    if (!dropdownListRef.current) {
-      if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
-        setOpenState(true);
-      }
-    }
-  };
-  const showDropdown = () => {
-    const dropdown = children ? jsx("div", {
-      css: _DropdownListCSS,
-      ref: dropdownListRef,
-      className: 'DGN-Dropdown-List',
-      onKeyDown: moveOnItem,
-      onScroll: onLoadMoreHandler,
-      tabIndex: -1
-    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
-    return jsx(Fragment, null, (multiple || allowSearch) && itemMode === 'normal' && !children ? jsx("div", {
-      className: 'DGN-Dropdown-Search'
-    }, jsx(InputBase, {
-      inputRef: searchRef,
-      delayOnChange: searchDelayTime,
-      viewType: 'outlined',
-      defaultValue: txtSearch,
-      onChange: onChangeInput,
-      style: {
-        marginBottom: 1
-      },
-      onKeyDown: pressESCHandler,
-      readOnly: loadingState,
-      autoFocus: true
-    })) : null, multiple && maximumSelectionLength ? jsx(Typography, {
-      css: css`
-                                padding: ${spacing([2, 4])};
-                            `
-    }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength) : null, jsx("div", {
-      className: 'DGN-Dropdown-Box'
-    }, dropdown), loadingState ? jsx("div", {
-      css: LoadingProgressCSS,
-      className: 'DGN-Dropdown-Loading-Progress'
-    }, jsx(CircularProgress, {
-      size: 24
-    })) : null);
-  };
-  const moveOnItem = e => {
-    if (e.key === 'Tab') {
-      closeDropdown(e, `key${e.key}`);
-      triggerBlur();
-    }
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      let activeEl = document.activeElement;
-      activeEl = e.key === 'ArrowDown' ? activeEl.nextElementSibling : activeEl.previousElementSibling;
-      if (activeEl) {
-        activeEl.focus();
-        activeEl.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-      }
-    }
-  };
-  const pressESCHandler = e => {
-    if (e.key === 'Tab') {
-      closeDropdown(e, `key${e.key}`);
-      triggerBlur();
-    } else if (e.key === 'ArrowDown' && dropdownListRef.current) {
-      e.preventDefault();
-      dropdownListRef.current.firstChild.focus();
-    }
-  };
-  const closeDropdown = (event, reason, value) => {
-    var _searchRef$current;
-    if (dropdownRef.current) {
-      setOpenState(false);
-    }
-    onClosed === null || onClosed === void 0 ? void 0 : onClosed({
-      event,
-      reason,
-      recentSearch: (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value,
-      value
-    });
-  };
-
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
-   */
-  const handleRenderBySearch = (text = '') => {
-    if (typeof text !== 'string') text = text.toString();
-    if (!txtSearch) 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());
-  };
-
-  /**
-   * 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 === null || data === void 0 ? void 0 : data[_]) || '');
-      } else if (!mask) {
-        mask = typeof data !== 'object' ? data : '';
-      }
-      text = mask.toString().replace(regexInclude, '');
-    }
-    return text;
-  };
-  const mapDropdown = () => {
-    var _dataSourceUsable2;
-    const items = [];
-    let dataSourceUsable = [...dataSourceState];
-
-    // search dataSource dựa trên txtSearch
-    if (!onInput || action !== null && action !== void 0 && action.loadData) {
-      var _dataSourceUsable;
-      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)) || handleRenderBySearch(i === null || i === void 0 ? void 0 : i[valueExpr]);
-        }
-      });
-    }
-    if (vlObjDefaultState && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
-      const length = vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length;
-      let existItemQuantity = 0;
-      for (let index = length - 1; index >= 0; index--) {
-        if ((vlObjDefaultState[index][valueExpr] || vlObjDefaultState[index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
-          dataSourceUsable.unshift(vlObjDefaultState[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
-          if (++existItemQuantity > limit) {
-            continue;
-          }
-        }
-      }
-    }
-    const length = (_dataSourceUsable2 = dataSourceUsable) === null || _dataSourceUsable2 === void 0 ? void 0 : _dataSourceUsable2.length;
-    for (let index = 0; index < length; index++) {
-      const data = dataSourceUsable[index];
-      if (!data) continue;
-      const itemHidden = typeof data === 'object' ? data['hidden'] : false;
-      if (itemHidden) continue;
-      let displayText = displayValue(data);
-      if (subText) {
-        displayText = jsx(Fragment, null, jsx(Typography, {
-          className: 'DGN-UI-Dropdown-PrimaryText',
-          type: 'p1'
-        }, displayText), jsx(Typography, {
-          className: 'DGN-UI-Dropdown-SubText',
-          type: 'p3',
-          color: 'text/sub'
-        }, typeof subText === 'function' ? subText({
-          data,
-          index
-        }) : data[subText] || subText));
-      }
-      const value = typeof data === 'object' ? data[valueExpr] : data;
-      let itemDisabled = typeof data === 'object' ? data['disabled'] : false;
-      const icon = getIconFromData(data);
-      const text = renderItem && typeof renderItem === 'function' ? renderItem({
-        data,
-        index
-      }) : jsx(Typography, {
-        type: 'p1'
-      }, displayText);
-      if (multiple && selectBox) {
-        const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
-        const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
-        itemDisabled = itemDisabled || isMaximumSelection && !checked;
-        items.push(jsx("div", {
-          key: index,
-          css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          className: 'DGN-UI-Dropdown-Item',
-          onKeyDown: e => {
-            if (itemDisabled) return;
-            if (e.key === 'Enter') e.currentTarget.firstChild.click();
-          },
-          tabIndex: -1
-        }, jsx(Checkbox, {
-          css: _CheckBoxCSS,
-          forTreeView: true,
-          checked: checked,
-          value: value,
-          disabled: itemDisabled,
-          onChange: e => onChangeValue(e, displayText, value, icon, data, index)
-        }, icon, text)));
-      } else {
-        items.push(jsx("div", {
-          key: index,
-          css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
-          className: 'DGN-UI-Dropdown-Item',
-          onClick: e => {
-            if (itemDisabled) return;
-            onChangeValue(e, displayText, value, icon, data, index);
-          },
-          onKeyDown: e => {
-            if (itemDisabled) return;
-            if (e.key === 'Enter') onChangeValue(e, displayText, value, icon, data, index);
-          },
-          tabIndex: -1,
-          style: dropdownItemStyle
-        }, icon, text));
-      }
-    }
-    return jsx("div", {
-      css: _DropdownListCSS,
-      ref: dropdownListRef,
-      className: 'DGN-Dropdown-List',
-      onKeyDown: moveOnItem,
-      onScroll: onLoadMoreHandler,
-      tabIndex: -1
-    }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
-  };
-  const mapTreeView = () => {
-    return jsx("div", {
-      css: _DropdownListCSS,
-      ref: dropdownListRef,
-      className: 'DGN-Dropdown-List',
-      onKeyDown: moveOnItem,
-      onScroll: onLoadMoreHandler,
-      tabIndex: -1
-    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? jsx(TreeView, {
-      dataSource: dataSourceState,
-      displayExpr: displayExpr,
-      valueExpr: valueExpr,
-      multiple: multiple,
-      selectBox: selectBox,
-      allowSearch: allowSearch,
-      searchProps: {
-        autoFocus: true,
-        inputRef: searchRef
-      },
-      searchDelayTime: searchDelayTime,
-      id: treeViewID,
-      parentID: treeViewParentID,
-      value: typeof currentValue[unique] === 'string' ? [currentValue[unique]] : currentValue[unique],
-      onChange: (e, value) => onChangeValue(e, '', multiple ? value : e.value),
-      renderItem: renderItem
-    }) : EmptyDataText);
-  };
-
-  // remove item  cũ và append child item mới khi load more
-  const loadMoreItemsDropdown = (i = 0, pattern) => {
-    var _displayExpr2;
-    const dataSourceUsable = [...dataSourceState];
-    // Nếu có load more thì đẩy đội tượng mặc định lên đầu
-    let notExistItem = 0;
-    if (onLoadMore && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
-      const length = vlObjDefaultState.length;
-      for (let index = length - 1; index >= 0; index--) {
-        if (!dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
-          notExistItem++;
-          dataSourceUsable.unshift(vlObjDefaultState[index]);
-        }
-      }
-    }
-    const length = dataSourceUsable === null || dataSourceUsable === void 0 ? void 0 : dataSourceUsable.length;
-    let num = 0;
-    if (displayExpr && Array.isArray(displayExpr)) {
-      displayExpr = displayExpr.join(' - ');
-    }
-    const keyArr = (_displayExpr2 = displayExpr) === null || _displayExpr2 === void 0 ? void 0 : _displayExpr2.match(separatorPattern);
-    for (i; i < length; i++) {
-      const data = {
-        ...dataSourceUsable[i]
-      };
-      // Nếu đối tượng đã được hiển thị ở trên rồi thì không hiển thị ra nữa
-      if (onLoadMore && i > notExistItem && vlObjDefaultState.some(valueObject => valueObject[valueExpr] === data[valueExpr])) continue;
-      let displayText = typeof data === 'object' ? keyArr ? displayValue(data) : data[displayExpr] || data[valueExpr] : data;
-      if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
-      const value = typeof data === 'object' ? data[valueExpr] : data;
-      const icon = getIconFromData(data);
-      const text = jsx(Typography, {
-        type: 'p1'
-      }, displayText);
-      if (renderItem && typeof renderItem === 'function') {
-        displayText = renderItem({
-          data,
-          index: i
-        });
-      } else if (subText) {
-        displayText = jsx(Fragment, null, jsx(Typography, {
-          className: 'DGN-UI-Dropdown-PrimaryText',
-          type: 'p1'
-        }, displayText), jsx(Typography, {
-          className: 'DGN-UI-Dropdown-SubText',
-          type: 'p3',
-          color: 'text/sub'
-        }, typeof subText === 'function' ? subText({
-          data,
-          index: i
-        }) : data[subText] || subText));
-      }
-      const dropdownItem = document.createElement('div');
-      dropdownItem.className = `DGN-UI-Dropdown-Item css-${_DropdownItemCSS.name}`;
-      dropdownItem.tabIndex = -1;
-      dropdownItem.addEventListener('click', e => onChangeValue(e, displayText, value, icon, data, i));
-      dropdownItem.addEventListener('keypress', e => {
-        if (e.key === 'Enter') dropdownItem.firstChild.click();
-      });
-      let item = null;
-      if (multiple && selectBox) {
-        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
-        item = jsx(Checkbox, {
-          css: _CheckBoxCSS,
-          forTreeView: true,
-          checked: checked
-        }, icon, text);
-      } else {
-        item = jsx(Fragment, null, icon, text);
-      }
-      if (!dropdownListRef.current) {
-        return;
-      }
-      ReactDOM.render(item, dropdownListRef.current.appendChild(dropdownItem));
-      if (++num === 100) {
-        timerRef.current = setTimeout(() => {
-          loadMoreItemsDropdown(i + 1, pattern);
-        }, 1000);
-        break;
-      }
-    }
-  };
-  const getIconFromData = (data, insideChip = false) => {
-    if (!data || !iconExpr || iconExpr === 'none') return null;
-    let _src;
-    if (typeof iconExpr === 'string') _src = data[iconExpr];else {
-      let prefix = iconExpr.prefix || '';
-      const suffix = iconExpr.suffix || '';
-      const url = data[iconExpr.key];
-      if (prefix && /^http/i.test(prefix) && /^http/i.test(url)) {
-        prefix = '';
-      }
-      _src = prefix + url + suffix;
-    }
-    return jsx(Avatar, {
-      css: css`
-                        margin-right: ${spacing([insideChip ? 0 : 2])};
-                    `,
-      disabled: true,
-      src: _src,
-      width: insideChip ? 20 : 24,
-      height: insideChip ? 20 : 24,
-      style: {
-        ...iconExpr.style
-      }
-    });
-  };
-  const customizeWidthDropdown = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      if (ref.current) {
-        const {
-          width
-        } = ref.current.getBoundingClientRect();
-        setPopoverWidth(width);
-      }
-    }, 300);
-  };
-  const handleActionLoadData = isReset => {
-    const {
-      skip,
-      limit,
-      strSearch: search
-    } = filter.current;
-    const params = onLoadMore ? {
-      skip,
-      limit,
-      search
-    } : {
-      search
-    };
-    const callbackSave = (error, data) => {
-      setLoadingState(false);
-      if (error) {
-        let _data = {};
-        if (error.originalError) {
-          const {
-            message,
-            originalError,
-            customMessage,
-            code: codeError
-          } = error;
-          const _customMessage = customMessage && typeof customMessage === 'object' ? customMessage[codeError] : customMessage;
-          let messageError = '';
-          Object.keys(originalError).forEach(key => {
-            messageError += `${key}: ${JSON.stringify(originalError[key], null, 8)}\n`;
-          });
-          _data = {
-            title: getGlobal('error') + (codeError ? `: ${codeError}` : ''),
-            subtitle: _customMessage || message || getGlobal('unknownError'),
-            description: messageError
-          };
-        } else {
-          var _data$data;
-          const message = (data === null || data === void 0 ? void 0 : data.message) || (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.Message) || data;
-          _data = {
-            description: message || getGlobal('unknownError')
-          };
-        }
-        setPopupDataState(_data);
-        popupRef.current.instance.show();
-        return false;
-      } else if (data) {
-        let rows = [];
-        if (Array.isArray(data)) {
-          rows = data;
-        } else {
-          rows = data && data.rows ? data.rows : dataSourceState;
-          const total = data && data.total ? data.total : data === null || data === void 0 ? void 0 : data.length;
-          setTotalState(total);
-        }
-        setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
-      }
-    };
-    setLoadingState(true);
-    action.loadData(params, callbackSave);
-  };
-  const onLoadMoreHandler = e => {
-    e.persist();
-    if (loadMoreTimer.current) {
-      clearTimeout(loadMoreTimer.current);
-    }
-    loadMoreTimer.current = setTimeout(() => {
-      if (onLoadMore && (dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length) < totalState && !loadingState) {
-        const {
-          scrollTop,
-          scrollHeight,
-          offsetHeight
-        } = e.target;
-        if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
-          var _dropdownListRef$curr;
-          const length = ((_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length) - ((vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) || 0);
-          // dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
-          if (!!onLoadMore && typeof onLoadMore === 'boolean' && action !== null && action !== void 0 && action.loadData) {
-            filter.current.skip = length;
-            filter.current.limit = limit;
-            handleActionLoadData();
-          } else !!onLoadMore && onLoadMore({
-            skip: length,
-            limit: limit
-          });
-        }
-      }
-    }, 300);
-  };
-  const onPreventKeyDownHandler = e => {
-    e.preventDefault();
-    return false;
-  };
-  const onChangeInput = e => {
-    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 (onInput) {
-      onInput(e);
-    }
-    if (action !== null && action !== void 0 && action.loadData && !!onLoadMore) {
-      filter.current.strSearch = e.target.value;
-      handleActionLoadData(true);
-    }
-  };
-  const onChangeValue = (e, displayText, value, icon, data) => {
-    if (itemMode === 'treeview') {
-      if (valueProp === undefined) {
-        setValueMulti(value);
-        setValueIntoInput(value);
-        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loadingState);
-      }
-      !!onChange && onChange({
-        value
-      });
-    } else if (multiple) {
-      if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
-      // const newValueArr = [...currentValue[unique]];
-      const newValueArrState = [...valueMulti];
-      if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
-        // newValueArr.push(value);
-        newValueArrState.push(value);
-      } else {
-        const index = newValueArrState.indexOf(value);
-        newValueArrState.splice(index, 1);
-      }
-      setValueMulti(newValueArrState);
-      !!onChange && onChange({
-        value: newValueArrState,
-        data
-      });
-    } else {
-      const isChanged = currentValue[unique] !== value;
-      if (isChanged) {
-        if (valueProp === undefined) {
-          allValue[unique].push(value);
-          setValueIntoInput(value);
-          setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
-        }
-        !!onChange && onChange({
-          value,
-          data
-        });
-      } else {
-        // Fix lost icon when select same value
-        triggerBlur(false);
-      }
-    }
-    if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
-      closeDropdown(e, 'changeValue', value);
-    }
-  };
-  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);
-    }
-
-    // logic mới
-    const newValueArrState = ((_ref = [...valueMulti]) === null || _ref === void 0 ? void 0 : _ref.filter(i => i !== value)) || [];
-    setValueMulti(newValueArrState);
-    !!onChange && onChange({
-      value: newValueArrState,
-      removed: value
-    });
-  };
-  const onClear = e => {
-    if (disabled || readOnly || loadingState || !clearAble) return;
-    currentValue[unique] = multiple ? [] : '';
-    if (multiple) {
-      setValueMulti([]);
-    } else {
-      setValueSingle('');
-    }
-    setValueMulti([]);
-    setShowClear(false);
-    e && e.target && e.target.blur();
-    onInput === null || onInput === void 0 ? void 0 : onInput({
-      ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
-      target: {
-        value: ''
-      }
-    });
-    !!onChange && onChange({
-      value: currentValue[unique]
-    });
-  };
-  const setPreviousValue = () => {
-    var _allValue$unique;
-    allValue[unique].pop();
-    setValueIntoInput(allValue[unique][((_allValue$unique = allValue[unique]) === null || _allValue$unique === void 0 ? void 0 : _allValue$unique.length) - 1]);
-  };
-  const setValueIntoInput = source => {
-    if (!source && source !== 0) {
-      if (multiple) {
-        currentValue[unique] = [];
-      } else {
-        currentValue[unique] = '';
-        setValueSingle('');
-      }
-      return;
-    }
-    const length = dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length;
-    const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
-    if (displayKey && Array.isArray(displayKey)) {
-      displayExpr = displayExpr.join(' - ');
-    }
-    const keyArr = displayKey === null || displayKey === void 0 ? void 0 : displayKey.match(separatorPattern);
-    if (multiple) {
-      let valueArr = source;
-      if (!Array.isArray(valueArr)) {
-        valueArr = [valueArr];
-      }
-      valueArr = [...new Set(valueArr)];
-      currentValue[unique] = [];
-      valueArr.forEach(v => {
-        for (let i = 0; i < length; i++) {
-          if (!dataSourceState[i]) continue;
-          if (typeof dataSourceState[i] === 'object' && dataSourceState[i][valueExpr] === v || dataSourceState[i] === v) {
-            setMultipleValueHandler(dataSourceState[i], v, keyArr, i);
-            return;
-          }
-        }
-        if (vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
-          const itemOfValue = vlObjDefaultState.find(valueObject => valueObject[valueExpr] === v || valueObject === v);
-          if (itemOfValue) {
-            setMultipleValueHandler(itemOfValue, v, keyArr);
-          }
-        }
-      });
-    } else {
-      currentValue[unique] = source;
-      for (let i = 0; i < length; i++) {
-        if (!dataSourceState[i]) continue;
-        if (dataSourceState[i][valueExpr] === source || dataSourceState[i] === source) {
-          setSingleValueHandler(dataSourceState[i], keyArr);
-          return;
-        }
-      }
-      if (vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
-        const itemOfValue = vlObjDefaultState.find(valueObject => valueObject[valueExpr] === source || valueObject === source);
-        if (itemOfValue) {
-          setSingleValueHandler(itemOfValue, keyArr);
-          return;
-        }
-      }
-    }
-  };
-  const setMultipleValueHandler = (data, value) => {
-    currentValue[unique].push(value);
-  };
-  const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? displayValue(data) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
-    const renderContent = content => jsx(Typography, {
-      type: 'p1',
-      lineClamp: multilineSelectedItem ? undefined : 1,
-      hoverTooltip: !_isMobile
-    }, content);
-    if (typeof renderSelectedItem === 'function') {
-      const item = renderSelectedItem({
-        data
-      });
-      const el = jsx("div", {
-        css: [displayFlex, parseWidth('100%'), parseMinHeight(24), !multilineSelectedItem && parseMaxHeight(24)]
-      }, item);
-      setValueSingle(el);
-    } else if (iconExpr && iconExpr !== 'none') {
-      const icon = getIconFromData(data);
-      const valueWithIcon = jsx(Fragment, null, icon ? icon : null, renderContent(text));
-      const el = jsx("div", {
-        css: [displayFlex, itemsCenter, parseMinHeight(24)]
-      }, valueWithIcon);
-      setValueSingle(el);
-    } else {
-      setValueSingle(text);
-    }
-  };
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      ...action,
-      closeDropdown: () => {
-        closeDropdown(null, 'ref');
-      },
-      showDropdown: () => {
-        setOpenState(true);
-      },
-      onClear,
-      setPreviousValue,
-      setValue: value => {
-        var _allValue$unique2;
-        if (allValue[unique][((_allValue$unique2 = allValue[unique]) === null || _allValue$unique2 === void 0 ? void 0 : _allValue$unique2.length) - 1] !== value) {
-          allValue[unique].push(value);
-        }
-        setValueIntoInput(value);
-      }
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    // keep old method
-    currentRef.closeDropdown = () => closeDropdown(null, 'ref');
-    currentRef.showDropdown = () => setOpenState(true);
-    currentRef.onClear = onClear;
-    currentRef.setPreviousValue = setPreviousValue;
-    currentRef.setValue = value => {
-      var _allValue$unique3;
-      if (allValue[unique][((_allValue$unique3 = allValue[unique]) === null || _allValue$unique3 === void 0 ? void 0 : _allValue$unique3.length) - 1] !== value) {
-        allValue[unique].push(value);
-      }
-      setValueIntoInput(value);
-    };
-    currentRef.DOM = ref.current;
-    return currentRef;
-  });
-  useLayoutEffect(() => {
-    window.addEventListener('resize', customizeWidthDropdown);
-    return () => {
-      window.removeEventListener('resize', customizeWidthDropdown);
-    };
-  }, []);
-  useEffect(() => {
-    setLoadingState(loading);
-  }, [loading]);
-  useEffect(() => {
-    setTotalState(total);
-  }, [total]);
-  useEffect(() => {
-    setDataSourceState(dataSource || []);
-  }, [dataSource]);
-  useEffect(() => {
-    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
-  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loadingState]);
-  useEffect(() => {
-    if (multiple) {
-      if (valueMulti !== null && valueMulti !== void 0 && valueMulti.length) {
-        const dataFilter = getData();
-        dataChosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
-      } else dataChosen.current = [];
-    }
-    if (valueObjectDefault) {
-      if (Array.isArray(valueObjectDefault)) {
-        setVlObjDefaultState([...dataChosen.current, ...valueObjectDefault]);
-      } else if (typeof valueObjectDefault === 'object') {
-        var _Object$keys;
-        setVlObjDefaultState(((_Object$keys = Object.keys(valueObjectDefault)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 0 ? [...dataChosen.current, valueObjectDefault] : [...dataChosen.current]);
-      }
-    } else {
-      setVlObjDefaultState([...dataChosen.current]);
-    }
-  }, [valueObjectDefault, valueMulti]);
-  useEffect(() => {
-    allValue[unique] = [];
-    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);
-    }
-    return () => {
-      allValue[unique] = null;
-      closeDropdown(null, 'cleanup');
-    };
-  }, []);
-  useEffect(() => {
-    var _allValue$unique4;
-    if (allValue[unique][((_allValue$unique4 = allValue[unique]) === null || _allValue$unique4 === void 0 ? void 0 : _allValue$unique4.length) - 1] !== valueProp) {
-      allValue[unique].push(valueProp);
-    }
-    if (multiple && valueProp) {
-      setValueMulti(convertData(valueProp, valueExpr));
-    }
-    // Close dropdown treeview by children when select item
-    if (children && (closeAfterSelect === true || closeAfterSelect === undefined && !multiple)) {
-      closeDropdown(null, 'treeView');
-    }
-  }, [valueProp]);
-  useEffect(() => {
-    if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
-      setValueIntoInput(valueProp);
-    }
-  }, [valueProp, dataSourceState, vlObjDefaultState]);
-  useEffect(() => {
-    inputRef.current.readOnly = readOnly || inputProps.readOnly;
-    if (disabled || readOnly || children) {
-      inputRef.current.addEventListener('keydown', onPreventKeyDownHandler);
-    } else {
-      inputRef.current.addEventListener('keydown', onKeyDown);
-    }
-    return () => {
-      if (!ref.current || !inputRef.current || !iconRef.current) return;
-      if (disabled || readOnly || children) {
-        inputRef.current.removeEventListener('keydown', onPreventKeyDownHandler);
-      } else {
-        inputRef.current.removeEventListener('keydown', onKeyDown);
-      }
-      closeDropdown(null, 'cleanup');
-    };
-  }, [disabled, readOnly, displayExpr, multiple, allowSearch, viewType, closeAfterSelect, selectBox]);
-  useEffect(() => {
-    if (!disabled && !readOnly) {
-      inputRef.current.addEventListener('click', onClickInput);
-      inputRef.current.addEventListener('input', onChangeInput);
-    }
-    return () => {
-      if (!disabled && !readOnly && inputRef.current) {
-        inputRef.current.removeEventListener('click', onClickInput);
-        inputRef.current.removeEventListener('input', onChangeInput);
-      }
-    };
-  }, [onChange, children]);
-  useEffect(() => {
-    if (!disabled && !readOnly) {
-      inputRef.current.addEventListener('click', onClickInput);
-    }
-    if (dropdownListRef.current) {
-      var _dropdownListRef$curr2, _dropdownListRef$curr3;
-      if (!disabled && !readOnly) {
-        inputRef.current.addEventListener('input', onChangeInput);
-      }
-      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);
-      } else {
-        isSearch[unique] = false;
-      }
-    } else {
-      if (!multiple && !disabled && !readOnly) {
-        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);
-      }
-    };
-  }, [dataSourceState]);
-  useEffect(() => {
-    if (!openState && txtSearch) {
-      setTxtSearch('');
-      if (action !== null && action !== void 0 && action.loadData && !!onLoadMore) {
-        filter.current.strSearch = '';
-        handleActionLoadData(true);
-      }
-    }
-  }, [openState]);
-  useLayoutEffect(() => {
-    if (ref.current) {
-      const {
-        width
-      } = ref.current.getBoundingClientRect();
-      setPopoverWidth(width);
-    }
-  });
-  /* End handler */
-
-  /* Start component */
-  const EmptyDataText = jsx("div", {
-    css: _DropdownItemCSS,
-    className: 'no-data'
-  }, noDataText);
-  const LabelView = useMemo(() => label ? jsx(Label, {
-    required: required,
-    disabled: disabled,
-    ...labelProps
-  }, label) : null, [label, required, disabled, labelProps]);
-  const getData = () => {
-    let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
-    dataFilter = uniqBy([...vlObjDefaultState, ...dataFilter], data => data === null || data === void 0 ? void 0 : data[valueExpr]);
-    return dataFilter;
-  };
-  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;
-      }
-    }
-  }, valueSingle) : jsx("div", {
-    css: _DropdownInputCSS,
-    onClick: onClickInput
-  }, jsx(Typography, {
-    ...inputProps,
-    ref: inputRef,
-    hoverTooltip: true,
-    lineClamp: multilineSelectedItem ? undefined : 1,
-    type: 'p1',
-    style: {
-      lineHeight: multiple ? '30px' : '24px',
-      ...inputStyle
-    },
-    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 = 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", {
-    ref: ref,
-    css: _DropdownRootCSS,
-    style: style,
-    className: classNames('DGN-UI-Dropdown', className, error && 'error', loadingState && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
-  }, LabelView, InputView, ErrorView), DropdownView, jsx(Popup, {
-    ref: popupRef,
-    type: 'danger',
-    ...popupDataState
-  }));
-}));
-
-/* Start styled */
-const InputCSS = (multiple, renderSelectedItem) => css`
-    ${displayFlex};
-    ${positionRelative};
-    ${parseWidth(!multiple && renderSelectedItem ? 'calc(100% - 34px)' : '100%')};
-`;
-const PopoverCSS = ({
-  spacing
-}) => css`
-    margin-top: ${spacing([1])};
-    ${overflowHidden};
-`;
-const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem, {
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${displayFlex};
-    ${itemsCenter};
-    ${outlineNone};
-    ${bgColor('transparent')};
-    ${borderNone};
-    ${typography.paragraph1};
-    ${disabled ? cursorNotAllowed : readOnly ? cursorDefault : cursorPointer};
-    ${parseWidth('100%')};
-    ${textColor(getProp(colors, 'text/main'))};
-    padding-top: ${spacing([0])};
-    padding-bottom: ${spacing([viewType !== 'outlined' ? 0 : 'inherit'])};
-    padding-left: ${spacing([viewType !== 'outlined' ? 0 : 4])};
-    gap: ${spacing([0.5])};
-    ${parseMinHeight(multiple ? 30 : 24)};
-    &.dgn-dropdown-multiple {
-        ${displayFlex};
-        ${flexWrap};
-        ${overflowHidden};
-        ${breakWord};
-        ${!multiple && css`
-            ${parseMinHeight(24)};
-            ${parseMaxWidth('100%')};
-            ${!multilineSelectedItem && parseMaxHeight(24)};
-        `};
-        &::after {
-            ${displayFlex};
-            ${flexRow};
-            ${positionAbsolute};
-            ${itemsCenter};
-            ${justifyCenter};
-            content: '${placeholder}';
-            ${textColor(getProp(colors, 'text/sub'))};
-        }
-        &:not(:empty)::after {
-            ${invisible};
-        }
-    }
-    &:focus {
-        ${bgColor('transparent')};
-    }
-    .dropdown-item {
-        &:not(:last-child) {
-            margin-right: ${spacing([1.25])};
-        }
-        svg {
-            ${boxBorder};
-            padding: ${spacing([0.5])};
-        }
-    }
-    .DGN-UI-Typography {
-        ${disabled && textColor(getProp(colors, 'system/disabled'))};
-    }
-`;
-const IconCSS = (viewType, {
-  spacing
-}) => css`
-    ${displayFlex};
-    ${itemsCenter};
-    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
-}) => 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
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    ${boxBorder};
-    ${borderRadius(4)};
-    ${parseWidth('100%')};
-    ${parseMaxHeight(280)};
-    ${loading ? overflowHidden : overflowAuto};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    ${z(1)};
-    &::-webkit-scrollbar {
-        ${borderRadius(4)};
-        ${parseWidth(24)};
-        ${bgColor(getProp(colors, 'system/standard'))};
-    }
-    &::-webkit-scrollbar-thumb {
-        ${parseMinHeight(40)};
-        ${borderRadius(24)};
-        ${border(8, 'transparent')};
-        ${bgColor(getProp(colors, 'fill/scrollbar_rest'))};
-        mix-blend-mode: normal;
-        background-clip: content-box;
-    }
-    .DGN-UI-TreeView {
-        padding: ${spacing([0.25])};
-    }
-`;
-const DropdownItemCSS = (multiple, selectBox, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${itemsCenter};
-    ${justifyStart};
-    ${boxBorder};
-    ${cursorPointer};
-    ${userSelectNone};
-    ${parseMinHeight(40)};
-    ${parseWidth('100%')};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    padding: ${spacing([2, multiple && selectBox ? 0 : 4])};
-    ${textColor(getProp(colors, 'text/main'))};
-    &.no-data {
-        ${justifyCenter};
-        ${cursorDefault};
-        ${italic};
-    }
-    &:not(.no-data):hover,
-    &:not(.no-data):focus {
-        ${outlineNone};
-        ${bgColor(getProp(colors, 'fill/hover'))};
-        ${textColor(getProp(colors, 'system/active'))};
-    }
-`;
-const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName, {
-  colors,
-  spacing
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    margin-bottom: ${spacing([5])};
-    ${parseHeight('max-content')};
-    &.error {
-        .css-${DropdownFormCSSName} {
-            ${borderColor(getProp(colors, 'semantic/danger'))};
-            path {
-                ${fill(getProp(colors, 'semantic/danger'))};
-            }
-            &::before {
-                ${borderColor(getProp(colors, 'semantic/danger'))};
-            }
-        }
-    }
-    &.dgn-dropdown-loading,
-    &.disabled {
-        .css-${DropdownFormCSSName} {
-            ${borderColor(getProp(colors, 'system/disabled'))};
-            &::before {
-                ${borderColor(getProp(colors, 'system/disabled'))};
-            }
-        }
-    }
-    &.readOnly {
-        .css-${DropdownInputCSSName} {
-            .dropdown-item {
-                ${pointerEventsNone};
-            }
-        }
-    }
-`;
-const LoadingProgressCSS = css`
-    ${displayFlex};
-    ${flexRow};
-    ${justifyCenter};
-    ${itemsCenter};
-    ${positionAbsolute};
-    ${borderRadius(4)};
-    ${parseWidthHeight('100%')}
-    ${bgColor('rgba(255, 255, 255, 0.6)')};
-    ${z(2)};
-    ${top(0)};
-`;
-const DisabledCSS = css`
-    pointer-events: none !important;
-    opacity: 0.4 !important;
-`;
-const CheckBoxCSS = ({
-  spacing
-}) => css`
-    ${parseWidthHeight('100%')};
-    padding: ${spacing([0, 4])};
-`;
-/* End styled */
-
-// Dropdown.defaultProps = {
-//     allowSearch: true,
-//     className: '',
-//     clearAble: false,
-//     dataSource: [],
-//     disabled: false,
-//     displayExpr: 'name',
-//     error: '',
-//     iconExpr: 'none',
-//     inputProps: {},
-//     itemMode: 'normal',
-//     label: '',
-//     limit: 50,
-//     loading: false,
-//     multilineSelectedItem: false,
-//     multiple: false,
-//     noDataText: getGlobal('noDataText'),
-//     placeholder: getGlobal('dropdownPlaceholder'),
-//     readOnly: false,
-//     required: false,
-//     searchDelayTime: getGlobal('delayOnInput'),
-//     searchMode: 'contains',
-//     total: Number.MAX_SAFE_INTEGER,
-//     valueExpr: 'id',
-//     viewType: 'underlined',
-// };
-
-Dropdown.propTypes = {
-  action: PropTypes.shape({
-    loadData: PropTypes.func
-  }),
-  /** If `true`, the input box for searching will be displayed. */
-  allowSearch: PropTypes.bool,
-  /** The content to be displayed inside the Dropdown box, such as TreeView. */
-  children: PropTypes.node,
-  /** The CSS class for the component. */
-  className: PropTypes.string,
-  /** If `true`, the clear button will be displayed. */
-  clearAble: PropTypes.bool,
-  /** 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,
-  /** 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,
-  /** 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]),
-  /**  Inline style for dropdown items. */
-  dropdownItemStyle: PropTypes.object,
-  /** 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,
-  /** The field name used for displaying icons.<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,
-    prefix: PropTypes.string,
-    suffix: PropTypes.string,
-    style: PropTypes.object
-  })]),
-  /** Attributes applied to the input element. */
-  inputProps: PropTypes.object,
-  /**  Inline style for the input element. */
-  inputStyle: PropTypes.object,
-  /** The mode of rendering for items. */
-  itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
-  /** 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) applied to the label element. */
-  labelProps: PropTypes.object,
-  /** Number of items to render at a time. */
-  limit: PropTypes.number,
-  /** If `true`, a loading indicator is shown. */
-  loading: PropTypes.bool,
-  /** Maximum number of options that can be selected (used with `multiple` prop).*/
-  maximumSelectionLength: PropTypes.number,
-  /** If `true`, multi-line selected item(s) will be shown. */
-  multilineSelectedItem: PropTypes.bool,
-  /** If `true`, the Dropdown supports multiple selections (value must be an array). */
-  multiple: PropTypes.bool,
-  /** Text shown when there is no data. */
-  noDataText: PropTypes.string,
-  /** Callback function fired when the value changes. */
-  onChange: PropTypes.func,
-  /** Callback function fired when the dropdown is closed. */
-  onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
-   */
-  onInput: PropTypes.func,
-  /** Callback function fired when a key is pressed down in the input. */
-  onKeyDown: PropTypes.func,
-  /** 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 selects a value. */
-  placeholder: PropTypes.string,
-  /** If `true`, the component is read-only. */
-  readOnly: PropTypes.bool,
-  /** 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 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 to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
-   */
-  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-  /** Specifies the field name or expression used to compare values with the search string. */
-  searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  /** Specifies the comparison operation used to search items. */
-  searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
-  /** If `true`, checkboxes will be shown next to each dropdown item. */
-  selectBox: PropTypes.bool,
-  /** Inline style for the component. */
-  style: PropTypes.object,
-  /** 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 when `itemMode` is 'treeview'). */
-  treeViewID: PropTypes.string,
-  /** Used for mapping into a nested list (only used when `itemMode` is 'treeview'). */
-  treeViewParentID: PropTypes.string,
-  /** 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 (used for load more). */
-  valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  /** The variant to use. */
-  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
-   */
-};
-export default Dropdown;