@douyinfe/semi-ui 2.27.0-alpha.0 → 2.27.0-alpha.1

package/lib/cjs/carousel/CarouselIndicator.d.ts

@@ -12,7 +12,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
         total: PropTypes.Requireable<number>;
         onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<"line" | "dot" | "columnar">;
-        trigger: PropTypes.Requireable<"click" | "hover">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
     };
     onIndicatorChange: (activeIndex: number) => void;
     handleIndicatorClick: (activeIndex: number) => void;

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

@@ -30,7 +30,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         slideDirection: PropTypes.Requireable<"left" | "right">;
         speed: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
-        trigger: PropTypes.Requireable<"click" | "hover">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
     };
     static defaultProps: CarouselProps;
     foundation: CarouselFoundation;

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

@@ -110,7 +110,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         zIndex: PropTypes.Requireable<number>;
         value: PropTypes.Requireable<NonNullable<string | number | any[]>>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
-        showNext: PropTypes.Requireable<"click" | "hover">;
+        showNext: PropTypes.Requireable<"hover" | "click">;
         stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         showClear: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;

package/lib/cjs/cascader/item.d.ts

@@ -48,7 +48,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
         onItemHover: PropTypes.Requireable<(...args: any[]) => any>;
         multiple: PropTypes.Requireable<boolean>;
-        showNext: PropTypes.Requireable<"click" | "hover">;
+        showNext: PropTypes.Requireable<"hover" | "click">;
         checkedKeys: PropTypes.Requireable<object>;
         halfCheckedKeys: PropTypes.Requireable<object>;
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/datePicker/dateInput.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

package/lib/cjs/datePicker/datePicker.d.ts

@@ -46,7 +46,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"small" | "default" | "large">;
         clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         density: PropTypes.Requireable<"default" | "compact">;

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

@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         multiple: PropTypes.Requireable<boolean>;

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

@@ -58,7 +58,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         margin: PropTypes.Requireable<NonNullable<number | object>>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
         contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;

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

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

package/lib/cjs/tabs/TabBar.js

@@ -66,51 +66,6 @@ class TabBar extends _react.default.Component {
       this.props.handleKeyDown(event, itemKey, closable);
     };
 
