one-design-next 0.0.64 → 0.0.66

package/dist/cascader/fork/Cascader.js

@@ -1,27 +1,27 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "prefixCls", "fieldNames", "defaultValue", "value", "changeOnSelect", "onChange", "displayRender", "checkable", "autoClearSearchValue", "searchValue", "onSearch", "showSearch", "expandTrigger", "options", "dropdownPrefixCls", "loadData", "popupVisible", "open", "popupClassName", "dropdownClassName", "dropdownMenuColumnStyle", "dropdownStyle", "popupPlacement", "placement", "onDropdownVisibleChange", "onPopupVisibleChange", "onOpenChange", "expandIcon", "loadingIcon", "children", "dropdownMatchSelectWidth", "showCheckedStrategy", "optionRender", "checkStrictly"];
-import { BaseSelect } from 'rc-select';
-import useId from "rc-select/es/hooks/useId";
-import useEvent from "rc-util/es/hooks/useEvent";
-import useMergedState from "rc-util/es/hooks/useMergedState";
-import * as React from 'react';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import CascaderContext from 'rc-cascader/es/context';
 import useDisplayValues from 'rc-cascader/es/hooks/useDisplayValues';
 import useMissingValues from 'rc-cascader/es/hooks/useMissingValues';
 import useOptions from 'rc-cascader/es/hooks/useOptions';
 import useSearchConfig from 'rc-cascader/es/hooks/useSearchConfig';
 import useSearchOptions from 'rc-cascader/es/hooks/useSearchOptions';
+import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKeys, toRawValues } from 'rc-cascader/es/utils/commonUtil';
+import { formatStrategyValues, toPathOptions } from 'rc-cascader/es/utils/treeUtil';
+import warningProps, { warningNullOptions } from 'rc-cascader/es/utils/warningPropsUtil';
+import { BaseSelect } from 'rc-select';
+import useId from 'rc-select/es/hooks/useId';
+import useEvent from 'rc-util/es/hooks/useEvent';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import * as React from 'react';
 import useSelect from "./hooks/useSelect";
 import useValues from "./hooks/useValues";
 import OptionList from "./OptionList";
 import Panel from "./Panel";
-import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKeys, toRawValues } from 'rc-cascader/es/utils/commonUtil';
-import { formatStrategyValues, toPathOptions } from 'rc-cascader/es/utils/treeUtil';
-import warningProps, { warningNullOptions } from 'rc-cascader/es/utils/warningPropsUtil';
+var _excluded = ['id', 'prefixCls', 'fieldNames', 'defaultValue', 'value', 'changeOnSelect', 'onChange', 'displayRender', 'checkable', 'autoClearSearchValue', 'searchValue', 'onSearch', 'showSearch', 'showInnerSearch', 'expandTrigger', 'options', 'dropdownPrefixCls', 'loadData', 'popupVisible', 'open', 'popupClassName', 'dropdownClassName', 'dropdownMenuColumnStyle', 'dropdownStyle', 'popupPlacement', 'placement', 'onDropdownVisibleChange', 'onPopupVisibleChange', 'onOpenChange', 'expandIcon', 'loadingIcon', 'children', 'dropdownMatchSelectWidth', 'showCheckedStrategy', 'optionRender', 'checkStrictly'];
 var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     _props$prefixCls = props.prefixCls,
@@ -38,6 +38,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     searchValue = props.searchValue,
     onSearch = props.onSearch,
     showSearch = props.showSearch,
+    showInnerSearch = props.showInnerSearch,
     expandTrigger = props.expandTrigger,
     options = props.options,
     dropdownPrefixCls = props.dropdownPrefixCls,
@@ -81,8 +82,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // ========================= FieldNames =========================
   var mergedFieldNames = React.useMemo(function () {
     return fillFieldNames(fieldNames);
-  }, /* eslint-disable react-hooks/exhaustive-deps */
-  [JSON.stringify(fieldNames)]
+  } /* eslint-disable react-hooks/exhaustive-deps */, [JSON.stringify(fieldNames)]
   /* eslint-enable react-hooks/exhaustive-deps */);
 
   // =========================== Option ===========================
@@ -231,34 +231,24 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefixCls: prefixCls,
     autoClearSearchValue: autoClearSearchValue,
     dropdownMatchSelectWidth: dropdownMatchSelectWidth,
-    dropdownStyle: _objectSpread(_objectSpread({}, dropdownStyle), customDropdownStyle)
+    dropdownStyle: _objectSpread(_objectSpread({}, dropdownStyle), customDropdownStyle),
     // Value
-    ,
-
     displayValues: displayValues,
     onDisplayValuesChange: onDisplayValuesChange,
-    mode: multiple ? 'multiple' : undefined
+    mode: multiple ? 'multiple' : undefined,
     // Search
-    ,
-
     searchValue: mergedSearchValue,
     onSearch: onInternalSearch,
-    showSearch: mergedShowSearch
+    showSearch: showInnerSearch ? false : mergedShowSearch,
     // Options
-    ,
-
     OptionList: OptionList,
-    emptyOptions: emptyOptions
+    emptyOptions: emptyOptions,
     // Open
-    ,
-
     open: mergedOpen,
     dropdownClassName: mergedDropdownClassName,
     placement: mergedPlacement,
-    onDropdownVisibleChange: onInternalDropdownVisibleChange
+    onDropdownVisibleChange: onInternalDropdownVisibleChange,
     // Children
-    ,
-
     getRawInputElement: function getRawInputElement() {
       return children;
     }

package/dist/cascader/fork/OptionList/Column.d.ts

@@ -15,6 +15,5 @@ export interface ColumnProps {
     loadingKeys: string[];
     isSelectable: (option: DefaultOptionType) => boolean;
     disabled?: boolean;
-    motionEnter?: boolean;
 }
-export default function Column({ prefixCls, multiple, options, activeValue, prevValuePath, onToggleOpen, onSelect, onActive, checkedSet, halfCheckedSet, loadingKeys, isSelectable, disabled: propsDisabled, motionEnter, }: ColumnProps): React.JSX.Element;
+export default function Column({ prefixCls, multiple, options, activeValue, prevValuePath, onToggleOpen, onSelect, onActive, checkedSet, halfCheckedSet, loadingKeys, isSelectable, disabled: propsDisabled, }: ColumnProps): React.JSX.Element;

package/dist/cascader/fork/OptionList/Column.js

