test: Update snapshot

.github/workflows/site-deploy.yml

@@ -62,9 +62,6 @@ jobs:
 
       - name: deploy
         uses: peaceiris/actions-gh-pages@v3
-        env:
-          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-          PUBLISH_BRANCH: gh-pages
-          PUBLISH_DIR: ./_site
         with:
-          emptyCommits: false
+          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          publish_dir: ./_site

CHANGELOG.en-US.md

@@ -15,6 +15,17 @@ timeline: true
 
 ---
 
+## 4.17.2
+
+`2021-11-26`
+
+- 💄 Fix Form broken layout when set `wrapperCol={{ span: 24 }}`. [#32981](https://github.com/ant-design/ant-design/pull/32981)
+- 🐞 Fix Modal `centered` was not centered vertically. [#33022](https://github.com/ant-design/ant-design/pull/33022)
+- 🐞 Cascader typescript fix definition missing `suffixIcon` and support generic of `options` type. [#33008](https://github.com/ant-design/ant-design/pull/33008)
+- 🐞 Fix Input.Search don't trigger click event on element inside `enterButton`. [#32999](https://github.com/ant-design/ant-design/pull/32999)
+- 🇪🇪 Added missing Estonian translations. [#33005](https://github.com/ant-design/ant-design/pull/33005) [@wedeso](https://github.com/wedeso)
+- 🤖 Tree support generic to work more well with `fieldNames`. [#32992](https://github.com/ant-design/ant-design/pull/32992)
+
 ## 4.17.1
 
 `2021-11-22`

CHANGELOG.zh-CN.md

@@ -15,6 +15,17 @@ timeline: true
 
 ---
 
+## 4.17.2
+
+`2021-11-26`
+
+- 💄 修复 Form `wrapperCol={{ span: 24 }}` 时样式错乱的问题。[#32981](https://github.com/ant-design/ant-design/pull/32981)
+- 🐞 修复 Modal `centered` 略微偏上的问题。[#33022](https://github.com/ant-design/ant-design/pull/33022)
+- 🐞 Cascader 丢失 `suffixIcon` 定义问题并且支持 `options` 泛型定义。[#33008](https://github.com/ant-design/ant-design/pull/33008)
+- 🐞 修复 Input.Search 下 `enterButton` 内元素上的 `onClick` 未被触发的问题。[#32999](https://github.com/ant-design/ant-design/pull/32999)
+- 🇪🇪 补充爱沙尼亚语言包。[#33005](https://github.com/ant-design/ant-design/pull/33005) [@wedeso](https://github.com/wedeso)
+- 🤖 Tree 支持泛型以更好的配合 `fieldNames`。[#32992](https://github.com/ant-design/ant-design/pull/32992)
+
 ## 4.17.1
 
 `2021-11-22`

components/affix/__tests__/Affix.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
-import ResizeObserverImpl from 'rc-resize-observer';
 import Affix, { AffixProps, AffixState } from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
@@ -206,24 +205,7 @@ describe('Affix Render', () => {
 
       // Mock trigger resize
       updateCalled.mockReset();
-      const resizeObserverInstance: ReactWrapper<HTMLAttributes, unknown, ResizeObserverImpl> =
+      (affixMounterWrapper as any).triggerResize(index);
-        affixMounterWrapper.find('ResizeObserver') as any;
-      resizeObserverInstance
-        .at(index)
-        .instance()
-        .onResize(
-          [
-            {
-              target: {
-                getBoundingClientRect: () => ({ width: 99, height: 99 }),
-              } as Element,
-              contentRect: {} as DOMRect,
-              borderBoxSize: [],
-              contentBoxSize: [],
-            },
-          ],
-          {} as unknown as ResizeObserver,
-        );
       await sleep(20);
 
       expect(updateCalled).toHaveBeenCalled();

components/avatar/__tests__/__snapshots__/Avatar.test.js.snap

@@ -184,18 +184,25 @@ exports[`Avatar Render should show image on success after a failure state 1`] =
     <ResizeObserver
       onResize={[Function]}
     >
-      <span
+      <SingleObserver
-        className="ant-avatar-string"
+        key="rc-observer-key-0"
-        style={
+        onResize={[Function]}
-          Object {
-            "WebkitTransform": "scale(1) translateX(-50%)",
-            "msTransform": "scale(1) translateX(-50%)",
-            "transform": "scale(1) translateX(-50%)",
-          }
-        }
       >
-        Fallback
+        <DomWrapper>
-      </span>
+          <span
+            className="ant-avatar-string"
+            style={
+              Object {
+                "WebkitTransform": "scale(1) translateX(-50%)",
+                "msTransform": "scale(1) translateX(-50%)",
+                "transform": "scale(1) translateX(-50%)",
+              }
+            }
+          >
+            Fallback
+          </span>
+        </DomWrapper>
+      </SingleObserver>
     </ResizeObserver>
   </span>
 </Avatar>

components/button/button.tsx

@@ -177,12 +177,8 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   };
 
   // =============== Update Loading ===============
-  let loadingOrDelay: Loading;
+  const loadingOrDelay: Loading =
-  if (typeof loading === 'object' && loading.delay) {
+    typeof loading === 'object' && loading.delay ? loading.delay || true : !!loading;
-    loadingOrDelay = loading.delay || true;
-  } else {
-    loadingOrDelay = !!loading;
-  }
 
   React.useEffect(() => {
     clearTimeout(delayTimeoutRef.current);
@@ -222,19 +218,9 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
   const autoInsertSpace = autoInsertSpaceInButton !== false;
 
-  // large => lg
+  const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
-  // small => sm
+  const sizeFullname = customizeSize || size;
-  let sizeCls = '';
+  const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
-  switch (customizeSize || size) {
-    case 'large':
-      sizeCls = 'lg';
-      break;
-    case 'small':
-      sizeCls = 'sm';
-      break;
-    default:
-      break;
-  }
 
   const iconType = innerLoading ? 'loading' : icon;
 

components/carousel/index.tsx

@@ -25,7 +25,7 @@ export interface CarouselRef {
   goTo: (slide: number, dontAnimate?: boolean) => void;
   next: () => void;
   prev: () => void;
-  autoPlay: boolean;
+  autoPlay: (palyType?: 'update' | 'leave' | 'blur') => void;
   innerSlider: any;
 }
 

components/cascader/__tests__/index.test.js

@@ -475,17 +475,30 @@ describe('Cascader', () => {
     expect(onChange).toHaveBeenCalledWith(['Zhejiang', 'Hangzhou', 'West Lake'], expect.anything());
   });
 
-  it('legacy props', () => {
+  describe('legacy props', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    it('popupClassName', () => {
-    const wrapper = mount(<Cascader open popupPlacement="topRight" popupClassName="mock-cls" />);
+      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.exists('.mock-cls')).toBeTruthy();
-    expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
 
-    expect(errorSpy).toHaveBeenCalledWith(
+      expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+        'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
-    );
+      );
 
-    errorSpy.mockRestore();
+      errorSpy.mockRestore();
+    });
+
+    it('displayRender & multiple', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      mount(<Cascader multiple displayRender={() => null} />);
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Cascader] `displayRender` not work on `multiple`. Please use `tagRender` instead.',
+      );
+
+      errorSpy.mockRestore();
+    });
   });
 });

components/cascader/index.en-US.md

@@ -28,7 +28,7 @@ Cascade selection box.
 | className | The additional css class | string | - |  |
 | 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(`/`) |  |
+| displayRender | The render function of displaying single selected options. You can use tagRender for multiple mode | (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 |

components/cascader/index.tsx

@@ -130,6 +130,12 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
       'Cascader',
       '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
     );
+
+    devWarning(
+      !multiple || !props.displayRender,
+      'Cascader',
+      '`displayRender` not work on `multiple`. Please use `tagRender` instead.',
+    );
   }
 
   // =================== No Found ====================

components/cascader/index.zh-CN.md

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

components/collapse/style/index.less

@@ -22,6 +22,7 @@
     }
 
     > .@{collapse-prefix-cls}-header {
+      position: relative; // Compatible with old version of antd, should remove in next version
       display: flex;
       flex-wrap: nowrap;
       align-items: flex-start;

components/form/style/components.less

@@ -7,11 +7,6 @@
 // =                      Children Component                      =
 // ================================================================
 .@{form-item-prefix-cls} {
-  .@{ant-prefix}-mentions,
-  textarea.@{ant-prefix}-input {
-    height: auto;
-  }
-
   // input[type=file]
   .@{ant-prefix}-upload {
     background: transparent;

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -3363,6 +3363,19 @@ Array [
 ]
 `;
 
+exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] = `
+<div
+  class="ant-input-textarea ant-input-textarea-show-count"
+  data-count="0 / 100"
+  style="height:120px"
+>
+  <textarea
+    class="ant-input"
+    maxlength="100"
+  />
+</div>
+`;
+
 exports[`renders ./components/input/demo/tooltip.md correctly 1`] = `
 <input
   class="ant-input"

components/input/__tests__/textarea.test.js

@@ -139,18 +139,7 @@ describe('TextArea', () => {
     const onResize = jest.fn();
     const wrapper = mount(<TextArea onResize={onResize} autoSize />);
     await sleep(100);
-    wrapper
+    wrapper.triggerResize();
-      .find('ResizeObserver')
-      .instance()
-      .onResize([
-        {
-          target: {
-            getBoundingClientRect() {
-              return {};
-            },
-          },
-        },
-      ]);
     await Promise.resolve();
 
     expect(onResize).toHaveBeenCalledWith(

components/input/demo/textarea-show-count.md

@@ -0,0 +1,29 @@
+---
+order: 12
+title:
+  zh-CN: 带字数提示的文本域
+  en-US: Textarea with character counting
+---
+
+## zh-CN
+
+展示字数提示。
+
+## en-US
+
+Show character counting.
+
+```jsx
+import { Input } from 'antd';
+
+const { TextArea } = Input;
+
+const onChange = e => {
+  console.log('Change:', e.target.value);
+};
+
+ReactDOM.render(
+  <TextArea showCount maxLength={100} style={{ height: 120 }} onChange={onChange} />,
+  mountNode,
+);
+```

components/input/style/index.less

@@ -47,8 +47,13 @@
     }
   }
 
-  &-textarea {
+  &-textarea-show-count {
-    &-show-count::after {
+    // https://github.com/ant-design/ant-design/issues/33049
+    > .@{input-prefix-cls} {
+      height: 100%;
+    }
+
+    &::after {
       float: right;
       color: @text-color-secondary;
       white-space: nowrap;

components/locale/zh_TW.tsx

@@ -69,6 +69,7 @@ const localeValues: Locale = {
     back: '返回',
   },
   Form: {
+    optional: '（可選）',
     defaultValidateMessages: {
       default: '字段驗證錯誤${label}',
       required: '請輸入${label}',

components/page-header/__tests__/index.test.js

@@ -157,6 +157,6 @@ describe('PageHeader', () => {
     wrapper.triggerResize();
     await Promise.resolve();
     wrapper.update();
-    expect(wrapper.find('.ant-page-header').hasClass('ant-page-header-compact')).toBe(true);
+    expect(wrapper.find('.ant-page-header').hasClass('ant-page-header-compact')).toBeTruthy();
   });
 });

components/page-header/demo/responsive.md

@@ -8,7 +8,7 @@ title:
 
 ## zh-CN
 
-在不同大小的屏幕下，应该有不同的表现
+在不同大小的屏幕下，应该有不同的表现。
 
 ## en-US
 

components/select/index.en-US.md

@@ -89,12 +89,12 @@ Select component to select value from options.
 
 ### Option props
 
-| Property  | Description                                | Type             | Default | Version |
+| Property  | Description                          | Type             | Default | Version |
-| --------- | ------------------------------------------ | ---------------- | ------- | ------- |
+| --------- | ------------------------------------ | ---------------- | ------- | ------- |
-| className | The additional class to option             | string           | -       |         |
+| className | The additional class to option       | string           | -       |         |
-| disabled  | Disable this option                        | boolean          | false   |         |
+| disabled  | Disable this option                  | boolean          | false   |         |
-| title     | `title` of Select after select this Option | string           | -       |         |
+| title     | `title` attribute of Select Option   | string           | -       |         |
-| value     | Default to filter with this property       | string \| number | -       |         |
+| value     | Default to filter with this property | string \| number | -       |         |
 
 ### OptGroup props
 

components/select/index.zh-CN.md

@@ -90,12 +90,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 
 ### Option props
 
-| 参数      | 说明                              | 类型             | 默认值 | 版本 |
+| 参数      | 说明                     | 类型             | 默认值 | 版本 |
-| --------- | --------------------------------- | ---------------- | ------ | ---- |
+| --------- | ------------------------ | ---------------- | ------ | ---- |
-| className | Option 器类名                     | string           | -      |      |
+| className | Option 器类名            | string           | -      |      |
-| disabled  | 是否禁用                          | boolean          | false  |      |
+| disabled  | 是否禁用                 | boolean          | false  |      |
-| title     | 选中该 Option 后，Select 的 title | string           | -      |      |
+| title     | 选项上的原生 title 提示  | string           | -      |      |
-| value     | 默认根据此属性值进行筛选          | string \| number | -      |      |
+| value     | 默认根据此属性值进行筛选 | string \| number | -      |      |
 
 ### OptGroup props
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.17.1",
+  "version": "4.17.2",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -138,7 +138,7 @@
     "rc-picker": "~2.5.17",
     "rc-progress": "~3.1.0",
     "rc-rate": "~2.9.0",
-    "rc-resize-observer": "^1.0.0",
+    "rc-resize-observer": "^1.1.0",
     "rc-select": "~13.1.0-alpha.0",
     "rc-slider": "~9.7.4",
     "rc-steps": "~4.1.0",

tests/setup.js

@@ -1,4 +1,6 @@
 const React = require('react');
+const { _rs: onLibResize } = require('rc-resize-observer/lib/utils/observerUtil');
+const { _rs: onEsResize } = require('rc-resize-observer/es/utils/observerUtil');
 
 // eslint-disable-next-line no-console
 console.log('Current React Version:', React.version);
@@ -44,11 +46,17 @@ const Adapter =
 Enzyme.configure({ adapter: new Adapter() });
 
 Object.assign(Enzyme.ReactWrapper.prototype, {
-  findObserver() {
+  findObserver(index = 0) {
-    return this.find('ResizeObserver');
+    return this.find('ResizeObserver').at(index);
   },
-  triggerResize() {
+  triggerResize(index = 0) {
-    const ob = this.findObserver();
+    const target = this.findObserver(index).getDOMNode();
-    ob.instance().onResize([{ target: ob.getDOMNode() }]);
+    const originGetBoundingClientRect = target.getBoundingClientRect;
+
+    target.getBoundingClientRect = () => ({ width: 510, height: 903 });
+    onLibResize([{ target }]);
+    onEsResize([{ target }]);
+
+    target.getBoundingClientRect = originGetBoundingClientRect;
   },
 });