From d027f286e368427019d613a2078d047c9a75e89f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 11 Jan 2022 17:59:38 +0800
Subject: [PATCH] refactor: select

---
 components/select/demo/label-in-value.vue     |    9 +-
 components/select/demo/option-label-prop.vue  |   29 +-
 components/select/demo/size.vue               |    5 +-
 components/select/index.en-US.md              |    1 +
 components/select/index.tsx                   |   68 +-
 components/select/index.zh-CN.md              |    1 +
 components/select/style/index.less            |   10 +-
 components/select/style/multiple.less         |    5 +-
 components/select/style/single.less           |    8 +-
 components/vc-select copy/Select.tsx          |  162 ---
 components/vc-select copy/generate.tsx        | 1246 -----------------
 .../vc-select copy/interface1/generator.ts    |   73 -
 components/vc-select copy/interface1/index.ts |   62 -
 .../BaseSelect.tsx                            |   27 +-
 .../OptGroup.tsx                              |    0
 .../{vc-select copy => vc-select2}/Option.tsx |    0
 .../OptionList.tsx                            |   20 +-
 components/vc-select2/Select.tsx              |  642 +++++++++
 .../SelectContext.ts                          |    0
 .../SelectTrigger.tsx                         |    0
 .../Selector/Input.tsx                        |    0
 .../Selector/MultipleSelector.tsx             |    8 +-
 .../Selector/SingleSelector.tsx               |    0
 .../Selector/index.tsx                        |    0
 .../Selector/interface.ts                     |    0
 .../TransBtn.tsx                              |    0
 .../hooks/useBaseProps.ts                     |    0
 .../hooks/useCache.ts                         |    0
 .../hooks/useDelayReset.ts                    |    0
 .../hooks/useFilterOptions.ts                 |    0
 .../hooks/useId.ts                            |    0
 .../hooks/useLock.ts                          |    0
 .../hooks/useOptions.ts                       |   35 +-
 .../hooks/useSelectTriggerControl.ts          |    0
 .../{vc-select copy => vc-select2}/index.ts   |    0
 .../interface.ts                              |    0
 .../utils/commonUtil.ts                       |    0
 .../utils/keyUtil.ts                          |    0
 .../utils/legacyUtil.ts                       |    2 +-
 .../utils/platformUtil.ts                     |    0
 .../utils/valueUtil.ts                        |    0
 .../utils/warningPropsUtil.ts                 |    0
 42 files changed, 786 insertions(+), 1627 deletions(-)
 delete mode 100644 components/vc-select copy/Select.tsx
 delete mode 100644 components/vc-select copy/generate.tsx
 delete mode 100644 components/vc-select copy/interface1/generator.ts
 delete mode 100644 components/vc-select copy/interface1/index.ts
 rename components/{vc-select copy => vc-select2}/BaseSelect.tsx (98%)
 rename components/{vc-select copy => vc-select2}/OptGroup.tsx (100%)
 rename components/{vc-select copy => vc-select2}/Option.tsx (100%)
 rename components/{vc-select copy => vc-select2}/OptionList.tsx (94%)
 create mode 100644 components/vc-select2/Select.tsx
 rename components/{vc-select copy => vc-select2}/SelectContext.ts (100%)
 rename components/{vc-select copy => vc-select2}/SelectTrigger.tsx (100%)
 rename components/{vc-select copy => vc-select2}/Selector/Input.tsx (100%)
 rename components/{vc-select copy => vc-select2}/Selector/MultipleSelector.tsx (97%)
 rename components/{vc-select copy => vc-select2}/Selector/SingleSelector.tsx (100%)
 rename components/{vc-select copy => vc-select2}/Selector/index.tsx (100%)
 rename components/{vc-select copy => vc-select2}/Selector/interface.ts (100%)
 rename components/{vc-select copy => vc-select2}/TransBtn.tsx (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useBaseProps.ts (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useCache.ts (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useDelayReset.ts (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useFilterOptions.ts (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useId.ts (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useLock.ts (100%)
 rename components/{vc-select copy => vc-select2}/hooks/useOptions.ts (52%)
 rename components/{vc-select copy => vc-select2}/hooks/useSelectTriggerControl.ts (100%)
 rename components/{vc-select copy => vc-select2}/index.ts (100%)
 rename components/{vc-select copy => vc-select2}/interface.ts (100%)
 rename components/{vc-select copy => vc-select2}/utils/commonUtil.ts (100%)
 rename components/{vc-select copy => vc-select2}/utils/keyUtil.ts (100%)
 rename components/{vc-select copy => vc-select2}/utils/legacyUtil.ts (98%)
 rename components/{vc-select copy => vc-select2}/utils/platformUtil.ts (100%)
 rename components/{vc-select copy => vc-select2}/utils/valueUtil.ts (100%)
 rename components/{vc-select copy => vc-select2}/utils/warningPropsUtil.ts (100%)

diff --git a/components/select/demo/label-in-value.vue b/components/select/demo/label-in-value.vue
index 3bf2dff80..d28ec2312 100644
--- a/components/select/demo/label-in-value.vue
+++ b/components/select/demo/label-in-value.vue
@@ -31,11 +31,6 @@ The label of the selected item will be packed as an object for passing to the on
 import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
-interface Value {
-  value?: string;
-  label?: string;
-}
-
 export default defineComponent({
   setup() {
     const options = ref<SelectProps['options']>([
@@ -48,11 +43,11 @@ export default defineComponent({
         label: 'Lucy (101)',
       },
     ]);
-    const handleChange = (value: Value) => {
+    const handleChange: SelectProps['onChange'] = value => {
       console.log(value); // { key: "lucy", label: "Lucy (101)" }
     };
     return {
-      value: ref<Value>({ value: 'lucy' }),
+      value: ref({ value: 'lucy' }),
       options,
       handleChange,
     };
diff --git a/components/select/demo/option-label-prop.vue b/components/select/demo/option-label-prop.vue
index b9813ebcf..5647a4db0 100644
--- a/components/select/demo/option-label-prop.vue
+++ b/components/select/demo/option-label-prop.vue
@@ -10,10 +10,13 @@ title:
 
 使用 `optionLabelProp` 指定回填到选择框的 `Option` 属性。
 
+或者使用 `tagRender` 插槽自定义渲染节点
+
 ## en-US
 
 Spacified the prop name of Option which will be rendered in select box.
 
+or use `tagRender` slot for custom rendering of tags.
 </docs>
 
 <template>
@@ -23,7 +26,7 @@ Spacified the prop name of Option which will be rendered in select box.
       mode="multiple"
       style="width: 100%"
       placeholder="select one country"
-      option-label-prop="label"
+      option-label-prop="children"
     >
       <a-select-option value="china" label="China">
         <span role="img" aria-label="China">🇨🇳</span>
@@ -58,6 +61,29 @@ Spacified the prop name of Option which will be rendered in select box.
     </a-select>
     <span>Note: v-slot:option support from v2.2.5</span>
   </a-space>
+  <br />
+  <br />
+  <a-space direction="vertical" style="width: 100%">
+    <a-select
+      v-model:value="value"
+      mode="multiple"
+      style="width: 100%"
+      placeholder="select one country"
+      :options="options"
+    >
+      <template #option="{ value: val, label, icon }">
+        <span role="img" :aria-label="val">{{ icon }}</span>
+        &nbsp;&nbsp;{{ label }}
+      </template>
+      <template #tagRender="{ value: val, label, closable, onClose, option }">
+        <a-tag :closable="closable" style="margin-right: 3px" @close="onClose">
+          {{ label }}&nbsp;&nbsp;
+          <span role="img" :aria-label="val">{{ option.icon }}</span>
+        </a-tag>
+      </template>
+    </a-select>
+    <span>Note: v-slot:tagRender support from v3.0</span>
+  </a-space>
 </template>
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
@@ -91,7 +117,6 @@ export default defineComponent({
     watch(value, val => {
       console.log(`selected:`, val);
     });
-
     return {
       options,
       value,
diff --git a/components/select/demo/size.vue b/components/select/demo/size.vue
index f7edcad5a..27a9863df 100644
--- a/components/select/demo/size.vue
+++ b/components/select/demo/size.vue
@@ -19,7 +19,7 @@ The height of the input field for the select defaults to 32px. If size is set to
 <template>
   <a-radio-group v-model:value="size">
     <a-radio-button value="large">Large</a-radio-button>
-    <a-radio-button value="default">Default</a-radio-button>
+    <a-radio-button value="middle">Middle</a-radio-button>
     <a-radio-button value="small">Small</a-radio-button>
   </a-radio-group>
   <br />
@@ -51,6 +51,7 @@ The height of the input field for the select defaults to 32px. If size is set to
   </a-space>
 </template>
 <script lang="ts">
+import type { SizeType } from 'ant-design-vue/es/config-provider';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
@@ -60,7 +61,7 @@ export default defineComponent({
 
     return {
       popupScroll,
-      size: ref('default'),
+      size: ref<SizeType>('middle'),
       value1: ref('a1'),
       value2: ref(['a1', 'b2']),
       value3: ref(['a1', 'b2']),
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index aeba5afa2..bb90d124e 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -55,6 +55,7 @@ Select component to select value from options.
 | clearIcon | The custom clear icon | VNode \| slot | - |  |
 | menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - |  |
 | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] |  |  |
+| tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | slot \| (props) => any | - |  |
 | value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |  |
 | options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array&lt;{value, label, [disabled, key, title]}> | \[] |  |
 | option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 836bbb539..78c16460f 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -1,26 +1,28 @@
 import type { App, PropType, Plugin, ExtractPropTypes } from 'vue';
 import { computed, defineComponent, ref } from 'vue';
 import classNames from '../_util/classNames';
-import RcSelect, { selectProps as vcSelectProps, Option, OptGroup } from '../vc-select';
-import type { OptionProps as OptionPropsType } from '../vc-select/Option';
+import type { BaseSelectRef } from '../vc-select2';
+import RcSelect, { selectProps as vcSelectProps, Option, OptGroup } from '../vc-select2';
+import type { BaseOptionType, DefaultOptionType } from '../vc-select2/Select';
+import type { OptionProps } from '../vc-select2/Option';
 import getIcons from './utils/iconUtil';
 import PropTypes from '../_util/vue-types';
-import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import omit from '../_util/omit';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import { getTransitionName } from '../_util/transition';
+import type { SizeType } from '../config-provider';
+import { initDefaultProps } from '../_util/props-util';
 
 type RawValue = string | number;
 
-export type OptionProps = OptionPropsType;
-
 export type OptionType = typeof Option;
+export type { OptionProps, BaseSelectRef as RefSelectProps, BaseOptionType, DefaultOptionType };
 
 export interface LabeledValue {
   key?: string;
   value: RawValue;
-  label: any;
+  label?: any;
 }
 export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
 
@@ -35,23 +37,28 @@ export const selectProps = () => ({
   notFoundContent: PropTypes.any,
   suffixIcon: PropTypes.any,
   itemIcon: PropTypes.any,
-  size: PropTypes.oneOf(tuple('small', 'middle', 'large', 'default')),
-  mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')),
-  bordered: PropTypes.looseBool.def(true),
-  transitionName: PropTypes.string,
-  choiceTransitionName: PropTypes.string.def(''),
+  size: String as PropType<SizeType>,
+  mode: String as PropType<'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE'>,
+  bordered: { type: Boolean, default: true },
+  transitionName: String,
+  choiceTransitionName: { type: String, default: '' },
+  'onUpdate:value': Function as PropType<(val: SelectValue) => void>,
 });
 
 export type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps>>>;
 
+const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 const Select = defineComponent({
   name: 'ASelect',
   Option,
   OptGroup,
   inheritAttrs: false,
-  props: selectProps(),
-  SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
-  emits: ['change', 'update:value', 'blur'],
+  props: initDefaultProps(selectProps(), {
+    listHeight: 256,
+    listItemHeight: 24,
+  }),
+  SECRET_COMBOBOX_MODE_DO_NOT_USE,
+  // emits: ['change', 'update:value', 'blur'],
   slots: [
     'notFoundContent',
     'suffixIcon',
@@ -61,20 +68,21 @@ const Select = defineComponent({
     'dropdownRender',
     'option',
     'placeholder',
+    'tagRender',
   ],
   setup(props, { attrs, emit, slots, expose }) {
-    const selectRef = ref();
+    const selectRef = ref<BaseSelectRef>();
     const formItemContext = useInjectFormItemContext();
     const focus = () => {
-      if (selectRef.value) {
-        selectRef.value.focus();
-      }
+      selectRef.value?.focus();
     };
 
     const blur = () => {
-      if (selectRef.value) {
-        selectRef.value.blur();
-      }
+      selectRef.value?.blur();
+    };
+
+    const scrollTo: BaseSelectRef['scrollTo'] = arg => {
+      selectRef.value?.scrollTo(arg);
     };
 
     const mode = computed(() => {
@@ -84,7 +92,7 @@ const Select = defineComponent({
         return undefined;
       }
 
-      if (mode === Select.SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+      if (mode === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
         return 'combobox';
       }
 
@@ -103,19 +111,21 @@ const Select = defineComponent({
         [`${prefixCls.value}-borderless`]: !props.bordered,
       }),
     );
-    const triggerChange = (...args: any[]) => {
+    const triggerChange: SelectProps['onChange'] = (...args) => {
       emit('update:value', args[0]);
       emit('change', ...args);
       formItemContext.onFieldChange();
     };
-    const handleBlur = (e: InputEvent) => {
+    const handleBlur: SelectProps['onBlur'] = e => {
       emit('blur', e);
       formItemContext.onFieldBlur();
     };
     expose({
       blur,
       focus,
+      scrollTo,
     });
+    const isMultiple = computed(() => mode.value === 'multiple' || mode.value === 'tags');
     return () => {
       const {
         notFoundContent,
@@ -131,8 +141,6 @@ const Select = defineComponent({
 
       const { renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider;
 
-      const isMultiple = mode.value === 'multiple' || mode.value === 'tags';
-
       // ===================== Empty =====================
       let mergedNotFound: any;
       if (notFoundContent !== undefined) {
@@ -149,7 +157,7 @@ const Select = defineComponent({
       const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons(
         {
           ...props,
-          multiple: isMultiple,
+          multiple: isMultiple.value,
           prefixCls: prefixCls.value,
         },
         slots,
@@ -195,9 +203,9 @@ const Select = defineComponent({
           dropdownRender={selectProps.dropdownRender || slots.dropdownRender}
           v-slots={{ option: slots.option }}
           transitionName={transitionName.value}
-        >
-          {slots.default?.()}
-        </RcSelect>
+          children={slots.default?.()}
+          tagRender={props.tagRender || slots.tagRender}
+        ></RcSelect>
       );
     };
   },
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 5ca9497c0..53bc018c6 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -56,6 +56,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | clearIcon | 自定义的多选框清空图标 | VNode \| slot | - |  |
 | menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - |  |
 | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] |  |  |
+| tagRender | 自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | slot \| (props) => any | - | 3.0 |
 | value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |  |
 | options | options 数据，如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] |  |
 | option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
diff --git a/components/select/style/index.less b/components/select/style/index.less
index d2ae04a76..c4007cdef 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -1,7 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
-
 @import './single';
 @import './multiple';
 
@@ -59,6 +58,7 @@
 
     &::-webkit-search-cancel-button {
       display: none;
+      /* stylelint-disable-next-line property-no-vendor-prefix */
       -webkit-appearance: none;
     }
   }
@@ -83,6 +83,7 @@
   &-selection-item {
     flex: 1;
     overflow: hidden;
+    font-weight: normal;
     white-space: nowrap;
     text-overflow: ellipsis;
 
@@ -117,7 +118,7 @@
   &-arrow {
     .iconfont-mixin();
     position: absolute;
-    top: 53%;
+    top: 50%;
     right: @control-padding-horizontal - 1px;
     width: @font-size-sm;
     height: @font-size-sm;
@@ -167,9 +168,11 @@
     opacity: 0;
     transition: color 0.3s ease, opacity 0.15s ease;
     text-rendering: auto;
+
     &::before {
       display: block;
     }
+
     &:hover {
       color: @text-color-secondary;
     }
@@ -286,6 +289,9 @@
       }
 
       &-disabled {
+        &.@{select-prefix-cls}-item-option-selected {
+          background-color: @select-multiple-disabled-background;
+        }
         color: @disabled-color;
         cursor: not-allowed;
       }
diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less
index 737c30b7d..65bdc4ae0 100644
--- a/components/select/style/multiple.less
+++ b/components/select/style/multiple.less
@@ -1,4 +1,5 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+@select-prefix-cls: ~'@{ant-prefix}-select';
 
 @select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
 @select-multiple-item-border-width: 1px;
@@ -128,8 +129,6 @@
     .@{select-prefix-cls}-selection-search {
       position: relative;
       max-width: 100%;
-      margin-top: @select-multiple-item-spacing-half;
-      margin-bottom: @select-multiple-item-spacing-half;
       margin-inline-start: @input-padding-horizontal-base - @input-padding-vertical-base;
 
       &-input,
diff --git a/components/select/style/single.less b/components/select/style/single.less
index e70052a15..500dd7298 100644
--- a/components/select/style/single.less
+++ b/components/select/style/single.less
@@ -1,4 +1,5 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+@select-prefix-cls: ~'@{ant-prefix}-select';
 
 @selection-item-padding: ceil(@font-size-base * 1.25);
 
@@ -39,14 +40,15 @@
     }
 
     .@{select-prefix-cls}-selection-placeholder {
+      transition: none;
       pointer-events: none;
     }
 
     // For common baseline align
     &::after,
-    // For '' value baseline align
+    /* For '' value baseline align */
     .@{select-prefix-cls}-selection-item::after,
-    // For undefined value baseline align
+    /* For undefined value baseline align */
     .@{select-prefix-cls}-selection-placeholder::after {
       display: inline-block;
       width: 0;
diff --git a/components/vc-select copy/Select.tsx b/components/vc-select copy/Select.tsx
deleted file mode 100644
index 5b713010a..000000000
--- a/components/vc-select copy/Select.tsx	
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * To match accessibility requirement, we always provide an input in the component.
- * Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
- * For focused select, we set `aria-live="polite"` to update the accessibility content.
- *
- * ref:
- * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
- *
- * New api:
- * - listHeight
- * - listItemHeight
- * - component
- *
- * Remove deprecated api:
- * - multiple
- * - tags
- * - combobox
- * - firstActiveValue
- * - dropdownMenuStyle
- * - openClassName (Not list in api)
- *
- * Update:
- * - `backfill` only support `combobox` mode
- * - `combobox` mode not support `labelInValue` since it's meaningless
- * - `getInputElement` only support `combobox` mode
- * - `onChange` return OptionData instead of ReactNode
- * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
- * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
- * - `combobox` mode not support `optionLabelProp`
- */
-
-import BaseSelect, { baseSelectPropsWithoutPrivate, isMultiple } from './BaseSelect';
-import type {
-  DisplayValueType,
-  RenderNode,
-  BaseSelectRef,
-  BaseSelectPropsWithoutPrivate,
-  BaseSelectProps,
-} from './BaseSelect';
-import OptionList from './OptionList';
-import Option from './Option';
-import OptGroup from './OptGroup';
-import useOptions from './hooks/useOptions';
-import SelectContext from './SelectContext';
-import useId from './hooks/useId';
-import useRefFunc from './hooks/useRefFunc';
-import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
-import warningProps from './utils/warningPropsUtil';
-import { toArray } from './utils/commonUtil';
-import useFilterOptions from './hooks/useFilterOptions';
-import useCache from './hooks/useCache';
-import type { Key } from '../_util/type';
-import { defineComponent } from 'vue';
-import type { ExtractPropTypes, PropType } from 'vue';
-import PropTypes from '../_util/vue-types';
-
-const OMIT_DOM_PROPS = ['inputValue'];
-
-export type OnActiveValue = (
-  active: RawValueType,
-  index: number,
-  info?: { source?: 'keyboard' | 'mouse' },
-) => void;
-
-export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }) => void;
-
-export type RawValueType = string | number;
-export interface LabelInValueType {
-  label: any;
-  value: RawValueType;
-  /** @deprecated `key` is useless since it should always same as `value` */
-  key?: Key;
-}
-
-export type DraftValueType =
-  | RawValueType
-  | LabelInValueType
-  | DisplayValueType
-  | (RawValueType | LabelInValueType | DisplayValueType)[];
-
-export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
-
-export interface FieldNames {
-  value?: string;
-  label?: string;
-  options?: string;
-}
-
-export interface BaseOptionType {
-  disabled?: boolean;
-  [name: string]: any;
-}
-
-export interface DefaultOptionType extends BaseOptionType {
-  label: any;
-  value?: string | number | null;
-  children?: Omit<DefaultOptionType, 'children'>[];
-}
-
-export type SelectHandler<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> =
-  | ((value: RawValueType | LabelInValueType, option: OptionType) => void)
-  | ((value: ValueType, option: OptionType) => void);
-
-export function selectProps<
-  ValueType = any,
-  OptionType extends BaseOptionType = DefaultOptionType,
->() {
-  return {
-    ...baseSelectPropsWithoutPrivate(),
-    prefixCls: String,
-    id: String,
-
-    backfill: { type: Boolean, default: undefined },
-
-    // >>> Field Names
-    fieldNames: Object as PropType<FieldNames>,
-
-    // >>> Search
-    /** @deprecated Use `searchValue` instead */
-    inputValue: String,
-    searchValue: String,
-    onSearch: Function as PropType<(value: string) => void>,
-    autoClearSearchValue: { type: Boolean, default: undefined },
-
-    // >>> Select
-    onSelect: Function as PropType<SelectHandler<ValueType, OptionType>>,
-    onDeselect: Function as PropType<SelectHandler<ValueType, OptionType>>,
-
-    // >>> Options
-    /**
-     * In Select, `false` means do nothing.
-     * In TreeSelect, `false` will highlight match item.
-     * It's by design.
-     */
-    filterOption: {
-      type: [Boolean, Function] as PropType<boolean | FilterFunc<OptionType>>,
-      default: undefined,
-    },
-    filterSort: Function as PropType<(optionA: OptionType, optionB: OptionType) => number>,
-    optionFilterProp: String,
-    optionLabelProp: String,
-    children: PropTypes.any,
-    options: Array as PropType<OptionType[]>,
-    defaultActiveFirstOption: { type: Boolean, default: undefined },
-    virtual: { type: Boolean, default: undefined },
-    listHeight: Number,
-    listItemHeight: Number,
-
-    // >>> Icon
-    menuItemSelectedIcon: PropTypes.any,
-
-    mode: String as PropType<'combobox' | 'multiple' | 'tags'>,
-    labelInValue: { type: Boolean, default: undefined },
-    value: PropTypes.any,
-    defaultValue: PropTypes.any,
-    onChange: Function as PropType<(value: ValueType, option: OptionType | OptionType[]) => void>,
-  };
-}
-
-export type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps>>>;
-
-export default defineComponent({});
diff --git a/components/vc-select copy/generate.tsx b/components/vc-select copy/generate.tsx
deleted file mode 100644
index e29ad9ab9..000000000
--- a/components/vc-select copy/generate.tsx	
+++ /dev/null
@@ -1,1246 +0,0 @@
-/**
- * To match accessibility requirement, we always provide an input in the component.
- * Other element will not set `tabindex` to avoid `onBlur` sequence problem.
- * For focused select, we set `aria-live="polite"` to update the accessibility content.
- *
- * ref:
- * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
- */
-
-import KeyCode from '../_util/KeyCode';
-import classNames from '../_util/classNames';
-import Selector from './Selector';
-import SelectTrigger from './SelectTrigger';
-import type { Mode, RenderDOMFunc, OnActiveValue, FieldNames } from './interface';
-import type {
-  GetLabeledValue,
-  FilterOptions,
-  FilterFunc,
-  DefaultValueType,
-  RawValueType,
-  Key,
-  DisplayLabelValueType,
-  FlattenOptionsType,
-  SingleType,
-  OnClear,
-  SelectSource,
-  CustomTagProps,
-} from './interface/generator';
-import { INTERNAL_PROPS_MARK } from './interface/generator';
-import type { OptionListProps } from './OptionList';
-import { toInnerValue, toOuterValues, removeLastEnabledValue, getUUID } from './utils/commonUtil';
-import TransBtn from './TransBtn';
-import useLock from './hooks/useLock';
-import useDelayReset from './hooks/useDelayReset';
-import { getSeparatedContent } from './utils/valueUtil';
-import useSelectTriggerControl from './hooks/useSelectTriggerControl';
-import useCacheDisplayValue from './hooks/useCacheDisplayValue';
-import useCacheOptions from './hooks/useCacheOptions';
-import type { CSSProperties, PropType, VNode } from 'vue';
-import {
-  getCurrentInstance,
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  shallowRef,
-  watch,
-  watchEffect,
-} from 'vue';
-import createRef from '../_util/createRef';
-import PropTypes from '../_util/vue-types';
-import warning from '../_util/warning';
-import isMobile from '../vc-util/isMobile';
-import { getTextFromElement } from '../_util/props-util';
-import type { VueNode } from '../_util/type';
-
-const DEFAULT_OMIT_PROPS = [
-  'children',
-  'removeIcon',
-  'placeholder',
-  'autofocus',
-  'maxTagCount',
-  'maxTagTextLength',
-  'maxTagPlaceholder',
-  'choiceTransitionName',
-  'onInputKeyDown',
-  'tabindex',
-];
-
-export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
-
-export function selectBaseProps<OptionType, ValueType>() {
-  return {
-    prefixCls: String,
-    id: String,
-
-    // Options
-    options: { type: Array as PropType<OptionType[]> },
-    mode: { type: String as PropType<Mode> },
-
-    // Value
-    value: {
-      type: [String, Number, Object, Array] as PropType<ValueType>,
-      default: undefined as ValueType,
-    },
-    defaultValue: {
-      type: [String, Number, Object, Array] as PropType<ValueType>,
-      default: undefined as ValueType,
-    },
-    labelInValue: { type: Boolean, default: undefined },
-
-    fieldNames: { type: Object as PropType<FieldNames> },
-    // Search
-    inputValue: String,
-    searchValue: String,
-    optionFilterProp: String,
-    /**
-     * In Select, `false` means do nothing.
-     * In TreeSelect, `false` will highlight match item.
-     * It's by design.
-     */
-    filterOption: {
-      type: [Boolean, Function] as PropType<boolean | FilterFunc<OptionType>>,
-      default: undefined,
-    },
-    filterSort: {
-      type: Function as PropType<(optionA: OptionType, optionB: OptionType) => number>,
-    },
-    showSearch: { type: Boolean, default: undefined },
-    autoClearSearchValue: { type: Boolean, default: undefined },
-    onSearch: { type: Function as PropType<(value: string) => void> },
-    onClear: { type: Function as PropType<OnClear> },
-
-    // Icons
-    allowClear: { type: Boolean, default: undefined },
-    clearIcon: PropTypes.any,
-    showArrow: { type: Boolean, default: undefined },
-    inputIcon: PropTypes.any,
-    removeIcon: PropTypes.any,
-    menuItemSelectedIcon: PropTypes.any,
-
-    // Dropdown
-    open: { type: Boolean, default: undefined },
-    defaultOpen: { type: Boolean, default: undefined },
-    listHeight: Number,
-    listItemHeight: Number,
-    dropdownStyle: { type: Object as PropType<CSSProperties> },
-    dropdownClassName: String,
-    dropdownMatchSelectWidth: {
-      type: [Boolean, Number] as PropType<boolean | number>,
-      default: undefined,
-    },
-    placement: {
-      type: String as PropType<Placement>,
-    },
-    virtual: { type: Boolean, default: undefined },
-    dropdownRender: { type: Function as PropType<(menu: VNode) => any> },
-    dropdownAlign: PropTypes.any,
-    animation: String,
-    transitionName: String,
-    getPopupContainer: { type: Function as PropType<RenderDOMFunc> },
-    direction: { type: String as PropType<'ltr' | 'rtl'> },
-
-    // Others
-    disabled: { type: Boolean, default: undefined },
-    loading: { type: Boolean, default: undefined },
-    autofocus: { type: Boolean, default: undefined },
-    defaultActiveFirstOption: { type: Boolean, default: undefined },
-    notFoundContent: PropTypes.any,
-    placeholder: PropTypes.any,
-    backfill: { type: Boolean, default: undefined },
-    /** @private Internal usage. Do not use in your production. */
-    getInputElement: { type: Function as PropType<() => any> },
-    optionLabelProp: String,
-    maxTagTextLength: Number,
-    maxTagCount: { type: [String, Number] as PropType<number | 'responsive'> },
-    maxTagPlaceholder: PropTypes.any,
-    tokenSeparators: { type: Array as PropType<string[]> },
-    tagRender: { type: Function as PropType<(props: CustomTagProps) => any> },
-    showAction: { type: Array as PropType<('focus' | 'click')[]> },
-    tabindex: { type: [Number, String] },
-
-    // Events
-    onKeyup: { type: Function as PropType<(e: KeyboardEvent) => void> },
-    onKeydown: { type: Function as PropType<(e: KeyboardEvent) => void> },
-    onPopupScroll: { type: Function as PropType<(e: UIEvent) => void> },
-    onDropdownVisibleChange: { type: Function as PropType<(open: boolean) => void> },
-    onSelect: {
-      type: Function as PropType<(value: SingleType<ValueType>, option: OptionType) => void>,
-    },
-    onDeselect: {
-      type: Function as PropType<(value: SingleType<ValueType>, option: OptionType) => void>,
-    },
-    onInputKeyDown: { type: Function as PropType<(e: KeyboardEvent) => void> },
-    onClick: { type: Function as PropType<(e: MouseEvent) => void> },
-    onChange: {
-      type: Function as PropType<(value: ValueType, option: OptionType | OptionType[]) => void>,
-    },
-    onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
-    onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
-    onMousedown: { type: Function as PropType<(e: MouseEvent) => void> },
-    onMouseenter: { type: Function as PropType<(e: MouseEvent) => void> },
-    onMouseleave: { type: Function as PropType<(e: MouseEvent) => void> },
-
-    // Motion
-    choiceTransitionName: String,
-
-    // Internal props
-    /**
-     * Only used in current version for internal event process.
-     * Do not use in production environment.
-     */
-    internalProps: {
-      type: Object as PropType<{
-        mark?: string;
-        onClear?: OnClear;
-        skipTriggerChange?: boolean;
-        skipTriggerSelect?: boolean;
-        onRawSelect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
-        onRawDeselect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
-      }>,
-      default: undefined as {
-        mark?: string;
-        onClear?: OnClear;
-        skipTriggerChange?: boolean;
-        skipTriggerSelect?: boolean;
-        onRawSelect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
-        onRawDeselect?: (value: RawValueType, option: OptionType, source: SelectSource) => void;
-      },
-    },
-    children: { type: Array as PropType<any[]> },
-  };
-}
-
-class Helper<T1, T2> {
-  SelectBaseProps = selectBaseProps<T1, T2>();
-}
-type FuncReturnType<T1, T2> = Helper<T1, T2>['SelectBaseProps'];
-
-export type SelectProps<T1, T2> = FuncReturnType<T1, T2>;
-
-export interface GenerateConfig<OptionType extends object> {
-  prefixCls: string;
-  components: {
-    // TODO
-    optionList: (
-      props: Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] },
-    ) => JSX.Element;
-    // optionList: DefineComponent<
-    //   Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] }
-    // >;
-  };
-  /** Convert jsx tree into `OptionType[]` */
-  convertChildrenToData: (children: VueNode) => OptionType[];
-  /** Flatten nest options into raw option list */
-  flattenOptions: (options: OptionType[], props: any) => FlattenOptionsType<OptionType>;
-  /** Convert single raw value into { label, value } format. Will be called by each value */
-  getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionType>>;
-  filterOptions: FilterOptions<OptionType[]>;
-  findValueOption: // Need still support legacy ts api
-  | ((values: RawValueType[], options: FlattenOptionsType<OptionType>) => OptionType[])
-    // New API add prevValueOptions support
-    | ((
-        values: RawValueType[],
-        options: FlattenOptionsType<OptionType>,
-        info?: { prevValueOptions?: OptionType[][]; props?: any },
-      ) => OptionType[]);
-  /** Check if a value is disabled */
-  isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionType>) => boolean;
-  warningProps?: (props: any) => void;
-  fillOptionsWithMissingValue?: (
-    options: OptionType[],
-    value: DefaultValueType,
-    optionLabelProp: string,
-    labelInValue: boolean,
-  ) => OptionType[];
-  omitDOMProps?: (props: object) => object;
-}
-
-type ValueType = DefaultValueType;
-/**
- * This function is in internal usage.
- * Do not use it in your prod env since we may refactor this.
- */
-export default function generateSelector<
-  OptionType extends {
-    value?: RawValueType;
-    label?: any;
-    key?: Key;
-    disabled?: boolean;
-  },
->(config: GenerateConfig<OptionType>) {
-  const {
-    prefixCls: defaultPrefixCls,
-    components: { optionList: OptionList },
-    convertChildrenToData,
-    flattenOptions,
-    getLabeledValue,
-    filterOptions,
-    isValueDisabled,
-    findValueOption,
-    warningProps,
-    fillOptionsWithMissingValue,
-    omitDOMProps,
-  } = config as any;
-  const Select = defineComponent({
-    name: 'Select',
-    slots: ['option'],
-    inheritAttrs: false,
-    props: selectBaseProps<OptionType, DefaultValueType>(),
-    setup(props, { expose, attrs, slots }) {
-      const useInternalProps = computed(
-        () => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK,
-      );
-      warning(
-        props.optionFilterProp !== 'children',
-        'Select',
-        'optionFilterProp not support children, please use label instead',
-      );
-      const containerRef = ref();
-      const triggerRef = ref();
-      const selectorRef = ref();
-      const listRef = ref();
-      const tokenWithEnter = computed(() =>
-        (props.tokenSeparators || []).some(tokenSeparator =>
-          ['\n', '\r\n'].includes(tokenSeparator),
-        ),
-      );
-
-      /** Used for component focused management */
-      const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
-
-      const mergedId = computed(() => props.id || `rc_select_${getUUID()}`);
-
-      // optionLabelProp
-      const mergedOptionLabelProp = computed(() => {
-        let mergedOptionLabelProp = props.optionLabelProp;
-        if (mergedOptionLabelProp === undefined) {
-          mergedOptionLabelProp = props.options ? 'label' : 'children';
-        }
-        return mergedOptionLabelProp;
-      });
-
-      // labelInValue
-      const mergedLabelInValue = computed(() =>
-        props.mode === 'combobox' ? false : props.labelInValue,
-      );
-
-      const isMultiple = computed(() => props.mode === 'tags' || props.mode === 'multiple');
-
-      const mergedShowSearch = computed(() =>
-        props.showSearch !== undefined
-          ? props.showSearch
-          : isMultiple.value || props.mode === 'combobox',
-      );
-
-      const mobile = ref(false);
-      onMounted(() => {
-        mobile.value = isMobile();
-      });
-
-      // ============================== Ref ===============================
-      const selectorDomRef = createRef();
-
-      const innerSearchValue = ref('');
-      const setInnerSearchValue = (val: string) => {
-        innerSearchValue.value = val;
-      };
-
-      const mergedValue = ref(props.value !== undefined ? props.value : props.defaultValue);
-      watch(
-        () => props.value,
-        () => {
-          mergedValue.value = props.value;
-          innerSearchValue.value = '';
-        },
-      );
-      // ============================= Value ==============================
-
-      /** Unique raw values */
-      const mergedRawValueArr = computed(() =>
-        toInnerValue(mergedValue.value, {
-          labelInValue: mergedLabelInValue.value,
-          combobox: props.mode === 'combobox',
-        }),
-      );
-      const mergedRawValue = computed(() => mergedRawValueArr.value[0]);
-      const mergedValueMap = computed(() => mergedRawValueArr.value[1]);
-      /** We cache a set of raw values to speed up check */
-      const rawValues = computed(() => new Set(mergedRawValue.value));
-
-      // ============================= Option =============================
-      // Set by option list active, it will merge into search input when mode is `combobox`
-      const activeValue = ref();
-      const setActiveValue = (val: string) => {
-        activeValue.value = val;
-      };
-
-      const mergedSearchValue = computed(() => {
-        let mergedSearchValue = innerSearchValue.value;
-        if (props.mode === 'combobox' && mergedValue.value !== undefined) {
-          mergedSearchValue = mergedValue.value as string;
-        } else if (props.searchValue !== undefined) {
-          mergedSearchValue = props.searchValue;
-        } else if (props.inputValue) {
-          mergedSearchValue = props.inputValue;
-        }
-        return mergedSearchValue;
-      });
-
-      const mergedOptions = computed((): OptionType[] => {
-        let newOptions = props.options;
-        if (newOptions === undefined) {
-          newOptions = convertChildrenToData(props.children as VueNode);
-        }
-
-        /**
-         * `tags` should fill un-list item.
-         * This is not cool here since TreeSelect do not need this
-         */
-        if (props.mode === 'tags' && fillOptionsWithMissingValue) {
-          newOptions = fillOptionsWithMissingValue(
-            newOptions,
-            mergedValue.value,
-            mergedOptionLabelProp.value,
-            props.labelInValue,
-          );
-        }
-
-        return newOptions || ([] as OptionType[]);
-      });
-
-      const mergedFlattenOptions = computed(() => flattenOptions(mergedOptions.value, props));
-
-      const getValueOption = useCacheOptions(mergedFlattenOptions);
-
-      // Display options for OptionList
-      const displayOptions = computed<OptionType[]>(() => {
-        if (!mergedSearchValue.value || !mergedShowSearch.value) {
-          return [...mergedOptions.value] as OptionType[];
-        }
-        const { optionFilterProp = 'value', mode, filterOption } = props;
-        const filteredOptions: OptionType[] = filterOptions(
-          mergedSearchValue.value,
-          mergedOptions.value,
-          {
-            optionFilterProp,
-            filterOption:
-              mode === 'combobox' && filterOption === undefined ? () => true : filterOption,
-          },
-        );
-        if (
-          mode === 'tags' &&
-          filteredOptions.every(opt => opt[optionFilterProp] !== mergedSearchValue.value)
-        ) {
-          filteredOptions.unshift({
-            value: mergedSearchValue.value,
-            label: mergedSearchValue.value,
-            key: '__RC_SELECT_TAG_PLACEHOLDER__',
-          } as OptionType);
-        }
-        if (props.filterSort && Array.isArray(filteredOptions)) {
-          return ([...filteredOptions] as OptionType[]).sort(props.filterSort);
-        }
-
-        return filteredOptions;
-      });
-
-      const displayFlattenOptions = computed(() => flattenOptions(displayOptions.value, props));
-      onMounted(() => {
-        watch(
-          mergedSearchValue,
-          () => {
-            if (listRef.value && listRef.value.scrollTo) {
-              listRef.value.scrollTo(0);
-            }
-          },
-          { flush: 'post', immediate: true },
-        );
-      });
-
-      // ============================ Selector ============================
-      let displayValues = computed<DisplayLabelValueType[]>(() => {
-        const tmpValues = mergedRawValue.value.map((val: RawValueType) => {
-          const valueOptions = getValueOption([val]);
-          const displayValue = getLabeledValue(val, {
-            options: valueOptions,
-            prevValueMap: mergedValueMap.value,
-            labelInValue: mergedLabelInValue.value,
-            optionLabelProp: mergedOptionLabelProp.value,
-          });
-          return {
-            ...displayValue,
-            disabled: isValueDisabled(val, valueOptions),
-            option: valueOptions[0],
-          };
-        });
-
-        if (
-          !props.mode &&
-          tmpValues.length === 1 &&
-          tmpValues[0].value === null &&
-          tmpValues[0].label === null
-        ) {
-          return [];
-        }
-
-        return tmpValues;
-      });
-
-      // Polyfill with cache label
-      displayValues = useCacheDisplayValue(displayValues);
-
-      const triggerSelect = (newValue: RawValueType, isSelect: boolean, source: SelectSource) => {
-        const newValueOption = getValueOption([newValue]);
-        const outOption = findValueOption([newValue], newValueOption, { props })[0];
-        const { internalProps = {} } = props;
-        if (!internalProps.skipTriggerSelect) {
-          // Skip trigger `onSelect` or `onDeselect` if configured
-          const selectValue = (
-            mergedLabelInValue.value
-              ? getLabeledValue(newValue, {
-                  options: newValueOption,
-                  prevValueMap: mergedValueMap.value,
-                  labelInValue: mergedLabelInValue.value,
-                  optionLabelProp: mergedOptionLabelProp.value,
-                })
-              : newValue
-          ) as SingleType<ValueType>;
-
-          if (isSelect && props.onSelect) {
-            props.onSelect(selectValue, outOption);
-          } else if (!isSelect && props.onDeselect) {
-            props.onDeselect(selectValue, outOption);
-          }
-        }
-
-        // Trigger internal event
-        if (useInternalProps.value) {
-          if (isSelect && internalProps.onRawSelect) {
-            internalProps.onRawSelect(newValue, outOption, source);
-          } else if (!isSelect && internalProps.onRawDeselect) {
-            internalProps.onRawDeselect(newValue, outOption, source);
-          }
-        }
-      };
-
-      // We need cache options here in case user update the option list
-      const prevValueOptions = shallowRef([]);
-      const setPrevValueOptions = (val: any[]) => {
-        prevValueOptions.value = val;
-      };
-      const triggerChange = (newRawValues: RawValueType[]) => {
-        if (
-          useInternalProps.value &&
-          props.internalProps &&
-          props.internalProps.skipTriggerChange
-        ) {
-          return;
-        }
-        const newRawValuesOptions = getValueOption(newRawValues);
-        const outValues = toOuterValues<FlattenOptionsType<OptionType>>(Array.from(newRawValues), {
-          labelInValue: mergedLabelInValue.value,
-          options: newRawValuesOptions as any,
-          getLabeledValue,
-          prevValueMap: mergedValueMap.value,
-          optionLabelProp: mergedOptionLabelProp.value,
-        });
-
-        const outValue: ValueType = (isMultiple.value ? outValues : outValues[0]) as ValueType;
-        // Skip trigger if prev & current value is both empty
-        if (
-          props.onChange &&
-          (mergedRawValue.value.length !== 0 || (outValues as []).length !== 0)
-        ) {
-          const outOptions = findValueOption(newRawValues, newRawValuesOptions, {
-            prevValueOptions: prevValueOptions.value,
-            props,
-          });
-
-          // We will cache option in case it removed by ajax
-          setPrevValueOptions(
-            outOptions.map((option, index) => {
-              const clone = { ...option };
-              Object.defineProperty(clone, '_INTERNAL_OPTION_VALUE_', {
-                get: () => newRawValues[index],
-              });
-              return clone;
-            }),
-          );
-
-          props.onChange(outValue, isMultiple.value ? outOptions : outOptions[0]);
-        }
-
-        if (props.value === undefined) {
-          mergedValue.value = outValue;
-        }
-      };
-
-      const onInternalSelect = (
-        newValue: RawValueType,
-        { selected, source }: { selected: boolean; source: 'option' | 'selection' },
-      ) => {
-        const { autoClearSearchValue = true } = props;
-        if (props.disabled) {
-          return;
-        }
-
-        let newRawValue: Set<RawValueType>;
-
-        if (isMultiple.value) {
-          newRawValue = new Set(mergedRawValue.value);
-          if (selected) {
-            newRawValue.add(newValue);
-          } else {
-            newRawValue.delete(newValue);
-          }
-        } else {
-          newRawValue = new Set();
-          newRawValue.add(newValue);
-        }
-
-        // Multiple always trigger change and single should change if value changed
-        if (
-          isMultiple.value ||
-          (!isMultiple.value && Array.from(mergedRawValue.value)[0] !== newValue)
-        ) {
-          triggerChange(Array.from(newRawValue));
-        }
-
-        // Trigger `onSelect`. Single mode always trigger select
-        triggerSelect(newValue, !isMultiple.value || selected, source);
-
-        // Clean search value if single or configured
-        if (props.mode === 'combobox') {
-          setInnerSearchValue(String(newValue));
-          setActiveValue('');
-        } else if (!isMultiple.value || autoClearSearchValue) {
-          setInnerSearchValue('');
-          setActiveValue('');
-        }
-      };
-
-      const onInternalOptionSelect = (newValue: RawValueType, info: { selected: boolean }) => {
-        onInternalSelect(newValue, { ...info, source: 'option' });
-      };
-
-      const onInternalSelectionSelect = (newValue: RawValueType, info: { selected: boolean }) => {
-        onInternalSelect(newValue, { ...info, source: 'selection' });
-      };
-
-      // ============================== Open ==============================
-      const initOpen = props.open !== undefined ? props.open : props.defaultOpen;
-      const innerOpen = ref(initOpen);
-      const mergedOpen = ref(initOpen);
-      const setInnerOpen = (val: boolean) => {
-        innerOpen.value = props.open !== undefined ? props.open : val;
-        mergedOpen.value = innerOpen.value;
-      };
-      watch(
-        () => props.open,
-        () => {
-          setInnerOpen(props.open);
-        },
-      );
-
-      // Not trigger `open` in `combobox` when `notFoundContent` is empty
-      const emptyListContent = computed(
-        () => !props.notFoundContent && !displayOptions.value.length,
-      );
-
-      watchEffect(() => {
-        mergedOpen.value = innerOpen.value;
-        if (
-          props.disabled ||
-          (emptyListContent.value && mergedOpen.value && props.mode === 'combobox')
-        ) {
-          mergedOpen.value = false;
-        }
-      });
-
-      const triggerOpen = computed(() => (emptyListContent.value ? false : mergedOpen.value));
-
-      const onToggleOpen = (newOpen?: boolean) => {
-        const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen.value;
-
-        if (innerOpen.value !== nextOpen && !props.disabled) {
-          setInnerOpen(nextOpen);
-          if (props.onDropdownVisibleChange) {
-            props.onDropdownVisibleChange(nextOpen);
-          }
-        }
-      };
-
-      useSelectTriggerControl([containerRef, triggerRef], triggerOpen, onToggleOpen);
-
-      // ============================= Search =============================
-      const triggerSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
-        let ret = true;
-        let newSearchText = searchText;
-        const preSearchValue = mergedSearchValue.value;
-        setActiveValue(null);
-
-        // Check if match the `tokenSeparators`
-        const patchLabels: string[] = isCompositing
-          ? null
-          : getSeparatedContent(searchText, props.tokenSeparators as string[]);
-        let patchRawValues: RawValueType[] = patchLabels;
-
-        if (props.mode === 'combobox') {
-          // Only typing will trigger onChange
-          if (fromTyping) {
-            triggerChange([newSearchText]);
-          }
-        } else if (patchLabels) {
-          newSearchText = '';
-
-          if (props.mode !== 'tags') {
-            patchRawValues = patchLabels
-              .map(label => {
-                const item = mergedFlattenOptions.value.find(
-                  ({ data }) => getTextFromElement(data[mergedOptionLabelProp.value]) === label,
-                );
-                return item ? item.data.value : null;
-              })
-              .filter((val: RawValueType) => val !== null);
-          }
-
-          const newRawValues = Array.from(
-            new Set<RawValueType>([...mergedRawValue.value, ...patchRawValues]),
-          );
-          triggerChange(newRawValues);
-          newRawValues.forEach(newRawValue => {
-            triggerSelect(newRawValue, true, 'input');
-          });
-
-          // Should close when paste finish
-          onToggleOpen(false);
-
-          // Tell Selector that break next actions
-          ret = false;
-        }
-
-        setInnerSearchValue(newSearchText);
-
-        if (props.onSearch && preSearchValue !== newSearchText) {
-          props.onSearch(newSearchText);
-        }
-
-        return ret;
-      };
-
-      // Only triggered when menu is closed & mode is tags
-      // If menu is open, OptionList will take charge
-      // If mode isn't tags, press enter is not meaningful when you can't see any option
-      const onSearchSubmit = (searchText: string) => {
-        // prevent empty tags from appearing when you click the Enter button
-        if (!searchText || !searchText.trim()) {
-          return;
-        }
-        const newRawValues = Array.from(
-          new Set<RawValueType>([...mergedRawValue.value, searchText]),
-        );
-        triggerChange(newRawValues);
-        newRawValues.forEach(newRawValue => {
-          triggerSelect(newRawValue, true, 'input');
-        });
-        setInnerSearchValue('');
-      };
-
-      // Close dropdown when disabled change
-
-      watch(
-        () => props.disabled,
-        () => {
-          if (innerOpen.value && !!props.disabled) {
-            setInnerOpen(false);
-          }
-        },
-        { immediate: true },
-      );
-
-      // Close will clean up single mode search text
-      watch(
-        mergedOpen,
-        () => {
-          if (!mergedOpen.value && !isMultiple.value && props.mode !== 'combobox') {
-            triggerSearch('', false, false);
-          }
-        },
-        { immediate: true },
-      );
-      // ============================ Keyboard ============================
-      /**
-       * We record input value here to check if can press to clean up by backspace
-       * - null: Key is not down, this is reset by key up
-       * - true: Search text is empty when first time backspace down
-       * - false: Search text is not empty when first time backspace down
-       */
-      const [getClearLock, setClearLock] = useLock();
-
-      // KeyDown
-      const onInternalKeyDown = (event: KeyboardEvent) => {
-        const clearLock = getClearLock();
-        const { which } = event;
-
-        if (which === KeyCode.ENTER) {
-          // Do not submit form when type in the input
-          if (props.mode !== 'combobox') {
-            event.preventDefault();
-          }
-
-          // We only manage open state here, close logic should handle by list component
-          if (!mergedOpen.value) {
-            onToggleOpen(true);
-          }
-        }
-
-        setClearLock(!!mergedSearchValue.value);
-
-        // Remove value by `backspace`
-        if (
-          which === KeyCode.BACKSPACE &&
-          !clearLock &&
-          isMultiple.value &&
-          !mergedSearchValue.value &&
-          mergedRawValue.value.length
-        ) {
-          const removeInfo = removeLastEnabledValue(displayValues.value, mergedRawValue.value);
-
-          if (removeInfo.removedValue !== null) {
-            triggerChange(removeInfo.values);
-            triggerSelect(removeInfo.removedValue, false, 'input');
-          }
-        }
-
-        if (mergedOpen.value && listRef.value) {
-          listRef.value.onKeydown(event);
-        }
-
-        if (props.onKeydown) {
-          props.onKeydown(event);
-        }
-      };
-
-      // KeyUp
-      const onInternalKeyUp = (event: KeyboardEvent) => {
-        if (mergedOpen.value && listRef.value) {
-          listRef.value.onKeyup(event);
-        }
-
-        if (props.onKeyup) {
-          props.onKeyup(event);
-        }
-      };
-
-      // ========================== Focus / Blur ==========================
-      /** Record real focus status */
-      const focusRef = ref(false);
-
-      const onContainerFocus = (...args: any[]) => {
-        setMockFocused(true);
-
-        if (!props.disabled) {
-          if (props.onFocus && !focusRef.value) {
-            props.onFocus(args[0]);
-          }
-
-          // `showAction` should handle `focus` if set
-          if (props.showAction && props.showAction.includes('focus')) {
-            onToggleOpen(true);
-          }
-        }
-
-        focusRef.value = true;
-      };
-
-      const onContainerBlur = (...args: any[]) => {
-        setMockFocused(false, () => {
-          focusRef.value = false;
-          onToggleOpen(false);
-        });
-
-        if (props.disabled) {
-          return;
-        }
-        const searchVal = mergedSearchValue.value;
-        if (searchVal) {
-          // `tags` mode should move `searchValue` into values
-          if (props.mode === 'tags') {
-            triggerSearch('', false, false);
-            triggerChange(Array.from(new Set([...mergedRawValue.value, searchVal])));
-          } else if (props.mode === 'multiple') {
-            // `multiple` mode only clean the search value but not trigger event
-            setInnerSearchValue('');
-          }
-        }
-
-        if (props.onBlur) {
-          props.onBlur(args[0]);
-        }
-      };
-      provide('VCSelectContainerEvent', {
-        focus: onContainerFocus,
-        blur: onContainerBlur,
-      });
-      const activeTimeoutIds: number[] = [];
-
-      onMounted(() => {
-        activeTimeoutIds.forEach(timeoutId => window.clearTimeout(timeoutId));
-        activeTimeoutIds.splice(0, activeTimeoutIds.length);
-      });
-      onBeforeUnmount(() => {
-        activeTimeoutIds.forEach(timeoutId => window.clearTimeout(timeoutId));
-        activeTimeoutIds.splice(0, activeTimeoutIds.length);
-      });
-
-      const onInternalMouseDown = (event: MouseEvent) => {
-        const { target } = event;
-        const popupElement: HTMLDivElement = triggerRef.value && triggerRef.value.getPopupElement();
-        // We should give focus back to selector if clicked item is not focusable
-        if (popupElement && popupElement.contains(target as HTMLElement)) {
-          const timeoutId = window.setTimeout(() => {
-            const index = activeTimeoutIds.indexOf(timeoutId);
-            if (index !== -1) {
-              activeTimeoutIds.splice(index, 1);
-            }
-
-            cancelSetMockFocused();
-
-            if (!mobile.value && !popupElement.contains(document.activeElement)) {
-              selectorRef.value.focus();
-            }
-          });
-
-          activeTimeoutIds.push(timeoutId);
-        }
-
-        if (props.onMousedown) {
-          props.onMousedown(event);
-        }
-      };
-
-      // ========================= Accessibility ==========================
-      const accessibilityIndex = ref(0);
-      const mergedDefaultActiveFirstOption = computed(() =>
-        props.defaultActiveFirstOption !== undefined
-          ? props.defaultActiveFirstOption
-          : props.mode !== 'combobox',
-      );
-
-      const onActiveValue: OnActiveValue = (active, index, { source = 'keyboard' } = {}) => {
-        accessibilityIndex.value = index;
-
-        if (
-          props.backfill &&
-          props.mode === 'combobox' &&
-          active !== null &&
-          source === 'keyboard'
-        ) {
-          setActiveValue(String(active));
-        }
-      };
-
-      // ============================= Popup ==============================
-      const containerWidth = ref<number>(null);
-      onMounted(() => {
-        watch(
-          triggerOpen,
-          () => {
-            if (triggerOpen.value) {
-              const newWidth = Math.ceil(containerRef.value.offsetWidth);
-              if (containerWidth.value !== newWidth) {
-                containerWidth.value = newWidth;
-              }
-            }
-          },
-          { immediate: true },
-        );
-      });
-
-      const focus = () => {
-        selectorRef.value.focus();
-      };
-      const blur = () => {
-        selectorRef.value.blur();
-      };
-      expose({
-        focus,
-        blur,
-        scrollTo: (...args: any[]) => listRef.value?.scrollTo(...args),
-      });
-      const instance = getCurrentInstance();
-      const onPopupMouseEnter = () => {
-        // We need force update here since popup dom is render async
-        instance.update();
-      };
-      return () => {
-        const {
-          prefixCls = defaultPrefixCls,
-          id,
-
-          open,
-          defaultOpen,
-          options,
-          children,
-
-          mode,
-          value,
-          defaultValue,
-          labelInValue,
-
-          // Search related
-          showSearch,
-          inputValue,
-          searchValue,
-          filterOption,
-          optionFilterProp,
-          autoClearSearchValue,
-          onSearch,
-
-          // Icons
-          allowClear,
-          clearIcon,
-          showArrow,
-          inputIcon,
-          menuItemSelectedIcon,
-
-          // Others
-          disabled,
-          loading,
-          defaultActiveFirstOption,
-          notFoundContent = 'Not Found',
-          optionLabelProp,
-          backfill,
-          getInputElement,
-          getPopupContainer,
-          placement,
-
-          // Dropdown
-          listHeight = 200,
-          listItemHeight = 20,
-          animation,
-          transitionName,
-          virtual,
-          dropdownStyle,
-          dropdownClassName,
-          dropdownMatchSelectWidth,
-          dropdownRender,
-          dropdownAlign,
-          showAction,
-          direction,
-          fieldNames,
-
-          // Tags
-          tokenSeparators,
-          tagRender,
-
-          // Events
-          onPopupScroll,
-          onDropdownVisibleChange,
-          onFocus,
-          onBlur,
-          onKeyup,
-          onKeydown,
-          onMousedown,
-
-          onChange,
-          onSelect,
-          onDeselect,
-          onClear,
-
-          internalProps = {},
-
-          ...restProps
-        } = { ...props, ...attrs }; //as SelectProps<OptionType[], ValueType>;
-        // ============================= Input ==============================
-        // Only works in `combobox`
-        const customizeInputElement: VueNode =
-          (mode === 'combobox' && getInputElement && getInputElement()) || null;
-
-        const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
-        DEFAULT_OMIT_PROPS.forEach(prop => {
-          delete domProps[prop];
-        });
-        const popupNode = (
-          <OptionList
-            ref={listRef}
-            prefixCls={prefixCls}
-            id={mergedId.value}
-            open={mergedOpen.value}
-            childrenAsData={!options}
-            options={displayOptions.value}
-            fieldNames={fieldNames}
-            flattenOptions={displayFlattenOptions.value}
-            multiple={isMultiple.value}
-            values={rawValues.value}
-            height={listHeight}
-            itemHeight={listItemHeight}
-            onSelect={onInternalOptionSelect}
-            onToggleOpen={onToggleOpen}
-            onActiveValue={onActiveValue}
-            defaultActiveFirstOption={mergedDefaultActiveFirstOption.value}
-            notFoundContent={notFoundContent}
-            onScroll={onPopupScroll}
-            searchValue={mergedSearchValue.value}
-            menuItemSelectedIcon={menuItemSelectedIcon}
-            virtual={virtual !== false && dropdownMatchSelectWidth !== false}
-            onMouseenter={onPopupMouseEnter}
-            direction={direction}
-            v-slots={slots}
-          />
-        );
-
-        // ============================= Clear ==============================
-        let clearNode: VNode | JSX.Element;
-        const onClearMouseDown = () => {
-          // Trigger internal `onClear` event
-          if (useInternalProps.value && internalProps.onClear) {
-            internalProps.onClear();
-          }
-
-          if (onClear) {
-            onClear();
-          }
-
-          triggerChange([]);
-          triggerSearch('', false, false);
-        };
-
-        if (!disabled && allowClear && (mergedRawValue.value.length || mergedSearchValue.value)) {
-          clearNode = (
-            <TransBtn
-              class={`${prefixCls}-clear`}
-              onMousedown={onClearMouseDown}
-              customizeIcon={clearIcon}
-            >
-              ×
-            </TransBtn>
-          );
-        }
-
-        // ============================= Arrow ==============================
-        const mergedShowArrow =
-          showArrow !== undefined
-            ? showArrow
-            : loading || (!isMultiple.value && mode !== 'combobox');
-        let arrowNode: VNode | JSX.Element;
-
-        if (mergedShowArrow) {
-          arrowNode = (
-            <TransBtn
-              class={classNames(`${prefixCls}-arrow`, {
-                [`${prefixCls}-arrow-loading`]: loading,
-              })}
-              customizeIcon={inputIcon}
-              customizeIconProps={{
-                loading,
-                searchValue: mergedSearchValue.value,
-                open: mergedOpen.value,
-                focused: mockFocused.value,
-                showSearch: mergedShowSearch.value,
-              }}
-            />
-          );
-        }
-
-        // ============================ Warning =============================
-        if (process.env.NODE_ENV !== 'production' && warningProps) {
-          warningProps(props);
-        }
-
-        // ============================= Render =============================
-        const mergedClassName = classNames(prefixCls, attrs.class, {
-          [`${prefixCls}-focused`]: mockFocused.value,
-          [`${prefixCls}-multiple`]: isMultiple.value,
-          [`${prefixCls}-single`]: !isMultiple.value,
-          [`${prefixCls}-allow-clear`]: allowClear,
-          [`${prefixCls}-show-arrow`]: mergedShowArrow,
-          [`${prefixCls}-disabled`]: disabled,
-          [`${prefixCls}-loading`]: loading,
-          [`${prefixCls}-open`]: mergedOpen.value,
-          [`${prefixCls}-customize-input`]: customizeInputElement,
-          [`${prefixCls}-show-search`]: mergedShowSearch.value,
-        });
-        return (
-          <div
-            {...domProps}
-            class={mergedClassName}
-            ref={containerRef}
-            onMousedown={onInternalMouseDown}
-            onKeydown={onInternalKeyDown}
-            onKeyup={onInternalKeyUp}
-            // onFocus={onContainerFocus} // trigger by input
-            // onBlur={onContainerBlur} // trigger by input
-          >
-            {mockFocused.value && !mergedOpen.value && (
-              <span
-                style={{
-                  width: 0,
-                  height: 0,
-                  display: 'flex',
-                  overflow: 'hidden',
-                  opacity: 0,
-                }}
-                aria-live="polite"
-              >
-                {/* Merge into one string to make screen reader work as expect */}
-                {`${mergedRawValue.value.join(', ')}`}
-              </span>
-            )}
-            <SelectTrigger
-              ref={triggerRef}
-              disabled={disabled}
-              prefixCls={prefixCls}
-              visible={triggerOpen.value}
-              popupElement={popupNode}
-              containerWidth={containerWidth.value}
-              animation={animation}
-              transitionName={transitionName}
-              dropdownStyle={dropdownStyle}
-              dropdownClassName={dropdownClassName}
-              direction={direction}
-              dropdownMatchSelectWidth={dropdownMatchSelectWidth}
-              dropdownRender={dropdownRender as any}
-              dropdownAlign={dropdownAlign}
-              placement={placement}
-              getPopupContainer={getPopupContainer}
-              empty={!mergedOptions.value.length}
-              getTriggerDOMNode={() => selectorDomRef.current}
-            >
-              <Selector
-                {...props}
-                domRef={selectorDomRef}
-                prefixCls={prefixCls}
-                inputElement={customizeInputElement}
-                ref={selectorRef}
-                id={mergedId.value}
-                showSearch={mergedShowSearch.value}
-                mode={mode}
-                accessibilityIndex={accessibilityIndex.value}
-                multiple={isMultiple.value}
-                tagRender={tagRender}
-                values={displayValues.value}
-                open={mergedOpen.value}
-                onToggleOpen={onToggleOpen}
-                searchValue={mergedSearchValue.value}
-                activeValue={activeValue.value}
-                onSearch={triggerSearch}
-                onSearchSubmit={onSearchSubmit}
-                onSelect={onInternalSelectionSelect}
-                tokenWithEnter={tokenWithEnter.value}
-              />
-            </SelectTrigger>
-
-            {arrowNode}
-            {clearNode}
-          </div>
-        );
-      };
-    },
-  });
-  return Select;
-}
diff --git a/components/vc-select copy/interface1/generator.ts b/components/vc-select copy/interface1/generator.ts
deleted file mode 100644
index aa3c6702b..000000000
--- a/components/vc-select copy/interface1/generator.ts	
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { VueNode } from '../../_util/type';
-
-export type SelectSource = 'option' | 'selection' | 'input';
-
-export const INTERNAL_PROPS_MARK = 'RC_SELECT_INTERNAL_PROPS_MARK';
-
-// =================================== Shared Type ===================================
-export type Key = string | number;
-
-export type RawValueType = string | number | null;
-
-export interface LabelValueType extends Record<string, any> {
-  key?: Key;
-  value?: RawValueType;
-  label?: any;
-  isCacheable?: boolean;
-}
-export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[];
-
-export interface DisplayLabelValueType extends LabelValueType {
-  disabled?: boolean;
-}
-
-export type SingleType<MixType> = MixType extends (infer Single)[] ? Single : MixType;
-
-export type OnClear = () => any;
-
-export type CustomTagProps = {
-  label: any;
-  value: DefaultValueType;
-  disabled: boolean;
-  onClose: (event?: MouseEvent) => void;
-  closable: boolean;
-};
-
-// ==================================== Generator ====================================
-export type GetLabeledValue<FOT extends FlattenOptionsType> = (
-  value: RawValueType,
-  config: {
-    options: FOT;
-    prevValueMap: Map<RawValueType, LabelValueType>;
-    labelInValue: boolean;
-    optionLabelProp: string;
-  },
-) => LabelValueType;
-
-export type FilterOptions<OptionsType extends object[]> = (
-  searchValue: string,
-  options: OptionsType,
-  /** Component props, since Select & TreeSelect use different prop name, use any here */
-  config: {
-    optionFilterProp: string;
-    filterOption: boolean | FilterFunc<OptionsType[number]>;
-  },
-) => OptionsType;
-
-export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
-
-export type FlattenOptionsType<OptionType = object> = {
-  key: Key;
-  data: OptionType;
-  label?: any;
-  value?: RawValueType;
-  /** Used for customize data */
-  [name: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}[];
-
-export type DropdownObject = {
-  menuNode?: VueNode;
-  props?: Record<string, any>;
-};
-
-export type DropdownRender = (opt?: DropdownObject) => VueNode;
diff --git a/components/vc-select copy/interface1/index.ts b/components/vc-select copy/interface1/index.ts
deleted file mode 100644
index c71cee0a3..000000000
--- a/components/vc-select copy/interface1/index.ts	
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { VueNode } from '../../_util/type';
-import type { VNode, CSSProperties } from 'vue';
-import type { Key, RawValueType } from './generator';
-
-export type RenderDOMFunc = (props: any) => HTMLElement;
-
-export type RenderNode = VueNode | ((props: any) => VueNode);
-
-export type Mode = 'multiple' | 'tags' | 'combobox';
-
-// ======================== Option ========================
-
-export interface FieldNames {
-  value?: string;
-  label?: string;
-  options?: string;
-}
-
-export type OnActiveValue = (
-  active: RawValueType,
-  index: number,
-  info?: { source?: 'keyboard' | 'mouse' },
-) => void;
-
-export interface OptionCoreData {
-  key?: Key;
-  disabled?: boolean;
-  value?: Key;
-  title?: string;
-  class?: string;
-  style?: CSSProperties;
-  label?: VueNode;
-  /** @deprecated Only works when use `children` as option data */
-  children?: VNode[] | JSX.Element[];
-}
-
-export interface OptionData extends OptionCoreData {
-  /** Save for customize data */
-  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export interface OptionGroupData {
-  key?: Key;
-  label?: VueNode;
-  options: OptionData[];
-  class?: string;
-  style?: CSSProperties;
-
-  /** Save for customize data */
-  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export type OptionsType = (OptionData | OptionGroupData)[];
-
-export interface FlattenOptionData {
-  group?: boolean;
-  groupOption?: boolean;
-  key: string | number;
-  data: OptionData | OptionGroupData;
-  label?: any;
-  value?: RawValueType;
-}
diff --git a/components/vc-select copy/BaseSelect.tsx b/components/vc-select2/BaseSelect.tsx
similarity index 98%
rename from components/vc-select copy/BaseSelect.tsx
rename to components/vc-select2/BaseSelect.tsx
index 1d262b476..c5452e530 100644
--- a/components/vc-select copy/BaseSelect.tsx	
+++ b/components/vc-select2/BaseSelect.tsx
@@ -22,6 +22,7 @@ import {
   getCurrentInstance,
   onBeforeUnmount,
   onMounted,
+  provide,
   ref,
   toRefs,
   watch,
@@ -36,6 +37,7 @@ import { toReactive } from '../_util/toReactive';
 import classNames from '../_util/classNames';
 import OptionList from './OptionList';
 import createRef from '../_util/createRef';
+import type { BaseOptionType } from './Select';
 
 const DEFAULT_OMIT_PROPS = [
   'value',
@@ -50,6 +52,8 @@ const DEFAULT_OMIT_PROPS = [
   'onInputKeyDown',
   'onPopupScroll',
   'tabindex',
+  'OptionList',
+  'notFoundContent',
 ] as const;
 
 export type RenderNode = VueNode | ((props: any) => VueNode);
@@ -74,20 +78,22 @@ export type CustomTagProps = {
   disabled: boolean;
   onClose: (event?: MouseEvent) => void;
   closable: boolean;
+  option: BaseOptionType;
 };
 
 export interface DisplayValueType {
   key?: Key;
   value?: RawValueType;
   label?: any;
-  disabled: boolean;
+  disabled?: boolean;
+  option?: BaseOptionType;
 }
 
-export interface BaseSelectRef {
+export type BaseSelectRef = {
   focus: () => void;
   blur: () => void;
   scrollTo: ScrollTo;
-}
+};
 
 const baseSelectPrivateProps = () => {
   return {
@@ -251,7 +257,7 @@ export default defineComponent({
   name: 'BaseSelect',
   inheritAttrs: false,
   props: initDefaultProps(baseSelectProps(), { showAction: [], notFoundContent: 'Not Found' }),
-  setup(props, { attrs, expose }) {
+  setup(props, { attrs, expose, slots }) {
     const multiple = computed(() => isMultiple(props.mode));
 
     const mergedShowSearch = computed(() =>
@@ -533,7 +539,10 @@ export default defineComponent({
         props.onBlur(...args);
       }
     };
-
+    provide('VCSelectContainerEvent', {
+      focus: onContainerFocus,
+      blur: onContainerBlur,
+    });
     const activeTimeoutIds: any[] = [];
 
     onMounted(() => {
@@ -743,7 +752,7 @@ export default defineComponent({
       }
 
       // =========================== OptionList ===========================
-      const optionList = <OptionList ref={listRef} />;
+      const optionList = <OptionList ref={listRef} v-slots={{ option: slots.option }} />;
 
       // ============================= Select =============================
       const mergedClassName = classNames(prefixCls, attrs.class, {
@@ -822,14 +831,14 @@ export default defineComponent({
       } else {
         renderNode = (
           <div
-            class={mergedClassName}
             {...domProps}
+            class={mergedClassName}
             ref={containerRef}
             onMousedown={onInternalMouseDown}
             onKeydown={onInternalKeyDown}
             onKeyup={onInternalKeyUp}
-            onFocus={onContainerFocus}
-            onBlur={onContainerBlur}
+            // onFocus={onContainerFocus}
+            // onBlur={onContainerBlur}
           >
             {mockFocused && !mergedOpen.value && (
               <span
diff --git a/components/vc-select copy/OptGroup.tsx b/components/vc-select2/OptGroup.tsx
similarity index 100%
rename from components/vc-select copy/OptGroup.tsx
rename to components/vc-select2/OptGroup.tsx
diff --git a/components/vc-select copy/Option.tsx b/components/vc-select2/Option.tsx
similarity index 100%
rename from components/vc-select copy/Option.tsx
rename to components/vc-select2/Option.tsx
diff --git a/components/vc-select copy/OptionList.tsx b/components/vc-select2/OptionList.tsx
similarity index 94%
rename from components/vc-select copy/OptionList.tsx
rename to components/vc-select2/OptionList.tsx
index 61b51bcf5..7cb1aa68d 100644
--- a/components/vc-select copy/OptionList.tsx	
+++ b/components/vc-select2/OptionList.tsx
@@ -278,7 +278,7 @@ const OptionList = defineComponent({
                 // Group
                 if (group) {
                   return (
-                    <div class={classNames(itemPrefixCls, `${itemPrefixCls.value}-group`)}>
+                    <div class={classNames(itemPrefixCls.value, `${itemPrefixCls.value}-group`)}>
                       {renderOption ? renderOption(data) : label !== undefined ? label : key}
                     </div>
                   );
@@ -298,12 +298,18 @@ const OptionList = defineComponent({
                 const selected = rawValues.has(value);
 
                 const optionPrefixCls = `${itemPrefixCls.value}-option`;
-                const optionClassName = classNames(itemPrefixCls, optionPrefixCls, cls, className, {
-                  [`${optionPrefixCls}-grouped`]: groupOption,
-                  [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !disabled,
-                  [`${optionPrefixCls}-disabled`]: disabled,
-                  [`${optionPrefixCls}-selected`]: selected,
-                });
+                const optionClassName = classNames(
+                  itemPrefixCls.value,
+                  optionPrefixCls,
+                  cls,
+                  className,
+                  {
+                    [`${optionPrefixCls}-grouped`]: groupOption,
+                    [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !disabled,
+                    [`${optionPrefixCls}-disabled`]: disabled,
+                    [`${optionPrefixCls}-selected`]: selected,
+                  },
+                );
 
                 const mergedLabel = getLabel(item);
 
diff --git a/components/vc-select2/Select.tsx b/components/vc-select2/Select.tsx
new file mode 100644
index 000000000..796668dcc
--- /dev/null
+++ b/components/vc-select2/Select.tsx
@@ -0,0 +1,642 @@
+/**
+ * To match accessibility requirement, we always provide an input in the component.
+ * Other element will not set `tabindex` to avoid `onBlur` sequence problem.
+ * For focused select, we set `aria-live="polite"` to update the accessibility content.
+ *
+ * ref:
+ * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
+ *
+ * New api:
+ * - listHeight
+ * - listItemHeight
+ * - component
+ *
+ * Remove deprecated api:
+ * - multiple
+ * - tags
+ * - combobox
+ * - firstActiveValue
+ * - dropdownMenuStyle
+ * - openClassName (Not list in api)
+ *
+ * Update:
+ * - `backfill` only support `combobox` mode
+ * - `combobox` mode not support `labelInValue` since it's meaningless
+ * - `getInputElement` only support `combobox` mode
+ * - `onChange` return OptionData instead of ReactNode
+ * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
+ * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
+ * - `combobox` mode not support `optionLabelProp`
+ */
+
+import BaseSelect, { baseSelectPropsWithoutPrivate, isMultiple } from './BaseSelect';
+import type { DisplayValueType, BaseSelectRef, BaseSelectProps } from './BaseSelect';
+import OptionList from './OptionList';
+import useOptions from './hooks/useOptions';
+import type { SelectContextProps } from './SelectContext';
+import { useProvideSelectProps } from './SelectContext';
+import useId from './hooks/useId';
+import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
+import warningProps from './utils/warningPropsUtil';
+import { toArray } from './utils/commonUtil';
+import useFilterOptions from './hooks/useFilterOptions';
+import useCache from './hooks/useCache';
+import type { Key, VueNode } from '../_util/type';
+import { computed, defineComponent, ref, toRef, watchEffect } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
+import PropTypes from '../_util/vue-types';
+import { initDefaultProps } from '../_util/props-util';
+import useMergedState from '../_util/hooks/useMergedState';
+import useState from '../_util/hooks/useState';
+import { toReactive } from '../_util/toReactive';
+import omit from '../_util/omit';
+
+const OMIT_DOM_PROPS = ['inputValue'];
+
+export type OnActiveValue = (
+  active: RawValueType,
+  index: number,
+  info?: { source?: 'keyboard' | 'mouse' },
+) => void;
+
+export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }) => void;
+
+export type RawValueType = string | number;
+export interface LabelInValueType {
+  label: any;
+  value: RawValueType;
+  /** @deprecated `key` is useless since it should always same as `value` */
+  key?: Key;
+}
+
+export type DraftValueType =
+  | RawValueType
+  | LabelInValueType
+  | DisplayValueType
+  | (RawValueType | LabelInValueType | DisplayValueType)[];
+
+export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
+
+export interface FieldNames {
+  value?: string;
+  label?: string;
+  options?: string;
+}
+
+export interface BaseOptionType {
+  disabled?: boolean;
+  [name: string]: any;
+}
+
+export interface DefaultOptionType extends BaseOptionType {
+  label?: any;
+  value?: string | number | null;
+  children?: Omit<DefaultOptionType, 'children'>[];
+}
+
+export type SelectHandler<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> =
+  | ((value: RawValueType | LabelInValueType, option: OptionType) => void)
+  | ((value: ValueType, option: OptionType) => void);
+
+export function selectProps<
+  ValueType = any,
+  OptionType extends BaseOptionType = DefaultOptionType,
+>() {
+  return {
+    ...baseSelectPropsWithoutPrivate(),
+    prefixCls: String,
+    id: String,
+
+    backfill: { type: Boolean, default: undefined },
+
+    // >>> Field Names
+    fieldNames: Object as PropType<FieldNames>,
+
+    // >>> Search
+    /** @deprecated Use `searchValue` instead */
+    inputValue: String,
+    searchValue: String,
+    onSearch: Function as PropType<(value: string) => void>,
+    autoClearSearchValue: { type: Boolean, default: undefined },
+
+    // >>> Select
+    onSelect: Function as PropType<SelectHandler<ValueType, OptionType>>,
+    onDeselect: Function as PropType<SelectHandler<ValueType, OptionType>>,
+
+    // >>> Options
+    /**
+     * In Select, `false` means do nothing.
+     * In TreeSelect, `false` will highlight match item.
+     * It's by design.
+     */
+    filterOption: {
+      type: [Boolean, Function] as PropType<boolean | FilterFunc<OptionType>>,
+      default: undefined,
+    },
+    filterSort: Function as PropType<(optionA: OptionType, optionB: OptionType) => number>,
+    optionFilterProp: String,
+    optionLabelProp: String,
+    options: Array as PropType<OptionType[]>,
+    defaultActiveFirstOption: { type: Boolean, default: undefined },
+    virtual: { type: Boolean, default: undefined },
+    listHeight: Number,
+    listItemHeight: Number,
+
+    // >>> Icon
+    menuItemSelectedIcon: PropTypes.any,
+
+    mode: String as PropType<'combobox' | 'multiple' | 'tags'>,
+    labelInValue: { type: Boolean, default: undefined },
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    onChange: Function as PropType<(value: ValueType, option: OptionType | OptionType[]) => void>,
+    children: Array as PropType<VueNode[]>,
+  };
+}
+
+export type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps>>>;
+
+function isRawValue(value: DraftValueType): value is RawValueType {
+  return !value || typeof value !== 'object';
+}
+
+export default defineComponent({
+  name: 'Select',
+  inheritAttrs: false,
+  props: initDefaultProps(selectProps(), {
+    prefixCls: 'vc-select',
+    autoClearSearchValue: true,
+    listHeight: 200,
+    listItemHeight: 20,
+  }),
+  setup(props, { expose, attrs, slots }) {
+    const mergedId = useId(toRef(props, 'id'));
+    const multiple = computed(() => isMultiple(props.mode));
+    const childrenAsData = computed(() => !!(!props.options && props.children));
+
+    const mergedFilterOption = computed(() => {
+      if (props.filterOption === undefined && props.mode === 'combobox') {
+        return false;
+      }
+      return props.filterOption;
+    });
+
+    // ========================= FieldNames =========================
+    const mergedFieldNames = computed(() => fillFieldNames(props.fieldNames, childrenAsData.value));
+
+    // =========================== Search ===========================
+    const [mergedSearchValue, setSearchValue] = useMergedState('', {
+      value: computed(() =>
+        props.searchValue !== undefined ? props.searchValue : props.inputValue,
+      ),
+      postState: search => search || '',
+    });
+
+    // =========================== Option ===========================
+    const parsedOptions = useOptions(
+      toRef(props, 'options'),
+      toRef(props, 'children'),
+      mergedFieldNames,
+    );
+    const { valueOptions, labelOptions, options: mergedOptions } = parsedOptions;
+
+    // ========================= Wrap Value =========================
+    const convert2LabelValues = (draftValues: DraftValueType) => {
+      // Convert to array
+      const valueList = toArray(draftValues);
+
+      // Convert to labelInValue type
+      return valueList.map(val => {
+        let rawValue: RawValueType;
+        let rawLabel: any;
+        let rawKey: Key;
+        let rawDisabled: boolean | undefined;
+
+        // Fill label & value
+        if (isRawValue(val)) {
+          rawValue = val;
+        } else {
+          rawKey = val.key;
+          rawLabel = val.label;
+          rawValue = val.value ?? rawKey;
+        }
+
+        const option = valueOptions.value.get(rawValue);
+        if (option) {
+          // Fill missing props
+          if (rawLabel === undefined)
+            rawLabel = option?.[props.optionLabelProp || mergedFieldNames.value.label];
+          if (rawKey === undefined) rawKey = option?.key ?? rawValue;
+          rawDisabled = option?.disabled;
+
+          // Warning if label not same as provided
+          // if (process.env.NODE_ENV !== 'production' && !isRawValue(val)) {
+          //   const optionLabel = option?.[mergedFieldNames.value.label];
+          //   if (optionLabel !== undefined && optionLabel !== rawLabel) {
+          //     warning(false, '`label` of `value` is not same as `label` in Select options.');
+          //   }
+          // }
+        }
+
+        return {
+          label: rawLabel,
+          value: rawValue,
+          key: rawKey,
+          disabled: rawDisabled,
+          option,
+        };
+      });
+    };
+
+    // =========================== Values ===========================
+    const [internalValue, setInternalValue] = useMergedState(props.defaultValue, {
+      value: toRef(props, 'value'),
+    });
+
+    // Merged value with LabelValueType
+    const rawLabeledValues = computed(() => {
+      const values = convert2LabelValues(internalValue.value);
+
+      // combobox no need save value when it's empty
+      if (props.mode === 'combobox' && !values[0]?.value) {
+        return [];
+      }
+
+      return values;
+    });
+
+    // Fill label with cache to avoid option remove
+    const [mergedValues, getMixedOption] = useCache(rawLabeledValues, valueOptions);
+
+    const displayValues = computed(() => {
+      // `null` need show as placeholder instead
+      // https://github.com/ant-design/ant-design/issues/25057
+      if (!props.mode && mergedValues.value.length === 1) {
+        const firstValue = mergedValues.value[0];
+        if (
+          firstValue.value === null &&
+          (firstValue.label === null || firstValue.label === undefined)
+        ) {
+          return [];
+        }
+      }
+
+      return mergedValues.value.map(item => ({
+        ...item,
+        label: item.label ?? item.value,
+      }));
+    });
+
+    /** Convert `displayValues` to raw value type set */
+    const rawValues = computed(() => new Set(mergedValues.value.map(val => val.value)));
+
+    watchEffect(
+      () => {
+        if (props.mode === 'combobox') {
+          const strValue = mergedValues.value[0]?.value;
+
+          if (strValue !== undefined && strValue !== null) {
+            setSearchValue(String(strValue));
+          }
+        }
+      },
+      { flush: 'post' },
+    );
+
+    // ======================= Display Option =======================
+    // Create a placeholder item if not exist in `options`
+    const createTagOption = (val: RawValueType, label?: any) => {
+      const mergedLabel = label ?? val;
+      return {
+        [mergedFieldNames.value.value]: val,
+        [mergedFieldNames.value.label]: mergedLabel,
+      } as DefaultOptionType;
+    };
+
+    // Fill tag as option if mode is `tags`
+    const filledTagOptions = computed(() => {
+      if (props.mode !== 'tags') {
+        return mergedOptions.value;
+      }
+
+      // >>> Tag mode
+      const cloneOptions = [...mergedOptions.value];
+
+      // Check if value exist in options (include new patch item)
+      const existOptions = (val: RawValueType) => valueOptions.value.has(val);
+
+      // Fill current value as option
+      [...mergedValues.value]
+        .sort((a, b) => (a.value < b.value ? -1 : 1))
+        .forEach(item => {
+          const val = item.value;
+
+          if (!existOptions(val)) {
+            cloneOptions.push(createTagOption(val, item.label));
+          }
+        });
+
+      return cloneOptions;
+    });
+
+    const filteredOptions = useFilterOptions(
+      filledTagOptions,
+      mergedFieldNames,
+      mergedSearchValue,
+      mergedFilterOption,
+      toRef(props, 'optionFilterProp'),
+    );
+
+    // Fill options with search value if needed
+    const filledSearchOptions = computed(() => {
+      if (
+        props.mode !== 'tags' ||
+        !mergedSearchValue.value ||
+        filteredOptions.value.some(
+          item => item[props.optionFilterProp || 'value'] === mergedSearchValue.value,
+        )
+      ) {
+        return filteredOptions.value;
+      }
+
+      // Fill search value as option
+      return [createTagOption(mergedSearchValue.value), ...filteredOptions.value];
+    });
+
+    const orderedFilteredOptions = computed(() => {
+      if (!props.filterSort) {
+        return filledSearchOptions.value;
+      }
+
+      return [...filledSearchOptions.value].sort((a, b) => props.filterSort(a, b));
+    });
+
+    const displayOptions = computed(() =>
+      flattenOptions(orderedFilteredOptions.value, {
+        fieldNames: mergedFieldNames.value,
+        childrenAsData: childrenAsData.value,
+      }),
+    );
+
+    // =========================== Change ===========================
+    const triggerChange = (values: DraftValueType) => {
+      const labeledValues = convert2LabelValues(values);
+      setInternalValue(labeledValues);
+
+      if (
+        props.onChange &&
+        // Trigger event only when value changed
+        (labeledValues.length !== mergedValues.value.length ||
+          labeledValues.some((newVal, index) => mergedValues.value[index]?.value !== newVal?.value))
+      ) {
+        const returnValues = props.labelInValue ? labeledValues : labeledValues.map(v => v.value);
+        const returnOptions = labeledValues.map(v =>
+          injectPropsWithOption(getMixedOption(v.value)),
+        );
+
+        props.onChange(
+          // Value
+          multiple.value ? returnValues : returnValues[0],
+          // Option
+          multiple.value ? returnOptions : returnOptions[0],
+        );
+      }
+    };
+
+    // ======================= Accessibility ========================
+    const [activeValue, setActiveValue] = useState<string>(null);
+    const [accessibilityIndex, setAccessibilityIndex] = useState(0);
+    const mergedDefaultActiveFirstOption = computed(() =>
+      props.defaultActiveFirstOption !== undefined
+        ? props.defaultActiveFirstOption
+        : props.mode !== 'combobox',
+    );
+
+    const onActiveValue: OnActiveValue = (active, index, { source = 'keyboard' } = {}) => {
+      setAccessibilityIndex(index);
+
+      if (props.backfill && props.mode === 'combobox' && active !== null && source === 'keyboard') {
+        setActiveValue(String(active));
+      }
+    };
+
+    // ========================= OptionList =========================
+    const triggerSelect = (val: RawValueType, selected: boolean) => {
+      const getSelectEnt = (): [RawValueType | LabelInValueType, DefaultOptionType] => {
+        const option = getMixedOption(val);
+        return [
+          props.labelInValue
+            ? {
+                label: option?.[mergedFieldNames.value.label],
+                value: val,
+                key: option.key ?? val,
+              }
+            : val,
+          injectPropsWithOption(option),
+        ];
+      };
+
+      if (selected && props.onSelect) {
+        const [wrappedValue, option] = getSelectEnt();
+        props.onSelect(wrappedValue, option);
+      } else if (!selected && props.onDeselect) {
+        const [wrappedValue, option] = getSelectEnt();
+        props.onDeselect(wrappedValue, option);
+      }
+    };
+
+    // Used for OptionList selection
+    const onInternalSelect = (val, info) => {
+      let cloneValues: (RawValueType | DisplayValueType)[];
+
+      // Single mode always trigger select only with option list
+      const mergedSelect = multiple.value ? info.selected : true;
+
+      if (mergedSelect) {
+        cloneValues = multiple.value ? [...mergedValues.value, val] : [val];
+      } else {
+        cloneValues = mergedValues.value.filter(v => v.value !== val);
+      }
+
+      triggerChange(cloneValues);
+      triggerSelect(val, mergedSelect);
+
+      // Clean search value if single or configured
+      if (props.mode === 'combobox') {
+        // setSearchValue(String(val));
+        setActiveValue('');
+      } else if (!multiple.value || props.autoClearSearchValue) {
+        setSearchValue('');
+        setActiveValue('');
+      }
+    };
+
+    // ======================= Display Change =======================
+    // BaseSelect display values change
+    const onDisplayValuesChange: BaseSelectProps['onDisplayValuesChange'] = (nextValues, info) => {
+      triggerChange(nextValues);
+
+      if (info.type === 'remove' || info.type === 'clear') {
+        info.values.forEach(item => {
+          triggerSelect(item.value, false);
+        });
+      }
+    };
+
+    // =========================== Search ===========================
+    const onInternalSearch: BaseSelectProps['onSearch'] = (searchText, info) => {
+      setSearchValue(searchText);
+      setActiveValue(null);
+
+      // [Submit] Tag mode should flush input
+      if (info.source === 'submit') {
+        const formatted = (searchText || '').trim();
+        // prevent empty tags from appearing when you click the Enter button
+        if (formatted) {
+          const newRawValues = Array.from(new Set<RawValueType>([...rawValues.value, formatted]));
+          triggerChange(newRawValues);
+          triggerSelect(formatted, true);
+          setSearchValue('');
+        }
+
+        return;
+      }
+
+      if (info.source !== 'blur') {
+        if (props.mode === 'combobox') {
+          triggerChange(searchText);
+        }
+
+        props.onSearch?.(searchText);
+      }
+    };
+
+    const onInternalSearchSplit: BaseSelectProps['onSearchSplit'] = words => {
+      let patchValues: RawValueType[] = words;
+
+      if (props.mode !== 'tags') {
+        patchValues = words
+          .map(word => {
+            const opt = labelOptions.value.get(word);
+            return opt?.value;
+          })
+          .filter(val => val !== undefined);
+      }
+
+      const newRawValues = Array.from(new Set<RawValueType>([...rawValues.value, ...patchValues]));
+      triggerChange(newRawValues);
+      newRawValues.forEach(newRawValue => {
+        triggerSelect(newRawValue, true);
+      });
+    };
+    const realVirtual = computed(
+      () => props.virtual !== false && props.dropdownMatchSelectWidth !== false,
+    );
+    useProvideSelectProps(
+      toReactive({
+        ...parsedOptions,
+        flattenOptions: displayOptions,
+        onActiveValue,
+        defaultActiveFirstOption: mergedDefaultActiveFirstOption,
+        onSelect: onInternalSelect,
+        menuItemSelectedIcon: toRef(props, 'menuItemSelectedIcon'),
+        rawValues,
+        fieldNames: mergedFieldNames,
+        virtual: realVirtual,
+        listHeight: toRef(props, 'listHeight'),
+        listItemHeight: toRef(props, 'listItemHeight'),
+        childrenAsData,
+      } as unknown as SelectContextProps),
+    );
+
+    // ========================== Warning ===========================
+    if (process.env.NODE_ENV !== 'production') {
+      watchEffect(
+        () => {
+          warningProps(props);
+        },
+        { flush: 'post' },
+      );
+    }
+    const selectRef = ref<BaseSelectRef>();
+    expose({
+      focus() {
+        selectRef.value?.focus();
+      },
+      blur() {
+        selectRef.value?.blur();
+      },
+      scrollTo(arg) {
+        selectRef.value?.scrollTo(arg);
+      },
+    } as BaseSelectRef);
+    const pickProps = computed(() => {
+      return omit(props, [
+        'id',
+        'mode',
+        'prefixCls',
+        'backfill',
+        'fieldNames',
+
+        // Search
+        'inputValue',
+        'searchValue',
+        'onSearch',
+        'autoClearSearchValue',
+
+        // Select
+        'onSelect',
+        'onDeselect',
+        'dropdownMatchSelectWidth',
+
+        // Options
+        'filterOption',
+        'filterSort',
+        'optionFilterProp',
+        'optionLabelProp',
+        'options',
+        'children',
+        'defaultActiveFirstOption',
+        'menuItemSelectedIcon',
+        'virtual',
+        'listHeight',
+        'listItemHeight',
+
+        // Value
+        'value',
+        'defaultValue',
+        'labelInValue',
+        'onChange',
+      ]);
+    });
+    return () => {
+      return (
+        <BaseSelect
+          {...pickProps.value}
+          {...attrs}
+          // >>> MISC
+          id={mergedId}
+          prefixCls={props.prefixCls}
+          ref={selectRef}
+          omitDomProps={OMIT_DOM_PROPS}
+          mode={props.mode}
+          // >>> Values
+          displayValues={displayValues.value}
+          onDisplayValuesChange={onDisplayValuesChange}
+          // >>> Search
+          searchValue={mergedSearchValue.value}
+          onSearch={onInternalSearch}
+          onSearchSplit={onInternalSearchSplit}
+          dropdownMatchSelectWidth={props.dropdownMatchSelectWidth}
+          // >>> OptionList
+          OptionList={OptionList}
+          emptyOptions={!displayOptions.value.length}
+          // >>> Accessibility
+          activeValue={activeValue.value}
+          activeDescendantId={`${mergedId}_list_${accessibilityIndex.value}`}
+          v-slots={slots}
+        />
+      );
+    };
+  },
+});
diff --git a/components/vc-select copy/SelectContext.ts b/components/vc-select2/SelectContext.ts
similarity index 100%
rename from components/vc-select copy/SelectContext.ts
rename to components/vc-select2/SelectContext.ts
diff --git a/components/vc-select copy/SelectTrigger.tsx b/components/vc-select2/SelectTrigger.tsx
similarity index 100%
rename from components/vc-select copy/SelectTrigger.tsx
rename to components/vc-select2/SelectTrigger.tsx
diff --git a/components/vc-select copy/Selector/Input.tsx b/components/vc-select2/Selector/Input.tsx
similarity index 100%
rename from components/vc-select copy/Selector/Input.tsx
rename to components/vc-select2/Selector/Input.tsx
diff --git a/components/vc-select copy/Selector/MultipleSelector.tsx b/components/vc-select2/Selector/MultipleSelector.tsx
similarity index 97%
rename from components/vc-select copy/Selector/MultipleSelector.tsx
rename to components/vc-select2/Selector/MultipleSelector.tsx
index 40408a2fa..4fddf5dfb 100644
--- a/components/vc-select copy/Selector/MultipleSelector.tsx	
+++ b/components/vc-select2/Selector/MultipleSelector.tsx
@@ -9,6 +9,7 @@ import PropTypes from '../../_util/vue-types';
 import type { VueNode } from '../../_util/type';
 import Overflow from '../../vc-overflow';
 import type { DisplayValueType, RenderNode, CustomTagProps, RawValueType } from '../BaseSelect';
+import type { BaseOptionType } from '../Select';
 
 type SelectorProps = InnerSelectorProps & {
   // Icon
@@ -140,12 +141,12 @@ const SelectSelector = defineComponent<SelectorProps>({
       itemDisabled: boolean,
       closable: boolean,
       onClose: (e: MouseEvent) => void,
+      option: BaseOptionType,
     ) {
       const onMouseDown = (e: MouseEvent) => {
         onPreventMouseDown(e);
         props.onToggleOpen(!open);
       };
-
       return (
         <span onMousedown={onMouseDown}>
           {props.tagRender({
@@ -154,13 +155,14 @@ const SelectSelector = defineComponent<SelectorProps>({
             disabled: itemDisabled,
             closable,
             onClose,
+            option,
           })}
         </span>
       );
     }
 
     function renderItem(valueItem: DisplayValueType) {
-      const { disabled: itemDisabled, label, value } = valueItem;
+      const { disabled: itemDisabled, label, value, option } = valueItem;
       const closable = !props.disabled && !itemDisabled;
 
       let displayLabel = label;
@@ -180,7 +182,7 @@ const SelectSelector = defineComponent<SelectorProps>({
       };
 
       return typeof props.tagRender === 'function'
-        ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose)
+        ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose, option)
         : defaultRenderSelector(label, displayLabel, itemDisabled, closable, onClose);
     }
 
diff --git a/components/vc-select copy/Selector/SingleSelector.tsx b/components/vc-select2/Selector/SingleSelector.tsx
similarity index 100%
rename from components/vc-select copy/Selector/SingleSelector.tsx
rename to components/vc-select2/Selector/SingleSelector.tsx
diff --git a/components/vc-select copy/Selector/index.tsx b/components/vc-select2/Selector/index.tsx
similarity index 100%
rename from components/vc-select copy/Selector/index.tsx
rename to components/vc-select2/Selector/index.tsx
diff --git a/components/vc-select copy/Selector/interface.ts b/components/vc-select2/Selector/interface.ts
similarity index 100%
rename from components/vc-select copy/Selector/interface.ts
rename to components/vc-select2/Selector/interface.ts
diff --git a/components/vc-select copy/TransBtn.tsx b/components/vc-select2/TransBtn.tsx
similarity index 100%
rename from components/vc-select copy/TransBtn.tsx
rename to components/vc-select2/TransBtn.tsx
diff --git a/components/vc-select copy/hooks/useBaseProps.ts b/components/vc-select2/hooks/useBaseProps.ts
similarity index 100%
rename from components/vc-select copy/hooks/useBaseProps.ts
rename to components/vc-select2/hooks/useBaseProps.ts
diff --git a/components/vc-select copy/hooks/useCache.ts b/components/vc-select2/hooks/useCache.ts
similarity index 100%
rename from components/vc-select copy/hooks/useCache.ts
rename to components/vc-select2/hooks/useCache.ts
diff --git a/components/vc-select copy/hooks/useDelayReset.ts b/components/vc-select2/hooks/useDelayReset.ts
similarity index 100%
rename from components/vc-select copy/hooks/useDelayReset.ts
rename to components/vc-select2/hooks/useDelayReset.ts
diff --git a/components/vc-select copy/hooks/useFilterOptions.ts b/components/vc-select2/hooks/useFilterOptions.ts
similarity index 100%
rename from components/vc-select copy/hooks/useFilterOptions.ts
rename to components/vc-select2/hooks/useFilterOptions.ts
diff --git a/components/vc-select copy/hooks/useId.ts b/components/vc-select2/hooks/useId.ts
similarity index 100%
rename from components/vc-select copy/hooks/useId.ts
rename to components/vc-select2/hooks/useId.ts
diff --git a/components/vc-select copy/hooks/useLock.ts b/components/vc-select2/hooks/useLock.ts
similarity index 100%
rename from components/vc-select copy/hooks/useLock.ts
rename to components/vc-select2/hooks/useLock.ts
diff --git a/components/vc-select copy/hooks/useOptions.ts b/components/vc-select2/hooks/useOptions.ts
similarity index 52%
rename from components/vc-select copy/hooks/useOptions.ts
rename to components/vc-select2/hooks/useOptions.ts
index fc7b628fe..8b0967ae7 100644
--- a/components/vc-select copy/hooks/useOptions.ts	
+++ b/components/vc-select2/hooks/useOptions.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { computed } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 import type { FieldNames, RawValueType } from '../Select';
 import { convertChildrenToData } from '../utils/legacyUtil';
 
@@ -12,35 +12,40 @@ export default function useOptions<OptionType>(
   children: Ref<any>,
   fieldNames: Ref<FieldNames>,
 ) {
-  return computed(() => {
-    let mergedOptions = options.value;
+  const mergedOptions = shallowRef();
+  const valueOptions = shallowRef();
+  const labelOptions = shallowRef();
+  watchEffect(() => {
+    let newOptions = options.value;
     const childrenAsData = !options.value;
 
     if (childrenAsData) {
-      mergedOptions = convertChildrenToData(children.value);
+      newOptions = convertChildrenToData(children.value);
     }
 
-    const valueOptions = new Map<RawValueType, OptionType>();
-    const labelOptions = new Map<any, OptionType>();
+    const newValueOptions = new Map<RawValueType, OptionType>();
+    const newLabelOptions = new Map<any, OptionType>();
 
     function dig(optionList: OptionType[], isChildren = false) {
       // for loop to speed up collection speed
       for (let i = 0; i < optionList.length; i += 1) {
         const option = optionList[i];
         if (!option[fieldNames.value.options] || isChildren) {
-          valueOptions.set(option[fieldNames.value.value], option);
-          labelOptions.set(option[fieldNames.value.label], option);
+          newValueOptions.set(option[fieldNames.value.value], option);
+          newLabelOptions.set(option[fieldNames.value.label], option);
         } else {
           dig(option[fieldNames.value.options], true);
         }
       }
     }
-    dig(mergedOptions);
-
-    return {
-      options: mergedOptions,
-      valueOptions,
-      labelOptions,
-    };
+    dig(newOptions);
+    mergedOptions.value = newOptions;
+    valueOptions.value = newValueOptions;
+    labelOptions.value = newLabelOptions;
   });
+  return {
+    options: mergedOptions,
+    valueOptions,
+    labelOptions,
+  };
 }
diff --git a/components/vc-select copy/hooks/useSelectTriggerControl.ts b/components/vc-select2/hooks/useSelectTriggerControl.ts
similarity index 100%
rename from components/vc-select copy/hooks/useSelectTriggerControl.ts
rename to components/vc-select2/hooks/useSelectTriggerControl.ts
diff --git a/components/vc-select copy/index.ts b/components/vc-select2/index.ts
similarity index 100%
rename from components/vc-select copy/index.ts
rename to components/vc-select2/index.ts
diff --git a/components/vc-select copy/interface.ts b/components/vc-select2/interface.ts
similarity index 100%
rename from components/vc-select copy/interface.ts
rename to components/vc-select2/interface.ts
diff --git a/components/vc-select copy/utils/commonUtil.ts b/components/vc-select2/utils/commonUtil.ts
similarity index 100%
rename from components/vc-select copy/utils/commonUtil.ts
rename to components/vc-select2/utils/commonUtil.ts
diff --git a/components/vc-select copy/utils/keyUtil.ts b/components/vc-select2/utils/keyUtil.ts
similarity index 100%
rename from components/vc-select copy/utils/keyUtil.ts
rename to components/vc-select2/utils/keyUtil.ts
diff --git a/components/vc-select copy/utils/legacyUtil.ts b/components/vc-select2/utils/legacyUtil.ts
similarity index 98%
rename from components/vc-select copy/utils/legacyUtil.ts
rename to components/vc-select2/utils/legacyUtil.ts
index ea875f5e6..f7a58d214 100644
--- a/components/vc-select copy/utils/legacyUtil.ts	
+++ b/components/vc-select2/utils/legacyUtil.ts
@@ -25,7 +25,7 @@ function convertNodeToOption<OptionType extends BaseOptionType = DefaultOptionTy
 }
 
 export function convertChildrenToData<OptionType extends BaseOptionType = DefaultOptionType>(
-  nodes: VueNode,
+  nodes: VueNode[],
   optionOnly = false,
 ): OptionType[] {
   const dd = flattenChildren(nodes as [])
diff --git a/components/vc-select copy/utils/platformUtil.ts b/components/vc-select2/utils/platformUtil.ts
similarity index 100%
rename from components/vc-select copy/utils/platformUtil.ts
rename to components/vc-select2/utils/platformUtil.ts
diff --git a/components/vc-select copy/utils/valueUtil.ts b/components/vc-select2/utils/valueUtil.ts
similarity index 100%
rename from components/vc-select copy/utils/valueUtil.ts
rename to components/vc-select2/utils/valueUtil.ts
diff --git a/components/vc-select copy/utils/warningPropsUtil.ts b/components/vc-select2/utils/warningPropsUtil.ts
similarity index 100%
rename from components/vc-select copy/utils/warningPropsUtil.ts
rename to components/vc-select2/utils/warningPropsUtil.ts