one-design-next 0.0.62 → 0.0.64

package/dist/index.d.ts

@@ -43,7 +43,7 @@ export { RuyiLayout, type RuyiLayoutProps, type RuyiMenuItem } from './layout';
 export { MpLayout, type MpLayoutProps, type MpMenuItem, type MpTabItem, type MpSubTab } from './layout';
 export { HuxuanLayout, type HuxuanLayoutProps, type HuxuanNavItem, type HuxuanNavChild, type HuxuanActionItem } from './layout';
 export { default as ScrollArea, type ScrollAreaProps, type ScrollAreaRef } from './scroll-area';
-export { default as Select, type SelectProps } from './select';
+export { default as Select, type SelectProps, type TokenPasteResult, type TokenValidationItem, } from './select';
 export { default as Slider, type SliderProps } from './slider';
 export { default as Switch, type SwitchProps } from './switch';
 export { default as Tabs } from './tabs';

package/dist/select/SelectFeedback.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type SelectFeedbackState = {
+    message: string;
+    undoable?: boolean;
+};
+export interface SelectFeedbackProps {
+    feedback: SelectFeedbackState | null;
+    onUndo?: () => void;
+}
+declare const SelectFeedback: React.FC<SelectFeedbackProps>;
+export default SelectFeedback;

package/dist/select/SelectFeedback.js

@@ -0,0 +1,20 @@
+import React from 'react';
+var SelectFeedback = function SelectFeedback(_ref) {
+  var feedback = _ref.feedback,
+    onUndo = _ref.onUndo;
+  if (!feedback) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "odn-select-feedback",
+    role: "status",
+    "data-odn-select-feedback": true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "odn-select-feedback-message"
+  }, feedback.message), feedback.undoable ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "odn-select-feedback-undo",
+    onClick: onUndo
+  }, "\u64A4\u9500") : null);
+};
+export default SelectFeedback;

package/dist/select/index.d.ts

@@ -3,7 +3,8 @@ import { OptGroup, Option } from 'rc-select';
 import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
 import React from 'react';
 import './style';
-type RawValue = string | number;
+import { type RawValue, type TokenPasteResult, type TokenValidationItem } from './tokenUtils';
+export type { TokenPasteResult, TokenValidationItem };
 type SemanticName = 'root';
 type PopupSemantic = 'root';
 export interface LabeledValue {
@@ -47,6 +48,32 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     optionCheckPosition?: 'left' | 'right';
     showInnerSearch?: boolean;
     optionRender?: RcSelectProps['optionRender'];
+    /**
+     * 批量粘贴 / 输入分词分隔符。传入后启用增强粘贴：
+     * 拆分、去重、未匹配标红保留（可由 tokenMismatch 关闭）、反馈条。
+     */
+    tokenSeparators?: string[];
+    /**
+     * 未匹配 token 的处理。
+     * - `keep`：标红保留为 invalid chip（默认）
+     * - `drop`：丢弃未匹配项（对齐 rc-select multiple 默认行为）
+     */
+    tokenMismatch?: 'drop' | 'keep';
+    /** 是否展示批量粘贴 / 清空反馈条。传入 tokenSeparators 时默认 true */
+    tokenFeedback?: boolean;
+    /**
+     * 自定义批量校验（可异步）。不传则按当前 options 的 label/value 本地匹配。
+     */
+    validateTokens?: (tokens: string[]) => TokenValidationItem[] | Promise<TokenValidationItem[]>;
+    /** 批量粘贴处理完成回调 */
+    onTokenPaste?: (result: TokenPasteResult) => void;
+    /**
+     * 清空全部后是否展示「撤销」。
+     * 传入 tokenSeparators 时默认 true；也可单独开启（需 allowClear）。
+     */
+    clearUndo?: boolean;
+    /** 反馈条自动消失时长（ms） */
+    feedbackDuration?: number;
 }
 export interface SelectButtonProps {
     /** 是否显示箭头 */

package/dist/select/index.js

@@ -1,18 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "light", "mode", "suffixIcon", "popupClassName", "popupMatchSelectWidth", "visible", "onVisibleChange", "showInnerSearch", "popupRender", "searchValue", "onSearch", "maxCount", "defaultValue", "value", "onChange", "placeholder", "showSearch", "size", "autoClearSearchValue", "optionRender"];
+var _excluded = ["className", "rootClassName", "style", "light", "mode", "suffixIcon", "popupClassName", "popupMatchSelectWidth", "visible", "onVisibleChange", "showInnerSearch", "popupRender", "searchValue", "onSearch", "maxCount", "defaultValue", "value", "onChange", "placeholder", "showSearch", "size", "autoClearSearchValue", "optionRender", "tagRender", "options", "allowClear", "onClear", "tokenSeparators", "tokenMismatch", "tokenFeedback", "validateTokens", "onTokenPaste", "clearUndo", "feedbackDuration", "disabled"];
 import clsx from 'clsx';
 import RcSelect, { OptGroup, Option } from 'rc-select';
 import React, { useEffect, useRef, useState } from 'react';
 import Checkbox from "../checkbox";
 import Icon from "../icon";
 import Popover from "../popover";