@@ -20,8 +20,7 @@ export default function Column(_ref) {
     halfCheckedSet = _ref.halfCheckedSet,
     loadingKeys = _ref.loadingKeys,
     isSelectable = _ref.isSelectable,
-    propsDisabled = _ref.disabled,
-    motionEnter = _ref.motionEnter;
+    propsDisabled = _ref.disabled;
   var menuPrefixCls = "".concat(prefixCls, "-menu");
   var menuItemPrefixCls = "".concat(prefixCls, "-menu-item");
   var _ref2 = React.useContext(CascaderContext),
@@ -72,7 +71,7 @@ export default function Column(_ref) {
     });
   }, [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
   return /*#__PURE__*/React.createElement("ul", {
-    className: clsx(menuPrefixCls, _defineProperty({}, "".concat(menuPrefixCls, "-enter"), motionEnter)),
+    className: menuPrefixCls,
     role: "menu"
   }, optionInfoList.map(function (_ref3) {
     var disabled = _ref3.disabled,

package/dist/cascader/fork/OptionList/List.js

@@ -1,18 +1,18 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 /* eslint-disable default-case */
 import classNames from 'classnames';
-import * as React from 'react';
 import CascaderContext from 'rc-cascader/es/context';
+import CacheContent from 'rc-cascader/es/OptionList/CacheContent';
+import useKeyboard from 'rc-cascader/es/OptionList/useKeyboard';
 import { getFullPathKeys, isLeaf, scrollIntoParentView, toPathKey, toPathKeys, toPathValueStr } from 'rc-cascader/es/utils/commonUtil';
 import { toPathOptions } from 'rc-cascader/es/utils/treeUtil';
-import CacheContent from 'rc-cascader/es/OptionList/CacheContent';
+import * as React from 'react';
 import Column, { FIX_LABEL } from "./Column";
 import useActive from "./useActive";
-import useKeyboard from 'rc-cascader/es/OptionList/useKeyboard';
 var RawOptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _optionColumns$, _ref3, _classNames;
   var prefixCls = props.prefixCls,
@@ -180,7 +180,7 @@ var RawOptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var _containerRef$current;
       var cellPath = activeValueCells.slice(0, i + 1);
       var cellKeyPath = toPathKey(cellPath);
-      var ele = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector("li[data-path-key=\"".concat(cellKeyPath.replace(/\\{0,2}"/g, '\\"'), "\"]") // matches unescaped double quotes
+      var ele = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('li[data-path-key="'.concat(cellKeyPath.replace(/\\{0,2}"/g, '\\"'), '"]') // matches unescaped double quotes
       );
       if (ele) {
         scrollIntoParentView(ele);
@@ -191,7 +191,7 @@ var RawOptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // ========================== Render ==========================
   // >>>>> Empty
   var isEmpty = !((_optionColumns$ = optionColumns[0]) !== null && _optionColumns$ !== void 0 && (_optionColumns$ = _optionColumns$.options) !== null && _optionColumns$ !== void 0 && _optionColumns$.length);
-  var emptyList = [(_ref3 = {}, _defineProperty(_ref3, fieldNames.value, '__EMPTY__'), _defineProperty(_ref3, FIX_LABEL, notFoundContent), _defineProperty(_ref3, "disabled", true), _ref3)];
+  var emptyList = [(_ref3 = {}, _defineProperty(_ref3, fieldNames.value, '__EMPTY__'), _defineProperty(_ref3, FIX_LABEL, notFoundContent), _defineProperty(_ref3, 'disabled', true), _ref3)];
   var columnProps = _objectSpread(_objectSpread({}, props), {}, {
     multiple: !isEmpty && multiple,
     onSelect: onPathSelect,
@@ -207,88 +207,6 @@ var RawOptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var mergedOptionColumns = isEmpty ? [{
     options: emptyList
   }] : optionColumns;
-
-  // 面板已展开时，列数变化驱动宽度过渡；仅新增的那一列做进入动效
-  var prevOpenRef = React.useRef(false);
-  var prevColCountRef = React.useRef(0);
-  var prevWidthRef = React.useRef(null);
-  var widthMotionEndRef = React.useRef(null);
-  var colCount = mergedOptionColumns.length;
-  var _React$useStateEnter = React.useState(-1),
-    _React$useStateEnter2 = _slicedToArray(_React$useStateEnter, 2),
-    enterColumnIndex = _React$useStateEnter2[0],
-    setEnterColumnIndex = _React$useStateEnter2[1];
-  React.useLayoutEffect(function () {
-    var el = containerRef.current;
-    var wasOpen = prevOpenRef.current;
-    var prevColCount = prevColCountRef.current;
-    prevOpenRef.current = !!open;
-    prevColCountRef.current = open ? colCount : 0;
-    if (!el) {
-      return undefined;
-    }
-    if (!open) {
-      prevWidthRef.current = null;
-      el.style.width = '';
-      el.style.transition = '';
-      el.style.overflow = '';
-      setEnterColumnIndex(-1);
-      return undefined;
-    }
-    var nextWidth = el.offsetWidth;
-    var prevWidth = prevWidthRef.current;
-    prevWidthRef.current = nextWidth;
-    var reduceMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    var timers = [];
-    // 已展开时新增列：给新列进入动效
-    if (wasOpen && !reduceMotion && colCount > prevColCount) {
-      setEnterColumnIndex(colCount - 1);
-      timers.push(window.setTimeout(function () {
-        setEnterColumnIndex(-1);
-      }, 220));
-    }
-    // 首次打开不动画，避免整板滑入；仅在已展开时宽度变化过渡
-    if (!wasOpen || reduceMotion || prevWidth == null || prevWidth === nextWidth) {
-      return function () {
-        timers.forEach(function (id) {
-          return window.clearTimeout(id);
-        });
-      };
-    }
-    if (widthMotionEndRef.current) {
-      el.removeEventListener('transitionend', widthMotionEndRef.current);
-      widthMotionEndRef.current = null;
-    }
-    el.style.transition = 'none';
-    el.style.overflow = 'hidden';
-    el.style.width = "".concat(prevWidth, "px");
-    // force reflow
-    el.offsetWidth;
-    el.style.transition = "width var(--odn-cascader-panel-motion-duration, 0.22s) var(--odn-cascader-panel-motion-ease, cubic-bezier(0.32, 0.72, 0, 1))";
-    el.style.width = "".concat(nextWidth, "px");
-    var onEnd = function onEnd(event) {
-      if (event.target !== el || event.propertyName !== 'width') {
-        return;
-      }
-      el.style.width = '';
-      el.style.transition = '';
-      el.style.overflow = '';
-      el.removeEventListener('transitionend', onEnd);
-      widthMotionEndRef.current = null;
-      prevWidthRef.current = el.offsetWidth;
-    };
-    widthMotionEndRef.current = onEnd;
-    el.addEventListener('transitionend', onEnd);
-    return function () {
-      timers.forEach(function (id) {
-        return window.clearTimeout(id);
-      });
-      el.removeEventListener('transitionend', onEnd);
-      if (widthMotionEndRef.current === onEnd) {
-        widthMotionEndRef.current = null;
-      }
-    };
-  }, [colCount, searchValue, open, isEmpty]);
   var columnNodes = mergedOptionColumns.map(function (col, index) {
     var prevValuePath = activeValueCells.slice(0, index);
     var activeValue = activeValueCells[index];
@@ -298,16 +216,15 @@ var RawOptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
       prefixCls: mergedPrefixCls,
       options: col.options,
       prevValuePath: prevValuePath,
-      activeValue: activeValue,
-      motionEnter: index === enterColumnIndex
+      activeValue: activeValue
     }));
   });
 
   // >>>>> Render
   return /*#__PURE__*/React.createElement(CacheContent, {
     open: open
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(mergedPrefixCls, "-menus"), (_classNames = {}, _defineProperty(_classNames, "".concat(mergedPrefixCls, "-menu-empty"), isEmpty), _defineProperty(_classNames, "".concat(mergedPrefixCls, "-rtl"), rtl), _classNames)),
+  }, /*#__PURE__*/React.createElement('div', {
+    className: classNames(''.concat(mergedPrefixCls, '-menus'), (_classNames = {}, _defineProperty(_classNames, ''.concat(mergedPrefixCls, '-menu-empty'), isEmpty), _defineProperty(_classNames, ''.concat(mergedPrefixCls, '-rtl'), rtl), _classNames)),
     ref: containerRef
   }, columnNodes));
 });

package/dist/cascader/fork/OptionList/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from '@babel/runtime/helpers/esm/extends';
 import { useBaseProps } from 'rc-select';
 import * as React from 'react';
 import RawOptionList from "./List";

package/dist/cascader/fork/OptionList/useActive.js

@@ -1,6 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
 import CascaderContext from 'rc-cascader/es/context';
+import * as React from 'react';
+var getStrictActivePath = function getStrictActivePath(path) {
+  if (!(path !== null && path !== void 0 && path.length)) {
+    return [];
+  }
+  return path.slice(0, -1);
+};
 
 /**
  * Control the active open options path.
@@ -17,31 +23,51 @@ var useActive = function useActive(multiple, open) {
     activeValueCells = _React$useState2[0],
     setActiveValueCells = _React$useState2[1];
   var prevOpenRef = React.useRef(open);
-  React.useEffect(function () {
-    var justOpened = open && !prevOpenRef.current;
-    prevOpenRef.current = open;
+  var justOpened = open && !prevOpenRef.current;
+  prevOpenRef.current = open;
+  React.useLayoutEffect(function () {
     if (checkStrictly) {
       if (multiple) {
-        // 多选：仅在打开面板时定位到选中值所在层级，勾选不重置展开路径
         if (justOpened) {
-          var path = firstValueCells || [];
-          setActiveValueCells(path.slice(0, -1));
+          setActiveValueCells(getStrictActivePath(firstValueCells));
         }
         return;
       }
-      // 单选：打开或值变化时定位（选中后会收起面板）
       if (open) {
-        var _path = firstValueCells || [];
-        setActiveValueCells(_path.slice(0, -1));
+        setActiveValueCells(getStrictActivePath(firstValueCells));
       }
       return;
     }
-    if (!multiple) {
+    if (!multiple && (justOpened || open)) {
       setActiveValueCells(firstValueCells || []);
     }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [open, firstValueCells, checkStrictly, multiple]);
-  return [activeValueCells, setActiveValueCells];
+  }, [open, firstValueCells, checkStrictly, multiple, justOpened]);
+
+  // 打开首帧即用目标路径渲染列，避免弹层先窄后宽导致定位跳动
+  var mergedActiveValueCells = React.useMemo(function () {
+    if (!open) {
+      return activeValueCells;
+    }
+    if (checkStrictly) {
+      if (justOpened) {
+        return getStrictActivePath(firstValueCells);
+      }
+      if (activeValueCells.length > 0) {
+        return activeValueCells;
+      }
+      return getStrictActivePath(firstValueCells);
+    }
+    if (multiple) {
+      return activeValueCells;
+    }
+    if (justOpened) {
+      return firstValueCells || [];
+    }
+    if (activeValueCells.length > 0) {
+      return activeValueCells;
+    }
+    return firstValueCells || [];
+  }, [activeValueCells, checkStrictly, firstValueCells, justOpened, multiple, open]);
+  return [mergedActiveValueCells, setActiveValueCells];
 };
 export default useActive;

package/dist/cascader/fork/Panel.js

@@ -1,16 +1,16 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import classNames from 'classnames';
-import { useEvent, useMergedState } from 'rc-util';
-import * as React from 'react';
 import CascaderContext from 'rc-cascader/es/context';
 import useMissingValues from 'rc-cascader/es/hooks/useMissingValues';
 import useOptions from 'rc-cascader/es/hooks/useOptions';
+import { fillFieldNames, toRawValues } from 'rc-cascader/es/utils/commonUtil';
+import { toPathOptions } from 'rc-cascader/es/utils/treeUtil';
+import { useEvent, useMergedState } from 'rc-util';
+import * as React from 'react';
 import useSelect from "./hooks/useSelect";
 import useValues from "./hooks/useValues";
 import RawOptionList from "./OptionList/List";
-import { fillFieldNames, toRawValues } from 'rc-cascader/es/utils/commonUtil';
-import { toPathOptions } from 'rc-cascader/es/utils/treeUtil';
 function noop() {}
 export default function Panel(props) {
   var _classNames;
@@ -54,8 +54,7 @@ export default function Panel(props) {
   // ========================= FieldNames =========================
   var mergedFieldNames = React.useMemo(function () {
     return fillFieldNames(fieldNames);
-  }, /* eslint-disable react-hooks/exhaustive-deps */
-  [JSON.stringify(fieldNames)]
+  } /* eslint-disable react-hooks/exhaustive-deps */, [JSON.stringify(fieldNames)]
   /* eslint-enable react-hooks/exhaustive-deps */);
 
   // =========================== Option ===========================
@@ -121,16 +120,16 @@ export default function Panel(props) {
   }, [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, mergedChangeOnSelect, onInternalSelect, checkable, checkStrictly, loadData, expandTrigger, expandIcon, loadingIcon]);
 
   // ========================= Render =========================
-  var panelPrefixCls = "".concat(prefixCls, "-panel");
+  var panelPrefixCls = ''.concat(prefixCls, '-panel');
   var isEmpty = !mergedOptions.length;
   return /*#__PURE__*/React.createElement(CascaderContext.Provider, {
     value: cascaderContext
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(panelPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(panelPrefixCls, "-empty"), isEmpty), _classNames), className),
+  }, /*#__PURE__*/React.createElement('div', {
+    className: classNames(panelPrefixCls, (_classNames = {}, _defineProperty(_classNames, ''.concat(panelPrefixCls, '-rtl'), direction === 'rtl'), _defineProperty(_classNames, ''.concat(panelPrefixCls, '-empty'), isEmpty), _classNames), className),
     style: style
   }, isEmpty ? notFoundContent : /*#__PURE__*/React.createElement(RawOptionList, {
     prefixCls: prefixCls,
-    searchValue: "",
+    searchValue: '',
     multiple: multiple,
     toggleOpen: noop,
     open: true,

package/dist/cascader/fork/index.d.ts

@@ -1,7 +1,4 @@
-import type {
-  CascaderProps,
-  DefaultOptionType,
-} from 'rc-cascader';
+import type { CascaderProps, DefaultOptionType } from 'rc-cascader';
 import type * as React from 'react';
 
 export { SHOW_CHILD, SHOW_PARENT } from 'rc-cascader';
@@ -12,6 +9,8 @@ export type ForkCascaderProps<
   Multiple extends boolean | React.ReactNode = false,
 > = CascaderProps<OptionType, ValueField, Multiple> & {
   checkStrictly?: boolean;
+  /** 下拉内搜索：为 true 时不占用 selector 内的搜索后缀宽度 */
+  showInnerSearch?: boolean;
 };
 
 type CascaderComponent = (<

package/dist/cascader/index.d.ts

@@ -3,7 +3,6 @@ import React from 'react';
 import '../select/style';
 import CascaderPanel from './Panel';
 import './style';
-import { type ExpandDirection } from './utils';
 export interface BaseCascaderProps extends Omit<RcCascaderProps<DefaultOptionType, 'value', false>, 'prefixCls' | 'onChange' | 'value' | 'defaultValue' | 'showCheckedStrategy' | 'changeOnSelect'> {
     /** 组件尺寸 */
     size?: 'small' | 'medium' | 'large';
@@ -52,14 +51,6 @@ export interface BaseCascaderProps extends Omit<RcCascaderProps<DefaultOptionTyp
      * 点击选项或勾选控件选中，仅点击展开图标展开下一级；多选时父子节点选择互不影响（无半选）。
      */
     crossLevelSelect?: boolean;
-    /**
-     * 弹层生长方向（不影响列阅读顺序，层级始终从左到右加深，展开 Icon 不翻转）：
-     * - `ltr` 左对齐，整体向右生长
-     * - `rtl` 右对齐，整体向左生长（避免靠右时超出屏幕）
-     * - `auto` 根据 selector 相对视口位置自动选择
-     * `crossLevelSelect` 时默认 `auto`，否则默认 `ltr`。
-     */
-    expandDirection?: ExpandDirection;
 }
 export type CascaderProps<V = (string | number)[] | null> = BaseCascaderProps & {
     mode?: 'single' | 'multiple';

package/dist/cascader/index.js

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-var _excluded = ["size", "disabled", "placeholder", "allowClear", "showSearch", "className", "style", "light", "visible", "onVisibleChange", "onChange", "value", "defaultValue", "suffixIcon", "mode", "options", "optionPopoverProps", "showInnerSearch", "searchValue", "onSearch", "autoClearSearchValue", "searchFilter", "searchRender", "searchLimit", "notFoundContent", "showCheckedStrategy", "displayRender", "dropdownClassName", "dropdownMatchSelectWidth", "separator", "optionRender", "changeOnSelect", "crossLevelSelect", "expandDirection", "maxTagCount", "maxTagPlaceholder", "direction", "placement", "getPopupContainer"];
+var _excluded = ["size", "disabled", "placeholder", "allowClear", "showSearch", "className", "style", "light", "visible", "onVisibleChange", "onChange", "value", "defaultValue", "suffixIcon", "mode", "options", "optionPopoverProps", "showInnerSearch", "searchValue", "onSearch", "autoClearSearchValue", "searchFilter", "searchRender", "searchLimit", "notFoundContent", "showCheckedStrategy", "displayRender", "dropdownClassName", "dropdownMatchSelectWidth", "separator", "optionRender", "changeOnSelect", "crossLevelSelect", "maxTagCount", "maxTagPlaceholder", "direction", "placement", "getPopupContainer"];
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
 import Icon from "../icon";
 import "../select/style";
 import useIcons from "../select/useIcons";
@@ -16,7 +15,7 @@ import RcCascader, { SHOW_CHILD, SHOW_PARENT } from "./fork";
 import CascaderPanel from "./Panel";
 import SelectedSummary from "./SelectedSummary";
 import "./style";
-import { calculateOptionsDepth, DEFAULT_FIELD_NAMES, getExpandBuiltinPlacements, processOptions, resolveExpandDirection } from "./utils";
+import { DEFAULT_FIELD_NAMES, processOptions } from "./utils";
 function getPathLeafLabel(path, optionList, valueField, childrenField) {
   var current = optionList;
   var leaf;
@@ -104,7 +103,6 @@ function CascaderInner(_ref) {
     changeOnSelectProp = _ref.changeOnSelect,
     _ref$crossLevelSelect = _ref.crossLevelSelect,
     crossLevelSelect = _ref$crossLevelSelect === void 0 ? false : _ref$crossLevelSelect,
-    expandDirectionProp = _ref.expandDirection,
     maxTagCountProp = _ref.maxTagCount,
     maxTagPlaceholderProp = _ref.maxTagPlaceholder,
     directionProp = _ref.direction,
@@ -115,13 +113,6 @@ function CascaderInner(_ref) {
   var showInnerSearch = showInnerSearchProp !== null && showInnerSearchProp !== void 0 ? showInnerSearchProp : crossLevelSelect;
   // 跨层级多选：勾选后不自动清空搜索，避免搜索结果被收起
   var autoClearSearchValue = autoClearSearchValueProp !== null && autoClearSearchValueProp !== void 0 ? autoClearSearchValueProp : !(crossLevelSelect && mode === 'multiple');
-  // 跨层级默认按位置自动适配展开方向
-  var expandDirection = expandDirectionProp !== null && expandDirectionProp !== void 0 ? expandDirectionProp : crossLevelSelect ? 'auto' : 'ltr';
-  var instanceId = React.useId().replace(/:/g, '');
-  var _useState = useState(expandDirection === 'rtl' ? 'rtl' : 'ltr'),
-    _useState2 = _slicedToArray(_useState, 2),
-    resolvedDirection = _useState2[0],
-    setResolvedDirection = _useState2[1];
 
   // 默认 fieldNames.label 为 labelWithPopover，下拉展示带 Popover 的节点，用户传入的 label 保留
   var mergedFieldNames = React.useMemo(function () {
@@ -149,37 +140,6 @@ function CascaderInner(_ref) {
   var processedOptions = React.useMemo(function () {
     return processOptions(options, mergedFieldNames, optionPopoverProps);
   }, [options, mergedFieldNames, optionPopoverProps]);
-  var optionsDepth = useMemo(function () {
-    return calculateOptionsDepth(processedOptions, mergedFieldNames);
-  }, [processedOptions, mergedFieldNames]);
-
-  // expandDirection 只控制弹层锚点（靠右时向左生长），列阅读顺序始终从左到右、层级加深向右
-  var panelExpandSide = expandDirection === 'auto' ? resolvedDirection : expandDirection;
-  var mergedDirection = directionProp !== null && directionProp !== void 0 ? directionProp : 'ltr';
-
-  /**
-   * rtl：弹层右对齐 trigger、向左生长。打开前（pointerdown / onOpenChange）
-   * 已算好方向，配合 bottomRight + adjustX:0 避免首帧横向跳动。
-   * 弹层默认仍挂 document.body（不传 getPopupContainer 时）。
-   */
-  var mergedPlacement = placementProp !== null && placementProp !== void 0 ? placementProp : panelExpandSide === 'rtl' ? 'bottomRight' : 'bottomLeft';
-  var builtinPlacements = useMemo(function () {
-    return getExpandBuiltinPlacements();
-  }, []);
-  var syncAutoExpandDirection = function syncAutoExpandDirection() {
-    var _ref2, _root$querySelector;
-    if (expandDirection !== 'auto') {
-      return;
-    }
-    var root = document.querySelector(".odn-cascader-uid-".concat(instanceId));
-    var selector = (_ref2 = (_root$querySelector = root === null || root === void 0 ? void 0 : root.querySelector('.odn-select-selector')) !== null && _root$querySelector !== void 0 ? _root$querySelector : root) !== null && _ref2 !== void 0 ? _ref2 : null;
-    var nextDirection = resolveExpandDirection(selector, optionsDepth);
-    flushSync(function () {
-      setResolvedDirection(function (prev) {
-        return prev === nextDirection ? prev : nextDirection;
-      });
-    });
-  };
   var prefixCls = 'odn-select';
   var _useIcons = useIcons(_objectSpread(_objectSpread({}, restProps), {}, {
       hasFeedback: false,
@@ -191,44 +151,17 @@ function CascaderInner(_ref) {
     suffixIcon = _useIcons.suffixIcon,
     removeIcon = _useIcons.removeIcon,
     clearIcon = _useIcons.clearIcon;
-  var cascaderClassName = [prefixCls, "".concat(prefixCls, "-").concat(size), disabled && "".concat(prefixCls, "-disabled"), light && "".concat(prefixCls, "-light"), !light && "".concat(prefixCls, "-outlined"), "".concat(prefixCls, "-show-arrow"), showInnerSearch && "".concat(prefixCls, "-show-inner-search"), 'odn-cascader', crossLevelSelect && 'odn-cascader-cross-level', "odn-cascader-uid-".concat(instanceId), panelExpandSide === 'rtl' && 'odn-cascader-expand-rtl', className].filter(Boolean).join(' ');
-  var _useState3 = useState(visibleProp),
+  var cascaderClassName = [prefixCls, "".concat(prefixCls, "-").concat(size), disabled && "".concat(prefixCls, "-disabled"), light && "".concat(prefixCls, "-light"), !light && "".concat(prefixCls, "-outlined"), "".concat(prefixCls, "-show-arrow"), showInnerSearch && "".concat(prefixCls, "-show-inner-search"), 'odn-cascader', crossLevelSelect && 'odn-cascader-cross-level', className].filter(Boolean).join(' ');
+  var _useState = useState(visibleProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(searchValueProp || ''),
     _useState4 = _slicedToArray(_useState3, 2),
-    visible = _useState4[0],
-    setVisible = _useState4[1];
-  var _useState5 = useState(searchValueProp || ''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchValue = _useState6[0],
-    setSearchValue = _useState6[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var dropdownSearchInputRef = useRef(null);
-  useEffect(function () {
-    if (expandDirection === 'ltr' || expandDirection === 'rtl') {
-      setResolvedDirection(expandDirection);
-    }
-  }, [expandDirection]);
-
-  // 在打开前（pointerdown）就算好 auto 方向，避免打开后再切换 rtl class / placement
-  useEffect(function () {
-    if (expandDirection !== 'auto') {
-      return undefined;
-    }
-    var root = document.querySelector(".odn-cascader-uid-".concat(instanceId));
-    if (!root) {
-      return undefined;
-    }
-    var onPointerDown = function onPointerDown() {
-      syncAutoExpandDirection();
-    };
-    root.addEventListener('pointerdown', onPointerDown, true);
-    return function () {
-      root.removeEventListener('pointerdown', onPointerDown, true);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- 仅在关键参数变化时重绑
-  }, [expandDirection, instanceId, optionsDepth]);
   var handleVisibleChange = function handleVisibleChange(bool) {
-    if (bool && expandDirection === 'auto') {
-      syncAutoExpandDirection();
-    }
     if (visibleProp === undefined) {
       setVisible(bool);
     }
@@ -315,8 +248,11 @@ function CascaderInner(_ref) {
     return optionList;
   };
   var mergedShowSearch = React.useMemo(function () {
+    if (!showInnerSearch && !showSearch) {
+      return false;
+    }
     if (!showInnerSearch) {
-      return showInnerSearch;
+      return showSearch;
     }
     var searchConfig = {
       filter: searchFilter || function (inputValue, path) {
@@ -328,8 +264,8 @@ function CascaderInner(_ref) {
       limit: searchLimit
     };
     return searchConfig;
-  }, [showInnerSearch, searchFilter, searchRender, searchLimit]);
-  var commonProps = _objectSpread(_objectSpread(_objectSpread({}, restProps), {}, {
+  }, [showInnerSearch, showSearch, searchFilter, searchRender, searchLimit]);
+  var commonProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, restProps), {}, {
     fieldNames: mergedFieldNames,
     prefixCls: prefixCls,
     disabled: disabled,
@@ -394,14 +330,15 @@ function CascaderInner(_ref) {
     optionRender: optionRenderProp,
     changeOnSelect: !!changeOnSelectProp || crossLevelSelect,
     checkStrictly: crossLevelSelect,
+    showInnerSearch: showInnerSearch,
     maxTagCount: mergedMaxTagCount,
-    maxTagPlaceholder: mergedMaxTagPlaceholder,
-    direction: mergedDirection,
-    placement: mergedPlacement
-  }, getPopupContainerProp ? {
+    maxTagPlaceholder: mergedMaxTagPlaceholder
+  }, directionProp ? {
+    direction: directionProp
+  } : {}), placementProp ? {
+    placement: placementProp
+  } : {}), getPopupContainerProp ? {
     getPopupContainer: getPopupContainerProp
-  } : {}), panelExpandSide === 'rtl' ? {
-    builtinPlacements: builtinPlacements
   } : {});
   var dropdownRender = showInnerSearch ? function (menu) {
     var searchNode = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {

package/dist/cascader/style/index.css

@@ -3,8 +3,6 @@ html {
   --odn-cascader-control-width: 184px;
   --odn-cascader-control-item-width: 200px;
   --odn-cascader-dropdown-height: 232px;
-  --odn-cascader-panel-motion-duration: 0.22s;
-  --odn-cascader-panel-motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
   --odn-cascader-option-selected-bg: var(--odn-color-blue-1);
   --odn-cascader-option-selected-font-weight: 400;
   --odn-cascader-option-padding-block: 7px;
@@ -15,6 +13,7 @@ html {
   --odn-cascader-panel-border-radius: 6px;
 }
 
+/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
 .odn-cascader {
   width: var(--odn-cascader-control-width);
 }

package/dist/cascader/utils.d.ts

@@ -12,51 +12,3 @@ export declare const DEFAULT_FIELD_NAMES: FieldNames;
 export declare const processOptions: (options: DefaultOptionType[] | undefined, fieldNames?: FieldNames, optionPopoverProps?: Record<string, unknown>) => DefaultOptionType[] | undefined;
 export declare const calculateOptionsDepth: (options: DefaultOptionType[] | undefined, fieldNames?: FieldNames) => number;
 export declare const generateCommonStyle: (depth: number, autoMaxWidth: boolean, customStyle?: React.CSSProperties) => React.CSSProperties;
-export type ExpandDirection = 'ltr' | 'rtl' | 'auto';
-/**
- * Cascader 自管水平锚点（expandDirection），关闭 adjustX，
- * 避免 Trigger 首帧按溢出翻转后再纠正造成「先错后对」。
- */
-export declare const getExpandBuiltinPlacements: () => {
-    bottomLeft: {
-        points: [string, string];
-        offset: number[];
-        overflow: {
-            adjustX: number;
-            adjustY: number;
-        };
-        htmlRegion: "scroll";
-    };
-    bottomRight: {
-        points: [string, string];
-        offset: number[];
-        overflow: {
-            adjustX: number;
-            adjustY: number;
-        };
-        htmlRegion: "scroll";
-    };
-    topLeft: {
-        points: [string, string];
-        offset: number[];
-        overflow: {
-            adjustX: number;
-            adjustY: number;
-        };
-        htmlRegion: "scroll";
-    };
-    topRight: {
-        points: [string, string];
-        offset: number[];
-        overflow: {
-            adjustX: number;
-            adjustY: number;
-        };
-        htmlRegion: "scroll";
-    };
-};
-/**
- * 根据 selector 相对视口的位置，决定弹层左对齐向右生长（ltr）
- * 还是右对齐向左生长（rtl）。列阅读顺序始终从左到右。
- */
-export declare const resolveExpandDirection: (triggerEl: Element | null | undefined, depth: number, columnMinWidth?: number) => 'ltr' | 'rtl';

package/dist/cascader/utils.js

@@ -47,7 +47,7 @@ export var processOptions = function processOptions(options, fieldNames, optionP
     });
 
     // 记录一个自定义的固定的属性，用以处理 search 逻辑
-    processedOption['labelForSearch'] = displayContent != null && (typeof displayContent === 'string' || typeof displayContent === 'number') ? String(displayContent) : '';
+    processedOption['labelForSearch'] = displayContent !== null && displayContent !== undefined && (typeof displayContent === 'string' || typeof displayContent === 'number') ? String(displayContent) : '';
 
     // 递归处理 children
     var childrenField = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.children) || 'children';
@@ -96,75 +96,4 @@ export var generateCommonStyle = function generateCommonStyle(depth, autoMaxWidt
   return _objectSpread({
     '--odn-cascader-panel-column-flex': autoMaxWidth ? "0 0 ".concat(100 / depth, "%") : '1 1 0%'
   }, customStyle);
-};
-var DEFAULT_COLUMN_MIN_WIDTH = 200;
-
-/**
- * Cascader 自管水平锚点（expandDirection），关闭 adjustX，
- * 避免 Trigger 首帧按溢出翻转后再纠正造成「先错后对」。
- */
-export var getExpandBuiltinPlacements = function getExpandBuiltinPlacements() {
-  var adjustX = 0;
-  var adjustY = 1;
-  return {
-    bottomLeft: {
-      points: ['tl', 'bl'],
-      offset: [0, 4],
-      overflow: {
-        adjustX: adjustX,
-        adjustY: adjustY
-      },
-      htmlRegion: 'scroll'
-    },
-    bottomRight: {
-      points: ['tr', 'br'],
-      offset: [0, 4],
-      overflow: {
-        adjustX: adjustX,
-        adjustY: adjustY
-      },
-      htmlRegion: 'scroll'
-    },
-    topLeft: {
-      points: ['bl', 'tl'],
-      offset: [0, -4],
-      overflow: {
-        adjustX: adjustX,
-        adjustY: adjustY
-      },
-      htmlRegion: 'scroll'
-    },
-    topRight: {
-      points: ['br', 'tr'],
-      offset: [0, -4],
-      overflow: {
-        adjustX: adjustX,
-        adjustY: adjustY
-      },
-      htmlRegion: 'scroll'
-    }
-  };
-};
-
-/**
- * 根据 selector 相对视口的位置，决定弹层左对齐向右生长（ltr）
- * 还是右对齐向左生长（rtl）。列阅读顺序始终从左到右。
- */
-export var resolveExpandDirection = function resolveExpandDirection(triggerEl, depth) {
-  var columnMinWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLUMN_MIN_WIDTH;
-  if (!triggerEl || typeof window === 'undefined') {
-    return 'ltr';
-  }
-  var rect = triggerEl.getBoundingClientRect();
-  var columns = Math.max(1, Math.min(depth, 4));
-  var neededWidth = columns * columnMinWidth;
-  var spaceRight = window.innerWidth - rect.left;
-  var spaceLeft = rect.right;
-  if (spaceRight >= neededWidth) {
-    return 'ltr';
-  }
-  if (spaceLeft > spaceRight) {
-    return 'rtl';
-  }
-  return 'ltr';
 };

package/dist/select/index.js

@@ -14,7 +14,7 @@ import Icon from "../icon";
 import Popover from "../popover";
 import SelectFeedback from "./SelectFeedback";
 import "./style";
-import { formatTokenPasteFeedback, readClipboardText, resolveTokenPaste, splitByTokenSeparators, toRawValueList } from "./tokenUtils";
+import { countValidValues, formatTokenPasteFeedback, readClipboardText, resolveTokenPaste, splitByTokenSeparators, toRawValueList } from "./tokenUtils";
 import useIcons from "./useIcons";
 var InternalSelect = function InternalSelect(props, ref) {
   var className = props.className,
@@ -332,7 +332,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       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);
+      }, countValidValues(toRawValueList(value), invalidValues), " /", ' ', maxCount), suffixIconFinal);
     },
     menuItemSelectedIcon: mode === 'multiple' ? function (iconProps) {
       var optionDisabled = iconProps.disabled,

package/dist/select/style/index.css

@@ -5,6 +5,13 @@ html {
   --odn-select-border-radius-sm: 4px;
   --odn-select-internal_fixed_item_margin: 2px;
   --odn-select-multiple-item-height: 22px;
+  --odn-select-multiple-selector-max-height: calc(
+    8px + 5 *
+      (
+        var(--odn-select-multiple-item-height) +
+          var(--odn-select-internal_fixed_item_margin) * 4
+      )
+  );
   --odn-select-multiple-item-bg: var(--odn-color-black-1);
   --odn-select-multiple-item-border-color: var(--odn-color-border);
   --odn-select-popup-padding-block: 8px;
@@ -567,6 +574,11 @@ html {
   display: inline-flex;
 }
 
+.odn-select-multiple .odn-select-selection-overflow-item > span {
+  max-width: 100%;
+  min-width: 0;
+}
+
 .odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item {
   display: flex;
   align-self: center;
@@ -625,12 +637,35 @@ html {
 
 .odn-select-multiple .odn-select-selector {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
-  height: 100%;
   padding-inline: 12px;
   padding-block: 4px;
   border-radius: var(--odn-select-border-radius);
+  max-height: var(--odn-select-multiple-selector-max-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.odn-select-multiple .odn-select-selector::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.odn-select-multiple .odn-select-selector::-webkit-scrollbar-thumb {
+  min-width: 14px;
+  min-height: 14px;
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 14px;
+}
+.odn-select-multiple .odn-select-selector::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
+.odn-select-multiple .odn-select-selector::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.odn-select-multiple .odn-select-selector::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .odn-select-disabled.odn-select-multiple .odn-select-selector {
@@ -801,12 +836,35 @@ html {
 
 .odn-select-multiple.odn-select-sm .odn-select-selector {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
-  height: 100%;
   padding-inline: 12px;
   padding-block: max(max(var(--odn-padding-xxs) - 1px, 0px) - var(--odn-select-internal_fixed_item_margin), 0px);
   border-radius: var(--odn-select-border-radius-sm);
+  max-height: var(--odn-select-multiple-selector-max-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.odn-select-multiple.odn-select-sm .odn-select-selector::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.odn-select-multiple.odn-select-sm .odn-select-selector::-webkit-scrollbar-thumb {
+  min-width: 14px;
+  min-height: 14px;
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 14px;
+}
+.odn-select-multiple.odn-select-sm .odn-select-selector::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
+.odn-select-multiple.odn-select-sm .odn-select-selector::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.odn-select-multiple.odn-select-sm .odn-select-selector::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .odn-select-disabled.odn-select-multiple.odn-select-sm .odn-select-selector {
@@ -983,12 +1041,35 @@ html {
 
 .odn-select-multiple.odn-select-lg .odn-select-selector {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
-  height: 100%;
   padding-inline: 12px;
   padding-block: max(max(var(--odn-padding-xxs) - 1px, 0px) - var(--odn-select-internal_fixed_item_margin), 0px);
   border-radius: var(--odn-select-border-radius-lg);
+  max-height: var(--odn-select-multiple-selector-max-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.odn-select-multiple.odn-select-lg .odn-select-selector::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+.odn-select-multiple.odn-select-lg .odn-select-selector::-webkit-scrollbar-thumb {
+  min-width: 14px;
+  min-height: 14px;
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 14px;
+}
+.odn-select-multiple.odn-select-lg .odn-select-selector::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
+.odn-select-multiple.odn-select-lg .odn-select-selector::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.odn-select-multiple.odn-select-lg .odn-select-selector::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .odn-select-disabled.odn-select-multiple.odn-select-lg .odn-select-selector {
@@ -1795,6 +1876,7 @@ html {
 }
 
 .odn-select-selection-overflow-item-rest > span {
+  max-width: 100%;
   min-width: 0;
 }
 

package/dist/select/tokenUtils.d.ts

@@ -23,6 +23,8 @@ export declare function readClipboardText(clipboardData: DataTransfer | null): s
 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;
+/** 有效选中数：不含 invalid chip（未匹配保留项） */
+export declare function countValidValues(values: RawValue[], invalid: RawValue[]): number;
 export declare function toRawValueList(value: unknown): RawValue[];
 export declare function resolveTokenPaste(params: {
     tokens: string[];

package/dist/select/tokenUtils.js

@@ -63,6 +63,17 @@ export function matchOptionByToken(token, options) {
     return String(value).toLowerCase() === normalized || String(label !== null && label !== void 0 ? label : '').toLowerCase() === normalized;
   })) !== null && _flat$find !== void 0 ? _flat$find : null;
 }
+
+/** 有效选中数：不含 invalid chip（未匹配保留项） */
+export function countValidValues(values, invalid) {
+  if (!invalid.length) {
+    return values.length;
+  }
+  var invalidSet = new Set(invalid.map(String));
+  return values.filter(function (v) {
+    return !invalidSet.has(String(v));
+  }).length;
+}
 export function toRawValueList(value) {
   if (value === undefined || value === null || value === '') {
     return [];
@@ -136,23 +147,23 @@ function _resolveTokenPaste() {
               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;
                   }
+                  if (!(typeof maxCount === 'number' && countValidValues(nextValue, nextInvalid) >= maxCount)) {
+                    _context.next = 4;
+                    break;
+                  }
+                  return _context.abrupt("return", 0);
+                case 4:
                   _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);
+                  return _context.abrupt("return", 0);
                 case 8:
                   nextValue.push(_value);
                   added.push(_value);
@@ -163,7 +174,7 @@ function _resolveTokenPaste() {
                   if (idx >= 0) {
                     nextInvalid.splice(idx, 1);
                   }
-                  return _context.abrupt("return", 1);
+                  return _context.abrupt("return", 0);
                 case 13:
                   // 未匹配
                   invalid.push(item.token);
@@ -171,7 +182,7 @@ function _resolveTokenPaste() {
                     _context.next = 16;
                     break;
                   }
-                  return _context.abrupt("return", 1);
+                  return _context.abrupt("return", 0);
                 case 16:
                   value = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : item.token;
                   if (!hasValue(value)) {
@@ -179,7 +190,7 @@ function _resolveTokenPaste() {
                     break;
                   }
                   duplicated.push(item.token);
-                  return _context.abrupt("return", 1);
+                  return _context.abrupt("return", 0);
                 case 20:
                   nextValue.push(value);
                   added.push(value);
@@ -197,7 +208,7 @@ function _resolveTokenPaste() {
           _iterator.s();
         case 19:
           if ((_step = _iterator.n()).done) {
-            _context2.next = 28;
+            _context2.next = 26;
             break;
           }
           return _context2.delegateYield(_loop(), "t1", 21);
@@ -207,28 +218,22 @@ function _resolveTokenPaste() {
             _context2.next = 24;
             break;
           }
-          return _context2.abrupt("break", 28);
+          return _context2.abrupt("continue", 24);
         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;
+        case 26:
+          _context2.next = 31;
           break;
-        case 30:
-          _context2.prev = 30;
+        case 28:
+          _context2.prev = 28;
           _context2.t2 = _context2["catch"](16);
           _iterator.e(_context2.t2);
-        case 33:
-          _context2.prev = 33;
+        case 31:
+          _context2.prev = 31;
           _iterator.f();
-          return _context2.finish(33);
-        case 36:
+          return _context2.finish(31);
+        case 34:
           return _context2.abrupt("return", {
             added: added,
             duplicated: duplicated,
@@ -236,11 +241,11 @@ function _resolveTokenPaste() {
             nextValue: nextValue,
             nextInvalid: nextInvalid
           });
-        case 37:
+        case 35:
         case "end":
           return _context2.stop();
       }
-    }, _callee, null, [[16, 30, 33, 36]]);
+    }, _callee, null, [[16, 28, 31, 34]]);
   }));
   return _resolveTokenPaste.apply(this, arguments);
 }

package/dist/style/base.css

@@ -243,12 +243,14 @@ a[disabled] {
   pointer-events: none;
 }
 
-[data-scrollbar-custom]::-webkit-scrollbar {
+[data-scrollbar-custom]::-webkit-scrollbar,
+.scrollbar-custom::-webkit-scrollbar {
   width: 14px;
   height: 14px;
 }
 
-[data-scrollbar-custom]::-webkit-scrollbar-thumb {
+[data-scrollbar-custom]::-webkit-scrollbar-thumb,
+.scrollbar-custom::-webkit-scrollbar-thumb {
   min-width: 14px;
   min-height: 14px;
   background-color: rgba(0, 0, 0, 10%);
@@ -257,15 +259,18 @@ a[disabled] {
   border-radius: 14px;
 }
 
-[data-scrollbar-custom]::-webkit-scrollbar-track {
+[data-scrollbar-custom]::-webkit-scrollbar-track,
+.scrollbar-custom::-webkit-scrollbar-track {
   background-color: rgba(0, 0, 0, 0%);
 }
 
-[data-scrollbar-custom]::-webkit-scrollbar-thumb:hover {
+[data-scrollbar-custom]::-webkit-scrollbar-thumb:hover,
+.scrollbar-custom::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 20%);
 }
 
-[data-scrollbar-custom]::-webkit-scrollbar-thumb:active {
+[data-scrollbar-custom]::-webkit-scrollbar-thumb:active,
+.scrollbar-custom::-webkit-scrollbar-thumb:active {
   background-color: rgba(0, 0, 0, 30%);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",
@@ -56,10 +56,6 @@
     "*.{md,json}": [
       "prettier --write --no-error-on-unmatched-pattern"
     ],
-    "{components,test}/**/*.{css,scss}": [
-      "stylelint --fix",
-      "prettier --write"
-    ],
     "{components,test}/**/*.{js,jsx}": [
       "eslint --fix",
       "prettier --write"