@douyinfe/semi-ui 2.11.2 → 2.12.0-alpha.0

package/lib/es/modal/ModalContent.js

@@ -90,7 +90,9 @@ export default class ModalContent extends BaseComponent {
       let closer;
 
       if (closable) {
-        const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, null);
+        const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, {
+          "x-semi-prop": "closeIcon"
+        });
         closer = /*#__PURE__*/React.createElement(Button, {
           "aria-label": "close",
           className: "".concat(cssClasses.DIALOG, "-close"),
@@ -111,7 +113,8 @@ export default class ModalContent extends BaseComponent {
         icon
       } = this.props;
       return icon ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cssClasses.DIALOG, "-icon-wrapper")
+        className: "".concat(cssClasses.DIALOG, "-icon-wrapper"),
+        "x-semi-prop": "icon"
       }, icon) : null;
     };
 
@@ -130,7 +133,8 @@ export default class ModalContent extends BaseComponent {
       }, icon, /*#__PURE__*/React.createElement(Typography.Title, {
         heading: 5,
         className: "".concat(cssClasses.DIALOG, "-title"),
-        id: "".concat(cssClasses.DIALOG, "-title")
+        id: "".concat(cssClasses.DIALOG, "-title"),
+        "x-semi-prop": "title"
       }, title), closer);
     };
 
@@ -149,12 +153,14 @@ export default class ModalContent extends BaseComponent {
       return hasHeader ? /*#__PURE__*/React.createElement("div", {
         className: bodyCls,
         id: "".concat(cssClasses.DIALOG, "-body"),
-        style: bodyStyle
+        style: bodyStyle,
+        "x-semi-prop": "children"
       }, children) : /*#__PURE__*/React.createElement("div", {
         className: "".concat(cssClasses.DIALOG, "-body-wrapper")
       }, icon, /*#__PURE__*/React.createElement("div", {
         className: bodyCls,
-        style: bodyStyle
+        style: bodyStyle,
+        "x-semi-prop": "children"
       }, children), closer);
     };
 
@@ -186,7 +192,8 @@ export default class ModalContent extends BaseComponent {
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-footer")
+        className: "".concat(cssClasses.DIALOG, "-footer"),
+        "x-semi-prop": "footer"
       }, props.footer) : null;
       const dialogElement =
       /*#__PURE__*/

package/lib/es/notification/notice.js

@@ -115,7 +115,8 @@ class Notice extends BaseComponent {
 
     if (iconType) {
       return /*#__PURE__*/React.createElement("div", {
-        className: iconCls
+        className: iconCls,
+        "x-semi-prop": "icon"
       }, isSemiIcon(iconType) ? /*#__PURE__*/React.cloneElement(iconType, {
         size: iconType.props.size || 'large'
       }) : iconType);
@@ -173,9 +174,11 @@ class Notice extends BaseComponent {
         className: "".concat(prefixCls, "-content-wrapper")
       }, title ? /*#__PURE__*/React.createElement("div", {
         id: titleID,
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-content")
+        className: "".concat(prefixCls, "-content"),
+        "x-semi-prop": "content"
       }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
         className: "".concat(prefixCls, "-icon-close"),
         type: "tertiary",

package/lib/es/pagination/index.js

@@ -154,7 +154,8 @@ export default class Pagination extends BaseComponent {
       "aria-disabled": prevDisabled ? true : false,
       "aria-label": "Previous",
       onClick: e => !prevDisabled && this.foundation.goPrev(e),
-      className: preClassName
+      className: preClassName,
+      "x-semi-prop": "prevText"
     }, prevText || /*#__PURE__*/React.createElement(IconChevronLeft, {
       size: "large"
     }));
@@ -177,7 +178,8 @@ export default class Pagination extends BaseComponent {
       "aria-disabled": nextDisabled ? true : false,
       "aria-label": "Next",
       onClick: e => !nextDisabled && this.foundation.goNext(e),
-      className: nextClassName
+      className: nextClassName,
+      "x-semi-prop": "prevText"
     }, nextText || /*#__PURE__*/React.createElement(IconChevronRight, {
       size: "large"
     }));

package/lib/es/popconfirm/index.js

@@ -122,13 +122,16 @@ export default class Popconfirm extends BaseComponent {
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-header")
     }, /*#__PURE__*/React.createElement("i", {
-      className: "".concat(prefixCls, "-header-icon")
+      className: "".concat(prefixCls, "-header-icon"),
+      "x-semi-prop": "icon"
     }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-header-body")
     }, showTitle ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header-title")
+      className: "".concat(prefixCls, "-header-title"),
+      "x-semi-prop": "title"
     }, title) : null, showContent ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header-content")
