Merge branch 'master' into dependabot/npm_and_yarn/testing-library/je…

…st-dom-6.1.5
react-component · Dec 28, 2023 · 4a16d53 · 4a16d53
2 parents 307c014 + 54a2063
commit 4a16d53
Show file tree

Hide file tree

Showing 18 changed files with 258 additions and 177 deletions.
diff --git a/README.md b/README.md
@@ -130,6 +130,7 @@ export default () => (
 | virtual | Disable virtual scroll | boolean | true |
 | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
 | optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
+| maxCount | The max number of items can be selected | number | - |
 
 ### Methods
 

diff --git a/docs/demo/multiple-with-maxCount.md b/docs/demo/multiple-with-maxCount.md
@@ -0,0 +1,8 @@
+---
+title: multiple-with-maxCount
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/multiple-with-maxCount.tsx"></code>
diff --git a/docs/examples/mul-suggest.tsx b/docs/examples/mul-suggest.tsx
@@ -11,15 +11,15 @@ class Test extends React.Component {
     value: [],
   };
 
-  onChange = value => {
+  onChange = (value) => {
     console.log('onChange ', value);
     this.setState({
       value,
     });
   };
 
-  fetchData = value => {
-    fetch(value, data => {
+  fetchData = (value) => {
+    fetch(value, (data) => {
       this.setState({
         data,
       });
@@ -28,7 +28,7 @@ class Test extends React.Component {
 
   render() {
     const { data, value } = this.state;
-    const options = data.map(d => (
+    const options = data.map((d) => (
       <Option key={d.value}>
         <i>{d.text}</i>
       </Option>

diff --git a/docs/examples/mul-tag-suggest.tsx b/docs/examples/mul-tag-suggest.tsx
@@ -11,19 +11,19 @@ class Test extends React.Component {
     value: [],
   };
 
-  onChange = value => {
+  onChange = (value) => {
     console.log('onChange ', value);
     this.setState({
       value,
     });
   };
 
-  onSelect = value => {
+  onSelect = (value) => {
     console.log('select ', value);
   };
 
-  fetchData = value => {
-    fetch(value, data => {
+  fetchData = (value) => {
+    fetch(value, (data) => {
       this.setState({
         data,
       });
@@ -32,7 +32,7 @@ class Test extends React.Component {
 
   render() {
     const { value, data } = this.state;
-    const options = data.map(d => (
+    const options = data.map((d) => (
       <Option key={d.value}>
         <i>{d.text}</i>
       </Option>

diff --git a/docs/examples/multiple-readonly.tsx b/docs/examples/multiple-readonly.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import Select, { Option } from 'rc-select';
 import '../../assets/index.less';
 
-const children = [];
+const children: React.ReactNode[] = [];
+
 for (let i = 10; i < 36; i += 1) {
   // 11 => readonly selected item
   children.push(
@@ -13,40 +14,35 @@ for (let i = 10; i < 36; i += 1) {
   );
 }
 
-class Test extends React.Component {
-  state = {
-    value: ['b11'],
-  };
+const Test: React.FC = () => {
+  const [value, setValue] = React.useState<string[]>(['b11']);
 
-  onChange = value => {
-    console.log('onChange', value);
-    this.setState({ value });
+  const onChange = (v: any) => {
+    console.log('onChange', v);
+    setValue(v);
   };
 
-  render() {
-    const { value } = this.state;
-    return (
-      <div>
-        <h2>multiple readonly default selected item</h2>
-        <div style={{ width: 300 }}>
-          <Select
-            mode="multiple"
-            value={value}
-            animation="slide-up"
-            choiceTransitionName="rc-select-selection__choice-zoom"
-            style={{ width: 500 }}
-            optionFilterProp="children"
-            optionLabelProp="children"
-            placeholder="please select"
-            onChange={this.onChange}
-          >
-            {children}
-          </Select>
-        </div>
+  return (
+    <div>
+      <h2>multiple readonly default selected item</h2>
+      <div style={{ width: 300 }}>
+        <Select
+          mode="multiple"
+          value={value}
+          animation="slide-up"
+          choiceTransitionName="rc-select-selection__choice-zoom"
+          style={{ width: 500 }}
+          optionFilterProp="children"
+          optionLabelProp="children"
+          placeholder="please select"
+          onChange={onChange}
+        >
+          {children}
+        </Select>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Test;
 /* eslint-enable */
diff --git a/docs/examples/multiple-with-maxCount.tsx b/docs/examples/multiple-with-maxCount.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+import React from 'react';
+import Select from 'rc-select';
+import '../../assets/index.less';
+
+const Test: React.FC = () => {
+  const [value, setValue] = React.useState<string[]>(['1']);
+
+  const onChange = (v: any) => {
+    setValue(v);
+  };
+
+  return (
+    <>
+      <h2>Multiple with maxCount</h2>
+      <Select
+        maxCount={4}
+        mode="multiple"
+        value={value}
+        animation="slide-up"
+        choiceTransitionName="rc-select-selection__choice-zoom"
+        style={{ width: 500 }}
+        optionFilterProp="children"
+        optionLabelProp="children"
+        placeholder="please select"
+        onChange={onChange}
+        options={Array.from({ length: 20 }, (_, i) => ({
+          label: <span>中文{i}</span>,
+          value: i.toString(),
+        }))}
+      />
+    </>
+  );
+};
+
+export default Test;
diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import Select, { Option } from 'rc-select';
 import '../../assets/index.less';
 
-const children = [];
+const children: React.ReactNode[] = [];
+
 for (let i = 10; i < 36; i += 1) {
   children.push(
     <Option key={i.toString(36) + i} disabled={i === 10} title={`中文${i}`}>
@@ -18,7 +19,7 @@ class Test extends React.Component {
     suffixIcon: null,
     loading: false,
     value: ['a10'],
-    searchValue: "",
+    searchValue: '',
   };
 
   onChange = (value, options) => {
@@ -36,29 +37,29 @@ class Test extends React.Component {
     console.log(args);
   };
 
-  useAnim = e => {
+  useAnim = (e) => {
     this.setState({
       useAnim: e.target.checked,
     });
   };
 
-  showArrow = e => {
+  showArrow = (e) => {
     this.setState({
       suffixIcon: e.target.checked ? <div>arrow</div> : null,
     });
   };
 
-  loading = e => {
+  loading = (e) => {
     this.setState({
       loading: e.target.checked,
     });
   };
 
-  setSearchValue = val => {
+  setSearchValue = (val) => {
     this.setState({
       searchValue: val,
-    })
-  }
+    });
+  };
 
   render() {
     const { useAnim, loading, value, suffixIcon } = this.state;
@@ -74,7 +75,12 @@ class Test extends React.Component {
           <p />
           <label htmlFor="showArrow">
             showArrow
-            <input id="showArrow" checked={!!suffixIcon} type="checkbox" onChange={this.showArrow} />
+            <input
+              id="showArrow"
+              checked={!!suffixIcon}
+              type="checkbox"
+              onChange={this.showArrow}
+            />
           </label>
         </p>
         <p>
@@ -102,33 +108,32 @@ class Test extends React.Component {
             placeholder="please select"
             onChange={this.onChange}
             onFocus={() => console.log('focus')}
-            onBlur={v => console.log('blur', v)}
+            onBlur={(v) => console.log('blur', v)}
             tokenSeparators={[' ', ',']}
           >
             {children}
           </Select>
         </div>
 
-
         <h2>multiple select with autoClearSearchValue = false</h2>
         <div style={{ width: 300 }}>
           <Select
-              value={value}
-              style={{ width: 500 }}
-              mode="multiple"
-              autoClearSearchValue={false}
-              showSearch={true}
-              searchValue={this.state.searchValue}
-              onSearch={this.setSearchValue}
-              optionFilterProp="children"
-              optionLabelProp="children"
-              onSelect={this.onSelect}
-              onDeselect={this.onDeselect}
-              placeholder="please select"
-              onChange={this.onChange}
-              onFocus={() => console.log('focus')}
-              onBlur={v => console.log('blur', v)}
-              tokenSeparators={[' ', ',']}
+            value={value}
+            style={{ width: 500 }}
+            mode="multiple"
+            autoClearSearchValue={false}
+            showSearch={true}
+            searchValue={this.state.searchValue}
+            onSearch={this.setSearchValue}
+            optionFilterProp="children"
+            optionLabelProp="children"
+            onSelect={this.onSelect}
+            onDeselect={this.onDeselect}
+            placeholder="please select"
+            onChange={this.onChange}
+            onFocus={() => console.log('focus')}
+            onBlur={(v) => console.log('blur', v)}
+            tokenSeparators={[' ', ',']}
           >
             {children}
           </Select>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "14.10.0",
+  "version": "14.11.0-0",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"

diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx
@@ -209,7 +209,7 @@ export function isMultiple(mode: Mode) {
   return mode === 'tags' || mode === 'multiple';
 }
 
-const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {
+const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref) => {
   const {
     id,
     prefixCls,
@@ -807,14 +807,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
       >
         {mockFocused && !mergedOpen && (
           <span
-            style={{
-              width: 0,
-              height: 0,
-              position: 'absolute',
-              overflow: 'hidden',
-              opacity: 0,
-            }}
             aria-live="polite"
+            style={{ width: 0, height: 0, position: 'absolute', overflow: 'hidden', opacity: 0 }}
           >
             {/* Merge into one string to make screen reader work as expect */}
             {`${displayValues