@apdesign/web-react 1.0.0

package/es/Select/select.js

@@ -0,0 +1,672 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import cs from '../_util/classNames';
+import { ArrowUp, ArrowDown, Enter, Esc, Tab } from '../_util/keycode';
+import Trigger from '../Trigger';
+import OptGroup from './opt-group';
+import Option from './option';
+import ResizeObserver from '../_util/resizeObserver';
+import { isArray, isFunction, isObject } from '../_util/is';
+import getHotkeyHandler from '../_util/getHotkeyHandler';
+import warning from '../_util/warning';
+import SelectView from '../_class/select-view';
+import VirtualList from '../_class/VirtualList';
+import { preventDefaultEvent, isEmptyValue, getValidValue, isSelectOption, isSelectOptGroup, flatChildren, } from './utils';
+import { ConfigContext } from '../ConfigProvider';
+import useMergeValue from '../_util/hooks/useMergeValue';
+import omit from '../_util/omit';
+import useMergeProps from '../_util/hooks/useMergeProps';
+import useId from '../_util/hooks/useId';
+// 用户创建中的option的origin标识
+var USER_CREATING_OPTION_ORIGIN = 'userCreatingOption';
+var defaultProps = {
+    trigger: 'click',
+    bordered: true,
+    filterOption: true,
+    unmountOnExit: true,
+    defaultActiveFirstOption: true,
+};
+var triggerPopupAlign = { bottom: 4 };
+function Select(baseProps, ref) {
+    var _a = useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
+    var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Select);
+    var children = props.children, renderFormat = props.renderFormat, defaultActiveFirstOption = props.defaultActiveFirstOption, disabled = props.disabled, unmountOnExit = props.unmountOnExit, notFoundContent = props.notFoundContent, showSearch = props.showSearch, tokenSeparators = props.tokenSeparators, options = props.options, filterOption = props.filterOption, labelInValue = props.labelInValue, getPopupContainer = props.getPopupContainer, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, 
+    // events
+    onChange = props.onChange, onSelect = props.onSelect, onDeselect = props.onDeselect, onClear = props.onClear, onSearch = props.onSearch, onFocus = props.onFocus, onBlur = props.onBlur, onPopupScroll = props.onPopupScroll, onVisibleChange = props.onVisibleChange, onInputValueChange = props.onInputValueChange, onPaste = props.onPaste, onKeyDown = props.onKeyDown;
+    // TODO 兼容逻辑，3.0 移除 tags 模式
+    var mode = props.mode, allowCreate = props.allowCreate;
+    if (mode === 'tags') {
+        mode = 'multiple';
+        allowCreate = true;
+        warning(true, "[Arco Select] The 'tags' mode will be removed in the next major version, please use {mode: \"multiple\", allowCreate: true} instead.");
+    }
+    var prefixCls = getPrefixCls('select');
+    var isMultipleMode = mode === 'multiple';
+    // TODO: 统一 useMergeValue 函数的表现
+    var _b = __read(useState(getValidValue(props.defaultValue, isMultipleMode, labelInValue)), 2), stateValue = _b[0], setValue = _b[1];
+    var value = 'value' in props ? getValidValue(props.value, isMultipleMode, labelInValue) : stateValue;
+    var _c = __read(useMergeValue('', {
+        value: 'inputValue' in props ? props.inputValue || '' : undefined,
+    }), 3), inputValue = _c[0], setInputValue = _c[1], stateInputValue = _c[2];
+    var _d = __read(useMergeValue(false, {
+        defaultValue: props.defaultPopupVisible,
+        value: 'popupVisible' in props
+            ? props.popupVisible
+            : triggerProps && 'popupVisible' in triggerProps
+                ? triggerProps.popupVisible
+                : undefined,
+    }), 2), popupVisible = _d[0], setPopupVisible = _d[1];
+    // allowCreate 时，用户正在创建的选项值
+    var _e = __read(useState(null), 2), userCreatingOption = _e[0], setUserCreatingOption = _e[1];
+    // allowCreate 时，由用户输入而扩展到选项中的值
+    var _f = __read(useState([]), 2), userCreatedOptions = _f[0], setUserCreatedOptions = _f[1];
+    // 具有选中态或者 hover 态的 option 的 value
+    var _g = __read(useState(isArray(value) ? value[0] : value), 2), valueActive = _g[0], setValueActive = _g[1];
+    // 缓存较为耗时的 flatChildren 的结果
+    var _h = useMemo(function () {
+        return flatChildren({ children: children, options: options, filterOption: filterOption }, {
+            prefixCls: prefixCls,
+            inputValue: inputValue,
+            userCreatedOptions: userCreatedOptions,
+            userCreatingOption: userCreatingOption,
+        });
+    }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _h.childrenList, optionInfoMap = _h.optionInfoMap, optionValueList = _h.optionValueList, optionIndexListForArrowKey = _h.optionIndexListForArrowKey, hasOptGroup = _h.hasOptGroup, hasComplexLabelInOptions = _h.hasComplexLabelInOptions;
+    // ref
+    var refWrapper = useRef(null);
+    var refTrigger = useRef(null);
+    var refSelectView = useRef(null);
+    // 用来保存 value 和选中项的映射
+    var refValueMap = useRef([]);
+    // 用 none 表示目前处于键盘操作中，忽略鼠标的 onMouseEnter 和 onMouseLeave 事件
+    var refKeyboardArrowDirection = useRef(null);
+    // 触发 onInputValueChange 回调的值
+    var refOnInputChangeCallbackValue = useRef(inputValue);
+    // 触发 onInputValueChange 回调的原因
+    var refOnInputChangeCallbackReason = useRef(null);
+    // 上次成功触发自动分词的时间
+    var refTSLastSeparateTriggered = useRef(0);
+    // Whether in the hidden animation of drop-down
+    var refPopupExiting = useRef(false);
+    // Unique ID of this select instance
+    var instancePopupID = useId(prefixCls + "-popup-");
+    var isNoOptionSelected = isEmptyValue(value, isMultipleMode);
+    var valueActiveDefault = useMemo(function () {
+        var _a, _b;
+        if (defaultActiveFirstOption) {
+            var firstValue = isArray(value) ? value[0] : value;
+            // only valid option will render in option list
+            // if it's not rendered (e.g. filtered by user-search), ignore it
+            var isFirstValueOptionSelectable = !isNoOptionSelected && ((_a = optionInfoMap.get(firstValue)) === null || _a === void 0 ? void 0 : _a._valid);
+            // 是否第一个 option 是创建中选项
+            var isFirstCreatingOption = ((_b = optionInfoMap === null || optionInfoMap === void 0 ? void 0 : optionInfoMap.get(optionValueList[0])) === null || _b === void 0 ? void 0 : _b._origin) === USER_CREATING_OPTION_ORIGIN;
+            return isFirstValueOptionSelectable && !isFirstCreatingOption
+                ? firstValue
+                : optionValueList[optionIndexListForArrowKey[0]];
+        }
+        return undefined;
+    }, [
+        value,
+        optionInfoMap,
+        optionValueList,
+        optionIndexListForArrowKey,
+        defaultActiveFirstOption,
+        isNoOptionSelected,
+    ]);
+    var scrollIntoView = useCallback(function (optionValue, options) {
+        var _a;
+        var activeOption = optionInfoMap.get(optionValue);
+        if (refWrapper.current && ((_a = activeOption === null || activeOption === void 0 ? void 0 : activeOption.child) === null || _a === void 0 ? void 0 : _a.props)) {
+            refWrapper.current.scrollTo({ key: activeOption.child.props._key, options: options });
+        }
+    }, [optionInfoMap]);
+    var userCreatedOptionFormatter = useCallback(function (inputValue, creating) {
+        if (creating === void 0) { creating = false; }
+        return isObject(allowCreate) && typeof (allowCreate === null || allowCreate === void 0 ? void 0 : allowCreate.formatter) === 'function'
+            ? allowCreate.formatter(inputValue, creating)
+            : inputValue;
+    }, [allowCreate]);
+    // Try to update inputValue and trigger onInputValueChange callback
+    var tryUpdateInputValue = function (value, reason) {
+        if (value !== refOnInputChangeCallbackValue.current ||
+            reason !== refOnInputChangeCallbackReason.current) {
+            setInputValue(value);
+            refOnInputChangeCallbackValue.current = value;
+            refOnInputChangeCallbackReason.current = reason;
+            onInputValueChange && onInputValueChange(value, reason);
+        }
+    };
+    // 尝试更新 popupVisible，触发 onVisibleChange
+    var tryUpdatePopupVisible = function (value) {
+        if (popupVisible !== value) {
+            setPopupVisible(value);
+            onVisibleChange && onVisibleChange(value);
+            triggerProps && triggerProps.onVisibleChange && triggerProps.onVisibleChange(value);
+        }
+    };
+    // 处理模式切换时 value 格式的校正
+    useEffect(function () {
+        if (isMultipleMode) {
+            if (!Array.isArray(value)) {
+                setValue(value === undefined ? [] : [value]);
+            }
+        }
+        else if (Array.isArray(value)) {
+            setValue(value.length === 0 ? undefined : value[0]);
+        }
+    }, [isMultipleMode, value]);
+    // 选项下拉框显示/隐藏时的一些自动行为
+    useEffect(function () {
+        if (popupVisible) {
+            // 重新设置 hover 态的 Option
+            setValueActive(valueActiveDefault);
+            // 在弹出框动画结束之后再执行scrollIntoView，否则会有不必要的滚动产生
+            var firstValue_1 = isArray(value) ? value[0] : value;
+            if (!isNoOptionSelected && optionInfoMap.has(firstValue_1)) {
+                setTimeout(function () { return scrollIntoView(firstValue_1); });
+            }
+        }
+    }, [popupVisible]);
+    // 处理键盘选择Option时的列表滚动
+    useEffect(function () {
+        if (refKeyboardArrowDirection.current === 'up' ||
+            refKeyboardArrowDirection.current === 'down') {
+            scrollIntoView(valueActive);
+            refKeyboardArrowDirection.current = 'none';
+        }
+    }, [valueActive]);
+    // 选项列表改变后，将 active 选项重置
+    useEffect(function () {
+        setValueActive(valueActiveDefault);
+    }, [JSON.stringify(childrenList.map(function (child) { var _a; return (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value; }))]);
+    // 更新 refValueMap，避免数组规模无节制扩大
+    useEffect(function () {
+        refValueMap.current = refValueMap.current.filter(function (x) {
+            return isMultipleMode
+                ? isArray(value) && value.indexOf(x.value) > -1
+                : x.value === value;
+        });
+    }, [value, isMultipleMode]);
+    // allowCreate 时，value 改变时更新下拉框选项
+    useEffect(function () {
+        if (allowCreate) {
+            var nextUserCreatedOptions = void 0;
+            if (isEmptyValue(value, isMultipleMode)) {
+                nextUserCreatedOptions = [];
+            }
+            else {
+                // 将单选和多选的情况统一处理
+                var currentValueList_1 = Array.isArray(value) ? value : [value];
+                // 将无对应下拉框选项的 value 当作用户创建的选项
+                var newUserCreatedOptions = currentValueList_1
+                    .filter(function (v) {
+                    var _a;
+                    var option = optionInfoMap.get(v) || ((_a = refValueMap.current.find(function (item) { return item.value === v; })) === null || _a === void 0 ? void 0 : _a.option);
+                    return !option || option._origin === USER_CREATING_OPTION_ORIGIN;
+                })
+                    .map(function (op) { return userCreatedOptionFormatter(op); });
+                // 将 value 中不存在的 Option 移除
+                var validUserCreatedOptions = userCreatedOptions.filter(function (op) {
+                    var opValue = isObject(op) ? op.value : op;
+                    return currentValueList_1.indexOf(opValue) !== -1;
+                });
+                nextUserCreatedOptions = validUserCreatedOptions.concat(newUserCreatedOptions);
+            }
+            var getOptionsValueString = function (options) {
+                return options.map(function (option) { return (isObject(option) ? option.value : option); }).toString();
+            };
+            // only update state when user-created options changed
+            if (getOptionsValueString(nextUserCreatedOptions) !== getOptionsValueString(userCreatedOptions)) {
+                setUserCreatedOptions(nextUserCreatedOptions);
+            }
+        }
+    }, [value, allowCreate, isMultipleMode, userCreatedOptionFormatter]);
+    // allowCreate 时，根据输入内容动态修改下拉框选项
+    useEffect(function () {
+        if (allowCreate) {
+            // 避免正在输入的内容覆盖已有的选项
+            setUserCreatingOption(inputValue && !optionInfoMap.has(inputValue)
+                ? userCreatedOptionFormatter(inputValue, true)
+                : null);
+        }
+    }, [inputValue, userCreatedOptionFormatter]);
+    // 在 inputValue 变化时，适时触发 onSearch
+    useEffect(function () {
+        var reason = refOnInputChangeCallbackReason.current;
+        if (stateInputValue === inputValue && (reason === 'manual' || reason === 'optionListHide')) {
+            onSearch && onSearch(inputValue, reason);
+        }
+    }, [inputValue]);
+    var getOptionInfoByValue = useCallback(function (value) {
+        var option = optionInfoMap.get(value);
+        if (option) {
+            var index = refValueMap.current.findIndex(function (item) { return item.value === value; });
+            if (index > -1) {
+                refValueMap.current.splice(index, 1, { value: value, option: option });
+            }
+            else {
+                refValueMap.current.push({ value: value, option: option });
+            }
+            return option;
+        }
+        var item = refValueMap.current.find(function (x) { return x.value === value; });
+        return item && item.option;
+    }, [optionInfoMap]);
+    // 使用方向键选择时，获取下一个 active option 的值
+    var getValueActive = function (direction) {
+        if (!optionIndexListForArrowKey.length) {
+            return undefined;
+        }
+        if (valueActive === undefined || !optionInfoMap.has(valueActive)) {
+            return optionValueList[optionIndexListForArrowKey[0]];
+        }
+        var activeOption = optionInfoMap.get(valueActive);
+        var activeIndex = activeOption._index;
+        var _index = optionIndexListForArrowKey.indexOf(activeIndex);
+        var _length = optionIndexListForArrowKey.length;
+        return optionValueList[optionIndexListForArrowKey[((direction === 'up' ? _index - 1 : _index + 1) + _length) % _length]];
+    };
+    // Object should be returned when labelInValue is true
+    var getValueAndOptionForCallback = function (stateValue, isEmpty) {
+        if (isEmpty === void 0) { isEmpty = isEmptyValue(stateValue, isMultipleMode); }
+        var value = stateValue;
+        var option = stateValue === undefined
+            ? undefined
+            : Array.isArray(stateValue)
+                ? stateValue.map(getOptionInfoByValue)
+                : getOptionInfoByValue(stateValue);
+        if (labelInValue && !isEmpty) {
+            var getOptionLabel_1 = function (optionValue, optionInfo) {
+                var e_1, _a;
+                if (optionInfo) {
+                    return optionInfo.children;
+                }
+                // https://github.com/arco-design/arco-design/issues/442
+                // Make sure parameter value has valid label if props.value is already set
+                var propValue = 'value' in props ? props.value : 'defaultValue' in props ? props.defaultValue : null;
+                // Multiple mode
+                if (Array.isArray(propValue)) {
+                    try {
+                        for (var propValue_1 = __values(propValue), propValue_1_1 = propValue_1.next(); !propValue_1_1.done; propValue_1_1 = propValue_1.next()) {
+                            var item = propValue_1_1.value;
+                            if (isObject(item) && item.value === optionValue) {
+                                return item.label;
+                            }
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (propValue_1_1 && !propValue_1_1.done && (_a = propValue_1.return)) _a.call(propValue_1);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+                // Single mode
+                else if (isObject(propValue) && propValue.value === optionValue) {
+                    return propValue.label;
+                }
+            };
+            if (Array.isArray(stateValue)) {
+                value = stateValue.map(function (optionValue, index) { return ({
+                    value: optionValue,
+                    label: getOptionLabel_1(optionValue, option[index]),
+                }); });
+            }
+            else {
+                value = { value: stateValue, label: getOptionLabel_1(stateValue, option) };
+            }
+        }
+        return { option: option, value: value };
+    };
+    var tryUpdateSelectValue = function (value) {
+        setValue(value);
+        if (onChange) {
+            var paramsForCallback = getValueAndOptionForCallback(value);
+            onChange(paramsForCallback.value, paramsForCallback.option);
+        }
+    };
+    // 多选时，选择/取消选择一个选项
+    var checkOption = function (optionValue, operation) {
+        // 取消选中时不需要检查option是否存在，因为可能已被外部剔除了此选项
+        if (operation === 'remove' || (operation === 'add' && optionInfoMap.get(optionValue))) {
+            var newValue = operation === 'add'
+                ? value.concat(optionValue)
+                : value.filter(function (v) { return v !== optionValue; });
+            var callbackToTrigger = operation === 'add' ? onSelect : onDeselect;
+            tryUpdateSelectValue(newValue);
+            if (typeof callbackToTrigger === 'function') {
+                var paramsForCallback = getValueAndOptionForCallback(optionValue, false);
+                callbackToTrigger(paramsForCallback.value, paramsForCallback.option);
+            }
+        }
+    };
+    var handleOptionClick = function (optionValue, disabled) {
+        if (disabled) {
+            return;
+        }
+        if (isMultipleMode) {
+            checkOption(optionValue, value.indexOf(optionValue) === -1 ? 'add' : 'remove');
+            // 点击一个选项时，清空输入框内容
+            if (!isObject(showSearch) || !showSearch.retainInputValueWhileSelect) {
+                tryUpdateInputValue('', 'optionChecked');
+            }
+        }
+        else {
+            if (optionValue !== value) {
+                tryUpdateSelectValue(optionValue);
+            }
+            setTimeout(function () {
+                tryUpdatePopupVisible(false);
+            });
+        }
+    };
+    // 注册快捷键
+    var hotkeyHandler = getHotkeyHandler(new Map([
+        [Esc.code, function () { return tryUpdatePopupVisible(false); }],
+        [
+            Enter.code,
+            function () {
+                if (popupVisible) {
+                    var option = optionInfoMap.get(valueActive);
+                    option && handleOptionClick(valueActive, option.disabled);
+                }
+                else {
+                    tryUpdatePopupVisible(true);
+                }
+            },
+        ],
+        [
+            Tab.code,
+            // 按tab键切换，关闭开启的弹出框
+            function () { return tryUpdatePopupVisible(false); },
+        ],
+        [
+            ArrowUp.code,
+            function () {
+                if (popupVisible) {
+                    refKeyboardArrowDirection.current = 'up';
+                    setValueActive(getValueActive('up'));
+                    return false;
+                }
+            },
+        ],
+        [
+            ArrowDown.code,
+            function () {
+                if (popupVisible) {
+                    refKeyboardArrowDirection.current = 'down';
+                    setValueActive(getValueActive('down'));
+                    return false;
+                }
+            },
+        ],
+    ]));
+    var renderPopup = function () {
+        var _a;
+        var _b, _c;
+        // 没有设置弹出框的 width 时，需要在虚拟列表渲染的瞬间获得子元素的最大宽度
+        var needMeasureLongestItem = (triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.autoAlignPopupWidth) === false &&
+            (!((_b = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.style) === null || _b === void 0 ? void 0 : _b.width) || ((_c = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.style) === null || _c === void 0 ? void 0 : _c.width) === 'auto');
+        // Option 存在复杂子元素时，让获得最长子元素变得困难，此时直接禁用虚拟滚动
+        var needForbidVirtual = needMeasureLongestItem && hasComplexLabelInOptions;
+        var mergedNotFoundContent = 'notFoundContent' in props ? notFoundContent : renderEmpty('Select');
+        // 选项列表元素
+        var eleOptionList = childrenList.length ? (React.createElement(VirtualList, __assign({ id: instancePopupID, role: "listbox", style: dropdownMenuStyle, className: cs(prefixCls + "-popup-inner", dropdownMenuClassName), ref: refWrapper, data: childrenList, height: null, isStaticItemHeight: !hasOptGroup, measureLongestItem: needMeasureLongestItem, itemKey: function (child) { return child.props._key; }, onMouseDown: preventDefaultEvent, onMouseMove: function () {
+                refKeyboardArrowDirection.current = null;
+            }, onScroll: function (e) { return onPopupScroll && onPopupScroll(e.target); } }, virtualListProps, { threshold: needForbidVirtual ? null : virtualListProps === null || virtualListProps === void 0 ? void 0 : virtualListProps.threshold }), function (child) {
+            var _a;
+            if (isSelectOptGroup(child)) {
+                return React.createElement(child.type, __assign({}, child.props, { prefixCls: prefixCls }));
+            }
+            if (isSelectOption(child)) {
+                var optionValue = (_a = child.props) === null || _a === void 0 ? void 0 : _a.value;
+                var userCreatingOptionValue = isObject(userCreatingOption)
+                    ? userCreatingOption.value
+                    : userCreatingOption;
+                var userCreatedOptionValues = userCreatedOptions.map(function (op) {
+                    return isObject(op) ? op.value : op;
+                });
+                var optionProps = {
+                    prefixCls: prefixCls,
+                    rtl: rtl,
+                    _valueActive: valueActive,
+                    _valueSelect: value,
+                    _isMultipleMode: isMultipleMode,
+                    _isUserCreatingOption: allowCreate && userCreatingOptionValue === optionValue,
+                    _isUserCreatedOption: allowCreate && userCreatedOptionValues.indexOf(optionValue) > -1,
+                    _onClick: handleOptionClick,
+                    _onMouseEnter: function (value) {
+                        refKeyboardArrowDirection.current === null && setValueActive(value);
+                    },
+                    _onMouseLeave: function () {
+                        refKeyboardArrowDirection.current === null && setValueActive(undefined);
+                    },
+                };
+                return child && React.createElement(child.type, __assign({}, child.props, optionProps));
+            }
+            return child;
+        })) : null;
+        // Avoid drop-down box jitter when user is creating a selection
+        var isUserCreating = allowCreate && inputValue;
+        // Dropdown-placeholder when there is no options
+        var eleNoOptionPlaceholder = mergedNotFoundContent && !isUserCreating ? (React.createElement("div", { style: dropdownMenuStyle, className: cs(prefixCls + "-popup-inner", dropdownMenuClassName) }, mergedNotFoundContent)) : null;
+        return (React.createElement("div", { className: cs(prefixCls + "-popup", (_a = {},
+                _a[prefixCls + "-popup-hidden"] = eleOptionList === null && eleNoOptionPlaceholder === null,
+                _a[prefixCls + "-popup-multiple"] = isMultipleMode,
+                _a)), 
+            // Make sure hotkey works when dropdown layer get focused
+            tabIndex: -1, onKeyDown: function (e) { return hotkeyHandler(e); } }, typeof dropdownRender === 'function'
+            ? dropdownRender(eleOptionList || eleNoOptionPlaceholder)
+            : eleOptionList || eleNoOptionPlaceholder));
+    };
+    var handleTokenSeparators = function (str) {
+        // clear the timestamp, and then we can judge whether tokenSeparators has been triggered
+        // according to timestamp value
+        refTSLastSeparateTriggered.current = null;
+        if (isMultipleMode && isArray(tokenSeparators) && tokenSeparators.length) {
+            var rawValues_1 = str.split(new RegExp("[" + tokenSeparators.join('') + "]"));
+            // 输入了分隔符的情况
+            if (rawValues_1.length > 1) {
+                // record the timestamp of tokenSeparators triggered
+                refTSLastSeparateTriggered.current = Date.now();
+                var splitValues = rawValues_1.filter(function (v, index) { return v && rawValues_1.indexOf(v) === index; });
+                var newValue_1 = value.slice(0);
+                var needUpdate_1 = false;
+                splitValues.forEach(function (v) {
+                    if (newValue_1.indexOf(v) === -1 && (allowCreate || optionInfoMap.get(v))) {
+                        newValue_1.push(v);
+                        needUpdate_1 = true;
+                    }
+                });
+                if (needUpdate_1) {
+                    tryUpdateSelectValue(newValue_1);
+                }
+            }
+        }
+        return !!refTSLastSeparateTriggered.current;
+    };
+    // SelectView组件事件处理
+    var selectViewEventHandlers = {
+        onFocus: onFocus,
+        onBlur: function (event) {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            // when drop-down is always hidden, input-text needs to be cleared after blur
+            !popupVisible && !refPopupExiting.current && tryUpdateInputValue('', 'optionListHide');
+        },
+        onKeyDown: function (event) {
+            // 处理特殊功能键的自动分词
+            if (event.target.tagName === 'INPUT' && event.target.value) {
+                var isTab = event.key === Tab.key;
+                var isEnter = event.key === Enter.key;
+                if (isEnter || isTab) {
+                    var suffix = isEnter ? '\n' : isTab ? '\t' : '';
+                    if (handleTokenSeparators(event.target.value + suffix)) {
+                        // 回车后不会触发 onChangeInputValue 回调，所以在这里直接清空输入框
+                        tryUpdateInputValue('', 'tokenSeparator');
+                    }
+                }
+            }
+            // 处理快捷键
+            hotkeyHandler(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        },
+        onChangeInputValue: function (value, _a) {
+            var inputType = _a.nativeEvent.inputType;
+            // Pasting in the input box will trigger onPaste first and then onChange, but the value of onChange does not contain a newline character.
+            // If word segmentation has just been triggered due to pasting, onChange will no longer attempt word segmentation.
+            // Do NOT use await, need to update input value right away
+            inputType !== 'insertFromPaste' && handleTokenSeparators(value);
+            if (refTSLastSeparateTriggered.current) {
+                tryUpdateInputValue('', 'tokenSeparator');
+            }
+            else {
+                tryUpdateInputValue(value, 'manual');
+            }
+            if (!popupVisible && value) {
+                tryUpdatePopupVisible(true);
+            }
+        },
+        onPaste: function (e) {
+            handleTokenSeparators(e.clipboardData.getData('text'));
+            onPaste === null || onPaste === void 0 ? void 0 : onPaste(e);
+        },
+        // Option Items
+        onRemoveCheckedItem: function (_, index, event) {
+            event.stopPropagation();
+            checkOption(value[index], 'remove');
+        },
+        onClear: function (event) {
+            event.stopPropagation();
+            if (isMultipleMode) {
+                // 保留已经被选中但被disabled的选项值
+                var newValue = value.filter(function (v) {
+                    var item = optionInfoMap.get(v);
+                    return item && item.disabled;
+                });
+                tryUpdateSelectValue(newValue);
+            }
+            else {
+                tryUpdateSelectValue(undefined);
+            }
+            tryUpdateInputValue('', 'manual');
+            onClear === null || onClear === void 0 ? void 0 : onClear(popupVisible);
+        },
+    };
+    useImperativeHandle(ref, function () {
+        var _a, _b;
+        return ({
+            dom: (_a = refSelectView.current) === null || _a === void 0 ? void 0 : _a.dom,
+            focus: function () {
+                refSelectView.current && refSelectView.current.focus();
+            },
+            blur: function () {
+                refSelectView.current && refSelectView.current.blur();
+            },
+            hotkeyHandler: hotkeyHandler,
+            activeOptionValue: valueActive,
+            getOptionInfoByValue: getOptionInfoByValue,
+            getOptionInfoList: function () { return __spreadArray([], __read(optionInfoMap.values()), false).filter(function (info) { return info._valid; }); },
+            scrollIntoView: scrollIntoView,
+            getRootDOMNode: (_b = refSelectView.current) === null || _b === void 0 ? void 0 : _b.getRootDOMNode,
+        });
+    }, [hotkeyHandler, optionInfoMap, valueActive, getOptionInfoByValue, scrollIntoView]);
+    var renderView = function (eleView) {
+        return (React.createElement(Trigger, __assign({ ref: function (ref) { return (refTrigger.current = ref); }, popup: renderPopup, trigger: trigger, disabled: disabled, getPopupContainer: getPopupContainer, classNames: "slideDynamicOrigin", autoAlignPopupWidth: true, popupAlign: triggerPopupAlign, popupVisible: popupVisible, unmountOnExit: unmountOnExit, onVisibleChange: tryUpdatePopupVisible, __onExit: function () {
+                refPopupExiting.current = true;
+            }, __onExited: function () {
+                refPopupExiting.current = false;
+                tryUpdateInputValue('', 'optionListHide');
+            } }, omit(triggerProps, ['popupVisible', 'onVisibleChange'])), eleView));
+    };
+    var usedTriggerElement = typeof triggerElement === 'function'
+        ? triggerElement(getValueAndOptionForCallback(value))
+        : triggerElement;
+    return (React.createElement(ResizeObserver, { onResize: function () { return refTrigger.current.updatePopupPosition(); } }, usedTriggerElement !== undefined && usedTriggerElement !== null ? (renderView(usedTriggerElement)) : (React.createElement(SelectView, __assign({}, props, selectViewEventHandlers, { ref: refSelectView, 
+        // state
+        value: value, inputValue: inputValue, popupVisible: popupVisible, 
+        // other
+        rtl: rtl, prefixCls: prefixCls, allowCreate: !!allowCreate, ariaControls: instancePopupID, isEmptyValue: isNoOptionSelected, isMultiple: isMultipleMode, onSort: tryUpdateSelectValue, renderText: function (value) {
+            var option = getOptionInfoByValue(value);
+            var text = value;
+            if (isFunction(renderFormat)) {
+                var paramsForCallback = getValueAndOptionForCallback(value, false);
+                text = renderFormat(paramsForCallback.option || null, paramsForCallback.value);
+            }
+            else {
+                var foundLabelFromProps = false;
+                if (labelInValue) {
+                    var propValue = props.value || props.defaultValue;
+                    if (Array.isArray(propValue)) {
+                        var targetLabeledValue = propValue.find(function (item) { return isObject(item) && item.value === value; });
+                        if (targetLabeledValue) {
+                            text = targetLabeledValue.label;
+                            foundLabelFromProps = true;
+                        }
+                    }
+                    else if (isObject(propValue)) {
+                        text = propValue.label;
+                        foundLabelFromProps = true;
+                    }
+                }
+                if (!foundLabelFromProps && option && 'children' in option) {
+                    text = option.children;
+                }
+            }
+            return {
+                text: text,
+                disabled: option && option.disabled,
+            };
+        }, renderView: renderView })))));
+}
+var ForwardRefSelect = React.forwardRef(Select);
+var SelectComponent = ForwardRefSelect;
+SelectComponent.displayName = 'Select';
+SelectComponent.Option = Option;
+SelectComponent.OptGroup = OptGroup;
+export default SelectComponent;