@apdesign/web-react 1.3.3 → 1.4.0

package/lib/Select/select.js

@@ -100,7 +100,7 @@ var defaultProps = {
 };
 var triggerPopupAlign = { bottom: 4 };
 function Select(baseProps, ref) {
-    var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
+    var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl, locale = _a.locale;
     var props = (0, useMergeProps_1.default)(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, isQuickSingleSelectMode = props.isQuickSingleSelectMode, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, 
     // events
@@ -170,6 +170,8 @@ function Select(baseProps, ref) {
     var refPopupExiting = (0, react_1.useRef)(false);
     // Unique ID of this select instance
     var instancePopupID = (0, useId_1.default)(prefixCls + "-popup-");
+    // 添加一个 ref 来跟踪 props.value 的前一个值
+    var prevValueRef = (0, react_1.useRef)(props.value);
     var isNoOptionSelected = (0, utils_1.isEmptyValue)(value, isMultipleMode);
     var valueActiveDefault = (0, react_1.useMemo)(function () {
         var _a, _b;
@@ -237,6 +239,20 @@ function Select(baseProps, ref) {
             setProxyValue(value.length === 0 ? undefined : value[0]);
         }
     }, [isMultipleMode, value]);
+    (0, react_1.useEffect)(function () {
+        if (isMultipleQuickSelectMode) {
+            // 判断 props.value 之前有值现在被手动设置为 undefined 或者 []
+            var hadValueBefore = !(0, is_1.isNullOrUndefined)(prevValueRef.current) &&
+                !(Array.isArray(prevValueRef.current) && prevValueRef.current.length === 0);
+            var isEmptyNow = (0, is_1.isNullOrUndefined)(props.value) || (Array.isArray(props.value) && props.value.length === 0);
+            if (hadValueBefore && isEmptyNow) {
+                setValue((0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue));
+                setProxyValue((0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue));
+            }
+            // 更新 ref 以保存当前值用于下次比较
+            prevValueRef.current = props.value;
+        }
+    }, [props.value, isMultipleQuickSelectMode]);
     // 选项下拉框显示/隐藏时的一些自动行为
     (0, react_1.useEffect)(function () {
         if (popupVisible) {
@@ -525,7 +541,7 @@ function Select(baseProps, ref) {
     ]));
     var renderPopup = function () {
         var _a;
-        var _b, _c;
+        var _b, _c, _d, _e;
         // 没有设置弹出框的 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');
@@ -578,8 +594,8 @@ function Select(baseProps, ref) {
                     padding: '8px 16px 4px',
                     borderTop: '1px solid var(--color-fill-3)',
                 } },
-                react_1.default.createElement(index_1.Button, { size: "mini", onClick: cancelCheck }, "\u53D6\u6D88"),
-                react_1.default.createElement(index_1.Button, { type: "primary", size: "mini", onClick: confirmCheck }, "\u786E\u5B9A"))))) : null;
+                react_1.default.createElement(index_1.Button, { size: "mini", onClick: cancelCheck }, (_d = locale.Select) === null || _d === void 0 ? void 0 : _d.cancelText),
+                react_1.default.createElement(index_1.Button, { type: "primary", size: "mini", onClick: confirmCheck }, (_e = locale.Select) === null || _e === void 0 ? void 0 : _e.okText))))) : null;
         // Avoid drop-down box jitter when user is creating a selection
         var isUserCreating = allowCreate && inputValue;
         // Dropdown-placeholder when there is no options

package/lib/Tree/index.js

@@ -130,6 +130,21 @@ var ConfigProvider_1 = require("../ConfigProvider");
 var util_1 = require("./util");
 var context_1 = require("./context");
 var pick_1 = require("../_util/pick");
+var style = document.createElement('style');
+document.head.appendChild(style);
+// 动态写入 hover 样式
+var rules = [
+    ".arco-tree-node:hover .arco-tree-select-extra-QuickSingleSelect-button { display: block !important; }",
+];
+rules.forEach(function (rule) {
+    try {
+        var styleSheet = style.sheet;
+        style.sheet.insertRule(rule, styleSheet.cssRules.length);
+    }
+    catch (e) {
+        console.error('插入 CSS 规则失败:', rule, e);
+    }
+});
 var DefaultFieldNames = {
     key: 'key',
     title: 'title',

package/lib/TreeSelect/hook/useStateValue.d.ts

@@ -15,5 +15,5 @@ declare const useStateValue: (props: TreeSelectProps, key2nodeProps: KeyCacheTyp
     trigger?: NodeProps;
     checked?: boolean;
     selected?: boolean;
-}) => void];
+}) => void, LabelValue[], () => void, () => void];
 export default useStateValue;

