one-design-next 0.0.65 → 0.0.66

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.65",
+  "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"