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

package/lib/cjs/tooltip/index.js

@@ -22,6 +22,8 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _each2 = _interopRequireDefault(require("lodash/each"));
@@ -54,6 +56,8 @@ var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/
 
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/tooltip/constants");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 require("@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css");
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
@@ -127,18 +131,11 @@ class Tooltip extends _baseComponent.default {
       }
 
       return false;
-    };
+    }; // willEnter = () => {
+    // this.foundation.calcPosition();
+    // this.setState({ visible: true });
+    // };
 
-    this.willEnter = () => {
-      this.foundation.calcPosition();
-      /**
-       * Dangerous: remove setState in motion fix #1379
-       * because togglePortalVisible callback function will use visible state to notifyVisibleChange
-       * if visible state is old value, then notifyVisibleChange function will not be called
-       * we should ensure that after calling togglePortalVisible, callback function can get right visible value
-       */
-      // this.setState({ visible: true });
-    };
 
     this.didLeave = () => {
       this.adapter.unregisterClickOutsideHandler();
@@ -194,7 +191,9 @@ class Tooltip extends _baseComponent.default {
         visible,
         portalEventSet,
         placement,
-        transitionState
+        transitionState,
+        id,
+        isPositionUpdated
       } = this.state;
       const {
         prefixCls,
@@ -202,6 +201,7 @@ class Tooltip extends _baseComponent.default {
         showArrow,
         style,
         motion,
+        role,
         zIndex
       } = this.props;
       const {
@@ -217,9 +217,8 @@ class Tooltip extends _baseComponent.default {
       const icon = this.renderIcon();
       const portalInnerStyle = (0, _omit2.default)(containerStyle, motion ? ['transformOrigin'] : undefined);
       const transformOrigin = (0, _get2.default)(containerStyle, 'transformOrigin');
-      const inner = motion ? /*#__PURE__*/_react.default.createElement(_TooltipStyledTransition.default, {
+      const inner = motion && isPositionUpdated ? /*#__PURE__*/_react.default.createElement(_TooltipStyledTransition.default, {
         position: placement,
-        willEnter: this.willEnter,
         didLeave: this.didLeave,
         motion: motion
       }, transitionState === 'enter' ? _ref => {
@@ -230,13 +229,13 @@ class Tooltip extends _baseComponent.default {
         } = _ref;
         return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
           className: (0, _classnames.default)(className, animateCls),
-          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
-            visibility: 'visible'
-          }, animateStyle), {
+          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
-          "x-placement": placement
+          role: role,
+          "x-placement": placement,
+          id: id
         }), content, icon);
       } : null) : /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         className: className
@@ -307,7 +306,10 @@ class Tooltip extends _baseComponent.default {
       },
       isInsert: false,
       placement: props.position || 'top',
-      transitionStyle: {}
+      transitionStyle: {},
+      isPositionUpdated: false,
+      id: (0, _uuid.getUuidv4)() // auto generate id, will be used by children.aria-descriptionby & content.id, improve a11y
+
     };
     this.foundation = new _foundation.default(this.adapter);
     this.eventManager = new _Event.default();
@@ -345,18 +347,16 @@ class Tooltip extends _baseComponent.default {
           transitionState: 'enter',
           containerStyle: (0, _assign.default)((0, _assign.default)({}, this.state.containerStyle), containerStyle)
         }, () => {
-          /**
-           * Dangerous: remove setTimeout from here fix #1301
-           * setTimeout may emit portalInserted event after hiding portal
-           * Hiding portal will remove portalInserted event listener(normal process)
-           * then portal can't hide because _togglePortalVisible(false) will found isVisible=false and nowVisible=false(bug here)
-           */
-          this.eventManager.emit('portalInserted');
+          (0, _setTimeout2.default)(() => {
+            // waiting child component mounted
+            this.eventManager.emit('portalInserted');
+          }, 0);
         });
       },
       removePortal: () => {
         this.setState({
-          isInsert: false
+          isInsert: false,
+          isPositionUpdated: false
         });
       },
       getEventName: () => ({
@@ -438,7 +438,8 @@ class Tooltip extends _baseComponent.default {
 
         this.setState({
           containerStyle: (0, _assign.default)((0, _assign.default)({}, this.state.containerStyle), style),
-          placement: position
+          placement: position,
+          isPositionUpdated: true
         }, () => {
           this.eventManager.emit('positionUpdated');
         });
@@ -596,10 +597,13 @@ class Tooltip extends _baseComponent.default {
   render() {
     const {
       isInsert,
-      triggerEventSet
+      triggerEventSet,
+      visible,
+      id
     } = this.state;
     const {
-      wrapWhenSpecial
+      wrapWhenSpecial,
+      role
     } = this.props;
     let {
       children
@@ -626,13 +630,23 @@ class Tooltip extends _baseComponent.default {
         children = this.wrapSpan(children);
         this.isWrapped = true;
       }
+    } // eslint-disable-next-line prefer-const
+
+
+    let ariaAttribute = {}; // Take effect when used by Popover component
+
+    if (role === 'dialog') {
+      ariaAttribute['aria-expanded'] = visible ? 'true' : 'false';
+      ariaAttribute['aria-haspopup'] = 'dialog';
+      ariaAttribute['aria-controls'] = id;
+    } else {
+      ariaAttribute['aria-describedby'] = id;
     } // The incoming children is a single valid element, otherwise wrap a layer with span
 
 
-    const newChild = /*#__PURE__*/_react.default.cloneElement(children, (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, children.props), this.mergeEvents(children.props, triggerEventSet)), {
+    const newChild = /*#__PURE__*/_react.default.cloneElement(children, (0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, ariaAttribute), children.props), this.mergeEvents(children.props, triggerEventSet)), {
       style: (0, _assign.default)((0, _assign.default)({}, (0, _get2.default)(children, 'props.style')), extraStyle),
-      className: (0, _classnames.default)((0, _get2.default)(children, 'props.className') // `${prefixCls}-trigger`
-      ),
+      className: (0, _classnames.default)((0, _get2.default)(children, 'props.className')),
       // to maintain refs with callback
       ref: node => {
         // Keep your own reference
@@ -688,24 +702,26 @@ Tooltip.propTypes = {
   arrowPointAtCenter: _propTypes.default.bool,
   stopPropagation: _propTypes.default.bool,
   // private
+  role: _propTypes.default.string,
   wrapWhenSpecial: _propTypes.default.bool // when trigger has special status such as "disabled" or "loading", wrap span
 
 };
 Tooltip.defaultProps = {
-  transformFromCenter: true,
+  arrowBounding: _constants2.numbers.ARROW_BOUNDING,
+  autoAdjustOverflow: true,
   arrowPointAtCenter: true,
-  wrapWhenSpecial: true,
-  motion: true,
-  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
   trigger: 'hover',
+  transformFromCenter: true,
   position: 'top',
   prefixCls: prefix,
-  autoAdjustOverflow: true,
+  role: 'tooltip',
   mouseEnterDelay: _constants2.numbers.MOUSE_ENTER_DELAY,
   mouseLeaveDelay: _constants2.numbers.MOUSE_LEAVE_DELAY,
+  motion: true,
   onVisibleChange: _noop2.default,
   onClickOutSide: _noop2.default,
   spacing: _constants2.numbers.SPACING,
   showArrow: true,
-  arrowBounding: _constants2.numbers.ARROW_BOUNDING
+  wrapWhenSpecial: true,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX
 };

package/lib/cjs/transfer/index.d.ts

@@ -152,7 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderHeader(headerConfig: HeaderConfig): JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): React.ReactNode;
     renderLeft(locale: Locale['Transfer']): React.ReactNode;
-    renderGroupTitle(group: GroupItem): JSX.Element;
+    renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
     renderRightItem(item: ResolvedDataItem): React.ReactNode;

package/lib/cjs/transfer/index.js

@@ -209,6 +209,8 @@ class Transfer extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "search",
+      "aria-label": "Transfer filter",
       className: "".concat(prefixcls, "-filter")
     }, /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
       prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
@@ -276,6 +278,7 @@ class Transfer extends _baseComponent.default {
       disabled: item.disabled || disabled,
       className: leftItemCls,
       checked: checked,
+      role: "listitem",
       onChange: () => this.onSelectOrRemove(item)
     }, item.label);
   }
@@ -373,11 +376,11 @@ class Transfer extends _baseComponent.default {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = (0, _classnames.default)("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -432,7 +435,7 @@ class Transfer extends _baseComponent.default {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);
@@ -441,7 +444,9 @@ class Transfer extends _baseComponent.default {
       }
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-left-list")
+      className: "".concat(prefixcls, "-left-list"),
+      role: "list",
+      "aria-label": "Option list"
     }, content);
   }
 
@@ -479,19 +484,27 @@ class Transfer extends _baseComponent.default {
     }
 
     const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
+      role: "button",
+      "aria-label": "Drag and sort",
       className: "".concat(prefixcls, "-right-item-drag-handler")
     }));
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: rightItemCls,
-      key: newItem.key
-    }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-right-item-text")
-    }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      onClick: onRemove,
-      className: (0, _classnames.default)("".concat(prefixcls, "-item-close-icon"), {
-        ["".concat(prefixcls, "-item-close-icon-disabled")]: item.disabled
-      })
-    }));
+    return (
+      /*#__PURE__*/
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+      _react.default.createElement("div", {
+        role: "listitem",
+        className: rightItemCls,
+        key: newItem.key
+      }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixcls, "-right-item-text")
+      }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        onClick: onRemove,
+        "aria-disabled": item.disabled,
+        className: (0, _classnames.default)("".concat(prefixcls, "-item-close-icon"), {
+          ["".concat(prefixcls, "-item-close-icon-disabled")]: item.disabled
+        })
+      }))
+    );
   }
 
   renderEmpty(type, emptyText) {
@@ -501,6 +514,7 @@ class Transfer extends _baseComponent.default {
       ["".concat(prefixcls, "-left-empty")]: type === 'left'
     });
     return /*#__PURE__*/_react.default.createElement("div", {
+      "aria-label": "empty",
       className: emptyCls
     }, emptyText);
   }
