refactor: auto-complete

components/auto-complete/demo/certain-category.vue

@@ -20,7 +20,7 @@ Lookup-Patterns - Certain Category.
     <a-auto-complete
       v-model:value="value"
       class="certain-category-search"
-      dropdown-class-name="certain-category-search-dropdown"
+      popup-class-name="certain-category-search-dropdown"
       :dropdown-match-select-width="500"
       style="width: 250px"
       :options="dataSource"

components/auto-complete/index.en-US.md

@@ -33,6 +33,7 @@ The differences with Select are:
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | disabled | Whether disabled select | boolean | false |  |
+| popupClassName | The className of dropdown menu | string | - | 4.0 |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |  |

components/auto-complete/index.tsx

@@ -58,6 +58,11 @@ const AutoComplete = defineComponent({
       'AutoComplete',
       '`options` slot is deprecated, please use props `options` instead.',
     );
+    warning(
+      !props.dropdownClassName,
+      'AutoComplete',
+      '`dropdownClassName` is deprecated, please use `popupClassName` instead.',
+    );
     const selectRef = ref();
     const getInputElement = () => {
       const children = flattenChildren(slots.default?.());
@@ -132,6 +137,7 @@ const AutoComplete = defineComponent({
           notFoundContent,
           // placeholder: '',
           class: cls,
+          popupClassName: props.popupClassName || props.dropdownClassName,
           ref: selectRef,
         },
         ['dataSource', 'loading'],

components/auto-complete/index.zh-CN.md

@@ -34,6 +34,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | disabled | 是否禁用 | boolean | false |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |

components/auto-complete/style/index.less

@@ -1,16 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../input/style/mixin';
-
-@input-prefix-cls: ~'@{ant-prefix}-input';
-@select-prefix-cls: ~'@{ant-prefix}-select';
-@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
-
-.@{autocomplete-prefix-cls} {
-  .reset-component();
-
-  // https://github.com/ant-design/ant-design/issues/22302
-  .@{select-prefix-cls}-clear {
-    right: 13px;
-  }
-}

components/auto-complete/style/index.tsx

@@ -1,5 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-
-// style dependencies
-import '../../select/style';

components/style.ts

@@ -25,7 +25,7 @@ import './radio/style';
 // import './spin/style';
 // import './select/style';
 // import './switch/style';
-import './auto-complete/style';
+// import './auto-complete/style';
 // import './affix/style';
 // import './cascader/style';
 // import './back-top/style';