+import SelectFeedback from "./SelectFeedback";
 import "./style";
+import { formatTokenPasteFeedback, readClipboardText, resolveTokenPaste, splitByTokenSeparators, toRawValueList } from "./tokenUtils";
 import useIcons from "./useIcons";
 var InternalSelect = function InternalSelect(props, ref) {
   var className = props.className,
+    rootClassName = props.rootClassName,
+    style = props.style,
     light = props.light,
     mode = props.mode,
     _props$suffixIcon = props.suffixIcon,
@@ -43,8 +50,26 @@ var InternalSelect = function InternalSelect(props, ref) {
     _props$autoClearSearc = props.autoClearSearchValue,
     autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
     _optionRender = props.optionRender,
+    tagRender = props.tagRender,
+    options = props.options,
+    allowClear = props.allowClear,
+    onClear = props.onClear,
+    tokenSeparators = props.tokenSeparators,
+    _props$tokenMismatch = props.tokenMismatch,
+    tokenMismatch = _props$tokenMismatch === void 0 ? 'keep' : _props$tokenMismatch,
+    tokenFeedback = props.tokenFeedback,
+    validateTokens = props.validateTokens,
+    onTokenPaste = props.onTokenPaste,
+    clearUndo = props.clearUndo,
+    _props$feedbackDurati = props.feedbackDuration,
+    feedbackDuration = _props$feedbackDurati === void 0 ? 4000 : _props$feedbackDurati,
+    disabled = props.disabled,
     rest = _objectWithoutProperties(props, _excluded);
   var isMultiple = mode === 'multiple' || mode === 'tags';
+  var enableTokenPaste = Boolean(tokenSeparators === null || tokenSeparators === void 0 ? void 0 : tokenSeparators.length) && isMultiple;
+  var enableTokenFeedback = tokenFeedback !== null && tokenFeedback !== void 0 ? tokenFeedback : enableTokenPaste;
+  var enableClearUndo = clearUndo !== null && clearUndo !== void 0 ? clearUndo : enableTokenPaste;
+  var useShell = enableTokenPaste || enableClearUndo || enableTokenFeedback;
   var _useIcons = useIcons(_objectSpread(_objectSpread({}, rest), {}, {
       multiple: isMultiple,
       hasFeedback: false,
@@ -69,13 +94,32 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     searchValue = _useState6[0],
     setSearchValue = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    invalidValues = _useState8[0],
+    setInvalidValues = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    feedback = _useState10[0],
+    setFeedback = _useState10[1];
+  var undoSnapshotRef = useRef(null);
+  var feedbackTimerRef = useRef();
   var dropdownSearchInputRef = useRef(null);
+  var pastingRef = useRef(false);
   var handleVisibleChange = function handleVisibleChange(bool) {
     if (visibleProp === undefined) {
       setVisible(bool);
     }
     onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(bool);
   };
+
+  /** 外层 showSearch / 内层 showInnerSearch 共用：受控 searchValue 必须在此回写，否则输入框打不出字 */
+  var handleSearch = function handleSearch(text) {
+    if (searchValueProp === undefined) {
+      setSearchValue(text);
+    }
+    onSearch === null || onSearch === void 0 || onSearch(text);
+  };
   useEffect(function () {
     if (valueProp !== undefined) {
       setValue(valueProp);
@@ -99,25 +143,203 @@ var InternalSelect = function InternalSelect(props, ref) {
       }, 150);
     }
   }, [visible]);
-  return /*#__PURE__*/React.createElement(RcSelect, _extends({
+  useEffect(function () {
+    return function () {
+      if (feedbackTimerRef.current) {
+        clearTimeout(feedbackTimerRef.current);
+      }
+    };
+  }, []);
+  var showFeedback = function showFeedback(next) {
+    if (!enableTokenFeedback && !(next !== null && next !== void 0 && next.undoable)) {
+      setFeedback(null);
+      return;
+    }
+    if (!enableTokenFeedback && !enableClearUndo) {
+      setFeedback(null);
+      return;
+    }
+    setFeedback(next);
+    if (feedbackTimerRef.current) {
+      clearTimeout(feedbackTimerRef.current);
+    }
+    if (next) {
+      feedbackTimerRef.current = setTimeout(function () {
+        setFeedback(null);
+        undoSnapshotRef.current = null;
+      }, feedbackDuration);
+    }
+  };
+  var commitValue = function commitValue(next, option) {
+    if (valueProp === undefined) {
+      setValue(next);
+    }
+    _onChange === null || _onChange === void 0 || _onChange(next, option);
+  };
+  var pruneInvalid = function pruneInvalid(nextValue) {
+    var rawList = toRawValueList(nextValue);
+    setInvalidValues(function (prev) {
+      return prev.filter(function (item) {
+        return rawList.some(function (raw) {
+          return String(raw) === String(item);
+        });
+      });
+    });
+  };
+  var handlePasteCapture = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var text, tokens, currentRaw, result;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!enableTokenPaste || disabled || !(tokenSeparators !== null && tokenSeparators !== void 0 && tokenSeparators.length))) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            text = readClipboardText(event.clipboardData);
+            if (text) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            tokens = splitByTokenSeparators(text, tokenSeparators);
+            if (tokens !== null && tokens !== void 0 && tokens.length) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return");
+          case 8:
+            event.preventDefault();
+            event.stopPropagation();
+            pastingRef.current = true;
+            currentRaw = toRawValueList(value);
+            _context.next = 14;
+            return resolveTokenPaste({
+              tokens: tokens,
+              currentValue: currentRaw,
+              currentInvalid: invalidValues,
+              options: options || [],
+              tokenMismatch: tokenMismatch,
+              maxCount: maxCount,
+              validateTokens: validateTokens
+            });
+          case 14:
+            result = _context.sent;
+            setInvalidValues(result.nextInvalid);
+            commitValue(result.nextValue);
+            onTokenPaste === null || onTokenPaste === void 0 || onTokenPaste(result);
+            if (enableTokenFeedback) {
+              showFeedback({
+                message: formatTokenPasteFeedback(result)
+              });
+            }
+            if (autoClearSearchValue) {
+              if (searchValueProp === undefined) {
+                setSearchValue('');
+              }
+              onSearch === null || onSearch === void 0 || onSearch('');
+            }
+
+            // 让受控/非受控 onChange 完成后再放开，避免同一次粘贴被 rc-select 再处理
+            window.setTimeout(function () {
+              pastingRef.current = false;
+            }, 0);
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handlePasteCapture(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var handleClear = function handleClear() {
+    var current = valueProp === undefined ? value : valueProp;
+    var rawList = toRawValueList(current);
+    if (enableClearUndo && rawList.length) {
+      undoSnapshotRef.current = {
+        value: current,
+        invalid: _toConsumableArray(invalidValues)
+      };
+      showFeedback({
+        message: "\u5DF2\u6E05\u9664 ".concat(rawList.length, " \u9879"),
+        undoable: true
+      });
+    }
+    setInvalidValues([]);
+    onClear === null || onClear === void 0 || onClear();
+  };
+  var handleUndo = function handleUndo() {
+    var snapshot = undoSnapshotRef.current;
+    if (!snapshot) {
+      return;
+    }
+    undoSnapshotRef.current = null;
+    setInvalidValues(snapshot.invalid);
+    commitValue(snapshot.value);
+    showFeedback(null);
+  };
+  var mergedTagRender = tagRender || invalidValues.length > 0 ? function (tagProps) {
+    var isInvalid = invalidValues.some(function (item) {
+      return String(item) === String(tagProps.value);
+    });
+    if (tagRender) {
+      var node = tagRender(tagProps);
+      if (!isInvalid || ! /*#__PURE__*/React.isValidElement(node)) {
+        return node;
+      }
+      var element = node;
+      return /*#__PURE__*/React.cloneElement(element, {
+        className: clsx(element.props.className, 'odn-select-selection-item-invalid'),
+        // @ts-expect-error data attr for styling hooks
+        'data-odn-select-tag-invalid': ''
+      });
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      className: clsx('odn-select-selection-item', isInvalid && 'odn-select-selection-item-invalid'),
+      "data-odn-select-tag-invalid": isInvalid ? '' : undefined
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "odn-select-selection-item-content"
+    }, tagProps.label), tagProps.closable ? /*#__PURE__*/React.createElement("span", {
+      className: "odn-select-selection-item-remove",
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClick: tagProps.onClose
+    }, typeof removeIcon === 'function' ? removeIcon(tagProps) : removeIcon) : null);
+  } : undefined;
+  var selectNode = /*#__PURE__*/React.createElement(RcSelect, _extends({
     ref: ref,
     prefixCls: "odn-select",
     className: clsx(className, "odn-select-".concat(size), showInnerSearch && 'odn-select-show-inner-search', light && 'odn-select-light', !light && 'odn-select-outlined'),
+    style: useShell ? {
+      width: '100%'
+    } : style,
     transitionName: "odn-slide-up",
     mode: mode,
+    options: options,
+    allowClear: allowClear,
+    onClear: handleClear,
+    tokenSeparators: tokenSeparators,
+    tagRender: mergedTagRender,
+    disabled: disabled,
     suffixIcon: function suffixIcon(suffixIconProps) {
       var suffixIconFinal = typeof _suffixIcon === 'function' ? _suffixIcon(suffixIconProps) : _suffixIcon;
       return /*#__PURE__*/React.createElement(React.Fragment, null, !!maxCount && mode === 'multiple' && Array.isArray(value) && /*#__PURE__*/React.createElement("span", {
         className: "odn-select-max-count"
       }, value.length, " / ", maxCount), suffixIconFinal);
     },
-    menuItemSelectedIcon: mode === 'multiple' ? function (props) {
-      var value = props.value,
-        disabled = props.disabled,
-        isSelected = props.isSelected;
+    menuItemSelectedIcon: mode === 'multiple' ? function (iconProps) {
+      var optionDisabled = iconProps.disabled,
+        isSelected = iconProps.isSelected;
       return /*#__PURE__*/React.createElement(Checkbox, {
         checked: isSelected,
-        disabled: disabled
+        disabled: optionDisabled
       });
     } : itemIcon,
     dropdownClassName: clsx(mode && "odn-select-dropdown-".concat(mode), popupClassName),
@@ -127,18 +349,22 @@ var InternalSelect = function InternalSelect(props, ref) {
     open: visible,
     onDropdownVisibleChange: handleVisibleChange,
     searchValue: searchValue,
+    onSearch: handleSearch,
     value: value,
     onChange: function onChange(param, option) {
+      if (pastingRef.current) {
+        // 粘贴路径已在 capture 阶段 commit，忽略 rc-select 二次 onChange
+        return;
+      }
       if (valueProp === undefined) {
         setValue(param);
       }
+      pruneInvalid(param);
       if (autoClearSearchValue) {
         if (searchValueProp === undefined) {
           setSearchValue('');
         }
-        if (onSearch) {
-          onSearch('');
-        }
+        handleSearch('');
       }
       _onChange === null || _onChange === void 0 || _onChange(param !== null && param !== void 0 ? param : null, option);
     },
@@ -156,13 +382,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         placeholder: "\u8BF7\u8F93\u5165",
         value: searchValue,
         onChange: function onChange(e) {
-          var value = e.target.value;
-          if (searchValueProp === undefined) {
-            setSearchValue(value);
-          }
-          if (onSearch) {
-            onSearch(value);
-          }
+          handleSearch(e.target.value);
         },
         onKeyDown: function onKeyDown(e) {
           e.stopPropagation();
@@ -190,30 +410,42 @@ var InternalSelect = function InternalSelect(props, ref) {
       return finalLabel;
     }
   }, rest));
+  if (!useShell) {
+    return selectNode;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('odn-select-shell', rootClassName),
+    style: style,
+    onPasteCapture: enableTokenPaste ? handlePasteCapture : undefined,
+    "data-odn-select-shell": true
+  }, selectNode, /*#__PURE__*/React.createElement(SelectFeedback, {
+    feedback: enableTokenFeedback || feedback !== null && feedback !== void 0 && feedback.undoable && enableClearUndo ? feedback : null,
+    onUndo: handleUndo
+  }));
 };
 
 // Select.Button 组件接口
 
 // Select.Button 组件
-var SelectButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$showArrow = _ref.showArrow,
-    showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'middle' : _ref$size,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    prefix = _ref.prefix,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? '请选择' : _ref$placeholder,
-    value = _ref.value,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    _ref$allowClear = _ref.allowClear,
-    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
-    onClick = _ref.onClick,
-    onClear = _ref.onClear,
-    className = _ref.className,
-    style = _ref.style;
+var SelectButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$showArrow = _ref2.showArrow,
+    showArrow = _ref2$showArrow === void 0 ? true : _ref2$showArrow,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'middle' : _ref2$size,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    prefix = _ref2.prefix,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? '请选择' : _ref2$placeholder,
+    value = _ref2.value,
+    _ref2$active = _ref2.active,
+    active = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$allowClear = _ref2.allowClear,
+    allowClear = _ref2$allowClear === void 0 ? false : _ref2$allowClear,
+    onClick = _ref2.onClick,
+    onClear = _ref2.onClear,
+    className = _ref2.className,
+    style = _ref2.style;
   var buttonClasses = clsx('odn-select-button odn-select odn-select-outlined odn-select-single odn-select-allow-clear odn-select-show-arrow', "odn-select-button-".concat(size), {
     'odn-select-button-disabled': disabled,
     'odn-select-open': active

package/dist/select/style/index.css

@@ -28,6 +28,15 @@ html {
   --odn-select-option-selected-color: var(--odn-color-black-12);
   --odn-select-option-selected-bg: var(--odn-color-blue-1);
   --odn-selection-item-font-weight: 400;
+  --odn-select-multiple-item-invalid-bg: var(--odn-color-red-1);
+  --odn-select-multiple-item-invalid-border-color: color-mix(
+    in srgb,
+    var(--odn-color-error) 40%,
+    transparent
+  );
+  --odn-select-multiple-item-invalid-color: var(--odn-color-error);
+  --odn-select-feedback-bg: var(--odn-color-brand-1);
+  --odn-select-feedback-color: var(--odn-color-primary);
 }
 
 .odn-select.odn-select-in-form-item {
@@ -663,11 +672,20 @@ html {
 }
 
 .odn-select-multiple .odn-select-selection-overflow-item-suffix {
+  /* 默认隐藏：多选主推 showInnerSearch；外层 showSearch 时后缀才是输入框载体 */
   display: none;
   min-height: var(--odn-select-multiple-item-height);
   margin-block: var(--odn-select-internal_fixed_item_margin);
 }
 
+.odn-select-multiple.odn-select-show-search .odn-select-selection-overflow-item-suffix {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  flex: 1 1 auto;
+  min-width: 60px;
+}
+
 .odn-select-multiple .odn-select-selection-search {
   display: inline-flex;
   position: relative;
@@ -1778,4 +1796,59 @@ html {
 
 .odn-select-selection-overflow-item-rest > span {
   min-width: 0;
+}
+
+/* ===== 批量粘贴 / 反馈壳 ===== */
+.odn-select-shell {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.odn-select-shell .odn-select {
+  width: 100%;
+}
+
+.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item.odn-select-selection-item-invalid,
+.odn-select-selection-item.odn-select-selection-item-invalid {
+  color: var(--odn-select-multiple-item-invalid-color);
+  background: var(--odn-select-multiple-item-invalid-bg);
+  border: 1px solid var(--odn-select-multiple-item-invalid-border-color);
+}
+
+.odn-select-feedback {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px 12px;
+  border-radius: var(--odn-select-border-radius-sm);
+  background: var(--odn-select-feedback-bg);
+  color: var(--odn-select-feedback-color);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.odn-select-feedback-message {
+  flex: 1;
+  min-width: 0;
+}
+
+.odn-select-feedback-undo {
+  flex: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--odn-select-feedback-color);
+  font-size: 13px;
+  line-height: 20px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.odn-select-feedback-undo:hover {
+  opacity: 0.85;
 }

package/dist/select/tokenUtils.d.ts

@@ -0,0 +1,36 @@
+import type { DefaultOptionType } from 'rc-select/lib/Select';
+import type { ReactNode } from 'react';
+export type RawValue = string | number;
+export type TokenValidationItem = {
+    /** 原始粘贴片段 */
+    token: string;
+    /** 匹配到的 value；未匹配时可省略 */
+    value?: RawValue;
+    /** 展示文案 */
+    label?: ReactNode;
+    /** 是否有效（在候选内或业务认可） */
+    valid: boolean;
+};
+export type TokenPasteResult = {
+    added: RawValue[];
+    duplicated: string[];
+    invalid: string[];
+    nextValue: RawValue[];
+    nextInvalid: RawValue[];
+};
+/** 与 rc-select getSeparatedContent 对齐：任一分隔符命中才拆分 */
+export declare function readClipboardText(clipboardData: DataTransfer | null): string;
+export declare function splitByTokenSeparators(text: string, separators: string[]): string[] | null;
+export declare function flattenSelectOptions(options?: DefaultOptionType[]): DefaultOptionType[];
+export declare function matchOptionByToken(token: string, options: DefaultOptionType[]): DefaultOptionType | null;
+export declare function toRawValueList(value: unknown): RawValue[];
+export declare function resolveTokenPaste(params: {
+    tokens: string[];
+    currentValue: RawValue[];
+    currentInvalid: RawValue[];
+    options: DefaultOptionType[];
+    tokenMismatch: 'drop' | 'keep';
+    maxCount?: number;
+    validateTokens?: (tokens: string[]) => TokenValidationItem[] | Promise<TokenValidationItem[]>;
+}): Promise<TokenPasteResult>;
+export declare function formatTokenPasteFeedback(result: TokenPasteResult): string;

package/dist/select/tokenUtils.js

@@ -0,0 +1,256 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+/** 与 rc-select getSeparatedContent 对齐：任一分隔符命中才拆分 */
+export function readClipboardText(clipboardData) {
+  if (!clipboardData) {
+    return '';
+  }
+  return clipboardData.getData('text/plain') || clipboardData.getData('text') || '';
+}
+export function splitByTokenSeparators(text, separators) {
+  if (!(separators !== null && separators !== void 0 && separators.length) || !text) {
+    return null;
+  }
+  var matched = false;
+  var separate = function separate(str, tokens) {
+    if (!tokens.length) {
+      return [str];
+    }
+    var _tokens = _toArray(tokens),
+      token = _tokens[0],
+      rest = _tokens.slice(1);
+    var list = str.split(token);
+    matched = matched || list.length > 1;
+    return list.reduce(function (prev, unit) {
+      return prev.concat(separate(unit, rest));
+    }, []).filter(Boolean);
+  };
+  var list = separate(text, separators);
+  return matched ? list.map(function (s) {
+    return s.trim();
+  }).filter(Boolean) : null;
+}
+export function flattenSelectOptions() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var result = [];
+  var walk = function walk(list) {
+    list.forEach(function (opt) {
+      var _opt$options;
+      if ((_opt$options = opt.options) !== null && _opt$options !== void 0 && _opt$options.length) {
+        walk(opt.options);
+        return;
+      }
+      result.push(opt);
+    });
+  };
+  walk(options);
+  return result;
+}
+export function matchOptionByToken(token, options) {
+  var _flat$find;
+  var normalized = token.trim().toLowerCase();
+  if (!normalized) {
+    return null;
+  }
+  var flat = flattenSelectOptions(options);
+  return (_flat$find = flat.find(function (opt) {
+    var value = opt.value;
+    var label = opt.label;
+    return String(value).toLowerCase() === normalized || String(label !== null && label !== void 0 ? label : '').toLowerCase() === normalized;
+  })) !== null && _flat$find !== void 0 ? _flat$find : null;
+}
+export function toRawValueList(value) {
+  if (value === undefined || value === null || value === '') {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      if (item !== null && _typeof(item) === 'object' && 'value' in item) {
+        return item.value;
+      }
+      return item;
+    });
+  }
+  if (_typeof(value) === 'object' && value !== null && 'value' in value) {
+    return [value.value];
+  }
+  return [value];
+}
+export function resolveTokenPaste(_x) {
+  return _resolveTokenPaste.apply(this, arguments);
+}
+function _resolveTokenPaste() {
+  _resolveTokenPaste = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+    var tokens, currentValue, currentInvalid, options, tokenMismatch, maxCount, validateTokens, validated, nextValue, nextInvalid, added, duplicated, invalid, hasValue, _iterator, _step, _loop, _ret;
+    return _regeneratorRuntime().wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          tokens = params.tokens, currentValue = params.currentValue, currentInvalid = params.currentInvalid, options = params.options, tokenMismatch = params.tokenMismatch, maxCount = params.maxCount, validateTokens = params.validateTokens;
+          if (!validateTokens) {
+            _context2.next = 7;
+            break;
+          }
+          _context2.next = 4;
+          return validateTokens(tokens);
+        case 4:
+          _context2.t0 = _context2.sent;
+          _context2.next = 8;
+          break;
+        case 7:
+          _context2.t0 = tokens.map(function (token) {
+            var hit = matchOptionByToken(token, options);
+            return hit ? {
+              token: token,
+              value: hit.value,
+              label: hit.label,
+              valid: true
+            } : {
+              token: token,
+              value: token,
+              label: token,
+              valid: false
+            };
+          });
+        case 8:
+          validated = _context2.t0;
+          nextValue = _toConsumableArray(currentValue);
+          nextInvalid = _toConsumableArray(currentInvalid);
+          added = [];
+          duplicated = [];
+          invalid = [];
+          hasValue = function hasValue(v) {
+            return nextValue.some(function (item) {
+              return String(item) === String(v);
+            });
+          };
+          _iterator = _createForOfIteratorHelper(validated);
+          _context2.prev = 16;
+          _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop() {
+            var _item$value2;
+            var item, _item$value, _value, idx, value;
+            return _regeneratorRuntime().wrap(function _loop$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  item = _step.value;
+                  if (!(typeof maxCount === 'number' && nextValue.length >= maxCount)) {
+                    _context.next = 3;
+                    break;
+                  }
+                  return _context.abrupt("return", 0);
+                case 3:
+                  if (!item.valid) {
+                    _context.next = 13;
+                    break;
+                  }
+                  _value = (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item.token;
+                  if (!hasValue(_value)) {
+                    _context.next = 8;
+                    break;
+                  }
+                  duplicated.push(item.token);
+                  return _context.abrupt("return", 1);
+                case 8:
+                  nextValue.push(_value);
+                  added.push(_value);
+                  // 若此前是 invalid，转正后移除
+                  idx = nextInvalid.findIndex(function (v) {
+                    return String(v) === String(_value);
+                  });
+                  if (idx >= 0) {
+                    nextInvalid.splice(idx, 1);
+                  }
+                  return _context.abrupt("return", 1);
+                case 13:
+                  // 未匹配
+                  invalid.push(item.token);
+                  if (!(tokenMismatch === 'drop')) {
+                    _context.next = 16;
+                    break;
+                  }
+                  return _context.abrupt("return", 1);
+                case 16:
+                  value = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : item.token;
+                  if (!hasValue(value)) {
+                    _context.next = 20;
+                    break;
+                  }
+                  duplicated.push(item.token);
+                  return _context.abrupt("return", 1);
+                case 20:
+                  nextValue.push(value);
+                  added.push(value);
+                  if (!nextInvalid.some(function (v) {
+                    return String(v) === String(value);
+                  })) {
+                    nextInvalid.push(value);
+                  }
+                case 23:
+                case "end":
+                  return _context.stop();
+              }
+            }, _loop);
+          });
+          _iterator.s();
+        case 19:
+          if ((_step = _iterator.n()).done) {
+            _context2.next = 28;
+            break;
+          }
+          return _context2.delegateYield(_loop(), "t1", 21);
+        case 21:
+          _ret = _context2.t1;
+          if (!(_ret === 0)) {
+            _context2.next = 24;
+            break;
+          }
+          return _context2.abrupt("break", 28);
+        case 24:
+          if (!(_ret === 1)) {
+            _context2.next = 26;
+            break;
+          }
+          return _context2.abrupt("continue", 26);
+        case 26:
+          _context2.next = 19;
+          break;
+        case 28:
+          _context2.next = 33;
+          break;
+        case 30:
+          _context2.prev = 30;
+          _context2.t2 = _context2["catch"](16);
+          _iterator.e(_context2.t2);
+        case 33:
+          _context2.prev = 33;
+          _iterator.f();
+          return _context2.finish(33);
+        case 36:
+          return _context2.abrupt("return", {
+            added: added,
+            duplicated: duplicated,
+            invalid: invalid,
+            nextValue: nextValue,
+            nextInvalid: nextInvalid
+          });
+        case 37:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee, null, [[16, 30, 33, 36]]);
+  }));
+  return _resolveTokenPaste.apply(this, arguments);
+}
+export function formatTokenPasteFeedback(result) {
+  var parts = ["\u5DF2\u6DFB\u52A0 ".concat(result.added.length, " \u9879")];
+  if (result.duplicated.length) {
+    parts.push("\u5FFD\u7565\u91CD\u590D ".concat(result.duplicated.length, " \u9879"));
+  }
+  if (result.invalid.length) {
+    parts.push(result.nextInvalid.length ? "\u672A\u5339\u914D ".concat(result.invalid.length, " \u9879\u5DF2\u6807\u7EA2") : "\u672A\u5339\u914D ".concat(result.invalid.length, " \u9879\u5DF2\u5FFD\u7565"));
+  }
+  return parts.join(' · ');
+}

package/package.json

@@ -1,56 +1,52 @@
 {
   "name": "one-design-next",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "description": "One Design Next from TAD@tencent.com",
-  "packageManager": "pnpm@11.8.0",
+  "license": "MIT",
+  "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "type": "module",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "start": "npm run dev",
-    "dev": "npm run build:variables && npm run build:benchmark && npm run build:feedback && dumi dev",
-    "dev:recover": "bash scripts/after-git-switch.sh && npm run dev",
+    "benchmark": "node scripts/run-benchmark.mjs",
+    "benchmark:auto": "node scripts/run-benchmark.mjs --auto-only",
+    "benchmark:compare": "node scripts/run-benchmark.mjs --compare",
     "build": "father build && npm run build:styles",
+    "build:benchmark": "node scripts/build-benchmark.mjs",
+    "build:feedback": "node scripts/build-feedback.mjs",
     "build:skills": "bash skills/build.sh",
-    "build:watch": "father dev",
     "build:styles": "node scripts/build-styles.js",
     "build:variables": "node scripts/build-variables.js",
-    "generate:llms": "node scripts/generate-llms.mjs",
+    "build:watch": "father dev",
+    "create-component": "node scripts/create-component.js",
+    "create-skill": "node scripts/create-skill.mjs",
+    "dev": "npm run build:variables && npm run build:benchmark && npm run build:feedback && dumi dev",
+    "dev:recover": "bash scripts/after-git-switch.sh && npm run dev",
     "docs:build": "npm run build:variables && npm run build:benchmark && npm run build:feedback && npm run generate:llms && dumi build",
     "docs:preview": "dumi preview",
-    "prepare": "husky install && dumi setup",
     "doctor": "father doctor",
+    "feedback:server": "node scripts/feedback-server.mjs",
+    "feedback:submit": "node scripts/feedback-submit.mjs",
+    "gen:test": "node scripts/gen-test.mjs",
+    "generate:llms": "node scripts/generate-llms.mjs",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{components,test}/**/*.{css,scss}\"",
     "lint:es": "eslint \"{components,test}/**/*.{js,jsx,ts,tsx}\"",
+    "prepare": "husky install && dumi setup",
     "prepublishOnly": "father doctor && npm run build",
-    "create-component": "node scripts/create-component.js",
-    "gen:test": "node scripts/gen-test.mjs",
+    "release": "node scripts/release.mjs",
+    "start": "npm run dev",
     "test": "vitest",
+    "test:a11y": "echo 'axe-core smoke run（待 P5 接入）'",
+    "test:changed": "vitest run --changed",
     "test:ci": "vitest run",
-    "test:visual:update": "UPDATE_VISUAL=1 vitest run",
     "test:visual:docker": "bash scripts/visual-baseline-docker.sh",
+    "test:visual:update": "UPDATE_VISUAL=1 vitest run",
     "test:visual:update:docker": "bash scripts/visual-baseline-docker.sh update",
-    "test:changed": "vitest run --changed",
-    "test:a11y": "echo 'axe-core smoke run（待 P5 接入）'",
-    "typecheck": "tsc -p tsconfig.ci.json",
-    "build:benchmark": "node scripts/build-benchmark.mjs",
-    "benchmark": "node scripts/run-benchmark.mjs",
-    "benchmark:compare": "node scripts/run-benchmark.mjs --compare",
-    "benchmark:auto": "node scripts/run-benchmark.mjs --auto-only",
-    "create-skill": "node scripts/create-skill.mjs",
-    "build:feedback": "node scripts/build-feedback.mjs",
-    "feedback:server": "node scripts/feedback-server.mjs",
-    "feedback:submit": "node scripts/feedback-submit.mjs",
-    "release": "node scripts/release.mjs"
+    "typecheck": "tsc -p tsconfig.ci.json"
   },
-  "authors": [
-    "yijiejiang@tencent.com"
-  ],
-  "license": "MIT",
-  "files": [
-    "dist"
-  ],
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -60,28 +56,43 @@
     "*.{md,json}": [
       "prettier --write --no-error-on-unmatched-pattern"
     ],
-    "*.{css,scss}": [
+    "{components,test}/**/*.{css,scss}": [
       "stylelint --fix",
       "prettier --write"
     ],
-    "*.{js,jsx}": [
+    "{components,test}/**/*.{js,jsx}": [
       "eslint --fix",
       "prettier --write"
     ],
-    "*.{ts,tsx}": [
+    "{components,test}/**/*.{ts,tsx}": [
       "eslint --fix",
       "prettier --parser=typescript --write"
     ]
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "peerDependencies": {
-    "react": "~16.14.0 || ^17.0.0  || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-    "react-dom": "~16.14.0 || ^17.0.0  || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+  "dependencies": {
+    "@babel/runtime": "^7.29.2",
+    "@base-ui/react": "^1.6.0",
+    "@daypicker/react": "^10.0.1",
+    "@floating-ui/react": "^0.27.19",
+    "@number-flow/react": "^0.6.0",
+    "@paper-design/shaders-react": "^0.0.76",
+    "@radix-ui/react-slot": "^1.3.0",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "echarts-for-react": "^3.0.6",
+    "ldrs": "^1.1.9",
+    "motion": "^12.40.0",
+    "rc-cascader": "^3.34.0",
+    "rc-select": "^14.16.8",
+    "rc-slider": "^11.1.9",
+    "rc-table": "^7.55.1",
+    "rc-tree": "^5.13.1",
+    "rc-tree-select": "^5.27.0",
+    "rc-util": "^5.44.4",
+    "rc-virtual-list": "^3.19.2",
+    "react-d3-cloud": "^1.0.6",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
@@ -146,29 +157,18 @@
     "vite": "^8.0.16",
     "vitest": "^4.1.9"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.29.2",
-    "@base-ui/react": "^1.6.0",
-    "@daypicker/react": "^10.0.1",
-    "@floating-ui/react": "^0.27.19",
-    "@number-flow/react": "^0.6.0",
-    "@paper-design/shaders-react": "^0.0.76",
-    "@radix-ui/react-slot": "^1.3.0",
-    "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
-    "echarts-for-react": "^3.0.6",
-    "ldrs": "^1.1.9",
-    "motion": "^12.40.0",
-    "rc-cascader": "^3.34.0",
-    "rc-select": "^14.16.8",
-    "rc-slider": "^11.1.9",
-    "rc-table": "^7.55.1",
-    "rc-tree": "^5.13.1",
-    "rc-tree-select": "^5.27.0",
-    "rc-util": "^5.44.4",
-    "rc-virtual-list": "^3.19.2",
-    "react-d3-cloud": "^1.0.6",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1"
-  }
+  "peerDependencies": {
+    "react": "~16.14.0 || ^17.0.0  || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+    "react-dom": "~16.14.0 || ^17.0.0  || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+  },
+  "packageManager": "pnpm@11.8.0",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "yijiejiang@tencent.com"
+  ]
 }