@@ -513,7 +527,9 @@ class Transfer extends _baseComponent.default {
         items
       } = _ref;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-right-list")
+        className: "".concat(prefixcls, "-right-list"),
+        role: "list",
+        "aria-label": "Selected list"
       }, (0, _map2.default)(items).call(items, (item, index) =>
       /*#__PURE__*/
       // sortableElement will take over the property 'key', so use another '_optionKey' to pass
@@ -583,7 +599,9 @@ class Transfer extends _baseComponent.default {
 
       case selectedData.length && !draggable:
         const list = /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(prefixcls, "-right-list")
+          className: "".concat(prefixcls, "-right-list"),
+          role: "list",
+          "aria-label": "Selected list"
         }, (0, _map2.default)(selectedData).call(selectedData, item => this.renderRightItem((0, _assign.default)({}, item))));
 
         content = list;

package/lib/cjs/tree/index.d.ts

@@ -70,6 +70,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         onDrop: PropTypes.Requireable<(...args: any[]) => any>;
         labelEllipsis: PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         showClear: boolean;

package/lib/cjs/tree/index.js

@@ -563,6 +563,7 @@ class Tree extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+        "aria-label": 'Filter Tree',
         ref: this.inputRef
       }, inputProps));
     }));
@@ -665,6 +666,14 @@ class Tree extends _baseComponent.default {
     });
     const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
     const noData = (0, _isEmpty2.default)(keyEntities) || showFilteredOnly && searchNoRes;
