diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,1858 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import {
+    Avatar,
+    ButtonIcon,
+    Checkbox,
+    Chip,
+    CircularProgress,
+    HelperText,
+    InputBase,
+    Label,
+    Popup,
+    TreeView,
+    Typography,
+} from 'components';
+import Popover from 'components/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 => {
+    if (searchDelayTime === true) return getGlobal('delayOnInput');
+
+    const units = {
+        m: 60000,
+        s: 1000,
+        ms: 1,
+    };
+    return typeof searchDelayTime === 'number'
+        ? searchDelayTime
+        : (searchDelayTime.match(/[^a-z]+/i)?.[0] || 1) * units[searchDelayTime.match(/ms|s|m/i)?.[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 = memo(
+    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?.target)
+                    )
+                ) {
+                    setOpenState(true);
+                }
+            }
+        };
+
+        const showDropdown = () => {
+            const dropdown = children ? (
+                <div
+                    css={_DropdownListCSS}
+                    ref={dropdownListRef}
+                    className={'DGN-Dropdown-List'}
+                    onKeyDown={moveOnItem}
+                    onScroll={onLoadMoreHandler}
+                    tabIndex={-1}
+                >
+                    {dataSourceState?.length ? children : EmptyDataText}
+                </div>
+            ) : itemMode === 'normal' ? (
+                mapDropdown()
+            ) : (
+                mapTreeView()
+            );
+
+            return (
+                <Fragment>
+                    {(multiple || allowSearch) && itemMode === 'normal' && !children ? (
+                        <div className={'DGN-Dropdown-Search'}>
+                            <InputBase
+                                inputRef={searchRef}
+                                delayOnChange={searchDelayTime}
+                                viewType={'outlined'}
+                                defaultValue={txtSearch}
+                                onChange={onChangeInput}
+                                style={{ marginBottom: 1 }}
+                                onKeyDown={pressESCHandler}
+                                readOnly={loadingState}
+                                autoFocus
+                            />
+                        </div>
+                    ) : null}
+                    {multiple && maximumSelectionLength ? (
+                        <Typography
+                            css={css`
+                                padding: ${spacing([2, 4])};
+                            `}
+                        >
+                            {getGlobal('selected')} {valueMulti?.length || 0}/{maximumSelectionLength}
+                        </Typography>
+                    ) : null}
+                    <div className={'DGN-Dropdown-Box'}>{dropdown}</div>
+                    {loadingState ? (
+                        <div css={LoadingProgressCSS} className={'DGN-Dropdown-Loading-Progress'}>
+                            <CircularProgress size={24} />
+                        </div>
+                    ) : null}
+                </Fragment>
+            );
+        };
+
+        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) => {
+            if (dropdownRef.current) {
+                setOpenState(false);
+            }
+            onClosed?.({
+                event,
+                reason,
+                recentSearch: 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?.[displayExpr];
+                // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+                if (!mask && regexBetween.test(displayExpr)) {
+                    mask = displayExpr?.replace(regexBetween, _ => data?.[_] || '');
+                } else if (!mask) {
+                    mask = typeof data !== 'object' ? data : '';
+                }
+                text = mask.toString().replace(regexInclude, '');
+            }
+            return text;
+        };
+
+        const mapDropdown = () => {
+            const items = [];
+            let dataSourceUsable = [...dataSourceState];
+
+            // search dataSource dựa trên txtSearch
+            if (!onInput || action?.loadData) {
+                dataSourceUsable = 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?.[valueExpr]);
+                    }
+                });
+            }
+
+            if (vlObjDefaultState && vlObjDefaultState?.length) {
+                const length = 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 = dataSourceUsable?.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 = (
+                        <Fragment>
+                            <Typography className={'DGN-UI-Dropdown-PrimaryText'} type={'p1'}>
+                                {displayText}
+                            </Typography>
+                            <Typography className={'DGN-UI-Dropdown-SubText'} type={'p3'} color={'text/sub'}>
+                                {typeof subText === 'function' ? subText({ data, index }) : data[subText] || subText}
+                            </Typography>
+                        </Fragment>
+                    );
+                }
+                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 })
+                    ) : (
+                        <Typography type={'p1'}>{displayText}</Typography>
+                    );
+                if (multiple && selectBox) {
+                    const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
+                    const isMaximumSelection = maximumSelectionLength === valueMulti?.length;
+                    itemDisabled = itemDisabled || (isMaximumSelection && !checked);
+                    items.push(
+                        <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}
+                        >
+                            <Checkbox
+                                css={_CheckBoxCSS}
+                                forTreeView
+                                checked={checked}
+                                value={value}
+                                disabled={itemDisabled}
+                                onChange={e => onChangeValue(e, displayText, value, icon, data, index)}
+                            >
+                                {icon}
+                                {text}
+                            </Checkbox>
+                        </div>
+                    );
+                } else {
+                    items.push(
+                        <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}
+                        </div>
+                    );
+                }
+            }
+            return (
+                <div
+                    css={_DropdownListCSS}
+                    ref={dropdownListRef}
+                    className={'DGN-Dropdown-List'}
+                    onKeyDown={moveOnItem}
+                    onScroll={onLoadMoreHandler}
+                    tabIndex={-1}
+                >
+                    {items?.length ? items : EmptyDataText}
+                </div>
+            );
+        };
+
+        const mapTreeView = () => {
+            return (
+                <div
+                    css={_DropdownListCSS}
+                    ref={dropdownListRef}
+                    className={'DGN-Dropdown-List'}
+                    onKeyDown={moveOnItem}
+                    onScroll={onLoadMoreHandler}
+                    tabIndex={-1}
+                >
+                    {dataSourceState?.length ? (
+                        <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
+                    )}
+                </div>
+            );
+        };
+
+        // remove item  cũ và append child item mới khi load more
+        const loadMoreItemsDropdown = (i = 0, pattern) => {
+            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?.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?.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 &&
+                    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 = <Typography type={'p1'}>{displayText}</Typography>;
+                if (renderItem && typeof renderItem === 'function') {
+                    displayText = renderItem({ data, index: i });
+                } else if (subText) {
+                    displayText = (
+                        <Fragment>
+                            <Typography className={'DGN-UI-Dropdown-PrimaryText'} type={'p1'}>
+                                {displayText}
+                            </Typography>
+                            <Typography className={'DGN-UI-Dropdown-SubText'} type={'p3'} color={'text/sub'}>
+                                {typeof subText === 'function' ? subText({ data, index: i }) : data[subText] || subText}
+                            </Typography>
+                        </Fragment>
+                    );
+                }
+                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 = (
+                        <Checkbox css={_CheckBoxCSS} forTreeView checked={checked}>
+                            {icon}
+                            {text}
+                        </Checkbox>
+                    );
+                } else {
+                    item = (
+                        <Fragment>
+                            {icon}
+                            {text}
+                        </Fragment>
+                    );
+                }
+                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 (
+                <Avatar
+                    css={css`
+                        margin-right: ${spacing([insideChip ? 0 : 2])};
+                    `}
+                    disabled
+                    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 {
+                        const message = data?.message || 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?.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?.length < totalState && !loadingState) {
+                    const { scrollTop, scrollHeight, offsetHeight } = e.target;
+                    if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
+                        const length = dropdownListRef.current.children?.length - (vlObjDefaultState?.length || 0);
+                        // dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
+                        if (!!onLoadMore && typeof onLoadMore === 'boolean' && 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 => {
+            if (!dropdownRef.current) return; // Kiểm tra nếu dropdown đóng trước searchDelayTime thì không chạy
+            setTxtSearch(e.target.value ?? '');
+            if (onInput) {
+                onInput(e);
+            }
+            if (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) => {
+            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 = [...valueMulti]?.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?.({ ...inputRef?.current, target: { value: '' } });
+            !!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) {
+                    currentValue[unique] = [];
+                } else {
+                    currentValue[unique] = '';
+                    setValueSingle('');
+                }
+                return;
+            }
+            const length = dataSourceState?.length;
+            const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : 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] = [];
+                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?.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?.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 => (
+                <Typography type={'p1'} lineClamp={multilineSelectedItem ? undefined : 1} hoverTooltip={!_isMobile}>
+                    {content}
+                </Typography>
+            );
+            if (typeof renderSelectedItem === 'function') {
+                const item = renderSelectedItem({ data });
+                const el = (
+                    <div
+                        css={[
+                            displayFlex,
+                            parseWidth('100%'),
+                            parseMinHeight(24),
+                            !multilineSelectedItem && parseMaxHeight(24),
+                        ]}
+                    >
+                        {item}
+                    </div>
+                );
+                setValueSingle(el);
+            } else if (iconExpr && iconExpr !== 'none') {
+                const icon = getIconFromData(data);
+                const valueWithIcon = (
+                    <Fragment>
+                        {icon ? icon : null}
+                        {renderContent(text)}
+                    </Fragment>
+                );
+                const el = <div css={[displayFlex, itemsCenter, parseMinHeight(24)]}>{valueWithIcon}</div>;
+                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 => {
+                    if (allValue[unique][allValue[unique]?.length - 1] !== value) {
+                        allValue[unique].push(value);
+                    }
+                    setValueIntoInput(value);
+                },
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            // keep old method
+            currentRef.closeDropdown = () => closeDropdown(null, 'ref');
+            currentRef.showDropdown = () => setOpenState(true);
+            currentRef.onClear = onClear;
+            currentRef.setPreviousValue = setPreviousValue;
+            currentRef.setValue = value => {
+                if (allValue[unique][allValue[unique]?.length - 1] !== value) {
+                    allValue[unique].push(value);
+                }
+                setValueIntoInput(value);
+            };
+            currentRef.DOM = ref.current;
+            return currentRef;
+        });
+
+        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 ?? defaultValue) && !disabled && !readOnly && !loadingState
+            );
+        }, [clearAble, valueProp, defaultValue, disabled, readOnly, loadingState]);
+
+        useEffect(() => {
+            if (multiple) {
+                if (valueMulti?.length) {
+                    const dataFilter = getData();
+                    dataChosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i?.[valueExpr]));
+                } else dataChosen.current = [];
+            }
+            if (valueObjectDefault) {
+                if (Array.isArray(valueObjectDefault)) {
+                    setVlObjDefaultState([...dataChosen.current, ...valueObjectDefault]);
+                } else if (typeof valueObjectDefault === 'object') {
+                    setVlObjDefaultState(
+                        Object.keys(valueObjectDefault)?.length !== 0
+                            ? [...dataChosen.current, valueObjectDefault]
+                            : [...dataChosen.current]
+                    );
+                }
+            } else {
+                setVlObjDefaultState([...dataChosen.current]);
+            }
+        }, [valueObjectDefault, valueMulti]);
+
+        useEffect(() => {
+            allValue[unique] = [];
+
+            if (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(() => {
+            if (allValue[unique][allValue[unique]?.length - 1] !== valueProp) {
+                allValue[unique].push(valueProp);
+            }
+            if (multiple && valueProp) {
+                setValueMulti(convertData(valueProp, valueExpr));
+            }
+            // Close dropdown treeview by children when select item
+            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) {
+                if (!disabled && !readOnly) {
+                    inputRef.current.addEventListener('input', onChangeInput);
+                }
+                const length = dropdownListRef.current?.children?.length;
+                if (length < dataSourceState?.length + 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?.loadData &&
+                (!valueSingle || 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?.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 = (
+            <div css={_DropdownItemCSS} className={'no-data'}>
+                {noDataText}
+            </div>
+        );
+
+        const LabelView = useMemo(
+            () =>
+                label ? (
+                    <Label required={required} disabled={disabled} {...labelProps}>
+                        {label}
+                    </Label>
+                ) : null,
+            [label, required, disabled, labelProps]
+        );
+
+        const getData = () => {
+            let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
+            dataFilter = uniqBy([...vlObjDefaultState, ...dataFilter], data => data?.[valueExpr]);
+            return dataFilter;
+        };
+
+        const InputView = (
+            <div
+                css={_DropdownFormCSS}
+                ref={formRef}
+                className={classNames('DGN-UI-Dropdown-Form', openState && 'dropdown-showing')}
+            >
+                <div css={_InputCSS} className={'DGN-UI-Dropdown-Form-Input'}>
+                    {multiple && valueMulti?.length ? (
+                        <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 = (
+                                            <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;
+                                }
+                            })}
+                        </div>
+                    ) : typeof renderSelectedItem === 'function' || (iconExpr && iconExpr !== 'none') ? (
+                        <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}
+                        </div>
+                    ) : (
+                        <div css={_DropdownInputCSS} onClick={onClickInput}>
+                            <Typography
+                                {...inputProps}
+                                ref={inputRef}
+                                hoverTooltip
+                                lineClamp={multilineSelectedItem ? undefined : 1}
+                                type={'p1'}
+                                style={{
+                                    lineHeight: multiple ? '30px' : '24px',
+                                    ...inputStyle,
+                                }}
+                                tabIndex={-1}
+                            >
+                                {valueSingle}
+                            </Typography>
+                        </div>
+                    )}
+                </div>
+                <div ref={iconRef} css={_IconCSS} className={'DGN-UI-Dropdown-Icon'}>
+                    {loadingState ? <CircularProgress size={24} /> : null}
+                    {showClear ? (
+                        <ButtonIcon
+                            css={css`
+                                margin-right: ${spacing([1])};
+                            `}
+                            viewType={'ghost'}
+                            name={'Close'}
+                            onClick={onClear}
+                        />
+                    ) : null}
+                    {!loadingState ? (
+                        <ButtonIcon
+                            key={openState}
+                            css={animation}
+                            viewType={'ghost'}
+                            name={openState ? 'ArrowUp' : 'ArrowDown'}
+                            onClick={setShowDropdown}
+                            disabled={disabled || readOnly}
+                        />
+                    ) : null}
+                </div>
+            </div>
+        );
+
+        const ErrorView = useMemo(() => {
+            return error ? (
+                <HelperText {...helperTextProps} disabled={disabled}>
+                    {error}
+                </HelperText>
+            ) : null;
+        }, [disabled, error, helperTextProps]);
+
+        const DropdownView = (
+            <Popover
+                css={PopoverCSS(theme)}
+                ref={dropdownRef}
+                open={openState}
+                anchor={ref.current}
+                width={popoverWidth}
+                onClose={closeDropdown}
+            >
+                {showDropdown()}
+            </Popover>
+        );
+
+        /* End component */
+
+        return (
+            <Fragment>
+                <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}
+                </div>
+                {DropdownView}
+                <Popup ref={popupRef} type={'danger'} {...popupDataState} />
+            </Fragment>
+        );
+    })
+);
+
+/* 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;