fix: Cascader missing props (#32143)

* fix: Cascader deps

* docs: Update using new API

* test: Test case cover

* chore: compressed skip dup check

.github/workflows/compressed-size.yml

@@ -15,5 +15,5 @@ jobs:
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         pattern: "./dist/**/*.min.{js,css}"
-        build-script: "dist:esbuild"
+        build-script: "dist:esbuild-no-dup-check"
         clean-script: "clean-lockfiles"

components/cascader/__tests__/index.test.js

@@ -473,4 +473,18 @@ describe('Cascader', () => {
     clickOption(wrapper, 0, 0);
     expect(onChange).toHaveBeenCalledWith(['Zhejiang', 'Hangzhou', 'West Lake'], expect.anything());
   });
+
+  it('legacy props', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const wrapper = mount(<Cascader open popupPlacement="topRight" popupClassName="mock-cls" />);
+
+    expect(wrapper.exists('.mock-cls')).toBeTruthy();
+    expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+    );
+
+    errorSpy.mockRestore();
+  });
 });

components/cascader/index.en-US.md

@@ -29,6 +29,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(`/`) |  |
+| dropdownClassName | The additional className of popup overlay | string | - | 4.17.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` |  |
@@ -39,8 +40,7 @@ Cascade selection box.
 | open | Set visible of cascader popup | boolean | - | 4.17.0 |
 | options | The data options of cascade | [Option](#Option)\[] | - |  |
 | placeholder | The input placeholder | string | `Please select` |  |
-| popupClassName | The additional className of popup overlay | string | - |  |
+| placement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 |
-| popupPlacement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |  |
 | showSearch | Whether show search input in single mode | boolean \| [Object](#showSearch) | false |  |
 | size | The input size | `large` \| `middle` \| `small` | - |  |
 | style | The additional style | CSSProperties | - |  |
@@ -72,7 +72,7 @@ interface Option {
 
 ## Methods
 
-| Name | Description | Version |
+| Name    | Description  | Version |
-| --- | --- | --- |
+| ------- | ------------ | ------- |
-| blur() | Remove focus |  |
+| blur()  | Remove focus |         |
-| focus() | Get focus |  |
+| focus() | Get focus    |         |

components/cascader/index.tsx

@@ -7,6 +7,7 @@ import omit from 'rc-util/lib/omit';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import RedoOutlined from '@ant-design/icons/RedoOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import devWarning from '../_util/devWarning';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -91,19 +92,21 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
     bordered = true,
     transitionName,
     choiceTransitionName = '',
+    popupClassName,
     dropdownClassName,
     expandIcon,
     showSearch,
     allowClear = true,
     notFoundContent,
     direction,
+    getPopupContainer,
     ...rest
   } = props;
 
   const restProps = omit(rest, ['suffixIcon' as any]);
 
   const {
-    // getPopupContainer: getContextPopupContainer,
+    getPopupContainer: getContextPopupContainer,
     getPrefixCls,
     renderEmpty,
     direction: rootDirection,
@@ -114,6 +117,15 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
   const mergedDirection = direction || rootDirection;
   const isRtl = mergedDirection === 'rtl';
 
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    devWarning(
+      popupClassName === undefined,
+      'Cascader',
+      '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+    );
+  }
+
   // =================== No Found ====================
   const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader');
 
@@ -123,9 +135,13 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
   const cascaderPrefixCls = getPrefixCls('cascader', customizePrefixCls);
 
   // =================== Dropdown ====================
-  const mergedDropdownClassName = classNames(dropdownClassName, `${cascaderPrefixCls}-dropdown`, {
+  const mergedDropdownClassName = classNames(
-    [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl',
+    dropdownClassName || popupClassName,
-  });
+    `${cascaderPrefixCls}-dropdown`,
+    {
+      [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl',
+    },
+  );
 
   // ==================== Search =====================
   const mergedShowSearch = React.useMemo(() => {
@@ -205,6 +221,7 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref<Cascader
       dropdownPrefixCls={customizePrefixCls || cascaderPrefixCls}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
+      getPopupContainer={getPopupContainer || getContextPopupContainer}
       ref={ref}
     />
   );

components/cascader/index.zh-CN.md

@@ -30,6 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
 | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
+| dropdownClassName | 自定义浮层类名 | string | - | 4.17.0 |
 | dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
 | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` |  |
