@douyinfe/semi-ui 2.2.0-beta.1 → 2.3.0-beta.0

package/lib/es/checkbox/checkbox.d.ts

@@ -1,17 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxFoundation';
+import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxFoundation';
 import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/checkbox/checkbox.css';
 export declare type CheckboxEvent = BasicCheckboxEvent;
 export declare type TargetObject = BasicTargetObject;
 export interface CheckboxProps extends BaseCheckboxProps {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     onChange?: (e: CheckboxEvent) => any;
     style?: React.CSSProperties;
     onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
     extra?: React.ReactNode;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    role?: React.HTMLAttributes<HTMLSpanElement>['role'];
+    tabIndex?: number;
 }
 interface CheckboxState {
     checked: boolean;
@@ -28,6 +36,11 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         };
     }>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         checked: PropTypes.Requireable<boolean>;
         defaultChecked: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -40,6 +53,9 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        index: PropTypes.Requireable<number>;
+        'aria-label': PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         defaultChecked: boolean;
@@ -50,12 +66,16 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     };
     checkboxEntity: CheckboxInner;
     get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState>;
+    foundation: CheckboxFoundation;
+    addonId: string;
+    extraId: string;
     constructor(props: CheckboxProps);
     componentDidUpdate(prevProps: CheckboxProps): void;
     isInGroup(): any;
     focus(): void;
     blur(): void;
     handleChange: React.MouseEventHandler<HTMLSpanElement>;
+    handleEnterPress: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
     render(): JSX.Element;
 }
 export default Checkbox;

package/lib/es/checkbox/checkbox.js

