merge master

CHANGELOG.en-US.md

@@ -15,6 +15,16 @@ timeline: true
 
 ---
 
+## 4.15.6
+
+`2021-05-18`
+
+- 🐞 Upload will ignore `accept` if it's invalidate MIME type to follow native behavior. [#30549](https://github.com/ant-design/ant-design/pull/30549)
+- 💄 Remove reset style of `th` `text-align`. [#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa)
+- 🌐 Locale
+  - 🇮🇳 Improve hi_IN locale. [#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh)
+  - 🇧🇷 Improve pt-BR locale. [#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs)
+
 ## 4.15.5
 
 `2021-05-10`

CHANGELOG.zh-CN.md

@@ -15,6 +15,16 @@ timeline: true
 
 ---
 
+## 4.15.6
+
+`2021-05-18`
+
+- 🐞 Upload `accept` 将无视无效的 MIME 类型，以更贴近原生行为。[#30549](https://github.com/ant-design/ant-design/pull/30549)
+- 💄 移除全局样式中对 `th` 的 `text-align` 属性的重置。[#30399](https://github.com/ant-design/ant-design/pull/30399) [@lbwa](https://github.com/lbwa)
+- 🌐 国际化
+  - 🇮🇳 补充印地语国际化文案。[#30541](https://github.com/ant-design/ant-design/pull/30541) [@jaideepghosh](https://github.com/jaideepghosh)
+  - 🇧🇷 补充葡萄牙语（巴西）国际化文案。[#30532](https://github.com/ant-design/ant-design/pull/30532) [@buzs](https://github.com/buzs)
+
 ## 4.15.5
 
 `2021-05-10`

components/_util/motion.tsx

@@ -1,11 +1,12 @@
 import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import { MotionEvent } from 'rc-motion/lib/interface';
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
-const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
-  (event as TransitionEvent).propertyName === 'height';
+const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
+  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
 
 const collapseMotion: CSSMotionProps = {
   motionName: 'ant-motion-collapse',

components/anchor/Anchor.tsx

@@ -163,12 +163,6 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
   }
 
   getCurrentAnchor(offsetTop = 0, bounds = 5): string {
-    const { getCurrentAnchor } = this.props;
-
-    if (typeof getCurrentAnchor === 'function') {
-      return getCurrentAnchor();
-    }
-
     const linkSections: Array<Section> = [];
     const container = this.getContainer();
     this.links.forEach(link => {
@@ -229,14 +223,15 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
 
   setCurrentActiveLink = (link: string) => {
     const { activeLink } = this.state;
-    const { onChange } = this.props;
-
-    if (activeLink !== link) {
-      this.setState({
-        activeLink: link,
-      });
-      onChange?.(link);
+    const { onChange, getCurrentAnchor } = this.props;
+    if (activeLink === link) {
+      return;
     }
+    // https://github.com/ant-design/ant-design/issues/30584
+    this.setState({
+      activeLink: typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link,
+    });
+    onChange?.(link);
   };
 
   handleScroll = () => {

components/anchor/__tests__/Anchor.test.tsx

@@ -359,6 +359,23 @@ describe('Anchor Render', () => {
     expect(onChange).toHaveBeenCalledWith(hash2);
   });
 
+  // https://github.com/ant-design/ant-design/issues/30584
+  it('should trigger onChange when have getCurrentAnchor', async () => {
+    const hash1 = getHashUrl();
+    const hash2 = getHashUrl();
+    const onChange = jest.fn();
+    const wrapper = mount<Anchor>(
+      <Anchor onChange={onChange} getCurrentAnchor={() => hash1}>
+        <Link href={`#${hash1}`} title={hash1} />
+        <Link href={`#${hash2}`} title={hash2} />
+      </Anchor>,
+    );
+    expect(onChange).toHaveBeenCalledTimes(1);
+    wrapper.instance().handleScrollTo(hash2);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith(hash2);
+  });
+
   it('invalid hash', async () => {
     const wrapper = mount<Anchor>(
       <Anchor>

components/collapse/__tests__/index.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { sleep } from '../../../tests/utils';
 import { resetWarned } from '../../_util/devWarning';
 
@@ -101,4 +102,39 @@ describe('Collapse', () => {
     wrapper.find('.ant-collapse-header').simulate('click');
     expect(wrapper.find('.ant-collapse-item-active').length).toBe(0);
   });
+
+  it('should end motion when set activeKey while hiding', async () => {
+    jest.useFakeTimers();
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+      setTimeout(cb, 16.66);
+    });
+
+    let setActiveKeyOuter;
+    const Test = () => {
+      const [activeKey, setActiveKey] = React.useState();
+      setActiveKeyOuter = setActiveKey;
+      return (
+        <div hidden>
+          <Collapse activeKey={activeKey}>
+            <Collapse.Panel header="header" key="1">
+              content
+            </Collapse.Panel>
+          </Collapse>
+        </div>
+      );
+    };
+
+    const wrapper = mount(<Test />);
+
+    await act(async () => {
+      setActiveKeyOuter('1');
+      await Promise.resolve();
+      jest.runAllTimers();
+    });
+
+    expect(wrapper.render().find('.ant-motion-collapse').length).toBe(0);
+
+    window.requestAnimationFrame.mockRestore();
+    jest.useRealTimers();
+  });
 });

components/collapse/style/index.less

@@ -24,7 +24,6 @@
     > .@{collapse-prefix-cls}-header {
       position: relative;
       padding: @collapse-header-padding;
-      padding-left: @collapse-header-padding-extra;
       color: @heading-color;
       line-height: @line-height-base;
       cursor: pointer;
@@ -32,17 +31,10 @@
       .clearfix();
 
       .@{collapse-prefix-cls}-arrow {
-        .iconfont-mixin();
-
-        position: absolute;
-        top: ((@font-size-base * @line-height-base - @font-size-sm) / 2);
-        left: @collapse-header-arrow-left;
         display: inline-block;
-        padding: @collapse-header-padding;
-        padding-right: 0;
-        padding-bottom: 0;
-        padding-left: 0;
+        margin-right: 12px;
         font-size: @font-size-sm;
+        vertical-align: -1px;
 
         & svg {
           transition: transform 0.24s;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import { SmileOutlined } from '@ant-design/icons';
 import ConfigProvider, { ConfigContext } from '..';
@@ -57,6 +57,30 @@ describe('ConfigProvider', () => {
     expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
   });
 
+  it('dynamic prefixCls', () => {
+    const DynamicPrefixCls = () => {
+      const [prefixCls, setPrefixCls] = useState('bamboo');
+      return (
+        <div>
+          <Button onClick={() => setPrefixCls('light')} className="toggle-button">
+            toggle
+          </Button>
+          <ConfigProvider prefixCls={prefixCls}>
+            <ConfigProvider>
+              <Button />
+            </ConfigProvider>
+          </ConfigProvider>
+        </div>
+      );
+    };
+
+    const wrapper = mount(<DynamicPrefixCls />);
+
+    expect(wrapper.find('button').last().props().className).toEqual('bamboo-btn');
+    wrapper.find('.toggle-button').first().simulate('click');
+    expect(wrapper.find('button').last().props().className).toEqual('light-btn');
+  });
+
   it('iconPrefixCls', () => {
     const wrapper = mount(
       <ConfigProvider iconPrefixCls="bamboo">

components/config-provider/demo/prefixCls.md

@@ -15,18 +15,29 @@ debug: true
 Config component and icon prefixCls.
 
 ```jsx
-import { ConfigProvider, Select } from 'antd';
+import { ConfigProvider, Select, Button } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
 
 // Ant Design site use `es` module for view
 // but do not replace related lib `lib` with `es`
 // which do not show correct in site.
 // We may need do convert in site also.
-const FormSizeDemo = () => (
-  <ConfigProvider prefixCls="light" iconPrefixCls="bamboo">
-    <SmileOutlined />
-    <Select />
-  </ConfigProvider>
-);
+const FormSizeDemo = () => {
+  const [prefixCls, setPrefixCls] = useState('light');
+  return (
+    <div>
+      <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
+        toggle prefixCls
+      </Button>
+      <div>
+        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
+          <SmileOutlined />
+          <Select />
+        </ConfigProvider>
+      </div>
+    </div>
+  );
+};
 ReactDOM.render(<FormSizeDemo />, mountNode);
 ```

components/config-provider/index.tsx

@@ -149,7 +149,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
 
       return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
     },
-    [parentContext.getPrefixCls],
+    [parentContext.getPrefixCls, props.prefixCls],
   );
 
   const config = {

components/notification/style/index.less

@@ -31,14 +31,19 @@
     cursor: pointer;
   }
 
-  &-hook-holder,
+  &-hook-holder {
+    position: relative;
+  }
+
   &-notice {
     position: relative;
     width: @notification-width;
     max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
     margin-bottom: @notification-margin-bottom;
     margin-left: auto;
+    padding: @notification-padding;
     overflow: hidden;
+    line-height: @line-height-base;
     word-wrap: break-word;
     background: @notification-bg;
     border-radius: @border-radius-base;
@@ -49,16 +54,6 @@
       margin-right: auto;
       margin-left: 0;
     }
-  }
-
-  &-hook-holder > &-notice {
-    margin-bottom: 0;
-    box-shadow: none;
-  }
-
-  &-notice {
-    padding: @notification-padding;
-    line-height: @line-height-base;
 
     &-message {
       margin-bottom: 8px;

components/space/index.tsx

@@ -15,7 +15,7 @@ export const SpaceContext = React.createContext({
 
 export type SpaceSize = SizeType | number;
 
-export interface SpaceProps {
+export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;

components/table/style/index.less

@@ -107,7 +107,8 @@
         transition: background 0.3s;
 
         // ========================= Nest Table ===========================
-        > .@{table-prefix-cls}-wrapper:only-child {
+        > .@{table-prefix-cls}-wrapper:only-child,
+        > .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child {
           .@{table-prefix-cls} {
             margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
                   ceil(@font-size-sm * 1.4));

components/transfer/index.en-US.md

@@ -47,14 +47,14 @@ One or more elements can be selected from either column, one click on the proper
 
 Transfer accept `children` to customize render list, using follow props:
 
-| Property | Description | Type | Version |
-| --- | --- | --- | --- |
-| direction | List render direction | `left` \| `right` |  |
-| disabled | Disable list or not | boolean |  |
-| filteredItems | Filtered items | RecordType\[] |  |
-| selectedKeys | Selected items | string\[] |  |
-| onItemSelect | Select item | (key: string, selected: boolean) |  |
-| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) |  |
+| Property        | Description             | Type                                 | Version |
+| --------------- | ----------------------- | ------------------------------------ | ------- |
+| direction       | List render direction   | `left` \| `right`                    |         |
+| disabled        | Disable list or not     | boolean                              |         |
+| filteredItems   | Filtered items          | RecordType\[]                        |         |
+| selectedKeys    | Selected items          | string\[]                            |         |
+| onItemSelect    | Select item             | (key: string, selected: boolean)     |         |
+| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) |         |
 
 #### example
 
@@ -77,4 +77,4 @@ return <Transfer rowKey={record => record.uid} />;
 
 ### How to support fetch and present data from a remote server in Transfer column.
 
-In order to keep the page number synchronized, you can disable columns you checked without removing the option: <https://codesandbox.io/s/93xeb>
+In order to keep the page number synchronized, you can disable columns you checked without removing the option: <https://codesandbox.io/s/objective-wing-6iqbx>

components/transfer/index.zh-CN.md

@@ -49,14 +49,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
 
 Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数：
 
-| 参数 | 说明 | 类型 | 版本 |
-| --- | --- | --- | --- |
-| direction | 渲染列表的方向 | `left` \| `right` |  |
-| disabled | 是否禁用列表 | boolean |  |
-| filteredItems | 过滤后的数据 | RecordType\[] |  |
-| selectedKeys | 选中的条目 | string\[] |  |
-| onItemSelect | 勾选条目 | (key: string, selected: boolean) |  |
-| onItemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) |  |
+| 参数            | 说明           | 类型                                 | 版本 |
+| --------------- | -------------- | ------------------------------------ | ---- |
+| direction       | 渲染列表的方向 | `left` \| `right`                    |      |
+| disabled        | 是否禁用列表   | boolean                              |      |
+| filteredItems   | 过滤后的数据   | RecordType\[]                        |      |
+| selectedKeys    | 选中的条目     | string\[]                            |      |
+| onItemSelect    | 勾选条目       | (key: string, selected: boolean)     |      |
+| onItemSelectAll | 勾选一组条目   | (keys: string\[], selected: boolean) |      |
 
 #### 参考示例
 
@@ -79,4 +79,4 @@ return <Transfer rowKey={record => record.uid} />;
 
 ### 怎样让 Transfer 穿梭框列表支持异步数据加载
 
-为了保持页码同步，在勾选时可以不移除选项而以禁用代替：<https://codesandbox.io/s/93xeb>
+为了保持页码同步，在勾选时可以不移除选项而以禁用代替：<https://codesandbox.io/s/objective-wing-6iqbx>

components/typography/Base.tsx

@@ -524,6 +524,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
                     [`${prefixCls}-${type}`]: type,
                     [`${prefixCls}-disabled`]: disabled,
                     [`${prefixCls}-ellipsis`]: rows,
+                    [`${prefixCls}-single-line`]: rows === 1,
                     [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
                     [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
                   },

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

@@ -231,7 +231,7 @@ Array [
     />
   </button>,
   <div
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
@@ -241,7 +241,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
     style="width:100px"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.
@@ -333,7 +333,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample 
     <span
@@ -352,7 +352,7 @@ Array [
   <p>
     2333
     <span
-      class="ant-typography ant-typography-ellipsis"
+      class="ant-typography ant-typography-ellipsis ant-typography-single-line"
     >
       2333
     </span>
@@ -853,7 +853,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis"
+    class="ant-typography ant-typography-ellipsis ant-typography-single-line"
     title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
   >
     To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare

components/typography/style/index.less

@@ -259,9 +259,12 @@
   }
 
   // ============ Ellipsis ============
+  &-single-line {
+    white-space: nowrap;
+  }
+
   &-ellipsis-single-line {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
 
     // https://blog.csdn.net/iefreer/article/details/50421025

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.16.0-alpha.2",
+  "version": "4.15.6",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

site/theme/static/template.html

@@ -116,5 +116,12 @@
         a.appendChild(r);
       })(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
     </script>
+
+    <!--
+      感谢每位为开源理想而奋斗的人们，愿你们在人生新的旅途一帆风顺！~
+      https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_7M0S7zdFBcAAAAAAAAAAAAAARQnAQ
+
+      2021.05.21
+    -->
   </body>
 </html>