@douyinfe/semi-ui 2.2.2 → 2.4.0-beta.0

package/lib/es/table/TableCell.js

@@ -288,7 +288,8 @@ export default class TableCell extends BaseComponent {
       fixedLeft,
       fixedRight,
       lastFixedLeft,
-      firstFixedRight
+      firstFixedRight,
+      colIndex
     } = this.props;
     const {
       className
@@ -327,6 +328,8 @@ export default class TableCell extends BaseComponent {
       ["".concat(prefixCls, "-cell-fixed-right-first")]: firstFixedRight
     });
     return /*#__PURE__*/React.createElement(BodyCell, _Object$assign({
+      role: "gridcell",
+      "aria-colindex": colIndex + 1,
       className: columnCls,
       onClick: this.handleClick
     }, newTdProps, {
@@ -366,5 +369,6 @@ TableCell.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selected: PropTypes.bool,
-  expanded: PropTypes.bool
+  expanded: PropTypes.bool,
+  colIndex: PropTypes.number
 };

package/lib/es/table/TableHeaderRow.js

@@ -157,13 +157,19 @@ export default class TableHeaderRow extends BaseComponent {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(HeaderCell, _Object$assign({}, props, {
+      return /*#__PURE__*/React.createElement(HeaderCell, _Object$assign({
+        role: "columnheader",
+        "aria-colindex": cellIndex + 1
+      }, props, {
         style: cellStyle,
         key: column.key || column.dataIndex || cellIndex
       }));
     });
 
-    return /*#__PURE__*/React.createElement(HeaderRow, _Object$assign({}, rowProps, {
+    return /*#__PURE__*/React.createElement(HeaderRow, _Object$assign({
+      role: "row",
+      "aria-rowindex": index + 1
+    }, rowProps, {
       style: style,
       ref: this.cacheRef
     }), cells);

package/lib/es/tabs/TabBar.js

@@ -57,6 +57,8 @@ class TabBar extends React.Component {
       } = this.props;
       const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
       const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
+        "aria-label": "Close",
+        role: "button",
         className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
         onClick: e => deleteTabItem(panel.itemKey, e)
       }) : null;
@@ -69,16 +71,20 @@ class TabBar extends React.Component {
         };
       }
 
+      const isSelected = this._isActive(key);
+
       const className = cls(cssClasses.TABS_TAB, {
-        [cssClasses.TABS_TAB_ACTIVE]: this._isActive(key),
+        [cssClasses.TABS_TAB_ACTIVE]: isSelected,
         [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
         ["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
         ["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
       });
       return /*#__PURE__*/React.createElement("div", _Object$assign({
         role: "tab",
+        id: "semiTab".concat(key),
+        "aria-controls": "semiTabPanel".concat(key),
         "aria-disabled": panel.disabled ? 'true' : 'false',
-        "aria-selected": this._isActive(key) ? 'true' : 'false'
+        "aria-selected": isSelected ? 'true' : 'false'
       }, events, {
         className: className,
         key: this._getItemKey(key)
@@ -154,6 +160,7 @@ class TabBar extends React.Component {
         style: dropdownStyle,
         trigger: 'hover'
       }, /*#__PURE__*/React.createElement("div", {
+        role: "presentation",
         className: arrowCls,
         onClick: e => this.handleArrowClick(items, pos)
       }, /*#__PURE__*/React.createElement(Button, {
@@ -264,7 +271,8 @@ class TabBar extends React.Component {
     const extra = this.renderExtra();
     const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
     return /*#__PURE__*/React.createElement("div", _Object$assign({
-      role: "tab-list",
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" ? "vertical" : "horizontal",
       className: classNames,
       style: style
     }, getDataAttr(restProps), {

package/lib/es/tabs/TabPane.js

@@ -105,7 +105,9 @@ class TabPane extends PureComponent {
     const shouldRender = this.shouldRender();
     return /*#__PURE__*/React.createElement("div", _Object$assign({
       ref: this.ref,
-      role: "tab-panel",
+      role: "tabpanel",
+      id: "semiTabPanel".concat(itemKey),
+      "aria-labelledby": "semiTab".concat(itemKey),
       className: classNames,
       style: style,
       "aria-hidden": active ? 'false' : 'true'

package/lib/es/tabs/index.js

@@ -328,7 +328,6 @@ class Tabs extends BaseComponent {
       }
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.setContentRef,
-      role: "tab-content",
       className: tabContentCls,
       style: _Object$assign({}, contentStyle)
     }, content)));

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

@@ -40,8 +40,9 @@ export interface TagInputProps {
     style?: React.CSSProperties;
     suffix?: React.ReactNode;
     validateStatus?: ValidateStatus;
-    value?: string[];
+    value?: string[] | undefined;
     autoFocus?: boolean;
+    'aria-label'?: string;
 }
 export interface TagInputState {
     tagsArray?: string[];
@@ -84,6 +85,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         showClear: boolean;
@@ -118,6 +120,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     handleInputFocus: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleInputBlur: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleClearBtn: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleTagClose: (idx: number) => void;
     handleInputMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleInputMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;

package/lib/es/tagInput/index.js

@@ -45,6 +45,10 @@ class TagInput extends BaseComponent {
       this.foundation.handleClearBtn(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleTagClose = idx => {
       this.foundation.handleTagClose(idx);
     };
@@ -72,8 +76,21 @@ class TagInput extends BaseComponent {
       value,
       inputValue
     } = nextProps;
+    const {
+      tagsArray: prevTagsArray
+    } = prevState;
+    let tagsArray;
+
+    if (_isArray(value)) {
+      tagsArray = value;
+    } else if ('value' in nextProps && !value) {
+      tagsArray = [];
+    } else {
+      tagsArray = prevTagsArray;
+    }
+
     return {
-      tagsArray: _isArray(value) ? value : prevState.tagsArray,
+      tagsArray,
       inputValue: _isString(inputValue) ? inputValue : prevState.inputValue
     };
   }
@@ -151,8 +168,12 @@ class TagInput extends BaseComponent {
 
     if (showClear) {
       return /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear TagInput value",
         className: clearCls,
-        onClick: e => this.handleClearBtn(e)
+        onClick: e => this.handleClearBtn(e),
+        onKeyPress: e => this.handleClearEnterPress(e)
       }, /*#__PURE__*/React.createElement(IconClear, null));
     }
 
@@ -307,6 +328,9 @@ class TagInput extends BaseComponent {
     return /*#__PURE__*/React.createElement("div", {
       style: style,
       className: tagInputCls,
+      "aria-disabled": disabled,
+      "aria-label": this.props['aria-label'],
+      "aria-invalid": validateStatus === 'error',
       onMouseEnter: e => {
         this.handleInputMouseEnter(e);
       },
@@ -316,6 +340,7 @@ class TagInput extends BaseComponent {
     }, this.renderPrefix(), /*#__PURE__*/React.createElement("div", {
       className: wrapperCls
     }, this.renderTags(), /*#__PURE__*/React.createElement(Input, {
+      "aria-label": 'input value',
       ref: this.inputRef,
       className: inputCls,
       disabled: disabled,
@@ -372,7 +397,8 @@ TagInput.propTypes = {
   size: PropTypes.oneOf(strings.SIZE_SET),
   validateStatus: PropTypes.oneOf(strings.STATUS),
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  'aria-label': PropTypes.string
 };
 TagInput.defaultProps = {
   showClear: false,

package/lib/es/timePicker/TimePicker.d.ts

@@ -15,6 +15,11 @@ export interface Panel {
 export declare type BaseValueType = string | number | Date;
 export declare type Type = 'time' | 'timeRange';
 export declare type TimePickerProps = {
+    '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'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
@@ -35,6 +40,7 @@ export declare type TimePickerProps = {
     inputReadOnly?: boolean;
     inputStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     locale?: Locale['TimePicker'];
     localeCode?: string;
     minuteStep?: number;
@@ -63,6 +69,7 @@ export declare type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -83,6 +90,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         inputStyle: PropTypes.Requireable<object>;
         panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
@@ -124,6 +136,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         dateFnsLocale: PropTypes.Requireable<object>;
         zIndex: PropTypes.Requireable<string | number>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         type: PropTypes.Requireable<Type>;
         rangeSeparator: PropTypes.Requireable<string>;
@@ -157,6 +170,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/es/timePicker/TimePicker.js

@@ -149,9 +149,7 @@ export default class TimePicker extends BaseComponent {
       notifyOpenChange: function () {
         return _this2.props.onOpenChange(...arguments);
       },
-      notifyChange: function () {
-        return _this2.props.onChange && _this2.props.onChange(...arguments);
-      },
+      notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
       notifyFocus: function () {
         return _this2.props.onFocus && _this2.props.onFocus(...arguments);
       },
@@ -291,6 +289,7 @@ export default class TimePicker extends BaseComponent {
       zIndex,
       getPopupContainer,
       insetLabel,
+      insetLabelId,
       inputStyle,
       showClear,
       panelHeader,
@@ -308,7 +307,7 @@ export default class TimePicker extends BaseComponent {
       motion,
       autoAdjustOverflow
     } = _a,
-          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
+          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
 
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
@@ -337,6 +336,7 @@ export default class TimePicker extends BaseComponent {
       value: inputValue,
       onFocus: this.handleFocus,
       insetLabel,
+      insetLabelId,
       format,
       locale,
       localeCode,
@@ -387,6 +387,11 @@ export default class TimePicker extends BaseComponent {
 }
 TimePicker.contextType = ConfigContext;
 TimePicker.propTypes = _Object$assign(_Object$assign({
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   prefixCls: PropTypes.string,
   clearText: PropTypes.string,
   value: TimeShape,
@@ -425,6 +430,7 @@ TimePicker.propTypes = _Object$assign(_Object$assign({
   dateFnsLocale: PropTypes.object,
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   validateStatus: PropTypes.oneOf(strings.STATUS),
   type: PropTypes.oneOf(strings.TYPES),
   rangeSeparator: PropTypes.string,
@@ -461,6 +467,7 @@ TimePicker.defaultProps = _Object$assign({
   onFocus: _noop,
   onBlur: _noop,
   onChange: _noop,
+  onChangeWithDateFirst: true,
   use12Hours: false,
   focusOnOpen: false,
   onKeyDown: _noop,

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

@@ -11,6 +11,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         inputStyle: import("prop-types").Requireable<object>;
         panelHeader: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        'aria-labelledby': import("prop-types").Requireable<string>;
+        'aria-invalid': import("prop-types").Requireable<boolean>;
+        'aria-errormessage': import("prop-types").Requireable<string>;
+        'aria-describedby': import("prop-types").Requireable<string>;
+        'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
         value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
@@ -52,6 +57,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         dateFnsLocale: import("prop-types").Requireable<object>;
         zIndex: import("prop-types").Requireable<string | number>;
         insetLabel: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        insetLabelId: import("prop-types").Requireable<string>;
         validateStatus: import("prop-types").Requireable<"default" | "error" | "warning" | "success">;
         type: import("prop-types").Requireable<import("./TimePicker").Type>;
         rangeSeparator: import("prop-types").Requireable<string>;
@@ -85,6 +91,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

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

@@ -6,7 +6,7 @@ export { TimelineItemProps } from './item';
 export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
-export interface TimelineProps {
+export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
     mode?: 'left' | 'right' | 'center' | 'alternate';
     className?: string;
     style?: React.CSSProperties;

package/lib/es/timeline/index.js

@@ -94,6 +94,7 @@ class Timeline extends PureComponent {
 
     const items = childrenList || this.addClassName(children);
     return /*#__PURE__*/React.createElement("ul", {
+      "aria-label": this.props['aria-label'],
       style: style,
       className: classString
     }, items);

package/lib/es/timeline/item.js

@@ -38,9 +38,11 @@ export default class Item extends PureComponent {
       style: style,
       onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-tail")
+      className: "".concat(prefixCls, "-tail"),
+      "aria-hidden": true
     }), /*#__PURE__*/React.createElement("div", _Object$assign({
-      className: dotCls
+      className: dotCls,
+      "aria-hidden": true
     }, dotStyle), dot), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, children, extra && /*#__PURE__*/React.createElement("div", {

package/lib/es/toast/toast.js

@@ -111,6 +111,8 @@ class Toast extends BaseComponent {
     const btnTheme = 'borderless';
     const btnSize = 'small';
     return /*#__PURE__*/React.createElement("div", {
+      role: 'alert',
+      "aria-label": "".concat(type ? type : 'default', " type"),
       className: toastCls,
       style: style,
       onMouseEnter: this.clearCloseTimer,

package/lib/es/tooltip/TriangleArrow.js

@@ -23,6 +23,7 @@ const TriangleArrow = props => {
         restProps = __rest(props, ["className", "style"]);
 
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    "aria-hidden": true,
     className: className,
     style: style
   }, restProps, {

package/lib/es/tooltip/TriangleArrowVertical.js

@@ -23,6 +23,7 @@ const TriangleArrowVertical = props => {
         restProps = __rest(props, ["className", "style"]);
 
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    "aria-hidden": true,
     className: className,
     style: style
   }, restProps, {

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

@@ -36,6 +36,7 @@ export interface TooltipProps extends BaseProps {
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
     rePosKey?: string | number;
+    role?: string;
     arrowBounding?: ArrowBounding;
     transformFromCenter?: boolean;
     arrowPointAtCenter?: boolean;
@@ -57,6 +58,8 @@ interface TooltipState {
     isInsert: boolean;
     placement: Position;
     transitionStyle: Record<string, any>;
+    isPositionUpdated: boolean;
+    id: string;
 }
 export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
@@ -92,30 +95,32 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         transformFromCenter: PropTypes.Requireable<boolean>;
         arrowPointAtCenter: PropTypes.Requireable<boolean>;
         stopPropagation: PropTypes.Requireable<boolean>;
+        role: PropTypes.Requireable<string>;
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
-        transformFromCenter: boolean;
+        arrowBounding: {
+            readonly offsetX: 0;
+            readonly offsetY: 2;
+            readonly width: 24;
+            readonly height: 7;
+        };
+        autoAdjustOverflow: boolean;
         arrowPointAtCenter: boolean;
-        wrapWhenSpecial: boolean;
-        motion: boolean;
-        zIndex: 1060;
         trigger: string;
+        transformFromCenter: boolean;
         position: string;
         prefixCls: "semi-tooltip";
-        autoAdjustOverflow: boolean;
+        role: string;
         mouseEnterDelay: 50;
         mouseLeaveDelay: 50;
+        motion: boolean;
         onVisibleChange: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;
         spacing: 8;
         showArrow: boolean;
-        arrowBounding: {
-            readonly offsetX: 0;
-            readonly offsetY: 2;
-            readonly width: 24;
-            readonly height: 7;
-        };
+        wrapWhenSpecial: boolean;
+        zIndex: 1060;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;
@@ -135,7 +140,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
-    willEnter: () => void;
     didLeave: () => void;
     /** for transition - end */
     rePosition(): any;