@@ -14,6 +14,7 @@ import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/checkbox/checkbox.css';
 import { Context } from './context';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 
 class Checkbox extends BaseComponent {
   constructor(props) {
@@ -21,11 +22,19 @@ class Checkbox extends BaseComponent {
 
     this.handleChange = e => this.foundation.handleChange(e);
 
+    this.handleEnterPress = e => this.foundation.handleEnterPress(e);
+
     const checked = false;
     this.state = {
       checked: props.checked || props.defaultChecked || checked
     };
     this.checkboxEntity = null;
+    this.addonId = getUuidShort({
+      prefix: 'addon'
+    });
+    this.extraId = getUuidShort({
+      prefix: 'extra'
+    });
     this.foundation = new CheckboxFoundation(this.adapter);
   }
 
@@ -85,6 +94,8 @@ class Checkbox extends BaseComponent {
       onMouseLeave,
       extra,
       value,
+      role,
+      tabIndex,
       id
     } = this.props;
     const {
@@ -94,8 +105,9 @@ class Checkbox extends BaseComponent {
       checked,
       disabled
     };
+    const inGroup = this.isInGroup();
 
-    if (this.isInGroup()) {
+    if (inGroup) {
       if (this.context.checkboxGroup.value) {
         var _context;
 
@@ -132,34 +144,52 @@ class Checkbox extends BaseComponent {
     const extraCls = classnames("".concat(prefix, "-extra"), {
       ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
     });
-    const name = this.isInGroup() && this.context.checkboxGroup.name;
+    const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
+      id: this.addonId,
       className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
+      id: this.extraId,
       className: extraCls
     }, extra) : null);
 
-    return /*#__PURE__*/React.createElement("span", {
-      style: style,
-      className: wrapper,
-      id: id,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: this.handleChange
-    }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
-      name: name,
-      isPureCardType: props.isPureCardType,
-      ref: ref => {
-        this.checkboxEntity = ref;
-      }
-    })), props.isCardType ? /*#__PURE__*/React.createElement("div", null, renderContent()) : renderContent());
+    return (
+      /*#__PURE__*/
+      // label is better than span, however span is here which is to solve gitlab issue #364
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      React.createElement("span", {
+        role: role,
+        tabIndex: tabIndex,
+        style: style,
+        className: wrapper,
+        id: id,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onClick: this.handleChange,
+        onKeyPress: this.handleEnterPress,
+        "aria-labelledby": this.props['aria-labelledby']
+      }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
+        addonId: children && this.addonId,
+        extraId: extra && this.extraId,
+        name: name,
+        isPureCardType: props.isPureCardType,
+        ref: ref => {
+          this.checkboxEntity = ref;
+        }
+      })), props.isCardType ? /*#__PURE__*/React.createElement("div", null, renderContent()) : renderContent())
+    );
   }
 
 }
 
 Checkbox.contextType = Context;
 Checkbox.propTypes = {
+  'aria-describedby': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-labelledby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   // Specifies whether it is currently selected
   checked: PropTypes.bool,
   // Initial check
@@ -176,7 +206,10 @@ Checkbox.propTypes = {
   prefixCls: PropTypes.string,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  extra: PropTypes.node
+  extra: PropTypes.node,
+  index: PropTypes.number,
+  'aria-label': PropTypes.string,
+  tabIndex: PropTypes.number
 };
 Checkbox.defaultProps = {
   defaultChecked: false,

package/lib/es/checkbox/checkboxGroup.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxGroupFoundation';
+import CheckboxGroupFoundation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { CheckboxEvent } from './checkbox';
 export declare type CheckboxDirection = 'horizontal' | 'vertical';
 export declare type CheckboxType = 'default' | 'card' | 'pureCard';
 export declare type CheckboxGroupProps = {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     defaultValue?: any[];
     disabled?: boolean;
     name?: string;
@@ -19,12 +24,18 @@ export declare type CheckboxGroupProps = {
     className?: string;
     type?: CheckboxType;
     id?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 };
 export declare type CheckboxGroupState = {
     value?: any[];
 };
 declare class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
@@ -40,6 +51,7 @@ declare class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGr
     };
     static defaultProps: Partial<CheckboxGroupProps>;
     get adapter(): CheckboxGroupAdapter;
+    foundation: CheckboxGroupFoundation;
     constructor(props: CheckboxGroupProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: CheckboxGroupProps): void;

package/lib/es/checkbox/checkboxGroup.js

@@ -10,7 +10,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { checkboxGroupClasses as css, strings } from '@douyinfe/semi-foundation/lib/es/checkbox/constants';
-import CheckboxGroupFoudation from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxGroupFoundation';
+import CheckboxGroupFoundation from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { Context } from './context';
 import Checkbox from './checkbox';
@@ -23,7 +23,7 @@ class CheckboxGroup extends BaseComponent {
     this.state = {
       value: props.value || props.defaultValue
     };
-    this.foundation = new CheckboxGroupFoudation(this.adapter);
+    this.foundation = new CheckboxGroupFoundation(this.adapter);
     this.onChange = _bindInstanceProperty(_context = this.onChange).call(_context, this);
   }
 
@@ -69,7 +69,8 @@ class CheckboxGroup extends BaseComponent {
       className,
       id,
       style,
-      type
+      type,
+      disabled
     } = this.props;
     const isPureCardType = type === strings.TYPE_PURECARD;
     const isCardType = type === strings.TYPE_CARD || isPureCardType;
@@ -91,6 +92,7 @@ class CheckboxGroup extends BaseComponent {
       inner = _mapInstanceProperty(_context5 = options || []).call(_context5, (option, index) => {
         if (typeof option === 'string') {
           return /*#__PURE__*/React.createElement(Checkbox, {
+            role: "listitem",
             key: index,
             disabled: this.props.disabled,
             value: option,
@@ -98,6 +100,7 @@ class CheckboxGroup extends BaseComponent {
           }, option);
         } else {
           return /*#__PURE__*/React.createElement(Checkbox, {
+            role: "listitem",
             key: index,
             disabled: option.disabled || this.props.disabled,
             value: option.value,
@@ -113,14 +116,19 @@ class CheckboxGroup extends BaseComponent {
       var _context6;
 
       inner = _mapInstanceProperty(_context6 = React.Children.toArray(children)).call(_context6, (itm, index) => /*#__PURE__*/React.cloneElement(itm, {
-        key: index
+        key: index,
+        role: 'listitem'
       }));
     }
 
     return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      role: "list",
+      "aria-label": this.props['aria-label'],
       className: prefixClsDisplay,
       style: style,
-      id: id
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props['aria-describedby']
     }, /*#__PURE__*/React.createElement(Context.Provider, {
       value: {
         checkboxGroup: {
@@ -138,6 +146,11 @@ class CheckboxGroup extends BaseComponent {
 }
 
 CheckboxGroup.propTypes = {
+  'aria-describedby': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-labelledby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   defaultValue: PropTypes.array,
   disabled: PropTypes.bool,
   name: PropTypes.string,

package/lib/es/checkbox/checkboxInner.d.ts

@@ -1,6 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxInnerProps {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     indeterminate?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -8,6 +13,9 @@ export interface CheckboxInnerProps {
     name?: string;
     isPureCardType?: boolean;
     ref?: React.MutableRefObject<CheckboxInner> | ((ref: CheckboxInner) => void);
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     static contextType: React.Context<{
@@ -21,6 +29,11 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         };
     }>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         checked: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -28,6 +41,8 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         grouped: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<any>;
         isPureCardType: PropTypes.Requireable<boolean>;
+        addonId: PropTypes.Requireable<string>;
+        extraId: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/es/checkbox/checkboxInner.js

@@ -24,7 +24,9 @@ class CheckboxInner extends PureComponent {
       disabled,
       prefixCls,
       name,
-      isPureCardType
+      isPureCardType,
+      addonId,
+      extraId
     } = this.props;
     const prefix = prefixCls || css.PREFIX;
     const wrapper = classnames({
@@ -39,10 +41,18 @@ class CheckboxInner extends PureComponent {
     return /*#__PURE__*/React.createElement("span", {
       className: wrapper
     }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      "aria-label": this.props['aria-label'],
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      "aria-labelledby": addonId,
+      "aria-describedby": extraId || this.props['aria-describedby'],
+      "aria-invalid": this.props['aria-invalid'],
+      "aria-errormessage": this.props['aria-errormessage'],
+      "aria-required": this.props['aria-required'],
       ref: ref => {
         this.inputEntity = ref;
       },
-      type: "checkbox",
       className: css.INPUT,
       onChange: _noop,
       checked: checked,
@@ -57,13 +67,20 @@ class CheckboxInner extends PureComponent {
 
 CheckboxInner.contextType = Context;
 CheckboxInner.propTypes = {
+  'aria-describedby': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-labelledby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   children: PropTypes.node,
   grouped: PropTypes.bool,
   value: PropTypes.any,
-  isPureCardType: PropTypes.bool
+  isPureCardType: PropTypes.bool,
+  addonId: PropTypes.string,
+  extraId: PropTypes.string
 };
 CheckboxInner.defaultProps = {
   onChange: _noop

package/lib/es/collapse/index.js

@@ -99,7 +99,8 @@ class Collapse extends BaseComponent {
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       className: clsPrefix,
-      style: style
+      style: style,
+      "aria-label": "Collapse"
     }, /*#__PURE__*/React.createElement(CollapseContext.Provider, {
       value: {
         activeSet,

package/lib/es/collapse/item.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode, CSSProperties } from 'react';
+import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { CollapseContextType } from './collapse-context';
 export interface CollapsePanelProps {
@@ -18,6 +18,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         className: PropTypes.Requireable<string>;
         reCalcKey: PropTypes.Requireable<string | number>;
     };
+    private ariaID;
     renderHeader(active: boolean, expandIconEnable?: boolean): JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/collapse/item.js

@@ -20,7 +20,13 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/collapse/constants'
 import Collapsible from '../collapsible';
 import CollapseContext from './collapse-context';
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 export default class CollapsePanel extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.ariaID = getUuidShort({});
+  }
+
   renderHeader(active) {
     let expandIconEnable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {
@@ -44,6 +50,7 @@ export default class CollapsePanel extends PureComponent {
     }
 
     const icon = /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": 'true',
       className: cls(["".concat(cssClasses.PREFIX, "-header-icon"), {
         ["".concat(cssClasses.PREFIX, "-header-iconDisabled")]: !expandIconEnable
       }])
@@ -53,7 +60,9 @@ export default class CollapsePanel extends PureComponent {
     if (typeof header === 'string') {
       return /*#__PURE__*/React.createElement(React.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
         className: "".concat(cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/React.createElement("span", null, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/React.createElement("span", {
+        "aria-label": 'Extra of collapse header'
+      }, extra), iconPosLeft ? null : icon));
     }
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
@@ -88,13 +97,14 @@ export default class CollapsePanel extends PureComponent {
       ["".concat(cssClasses.PREFIX, "-content")]: true
     });
     return /*#__PURE__*/React.createElement("div", _Object$assign({
-      role: "Collapse-panel",
+      "aria-label": 'Collapse panel',
       className: itemCls
     }, restProps), /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
       className: headerCls,
       "aria-expanded": active ? 'true' : 'false',
+      "aria-owns": this.ariaID,
       onClick: e => onClick(itemKey, e)
     }, this.renderHeader(active, children !== undefined)), children && /*#__PURE__*/React.createElement(Collapsible, {
       isOpen: active,
@@ -102,7 +112,10 @@ export default class CollapsePanel extends PureComponent {
       motion: motion,
       reCalcKey: reCalcKey
     }, /*#__PURE__*/React.createElement("div", {
-      className: contentCls
+      className: contentCls,
+      "aria-label": 'Collapse content',
+      "aria-hidden": !active,
+      id: this.ariaID
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(cssClasses.PREFIX, "-content-wrapper")
     }, children))));

package/lib/es/collapsible/index.d.ts

@@ -11,6 +11,7 @@ export interface CollapsibleProps {
     style?: React.CSSProperties;
     collapseHeight?: number;
     reCalcKey?: number | string;
+    id?: string;
 }
 declare const Collapsible: {
     (props: CollapsibleProps): JSX.Element;

package/lib/es/collapsible/index.js

@@ -18,7 +18,8 @@ const Collapsible = props => {
     collapseHeight,
     style,
     className,
-    reCalcKey
+    reCalcKey,
+    id
   } = props;
   const ref = useRef(null);
   const [maxHeight, setMaxHeight] = useState(0);
@@ -87,7 +88,8 @@ const Collapsible = props => {
       ref: setHeight,
       style: {
         overflow: 'hidden'
-      }
+      },
+      id: id
     }, children));
   };
 

package/lib/es/datePicker/datePicker.d.ts

@@ -10,9 +10,15 @@ import { Locale } from '../locale/interface';
 import { RangeType } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
 export interface DatePickerProps extends DatePickerFoundationProps {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     timePickerOpts?: TimePickerProps;
     bottomSlot?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     prefix?: React.ReactNode;
     topSlot?: React.ReactNode;
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
@@ -29,6 +35,11 @@ export declare type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
@@ -58,6 +69,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         prefixCls: PropTypes.Requireable<string>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         zIndex: PropTypes.Requireable<number>;
         position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/datePicker/datePicker.js

@@ -241,6 +241,10 @@ export default class DatePicker extends BaseComponent {
         }
 
         this.clickOutSideHandler = e => {
+          if (this.adapter.needConfirm()) {
+            return;
+          }
+
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
@@ -429,7 +433,8 @@ export default class DatePicker extends BaseComponent {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -476,7 +481,8 @@ export default class DatePicker extends BaseComponent {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 
@@ -502,6 +508,7 @@ export default class DatePicker extends BaseComponent {
       disabled,
       showClear,
       insetLabel,
+      insetLabelId,
       placeholder,
       validateStatus,
       inputStyle,
@@ -542,6 +549,7 @@ export default class DatePicker extends BaseComponent {
       inputStyle,
       showClear,
       insetLabel,
+      insetLabelId,
       type,
       format,
       multiple,
@@ -585,7 +593,12 @@ export default class DatePicker extends BaseComponent {
       className: classnames(className, {
         [prefixCls]: true
       }),
-      ref: this.setTriggerRef
+      ref: this.setTriggerRef,
+      'aria-invalid': this.props['aria-invalid'],
+      'aria-errormessage': this.props['aria-errormessage'],
+      'aria-labelledby': this.props['aria-labelledby'],
+      'aria-describedby': this.props['aria-describedby'],
+      'aria-required': this.props['aria-required']
     };
     const inner = this.renderInner();
     const wrappedInner = this.wrapPopover(inner);
@@ -595,6 +608,11 @@ export default class DatePicker extends BaseComponent {
 }
 DatePicker.contextType = ConfigContext;
 DatePicker.propTypes = {
+  'aria-describedby': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-labelledby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   type: PropTypes.oneOf(strings.TYPE_SET),
   size: PropTypes.oneOf(strings.SIZE_SET),
   density: PropTypes.oneOf(strings.DENSITY_SET),
@@ -624,6 +642,7 @@ DatePicker.propTypes = {
   prefixCls: PropTypes.string,
   prefix: PropTypes.node,
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   zIndex: PropTypes.number,
   position: PropTypes.oneOf(popoverStrings.POSITION_SET),
   getPopupContainer: PropTypes.func,

package/lib/es/datePicker/monthsGrid.d.ts

@@ -49,6 +49,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;

package/lib/es/datePicker/monthsGrid.js

@@ -664,7 +664,8 @@ MonthsGrid.propTypes = {
   syncSwitchMonth: PropTypes.bool,
   // Callback function for panel date switching
   onPanelChange: PropTypes.func,
-  focusRecordsRef: PropTypes.object
+  focusRecordsRef: PropTypes.object,
+  triggerRender: PropTypes.func
 };
 MonthsGrid.defaultProps = {
   type: 'date',