@rc-component/select 1.6.14 → 1.7.0

package/README.md

@@ -83,7 +83,7 @@ export default () => (
 | dropdownAlign | additional align applied to dropdown | [AlignType](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} |
 | dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties |
 | notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' |
-| tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? |  |
+| tokenSeparators | separator used to tokenize on tag/multiple mode | `string[] \| ((input: string) => string[])` |  |
 | open | control select open | boolean |  |
 | defaultOpen | control select default open | boolean |  |
 | placeholder | select placeholder | React Node |  |

package/es/BaseSelect/index.d.ts

@@ -90,7 +90,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     maxTagTextLength?: number;
     maxTagCount?: number | 'responsive';
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
-    tokenSeparators?: string[];
+    tokenSeparators?: string[] | ((input: string) => string[]);
     allowClear?: boolean | {
         clearIcon?: React.ReactNode;
     };

package/es/BaseSelect/index.js

@@ -138,7 +138,20 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [rawOpen, mergedOpen, triggerOpen, lockOptions] = useOpen(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
-  const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
+  const tokenWithEnter = React.useMemo(() => typeof tokenSeparators === 'function' || (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
+  const splitByTokenSeparators = React.useMemo(() => {
+    if (typeof tokenSeparators === 'function') {
+      return (input, end) => {
+        const tokens = tokenSeparators(input);
+        const isUnchanged = Array.isArray(tokens) && tokens.length === 1 && tokens[0] === input;
+        if (!Array.isArray(tokens) || !tokens.length || isUnchanged) {
+          return null;
+        }
+        return typeof end !== 'undefined' ? tokens.slice(0, end) : tokens;
+      };
+    }
+    return (input, end) => getSeparatedContent(input, tokenSeparators, end);
+  }, [tokenSeparators]);
   const onInternalSearch = (searchText, fromTyping, isCompositing) => {
     if (multiple && isValidCount(maxCount) && displayValues.length >= maxCount) {
       return;
@@ -146,10 +159,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     let ret = true;
     let newSearchText = searchText;
     onActiveValueChange?.(null);
-    const separatedList = getSeparatedContent(searchText, tokenSeparators, isValidCount(maxCount) ? maxCount - displayValues.length : undefined);
-
-    // Check if match the `tokenSeparators`
-    const patchLabels = isCompositing ? null : separatedList;
+    const cap = isValidCount(maxCount) ? maxCount - displayValues.length : undefined;
+    const patchLabels = isCompositing ? null : splitByTokenSeparators(searchText, cap);
 
     // Ignore combobox since it's not split-able
     if (mode !== 'combobox' && patchLabels) {

package/es/SelectInput/Input.js

@@ -87,7 +87,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = event.currentTarget;
 
     // Handle Enter key submission - referencing Selector implementation
-    if (key === 'Enter' && mode === 'tags' && !compositionStatusRef.current && onSearchSubmit) {
+    if (key === 'Enter' && mode === 'tags' && !open && !compositionStatusRef.current && onSearchSubmit) {
       onSearchSubmit(nextVal);
     }
 

package/es/SelectInput/index.d.ts

@@ -27,7 +27,7 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onSelectorRemove?: (value: DisplayValueType) => void;
     maxLength?: number;
     autoFocus?: boolean;
-    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    /** Check if tokenization should treat pasted line breaks as separators */
     tokenWithEnter?: boolean;
     className?: string;
     style?: React.CSSProperties;

package/lib/BaseSelect/index.d.ts

@@ -90,7 +90,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     maxTagTextLength?: number;
     maxTagCount?: number | 'responsive';
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
-    tokenSeparators?: string[];
+    tokenSeparators?: string[] | ((input: string) => string[]);
     allowClear?: boolean | {
         clearIcon?: React.ReactNode;
     };

package/lib/BaseSelect/index.js

@@ -147,7 +147,20 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [rawOpen, mergedOpen, triggerOpen, lockOptions] = (0, _useOpen.default)(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
-  const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
+  const tokenWithEnter = React.useMemo(() => typeof tokenSeparators === 'function' || (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
+  const splitByTokenSeparators = React.useMemo(() => {
+    if (typeof tokenSeparators === 'function') {
+      return (input, end) => {
+        const tokens = tokenSeparators(input);
+        const isUnchanged = Array.isArray(tokens) && tokens.length === 1 && tokens[0] === input;
+        if (!Array.isArray(tokens) || !tokens.length || isUnchanged) {
+          return null;
+        }
+        return typeof end !== 'undefined' ? tokens.slice(0, end) : tokens;
+      };
+    }
+    return (input, end) => (0, _valueUtil.getSeparatedContent)(input, tokenSeparators, end);
+  }, [tokenSeparators]);
   const onInternalSearch = (searchText, fromTyping, isCompositing) => {
     if (multiple && (0, _valueUtil.isValidCount)(maxCount) && displayValues.length >= maxCount) {
       return;
@@ -155,10 +168,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     let ret = true;
     let newSearchText = searchText;
     onActiveValueChange?.(null);
-    const separatedList = (0, _valueUtil.getSeparatedContent)(searchText, tokenSeparators, (0, _valueUtil.isValidCount)(maxCount) ? maxCount - displayValues.length : undefined);
-
-    // Check if match the `tokenSeparators`
-    const patchLabels = isCompositing ? null : separatedList;
+    const cap = (0, _valueUtil.isValidCount)(maxCount) ? maxCount - displayValues.length : undefined;
+    const patchLabels = isCompositing ? null : splitByTokenSeparators(searchText, cap);
 
     // Ignore combobox since it's not split-able
     if (mode !== 'combobox' && patchLabels) {

package/lib/SelectInput/Input.js

@@ -96,7 +96,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = event.currentTarget;
 
     // Handle Enter key submission - referencing Selector implementation
-    if (key === 'Enter' && mode === 'tags' && !compositionStatusRef.current && onSearchSubmit) {
+    if (key === 'Enter' && mode === 'tags' && !open && !compositionStatusRef.current && onSearchSubmit) {
       onSearchSubmit(nextVal);
     }
 

package/lib/SelectInput/index.d.ts

@@ -27,7 +27,7 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onSelectorRemove?: (value: DisplayValueType) => void;
     maxLength?: number;
     autoFocus?: boolean;
-    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    /** Check if tokenization should treat pasted line breaks as separators */
     tokenWithEnter?: boolean;
     className?: string;
     style?: React.CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.6.14",
+  "version": "1.7.0",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"