@apdesign/web-react 1.3.4 → 1.4.0

package/es/Button/index.d.ts

@@ -2,12 +2,12 @@ import React from 'react';
 import Group from './group';
 import { ButtonProps } from './interface';
 declare const ButtonComponent: React.ForwardRefExoticComponent<Partial<{
-    htmlType?: "button" | "submit" | "reset";
-} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "type" | "onClick"> & {
+    htmlType?: "button" | "reset" | "submit";
+} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "onClick" | "type"> & {
     href: string;
     target?: string;
     anchorProps?: React.HTMLProps<HTMLAnchorElement>;
-} & Omit<React.AnchorHTMLAttributes<any>, "className" | "type" | "onClick">> & React.RefAttributes<unknown>> & {
+} & Omit<React.AnchorHTMLAttributes<any>, "className" | "onClick" | "type">> & React.RefAttributes<unknown>> & {
     __BYTE_BUTTON: boolean;
     Group: typeof Group;
 };

package/es/DatePicker/util.d.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from 'dayjs';
 export declare function isTimeArrayChange(prevTime: Dayjs[], nextTime: Dayjs[]): boolean;
-export declare function getAvailableDayjsLength(value: any): 1 | 0 | 2;
+export declare function getAvailableDayjsLength(value: any): 0 | 1 | 2;
 export declare function isDisabledDate(cellDate: any, disabledDate: any, mode: any): boolean;
 declare type WeekStartType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export declare function getDefaultWeekStart(dayjsLocale: string): WeekStartType;

package/es/Menu/context.d.ts

@@ -6,7 +6,7 @@ export declare type HotkeyInfo = {
     type: 'sibling' | 'generation' | 'enter';
 };
 export declare type ResetHotkeyInfo = (activeKey?: string) => void;
-declare const MenuContext: import("react").Context<Pick<MenuProps, "inDropdown" | "theme" | "mode" | "levelIndent" | "icons" | "collapse" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "triggerProps" | "tooltipProps"> & {
+declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "inDropdown" | "theme" | "mode" | "levelIndent" | "icons" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "triggerProps" | "tooltipProps"> & {
     id?: string;
     prefixCls?: string;
     onClickMenuItem?: (key: string, event: any) => void;

package/es/Select/select.js

@@ -52,7 +52,7 @@ 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 { isArray, isFunction, isNullOrUndefined, isObject } from '../_util/is';
 import getHotkeyHandler from '../_util/getHotkeyHandler';
 import warning from '../_util/warning';
 import SelectView from '../_class/select-view';
@@ -146,6 +146,8 @@ function Select(baseProps, ref) {
     var refPopupExiting = useRef(false);
     // Unique ID of this select instance
     var instancePopupID = useId(prefixCls + "-popup-");
+    // 添加一个 ref 来跟踪 props.value 的前一个值
+    var prevValueRef = useRef(props.value);
     var isNoOptionSelected = isEmptyValue(value, isMultipleMode);
     var valueActiveDefault = useMemo(function () {
         var _a, _b;
@@ -213,6 +215,20 @@ function Select(baseProps, ref) {
             setProxyValue(value.length === 0 ? undefined : value[0]);
         }
     }, [isMultipleMode, value]);
+    useEffect(function () {
+        if (isMultipleQuickSelectMode) {
+            // 判断 props.value 之前有值现在被手动设置为 undefined 或者 []
+            var hadValueBefore = !isNullOrUndefined(prevValueRef.current) &&
+                !(Array.isArray(prevValueRef.current) && prevValueRef.current.length === 0);
+            var isEmptyNow = isNullOrUndefined(props.value) || (Array.isArray(props.value) && props.value.length === 0);
+            if (hadValueBefore && isEmptyNow) {
+                setValue(getValidValue(props.value, isMultipleMode, labelInValue));
+                setProxyValue(getValidValue(props.value, isMultipleMode, labelInValue));
+            }
+            // 更新 ref 以保存当前值用于下次比较
+            prevValueRef.current = props.value;
+        }
+    }, [props.value, isMultipleQuickSelectMode]);
     // 选项下拉框显示/隐藏时的一些自动行为
     useEffect(function () {
         if (popupVisible) {

package/es/Tree/index.js

@@ -106,6 +106,21 @@ import { ConfigContext } from '../ConfigProvider';
 import { getAllCheckedKeysByCheck, getCheckedKeysByInitKeys, getTreeDataFromTreeChildren, } from './util';
 import { TreeContext } from './context';
 import { pickDataAttributes } from '../_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/es/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/es/TreeSelect/hook/useStateValue.js

@@ -25,6 +25,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));
+};
 import { useState, useRef, useCallback } from 'react';
 import isEqualWith from 'lodash/isEqualWith';
 import { normalizeValueToArray } from '../utils';
@@ -81,6 +90,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 = useRef([]);
     var calcValue = function () {
         var propsValue = props.value || props.defaultValue || [];
@@ -93,10 +104,18 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
         return parseValue(propsValue, key2nodeProps);
     };
     var _a = __read(useState(calcValue), 2), value = _a[0], _setValue = _a[1];
+    // proxyValue 在isMultipleQuickSelectMode时候挡在真实value前面进行展示,真实的value只在确定时候更新。 proxyValue 必须和原有的value行为一致
+    var _b = __read(useState(value), 2), proxyValue = _b[0], _setProxyValue = _b[1];
+    var proxyValueCopy = 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);
+    };
     useUpdate(function () {
         var nextValue = calcValue();
         if ('value' in props) {
@@ -104,10 +123,12 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
                 // 以外部传入为准,只比较value
                 if (!isEqualWith(normalizeValueToArray(value), normalizeValueToArray(nextValue))) {
                     setValue(nextValue);
+                    setProxyValue(nextValue);
                 }
             }
             else if (!isEqualWith(value, nextValue)) {
                 setValue(nextValue);
+                setProxyValue(nextValue);
             }
         }
     }, [
@@ -117,10 +138,14 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
         props.value,
         key2nodeProps,
     ]);