+    const ariaAttr = {
+      role: noData ? 'none' : 'tree'
+    };
+
+    if (ariaAttr.role === 'tree') {
+      ariaAttr['aria-multiselectable'] = multiple ? true : false;
+    }
+
     return /*#__PURE__*/_react.default.createElement(_treeContext.default.Provider, {
       value: {
         treeDisabled: disabled,
@@ -702,13 +711,12 @@ class Tree extends _baseComponent.default {
         labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
+      "aria-label": this.props['aria-label'],
       className: wrapperCls,
-      role: "list-box",
       style: style
-    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: listCls,
-      role: "tree"
-    }, noData ? this.renderEmpty() : this.renderNodeList())));
+    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      className: listCls
+    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
   }
 
 }
@@ -773,7 +781,8 @@ Tree.propTypes = {
   onDragOver: _propTypes.default.func,
   onDragStart: _propTypes.default.func,
   onDrop: _propTypes.default.func,
-  labelEllipsis: _propTypes.default.bool
+  labelEllipsis: _propTypes.default.bool,
+  'aria-label': _propTypes.default.string
 };
 Tree.defaultProps = {
   showClear: true,

package/lib/cjs/tree/treeNode.d.ts

@@ -29,11 +29,19 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     debounceSelect: any;
     refNode: HTMLElement;
     constructor(props: TreeNodeProps);
-    onSelect: (e: React.MouseEvent) => void;
-    onExpand: (e: React.MouseEvent) => void;
-    onCheck: (e: React.MouseEvent) => void;
+    onSelect: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onExpand: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onCheck: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * A11y: simulate checkbox click
+     */
+    handleCheckEnterPress: (e: React.KeyboardEvent) => void;
     onContextMenu: (e: React.MouseEvent) => void;
-    onClick: (e: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * A11y: simulate li click
+     */
+    handleliEnterPress: (e: React.KeyboardEvent) => void;
     onDoubleClick: (e: React.MouseEvent) => void;
     onDragStart: (e: React.DragEvent) => void;
     onDragEnter: (e: React.DragEvent) => void;

package/lib/cjs/tree/treeNode.js

@@ -24,6 +24,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -38,6 +40,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/tree/constants");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 var _semiIcons = require("@douyinfe/semi-icons");
 
 var _checkbox = require("../checkbox");
@@ -95,6 +99,16 @@ class TreeNode extends _react.PureComponent {
       e.nativeEvent.stopImmediatePropagation();
       onNodeCheck(e, this.props);
     };
+    /**
+     * A11y: simulate checkbox click
+     */
+
+
+    this.handleCheckEnterPress = e => {
+      if ((0, _isEnterPress.default)(e)) {
+        this.onCheck(e);
+      }
+    };
 
     this.onContextMenu = e => {
       const {
@@ -119,6 +133,16 @@ class TreeNode extends _react.PureComponent {
         this.onExpand(e);
       }
     };
+    /**
+     * A11y: simulate li click
+     */
+
+
+    this.handleliEnterPress = e => {
+      if ((0, _isEnterPress.default)(e)) {
+        this.onClick(e);
+      }
+    };
 
     this.onDoubleClick = e => {
       const {
@@ -294,7 +318,8 @@ class TreeNode extends _react.PureComponent {
   renderArrow() {
     const showIcon = !this.isLeaf();
     const {
-      loading
+      loading,
+      expanded
     } = this.props;
 
     if (loading) {
@@ -305,6 +330,8 @@ class TreeNode extends _react.PureComponent {
 
     if (showIcon) {
       return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleDown, {
+        role: 'button',
+        "aria-label": "".concat(expanded ? 'Expand' : 'Collapse', " the tree item"),
         className: "".concat(prefixcls, "-expand-icon"),
         size: "small",
         onClick: this.onExpand
@@ -323,8 +350,11 @@ class TreeNode extends _react.PureComponent {
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/_react.default.createElement("div", {
-      onClick: this.onCheck
+      role: 'none',
+      onClick: this.onCheck,
+      onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+      "aria-label": 'Toggle the checked state of checkbox',
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
@@ -377,7 +407,7 @@ class TreeNode extends _react.PureComponent {
     });
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: wrapperCls
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("li", {
       className: (0, _concat.default)(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
@@ -484,11 +514,21 @@ class TreeNode extends _react.PureComponent {
       ["".concat(prefixcls, "-drag-over-gap-top")]: !disabled && dragOverGapTop,
       ["".concat(prefixcls, "-drag-over-gap-bottom")]: !disabled && dragOverGapBottom
     });
+    const setsize = (0, _get2.default)(rest, ['data', 'children', 'length']);
+    const posinset = (0, _isString2.default)(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
     return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
       className: nodeCls,
-      role: "treenode",
+      role: "treeitem",
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      "aria-selected": selected,
+      "aria-setsize": setsize,
+      "aria-posinset": posinset,
+      "aria-expanded": expanded,
+      "aria-level": level + 1,
       "data-key": eventKey,
       onClick: this.onClick,
+      onKeyPress: this.handleliEnterPress,
       onContextMenu: this.onContextMenu,
       onDoubleClick: this.onDoubleClick,
       ref: this.setRef,

package/lib/cjs/treeSelect/index.d.ts

@@ -34,6 +34,11 @@ export declare type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'd
 * TreeSelectProps inherits some properties from BasicTreeSelectProps (from foundation) and TreeProps (from semi-ui-react).
 */
 export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps> {
+    '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'];
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -45,6 +50,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     dropdownMatchSelectWidth?: boolean;
     dropdownStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     maxTagCount?: number;
     motionExpand?: boolean;
     optionListStyle?: React.CSSProperties;
@@ -85,6 +91,11 @@ export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, Override
 declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     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>;
         loadedKeys: PropTypes.Requireable<string[]>;
         loadData: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
@@ -136,6 +147,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         zIndex: PropTypes.Requireable<number>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownMatchSelectWidth: PropTypes.Requireable<boolean>;
@@ -156,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         optionListStyle: PropTypes.Requireable<object>;
         searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<TreeSelectProps>;
     inputRef: React.RefObject<typeof Input>;
@@ -167,6 +180,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
+    treeSelectID: string;
     constructor(props: TreeSelectProps);
     static getDerivedStateFromProps(props: TreeSelectProps, prevState: TreeSelectState): Partial<TreeSelectState>;
     get adapter(): TreeSelectAdapter<TreeSelectProps, TreeSelectState>;
@@ -177,6 +191,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderContent: () => JSX.Element;
     removeTag: (removedKey: TreeNodeData['key']) => void;
     handleClick: (e: React.MouseEvent) => void;
+    handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     showClearBtn: () => boolean;
     renderTagList: () => React.ReactNode[];
     /**
@@ -189,6 +204,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderSingleTriggerSearch: () => JSX.Element;
     renderSelectContent: () => JSX.Element;
     handleClear: (e: React.MouseEvent) => void;
+    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleMouseOver: (e: React.MouseEvent) => void;
     handleMouseLeave: (e: React.MouseEvent) => void;
     search: (value: string) => void;