-    this.renderTabItemInOverflowList = panel => {
-      const {
-        size,
-        type,
-        deleteTabItem
-      } = this.props;
-      const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
-      const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-        "aria-label": "Close",
-        role: "button",
-        className: "".concat(_constants.cssClasses.TABS_TAB, "-icon-close"),
-        onClick: e => deleteTabItem(panel.itemKey, e)
-      }) : null;
-      let events = {};
-      const key = panel.itemKey;
-
-      if (!panel.disabled) {
-        events = {
-          onClick: e => this.handleItemClick(key, e)
-        };
-      }
-
-      const isSelected = this._isActive(key);
-
-      const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, {
-        [_constants.cssClasses.TABS_TAB_ACTIVE]: isSelected,
-        [_constants.cssClasses.TABS_TAB_DISABLED]: panel.disabled,
-        ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
-        ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-      });
-      return /*#__PURE__*/_react.default.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',
-        tabIndex: isSelected ? 0 : -1,
-        onKeyDown: e => this.handleKeyDown(e, key, panel.closable)
-      }, events, {
-        className: className,
-        key: this._getItemKey(key)
-      }), panelIcon, panel.tab, closableIcon);
-    };
-
     this.renderTabItem = panel => {
       const {
         size,
@@ -122,9 +77,8 @@ class TabBar extends _react.default.Component {
 
       const isSelected = this._isActive(panel.itemKey);
 
-      return /*#__PURE__*/_react.default.createElement(_TabItem.default, Object.assign({
-        key: this._getItemKey(panel.itemKey)
-      }, panel, {
+      return /*#__PURE__*/_react.default.createElement(_TabItem.default, Object.assign({}, panel, {
+        key: this._getItemKey(panel.itemKey),
         selected: isSelected,
         size: size,
         type: type,
@@ -240,7 +194,7 @@ class TabBar extends _react.default.Component {
         overflowRenderer: this.renderOverflow,
         renderMode: "scroll",
         className: "".concat(_constants.cssClasses.TABS_BAR, "-overflow-list"),
-        visibleItemRenderer: this.renderTabItemInOverflowList
+        visibleItemRenderer: this.renderTabItem
       });
     };
 

package/lib/cjs/tabs/TabItem.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import PropTypes from 'prop-types';
 import { TabType, TabSize, TabPosition } from './interface';
 export interface TabItemProps {
     tab?: ReactNode;
@@ -15,24 +14,5 @@ export interface TabItemProps {
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
     onClick?: (itemKey: string, e: MouseEvent<Element>) => void;
 }
-export default class TabItem extends React.Component<TabItemProps> {
-    static propsTypes: {
-        tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        size: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        tabPosition: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<boolean>;
-        closable: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        itemKey: PropTypes.Requireable<string>;
-        handleKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static elementType: string;
-    renderIcon(icon: ReactNode): ReactNode;
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-    handleClick: (e: React.MouseEvent) => void;
-    render(): JSX.Element;
-}
+declare const ForwardTabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement>>;
+export default ForwardTabItem;

package/lib/cjs/tabs/TabItem.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -17,88 +15,81 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class TabItem extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-
-    this.handleKeyDown = event => {
-      const {
-        itemKey,
-        closable,
-        handleKeyDown
-      } = this.props;
-      handleKeyDown && handleKeyDown(event, itemKey, closable);
-    };
-
-    this.handleClick = e => {
-      const {
-        itemKey,
-        onClick,
-        disabled
-      } = this.props;
-      !disabled && onClick && onClick(itemKey, e);
-    };
-  }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  renderIcon(icon) {
-    return /*#__PURE__*/_react.default.createElement("span", null, icon);
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
+  return t;
+};
 
-  render() {
-    const {
-      tab,
-      size,
-      type,
-      icon,
-      selected,
-      closable,
-      disabled,
-      itemKey,
-      deleteTabItem,
-      tabPosition
-    } = this.props;
-    const panelIcon = icon ? this.renderIcon(icon) : null;
-    const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, "".concat(_constants.cssClasses.TABS_TAB, "-").concat(type), "".concat(_constants.cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(_constants.cssClasses.TABS_TAB, "-single"), {
-      [_constants.cssClasses.TABS_TAB_ACTIVE]: selected,
-      [_constants.cssClasses.TABS_TAB_DISABLED]: disabled,
-      ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
-      ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-    });
-    const closableIcon = type === 'card' && closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+const TabItem = (props, ref) => {
+  const {
+    tab,
+    size,
+    type,
+    icon,
+    selected,
+    closable,
+    disabled,
+    itemKey,
+    deleteTabItem,
+    tabPosition,
+    handleKeyDown,
+    onClick
+  } = props,
+        resetProps = __rest(props, ["tab", "size", "type", "icon", "selected", "closable", "disabled", "itemKey", "deleteTabItem", "tabPosition", "handleKeyDown", "onClick"]);
+
+  const closableIcon = (0, _react.useMemo)(() => {
+    return type === 'card' && closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
       "aria-label": "Close",
       role: "button",
       className: "".concat(_constants.cssClasses.TABS_TAB, "-icon-close"),
       onClick: e => deleteTabItem(itemKey, e)
     }) : null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "tab",
-      id: "semiTab".concat(itemKey),
-      "data-tabkey": "semiTab".concat(itemKey),
-      "aria-controls": "semiTabPanel".concat(itemKey),
-      "aria-disabled": disabled ? 'true' : 'false',
-      "aria-selected": selected ? 'true' : 'false',
-      tabIndex: selected ? 0 : -1,
-      onKeyDown: this.handleKeyDown,
-      onClick: this.handleClick,
-      className: className
-    }, panelIcon, tab, closableIcon);
-  }
+  }, [type, closable, deleteTabItem, itemKey]);
+  const renderIcon = (0, _react.useCallback)(icon => /*#__PURE__*/_react.default.createElement("span", null, icon), []);
+  const handleKeyDownInItem = (0, _react.useCallback)(event => {
+    handleKeyDown && handleKeyDown(event, itemKey, closable);
+  }, [handleKeyDown, itemKey, closable]);
+  const handleItemClick = (0, _react.useCallback)(e => {
+    !disabled && onClick && onClick(itemKey, e);
+  }, [itemKey, disabled, onClick]);
+  const panelIcon = icon ? renderIcon(icon) : null;
+  const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, "".concat(_constants.cssClasses.TABS_TAB, "-").concat(type), "".concat(_constants.cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(_constants.cssClasses.TABS_TAB, "-single"), {
+    [_constants.cssClasses.TABS_TAB_ACTIVE]: selected,
+    [_constants.cssClasses.TABS_TAB_DISABLED]: disabled,
+    ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
+    ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
+  });
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    role: "tab",
+    id: "semiTab".concat(itemKey),
+    "data-tabkey": "semiTab".concat(itemKey),
+    "aria-controls": "semiTabPanel".concat(itemKey),
+    "aria-disabled": disabled ? 'true' : 'false',
+    "aria-selected": selected ? 'true' : 'false',
+    tabIndex: selected ? 0 : -1,
+    onKeyDown: handleKeyDownInItem,
+    onClick: handleItemClick,
+    className: className
+  }, resetProps, {
+    ref: ref
+  }), panelIcon, tab, closableIcon);
+}; // Why is forwardRef needed here？
+// Because TabItem needs to be used in OverflowList （when tabs' type is collapsible), 
+// OverflowList will pass ref to the outermost div DOM node of TabItem
 
-}
-
-exports.default = TabItem;
-TabItem.propsTypes = {
-  tab: _propTypes.default.node,
-  icon: _propTypes.default.node,
-  size: _propTypes.default.oneOf(_constants.strings.SIZE),
-  type: _propTypes.default.oneOf(_constants.strings.TYPE_MAP),
-  tabPosition: _propTypes.default.oneOf(_constants.strings.POSITION_MAP),
-  selected: _propTypes.default.bool,
-  closable: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  itemKey: _propTypes.default.string,
-  handleKeyDown: _propTypes.default.func,
-  deleteTabItem: _propTypes.default.func,
-  onClick: _propTypes.default.func
-};
-TabItem.elementType = 'TabItem';
+
+const ForwardTabItem = /*#__PURE__*/(0, _react.forwardRef)(TabItem); // @ts-ignore 
+
+ForwardTabItem.elementType = 'TabItem';
+var _default = ForwardTabItem;
+exports.default = _default;

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

