3.14.0 Changelog (#15145)

* add responsive property to carousel (#15071)

* add responsive property to carousel #15065

* extend carousel props from Slick type definitions #15065

* rm key in OptionProps (#15104)

* update doc

* fix cascader should tab twice to exist (#15117)

* fix cascader should tab twice to exist

* update snapshot

* Drawer Body padding should be variable

* fix DatePicker to support an array of formats (#15116)

ref #13148

* table reader mobile friendly

* up

* up

* doc: add 3.14.0 changelog

* doc: fix ci warning

* doc: fix ci warning

* doc: fix typo

* doc: fix ci warning

* doc: fix ci warning

* doc: fix cr warring

* doc: fix cr warring

* doc: fix cr warring

* doc: fix cr warring

* doc: fix cr warring

* doc: fix cr warring

* doc: fix cr warring

* -m

* -m

* doc: fix cr warning

CHANGELOG.en-US.md

@@ -14,7 +14,30 @@ timeline: true
 * Major version release is not included in this schedule for breaking change and new features.
 
 ---
+## 3.14.0
 
+`2019-03-02`
+
+- Two new components added this month:
+  - 🔥🔥🔥[Typography](https://github.com/ant-design/ant-design/pull/14250) provides basic formatting and common operations for text.
+  - 🔥🔥🔥[PageHeader](https://github.com/ant-design/ant-design/pull/13637) can be used to declare the page theme, display important information about the page that the user is interested in, and host the relevant page. Action item.
+- 🌟 TimePicker provides `clearIcon` prop for customizing clear icon. [#14556](https://github.com/ant-design/ant-design/pull/14556)
+- 🌟 Statistic.Countdown supports `onFinish` prop. [#14791](https://github.com/ant-design/ant-design/pull/14791)
+- 🌟 Collapse.Panel support `extra` prop. [62e65d](https://github.com/ant-design/ant-design/commit/62e65d955065b1862240f9f30d84de44349a0cf9)
+- DatePicker
+  - 🐞 Fix not support name prop. [#15029](https://github.com/ant-design/ant-design/pull/15029)
+  - 🌟 Supports `separator` prop. [#15055](https://github.com/ant-design/ant-design/pull/15055)
+- 🌟 The Form supports `labelCol` & `wrapperCol` prop. [#15038](https://github.com/ant-design/ant-design/pull/15038)
+- 🌟 Add type `more` for Icon. [#15047](https://github.com/ant-design/ant-design/pull/15047)
+- 🐞 Fix Table filter can not support other type of value. [#15046](https://github.com/ant-design/ant-design/pull/15046)
+- 🐞 Fix Spin `wrapperClassName` setting `padding` icon is not centered. [#15056](https://github.com/ant-design/ant-design/pull/15056)
+- 🐞 Fix Calendar won't trigger `onPanelChange` correctly in some cases. [#15063](https://github.com/ant-design/ant-design/pull/15063)
+- 🌟 Select supports `showArrow` in multi-select mode. [#15091](https://github.com/ant-design/ant-design/pull/15091)
+- 🌟 Adjusted multiple TypeScript types
+  - 🐞 Fixed a problem with the `onPanelChange` TypeScript declaration missing. [#15043](https://github.com/ant-design/ant-design/pull/15043)
+  - 🐞 Fix the TypeScript type problem for Table `Column Filter`. [#15056](https://github.com/ant-design/ant-design/pull/15056)
+  - 🌟 Support goto button in Pagination.  [#14819](https://github.com/ant-design/ant-design/pull/14819)
+  
 ## 3.13.6
 
 `2019-02-23`

CHANGELOG.zh-CN.md

@@ -15,6 +15,30 @@ timeline: true
 
 ---
 
+## 3.14.0
+
+`2019-03-02`
+
+- 本月新增了两个组件：
+  - 🔥🔥🔥 [Typography](https://github.com/ant-design/ant-design/pull/14250) 提供了文本的基本格式及常见操作。
+  - 🔥🔥🔥 [PageHeader](https://github.com/ant-design/ant-design/pull/13637) 可用于声明页面主题、展示用户所关注的页面重要信息，以及承载与当前页相关的操作项。
+- 🌟 TimePicker 新增了 `clearIcon` prop，用于自定义清除图标。[#14556](https://github.com/ant-design/ant-design/pull/14556)
+- 🌟Statistic.Countdown 支持 `onFinish` prop。[#14791](https://github.com/ant-design/ant-design/pull/14791)
+- 🌟 Collapse.Panel 新增了 `extra`。[62e65d](https://github.com/ant-design/ant-design/commit/62e65d955065b1862240f9f30d84de44349a0cf9)
+- DatePicker
+  - 🐞 修复 `name` prop 无效的问题。[#15029](https://github.com/ant-design/ant-design/pull/15029)
+  - 🌟 支持 `separator` prop。[#15055](https://github.com/ant-design/ant-design/pull/15055)
+- 🌟 Form 支持 `labelCol` & `wrapperCol` prop。[#15038](https://github.com/ant-design/ant-design/pull/15038)
+- 🌟 Icon 增加了 `more` 的图标。[#15047](https://github.com/ant-design/ant-design/pull/15047)
+- 🐞 修复 Table 筛选不支持 string 以外类型的问题。[#15046](https://github.com/ant-design/ant-design/pull/15046)
+- 🐞 修复 Spin `wrapperClassName` 设置 `padding` 图标不居中的问题。[#15056](https://github.com/ant-design/ant-design/pull/15056)
+- 🐞 修复 Calendar `onPanelChange` 在某些情况下不会触发的问题。[#15063](https://github.com/ant-design/ant-design/pull/15063)
+- 🌟 Select 在多选模式下支持 `showArrow`。[#15091](https://github.com/ant-design/ant-design/pull/15091)
+- 🐞 调整了多处 TypeScript 的类型
+  - 🐞 修复 `onPanelChange`  TypeScript 声明缺失的问题。[#15043](https://github.com/ant-design/ant-design/pull/15043)
+  - 🐞 订正了 Table `column filter` 的 TypeScript 类型问题。[#14777](https://github.com/ant-design/ant-design/issues/14777)
+  - 🌟 Pagination 支持添加分页跳转按钮。 [#14819](https://github.com/ant-design/ant-design/pull/14819) 
+
 ## 3.13.6
 
 `2019-02-23`
@@ -423,7 +447,7 @@ timeline: true
 - 🐞 修复 RangePicker 在 `small` 模式不对齐的问题。[#13105](https://github.com/ant-design/ant-design/issues/13105)
 - 🐞 修复 Dropdown 字体大小影响到头像的问题。[#13091](https://github.com/ant-design/ant-design/issues/13091)
 - 🐞 修复 tabBarGutter 无法在垂直模式下工作的问题。[#12968](https://github.com/ant-design/ant-design/issues/12968)
-- 🌟 调整了多处 typescript 的类型。
+- 🌟 调整了多处 TypeScript 的类型。
 
 ## 3.10.7
 
@@ -957,7 +981,7 @@ timeline: true
 * 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625)
 * 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi)
 * 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
-* 🐞 修复编译时 typescript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
+* 🐞 修复编译时 TypeScript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
 * 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
 * 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674)
 
@@ -1039,13 +1063,13 @@ timeline: true
 - Select
   - 🐞 修复 `placeholder` 的 ts 类型问题。[#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
   - 🐞 修复不显示箭头时多余的空白。[#10296](https://github.com/ant-design/ant-design/pull/10296)
-  - 🐞 修复属性 `value` 的 typescript 类型错误。[#10336](https://github.com/ant-design/ant-design/pull/10336) [@paranoidjk](https://github.com/paranoidjk)
+  - 🐞 修复属性 `value` 的 TypeScript 类型错误。[#10336](https://github.com/ant-design/ant-design/pull/10336) [@paranoidjk](https://github.com/paranoidjk)
 - Input
   - 🐞 修复 `Input.Search` 当 disabled 为 true 时按钮没有被禁用的问题。[#10040](https://github.com/ant-design/ant-design/issues/10040)
   - 🐞 修复 `Input.Group` 在表单中对齐的问题。[#10281](https://github.com/ant-design/ant-design/issues/10281)
 - Form
   - 🐞 修复 `Form.onValuesChange` 的 ts 类型错误。[#10231](https://github.com/ant-design/ant-design/pull/10231) [@whtsky](https://github.com/whtsky)
-  - 🐞 修复 `ComponentDecorator` typescript 定义的错误。[#10324](https://github.com/ant-design/ant-design/pull/10324) [@paranoidjk](https://github.com/paranoidjk)
+  - 🐞 修复 `ComponentDecorator` TypeScript 定义的错误。[#10324](https://github.com/ant-design/ant-design/pull/10324) [@paranoidjk](https://github.com/paranoidjk)
 - 🐞 修复 `Divider` 为 dashed 时的样式问题。[#10216](https://github.com/ant-design/ant-design/issues/10216)
 - 🐞 修复 `Spin` 覆盖层的展示问题。[#10227](https://github.com/ant-design/ant-design/issues/10227)
 - 🐞 修复 `Notification` 鼠标 hover 是图标的颜色问题。[#10272](https://github.com/ant-design/ant-design/issues/10272)

components/carousel/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import debounce from 'lodash/debounce';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { Settings } from 'react-slick';
 
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@@ -23,45 +24,10 @@ const SlickCarousel = require('react-slick').default;
 
 export type CarouselEffect = 'scrollx' | 'fade';
 // Carousel
-export interface CarouselProps {
+export interface CarouselProps extends Settings {
   effect?: CarouselEffect;
-  dots?: boolean;
-  vertical?: boolean;
-  autoplay?: boolean;
-  easing?: string;
-  beforeChange?: (from: number, to: number) => void;
-  afterChange?: (current: number) => void;
   style?: React.CSSProperties;
   prefixCls?: string;
-  accessibility?: boolean;
-  nextArrow?: HTMLElement | any;
-  prevArrow?: HTMLElement | any;
-  pauseOnHover?: boolean;
-  className?: string;
-  adaptiveHeight?: boolean;
-  arrows?: boolean;
-  autoplaySpeed?: number;
-  centerMode?: boolean;
-  centerPadding?: string | any;
-  cssEase?: string | any;
-  dotsClass?: string;
-  draggable?: boolean;
-  fade?: boolean;
-  focusOnSelect?: boolean;
-  infinite?: boolean;
-  initialSlide?: number;
-  lazyLoad?: boolean;
-  rtl?: boolean;
-  slide?: string;
-  slidesToShow?: number;
-  slidesToScroll?: number;
-  speed?: number;
-  swipe?: boolean;
-  swipeToSlide?: boolean;
-  touchMove?: boolean;
-  touchThreshold?: number;
-  variableWidth?: boolean;
-  useCSS?: boolean;
   slickGoTo?: number;
 }
 

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

@@ -13,6 +13,7 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
     class="ant-input ant-cascader-input "
     placeholder="Please select"
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -50,6 +51,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
     class="ant-input ant-cascader-input "
     placeholder="Please select"
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -101,6 +103,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
     autocomplete="off"
     class="ant-input ant-cascader-input "
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -170,6 +173,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
     autocomplete="off"
     class="ant-input ant-cascader-input "
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -226,6 +230,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
     class="ant-input ant-cascader-input "
     placeholder="Please select"
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -263,6 +268,7 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
     class="ant-input ant-cascader-input "
     placeholder="Please select"
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -300,6 +306,7 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
     class="ant-input ant-cascader-input "
     placeholder="Please select"
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -337,6 +344,7 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
     class="ant-input ant-cascader-input "
     placeholder="Please select"
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -373,6 +381,7 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
     autocomplete="off"
     class="ant-input ant-cascader-input "
     placeholder="Please select"
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -411,6 +420,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
       class="ant-input ant-cascader-input ant-input-lg"
       placeholder="Please select"
       readonly=""
+      tabindex="-1"
       type="text"
       value=""
     />
@@ -447,6 +457,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
       class="ant-input ant-cascader-input "
       placeholder="Please select"
       readonly=""
+      tabindex="-1"
       type="text"
       value=""
     />
@@ -483,6 +494,7 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
       class="ant-input ant-cascader-input ant-input-sm"
       placeholder="Please select"
       readonly=""
+      tabindex="-1"
       type="text"
       value=""
     />
@@ -524,6 +536,7 @@ exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
       class="ant-input ant-cascader-input "
       placeholder="Please select"
       readonly=""
+      tabindex="-1"
       type="text"
       value=""
     />
@@ -559,6 +572,7 @@ exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
       class="ant-input ant-cascader-input "
       placeholder="Please select"
       readonly=""
+      tabindex="-1"
       type="text"
       value=""
     />

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -1237,6 +1237,7 @@ exports[`Cascader support controlled mode 1`] = `
     autocomplete="off"
     class="ant-input ant-cascader-input "
     readonly=""
+    tabindex="-1"
     type="text"
     value=""
   />

components/cascader/index.tsx

@@ -520,6 +520,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         <span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
         <Input
           {...inputProps}
+          tabIndex="-1"
           ref={this.saveInput}
           prefixCls={inputPrefixCls}
           placeholder={value && value.length > 0 ? undefined : placeholder}

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -5799,6 +5799,7 @@ exports[`ConfigProvider components Cascader configProvider 1`] = `
     autocomplete="off"
     class="config-input config-cascader-input "
     placeholder="Please select"
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -5835,6 +5836,7 @@ exports[`ConfigProvider components Cascader normal 1`] = `
     autocomplete="off"
     class="ant-input ant-cascader-input "
     placeholder="Please select"
+    tabindex="-1"
     type="text"
     value=""
   />
@@ -5871,6 +5873,7 @@ exports[`ConfigProvider components Cascader prefixCls 1`] = `
     autocomplete="off"
     class="ant-input prefix-Cascader-input "
     placeholder="Please select"
+    tabindex="-1"
     type="text"
     value=""
   />

components/date-picker/RangePicker.tsx

@@ -12,6 +12,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
 import interopDefault from '../_util/interopDefault';
 import { RangePickerValue, RangePickerPresetRange } from './interface';
+import { formatDate } from './utils';
 
 export interface RangePickerState {
   value?: RangePickerValue;
@@ -30,10 +31,6 @@ function getShowDateFromValue(value: RangePickerValue) {
   return [start, newEnd] as RangePickerValue;
 }
 
-function formatValue(value: moment.Moment | undefined, format: string): string {
-  return (value && value.format(format)) || '';
-}
-
 function pickerValueAdapter(
   value?: moment.Moment | RangePickerValue,
 ): RangePickerValue | undefined {
@@ -149,7 +146,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
       }));
     }
     const [start, end] = value;
-    props.onChange(value, [formatValue(start, props.format), formatValue(end, props.format)]);
+    props.onChange(value, [formatDate(start, props.format), formatDate(end, props.format)]);
   };
 
   handleOpenChange = (open: boolean) => {
@@ -386,7 +383,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
           <input
             disabled={props.disabled}
             readOnly
-            value={(start && start.format(props.format)) || ''}
+            value={formatDate(start, props.format)}
             placeholder={startPlaceholder}
             className={`${prefixCls}-range-picker-input`}
             tabIndex={-1}
@@ -395,7 +392,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
           <input
             disabled={props.disabled}
             readOnly
-            value={(end && end.format(props.format)) || ''}
+            value={formatDate(end, props.format)}
             placeholder={endPlaceholder}
             className={`${prefixCls}-range-picker-input`}
             tabIndex={-1}

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

@@ -203,4 +203,11 @@ describe('DatePicker', () => {
     expect(extraNode.length).toBe(1);
     expect(extraNode.text()).toBe('decade');
   });
+
+  it('supports multiple formats', () => {
+    const wrapper = mount(<DatePicker format={['DD/MM/YYYY', 'DD/MM/YY']} />);
+    openPanel(wrapper);
+    wrapper.find('.ant-calendar-input').simulate('change', { target: { value: '02/07/18' } });
+    expect(wrapper.find('.ant-calendar-picker-input').getDOMNode().value).toBe('02/07/2018');
+  });
 });

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -700,6 +700,56 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
     </div>
   </span>
   <br />
+  <span
+    class="ant-calendar-picker"
+  >
+    <div>
+      <input
+        class="ant-calendar-picker-input ant-input"
+        placeholder="Select date"
+        readonly=""
+        value="01/01/2015"
+      />
+      <i
+        aria-label="icon: close-circle"
+        class="anticon anticon-close-circle ant-calendar-picker-clear"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close-circle"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          />
+        </svg>
+      </i>
+      <i
+        aria-label="icon: calendar"
+        class="anticon anticon-calendar ant-calendar-picker-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </i>
+    </div>
+  </span>
+  <br />
   <span
     class="ant-calendar-picker"
   >

components/date-picker/createPicker.tsx

@@ -11,6 +11,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
 import interopDefault from '../_util/interopDefault';
 import getDataOrAriaProps from '../_util/getDataOrAriaProps';
+import { formatDate } from './utils';
 
 export interface PickerProps {
   value?: moment.Moment;
@@ -98,7 +99,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
           showDate: value,
         });
       }
-      props.onChange(value, (value && value.format(props.format)) || '');
+      props.onChange(value, formatDate(value, props.format));
     };
 
     handleCalendarChange = (value: moment.Moment) => {
@@ -227,7 +228,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
             ref={this.saveInput}
             disabled={props.disabled}
             readOnly
-            value={(inputValue && inputValue.format(props.format)) || ''}
+            value={formatDate(inputValue, props.format)}
             placeholder={placeholder}
             className={props.pickerInputClass}
             tabIndex={props.tabIndex}

components/date-picker/demo/format.md

@@ -21,9 +21,14 @@ const { MonthPicker, RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY/MM/DD';
 const monthFormat = 'YYYY/MM';
+
+const dateFormatList = ['DD/MM/YYYY','DD/MM/YY']
+
 ReactDOM.render(
   <div>
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
+     <br />
+    <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
     <br />
     <MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} />
     <br />

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

@@ -80,7 +80,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | defaultValue | to set default date | [moment](http://momentjs.com/) | - |
 | defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
 | disabledTime | to specify the time that cannot be selected | function(date) | - |
-| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
+| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD" |
 | renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - |
 | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
@@ -95,7 +95,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | -------- | ----------- | ---- | ------- |
 | defaultValue | to set default date | [moment](http://momentjs.com/) | - |
 | defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
-| format | to set the date format. When an array is provided, all values are used for parsing and first value for display. refer to [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM" |
+| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
 | monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - |
 | renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
 | value | to set date | [moment](http://momentjs.com/) | - |
@@ -119,7 +119,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
 | defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
 | disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
-| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" | |
+| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
 | ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
 | renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
 | separator | set separator between inputs | string | '~' | 3.14.0 |

components/date-picker/utils.ts

@@ -0,0 +1,11 @@
+import * as moment from 'moment';
+
+export function formatDate(value: moment.Moment | undefined | null, format: string | string[]): string {
+    if (!value) {
+        return '';
+    }
+    if (Array.isArray(format)) {
+      format = format[0];
+    }
+    return value.format(format);
+}

components/drawer/style/drawer.less

@@ -150,7 +150,7 @@
 
   &-header {
     position: relative;
-    padding: 16px 24px;
+    padding: @drawer-header-padding;
     color: @text-color;
     background: @component-background;
     border-bottom: @border-width-base @border-style-base @border-color-split;
@@ -163,7 +163,7 @@
   }
 
   &-body {
-    padding: 24px;
+    padding: @drawer-body-padding;
     font-size: @font-size-base;
     line-height: @line-height-base;
     word-wrap: break-word;

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

@@ -146,6 +146,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
         autocomplete="off"
         class="ant-input ant-cascader-input "
         placeholder="Please select"
+        tabindex="-1"
         type="text"
         value=""
       />

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

@@ -1718,6 +1718,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               data-__meta="[object Object]"
               id="register_residence"
               readonly=""
+              tabindex="-1"
               type="text"
               value=""
             />
@@ -4705,6 +4706,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               autocomplete="off"
               class="ant-input ant-cascader-input "
               readonly=""
+              tabindex="-1"
               type="text"
               value=""
             />

components/grid/__tests__/index.test.js

@@ -1,7 +1,25 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { Col, Row } from '..';
 
+jest.mock('enquire.js', () => {
+  let that;
+  let unmatchFun;
+  return {
+    unregister: jest.fn(),
+    register: (meidia, options) => {
+      if (meidia === '(max-width: 575px)') {
+        that = this;
+        options.match.call(that);
+        unmatchFun = options.unmatch;
+      }
+    },
+    callunmatch() {
+      unmatchFun.call(that);
+    },
+  };
+});
+
 describe('Grid', () => {
   it('should render Col', () => {
     const wrapper = render(<Col span={2} />);
@@ -13,6 +31,25 @@ describe('Grid', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('should work correct when gutter is object', () => {
+    // eslint-disable-next-line global-require
+    const enquire = require('enquire.js');
+    const wrapper = mount(<Row gutter={{ xs: 20 }} />);
+    expect(wrapper.find('div').prop('style')).toEqual({
+      marginLeft: -10,
+      marginRight: -10,
+    });
+    enquire.callunmatch();
+    expect(
+      wrapper
+        .update()
+        .find('div')
+        .prop('style'),
+    ).toEqual(undefined);
+    wrapper.unmount();
+    expect(enquire.unregister).toBeCalledTimes(6);
+  });
+
   it('renders wrapped Col correctly', () => {
     const MyCol = () => <Col span={12} />;
     const wrapper = render(

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

@@ -898,6 +898,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         class="ant-input ant-cascader-input "
         placeholder="Select Address"
         readonly=""
+        tabindex="-1"
         type="text"
         value=""
       />

components/input/__tests__/index.test.js

@@ -44,6 +44,23 @@ describe('TextArea', () => {
     expect(mockFunc).toHaveBeenCalledTimes(2);
   });
 
+  it('should support onPressEnter and onKeyDown', () => {
+    const fakeHandleKeyDown = jest.fn();
+    const fakeHandlePressEnter = jest.fn();
+    const wrapper = mount(
+      <TextArea onKeyDown={fakeHandleKeyDown} onPressEnter={fakeHandlePressEnter} />,
+    );
+    /** keyCode 65 is A */
+    wrapper.find('textarea').simulate('keydown', { keyCode: 65 });
+    expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
+    expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
+
+    /** keyCode 13 is Enter */
+    wrapper.find('textarea').simulate('keydown', { keyCode: 13 });
+    expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
+    expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
+  });
+
   it('should support disabled', () => {
     const wrapper = mount(<TextArea disabled />);
     expect(wrapper).toMatchSnapshot();

components/select/index.tsx

@@ -83,7 +83,6 @@ export interface OptionProps {
   title?: string;
   children?: React.ReactNode;
   className?: string;
-  key?: string;
   style?: React.CSSProperties;
 }
 

components/style/themes/default.less

@@ -585,3 +585,8 @@
 @statistic-content-font-size: 24px;
 @statistic-unit-font-size: 16px;
 @statistic-font-family: Tahoma, 'Helvetica Neue', @font-family;
+
+// Drawer
+// ---
+@drawer-header-padding: 16px 24px;
+@drawer-body-padding: 24px;

docs/react/faq.en-US.md

@@ -133,7 +133,7 @@ Alibaba pays us.
 
 ---
 
-## Errors & Warnings
+## Errors and Warnings
 
 Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
 

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@ant-design/icons": "~1.2.0",
     "@ant-design/icons-react": "~1.1.2",
+    "@types/react-slick": "^0.23.3",
     "array-tree-filter": "^2.1.0",
     "babel-runtime": "6.x",
     "classnames": "~2.2.6",
@@ -99,7 +100,6 @@
     "@types/react": "~16.8.1",
     "@types/react-dom": "^16.0.11",
     "@types/react-intl": "^2.3.14",
-    "@types/react-slick": "^0.23.2",
     "@types/warning": "^3.0.0",
     "@yesmeck/offline-plugin": "^5.0.5",
     "ansi-styles": "^3.2.1",

site/theme/static/markdown.less

@@ -204,35 +204,39 @@
   clear: both;
 }
 
-.markdown.api-container table {
+.markdown.api-container {
-  margin: 2em 0;
+  overflow-x: auto;
-  font-size: @font-size-base;
+  table {
-  font-family: @code-family;
+    min-width: 719px;
-  line-height: @line-height-base;
+    margin: 2em 0;
-  border-width: 0;
+    font-size: @font-size-base;
-  th,
+    font-family: @code-family;
-  td {
+    line-height: @line-height-base;
-    padding: 14px 16px;
+    border-width: 0;
-    border-width: 1px 0;
+    th,
-    border-color: @border-color-split;
+    td {
-  }
+      padding: 14px 16px;
-  th {
+      border-width: 1px 0;
-    border-width: 0 0 2px 0;
+      border-color: @border-color-split;
-  }
+    }
-  td:first-child {
+    th {
-    width: 20%;
+      border-width: 0 0 2px 0;
-    color: @blue-9;
+    }
-    font-weight: 500;
+    td:first-child {
-  }
+      width: 20%;
-  td:nth-child(3) {
+      color: @blue-9;
-    width: 22%;
+      font-weight: 500;
-    color: @magenta-7;
+    }
-    font-size: @font-size-base - 1px;
+    td:nth-child(3) {
-    word-break: break-all;
+      width: 22%;
-  }
+      color: @magenta-7;
-  td:last-child {
+      font-size: @font-size-base - 1px;
-    width: 13%;
+      word-break: break-all;
-    font-size: @font-size-base - 1px;
+    }
+    td:last-child {
+      width: 13%;
+      font-size: @font-size-base - 1px;
+    }
   }
 }