@@ -40,8 +41,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | open | 控制浮层显隐 | boolean | - | 4.17.0 |
 | options | 可选项数据源 | [Option](#Option)\[] | - |  |
 | placeholder | 输入框占位文本 | string | `请选择` |  |
-| popupClassName | 自定义浮层类名 | string | - |  |
+| placement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 |
-| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |  |
 | showSearch | 在选择框中显示搜索框 | boolean \| [Object](#showSearch) | false |  |
 | size | 输入框大小 | `large` \| `middle` \| `small` | - |  |
 | style | 自定义样式 | CSSProperties | - |  |
@@ -75,9 +75,9 @@ interface Option {
 
 ## 方法
 
-| 名称 | 描述 | 版本 |
+| 名称    | 描述     | 版本 |
-| --- | --- | --- |
+| ------- | -------- | ---- |
-| blur() | 移除焦点 |  |
+| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |  |
+| focus() | 获取焦点 |      |
 
 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。

components/config-provider/__tests__/container.test.js

@@ -4,6 +4,7 @@ import ConfigProvider from '..';
 import DatePicker from '../../date-picker';
 import Slider from '../../slider';
 import Drawer from '../../drawer';
+import Cascader from '../../cascader';
 
 describe('ConfigProvider.GetPopupContainer', () => {
   it('Datepicker', () => {
@@ -27,7 +28,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
     expect(getPopupContainer).toHaveBeenCalled();
   });
 
-  it('drawer', () => {
+  it('Drawer', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
     const Demo = ({ visible }) => (
       <ConfigProvider getPopupContainer={getPopupContainer}>
@@ -37,4 +38,10 @@ describe('ConfigProvider.GetPopupContainer', () => {
     mount(<Demo visible />);
     expect(getPopupContainer).toHaveBeenCalled();
   });
+
+  it('Cascader', () => {
+    const getPopupContainer = jest.fn(node => node.parentNode);
+    mount(<Cascader getPopupContainer={getPopupContainer} open />);
+    expect(getPopupContainer).toHaveBeenCalled();
+  });
 });

package.json

@@ -68,6 +68,7 @@
     "deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
     "dist": "antd-tools run dist",
     "dist:esbuild": "ESBUILD=true npm run dist",
+    "dist:esbuild-no-dup-check": "ESBUILD=true NO_DUP_CHECK=true npm run dist",
     "lint": "npm run tsc && npm run lint:script && npm run lint:demo && npm run lint:style && npm run lint:deps && npm run lint:md",
     "lint-fix": "npm run lint-fix:script && npm run lint-fix:demo && npm run lint-fix:style",
     "lint-fix:demo": "npm run lint:demo -- --fix",
@@ -117,7 +118,7 @@
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.21",
     "moment": "^2.25.3",
-    "rc-cascader": "~2.0.0-alpha.17",
+    "rc-cascader": "~2.0.0-alpha.18",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.6.0",
@@ -135,7 +136,7 @@
     "rc-progress": "~3.1.0",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.0.0",
-    "rc-select": "~13.0.0-alpha.4",
+    "rc-select": "~13.1.0-alpha.0",
     "rc-slider": "~9.7.1",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
@@ -144,7 +145,7 @@
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.1.1",
     "rc-tree": "~5.0.1",
-    "rc-tree-select": "~4.4.0-alpha.4",
+    "rc-tree-select": "~4.5.0-alpha.0",
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.13.1",

webpack.config.js

@@ -145,12 +145,14 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
       }),
     );
 
-    config.plugins.push(
+    if (!process.env.NO_DUP_CHECK) {
-      new DuplicatePackageCheckerPlugin({
+      config.plugins.push(
-        verbose: true,
+        new DuplicatePackageCheckerPlugin({
-        emitError: true,
+          verbose: true,
-      }),
+          emitError: true,
-    );
+        }),
+      );
+    }
   });
 
   processWebpackThemeConfig(webpackDarkConfig, 'dark', darkVars);