+      className: "".concat(prefixCls, "-header-content"),
+      "x-semi-prop": "content"
     }, content) : null), /*#__PURE__*/React.createElement(Button, {
       className: "".concat(prefixCls, "-btn-close"),
       icon: /*#__PURE__*/React.createElement(IconClose, null),

package/lib/es/radio/radio.d.ts

@@ -75,7 +75,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radio.js

@@ -165,10 +165,12 @@ class Radio extends BaseComponent {
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: addonId
+      id: this.addonId,
+      "x-semi-prop": "children"
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: extraId
+      id: this.extraId,
+      "x-semi-prop": "extra"
     }, extra) : null);
 
     return /*#__PURE__*/React.createElement("label", {

package/lib/es/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/rating/item.js

@@ -98,7 +98,8 @@ export default class Item extends PureComponent {
         width: "".concat(firstWidth * 100, "%")
       }
     }, content), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-second")
+      className: "".concat(prefixCls, "-second"),
+      "x-semi-prop": "character"
     }, content)));
   }
 

package/lib/es/scrollList/index.js

@@ -35,16 +35,19 @@ class ScrollList extends BaseComponent {
     }, header ? /*#__PURE__*/React.createElement("div", {
       className: clsHeader
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsHeader, "-title")
+      className: "".concat(clsHeader, "-title"),
+      "x-semi-prop": this.props['x-semi-header-alias'] || "header"
     }, header), /*#__PURE__*/React.createElement("div", {
       className: "".concat(clsWrapper, "-line")
     })) : null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(clsWrapper, "-body"),
       style: {
         height: bodyHeight ? bodyHeight : ''
-      }
+      },
+      "x-semi-prop": "children"
     }, children), footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-footer")
+      className: "".concat(clsWrapper, "-footer"),
+      "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
     }, footer) : null);
   }
 

package/lib/es/select/index.js

@@ -626,7 +626,7 @@ class Select extends BaseComponent {
       role: "listbox",
       "aria-multiselectable": multiple,
       onScroll: e => this.foundation.handleListScroll(e)
-    }, innerTopSlot, !loading ? listContent : this.renderLoading(), isEmpty && !loading ? this.renderEmpty() : null, innerBottomSlot), outerBottomSlot);
+    }, innerTopSlot, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot), outerBottomSlot);
   }
 
   renderSingleSelection(selections, filterable) {
@@ -663,7 +663,8 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/React.createElement("span", {
-      className: spanCls
+      className: spanCls,
+      "x-semi-prop": "placeholder"
     }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
   }
 
@@ -825,7 +826,8 @@ class Select extends BaseComponent {
       ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: suffixWrapperCls
+      className: suffixWrapperCls,
+      "x-semi-prop": "suffix"
     }, suffix);
   }
 
@@ -844,7 +846,8 @@ class Select extends BaseComponent {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: prefixWrapperCls,
-      id: insetLabelId
+      id: insetLabelId,
+      "x-semi-prop": "prefix,insetLabel"
     }, labelNode);
   }
 
@@ -896,7 +899,8 @@ class Select extends BaseComponent {
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-arrow")
+      className: "".concat(prefixcls, "-arrow"),
+      "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixcls, "-arrow-empty")
     });

package/lib/es/select/option.js

@@ -100,7 +100,8 @@ class Option extends PureComponent {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement("div", {
-        className: optionClassName
+        className: optionClassName,
+        "x-semi-prop": "emptyContent"
       }, emptyContent || locale.emptyText));
     } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
 

package/lib/es/sideSheet/SideSheetContent.js

@@ -79,7 +79,8 @@ export default class SideSheetContent extends React.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, this.props.title);
     }
 
@@ -134,9 +135,11 @@ export default class SideSheetContent extends React.PureComponent {
       className: "".concat(prefixCls, "-content")
     }, header, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-body"),
-      style: props.bodyStyle
+      style: props.bodyStyle,
+      "x-semi-prop": "children"
     }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
+      className: "".concat(prefixCls, "-footer"),
+      "x-semi-prop": "footer"
     }, props.footer) : null));
     return dialogElement;
   }

package/lib/es/skeleton/index.js

@@ -43,7 +43,9 @@ class Skeleton extends PureComponent {
       content = /*#__PURE__*/React.createElement("div", _Object$assign({
         className: skCls,
         style: style
-      }, others), placeholder);
+      }, others, {
+        "x-semi-prop": "placeholder"
+      }), placeholder);
     } else {
       content = children;
     }

