one-design-next 0.0.63 → 0.0.65

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;