@@ -1,10 +1,9 @@
-import { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
+import React, { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/cjs/tabs/foundation';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/cjs/tabs/tabs.css';
 import TabPane from './TabPane';
-import TabItem from './TabItem';
 import { PlainTab, TabsProps } from './interface';
 export * from './interface';
 export interface TabsState {
@@ -15,7 +14,7 @@ export interface TabsState {
 }
 declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static TabPane: typeof TabPane;
-    static TabItem: typeof TabItem;
+    static TabItem: React.ForwardRefExoticComponent<import("./TabItem").TabItemProps & React.RefAttributes<HTMLDivElement>>;
     static propTypes: {
         activeKey: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;

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

@@ -90,7 +90,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
         className: PropTypes.Requireable<string>;
         wrapperClassName: PropTypes.Requireable<string>;
         clickToHide: PropTypes.Requireable<boolean>;

package/lib/es/carousel/CarouselIndicator.d.ts

@@ -12,7 +12,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
         total: PropTypes.Requireable<number>;
         onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<"line" | "dot" | "columnar">;
-        trigger: PropTypes.Requireable<"click" | "hover">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
     };
     onIndicatorChange: (activeIndex: number) => void;
     handleIndicatorClick: (activeIndex: number) => void;

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

@@ -30,7 +30,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         slideDirection: PropTypes.Requireable<"left" | "right">;
         speed: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
-        trigger: PropTypes.Requireable<"click" | "hover">;
+        trigger: PropTypes.Requireable<"hover" | "click">;
     };
     static defaultProps: CarouselProps;
     foundation: CarouselFoundation;

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

@@ -110,7 +110,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         zIndex: PropTypes.Requireable<number>;
         value: PropTypes.Requireable<NonNullable<string | number | any[]>>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
-        showNext: PropTypes.Requireable<"click" | "hover">;
+        showNext: PropTypes.Requireable<"hover" | "click">;
         stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         showClear: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;

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

@@ -48,7 +48,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
         onItemHover: PropTypes.Requireable<(...args: any[]) => any>;
         multiple: PropTypes.Requireable<boolean>;
-        showNext: PropTypes.Requireable<"click" | "hover">;
+        showNext: PropTypes.Requireable<"hover" | "click">;
         checkedKeys: PropTypes.Requireable<object>;
         halfCheckedKeys: PropTypes.Requireable<object>;
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

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

@@ -46,7 +46,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"small" | "default" | "large">;
         clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         density: PropTypes.Requireable<"default" | "compact">;

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

@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         multiple: PropTypes.Requireable<boolean>;

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

@@ -58,7 +58,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         margin: PropTypes.Requireable<NonNullable<number | object>>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
         contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;

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

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

package/lib/es/tabs/TabBar.js

@@ -19,7 +19,7 @@ import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import OverflowList from '../overflowList';
 import Dropdown from '../dropdown';
 import Button from '../button';
-import { IconChevronRight, IconChevronLeft, IconClose } from '@douyinfe/semi-icons';
+import { IconChevronRight, IconChevronLeft } from '@douyinfe/semi-icons';
 import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import TabItem from './TabItem';
 
@@ -47,51 +47,6 @@ class TabBar extends React.Component {
       this.props.handleKeyDown(event, itemKey, closable);
     };
 
-    this.renderTabItemInOverflowList = panel => {
-      const {
-        size,
-        type,
-        deleteTabItem
-      } = 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;
-      let events = {};
-      const key = panel.itemKey;
-
-      if (!panel.disabled) {
-        events = {
-          onClick: e => this.handleItemClick(key, e)
-        };
-      }
-
-      const isSelected = this._isActive(key);
-
-      const className = cls(cssClasses.TABS_TAB, {
-        [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),
-        "data-tabkey": "semiTab".concat(key),
-        "aria-controls": "semiTabPanel".concat(key),
-        "aria-disabled": panel.disabled ? '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)
-      }), panelIcon, panel.tab, closableIcon);
-    };
-
     this.renderTabItem = panel => {
       const {
         size,
@@ -103,9 +58,8 @@ class TabBar extends React.Component {
 
       const isSelected = this._isActive(panel.itemKey);
 
-      return /*#__PURE__*/React.createElement(TabItem, Object.assign({
-        key: this._getItemKey(panel.itemKey)
-      }, panel, {
+      return /*#__PURE__*/React.createElement(TabItem, Object.assign({}, panel, {
+        key: this._getItemKey(panel.itemKey),
         selected: isSelected,
         size: size,
         type: type,
@@ -219,7 +173,7 @@ class TabBar extends React.Component {
         overflowRenderer: this.renderOverflow,
         renderMode: "scroll",
         className: "".concat(cssClasses.TABS_BAR, "-overflow-list"),
-        visibleItemRenderer: this.renderTabItemInOverflowList
+        visibleItemRenderer: this.renderTabItem
       });
     };
 

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

@@ -1,5 +1,4 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import PropTypes from 'prop-types';
 import { TabType, TabSize, TabPosition } from './interface';
 export interface TabItemProps {
     tab?: ReactNode;
@@ -15,24 +14,5 @@ export interface TabItemProps {
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
     onClick?: (itemKey: string, e: MouseEvent<Element>) => void;
 }
-export default class TabItem extends React.Component<TabItemProps> {
-    static propsTypes: {
-        tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        size: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        tabPosition: PropTypes.Requireable<string>;
-        selected: PropTypes.Requireable<boolean>;
-        closable: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        itemKey: PropTypes.Requireable<string>;
-        handleKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static elementType: string;
-    renderIcon(icon: ReactNode): ReactNode;
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-    handleClick: (e: React.MouseEvent) => void;
-    render(): JSX.Element;
-}
+declare const ForwardTabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement>>;
+export default ForwardTabItem;