@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/table/TableCell.js

@@ -1,9 +1,3 @@
-import _merge from "lodash/merge";
-import _isEqual from "lodash/isEqual";
-import _omit from "lodash/omit";
-import _set from "lodash/set";
-import _noop from "lodash/noop";
-import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
@@ -13,6 +7,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { createRef, Fragment } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { get, noop, set, omit, isEqual, merge } from 'lodash-es';
 import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import TableCellFoundation from '@douyinfe/semi-foundation/lib/es/table/cellFoundation';
 import { isSelectionColumn, isExpandedColumn } from '@douyinfe/semi-foundation/lib/es/table/utils';
@@ -44,16 +39,14 @@ export default class TableCell extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
-      notifyClick: function () {
+      notifyClick: (...args) => {
         const {
           onClick
-        } = _this.props;
+        } = this.props;
 
         if (typeof onClick === 'function') {
-          onClick(...arguments);
+          onClick(...args);
         }
       }
     });
@@ -90,16 +83,14 @@ export default class TableCell extends BaseComponent {
 
     const columnHasExpandIcon = isExpandedColumn(column) || expandIcon;
 
-    if ((cellInSelectionColumn || columnHasExpandIcon) && !_isEqual(nextProps, this.props)) {
+    if ((cellInSelectionColumn || columnHasExpandIcon) && !isEqual(nextProps, this.props)) {
       return true;
     } else {
       const omitProps = ['selected', 'expanded', 'expandIcon', 'disabled'];
+      const propsOmitSelected = omit(props, omitProps);
+      const nextPropsOmitSelected = omit(nextProps, omitProps);
 
-      const propsOmitSelected = _omit(props, omitProps);
-
-      const nextPropsOmitSelected = _omit(nextProps, omitProps);
-
-      if (!_isEqual(nextPropsOmitSelected, propsOmitSelected)) {
+      if (!isEqual(nextPropsOmitSelected, propsOmitSelected)) {
         return true;
       }
     }
@@ -127,24 +118,24 @@ export default class TableCell extends BaseComponent {
     const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
 
     if (fixedLeftFlag) {
-      _set(tdProps, 'style.left', typeof fixedLeft === 'number' ? fixedLeft : 0);
+      set(tdProps, 'style.left', typeof fixedLeft === 'number' ? fixedLeft : 0);
     } else if (fixedRightFlag) {
-      _set(tdProps, 'style.right', typeof fixedRight === 'number' ? fixedRight : 0);
+      set(tdProps, 'style.right', typeof fixedRight === 'number' ? fixedRight : 0);
     }
 
     if (width != null) {
-      _set(tdProps, 'style.width', width);
+      set(tdProps, 'style.width', width);
     }
 
     if (height != null) {
-      _set(tdProps, 'style.height', height);
+      set(tdProps, 'style.height', height);
     }
 
     if (column.onCell) {
       customCellProps = column.onCell(record, index);
       this.adapter.setCache('customCellProps', _Object$assign({}, customCellProps));
-      tdProps = _Object$assign(_Object$assign({}, tdProps), _omit(customCellProps, ['style', 'className', 'onClick']));
-      const customCellStyle = _get(customCellProps, 'style') || {};
+      tdProps = _Object$assign(_Object$assign({}, tdProps), omit(customCellProps, ['style', 'className', 'onClick']));
+      const customCellStyle = get(customCellProps, 'style') || {};
       tdProps.style = _Object$assign(_Object$assign({}, tdProps.style), customCellStyle);
     }
 
@@ -186,11 +177,11 @@ export default class TableCell extends BaseComponent {
     let text, colSpan, rowSpan;
 
     if (typeof dataIndex === 'number') {
-      text = _get(record, dataIndex);
+      text = get(record, dataIndex);
     } else if (!dataIndex || dataIndex.length === 0) {
       text = record;
     } else {
-      text = _get(record, dataIndex);
+      text = get(record, dataIndex);
     }
 
     const indentText = indent && indentSize ? /*#__PURE__*/React.createElement("span", {
@@ -223,7 +214,7 @@ export default class TableCell extends BaseComponent {
 
       if (isInvalidRenderCellText(text)) {
         // eslint-disable-next-line no-param-reassign
-        tdProps = text.props ? _merge(tdProps, text.props) : tdProps;
+        tdProps = text.props ? merge(tdProps, text.props) : tdProps;
         colSpan = tdProps.colSpan;
         rowSpan = tdProps.rowSpan;
         text = text.children;
@@ -320,7 +311,7 @@ export default class TableCell extends BaseComponent {
     }
 
     const inner = this.renderInner(text, indentText, realExpandIcon);
-    const columnCls = classnames(className, "".concat(prefixCls, "-row-cell"), _get(customCellProps, 'className'), {
+    const columnCls = classnames(className, "".concat(prefixCls, "-row-cell"), get(customCellProps, 'className'), {
       ["".concat(prefixCls, "-cell-fixed-left")]: fixedLeftFlag,
       ["".concat(prefixCls, "-cell-fixed-left-last")]: lastFixedLeft,
       ["".concat(prefixCls, "-cell-fixed-right")]: fixedRightFlag,
@@ -339,10 +330,10 @@ TableCell.contextType = Context;
 TableCell.defaultProps = {
   indent: 0,
   indentSize: numbers.DEFAULT_INDENT_WIDTH,
-  onClick: _noop,
+  onClick: noop,
   prefixCls: cssClasses.PREFIX,
   component: 'td',
-  onDidUpdate: _noop,
+  onDidUpdate: noop,
   column: {}
 };
 TableCell.propTypes = {

package/lib/es/table/TableContextProvider.js

@@ -1,22 +1,21 @@
 import React, { useMemo } from 'react';
 import Context from './table-context';
 
-const TableContextProvider = _ref => {
-  let {
-    children,
-    anyColumnFixed,
-    flattenedColumns,
-    tableWidth,
-    headWidths,
-    setHeadWidths,
-    getHeadWidths,
-    getCellWidths,
-    handleRowExpanded,
-    renderExpandIcon,
-    renderSelection,
-    getVirtualizedListRef,
-    setBodyHasScrollbar
-  } = _ref;
+const TableContextProvider = ({
+  children,
+  anyColumnFixed,
+  flattenedColumns,
+  tableWidth,
+  headWidths,
+  setHeadWidths,
+  getHeadWidths,
+  getCellWidths,
+  handleRowExpanded,
+  renderExpandIcon,
+  renderSelection,
+  getVirtualizedListRef,
+  setBodyHasScrollbar
+}) => {
   const tableContextValue = useMemo(() => ({
     anyColumnFixed,
     flattenedColumns,

package/lib/es/table/TableHeader.js

@@ -1,5 +1,3 @@
-import _isFunction from "lodash/isFunction";
-import _noop from "lodash/noop";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -11,15 +9,13 @@ import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import { noop, isFunction } from 'lodash-es';
 import TableHeaderRow from './TableHeaderRow';
 
 function parseHeaderRows(columns) {
   const rows = []; // eslint-disable-next-line @typescript-eslint/no-shadow
 
-  function fillRowCells(columns, colIndex) {
-    let parents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    let rowIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-    let level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  function fillRowCells(columns, colIndex, parents = [], rowIndex = 0, level = 0) {
     // Init rows
     rows[rowIndex] = rows[rowIndex] || [];
     let currentColIndex = colIndex;
@@ -28,7 +24,7 @@ function parseHeaderRows(columns) {
       const cell = {
         key: column.key,
         className: column.className || '',
-        children: _isFunction(column.title) ? column.title() : column.title,
+        children: isFunction(column.title) ? column.title() : column.title,
         column,
         colStart: currentColIndex,
         level,
@@ -154,8 +150,8 @@ TableHeader.propTypes = {
 TableHeader.defaultProps = {
   columns: [],
   prefixCls: cssClasses.PREFIX,
-  onHeaderRow: _noop,
-  onDidUpdate: _noop,
+  onHeaderRow: noop,
+  onDidUpdate: noop,
   components: {
     header: {
       wrapper: 'thead',

package/lib/es/table/TableHeaderRow.js

@@ -1,9 +1,3 @@
-import _findIndex from "lodash/findIndex";
-import _omit from "lodash/omit";
-import _set from "lodash/set";
-import _map from "lodash/map";
-import _noop from "lodash/noop";
-import _get from "lodash/get";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -26,6 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { get, noop, map, set, omit, findIndex } from 'lodash-es';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import { arrayAdd, isFirstFixedRight, isLastLeftFixed, isFixedLeft, isFixedRight, sliceColumnsByLevel } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BaseComponent from '../_base/baseComponent';
@@ -45,10 +40,9 @@ export default class TableHeaderRow extends BaseComponent {
         } = this.props;
         const cellSelector = ".".concat(prefixCls, "-row-head");
         const heads = node && node.querySelectorAll && node.querySelectorAll(cellSelector);
-        this.context.setHeadWidths(_map(heads, (head, headIndex) => {
-          let configWidth = _get(row, [headIndex, 'column', 'width']);
-
-          const key = _get(row, [headIndex, 'column', 'key']);
+        this.context.setHeadWidths(map(heads, (head, headIndex) => {
+          let configWidth = get(row, [headIndex, 'column', 'width']);
+          const key = get(row, [headIndex, 'column', 'key']);
 
           if (typeof configWidth !== 'number') {
             configWidth = head && head.getBoundingClientRect().width || 0;
@@ -90,16 +84,11 @@ export default class TableHeaderRow extends BaseComponent {
     } = this.context;
     const slicedColumns = sliceColumnsByLevel(columns, index);
     const headWidths = getCellWidths(slicedColumns);
-
-    const HeaderRow = _get(components, 'header.row', 'tr');
-
-    const HeaderCell = _get(components, 'header.cell', 'th');
-
+    const HeaderRow = get(components, 'header.row', 'tr');
+    const HeaderCell = get(components, 'header.cell', 'th');
     const rowProps = onHeaderRow(columns, index) || {};
-
-    _set(rowProps, 'className', classnames(_get(rowProps, 'className'), "".concat(prefixCls, "-row")));
-
-    const cells = _map(row, (cell, cellIndex) => {
+    set(rowProps, 'className', classnames(get(rowProps, 'className'), "".concat(prefixCls, "-row")));
+    const cells = map(row, (cell, cellIndex) => {
       const {
         column
       } = cell,
@@ -129,7 +118,7 @@ export default class TableHeaderRow extends BaseComponent {
       });
 
       if (headWidths.length && slicedColumns.length) {
-        const indexOfSlicedColumns = _findIndex(slicedColumns, item => item && item.key != null && item.key === column.key);
+        const indexOfSlicedColumns = findIndex(slicedColumns, item => item && item.key != null && item.key === column.key);
 
         if (indexOfSlicedColumns > -1) {
           if (isFixedLeft(column)) {
@@ -146,8 +135,7 @@ export default class TableHeaderRow extends BaseComponent {
         }
       }
 
-      const props = _omit(_Object$assign(_Object$assign({}, cellProps), customProps), ['colStart', 'colEnd', 'hasSubColumns', 'parents', 'level']);
-
+      const props = omit(_Object$assign(_Object$assign({}, cellProps), customProps), ['colStart', 'colEnd', 'hasSubColumns', 'parents', 'level']);
       const {
         rowSpan,
         colSpan
@@ -162,7 +150,6 @@ export default class TableHeaderRow extends BaseComponent {
         key: column.key || column.dataIndex || cellIndex
       }));
     });
-
     return /*#__PURE__*/React.createElement(HeaderRow, _Object$assign({}, rowProps, {
       style: style,
       ref: this.cacheRef
@@ -183,7 +170,7 @@ TableHeaderRow.propTypes = {
   selectedRowKeysSet: PropTypes.instanceOf(_Set).isRequired
 };
 TableHeaderRow.defaultProps = {
-  onHeaderRow: _noop,
+  onHeaderRow: noop,
   prefixCls: cssClasses.PREFIX,
   columns: [],
   components: {

package/lib/es/table/TablePagination.js

@@ -1,10 +1,9 @@
-import _isFunction from "lodash/isFunction";
-import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
 /* eslint-disable max-len */
 import React, { PureComponent, isValidElement } from 'react';
 import PropTypes from 'prop-types';
+import { get, isFunction } from 'lodash-es';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import Pagination from '../pagination';
 export default class TablePagination extends PureComponent {
@@ -15,10 +14,8 @@ export default class TablePagination extends PureComponent {
       info,
       renderPagination
     } = this.props;
-
-    const total = _get(pagination, 'total');
-
-    const customPagination = renderPagination && _isFunction(renderPagination) ? renderPagination(pagination) : null;
+    const total = get(pagination, 'total');
+    const customPagination = renderPagination && isFunction(renderPagination) ? renderPagination(pagination) : null;
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-pagination-outer")
     }, /*#__PURE__*/isValidElement(customPagination) ? customPagination : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -26,7 +23,7 @@ export default class TablePagination extends PureComponent {
     }, info), /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-pagination-wrapper")
     }, total > 0 ? /*#__PURE__*/React.createElement(Pagination, _Object$assign({}, pagination, {
-      key: _get(pagination, 'pageSize', 'pagination')
+      key: get(pagination, 'pageSize', 'pagination')
     })) : null)));
   }
 

package/lib/es/table/getColumns.js

@@ -1,16 +1,15 @@
-import _omit from "lodash/omit";
-import _get from "lodash/get";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React from 'react';
 import Column from './Column';
-
+import { get, omit } from 'lodash-es';
 /**
  * Convert jsx children into object columns
  * @param {Node} children
  * @returns
  */
+
 export default function getColumns(children) {
   if (children) {
     var _context;
@@ -18,8 +17,8 @@ export default function getColumns(children) {
     const columns = [];
 
     _forEachInstanceProperty(_context = React.Children).call(_context, children, child => {
-      if ( /*#__PURE__*/React.isValidElement(child) && (child.type === Column || _get(child, 'type.name') === Column.name)) {
-        const col = _omit(child.props, ['children']);
+      if ( /*#__PURE__*/React.isValidElement(child) && (child.type === Column || get(child, 'type.name') === Column.name)) {
+        const col = omit(child.props, ['children']);
 
         if (_Array$isArray(child.props.children) && child.props.children.length) {
           col.children = getColumns(child.props.children);

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

@@ -16,7 +16,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<"default" | "small" | "middle">;
-        tableLayout: PropTypes.Requireable<"" | "auto" | "fixed">;
+        tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;
             className: PropTypes.Requireable<string>;

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

@@ -35,7 +35,7 @@ export interface TableProps<RecordType extends Record<string, any> = any> extend
     id?: string;
     indentSize?: number;
     loading?: boolean;
-    pagination?: Pagination;
+    pagination?: TablePagination;
     prefixCls?: string;
     renderGroupSection?: RenderGroupSection;
     renderPagination?: RenderPagination;
@@ -225,6 +225,7 @@ export declare type Size = ArrayElement<typeof strings.SIZES>;
 export declare type Title<RecordType> = React.ReactNode | ((pageData?: RecordType[]) => React.ReactNode);
 export declare type PaginationPosition = ArrayElement<typeof strings.PAGINATION_POSITIONS>;
 export declare type Pagination = TablePaginationProps | boolean;
+export declare type TablePagination = Pagination;
 export interface ChangeInfoFilter<RecordType> extends BaseChangeInfoFilter<RecordType> {
     filters?: Filter[];
     onFilter?: OnFilter<RecordType>;

package/lib/es/table/table-context.js

@@ -1,10 +1,9 @@
-import _noop from "lodash/noop";
-
 /* eslint-disable max-len */
 import React from 'react';
+import { noop } from 'lodash-es';
 const TableContext = /*#__PURE__*/React.createContext({
   headWidths: [],
-  setHeadWidths: _noop,
-  handleRowExpanded: _noop
+  setHeadWidths: noop,
+  handleRowExpanded: noop
 });
 export default TableContext;

package/lib/es/table/utils.js

@@ -1,6 +1,6 @@
-import _merge from "lodash/merge";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import { merge } from 'lodash-es';
 import Logger from '@douyinfe/semi-foundation/lib/es/utils/Logger';
 import { numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import { cloneDeep } from '../_utils';
@@ -17,11 +17,9 @@ const scrollbarMeasure = {
  * @returns {number}
  */
 
-export function measureScrollbar() {
+export function measureScrollbar(direction = 'vertical') {
   var _context;
 
-  let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
-
   if (typeof document === 'undefined' || typeof window === 'undefined') {
     return 0;
   }
@@ -76,7 +74,7 @@ export function amendTableWidth(tableWidth) {
  */
 
 export function mergeComponents(components, virtualized) {
-  return _merge({}, {
+  return merge({}, {
     table: 'table',
     header: {
       outer: 'table',

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

@@ -1,6 +1,6 @@
-import React, { ReactNode, MouseEvent } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { TabBarProps, PlainTab } from './interface';
+import { PlainTab, TabBarProps } from './interface';
 export interface TabBarState {
     endInd: number;
     rePosKey: number;
@@ -22,6 +22,8 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
         tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
+        closable: PropTypes.Requireable<boolean>;
+        deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
     };
     uuid: string;
     constructor(props: TabBarProps);
@@ -32,7 +34,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
     renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;
-    renderOverflow: (items: [Array<OverflowItem>, Array<OverflowItem>]) => Array<ReactNode>;
+    renderOverflow: (items: any[]) => Array<ReactNode>;
     renderCollapsedTab: () => ReactNode;
     render(): ReactNode;
     private _isActive;

package/lib/es/tabs/TabBar.js

@@ -1,4 +1,3 @@
-import _isEmpty from "lodash/isEmpty";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -24,7 +23,8 @@ 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 } from '@douyinfe/semi-icons';
+import { isEmpty } from 'lodash-es';
+import { IconChevronLeft, IconChevronRight, IconClose } from '@douyinfe/semi-icons';
 import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 
 class TabBar extends React.Component {
@@ -51,9 +51,15 @@ class TabBar extends React.Component {
 
     this.renderTabItem = panel => {
       const {
-        size
+        size,
+        type,
+        deleteTabItem
       } = this.props;
       const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
+      const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
+        className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
+        onClick: e => deleteTabItem(panel.itemKey, e)
+      }) : null;
       let events = {};
       const key = panel.itemKey;
 
@@ -76,7 +82,7 @@ class TabBar extends React.Component {
       }, events, {
         className: className,
         key: this._getItemKey(key)
-      }), panelIcon, panel.tab);
+      }), panelIcon, panel.tab, closableIcon);
     };
 
     this.renderTabComponents = list => _mapInstanceProperty(list).call(list, panel => this.renderTabItem(panel));
@@ -105,7 +111,7 @@ class TabBar extends React.Component {
     this.renderCollapse = (items, icon, pos) => {
       var _context5, _context6;
 
-      if (_isEmpty(items)) {
+      if (isEmpty(items)) {
         return null;
       }
 
@@ -278,6 +284,8 @@ TabBar.propTypes = {
   style: PropTypes.object,
   tabBarExtraContent: PropTypes.node,
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
-  type: PropTypes.oneOf(strings.TYPE_MAP)
+  type: PropTypes.oneOf(strings.TYPE_MAP),
+  closable: PropTypes.bool,
+  deleteTabItem: PropTypes.func
 };
 export default TabBar;

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

@@ -1,6 +1,6 @@
 import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { TabPaneProps, PlainTab } from './interface';
+import { PlainTab, TabPaneProps } from './interface';
 declare class TabPane extends PureComponent<TabPaneProps> {
     static isTabPane: boolean;
     static contextType: React.Context<import("./interface").TabContextValue>;
@@ -12,6 +12,7 @@ declare class TabPane extends PureComponent<TabPaneProps> {
         itemKey: PropTypes.Requireable<string>;
         tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closable: PropTypes.Requireable<boolean>;
     };
     lastActiveKey: string;
     ref: React.RefObject<HTMLDivElement>;

package/lib/es/tabs/TabPane.js

@@ -15,7 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { PureComponent, createRef } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
@@ -131,6 +131,7 @@ TabPane.propTypes = {
   disabled: PropTypes.bool,
   itemKey: PropTypes.string,
   tab: PropTypes.node,
-  icon: PropTypes.node
+  icon: PropTypes.node,
+  closable: PropTypes.bool
 };
 export default TabPane;

package/lib/es/tabs/TabPaneTransition.js

@@ -1,12 +1,11 @@
-import _toInteger from "lodash/toInteger";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { Transition } from '@douyinfe/semi-animation-react';
+import { toInteger } from 'lodash-es';
 
-const TabPaneTransition = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+const TabPaneTransition = (props = {}) => {
   const direction = props.direction ? 1 : -1;
   const {
     mode
@@ -46,16 +45,15 @@ const TabPaneTransition = function () {
           duration: 200
         }
       }
-    }, motion), typeof props.children === 'function' ? _ref => {
-      let {
-        translateY,
-        opacity
-      } = _ref;
+    }, motion), typeof props.children === 'function' ? ({
+      translateY,
+      opacity
+    }) => {
       // delete translateX in 0 in case of zIndex problems.
-      const finalState = _toInteger(translateY) === 0 ? {
+      const finalState = toInteger(translateY) === 0 ? {
         opacity
       } : {
-        transform: "translateY(".concat(_toInteger(translateY), "px)"),
+        transform: "translateY(".concat(toInteger(translateY), "px)"),
         opacity
       };
       return props.children(finalState);
@@ -85,16 +83,15 @@ const TabPaneTransition = function () {
         duration: 200
       }
     }
-  }, motion), typeof props.children === 'function' ? _ref2 => {
-    let {
-      translateX,
-      opacity
-    } = _ref2;
+  }, motion), typeof props.children === 'function' ? ({
+    translateX,
+    opacity
+  }) => {
     // delete translateX in 0 in case of zIndex problems.
-    const finalState = _toInteger(translateX) === 0 ? {
+    const finalState = toInteger(translateX) === 0 ? {
       opacity
     } : {
-      transform: "translateX(".concat(_toInteger(translateX), "px)"),
+      transform: "translateX(".concat(toInteger(translateX), "px)"),
       opacity
     };
     return props.children(finalState);

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

@@ -1,4 +1,4 @@
-import { RefObject, ReactElement, MouseEvent, RefCallback, ReactNode } from 'react';
+import { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/tabs/foundation';
 import BaseComponent from '../_base/baseComponent';
@@ -32,6 +32,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPaneMotion: PropTypes.Requireable<boolean | object>;
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
+        onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: TabsProps;
     contentRef: RefObject<HTMLDivElement>;
@@ -45,6 +46,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
     getActiveItem: () => ReactNode | ReactNode[];
+    deleteTabItem: (tabKey: string, event: MouseEvent<HTMLDivElement>) => void;
     render(): ReactNode;
 }
 export default Tabs;