+    var extra = useRef(null);
     var setStateValue = 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;
@@ -132,8 +157,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];
 };
 export default useStateValue;

package/es/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/es/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/es/TreeSelect/tree-list.js

@@ -34,13 +34,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { useRef, useCallback, useMemo, useImperativeHandle, forwardRef } from 'react';
+import React, { useRef, useCallback, useMemo, useImperativeHandle, forwardRef, useContext, } from 'react';
 import Tree from '../Tree';
 import { isFunction, isString } from '../_util/is';
+import { ConfigContext } from '../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 = useContext(ConfigContext).locale;
     var propsRenderTitle = treeProps && treeProps.renderTitle;
+    var propsRenderExtra = treeProps && treeProps.renderExtra;
     var treeRef = useRef();
+    var isMultipleQuickSelectMode = multiple && isQuickSingleSelectMode;
     var handleCheck = useCallback(function (keys, _a) {
         var checkedNodes = _a.checkedNodes, checked = _a.checked, node = _a.node;
         var newValue = keys.map(function (key) {
@@ -120,6 +124,37 @@ function TreeList(props, ref) {
         }
         return title;
     }, [prefixCls, props.inputValue, propsRenderTitle]);
+    var renderExtra = useCallback(function (nodeProps) {
+        var _a;
+        if (isMultipleQuickSelectMode) {
+            if (propsRenderExtra) {
+                console.warn('renderExtra is not recommended for use in quick single select mode');
+            }
+            return (React.createElement(React.Fragment, null,
+                React.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 = useMemo(function () {
         return props.treeCheckable
             ? {
@@ -139,6 +174,6 @@ function TreeList(props, ref) {
     }, []);
     return (React.createElement(Tree, __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 })));
 }
 export default forwardRef(TreeList);

package/es/TreeSelect/tree-select.js

@@ -89,6 +89,7 @@ import cs from '../_util/classNames';
 import useMergeProps from '../_util/hooks/useMergeProps';
 import useIsFirstRender from '../_util/hooks/useIsFirstRender';
 import useId from '../_util/hooks/useId';
+import Button from '../Button';
 function isEmptyValue(value) {
     return (!value ||
         (isArray(value) && value.length === 0) ||
@@ -98,10 +99,11 @@ var defaultProps = {
     bordered: true,
     treeCheckedStrategy: Tree.SHOW_CHILD,
     fieldNames: DefaultFieldNames,
+    isQuickSingleSelectMode: true,
 };
 var triggerPopupAlign = { bottom: 4 };
 var TreeSelect = function (baseProps, ref) {
-    var _a = useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
+    var _a = useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl, locale = _a.locale;
     var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.TreeSelect);
     var refIsFirstRender = useIsFirstRender();
     var triggerRef = useRef();
@@ -123,8 +125,9 @@ var TreeSelect = function (baseProps, ref) {
     // 触发 onInputValueChange 回调的原因
     var refOnInputChangeCallbackReason = useRef(null);
     var onInputValueChange = props.onInputValueChange;
-    var _f = __read(useStateValue(props, key2nodeProps, indeterminateKeys), 2), value = _f[0], setValue = _f[1];
     var multiple = props.multiple || props.treeCheckable;
+    var isMultipleQuickSelectMode = multiple && props.isQuickSingleSelectMode;
+    var _f = __read(useStateValue(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 && !isFunction(props.onSearch);
     // Unique ID of this select instance
@@ -134,6 +137,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
@@ -206,6 +212,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) {
@@ -213,21 +226,31 @@ var TreeSelect = function (baseProps, ref) {
         }
         var itemValue = 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 = getAllCheckedKeysByCheck(itemValue, false, normalizeValueToArray(value), key2nodeProps, indeterminateKeys.current);
+        var result = getAllCheckedKeysByCheck(itemValue, false, normalizeValueToArray(realValue), key2nodeProps, indeterminateKeys.current);
         indeterminateKeys.current = result.indeterminateKeys;
-        triggerChange(parseValue(result.checkedKeys, key2nodeProps, value), {
+        triggerChange(parseValue(result.checkedKeys, key2nodeProps, realValue), {
             trigger: key2nodeProps[itemValue],
             checked: false,
             selected: false,
         });
+        if (isMultipleQuickSelectMode) {
+            setTimeout(function () {
+                confirmCheck();
+            }, 0);
+        }
     };
     useEffect(function () {
         inputValue !== undefined && handleSearch(inputValue);
@@ -290,12 +313,35 @@ var TreeSelect = function (baseProps, ref) {
     var renderView = function (eleView) {
         return (React.createElement(Trigger, __assign({ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, ref: triggerRef, classNames: "slideDynamicOrigin", trigger: "click", position: "bl", getPopupContainer: props.getPopupContainer, popupAlign: triggerPopupAlign, unmountOnExit: props.unmountOnExit }, props.triggerProps, { className: cs(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.createElement(TreeList, __assign({ prefixCls: prefixCls, ref: treeRef }, props, { inputValue: inputValue, filterNode: filterNode, value: value, onChange: triggerChange, multiple: multiple, treeData: treeData })));
-                return (React.createElement("div", { id: instancePopupID, className: cs(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.createElement(TreeList, __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.createElement("div", { style: {
+                        maxHeight: 188,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    } },
+                    React.createElement("div", { style: { flex: 1, overflowY: 'auto' } }, treeListDom),
+                    React.createElement("div", { style: {
+                            flex: 'none',
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 12,
+                            padding: '8px 16px 4px',
+                            borderTop: '1px solid var(--color-fill-3)',
+                        } },
+                        React.createElement(Button, { size: "mini", onClick: cancelCheck }, (_b = locale.Select) === null || _b === void 0 ? void 0 : _b.cancelText),
+                        React.createElement(Button, { 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.createElement("div", { id: instancePopupID, className: cs(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) }, isFunction(dropdownRender) ? dropdownRender(dom) : dom));
+                            : '' }, wrapStyle), props.dropdownMenuStyle) }, isFunction(dropdownRender) ? dropdownRender(dom) : dom));
             }, disabled: props.disabled, onVisibleChange: function (visible) {
                 tryUpdatePopupVisible(visible);
                 // props.onVisibleChange && props.onVisibleChange(visible);
@@ -316,9 +362,9 @@ var TreeSelect = function (baseProps, ref) {
             return props.triggerElement({ value: valueForCallback });
         })()
         : props.triggerElement;
-    return !isNullOrUndefined(customTriggerElement) ? (renderView(customTriggerElement)) : (React.createElement(SelectView, __assign({ ref: refSelectView, rtl: rtl, ariaControls: instancePopupID }, props, { popupVisible: popupVisible, value: !multiple && isArray(value) ? value[0] : value, inputValue: inputValue, 
+    return !isNullOrUndefined(customTriggerElement) ? (renderView(customTriggerElement)) : (React.createElement(SelectView, __assign({ ref: refSelectView, rtl: rtl, ariaControls: instancePopupID }, props, { popupVisible: popupVisible, value: !multiple && 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/es/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.4";
+export declare const version = "1.4.0";

package/es/index.js

@@ -69,4 +69,4 @@ export { default as Upload } from './Upload';
 export { default as Mentions } from './Mentions';
 export { default as Watermark } from './Watermark';
 export { default as Image } from './Image';
-export var version = '1.3.4';
+export var version = '1.4.0';

package/lib/Select/select.js

@@ -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) {

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;