package/lib/es/slider/index.js

@@ -243,7 +243,7 @@ export default class Slider extends BaseComponent {
         React.createElement("div", {
           className: cssClasses.TRACK,
           style: trackStyle,
-          onClick: e => this.foundation.handleWrapClick(e)
+          onClick: this.foundation.handleWrapClick
         })
       );
     };
@@ -271,7 +271,7 @@ export default class Slider extends BaseComponent {
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         React.createElement("span", {
           key: mark,
-          onClick: e => this.foundation.handleWrapClick(e),
+          onClick: this.foundation.handleWrapClick,
           className: markClass,
           style: {
             [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")
@@ -299,12 +299,16 @@ export default class Slider extends BaseComponent {
 
         const activeResult = this.foundation.isMarkActive(Number(mark));
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ? /*#__PURE__*/React.createElement("span", {
+        return activeResult ?
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        React.createElement("span", {
           key: mark,
           className: cls(_concatInstanceProperty(_context3 = "".concat(prefixCls, "-mark")).call(_context3, vertical && verticalReverse ? '-reverse' : '')),
           style: {
             [stylePos]: "".concat(markPercent * 100, "%")
-          }
+          },
+          onClick: this.foundation.handleWrapClick
         }, marks[mark]) : null;
       })) : null;
       return labelContent;
@@ -584,7 +588,7 @@ export default class Slider extends BaseComponent {
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-rail"),
-      onClick: e => this.foundation.handleWrapClick(e),
+      onClick: this.foundation.handleWrapClick,
       style: this.props.railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/React.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/React.createElement("div", {
       className: boundaryClass

package/lib/es/space/index.js

@@ -66,7 +66,8 @@ class Space extends PureComponent {
     const childrenNodes = flatten(children);
     return /*#__PURE__*/React.createElement("div", {
       className: classNames,
-      style: realStyle
+      style: realStyle,
+      "x-semi-prop": "children"
     }, childrenNodes);
   }
 

package/lib/es/spin/index.js

@@ -67,8 +67,11 @@ class Spin extends BaseComponent {
     return loading ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-wrapper")
     }, indicator ? /*#__PURE__*/React.createElement("div", {
-      className: spinIconCls
-    }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", null, tip) : null) : null;
+      className: spinIconCls,
+      "x-semi-prop": "indicator"
+    }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", {
+      "x-semi-prop": "tip"
+    }, tip) : null) : null;
   }
 
   render() {
@@ -95,7 +98,8 @@ class Spin extends BaseComponent {
       style: style
     }, this.renderSpin(), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-children"),
-      style: childStyle
+      style: childStyle,
+      "x-semi-prop": "children"
     }, children));
   }
 

package/lib/es/switch/index.js

@@ -119,19 +119,21 @@ class Switch extends BaseComponent {
       className: cssClasses.KNOB,
       "aria-hidden": true
     }), showCheckedText ? /*#__PURE__*/React.createElement("div", {
-      className: cssClasses.CHECKED_TEXT
+      className: cssClasses.CHECKED_TEXT,
+      "x-semi-prop": "checkedText"
     }, checkedText) : null, showUncheckedText ? /*#__PURE__*/React.createElement("div", {
-      className: cssClasses.UNCHECKED_TEXT
+      className: cssClasses.UNCHECKED_TEXT,
+      "x-semi-prop": "uncheckedText"
     }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, switchProps, {
       ref: this.switchRef,
       id: id,
-      role: 'switch',
+      role: "switch",
       "aria-checked": nativeControlChecked,
       "aria-invalid": this.props['aria-invalid'],
       "aria-errormessage": this.props['aria-errormessage'],
       "aria-label": this.props['aria-label'],
       "aria-labelledby": this.props['aria-labelledby'],
-      "aria-describedby": this.props["aria-describedby"],
+      "aria-describedby": this.props['aria-describedby'],
       "aria-disabled": this.props['disabled'],
       onChange: e => this.foundation.handleChange(e.target.checked, e),
       onFocus: e => this.handleFocusVisible(e),

package/lib/es/table/Table.d.ts

@@ -280,7 +280,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
      * Combine pagination and table paging processing functions
      */
     mergePagination: (pagination: TablePaginationProps) => {
-        position?: "top" | "bottom" | "both";
+        position?: "both" | "top" | "bottom";
         formatPageText?: import("./interface").FormatPageText;
         style?: React.CSSProperties;
         className?: string;

package/lib/es/table/Table.js

@@ -582,7 +582,8 @@ class Table extends BaseComponent {
       }
 
       return /*#__PURE__*/isValidElement(title) || typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, title) : null;
     };
 
@@ -607,7 +608,8 @@ class Table extends BaseComponent {
       }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
         className: wrapCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-empty")
+        className: "".concat(prefixCls, "-empty"),
+        "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
 
@@ -627,7 +629,8 @@ class Table extends BaseComponent {
 
       return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-footer"),
-        key: "footer"
+        key: "footer",
+        "x-semi-prop": "footer"
       }, footer) : null;
     };
 

