feat: retire deprecated api

docs/examples/custom-icon.tsx

@@ -98,7 +98,7 @@ class CustomIconComponent extends React.Component {
             onSelect={this.onSelect}
             onInputKeyDown={this.onKeyDown}
             notFoundContent=""
-            allowClear
+            allowClear={{ clearIcon: getSvg(clearPath) }}
             placeholder="please select"
             value={value}
             mode="combobox"
@@ -110,7 +110,6 @@ class CustomIconComponent extends React.Component {
               }
               return getSvg(arrowPath);
             }}
-            clearIcon={getSvg(clearPath)}
             removeIcon={getSvg(clearPath)}
             menuItemSelectedIcon={singleItemIcon}
           >
@@ -185,7 +184,7 @@ class Test extends React.Component {
             choiceTransitionName="rc-select-selection__choice-zoom"
             style={{ width: 500 }}
             mode="multiple"
-            allowClear
+            allowClear={{ clearIcon: getSvg(clearPath) }}
             optionFilterProp="children"
             optionLabelProp="children"
             onSelect={this.onSelect}
@@ -196,7 +195,6 @@ class Test extends React.Component {
             tokenSeparators={[' ', ',']}
             prefix="Foobar"
             suffixIcon={getSvg(arrowPath)}
-            clearIcon={getSvg(clearPath)}
             removeIcon={getSvg(clearPath)}
             menuItemSelectedIcon={menuItemSelectedIcon}
           >

src/Select.tsx

@@ -70,8 +70,6 @@ export type RawValueType = string | number;
 export interface LabelInValueType {
   label: React.ReactNode;
   value: RawValueType;
-  /** @deprecated `key` is useless since it should always same as `value` */
-  key?: React.Key;
 }
 
 export type DraftValueType =
@@ -119,9 +117,6 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   // >>> Field Names
   fieldNames?: FieldNames;
 
-  // >>> Search
-  /** @deprecated Use `searchValue` instead */
-  inputValue?: string;
   searchValue?: string;
   onSearch?: (value: string) => void;
   autoClearSearchValue?: boolean;
@@ -178,7 +173,6 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       fieldNames,
 
       // Search
-      inputValue,
       searchValue,
       onSearch,
       autoClearSearchValue = true,
@@ -239,7 +233,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
 
     // =========================== Search ===========================
     const [mergedSearchValue, setSearchValue] = useMergedState('', {
-      value: searchValue !== undefined ? searchValue : inputValue,
+      value: searchValue,
       postState: (search) => search || '',
     });
 
@@ -263,25 +257,22 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         return valueList.map((val) => {
           let rawValue: RawValueType;
           let rawLabel: React.ReactNode;
-          let rawKey: React.Key;
           let rawDisabled: boolean | undefined;
           let rawTitle: string;
 
           // Fill label & value
           if (isRawValue(val)) {
             rawValue = val;
           } else {
-            rawKey = val.key;
             rawLabel = val.label;
-            rawValue = val.value ?? (rawKey as RawValueType);
+            rawValue = val.value;
           }
 
           const option = valueOptions.get(rawValue);
           if (option) {
             // Fill missing props
             if (rawLabel === undefined)
               rawLabel = option?.[optionLabelProp || mergedFieldNames.label];
-            if (rawKey === undefined) rawKey = option?.key ?? rawValue;
             rawDisabled = option?.disabled;
             rawTitle = option?.title;
 
@@ -302,7 +293,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
           return {
             label: rawLabel,
             value: rawValue,
-            key: rawKey,
+            key: rawValue,
             disabled: rawDisabled,
             title: rawTitle,
           };
@@ -473,7 +464,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         (labeledValues.length !== mergedValues.length ||
           labeledValues.some((newVal, index) => mergedValues[index]?.value !== newVal?.value))
       ) {
-        const returnValues = labelInValue ? labeledValues : labeledValues.map((v) => v.value);
+        const returnValues = labelInValue
+          ? labeledValues.map(({ label: l, value: v }) => ({ label: l, value: v }))
+          : labeledValues.map((v) => v.value);
+
         const returnOptions = labeledValues.map((v) =>
           injectPropsWithOption(getMixedOption(v.value)),
         );
@@ -513,7 +507,6 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
             ? {
                 label: option?.[mergedFieldNames.label],
                 value: val,
-                key: option?.key ?? val,
               }
             : val,
           injectPropsWithOption(option),
@@ -547,7 +540,6 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
 
       // Clean search value if single or configured
       if (mode === 'combobox') {
-        // setSearchValue(String(val));
         setActiveValue('');
       } else if (!isMultiple || autoClearSearchValue) {
         setSearchValue('');

src/utils/warningPropsUtil.ts

@@ -28,7 +28,6 @@ function warningProps(props: SelectProps) {
     autoFocus,
     labelInValue,
     value,
-    inputValue,
     optionLabelProp,
   } = props;
 
@@ -149,11 +148,6 @@ function warningProps(props: SelectProps) {
         }\`.`,
       );
     }
-
-    warning(
-      inputValue === undefined,
-      '`inputValue` is deprecated, please use `searchValue` instead.',
-    );
   }
 }
 

tests/Multiple.test.tsx

@@ -375,10 +375,12 @@ describe('Select.Multiple', () => {
   });
 
   it('show static prefix', () => {
-    render(<Select mode="multiple" value={['']} prefix="Foobar">
-      <Option value={1}>1</Option>
-      <Option value={2}>2</Option>
-    </Select>);
+    render(
+      <Select mode="multiple" value={['']} prefix="Foobar">
+        <Option value={1}>1</Option>
+        <Option value={2}>2</Option>
+      </Select>,
+    );
 
     expect(screen.findByText('Foobar')).toBeTruthy();
   });
@@ -459,7 +461,7 @@ describe('Select.Multiple', () => {
     toggleOpen(container);
     selectItem(container, 0);
     expect(onChange).toHaveBeenCalledWith(
-      [{ label: 'Light', value: 'light', key: 'light' }],
+      [{ label: 'Light', value: 'light' }],
       [{ label: 'Light', value: 'light', option: 2333 }],
     );
     onChange.mockReset();
@@ -470,8 +472,8 @@ describe('Select.Multiple', () => {
     selectItem(container, 0);
     expect(onChange).toHaveBeenCalledWith(
       [
-        { label: 'Light', value: 'light', key: 'light' },
-        { label: 'Bamboo', value: 'bamboo', key: 'bamboo' },
+        { label: 'Light', value: 'light' },
+        { label: 'Bamboo', value: 'bamboo' },
       ],
       [
         { label: 'Light', value: 'light', option: 2333 },

tests/Select.test.tsx

@@ -289,7 +289,7 @@ describe('Select.Basic', () => {
 
     resetWarned();
     const { container: container5 } = render(
-      <Select allowClear clearIcon={<div className="custom-clear-icon">x</div>} value="1">
+      <Select allowClear={{ clearIcon: <div className="custom-clear-icon">x</div> }} value="1">
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -298,7 +298,7 @@ describe('Select.Basic', () => {
     expect(container5.querySelector('.custom-clear-icon').textContent).toBe('x');
 
     const { container: container6 } = render(
-      <Select allowClear clearIcon={<div className="custom-clear-icon">x</div>}>
+      <Select allowClear={{ clearIcon: <div className="custom-clear-icon">x</div> }}>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -487,7 +487,7 @@ describe('Select.Basic', () => {
     toggleOpen(container);
     selectItem(container);
     expect(handleChange).toHaveBeenCalledWith(
-      { key: '1', value: '1', label: 'One' },
+      { value: '1', label: 'One' },
       { children: 'One', key: null, testprop: 'test', value: '1' },
     );
   });
@@ -508,7 +508,7 @@ describe('Select.Basic', () => {
     toggleOpen(container);
     selectItem(container);
     expect(handleChange).toHaveBeenCalledWith(
-      { key: '1', label: 'One', value: '1' },
+      { label: 'One', value: '1' },
       { children: 'One', key: null, testprop: 'test', value: '1' },
     );
   });
@@ -1240,7 +1240,7 @@ describe('Select.Basic', () => {
 
   it('does not filter when filterOption value is false', () => {
     const { container } = testingRender(
-      <Select inputValue="1" filterOption={false} open>
+      <Select searchValue="1" filterOption={false} open>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
@@ -2330,7 +2330,7 @@ describe('Select.Basic', () => {
     const renderDemo = (props?: any) => (
       <Select
         labelInValue
-        value={{ key: 1, label: 'One' }}
+        value={{ value: 1, label: 'One' }}
         labelRender={labelRender}
         options={[
           {

tests/shared/removeSelectedTest.tsx

@@ -50,7 +50,7 @@ export default function removeSelectedTest(mode: any) {
       const handleChange = jest.fn();
       const { container } = render(
         <Select
-          value={[{ key: '1' }, { key: '2' }]}
+          value={[{ value: '1' }, { value: '2' }]}
           onChange={handleChange}
           onDeselect={handleDeselect}
           labelInValue
@@ -63,12 +63,12 @@ export default function removeSelectedTest(mode: any) {
       removeSelection(container);
 
       expect(handleDeselect).toHaveBeenCalledWith(
-        expect.objectContaining({ key: '1', label: '1' }),
+        expect.objectContaining({ value: '1', label: '1' }),
         expect.objectContaining({ value: '1' }),
       );
 
       expect(handleChange).toHaveBeenCalledWith(
-        [expect.objectContaining({ key: '2', label: '2' })],
+        [expect.objectContaining({ value: '2', label: '2' })],
         [expect.objectContaining({ value: '2' })],
       );
     });