package/lib/TreeSelect/hook/useStateValue.js

@@ -26,6 +26,15 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -88,6 +97,8 @@ var getInitCheckKeys = function (keys, key2nodeProps, indeterminateKeys, props)
     return keys;
 };
 var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
+    var multiple = props.multiple || props.treeCheckable;
+    var isMultipleQuickSelectMode = multiple && props.isQuickSingleSelectMode;
     var valueCopy = (0, react_1.useRef)([]);
     var calcValue = function () {
         var propsValue = props.value || props.defaultValue || [];
@@ -100,10 +111,18 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
         return (0, exports.parseValue)(propsValue, key2nodeProps);
     };
     var _a = __read((0, react_1.useState)(calcValue), 2), value = _a[0], _setValue = _a[1];
+    // proxyValue 在isMultipleQuickSelectMode时候挡在真实value前面进行展示,真实的value只在确定时候更新。 proxyValue 必须和原有的value行为一致
+    var _b = __read((0, react_1.useState)(value), 2), proxyValue = _b[0], _setProxyValue = _b[1];
+    var proxyValueCopy = (0, react_1.useRef)(value);
+    var stateValue = isMultipleQuickSelectMode ? proxyValue : value;
     var setValue = function (value) {
         valueCopy.current = value;
         _setValue(value);
     };
+    var setProxyValue = function (value) {
+        proxyValueCopy.current = value;
+        _setProxyValue(value);
+    };
     (0, useUpdate_1.default)(function () {
         var nextValue = calcValue();
         if ('value' in props) {
@@ -111,10 +130,12 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
                 // 以外部传入为准,只比较value
                 if (!(0, isEqualWith_1.default)((0, utils_1.normalizeValueToArray)(value), (0, utils_1.normalizeValueToArray)(nextValue))) {
                     setValue(nextValue);
+                    setProxyValue(nextValue);
                 }
             }
             else if (!(0, isEqualWith_1.default)(value, nextValue)) {
                 setValue(nextValue);
+                setProxyValue(nextValue);
             }
         }
     }, [
@@ -124,10 +145,14 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
         props.value,
         key2nodeProps,
     ]);
+    var extra = (0, react_1.useRef)(null);
     var setStateValue = (0, react_1.useCallback)(function (newValue, extra) {
         var onChange = props.onChange, labelInValue = props.labelInValue;
         var multiple = props.multiple || props.treeCheckable;
-        if (!('value' in props)) {
+        if (isMultipleQuickSelectMode) {
+            setProxyValue(newValue);
+        }
+        if (!('value' in props) && !isMultipleQuickSelectMode) {
             setValue(newValue);
         }
         var tmp;
@@ -139,8 +164,24 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
         else {
             tmp = labelInValue ? newValue[0] : newValue[0] && newValue[0].value;
         }
-        onChange && onChange(tmp, extra);
+        if (isMultipleQuickSelectMode) {
+            extra.current = extra;
+        }
+        else {
+            onChange && onChange(tmp, extra);
+        }
     }, [props.onChange, props.labelInValue, props.multiple, props.treeCheckable, props.value]);
-    return [value, setStateValue];
+    var confirmSetValue = function () {
+        var onChange = props.onChange, labelInValue = props.labelInValue;
+        setValue(__spreadArray([], __read(proxyValueCopy.current), false));
+        var tmp = proxyValueCopy.current.map(function (x) {
+            return labelInValue ? { label: x.label, value: x.value } : x.value;
+        });
+        onChange && onChange(tmp, extra.current);
+    };
+    var cancelSetValue = function () {
+        setProxyValue(value);
+    };
+    return [stateValue, setStateValue, value, confirmSetValue, cancelSetValue];
 };
 exports.default = useStateValue;

package/lib/TreeSelect/interface.d.ts