package/lib/es/tabs/TabBar.d.ts

@@ -30,6 +30,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     renderIcon(icon: ReactNode): ReactNode;
     renderExtra(): ReactNode;
     handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
+    handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
     renderTabItem: (panel: PlainTab) => ReactNode;
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;

package/lib/es/tabs/TabBar.js

@@ -49,6 +49,10 @@ class TabBar extends React.Component {
       }
     };
 
+    this.handleKeyDown = (event, itemKey, closable) => {
+      this.props.handleKeyDown(event, itemKey, closable);
+    };
+
     this.renderTabItem = panel => {
       const {
         size,
@@ -82,9 +86,12 @@ class TabBar extends React.Component {
       return /*#__PURE__*/React.createElement("div", _Object$assign({
         role: "tab",
         id: "semiTab".concat(key),
+        "data-tabkey": "semiTab".concat(key),
         "aria-controls": "semiTabPanel".concat(key),
         "aria-disabled": panel.disabled ? 'true' : 'false',
-        "aria-selected": isSelected ? 'true' : 'false'
+        "aria-selected": isSelected ? 'true' : 'false',
+        tabIndex: isSelected ? 0 : -1,
+        onKeyDown: e => this.handleKeyDown(e, key, panel.closable)
       }, events, {
         className: className,
         key: this._getItemKey(key)
@@ -239,7 +246,8 @@ class TabBar extends React.Component {
 
       return /*#__PURE__*/React.createElement("div", {
         className: extraCls,
-        style: tabBarStyle
+        style: tabBarStyle,
+        "x-semi-prop": "tabBarExtraContent"
       }, tabBarExtraContent);
     }
 

package/lib/es/tabs/TabPane.js

@@ -114,15 +114,19 @@ class TabPane extends PureComponent {
       "aria-labelledby": "semiTab".concat(itemKey),
       className: classNames,
       style: style,
-      "aria-hidden": active ? 'false' : 'true'
-    }, getDataAttr(restProps)), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
+      "aria-hidden": active ? 'false' : 'true',
+      tabIndex: 0
+    }, getDataAttr(restProps), {
+      "x-semi-prop": "children"
+    }), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
       direction: this.getDirection(this.context.activeKey, itemKey, this.context.panes),
       motion: motion,
       mode: tabPosition === 'top' ? 'horizontal' : 'vertical',
       state: active ? 'enter' : 'leave'
     }, transitionStyle => /*#__PURE__*/React.createElement("div", {
       className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY),
-      style: _Object$assign({}, transitionStyle)
+      style: _Object$assign({}, transitionStyle),
+      "x-semi-prop": "children"
     }, shouldRender ? children : null)) : shouldRender ? children : null);
   }
 

package/lib/es/tabs/index.js

@@ -313,7 +313,8 @@ class Tabs extends BaseComponent {
       tabBarExtraContent,
       tabPosition,
       type,
-      deleteTabItem: this.deleteTabItem
+      deleteTabItem: this.deleteTabItem,
+      handleKeyDown: this.foundation.handleKeyDown
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : /*#__PURE__*/React.createElement(TabBar, _Object$assign({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();

package/lib/es/tabs/interface.d.ts

@@ -48,6 +48,7 @@ export interface TabBarProps {
     dropdownStyle?: CSSProperties;
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
 }
 export interface TabPaneProps {
     className?: string;

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

@@ -21,6 +21,7 @@ export default class Tag extends Component<TagProps, TagState> {
         className: PropTypes.Requireable<string>;
         avatarSrc: PropTypes.Requireable<string>;
         avatarShape: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     constructor(props: TagProps);
     static getDerivedStateFromProps(nextProps: TagProps): {
@@ -28,6 +29,7 @@ export default class Tag extends Component<TagProps, TagState> {
     };
     setVisible(visible: boolean): void;
     close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode): void;
+    handleKeyDown(event: any): void;
     renderAvatar(): JSX.Element;
     render(): JSX.Element;
 }