@apdesign/web-react 1.2.0 → 1.3.0

package/es/DatePicker/picker-range.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { RangePickerHandle } from './interface';
-declare const PickerComponent: React.ForwardRefExoticComponent<import("./interface").BaseRangePickerProps & import("../_util/type").Omit<import("./interface").PickerProps, "onChange" | "onSelect" | "inputProps" | "onOk" | "defaultPickerValue" | "pickerValue" | "onPickerValueChange"> & React.RefAttributes<RangePickerHandle>>;
+declare const PickerComponent: React.ForwardRefExoticComponent<import("./interface").BaseRangePickerProps & import("../_util/type").Omit<import("./interface").PickerProps, "onChange" | "onSelect" | "onOk" | "defaultPickerValue" | "pickerValue" | "onPickerValueChange" | "inputProps"> & React.RefAttributes<RangePickerHandle>>;
 export default PickerComponent;

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, "collapse" | "mode" | "triggerProps" | "inDropdown" | "theme" | "levelIndent" | "icons" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "tooltipProps"> & {
+declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "mode" | "icons" | "triggerProps" | "inDropdown" | "theme" | "levelIndent" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "tooltipProps"> & {
     id?: string;
     prefixCls?: string;
     onClickMenuItem?: (key: string, event: any) => void;

package/es/Select/interface.d.ts

@@ -55,6 +55,12 @@ export interface SelectProps extends SelectViewCommonProps {
      * @en Whether to embed label in value, turn the format of value from string to `{ value: string, label: ReactNode }`
      */
     labelInValue?: boolean;
+    /**
+     * @zh 是否开启快速单选模式。开启后，由于需要最后点击确定或者取消来选择，单个选项变化的事件 onSelect 和 onDeselect 将无效
+     * @en Whether to enable quick single selection mode. When enabled, the onSelect and onDeselect events will be invalid because the selection needs to be confirmed or canceled at the end.
+     * @defaultValue true
+     */
+    isQuickSingleSelectMode?: boolean;
     /**
      * @zh 是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。
      * @en If it's true, filter options by input value. If it's a function, filter options base on the function.
@@ -245,6 +251,8 @@ export interface OptionProps extends Omit<HTMLAttributes<HTMLLIElement>, 'classN
     extra?: any;
     isSelectOption?: boolean;
     _isMultipleMode?: boolean;
+    _isMultipleQuickSelectMode?: boolean;
+    _onSingleQuickSelect?: (value: OptionProps['value']) => void;
     _isUserCreatedOption?: boolean;
     _isUserCreatingOption?: boolean;
     _valueActive?: OptionProps['value'];

package/es/Select/option.js

@@ -20,13 +20,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+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;
+};
+import React, { useState } from 'react';
 import cs from '../_util/classNames';
 import Checkbox from '../Checkbox';
 import omit from '../_util/omit';
 function Option(props, ref) {
     var _a, _b;
-    var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls = props.prefixCls, rtl = props.rtl, propValue = props.value, propChildren = props.children, _isMultipleMode = props._isMultipleMode, _isUserCreatedOption = props._isUserCreatedOption, _isUserCreatingOption = props._isUserCreatingOption, _valueActive = props._valueActive, _valueSelect = props._valueSelect, _onMouseEnter = props._onMouseEnter, _onMouseLeave = props._onMouseLeave, _onClick = props._onClick, rest = __rest(props, ["style", "className", "wrapperClassName", "disabled", "prefixCls", "rtl", "value", "children", "_isMultipleMode", "_isUserCreatedOption", "_isUserCreatingOption", "_valueActive", "_valueSelect", "_onMouseEnter", "_onMouseLeave", "_onClick"]);
+    var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls = props.prefixCls, rtl = props.rtl, propValue = props.value, propChildren = props.children, _isMultipleMode = props._isMultipleMode, _isMultipleQuickSelectMode = props._isMultipleQuickSelectMode, _onSingleQuickSelect = props._onSingleQuickSelect, _isUserCreatedOption = props._isUserCreatedOption, _isUserCreatingOption = props._isUserCreatingOption, _valueActive = props._valueActive, _valueSelect = props._valueSelect, _onMouseEnter = props._onMouseEnter, _onMouseLeave = props._onMouseLeave, _onClick = props._onClick, rest = __rest(props, ["style", "className", "wrapperClassName", "disabled", "prefixCls", "rtl", "value", "children", "_isMultipleMode", "_isMultipleQuickSelectMode", "_onSingleQuickSelect", "_isUserCreatedOption", "_isUserCreatingOption", "_valueActive", "_valueSelect", "_onMouseEnter", "_onMouseLeave", "_onClick"]);
+    var _c = __read(useState(false), 2), isHovering = _c[0], setIsHovering = _c[1];
     var value = 'value' in props ? propValue : "" + propChildren;
     var childNode = 'children' in props ? propChildren : "" + propValue;
     var isChecked = _isMultipleMode
@@ -61,9 +78,34 @@ function Option(props, ref) {
         return (React.createElement("li", __assign({}, wrapperProps, { className: cs(prefixCls + "-option-wrapper", (_b = {},
                 _b[prefixCls + "-option-wrapper-selected"] = isChecked,
                 _b[prefixCls + "-option-wrapper-disabled"] = disabled,
-                _b), wrapperClassName) }),
+                _b), wrapperClassName) }, (_isMultipleQuickSelectMode && {
+            // TODO: 这个等主题处理好了要改成 css ，包括以下内联样式
+            onMouseEnter: function () { return setIsHovering(true); },
+            onMouseLeave: function () { return setIsHovering(false); },
+            style: {
+                position: 'relative',
+            },
+        })),
             React.createElement(Checkbox, { "aria-hidden": "true", className: prefixCls + "-checkbox", checked: isChecked, disabled: disabled, onChange: optionLabelProps.onClick }),
-            React.createElement("span", __assign({}, optionLabelProps), childNode)));
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flex: 1,
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                } },
+                React.createElement("span", __assign({}, optionLabelProps), childNode),
+                _isMultipleQuickSelectMode && !disabled && (React.createElement("span", { style: {
+                        display: isHovering ? 'inline' : 'none',
+                        flex: 0,
+                        backgroundColor: 'rgb(var(--primary-6))',
+                        cursor: 'pointer',
+                        color: 'white',
+                        padding: '7px',
+                        paddingLeft: '20px',
+                        marginLeft: '-20px',
+                        clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        whiteSpace: 'nowrap',
+                    }, onClick: function () { return _onSingleQuickSelect === null || _onSingleQuickSelect === void 0 ? void 0 : _onSingleQuickSelect(value); } }, "\u4EC5\u7B5B\u9009\u6B64\u9879")))));
     }
     return (React.createElement("li", __assign({}, wrapperProps, optionLabelProps), childNode));
 }

package/es/Select/select.js

@@ -62,6 +62,7 @@ import { ConfigContext } from '../ConfigProvider';
 import useMergeValue from '../_util/hooks/useMergeValue';
 import omit from '../_util/omit';
 import useMergeProps from '../_util/hooks/useMergeProps';
+import { Button } from '../index';
 import useId from '../_util/hooks/useId';
 // 用户创建中的option的origin标识
 var USER_CREATING_OPTION_ORIGIN = 'userCreatingOption';
@@ -70,13 +71,14 @@ var defaultProps = {
     bordered: true,
     filterOption: true,
     unmountOnExit: true,
+    isQuickSingleSelectMode: 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, 
+    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
     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 模式
@@ -88,35 +90,42 @@ function Select(baseProps, ref) {
     }
     var prefixCls = getPrefixCls('select');
     var isMultipleMode = mode === 'multiple';
+    var isMultipleQuickSelectMode = isMultipleMode && isQuickSingleSelectMode;
     // 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('', {
+    var _c = __read(useState(getValidValue(props.defaultValue, isMultipleMode, labelInValue)), 2), stateProxyValue = _c[0], setProxyValue = _c[1];
+    var value = 'value' in props
+        ? getValidValue(props.value, isMultipleMode, labelInValue)
+        : isMultipleQuickSelectMode
+            ? stateProxyValue
+            : stateValue;
+    var valueForInputShow = 'value' in props ? getValidValue(props.value, isMultipleMode, labelInValue) : stateValue;
+    var _d = __read(useMergeValue('', {
         value: 'inputValue' in props ? props.inputValue || '' : undefined,
-    }), 3), inputValue = _c[0], setInputValue = _c[1], stateInputValue = _c[2];
-    var _d = __read(useMergeValue(false, {
+    }), 3), inputValue = _d[0], setInputValue = _d[1], stateInputValue = _d[2];
+    var _e = __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];
+    }), 2), popupVisible = _e[0], setPopupVisible = _e[1];
     // allowCreate 时，用户正在创建的选项值
-    var _e = __read(useState(null), 2), userCreatingOption = _e[0], setUserCreatingOption = _e[1];
+    var _f = __read(useState(null), 2), userCreatingOption = _f[0], setUserCreatingOption = _f[1];
     // allowCreate 时，由用户输入而扩展到选项中的值
-    var _f = __read(useState([]), 2), userCreatedOptions = _f[0], setUserCreatedOptions = _f[1];
+    var _g = __read(useState([]), 2), userCreatedOptions = _g[0], setUserCreatedOptions = _g[1];
     // 具有选中态或者 hover 态的 option 的 value
-    var _g = __read(useState(isArray(value) ? value[0] : value), 2), valueActive = _g[0], setValueActive = _g[1];
+    var _h = __read(useState(isArray(value) ? value[0] : value), 2), valueActive = _h[0], setValueActive = _h[1];
     // 缓存较为耗时的 flatChildren 的结果
-    var _h = useMemo(function () {
+    var _j = 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;
+    }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _j.childrenList, optionInfoMap = _j.optionInfoMap, optionValueList = _j.optionValueList, optionIndexListForArrowKey = _j.optionIndexListForArrowKey, hasOptGroup = _j.hasOptGroup, hasComplexLabelInOptions = _j.hasComplexLabelInOptions;
     // ref
     var refWrapper = useRef(null);
     var refTrigger = useRef(null);
@@ -194,10 +203,12 @@ function Select(baseProps, ref) {
         if (isMultipleMode) {
             if (!Array.isArray(value)) {
                 setValue(value === undefined ? [] : [value]);
+                setProxyValue(value === undefined ? [] : [value]);
             }
         }
         else if (Array.isArray(value)) {
             setValue(value.length === 0 ? undefined : value[0]);
+            setProxyValue(value.length === 0 ? undefined : value[0]);
         }
     }, [isMultipleMode, value]);
     // 选项下拉框显示/隐藏时的一些自动行为
@@ -371,21 +382,50 @@ function Select(baseProps, ref) {
             onChange(paramsForCallback.value, paramsForCallback.option);
         }
     };
-    // 多选时，选择/取消选择一个选项
-    var checkOption = function (optionValue, operation) {
+    var tryUpdateProxySelectValue = function (value) {
+        setProxyValue(value);
+    };
+    // 多选时，选择/取消选择一个选项。 fromTag 为 true 时，表示从input tag标签触发取消选择
+    var checkOption = function (optionValue, operation, fromTag) {
+        if (fromTag === void 0) { fromTag = false; }
         // 取消选中时不需要检查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);
             }
+            // 如果是快速单选模式，更新代理值
+            if (isMultipleQuickSelectMode) {
+                tryUpdateProxySelectValue(newValue);
+                if (fromTag) {
+                    tryUpdateSelectValue(newValue);
+                }
+            }
+            else {
+                tryUpdateSelectValue(newValue);
+            }
         }
     };
+    // 多选时，确定
+    var confirmCheck = function () {
+        tryUpdateSelectValue(stateProxyValue);
+        tryUpdatePopupVisible(false);
+    };
+    // 多选时，取消
+    var cancelCheck = function () {
+        tryUpdateProxySelectValue(stateValue);
+        tryUpdatePopupVisible(false);
+    };
+    // 多选时候快速只选一个
+    var handleSingleQuickSelect = function (optionValue) {
+        tryUpdatePopupVisible(false);
+        tryUpdateProxySelectValue([optionValue]);
+        tryUpdateSelectValue([optionValue]);
+    };
     var handleOptionClick = function (optionValue, disabled) {
         if (disabled) {
             return;
@@ -457,41 +497,53 @@ function Select(baseProps, ref) {
         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;
+        var eleOptionList = childrenList.length ? (React.createElement(React.Fragment, null,
+            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,
+                        _isMultipleQuickSelectMode: isMultipleQuickSelectMode,
+                        _onSingleQuickSelect: handleSingleQuickSelect,
+                        _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;
+            }),
+            isMultipleQuickSelectMode && (React.createElement("div", { style: {
+                    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 }, "\u53D6\u6D88"),
+                React.createElement(Button, { type: "primary", size: "mini", onClick: confirmCheck }, "\u786E\u5B9A"))))) : null;
         // Avoid drop-down box jitter when user is creating a selection
         var isUserCreating = allowCreate && inputValue;
         // Dropdown-placeholder when there is no options
@@ -579,7 +631,7 @@ function Select(baseProps, ref) {
         // Option Items
         onRemoveCheckedItem: function (_, index, event) {
             event.stopPropagation();
-            checkOption(value[index], 'remove');
+            checkOption(value[index], 'remove', true);
         },
         onClear: function (event) {
             event.stopPropagation();
@@ -617,7 +669,12 @@ function Select(baseProps, ref) {
         });
     }, [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 () {
+        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: function (visible) {
+                if (visible === false && isMultipleQuickSelectMode) {
+                    setProxyValue(stateValue);
+                }
+                tryUpdatePopupVisible(visible);
+            }, __onExit: function () {
                 refPopupExiting.current = true;
             }, __onExited: function () {
                 refPopupExiting.current = false;
@@ -629,7 +686,7 @@ function Select(baseProps, ref) {
         : 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, 
+        value: valueForInputShow, 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);

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.2.0";
+export declare const version = "1.3.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.2.0';
+export var version = '1.3.0';

package/lib/Select/interface.d.ts

@@ -55,6 +55,12 @@ export interface SelectProps extends SelectViewCommonProps {
      * @en Whether to embed label in value, turn the format of value from string to `{ value: string, label: ReactNode }`
      */
     labelInValue?: boolean;
+    /**
+     * @zh 是否开启快速单选模式。开启后，由于需要最后点击确定或者取消来选择，单个选项变化的事件 onSelect 和 onDeselect 将无效
+     * @en Whether to enable quick single selection mode. When enabled, the onSelect and onDeselect events will be invalid because the selection needs to be confirmed or canceled at the end.
+     * @defaultValue true
+     */
+    isQuickSingleSelectMode?: boolean;
     /**
      * @zh 是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。
      * @en If it's true, filter options by input value. If it's a function, filter options base on the function.
@@ -245,6 +251,8 @@ export interface OptionProps extends Omit<HTMLAttributes<HTMLLIElement>, 'classN
     extra?: any;
     isSelectOption?: boolean;
     _isMultipleMode?: boolean;
+    _isMultipleQuickSelectMode?: boolean;
+    _onSingleQuickSelect?: (value: OptionProps['value']) => void;
     _isUserCreatedOption?: boolean;
     _isUserCreatingOption?: boolean;
     _valueActive?: OptionProps['value'];

package/lib/Select/option.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,17 +40,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classNames_1 = __importDefault(require("../_util/classNames"));
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var omit_1 = __importDefault(require("../_util/omit"));
 function Option(props, ref) {
     var _a, _b;
-    var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls = props.prefixCls, rtl = props.rtl, propValue = props.value, propChildren = props.children, _isMultipleMode = props._isMultipleMode, _isUserCreatedOption = props._isUserCreatedOption, _isUserCreatingOption = props._isUserCreatingOption, _valueActive = props._valueActive, _valueSelect = props._valueSelect, _onMouseEnter = props._onMouseEnter, _onMouseLeave = props._onMouseLeave, _onClick = props._onClick, rest = __rest(props, ["style", "className", "wrapperClassName", "disabled", "prefixCls", "rtl", "value", "children", "_isMultipleMode", "_isUserCreatedOption", "_isUserCreatingOption", "_valueActive", "_valueSelect", "_onMouseEnter", "_onMouseLeave", "_onClick"]);
+    var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls = props.prefixCls, rtl = props.rtl, propValue = props.value, propChildren = props.children, _isMultipleMode = props._isMultipleMode, _isMultipleQuickSelectMode = props._isMultipleQuickSelectMode, _onSingleQuickSelect = props._onSingleQuickSelect, _isUserCreatedOption = props._isUserCreatedOption, _isUserCreatingOption = props._isUserCreatingOption, _valueActive = props._valueActive, _valueSelect = props._valueSelect, _onMouseEnter = props._onMouseEnter, _onMouseLeave = props._onMouseLeave, _onClick = props._onClick, rest = __rest(props, ["style", "className", "wrapperClassName", "disabled", "prefixCls", "rtl", "value", "children", "_isMultipleMode", "_isMultipleQuickSelectMode", "_onSingleQuickSelect", "_isUserCreatedOption", "_isUserCreatingOption", "_valueActive", "_valueSelect", "_onMouseEnter", "_onMouseLeave", "_onClick"]);
+    var _c = __read((0, react_1.useState)(false), 2), isHovering = _c[0], setIsHovering = _c[1];
     var value = 'value' in props ? propValue : "" + propChildren;
     var childNode = 'children' in props ? propChildren : "" + propValue;
     var isChecked = _isMultipleMode
@@ -66,9 +102,34 @@ function Option(props, ref) {
         return (react_1.default.createElement("li", __assign({}, wrapperProps, { className: (0, classNames_1.default)(prefixCls + "-option-wrapper", (_b = {},
                 _b[prefixCls + "-option-wrapper-selected"] = isChecked,
                 _b[prefixCls + "-option-wrapper-disabled"] = disabled,
-                _b), wrapperClassName) }),
+                _b), wrapperClassName) }, (_isMultipleQuickSelectMode && {
+            // TODO: 这个等主题处理好了要改成 css ，包括以下内联样式
+            onMouseEnter: function () { return setIsHovering(true); },
+            onMouseLeave: function () { return setIsHovering(false); },
+            style: {
+                position: 'relative',
+            },
+        })),
             react_1.default.createElement(Checkbox_1.default, { "aria-hidden": "true", className: prefixCls + "-checkbox", checked: isChecked, disabled: disabled, onChange: optionLabelProps.onClick }),
-            react_1.default.createElement("span", __assign({}, optionLabelProps), childNode)));
+            react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    flex: 1,
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                } },
+                react_1.default.createElement("span", __assign({}, optionLabelProps), childNode),
+                _isMultipleQuickSelectMode && !disabled && (react_1.default.createElement("span", { style: {
+                        display: isHovering ? 'inline' : 'none',
+                        flex: 0,
+                        backgroundColor: 'rgb(var(--primary-6))',
+                        cursor: 'pointer',
+                        color: 'white',
+                        padding: '7px',
+                        paddingLeft: '20px',
+                        marginLeft: '-20px',
+                        clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        whiteSpace: 'nowrap',
+                    }, onClick: function () { return _onSingleQuickSelect === null || _onSingleQuickSelect === void 0 ? void 0 : _onSingleQuickSelect(value); } }, "\u4EC5\u7B5B\u9009\u6B64\u9879")))));
     }
     return (react_1.default.createElement("li", __assign({}, wrapperProps, optionLabelProps), childNode));
 }