@@ -19,6 +19,12 @@ export interface TreeSelectProps extends SelectViewCommonProps {
      * @en Whether to select multiple
      */
     multiple?: boolean;
+    /**
+     * @zh 是否开启快速单选模式。开启后，由于需要最后点击确定或者取消来选择，单个选项变化的事件将无效
+     * @en Whether to enable quick single selection mode.
+     * @defaultValue true
+     */
+    isQuickSingleSelectMode?: boolean;
     /**
      * @zh 选择框的默认值
      * @en The key of node selected by default

package/lib/TreeSelect/tree-list.d.ts

@@ -7,6 +7,7 @@ interface TreeListProps extends TreeSelectProps {
     filterNode: TreeProps['filterNode'];
     inputValue?: string;
     prefixCls?: string;
+    confirmCheck: () => void;
 }
 declare const _default: React.ForwardRefExoticComponent<TreeListProps & React.RefAttributes<unknown>>;
 export default _default;

package/lib/TreeSelect/tree-list.js

@@ -61,10 +61,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var Tree_1 = __importDefault(require("../Tree"));
 var is_1 = require("../_util/is");
+var ConfigProvider_1 = require("../ConfigProvider");
 function TreeList(props, ref) {
-    var value = props.value, multiple = props.multiple, loadMore = props.loadMore, treeCheckedStrategy = props.treeCheckedStrategy, treeCheckStrictly = props.treeCheckStrictly, treeData = props.treeData, treeProps = props.treeProps, prefixCls = props.prefixCls, treeCheckable = props.treeCheckable;
+    var value = props.value, multiple = props.multiple, isQuickSingleSelectMode = props.isQuickSingleSelectMode, loadMore = props.loadMore, treeCheckedStrategy = props.treeCheckedStrategy, treeCheckStrictly = props.treeCheckStrictly, treeData = props.treeData, treeProps = props.treeProps, prefixCls = props.prefixCls, treeCheckable = props.treeCheckable, confirmCheck = props.confirmCheck;
+    var locale = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).locale;
     var propsRenderTitle = treeProps && treeProps.renderTitle;
+    var propsRenderExtra = treeProps && treeProps.renderExtra;
     var treeRef = (0, react_1.useRef)();
+    var isMultipleQuickSelectMode = multiple && isQuickSingleSelectMode;
     var handleCheck = (0, react_1.useCallback)(function (keys, _a) {
         var checkedNodes = _a.checkedNodes, checked = _a.checked, node = _a.node;
         var newValue = keys.map(function (key) {
@@ -144,6 +148,37 @@ function TreeList(props, ref) {
         }
         return title;
     }, [prefixCls, props.inputValue, propsRenderTitle]);
+    var renderExtra = (0, react_1.useCallback)(function (nodeProps) {
+        var _a;
+        if (isMultipleQuickSelectMode) {
+            if (propsRenderExtra) {
+                console.warn('renderExtra is not recommended for use in quick single select mode');
+            }
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: prefixCls + "-extra-QuickSingleSelect-button", style: {
+                        position: 'absolute',
+                        right: 0,
+                        display: 'none',
+                        backgroundColor: 'rgb(var(--primary-6))',
+                        cursor: 'pointer',
+                        color: 'white',
+                        padding: '6px',
+                        fontSize: 12,
+                        paddingLeft: '20px',
+                        clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        whiteSpace: 'nowrap',
+                    }, onClick: function () {
+                        handleCheck([nodeProps._key], {
+                            checkedNodes: [],
+                            checked: true,
+                            node: { props: nodeProps },
+                        });
+                        confirmCheck();
+                    } }, (_a = locale.Select) === null || _a === void 0 ? void 0 : _a.filterThisItemOnly), propsRenderExtra === null || propsRenderExtra === void 0 ? void 0 :
+                propsRenderExtra(nodeProps)));
+        }
+        return propsRenderExtra === null || propsRenderExtra === void 0 ? void 0 : propsRenderExtra(nodeProps);
+    }, [propsRenderExtra, isMultipleQuickSelectMode]);
     var extraProps = (0, react_1.useMemo)(function () {
         return props.treeCheckable
             ? {
@@ -163,6 +198,6 @@ function TreeList(props, ref) {
     }, []);
     return (react_1.default.createElement(Tree_1.default, __assign({ ref: treeRef, size: props.size, blockNode: true, filterNode: props.filterNode }, treeProps, { checkable: treeCheckable, multiple: multiple, loadMore: props.loadMore ? handleLoadMore : undefined, checkedStrategy: treeCheckedStrategy, checkStrictly: treeCheckStrictly, onMouseDown: function (e) {
             e.preventDefault();
-        } }, extraProps, { treeData: treeData, fieldNames: props.fieldNames, renderTitle: renderTitle, onSelect: onSelect, selectedKeys: selectedKeys })));
+        } }, extraProps, { treeData: treeData, fieldNames: props.fieldNames, renderTitle: renderTitle, renderExtra: renderExtra, onSelect: onSelect, selectedKeys: selectedKeys })));
 }
 exports.default = (0, react_1.forwardRef)(TreeList);

package/lib/TreeSelect/tree-select.js

@@ -113,6 +113,7 @@ var classNames_1 = __importDefault(require("../_util/classNames"));
 var useMergeProps_1 = __importDefault(require("../_util/hooks/useMergeProps"));
 var useIsFirstRender_1 = __importDefault(require("../_util/hooks/useIsFirstRender"));
 var useId_1 = __importDefault(require("../_util/hooks/useId"));
+var Button_1 = __importDefault(require("../Button"));
 function isEmptyValue(value) {
     return (!value ||
         ((0, is_1.isArray)(value) && value.length === 0) ||
@@ -122,10 +123,11 @@ var defaultProps = {
     bordered: true,
     treeCheckedStrategy: Tree_1.default.SHOW_CHILD,
     fieldNames: interface_1.DefaultFieldNames,
+    isQuickSingleSelectMode: true,
 };
 var triggerPopupAlign = { bottom: 4 };
 var TreeSelect = function (baseProps, ref) {
-    var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
+    var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl, locale = _a.locale;
     var props = (0, useMergeProps_1.default)(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.TreeSelect);
     var refIsFirstRender = (0, useIsFirstRender_1.default)();
     var triggerRef = (0, react_1.useRef)();
@@ -147,8 +149,9 @@ var TreeSelect = function (baseProps, ref) {
     // 触发 onInputValueChange 回调的原因
     var refOnInputChangeCallbackReason = (0, react_1.useRef)(null);
     var onInputValueChange = props.onInputValueChange;
-    var _f = __read((0, useStateValue_1.default)(props, key2nodeProps, indeterminateKeys), 2), value = _f[0], setValue = _f[1];
     var multiple = props.multiple || props.treeCheckable;
+    var isMultipleQuickSelectMode = multiple && props.isQuickSingleSelectMode;
+    var _f = __read((0, useStateValue_1.default)(props, key2nodeProps, indeterminateKeys), 5), value = _f[0], setValue = _f[1], realValue = _f[2], confirmSetValue = _f[3], cancelSetValue = _f[4];
     var prefixCls = getPrefixCls('tree-select');
     var isFilterNode = inputValue && !(0, is_1.isFunction)(props.onSearch);
     // Unique ID of this select instance
@@ -158,6 +161,9 @@ var TreeSelect = function (baseProps, ref) {
         if (visible !== popupVisible) {
             setPopupVisible(visible);
             (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, visible);
+            if (isMultipleQuickSelectMode && !visible) {
+                cancelSetValue();
+            }
         }
     };
     // 尝试更新 inputValue，并触发 onInputValueChange
@@ -230,6 +236,13 @@ var TreeSelect = function (baseProps, ref) {
             tryUpdatePopupVisible(false);
         }
     }, [setValue, resetInputValue, popupVisible]);
+    var cancelCheck = function () {
+        tryUpdatePopupVisible(false);
+    };
+    var confirmCheck = function () {
+        confirmSetValue();
+        tryUpdatePopupVisible(false);
+    };
     var handleRemoveCheckedItem = function (item, index, e) {
         e.stopPropagation();
         if (item.disabled) {
@@ -237,21 +250,31 @@ var TreeSelect = function (baseProps, ref) {
         }
         var itemValue = (0, is_1.isObject)(item.value) ? item.value.value : item.value;
         if (!props.treeCheckable || props.treeCheckStrictly || !key2nodeProps[itemValue]) {
-            var newValue = value.filter(function (_, i) { return i !== index; });
+            var newValue = realValue.filter(function (_, i) { return i !== index; });
             triggerChange(newValue, {
                 trigger: key2nodeProps[itemValue] || item,
                 checked: false,
                 selected: false,
             });
+            if (isMultipleQuickSelectMode) {
+                setTimeout(function () {
+                    confirmCheck();
+                }, 0);
+            }
             return;
         }
-        var result = (0, util_1.getAllCheckedKeysByCheck)(itemValue, false, (0, utils_1.normalizeValueToArray)(value), key2nodeProps, indeterminateKeys.current);
+        var result = (0, util_1.getAllCheckedKeysByCheck)(itemValue, false, (0, utils_1.normalizeValueToArray)(realValue), key2nodeProps, indeterminateKeys.current);
         indeterminateKeys.current = result.indeterminateKeys;
-        triggerChange((0, useStateValue_1.parseValue)(result.checkedKeys, key2nodeProps, value), {
+        triggerChange((0, useStateValue_1.parseValue)(result.checkedKeys, key2nodeProps, realValue), {
             trigger: key2nodeProps[itemValue],
             checked: false,
             selected: false,
         });
+        if (isMultipleQuickSelectMode) {
+            setTimeout(function () {
+                confirmCheck();
+            }, 0);
+        }
     };
     (0, react_1.useEffect)(function () {
         inputValue !== undefined && handleSearch(inputValue);
@@ -314,12 +337,35 @@ var TreeSelect = function (baseProps, ref) {
     var renderView = function (eleView) {
         return (react_1.default.createElement(Trigger_1.default, __assign({ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, ref: triggerRef, classNames: "slideDynamicOrigin", trigger: "click", position: "bl", getPopupContainer: props.getPopupContainer, popupAlign: triggerPopupAlign, unmountOnExit: props.unmountOnExit }, props.triggerProps, { className: (0, classNames_1.default)(prefixCls + "-trigger", props.triggerProps && props.triggerProps.className), popup: function () {
                 var _a;
-                var _b, _c, _d;
+                var _b, _c, _d, _e, _f;
                 var dropdownRender = props.dropdownRender;
-                var dom = (isFilterNode && isEmptyValue(searchKeys)) || isEmptyValue(treeData) ? (props.notFoundContent || renderEmpty('TreeSelect')) : (react_1.default.createElement(tree_list_1.default, __assign({ prefixCls: prefixCls, ref: treeRef }, props, { inputValue: inputValue, filterNode: filterNode, value: value, onChange: triggerChange, multiple: multiple, treeData: treeData })));
-                return (react_1.default.createElement("div", { id: instancePopupID, className: (0, classNames_1.default)(prefixCls + "-popup", (_a = {}, _a[prefixCls + "-rtl-popup"] = rtl, _a)), style: __assign({ maxHeight: ((_b = props.treeProps) === null || _b === void 0 ? void 0 : _b.height) || ((_d = (_c = props.treeProps) === null || _c === void 0 ? void 0 : _c.virtualListProps) === null || _d === void 0 ? void 0 : _d.height)
+                var treeListDom = (react_1.default.createElement(tree_list_1.default, __assign({ prefixCls: prefixCls, ref: treeRef }, props, { inputValue: inputValue, filterNode: filterNode, value: value, onChange: triggerChange, multiple: multiple, treeData: treeData, confirmCheck: confirmCheck })));
+                var dom = (isFilterNode && isEmptyValue(searchKeys)) || isEmptyValue(treeData) ? (props.notFoundContent || renderEmpty('TreeSelect')) : isMultipleQuickSelectMode ? (react_1.default.createElement("div", { style: {
+                        maxHeight: 188,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    } },
+                    react_1.default.createElement("div", { style: { flex: 1, overflowY: 'auto' } }, treeListDom),
+                    react_1.default.createElement("div", { style: {
+                            flex: 'none',
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 12,
+                            padding: '8px 16px 4px',
+                            borderTop: '1px solid var(--color-fill-3)',
+                        } },
+                        react_1.default.createElement(Button_1.default, { size: "mini", onClick: cancelCheck }, (_b = locale.Select) === null || _b === void 0 ? void 0 : _b.cancelText),
+                        react_1.default.createElement(Button_1.default, { type: "primary", size: "mini", onClick: function () {
+                                confirmCheck();
+                            } }, (_c = locale.Select) === null || _c === void 0 ? void 0 : _c.okText)))) : (treeListDom);
+                var wrapStyle = isMultipleQuickSelectMode
+                    ? {
+                        overflow: 'hidden',
+                    }
+                    : {};
+                return (react_1.default.createElement("div", { id: instancePopupID, className: (0, classNames_1.default)(prefixCls + "-popup", (_a = {}, _a[prefixCls + "-rtl-popup"] = rtl, _a)), style: __assign(__assign({ maxHeight: ((_d = props.treeProps) === null || _d === void 0 ? void 0 : _d.height) || ((_f = (_e = props.treeProps) === null || _e === void 0 ? void 0 : _e.virtualListProps) === null || _f === void 0 ? void 0 : _f.height)
                             ? 'unset'
-                            : '' }, props.dropdownMenuStyle) }, (0, is_1.isFunction)(dropdownRender) ? dropdownRender(dom) : dom));
+                            : '' }, wrapStyle), props.dropdownMenuStyle) }, (0, is_1.isFunction)(dropdownRender) ? dropdownRender(dom) : dom));
             }, disabled: props.disabled, onVisibleChange: function (visible) {
                 tryUpdatePopupVisible(visible);
                 // props.onVisibleChange && props.onVisibleChange(visible);
@@ -340,9 +386,9 @@ var TreeSelect = function (baseProps, ref) {
             return props.triggerElement({ value: valueForCallback });
         })()
         : props.triggerElement;
-    return !(0, is_1.isNullOrUndefined)(customTriggerElement) ? (renderView(customTriggerElement)) : (react_1.default.createElement(select_view_1.default, __assign({ ref: refSelectView, rtl: rtl, ariaControls: instancePopupID }, props, { popupVisible: popupVisible, value: !multiple && (0, is_1.isArray)(value) ? value[0] : value, inputValue: inputValue, 
+    return !(0, is_1.isNullOrUndefined)(customTriggerElement) ? (renderView(customTriggerElement)) : (react_1.default.createElement(select_view_1.default, __assign({ ref: refSelectView, rtl: rtl, ariaControls: instancePopupID }, props, { popupVisible: popupVisible, value: !multiple && (0, is_1.isArray)(realValue) ? realValue[0] : realValue, inputValue: inputValue, 
         // other
-        isEmptyValue: isEmptyValue(value), prefixCls: prefixCls, isMultiple: multiple, renderText: renderText, onSort: tryUpdateSelectValue, onRemoveCheckedItem: handleRemoveCheckedItem, onClear: function (e) {
+        isEmptyValue: isEmptyValue(realValue), prefixCls: prefixCls, isMultiple: multiple, renderText: renderText, onSort: tryUpdateSelectValue, onRemoveCheckedItem: handleRemoveCheckedItem, onClear: function (e) {
             var _a;
             e.stopPropagation();
             triggerChange([], {});

package/lib/index.d.ts

@@ -139,4 +139,4 @@ export type { WatermarkProps } from './Watermark/interface';
 export { default as Watermark } from './Watermark';
 export type { ImageProps, ImagePreviewProps, ImagePreviewActionProps, ImagePreviewGroupProps } from './Image/interface';
 export { default as Image } from './Image';
-export declare const version = "1.3.3";
+export declare const version = "1.4.0";

package/lib/index.js

@@ -147,4 +147,4 @@ var Watermark_1 = require("./Watermark");
 Object.defineProperty(exports, "Watermark", { enumerable: true, get: function () { return __importDefault(Watermark_1).default; } });
 var Image_1 = require("./Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
-exports.version = '1.3.3';
+exports.version = '1.4.0';

package/lib/locale/en-US.d.ts

@@ -230,5 +230,10 @@ declare const _default: {
         preset: string;
         empty: string;
     };
+    Select: {
+        cancelText: string;
+        okText: string;
+        filterThisItemOnly: string;
+    };
 };
 export default _default;

package/lib/locale/en-US.js

@@ -171,4 +171,9 @@ exports.default = {
         preset: 'Preset Colors',
         empty: 'Empty',
     },
+    Select: {
+        cancelText: 'Cancel',
+        okText: 'OK',
+        filterThisItemOnly: 'Filter this item only',
+    },
 };

package/lib/locale/interface.d.ts

@@ -34,6 +34,7 @@ export interface Locale {
     Transfer: Record<string, any>;
     ImagePreview: Record<string, any>;
     Form?: Record<string, any>;
+    Select?: Record<string, any>;
     ColorPicker: Record<string, any>;
 }
 export {};

package/lib/locale/zh-CN.d.ts

@@ -277,5 +277,10 @@ declare const _default: {
         preset: string;
         empty: string;
     };
+    Select: {
+        cancelText: string;
+        okText: string;
+        filterThisItemOnly: string;
+    };
 };
 export default _default;

package/lib/locale/zh-CN.js

@@ -218,4 +218,9 @@ exports.default = {
         preset: '系统预设颜色',
         empty: '暂无',
     },
+    Select: {
+        cancelText: '取消',
+        okText: '确定',
+        filterThisItemOnly: '仅筛选此项',
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apdesign/web-react",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "AP Design React UI Library.",
   "module": "./es/index.js",
   "main": "./lib/index.js",