diginet-core-ui 1.3.24

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

@@ -0,0 +1,1865 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { Fragment, memo, useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Icon, { Account } from '../../../icons';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label } from '../../';
+import { mapParent, randomString, updatePosition } from '../../../utils';
+import { getGlobal } from '../../../global';
+import { useTheme } from '../../../theme';
+const {
+  colors,
+  typography: {
+    fontSize,
+    fontFamily
+  }
+} = useTheme();
+const timing = {},
+      currentValue = {},
+      currentObjectDefault = {},
+      isSearch = {},
+      allValue = {};
+const separatorPattern = /\{\w+\}/g;
+const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  itemMode,
+  itemMultipleSize,
+  required,
+  className,
+  label,
+  defaultValue,
+  value: valueProp,
+  searchDelayTime,
+  skip,
+  limit,
+  total,
+  placeholder,
+  error,
+  keyExpr,
+  displayExpr,
+  subText,
+  valueExpr,
+  noDataText,
+  iconDefault,
+  iconExpr,
+  treeViewID,
+  treeViewParentID,
+  clearAble,
+  closeAfterSelect,
+  disabled,
+  readOnly,
+  multiple,
+  allowSearch,
+  selectBox,
+  loading,
+  dataSource,
+  onKeyDown,
+  onInput,
+  onChange,
+  onLoadMore,
+  renderItem,
+  renderSelectedItem,
+  valueObjectDefault,
+  style,
+  inputProps,
+  inputStyle,
+  formStyle,
+  labelProps,
+  errorStyle,
+  refs,
+  children,
+  ...props
+}, ref) => {
+  const dropdownRef = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  })),
+        timerRef = useRef(null),
+        formRef = useRef(null),
+        inputRef = useRef(null),
+        iconRef = useRef(null),
+        boxRef = useRef(null),
+        searchRef = useRef(null),
+        timeout = useRef(null);
+  /* Start styled */
+
+  const forInput = css`
+        display: flex;
+        flex: 1 1 auto;
+        ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
+    `;
+  const DropdownIcon = css`
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        height: inherit;
+        margin-right: 8px;
+        height: 32px;
+        width: 32px;
+        border-radius: 16px;
+        overflow: hidden;
+        img {
+            height: 32px;
+            width: 32px;
+            object-fit: cover;
+        }
+    `;
+  const DropdownInput = css`
+        display: flex;
+        align-items: center;
+        width: 100%;
+        border: none;
+        outline: none;
+        color: ${colors.input};
+        background-color: transparent;
+        padding-top: 0;
+        padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
+        padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
+        font-family: ${fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: ${multiple ? 30 : 24}px;
+        min-height: ${multiple ? 30 : 24}px;
+        &.dgn-dropdown-multiple {
+            flex-wrap: wrap;
+            /* max-height: max-content; */
+            word-break: break-word;
+            overflow: hidden;
+            ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+            &::after {
+                content: '${placeholder}';
+                display: flex;
+                position: absolute;
+                align-items: center;
+                justify-content: center;
+                color: ${colors.placeholder};
+            }
+            &:not(:empty)::after {
+                visibility: hidden;
+            }
+        }
+        &:focus {
+            background-color: transparent;
+        }
+        .dropdown-item {
+            &:not(:last-child) {
+                margin-right: 5px;
+            }
+            svg {
+                box-sizing: border-box;
+                padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
+            }
+        }
+        .css-${DropdownIcon.name} {
+            ${renderSelectedItem ? `
+                min-height: 24px;
+                min-width: 24px;
+            ` : `
+                height: 24px;
+                width: 24px;
+                img {
+                    height: 24px;
+                    width: 24px;
+                }
+            `}
+        }
+    `;
+  const forIcon = css`
+        display: flex;
+        margin-left: 8px;
+        margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
+        color: inherit;
+        align-items: center;
+        .icon-close {
+            display: none;
+            margin-right: 4px;
+        }
+        .dgn-dropdown-loading {
+            display: none;
+        }
+	`;
+  const DropdownForm = viewType !== 'outlined' ? css`
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        position: relative;
+        padding-bottom: ${multiple ? 1 : 4}px;
+        padding-top: ${multiple ? 1 : 4}px;
+        box-sizing: border-box;
+        &:not(:focus-within):hover {
+            &::before {
+                border-bottom-color: ${colors.borderHover};
+            }
+            .css-${DropdownInput.name} {
+                color: ${colors.inputHover};
+            }
+        }
+        &:focus-within {
+            border-bottom-color: ${colors.borderFocus};
+            &::after {
+                border-bottom-color: inherit;
+                transform: scaleX(1);
+            }
+            .css-${DropdownInput.name} {
+                color: ${colors.inputHover};
+            }
+        }
+        &.dropdown-showing {
+            .icon-dropdown {
+                transform: rotateX(180deg);
+            }
+        }
+        &::placeholder {
+            color: ${colors.placeholder};
+        }
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-bottom: 1px solid ${colors.border};
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0px;
+            right: 0px;
+            bottom: -1px;
+            border-bottom: 2px solid transparent;
+            transform: scaleX(0);
+            transform-origin: center;
+            transition: all 0.2s ease;
+        }
+    ` : css`
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        position: relative;
+        border: 1px solid ${colors.border};
+        border-radius: 4px;
+        min-height: 40px;
+        box-sizing: border-box;
+        &:not(:focus-within):hover {
+            background-color: ${colors.hover};
+            border-color: ${colors.borderHover};
+            input {
+                background-color: ${colors.hover};
+            }
+        }
+        &:focus-within {
+            border-color: ${colors.borderFocus};
+            &::after {
+                border-color: inherit;
+            }
+        }
+        &.dropdown-showing {
+            .icon-dropdown {
+                transform: rotateX(180deg);
+            }
+        }
+        &::placeholder {
+            color: ${colors.placeholder};
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            left: -2px;
+            right: -2px;
+            top: -2px;
+            bottom: -2px;
+            border: 2px solid transparent;
+            border-radius: 4px;
+            pointer-events: none;
+        }
+    `;
+  const DropdownBox = css`
+		display: block;
+		position: relative;
+		width: 100%;
+		max-height: 280px;
+		overflow: overlay;
+        background-color: #FFF;
+		box-sizing: border-box;
+		border-radius: 4px;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        z-index: 9001;
+		&::-webkit-scrollbar {
+			width: 24px;
+			background-color: #FFF !important;
+            border-radius: 4px;
+		}
+		&::-webkit-scrollbar-thumb {
+			border-radius: 24px;
+            border: 8px solid transparent;
+			mix-blend-mode: normal;
+			background-color: ${colors.scrollbar} !important;
+			background-clip: content-box;
+		}
+        .DGN-UI-TreeView {
+            padding: 1px;
+        }
+    `;
+  const DropdownItem = css`
+		display: flex;
+        position: relative;
+		min-height: 40px;
+		width: 100%;
+		background-color: #FFF;
+		align-items: center;
+		justify-content: flex-start;
+		padding: 8px ${multiple && selectBox ? 0 : '16px'};
+        color: ${colors.text};
+		box-sizing: border-box;
+		user-select: none;
+		cursor: pointer;
+		&.no-data {
+            font-style: italic;
+			justify-content: center;
+			cursor: initial;
+		}
+		&:not(.no-data):hover,
+		&:not(.no-data):focus {
+			background-color: ${colors.hover};
+            color: ${colors.inputHover};
+            outline: none;
+		}
+    `;
+  const DropdownText = css`
+        font-family: ${fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: ${fontSize};
+        line-height: 20px;
+        color: inherit;
+        .DGN-UI-Dropdown-PrimaryText {
+            display: block;
+            font-size: 14px;
+            line-height: 18px;
+        }
+        .DGN-UI-Dropdown-SubText {
+            display: block;
+            font-size: 12px;
+            line-height: 14px;
+            font-family: ${fontFamily};
+            color: ${colors.secondary};
+        }
+    `;
+  const DropdownRoot = css`
+        display: block;
+        position: relative;
+        margin-bottom: 20px;
+        min-width: 150px;
+        height: max-content;
+        &.error {
+            .css-${DropdownForm.name} {
+                border-color: ${colors.danger};
+                path {
+                    fill: ${colors.danger};
+                }
+                &::before {
+                    border-color: ${colors.danger};
+                }
+            }
+        }
+        &.dgn-dropdown-loading,
+        &.disabled {
+            pointer-events: none;
+            user-select: none;
+            .css-${DropdownInput.name} {
+                //color: ${colors.disabled} !important;
+            }
+            .css-${DropdownForm.name} {
+                border-color: ${colors.disabled};
+                .css-${forIcon.name} {
+                    path {
+                        fill: transparent;
+                    }
+                }
+                &::before {
+                    border-color: ${colors.disabled};
+                }
+            }
+        }
+        &.readOnly {
+            pointer-events: none;
+            user-select: none;
+            .css-${forIcon.name} {
+                pointer-events: none;
+                .icon-close {
+                    display: none !important;
+                }
+            }
+            .css-${DropdownInput.name} {
+                .dropdown-item {
+                    pointer-events: none;
+                }
+            }
+        }
+    `;
+  const Disabled = css`
+        pointer-events: none !important;
+        opacity: 0.4 !important;
+    `;
+  /* End styled */
+
+  /* Start handler */
+
+  const triggerInput = e => {
+    const target = e.currentTarget;
+    target.style.pointerEvents = 'none';
+
+    if (!boxRef.current) {
+      inputRef.current.focus();
+      inputRef.current.click();
+    } else {
+      onClickOutsideOfInput({
+        target: null
+      });
+    }
+
+    setTimeout(() => {
+      target.style.pointerEvents = null;
+    }, 200);
+  };
+
+  const triggerBlur = (blur = true) => {
+    if ((currentValue[unique] || currentValue[unique] === 0) && !multiple) {
+      setValueIntoInput(currentValue[unique]);
+    } else if (!multiple) {
+      setValueIntoInput('');
+    }
+
+    !!blur && inputRef.current.blur();
+  };
+
+  const onClickInput = e => {
+    if (!boxRef.current) {
+      if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e.target))) {
+        if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple) {
+          inputRef.current.innerHTML = inputRef.current.textContent.trim();
+          inputRef.current.contentEditable = 'plaintext-only';
+          const caret = inputRef.current.childNodes.length ? 1 : 0;
+          const range = document.createRange();
+          range.setStart(inputRef.current, caret);
+          range.setEnd(inputRef.current, caret);
+          const sel = window.getSelection();
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+
+        formRef.current.classList.add('dropdown-showing');
+        setTimeout(() => {
+          showDropdown();
+          setTimeout(() => {
+            if (children && boxRef.current && boxRef.current.querySelector('input')) {
+              boxRef.current.querySelector('input').focus();
+            }
+          }, 10);
+        }, timing[unique + 'Box'] ? 200 : 0);
+      }
+    } else if (multiple || itemMode === 'treeview') {
+      if (searchRef.current) {
+        searchRef.current.focus();
+      } else if (children && boxRef.current && boxRef.current.querySelector('input')) {
+        boxRef.current.querySelector('input').focus();
+      }
+    }
+  };
+
+  const onClickOutsideOfInput = event => {
+    if (inputRef.current && !inputRef.current.contains(event.target) && iconRef.current && !iconRef.current.contains(event.target) && boxRef.current && !boxRef.current.parentNode.parentNode.contains(event.target)) {
+      closeDropdown();
+      triggerBlur(false);
+    }
+  };
+
+  const showDropdown = () => {
+    if (displayExpr && Array.isArray(displayExpr)) {
+      displayExpr = displayExpr.join(' - ');
+    }
+
+    const keyArr = displayExpr.match(separatorPattern);
+    const dropdown = children ? jsx("div", {
+      css: DropdownBox,
+      ref: boxRef
+    }, children) : itemMode === 'normal' ? mapDropdown(null, keyArr) : 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 > innerHeight) {
+      if (top - dropdownHeight > 0) {
+        positionTop = top - dropdownHeight;
+      } else {
+        positionTop = innerHeight - dropdownHeight;
+      }
+    }
+
+    const el = document.createElement('div');
+    const elBox = document.createElement('div');
+    const elLoading = document.createElement('div');
+    el.style.cssText = `position: fixed; top: ${positionTop}px; left: ${left}px; width: ${width}px; background-color: #FFF; opacity: 0; transition: opacity 0.3s; z-index: 9001;`;
+    elLoading.style.cssText = `display: none; justify-content: center; align-items: center;position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); border-radius: 4px; opacity: 0; transition: opacity 0.3s; z-index: 9002;`;
+    el.className = `DGN-UI-Portal DGN-Dropdown-${unique}`;
+    elBox.className = `DGN-Dropdown-Box`;
+    elLoading.className = `DGN-Dropdown-Loading`;
+    const node = document.body.appendChild(el);
+
+    if ((multiple || allowSearch) && itemMode === 'normal' && !children) {
+      var _searchRef$current;
+
+      const defaultSearch = !!onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '';
+      const searchInput = jsx(InputBase, {
+        inputRef: searchRef,
+        viewType: 'outlined',
+        defaultValue: defaultSearch,
+        onChange: onChangeInput,
+        style: {
+          backgroundColor: '#FFF',
+          marginBottom: 1
+        },
+        onKeyDown: pressESCHandler,
+        autoFocus: true
+      });
+      const elSearch = document.createElement('div');
+      elSearch.className = `DGN-Dropdown-Box-Search`;
+      ReactDOM.render(searchInput, node.appendChild(elSearch));
+    } else {
+      inputRef.current.addEventListener('keydown', pressESCHandler);
+    }
+
+    ReactDOM.render(dropdown, node.appendChild(elBox));
+    ReactDOM.render(jsx(CircularProgress, {
+      size: 'xs'
+    }), node.appendChild(elLoading));
+    document.documentElement.style.overflow = 'hidden';
+    setTimeout(() => {
+      el.style.opacity = 1;
+      window.addEventListener('resize', customizeWidthDropdown);
+      document.addEventListener('wheel', onWheelHandler);
+      document.addEventListener('click', onClickOutsideOfInput);
+      document.addEventListener('keydown', preventScroll);
+      boxRef.current.addEventListener('keydown', moveOnItem);
+
+      if (onLoadMore && dataSource.length < total) {
+        boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+      }
+    }, 10);
+  };
+
+  const moveOnItem = e => {
+    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 preventScroll = e => {
+    if (/Arrow(Up|Down)/.test(e.key)) {
+      e.preventDefault();
+      return false;
+    }
+
+    return true;
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      closeDropdown();
+      triggerBlur();
+    } else if (event.key === 'ArrowDown' && boxRef.current) {
+      boxRef.current.firstChild.focus();
+    }
+  };
+
+  const onWheelHandler = e => {
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
+
+    if (!node) {
+      document.removeEventListener('wheel', onWheelHandler);
+      return;
+    }
+
+    if (!node.contains(e.target)) {
+      closeDropdown();
+      triggerBlur();
+    }
+  };
+
+  const closeDropdown = () => {
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
+
+    if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple && inputRef.current) {
+      inputRef.current.contentEditable = true;
+    }
+
+    if (node) {
+      node.style.pointerEvents = `none`;
+      node.style.transition = `opacity 0.5s`;
+      node.style.opacity = 0;
+      timing[unique + 'Box'] = setTimeout(() => {
+        clearTimeout(timing[unique + 'Box']);
+        timing[unique + 'Box'] = null;
+        node.remove();
+        boxRef.current = null;
+      }, 300);
+      !!formRef.current && formRef.current.classList.remove('dropdown-showing');
+      document.removeEventListener('click', onClickOutsideOfInput);
+      window.removeEventListener('resize', customizeWidthDropdown);
+      document.removeEventListener('wheel', onWheelHandler);
+      document.removeEventListener('keydown', preventScroll);
+
+      if (onLoadMore && boxRef.current) {
+        boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
+        boxRef.current = null;
+      } // if (!multiple) {
+      //     inputRef.current.removeEventListener('keydown', pressESCHandler);
+      //     inputRef.current.removeEventListener('input', onChangeInput);
+      // }
+
+    }
+
+    document.documentElement.style.overflow = 'auto';
+  };
+
+  const renderDropdown = pattern => {
+    const keyArr = displayExpr.match(separatorPattern);
+    const dropdown = mapDropdown(pattern, keyArr);
+    const el = document.createElement('div');
+    el.className = `DGN-Dropdown-Box`;
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
+
+    if (node) {
+      node.querySelector('.DGN-Dropdown-Box').remove();
+      ReactDOM.render(dropdown, node.appendChild(el));
+      setTimeout(() => {
+        boxRef.current.addEventListener('keydown', moveOnItem);
+
+        if (onLoadMore && dataSource.length < total) {
+          boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+        }
+
+        updatePositionDropdown();
+      }, 0);
+    }
+  };
+
+  const mapDropdown = (pattern, keyArr) => {
+    const items = [];
+    const dataSourceUsable = [...dataSource];
+
+    if (onLoadMore && currentObjectDefault[unique].length) {
+      const length = currentObjectDefault[unique].length;
+      let existItemQuantity = 0;
+
+      for (let index = length - 1; index >= 0; index--) {
+        if (!dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
+          dataSourceUsable.unshift(currentObjectDefault[unique][index]);
+        } 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;
+          }
+
+          currentObjectDefault[unique].splice(index, 1);
+        }
+      }
+    }
+
+    const length = dataSourceUsable.length;
+
+    for (let index = 0; index < length; index++) {
+      const data = dataSourceUsable[index];
+      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] : data;
+      if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
+
+      if (renderItem && typeof renderItem === 'function') {
+        displayText = renderItem({
+          data,
+          index
+        });
+      } else if (subText) {
+        displayText = jsx(Fragment, null, jsx("span", {
+          className: 'DGN-UI-Dropdown-PrimaryText'
+        }, displayText), jsx("span", {
+          className: 'DGN-UI-Dropdown-SubText'
+        }, typeof subText === 'function' ? subText({
+          data,
+          index
+        }) : data[subText] || subText));
+      }
+
+      const value = typeof data === 'object' ? data[valueExpr] : data;
+      const itemDisabled = typeof data === 'object' ? data["disabled"] : data;
+      const icon = getIconFromData(data);
+
+      if (multiple && selectBox) {
+        const checked = currentValue[unique].includes(value);
+        items.push(jsx("div", {
+          key: index,
+          css: !itemDisabled ? DropdownItem : [Disabled, DropdownItem],
+          onClick: e => onChangeValueWithCheckbox(e) & onChangeValue(displayText, value, icon, data, index),
+          onKeyPress: e => {
+            if (e.key === 'Enter') e.currentTarget.firstChild.click();
+          },
+          tabIndex: -1
+        }, jsx(Checkbox, {
+          defaultChecked: checked,
+          style: {
+            width: '100%',
+            height: '100%',
+            padding: '0 16px'
+          },
+          value: value
+        }, icon && jsx("div", {
+          css: DropdownIcon
+        }, icon), jsx("div", {
+          css: DropdownText
+        }, displayText))));
+      } else {
+        items.push(jsx("div", {
+          key: index,
+          css: !itemDisabled ? DropdownItem : [Disabled, DropdownItem],
+          onClick: () => onChangeValue(displayText, value, icon, data, index),
+          onKeyPress: e => {
+            if (e.key === 'Enter') onChangeValue(displayText, value, icon, data, index);
+          },
+          tabIndex: -1
+        }, icon && jsx("div", {
+          css: DropdownIcon
+        }, icon), jsx("div", {
+          css: DropdownText
+        }, displayText)));
+      }
+
+      if (items.length === limit) {
+        timerRef.current = setTimeout(() => {
+          loadMoreItemsDropdown(index + 1, pattern);
+        }, 1000);
+        break;
+      }
+    }
+
+    return jsx("div", {
+      css: DropdownBox,
+      ref: boxRef
+    }, items.length ? items : jsx("div", {
+      css: DropdownItem,
+      className: 'no-data'
+    }, " ", noDataText, " "));
+  };
+
+  const mapTreeView = () => {
+    // if (!treeView[unique]) {
+    return jsx("div", {
+      css: DropdownBox,
+      ref: boxRef
+    }, jsx(TreeView, {
+      dataSource: dataSource,
+      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('', multiple ? value : e.value),
+      renderItem: renderItem
+    })); // }
+    // return treeView[unique];
+  };
+
+  const loadMoreItemsDropdown = (i = 0, pattern) => {
+    const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
+
+    let notExistItem = 0;
+
+    if (onLoadMore && currentObjectDefault[unique].length) {
+      const length = currentObjectDefault[unique].length;
+
+      for (let index = length - 1; index >= 0; index--) {
+        if (!dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
+          notExistItem++;
+          dataSourceUsable.unshift(currentObjectDefault[unique][index]);
+        }
+      }
+    }
+
+    const length = dataSourceUsable.length;
+    let num = 0;
+
+    if (displayExpr && Array.isArray(displayExpr)) {
+      displayExpr = displayExpr.join(' - ');
+    }
+
+    const keyArr = displayExpr.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 && currentObjectDefault[unique].some(valueObject => valueObject[valueExpr] === data[valueExpr])) continue;
+      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] : data;
+      if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
+      const value = typeof data === 'object' ? data[valueExpr] : data;
+      const icon = getIconFromData(data);
+
+      if (renderItem && typeof renderItem === 'function') {
+        displayText = renderItem({
+          data,
+          index: i
+        });
+      } else if (subText) {
+        displayText = jsx(Fragment, null, jsx("span", {
+          className: 'DGN-UI-Dropdown-PrimaryText'
+        }, displayText), jsx("span", {
+          className: 'DGN-UI-Dropdown-SubText'
+        }, typeof subText === 'function' ? subText({
+          data,
+          index: i
+        }) : data[subText] || subText));
+      }
+
+      const dropdownItem = document.createElement('div');
+      dropdownItem.className = `css-${DropdownItem.name}`;
+      dropdownItem.tabIndex = -1;
+      dropdownItem.addEventListener('click', () => onChangeValue(displayText, value, icon, data, i));
+      dropdownItem.addEventListener('keypress', e => {
+        if (e.key === 'Enter') dropdownItem.firstChild.click();
+      });
+      let item = null;
+
+      if (multiple && selectBox) {
+        const checked = currentValue[unique].includes(value);
+        item = jsx(Checkbox, {
+          defaultChecked: checked,
+          style: {
+            width: '100%',
+            height: '100%',
+            padding: '0 16px'
+          }
+        }, icon && jsx("div", {
+          css: DropdownIcon
+        }, icon), jsx("div", {
+          css: DropdownText
+        }, displayText));
+      } else {
+        item = jsx(Fragment, null, icon && jsx("div", {
+          css: DropdownIcon
+        }, icon), jsx("div", {
+          css: DropdownText
+        }, displayText));
+      }
+
+      if (!boxRef.current) {
+        return;
+      }
+
+      ReactDOM.render(item, boxRef.current.appendChild(dropdownItem));
+
+      if (++num === 100) {
+        timerRef.current = setTimeout(() => {
+          loadMoreItemsDropdown(i + 1, pattern);
+        }, 1000);
+        break;
+      }
+    }
+  };
+
+  const renderData = (data, keyArr) => {
+    const pattern = keyArr.join('|').replace(/([\{\}])/g, '\\$1');
+    const separatorArr = displayExpr.split(new RegExp(pattern));
+    let str = '';
+    let i = 0;
+
+    for (i; i < keyArr.length; i++) {
+      str += separatorArr[i] + (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
+    }
+
+    return str + separatorArr[i];
+  };
+
+  const getIconFromData = data => {
+    if (!iconExpr || iconExpr === 'none') return null;
+
+    if (typeof iconExpr === 'string') {
+      return data[iconExpr] ? jsx("img", {
+        src: data[iconExpr],
+        alt: data[valueExpr]
+      }) : iconDefault ? jsx("img", {
+        src: iconDefault,
+        alt: data[valueExpr],
+        style: iconExpr.style
+      }) : jsx(Account, {
+        width: 32,
+        height: 32
+      });
+    }
+
+    let prefix = iconExpr.prefix || '';
+    const suffix = iconExpr.suffix || '';
+    const url = data[iconExpr.key];
+
+    if (prefix && /^http/i.test(prefix) && /^http/i.test(url)) {
+      prefix = '';
+    }
+
+    return url ? jsx("img", {
+      src: prefix + url + suffix,
+      alt: data[valueExpr],
+      style: iconExpr.style,
+      onError: onErrorRenderIcon
+    }) : iconDefault ? jsx("img", {
+      src: iconDefault,
+      alt: data[valueExpr],
+      style: iconExpr.style
+    }) : jsx(Account, {
+      width: 32,
+      height: 32
+    });
+  };
+
+  const onErrorRenderIcon = e => {
+    if (iconDefault) {
+      e.target.src = iconDefault;
+    } else {
+      const parent = e.target.parentNode;
+      e.target.remove();
+      parent.innerHTML = `<svg width="32" height="32" viewBox="0 0 20 20" fill="none">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47998 0 0 4.48 0 10C0 15.52 4.47998 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34003 9 7 7.66 7 6C7 4.34 8.34003 3 10 3ZM4 13.98C5.28998 15.92 7.5 17.2 10 17.2C12.5 17.2 14.71 15.92 16 13.98C15.97 11.99 11.99 10.9 10 10.9C8 10.9 4.03003 11.99 4 13.98Z" fill="#7F828E"/>
+            </svg>`;
+    }
+  };
+
+  const customizeWidthDropdown = () => {
+    if (!dropdownRef.current) {
+      window.removeEventListener('resize', customizeWidthDropdown);
+      return;
+    }
+
+    const {
+      width
+    } = dropdownRef.current.getBoundingClientRect();
+
+    if (document.querySelector(`.DGN-Dropdown-${unique}`)) {
+      document.querySelector(`.DGN-Dropdown-${unique}`).style.width = width + 'px';
+    }
+
+    updatePositionDropdown();
+  };
+
+  const updatePositionDropdown = () => {
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
+
+    if (!formRef.current || !node) {
+      document.removeEventListener('wheel', onWheelHandler);
+      return;
+    }
+
+    updatePosition(formRef.current, node, closeDropdown);
+  };
+
+  const onLoadMoreHandler = e => {
+    const {
+      scrollTop,
+      scrollHeight,
+      offsetHeight
+    } = e.target;
+
+    if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
+      const length = boxRef.current.querySelectorAll(`.css-${DropdownItem.name}`).length;
+      boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
+      !!onLoadMore && onLoadMore({
+        skip: length,
+        limit: limit
+      });
+    }
+  };
+
+  const onPreventKeyDownHandler = e => {
+    e.preventDefault();
+    return false;
+  };
+
+  const onChangeInput = e => {
+    if (onInput) {
+      isSearch[unique] = true;
+      const valueInput = e.target.value;
+      const text = (valueInput || e.target.textContent).normalize();
+
+      if (timeout.current) {
+        if (timing[unique]) {
+          clearTimeout(timing[unique]);
+        }
+
+        timing[unique] = setTimeout(() => {
+          e.target.value = text;
+          onInput(e);
+          e.target.value = valueInput;
+        }, timeout.current);
+      } else {
+        e.target.value = text;
+        onInput(e);
+        e.target.value = valueInput;
+      }
+
+      return;
+    }
+
+    const value = e.target.value || e.target.textContent;
+
+    if (renderSelectedItem && 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(() => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+
+      renderDropdown(new RegExp(value.normalize(), 'gim'));
+    }, timeout.current || 700);
+  };
+
+  const onChangeValue = (displayText, value, icon, data, index) => {
+    if (itemMode === 'treeview') {
+      if (valueProp === undefined) {
+        setValueIntoInput(value);
+      }
+
+      !!onChange && onChange({
+        value
+      });
+      setTimeout(() => {
+        updatePositionDropdown();
+      }, 0);
+    } else if (multiple) {
+      if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
+      const newValueArr = [...currentValue[unique]];
+
+      if (!currentValue[unique].some(v => JSON.stringify(v) === JSON.stringify(value))) {
+        newValueArr.push(value);
+
+        if (valueProp === undefined) {
+          let item = null;
+
+          if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+            item = renderSelectedItem({
+              data,
+              index
+            });
+          } else {
+            item = jsx(Chip, {
+              startIcon: icon,
+              label: displayText,
+              size: itemMultipleSize,
+              clearAble: true,
+              onRemove: e => onRemove(e, value),
+              style: {
+                margin: '3px 0'
+              }
+            });
+          }
+
+          const el = document.createElement('div');
+          el.className = 'dropdown-item';
+          el.style.display = 'flex';
+          ReactDOM.render(item, inputRef.current.appendChild(el));
+        }
+
+        !!onChange && onChange({
+          value: newValueArr,
+          data
+        });
+      } else if (selectBox) {
+        const index = newValueArr.indexOf(value);
+        newValueArr.splice(index, 1);
+
+        if (valueProp === undefined) {
+          const nodes = inputRef.current.querySelectorAll('.dropdown-item');
+          nodes[index].remove();
+        }
+
+        !!onChange && onChange({
+          value: newValueArr,
+          data
+        });
+      }
+
+      setTimeout(() => {
+        updatePositionDropdown();
+      }, 0);
+    } else {
+      const isChanged = currentValue[unique] !== value ? true : false;
+
+      if (isChanged) {
+        if (valueProp === undefined) {
+          if (clearAble) {
+            iconRef.current.querySelector('.icon-close').style.display = 'flex';
+          }
+
+          allValue[unique].push(value);
+          setValueIntoInput(value);
+        }
+
+        !!onChange && onChange({
+          value,
+          data
+        });
+      }
+    }
+
+    if (closeAfterSelect) {
+      closeDropdown();
+    }
+  };
+
+  const onChangeValueWithCheckbox = e => {
+    const firstChild = e.currentTarget.firstChild;
+
+    if (!firstChild.contains(e.target)) {
+      firstChild.click();
+    }
+  };
+
+  const onRemove = (e, value) => {
+    const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
+
+    if (index !== -1) {
+      currentValue[unique].splice(index, 1);
+      setTimeout(() => {
+        if (boxRef.current && multiple && selectBox && !children) {
+          const input = boxRef.current.querySelector(`input[value="${value}"]`);
+
+          if (input) {
+            input.checked = false;
+          }
+        }
+
+        !!e && !!e.parentNode && e.parentNode.remove();
+      }, 0);
+      !!onChange && onChange({
+        value: currentValue[unique],
+        removed: value
+      });
+    }
+  };
+
+  const onClear = e => {
+    currentValue[unique] = multiple ? [] : '';
+
+    if (inputRef.current.tagName.toLowerCase() === 'div') {
+      inputRef.current.innerHTML = '';
+
+      if (boxRef.current) {
+        boxRef.current.querySelectorAll('input').forEach(input => input.checked = false);
+      }
+    } else {
+      inputRef.current.value = '';
+    } // onChangeValue('', '');
+
+
+    e && e.target && e.target.blur();
+    updatePositionDropdown();
+
+    if (clearAble) {
+      iconRef.current.querySelector('.icon-close').style.display = null;
+    }
+
+    !!onChange && onChange({
+      value: currentValue[unique]
+    });
+  };
+
+  const setPreviousValue = () => {
+    allValue[unique].pop();
+    setValueIntoInput(allValue[unique][allValue[unique].length - 1]);
+  };
+
+  const setValueIntoInput = source => {
+    if (!source && source !== 0) {
+      if (multiple) {
+        inputRef.current.innerHTML = '';
+        currentValue[unique] = [];
+      } else {
+        if (renderSelectedItem || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
+          inputRef.current.innerHTML = '';
+        } else if (!isSearch[unique]) {
+          inputRef.current.value = '';
+        }
+
+        currentValue[unique] = '';
+      }
+
+      return;
+    }
+
+    const length = dataSource.length;
+    const displayKey = keyExpr || displayExpr;
+
+    if (displayKey && Array.isArray(displayKey)) {
+      displayExpr = displayExpr.join(' - ');
+    }
+
+    const keyArr = displayKey.match(separatorPattern);
+
+    if (multiple) {
+      let valueArr = source;
+
+      if (!Array.isArray(valueArr)) {
+        valueArr = [valueArr];
+      }
+
+      valueArr = [...new Set(valueArr)];
+      currentValue[unique] = [];
+      inputRef.current.innerHTML = '';
+      valueArr.forEach(v => {
+        for (let i = 0; i < length; i++) {
+          if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
+            setMultipleValueHandler(dataSource[i], v, keyArr, i);
+            return;
+          }
+        }
+
+        if (onLoadMore && currentObjectDefault[unique].length) {
+          const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
+
+          if (itemOfValue) {
+            setMultipleValueHandler(itemOfValue, v, keyArr);
+          }
+        }
+      });
+
+      if (clearAble && iconRef.current && iconRef.current.querySelector('.icon-close')) {
+        iconRef.current.querySelector('.icon-close').style.display = valueArr.length ? 'flex' : null;
+      }
+    } else {
+      currentValue[unique] = source;
+
+      for (let i = 0; i < length; i++) {
+        if (dataSource[i][valueExpr] === source || dataSource[i] === source) {
+          setSingleValueHandler(dataSource[i], keyArr);
+          return;
+        }
+      }
+
+      if (onLoadMore && currentObjectDefault[unique].length) {
+        const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
+
+        if (itemOfValue) {
+          setSingleValueHandler(itemOfValue, keyArr);
+          return;
+        }
+      }
+
+      if (!isSearch[unique]) {
+        inputRef.current.value = '';
+      }
+
+      if (clearAble && iconRef.current && iconRef.current.querySelector('.icon-close')) {
+        iconRef.current.querySelector('.icon-close').style.display = null;
+      }
+    }
+  };
+
+  const setMultipleValueHandler = (data, value, keyArr, index) => {
+    let item = null;
+
+    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+      item = renderSelectedItem({
+        data,
+        index
+      });
+    } else {
+      const icon = getIconFromData(data);
+      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr];
+      item = jsx(Chip, {
+        startIcon: icon,
+        label: text,
+        size: itemMultipleSize,
+        clearAble: true,
+        onRemove: e => onRemove(e, value),
+        style: {
+          margin: '3px 0'
+        }
+      });
+    }
+
+    const el = document.createElement('div');
+    el.className = 'dropdown-item';
+    el.style.display = 'flex';
+    ReactDOM.render(item, inputRef.current.appendChild(el));
+    currentValue[unique].push(value);
+  };
+
+  const setSingleValueHandler = (data, keyArr) => {
+    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+      inputRef.current.innerHTML = '';
+      const item = renderSelectedItem({
+        data
+      });
+      const el = document.createElement('div');
+      el.style.display = 'flex';
+      el.style.minHeight = '24px';
+      ReactDOM.render(item, inputRef.current.appendChild(el));
+    } else if (iconExpr && iconExpr !== 'none') {
+      inputRef.current.innerHTML = '';
+      const icon = getIconFromData(data);
+      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data;
+      const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
+        css: DropdownIcon
+      }, icon), jsx("div", {
+        css: DropdownText
+      }, text));
+      const el = document.createElement('div');
+      el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
+      ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
+    } else {
+      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data;
+      inputRef.current.value = text;
+    }
+
+    if (clearAble) {
+      iconRef.current.querySelector('.icon-close').style.display = 'flex';
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    closeDropdown: () => {
+      closeDropdown();
+    },
+    showDropdown: () => {
+      showDropdown();
+    },
+    onClear,
+    setPreviousValue,
+    DOM: dropdownRef.current
+  }));
+  useEffect(() => {
+    currentObjectDefault[unique] = onLoadMore && valueObjectDefault ? Array.isArray(valueObjectDefault) ? [...valueObjectDefault] : [valueObjectDefault] : [];
+    return () => {
+      currentObjectDefault[unique] = null;
+    };
+  }, [valueObjectDefault]);
+  useEffect(() => {
+    !!refs && refs(dropdownRef);
+    allValue[unique] = [];
+
+    if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
+      setValueIntoInput(defaultValue);
+    }
+
+    return () => {
+      allValue[unique] = null;
+      closeDropdown();
+    };
+  }, []);
+  useEffect(() => {
+    if (searchDelayTime) {
+      var _searchDelayTime$matc, _searchDelayTime$matc2;
+
+      const units = {
+        m: 60000,
+        s: 1000,
+        ms: 1
+      };
+      timeout.current = 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'];
+      return () => {
+        timeout.current = null;
+      };
+    }
+  }, [searchDelayTime]);
+  useEffect(() => {
+    if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
+      allValue[unique].push(valueProp);
+    }
+  }, [valueProp]);
+  useEffect(() => {
+    if (loading) {
+      iconRef.current.querySelector('.dgn-dropdown-loading').style.display = 'flex';
+
+      if (clearAble) {
+        iconRef.current.querySelector('.icon-close').style.display = null;
+      }
+
+      iconRef.current.querySelector('.icon-dropdown').style.display = 'none';
+      dropdownRef.current.classList.add('dgn-dropdown-loading');
+
+      if (boxRef.current) {
+        var _boxRef$current$paren, _boxRef$current$paren2;
+
+        const loadingNode = (_boxRef$current$paren = boxRef.current.parentNode) === null || _boxRef$current$paren === void 0 ? void 0 : (_boxRef$current$paren2 = _boxRef$current$paren.parentNode) === null || _boxRef$current$paren2 === void 0 ? void 0 : _boxRef$current$paren2.querySelector('.DGN-Dropdown-Loading');
+
+        if (loadingNode) {
+          // boxRef.current.style.overflow = 'hidden';
+          loadingNode.style.display = 'flex';
+          setTimeout(() => {
+            loadingNode.style.opacity = 1;
+          }, 0);
+        }
+      }
+
+      return () => {
+        if (iconRef.current && dropdownRef.current) {
+          iconRef.current.querySelector('.dgn-dropdown-loading').style.display = null;
+          iconRef.current.querySelector('.icon-dropdown').style.display = null;
+
+          if (clearAble && currentValue[unique] && typeof currentValue[unique] === 'string') {
+            iconRef.current.querySelector('.icon-close').style.display = 'flex';
+          }
+
+          dropdownRef.current.classList.remove('dgn-dropdown-loading');
+
+          if (boxRef.current) {
+            // const loadingNode = boxRef.current.parentNode?.parentNode?.querySelector('.DGN-Dropdown-Loading');
+            const loadingNode = document.querySelector('.DGN-Dropdown-Loading');
+
+            if (loadingNode) {
+              // boxRef.current.style.overflow = null;
+              loadingNode.style.opacity = 0;
+              setTimeout(() => {
+                loadingNode.style.display = 'none';
+              }, 300);
+            }
+          }
+        }
+      };
+    }
+  }, [loading]);
+  useEffect(() => {
+    if (error && !valueProp && valueProp !== 0) {
+      dropdownRef.current.classList.add('error');
+      return () => {
+        if (dropdownRef.current) {
+          dropdownRef.current.classList.remove('error');
+        }
+      };
+    }
+  }, [error, valueProp]);
+  useEffect(() => {
+    if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
+      setValueIntoInput(valueProp);
+    }
+  }, [valueProp, dataSource]);
+  useEffect(() => {
+    inputRef.current.readOnly = readOnly || inputProps.readOnly;
+
+    if (disabled) {
+      dropdownRef.current.classList.add('disabled');
+      iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = 'none';
+    } else if (!readOnly) {
+      inputRef.current.addEventListener('click', onClickInput);
+      inputRef.current.addEventListener('input', onChangeInput);
+      !!onLoadMore && boxRef.current && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+    } else {
+      dropdownRef.current.classList.add('readOnly');
+      iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = 'none';
+
+      if (multiple) {
+        inputRef.current.contentEditable = false;
+      }
+    }
+
+    if (disabled || readOnly || children) {
+      inputRef.current.addEventListener('keydown', onPreventKeyDownHandler);
+    } else {
+      inputRef.current.addEventListener('keydown', onKeyDown);
+    }
+
+    return () => {
+      if (!dropdownRef.current || !inputRef.current || !iconRef.current) return;
+
+      if (disabled) {
+        dropdownRef.current.classList.remove('disabled');
+        iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = null;
+      } else if (!readOnly) {
+        inputRef.current.removeEventListener('click', onClickInput);
+        inputRef.current.removeEventListener('input', onChangeInput);
+      } else {
+        dropdownRef.current.classList.remove('readOnly');
+        iconRef.current.querySelector('.icon-dropdown').style.pointerEvents = null;
+
+        if (multiple) {
+          inputRef.current.contentEditable = true;
+        }
+      }
+
+      if (disabled || readOnly || children) {
+        inputRef.current.removeEventListener('keydown', onPreventKeyDownHandler);
+      } else {
+        inputRef.current.removeEventListener('keydown', onKeyDown);
+      }
+
+      closeDropdown();
+    };
+  }, [disabled, readOnly, displayExpr, multiple, allowSearch, viewType, closeAfterSelect, selectBox]);
+  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 (boxRef.current) {
+      if (!disabled && !readOnly) {
+        inputRef.current.addEventListener('input', onChangeInput);
+      }
+
+      const length = boxRef.current.querySelectorAll(`.css-${DropdownItem.name}`).length;
+
+      if (length < dataSource.length + currentObjectDefault[unique].length && !isSearch[unique]) {
+        loadMoreItemsDropdown(length);
+        !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
+      } else {
+        isSearch[unique] = false;
+        renderDropdown();
+      }
+    } else {
+      if (!multiple && !disabled && !readOnly) {
+        inputRef.current.addEventListener('input', onChangeInput);
+      }
+    }
+
+    return () => {
+      if (inputRef.current) {
+        inputRef.current.removeEventListener('input', onChangeInput);
+        inputRef.current.removeEventListener('click', onClickInput);
+      }
+
+      !!boxRef.current && boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
+    };
+  }, [dataSource]);
+  /* End handler */
+
+  /* Start component */
+
+  const labelComp = useMemo(() => label ? jsx(Label, _extends({
+    required: required,
+    disabled: disabled
+  }, labelProps), label) : null, [label, required, disabled]);
+  const inputComp = useMemo(() => jsx("div", {
+    css: DropdownForm,
+    ref: formRef,
+    className: 'DGN-UI-Dropdown-Form',
+    style: formStyle
+  }, jsx("div", {
+    css: forInput
+  }, multiple ? jsx("div", _extends({}, inputProps, {
+    style: {
+      cursor: 'text',
+      ...inputStyle
+    },
+    ref: inputRef,
+    css: DropdownInput,
+    className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
+    type: "text",
+    onChange: e => {
+      e.preventDefault();
+      return false;
+    }
+  })) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", _extends({}, inputProps, {
+    contentEditable: true,
+    style: inputStyle,
+    ref: inputRef,
+    css: DropdownInput,
+    className: 'dgn-dropdown-multiple ' + (inputProps.className || ''),
+    type: "text",
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        return false;
+      }
+    }
+  })) : jsx("input", _extends({}, inputProps, {
+    style: inputStyle,
+    ref: inputRef,
+    css: DropdownInput,
+    type: "text",
+    placeholder: placeholder
+  }))), jsx("div", {
+    ref: iconRef,
+    css: forIcon
+  }, jsx("span", {
+    className: 'dgn-dropdown-loading'
+  }, jsx(CircularProgress, {
+    width: 24,
+    strokeWidth: 2
+  })), clearAble && jsx(Icon, {
+    name: 'Close',
+    width: 12,
+    className: 'icon-close',
+    onClick: onClear
+  }), jsx(Icon, {
+    name: 'ArrowDown',
+    className: 'icon-dropdown',
+    onClick: triggerInput,
+    style: {
+      transition: 'transform 0.5s',
+      minHeight: '24px'
+    }
+  }))), [viewType, inputProps, inputStyle, multiple, clearAble, onChange]);
+  const errorComp = useMemo(() => !!error && !valueProp && valueProp !== 0 && jsx(HelperText, {
+    disabled: disabled,
+    style: {
+      minHeight: '16px',
+      position: 'absolute',
+      top: '100%',
+      ...errorStyle
+    }
+  }, error), [error, valueProp, disabled]);
+  /* End component */
+
+  return jsx("div", _extends({
+    ref: dropdownRef,
+    css: DropdownRoot,
+    className: ['DGN-UI-Dropdown', className].join(' ').trim(),
+    style: style
+  }, props), labelComp, inputComp, errorComp);
+}));
+Dropdown.defaultProps = {
+  viewType: 'underlined',
+  itemMode: 'normal',
+  itemMultipleSize: 'medium',
+  className: '',
+  label: '',
+  placeholder: '',
+  error: '',
+  iconExpr: 'none',
+  valueExpr: 'id',
+  displayExpr: 'name',
+  noDataText: getGlobal('noDataText'),
+  skip: 0,
+  limit: 50,
+  total: Number.MAX_SAFE_INTEGER,
+  clearAble: false,
+  loading: false,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  multiple: false,
+  allowSearch: false,
+  selectBox: false,
+  closeAfterSelect: true,
+  inputProps: {},
+  formStyle: {},
+  dataSource: [],
+  onInput: null
+};
+Dropdown.propTypes = {
+  /** the type of border you want to display */
+  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
+  /** the mode of item when rendering */
+  itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
+
+  /** Use for Chip component, the selected item was render default */
+  itemMultipleSize: PropTypes.oneOf(['small', 'medium']),
+
+  /** class for dropdown */
+  className: PropTypes.string,
+
+  /** label for input */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** hints for input */
+  placeholder: PropTypes.string,
+
+  /** error for input */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Used to identify the parent key (only used for itemMode is 'treeview') */
+  treeViewID: PropTypes.string,
+
+  /** used for mapping into a nested list (only used for itemMode is 'treeview') */
+  treeViewParentID: PropTypes.string,
+
+  /** statement when there is no data */
+  noDataText: PropTypes.string,
+
+  /** display this icon if not found the icon follow iconExpr */
+  iconDefault: PropTypes.string,
+
+  /** 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,
+    prefix: PropTypes.string,
+    suffix: PropTypes.string,
+    style: PropTypes.object
+  })]),
+
+  /** default value is displayed for first render */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+
+  /** the displayed value for each change */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+
+  /** field name used for text display in input */
+  keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
+   */
+  displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+
+  /** display sub content */
+  subText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+  /** the field name used for the returned result */
+  valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   */
+  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** number of items is ignored */
+  skip: PropTypes.number,
+
+  /** number of elements that are rendered each time */
+  limit: PropTypes.number,
+
+  /** The total number of elements in the dropdown */
+  total: PropTypes.number,
+
+  /** display the clear icon if true */
+  clearAble: PropTypes.bool,
+
+  /** shows data loading status */
+  loading: PropTypes.bool,
+
+  /** prevent all event if true, hide all icon */
+  disabled: PropTypes.bool,
+
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
+  /** auto close after select an item */
+  closeAfterSelect: PropTypes.bool,
+
+  /** At least one item is required */
+  required: PropTypes.bool,
+
+  /** allows to attach multiple items */
+  multiple: PropTypes.bool,
+
+  /** display input box search if true */
+  allowSearch: PropTypes.bool,
+
+  /** show checkbox in each dropdown item */
+  selectBox: PropTypes.bool,
+
+  /** an object default for value (use for load more) */
+  valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+
+  /** style inline for dropdown */
+  style: PropTypes.object,
+
+  /** props of input in Dropdown component */
+  inputProps: PropTypes.object,
+
+  /** style inline of input in Dropdown component */
+  inputStyle: PropTypes.object,
+
+  /** style inline of box contain input and icon in Dropdown component */
+  formStyle: PropTypes.object,
+
+  /** style inline of label in Dropdown component */
+  labelProps: PropTypes.object,
+
+  /** style inline of error in Dropdown component */
+  errorStyle: PropTypes.object,
+
+  /** The array of elements that appear in the dropdown */
+  dataSource: PropTypes.array,
+
+  /** The function to get ref of Dropdown component */
+  refs: PropTypes.func,
+
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
+   */
+  renderItem: PropTypes.func,
+
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+   */
+  renderSelectedItem: PropTypes.func,
+
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
+   */
+  onInput: PropTypes.func,
+
+  /** the function will run when key down input */
+  onKeyDown: PropTypes.func,
+
+  /** the function will run when select or remove one item */
+  onChange: PropTypes.func,
+
+  /** the function will run when scroll near the end */
+  onLoadMore: PropTypes.func,
+
+  /** the contents in Dropdown box (Exp: TreeView) */
+  children: PropTypes.node,
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default Dropdown;