feat: Replace dropdownClassName to popupClassName (#36880)

components/auto-complete/__tests__/index.test.js

@@ -89,4 +89,18 @@ describe('AutoComplete', () => {
     );
     expect(container.querySelector('input').classList.contains('custom')).toBeTruthy();
   });
+
+  it('should show warning when use dropdownClassName', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <AutoComplete dropdownClassName="myCustomClassName">
+        <AutoComplete.Option value="111">111</AutoComplete.Option>
+        <AutoComplete.Option value="222">222</AutoComplete.Option>
+      </AutoComplete>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: AutoComplete] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });

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

@@ -66,7 +66,7 @@ const options = [
 
 const App: React.FC = () => (
   <AutoComplete
-    dropdownClassName="certain-category-search-dropdown"
+    popupClassName="certain-category-search-dropdown"
     dropdownMatchSelectWidth={500}
     style={{ width: 250 }}
     options={options}

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

@@ -31,7 +31,7 @@ The differences with Select are:
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | Initial selected option | string | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| dropdownClassName | The className of dropdown menu | string | - |  |
+| popupClassName | The className of dropdown menu | string | - | 4.23.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 |  |
 | 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 \| function(inputValue, option) | true |  |
 | notFoundContent | Specify content to show when no result matches | string | `Not Found` |  |

components/auto-complete/index.tsx

@@ -41,6 +41,12 @@ export interface AutoCompleteProps<
   > {
   dataSource?: DataSourceItemType[];
   status?: InputStatus;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major version.
+   *   Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
+  popupClassName?: string;
 }
 
 function isSelectOptionOrSelectOptGroup(child: any): Boolean {
@@ -51,7 +57,14 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
   props,
   ref,
 ) => {
-  const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    popupClassName,
+    dropdownClassName,
+    children,
+    dataSource,
+  } = props;
   const childNodes: React.ReactElement[] = toArray(children);
 
   // ============================= Input =============================
@@ -112,6 +125,12 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
     '`dataSource` is deprecated, please use `options` instead.',
   );
 
+  warning(
+    !dropdownClassName,
+    'AutoComplete',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+
   warning(
     !customizeInput || !('size' in props),
     'AutoComplete',
@@ -128,6 +147,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
             ref={ref}
             {...omit(props, ['dataSource'])}
             prefixCls={prefixCls}
+            dropdownClassName={popupClassName || dropdownClassName}
             className={classNames(`${prefixCls}-auto-complete`, className)}
             mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
             {...{

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

@@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |

components/cascader/__tests__/index.test.js

@@ -540,7 +540,7 @@ describe('Cascader', () => {
     it('popupClassName', () => {
       const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const { container } = render(
-        <Cascader open popupPlacement="bottomLeft" popupClassName="mock-cls" />,
+        <Cascader open popupPlacement="bottomLeft" dropdownClassName="mock-cls" />,
       );
 
       expect(container.querySelector('.mock-cls')).toBeTruthy();
@@ -549,7 +549,7 @@ describe('Cascader', () => {
       expect(global.triggerProps.popupPlacement).toEqual('bottomLeft');
 
       expect(errorSpy).toHaveBeenCalledWith(
-        'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+        'Warning: [antd: Cascader] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
       );
 
       errorSpy.mockRestore();

components/cascader/index.en-US.md

@@ -30,7 +30,7 @@ Cascade selection box.
 | defaultValue | Initial selected value | string\[] \| number\[] | \[] |  |
 | disabled | Whether disabled select | boolean | false |  |
 | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 |
-| dropdownClassName | The additional className of popup overlay | string | - | 4.17.0 |
+| popupClassName | The additional className of popup overlay | string | - | 4.23.0 |
 | dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
 | expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` |  |

components/cascader/index.tsx

@@ -108,6 +108,11 @@ export type CascaderProps<DataNodeType> = UnionCascaderProps & {
   suffixIcon?: React.ReactNode;
   options?: DataNodeType[];
   status?: InputStatus;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
 };
 
 export interface CascaderRef {
@@ -164,9 +169,9 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
 
   // =================== Warning =====================
   warning(
-    popupClassName === undefined,
+    !dropdownClassName,
     'Cascader',
-    '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
   );
 
   warning(
@@ -185,7 +190,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
 
   // =================== Dropdown ====================
   const mergedDropdownClassName = classNames(
-    dropdownClassName || popupClassName,
+    popupClassName || dropdownClassName,
     `${cascaderPrefixCls}-dropdown`,
     {
       [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl',

components/cascader/index.zh-CN.md

@@ -31,7 +31,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
 | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 |
-| dropdownClassName | 自定义浮层类名 | string | - | 4.17.0 |
+| popupClassName | 自定义浮层类名 | string | - | 4.23.0 |
 | dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
 | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` |  |

components/date-picker/__tests__/DatePicker.test.js

@@ -184,6 +184,20 @@ describe('DatePicker', () => {
     ).toBe(60);
   });
 
+  it('DatePicker should show warning when use dropdownClassName', () => {
+    mount(<DatePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('RangePicker should show warning when use dropdownClassName', () => {
+    mount(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
     const startDate = moment('1982-02-12');
     const endDate = moment('1982-02-22');

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -18,6 +18,7 @@ import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 import enUS from '../locale/en_US';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
+import warning from '../../_util/warning';
 
 export default function generateRangePicker<DateType>(
   generateConfig: GenerateConfig<DateType>,
@@ -26,7 +27,14 @@ export default function generateRangePicker<DateType>(
 
   const RangePicker = forwardRef<
     InternalRangePickerProps | CommonPickerMethods,
-    RangePickerProps<DateType>
+    RangePickerProps<DateType> & {
+      /**
+       * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+       *   version.Please use `popupClassName` instead.
+       */
+      dropdownClassName: string;
+      popupClassName?: string;
+    }
   >((props, ref) => {
     const {
       prefixCls: customizePrefixCls,
@@ -37,6 +45,8 @@ export default function generateRangePicker<DateType>(
       disabled: customDisabled,
       bordered = true,
       placeholder,
+      popupClassName,
+      dropdownClassName,
       status: customStatus,
       ...restProps
     } = props;
@@ -54,6 +64,12 @@ export default function generateRangePicker<DateType>(
       ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}),
     };
 
+    warning(
+      !dropdownClassName,
+      'RangePicker',
+      '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+
     // ===================== Size =====================
     const size = React.useContext(SizeContext);
     const mergedSize = customizeSize || size;
@@ -92,6 +108,7 @@ export default function generateRangePicker<DateType>(
               }
               disabled={mergedDisabled}
               ref={innerRef}
+              dropdownClassName={popupClassName || dropdownClassName}
               dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
               placeholder={getRangePlaceholder(picker, locale, placeholder)}
               suffixIcon={suffixNode}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -24,8 +24,13 @@ import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './i
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type DatePickerProps = PickerProps<DateType> & {
     status?: InputStatus;
+    /**
+     * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+     *   version.Please use `popupClassName` instead.
+     */
+    dropdownClassName?: string;
+    popupClassName?: string;
   };
-
   function getPicker<InnerPickerProps extends DatePickerProps>(
     picker?: PickerMode,
     displayName?: string,
@@ -40,17 +45,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           bordered = true,
           placement,
           placeholder,
+          popupClassName,
+          dropdownClassName,
           disabled: customDisabled,
           status: customStatus,
           ...restProps
         } = props;
 
-        warning(
-          picker !== 'quarter',
-          displayName!,
-          `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
-        );
-
         const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
         const prefixCls = getPrefixCls('picker', customizePrefixCls);
         const innerRef = React.useRef<RCPicker<DateType>>(null);
@@ -80,6 +81,18 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         };
         const rootPrefixCls = getPrefixCls();
 
+        // =================== Warning =====================
+        warning(
+          picker !== 'quarter',
+          displayName!,
+          `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
+        );
+
+        warning(
+          !dropdownClassName,
+          'DatePicker',
+          '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+        );
         // ===================== Size =====================
         const size = React.useContext(SizeContext);
         const mergedSize = customizeSize || size;
@@ -110,6 +123,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
                   suffixIcon={suffixNode}
                   dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                  dropdownClassName={popupClassName || dropdownClassName}
                   clearIcon={<CloseCircleFilled />}
                   prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                   nextIcon={<span className={`${prefixCls}-next-icon`} />}

components/date-picker/index.en-US.md

@@ -59,7 +59,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - |  |
-| dropdownClassName | To customize the className of the popup calendar | string | - |  |
+| popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
 | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
 | locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |

components/date-picker/index.zh-CN.md

@@ -60,7 +60,7 @@ import locale from 'antd/es/locale/zh_CN';
 | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - |  |
-| dropdownClassName | 额外的弹出日历 className | string | - |  |
+| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
 | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |

components/select/__tests__/index.test.js

@@ -91,6 +91,16 @@ describe('Select', () => {
     expect(container.querySelectorAll('.anticon-down').length).toBe(0);
     expect(container.querySelectorAll('.anticon-search').length).toBe(1);
   });
+
+  it('should show warning when use dropdownClassName', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Select dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Select] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+    errorSpy.mockRestore();
+  });
+
   //
   describe('Select Custom Icons', () => {
     it('should support customized icons', () => {

components/select/index.en-US.md

@@ -33,7 +33,7 @@ Select component to select value from options.
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | Initial selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| dropdownClassName | The className of dropdown menu | string | - |  |
+| popupClassName | The className of dropdown menu | string | - | 4.23.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 |  |
 | dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | The style of dropdown menu | CSSProperties | - |  |

components/select/index.tsx

@@ -19,6 +19,7 @@ import { getTransitionDirection, getTransitionName } from '../_util/motion';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import getIcons from './utils/iconUtil';
+import warning from '../_util/warning';
 
 type RawValue = string | number;
 
@@ -53,6 +54,12 @@ export interface SelectProps<
   placement?: SelectCommonPlacement;
   mode?: 'multiple' | 'tags';
   status?: InputStatus;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
+  popupClassName?: string;
 }
 
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
@@ -64,6 +71,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     className,
     getPopupContainer,
     dropdownClassName,
+    popupClassName,
     listHeight = 256,
     placement,
     listItemHeight = 24,
@@ -107,6 +115,13 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   const mergedShowArrow =
     showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
 
+  // =================== Warning =====================
+  warning(
+    !dropdownClassName,
+    'Select',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+
   // ===================== Form Status =====================
   const {
     status: contextStatus,
@@ -138,7 +153,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
 
   const selectProps = omit(props as typeof props & { itemIcon: any }, ['suffixIcon', 'itemIcon']);
 
-  const rcSelectRtlDropdownClassName = classNames(dropdownClassName, {
+  const rcSelectRtlDropdownClassName = classNames(popupClassName || dropdownClassName, {
     [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
   });
 

components/select/index.zh-CN.md

@@ -34,7 +34,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |

components/time-picker/__tests__/index.test.js

@@ -84,6 +84,20 @@ describe('TimePicker', () => {
     expect(wrapper.find('RangePicker').last().prop('dropdownClassName')).toEqual(popupClassName);
   });
 
+  it('RangePicker should show warning when use dropdownClassName', () => {
+    mount(<TimePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('TimePicker should show warning when use dropdownClassName', () => {
+    mount(<TimePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: TimePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('should support bordered', () => {
     const wrapper = mount(
       <TimePicker

components/time-picker/index.tsx

@@ -13,31 +13,50 @@ export interface TimePickerLocale {
 }
 
 export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Moment>, 'picker'> {
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
   popupClassName?: string;
 }
 
-const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => (
+const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => {
-  <InternalRangePicker
+  const { dropdownClassName, popupClassName } = props;
-    {...props}
+  warning(
-    dropdownClassName={props.popupClassName}
+    !dropdownClassName,
-    picker="time"
+    'RangePicker',
-    mode={undefined}
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    ref={ref}
+  );
-  />
+  return (
-));
+    <InternalRangePicker
+      {...props}
+      dropdownClassName={popupClassName || dropdownClassName}
+      picker="time"
+      mode={undefined}
+      ref={ref}
+    />
+  );
+});
 
 export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
   addon?: () => React.ReactNode;
   popupClassName?: string;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
   status?: InputStatus;
 }
 
 const TimePicker = React.forwardRef<any, TimePickerProps>(
-  ({ addon, renderExtraFooter, popupClassName, ...restProps }, ref) => {
+  ({ addon, renderExtraFooter, popupClassName, dropdownClassName, ...restProps }, ref) => {
     const internalRenderExtraFooter = React.useMemo(() => {
       if (renderExtraFooter) {
         return renderExtraFooter;
       }
+
       if (addon) {
         warning(
           false,
@@ -49,10 +68,16 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
       return undefined;
     }, [addon, renderExtraFooter]);
 
+    warning(
+      !dropdownClassName,
+      'TimePicker',
+      '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+
     return (
       <InternalTimePicker
+        dropdownClassName={popupClassName || dropdownClassName}
         {...restProps}
-        dropdownClassName={popupClassName}
         mode={undefined}
         ref={ref}
         renderExtraFooter={internalRenderExtraFooter}

components/tree-select/__tests__/index.test.js

@@ -50,4 +50,13 @@ describe('TreeSelect', () => {
     const wrapper = mount(<TreeSelect treeIcon open notFoundContent="notFoundContent" />);
     expect(wrapper.text()).toBe('notFoundContent');
   });
+
+  it('should show warning when use dropdownClassName', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<TreeSelect dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: TreeSelect] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });

components/tree-select/index.en-US.md

@@ -22,7 +22,7 @@ Tree selection control.
 | bordered | Whether has border style | boolean | true |  |
 | defaultValue | To set the initial selected treeNode(s) | string \| string\[] | - |  |
 | disabled | Disabled or not | boolean | false |  |
-| dropdownClassName | The className of dropdown menu | string | - |  |
+| popupClassName | The className of dropdown menu | string | - | 4.23.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 |  |
 | dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | To set the style of the dropdown menu | CSSProperties | - |  |

components/tree-select/index.tsx

@@ -50,6 +50,12 @@ export interface TreeSelectProps<
   size?: SizeType;
   disabled?: boolean;
   placement?: SelectCommonPlacement;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
+  popupClassName?: string;
   bordered?: boolean;
   treeLine?: TreeProps['showLine'];
   status?: InputStatus;
@@ -73,6 +79,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     treeLine,
     getPopupContainer,
     dropdownClassName,
+    popupClassName,
     treeIcon = false,
     transitionName,
     choiceTransitionName = '',
@@ -99,13 +106,23 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     '`multiple` will always be `true` when `treeCheckable` is true',
   );
 
+  warning(
+    !dropdownClassName,
+    'TreeSelect',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+
   const prefixCls = getPrefixCls('select', customizePrefixCls);
   const treePrefixCls = getPrefixCls('select-tree', customizePrefixCls);
   const treeSelectPrefixCls = getPrefixCls('tree-select', customizePrefixCls);
 
-  const mergedDropdownClassName = classNames(dropdownClassName, `${treeSelectPrefixCls}-dropdown`, {
+  const mergedDropdownClassName = classNames(
-    [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
+    popupClassName || dropdownClassName,
-  });
+    `${treeSelectPrefixCls}-dropdown`,
+    {
+      [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
+    },
+  );
 
   const isMultiple = !!(treeCheckable || multiple);
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;

components/tree-select/index.zh-CN.md

@@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | bordered | 是否显示边框 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的样式 | object | - |  |