@douyinfe/semi-ui 2.18.0-beta.0 → 2.18.1

package/form/baseForm.tsx

@@ -151,7 +151,6 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
 
     componentWillUnmount() {
         this.foundation.destroy();
-        this.formApi = null;
     }
 
     get adapter(): BaseFormAdapter<BaseFormProps, BaseFormState> {

package/lib/cjs/checkbox/checkbox.d.ts

@@ -5,6 +5,7 @@ import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/cjs/checkbox/checkbox.css';
 import { CheckboxContextType } from './context';
+import { CheckboxType } from './checkboxGroup';
 export declare type CheckboxEvent = BasicCheckboxEvent;
 export declare type TargetObject = BasicTargetObject;
 export interface CheckboxProps extends BaseCheckboxProps {
@@ -24,6 +25,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
     tabIndex?: number;
     addonId?: string;
     extraId?: string;
+    type?: CheckboxType;
 }
 interface CheckboxState {
     checked: boolean;
@@ -55,6 +57,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         'aria-label': PropTypes.Requireable<string>;
         tabIndex: PropTypes.Requireable<number>;
         preventScroll: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         defaultChecked: boolean;
@@ -62,6 +65,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onChange: (...args: any[]) => void;
         onMouseEnter: (...args: any[]) => void;
         onMouseLeave: (...args: any[]) => void;
+        type: string;
     };
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;

package/lib/cjs/checkbox/checkbox.js

@@ -151,7 +151,8 @@ class Checkbox extends _baseComponent.default {
       value,
       role,
       tabIndex,
-      id
+      id,
+      type
     } = this.props;
     const {
       checked,
@@ -184,6 +185,9 @@ class Checkbox extends _baseComponent.default {
       props.isCardType = isCardType;
       props.isPureCardType = isPureCardType;
       props['name'] = this.context.checkboxGroup.name;
+    } else {
+      props.isPureCardType = type === _constants.strings.TYPE_PURECARD;
+      props.isCardType = type === _constants.strings.TYPE_CARD || props.isPureCardType;
     }
 
     const prefix = prefixCls || _constants.checkboxClasses.PREFIX;
@@ -274,14 +278,16 @@ Checkbox.propTypes = {
   index: _propTypes.default.number,
   'aria-label': _propTypes.default.string,
   tabIndex: _propTypes.default.number,
-  preventScroll: _propTypes.default.bool
+  preventScroll: _propTypes.default.bool,
+  type: _propTypes.default.string
 };
 Checkbox.defaultProps = {
   defaultChecked: false,
   indeterminate: false,
   onChange: _noop2.default,
   onMouseEnter: _noop2.default,
-  onMouseLeave: _noop2.default
+  onMouseLeave: _noop2.default,
+  type: 'default'
 };
 var _default = Checkbox;
 exports.default = _default;

package/lib/cjs/form/baseForm.js

@@ -106,7 +106,6 @@ class Form extends _baseComponent.default {
 
   componentWillUnmount() {
     this.foundation.destroy();
-    this.formApi = null;
   }
 
   get adapter() {

package/lib/cjs/radio/radio.d.ts

@@ -39,6 +39,7 @@ export interface RadioState {
     addonId?: string;
     extraId?: string;
     focusVisible?: boolean;
+    checked?: boolean;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -71,6 +72,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
     addonId: string;
     extraId: string;
     constructor(props: RadioProps);
+    componentDidUpdate(prevProps: RadioProps): void;
     get adapter(): RadioAdapter;
     isInGroup(): {
         value?: string | number;

package/lib/cjs/radio/radio.js

@@ -14,6 +14,10 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
+
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -53,6 +57,7 @@ class Radio extends _baseComponent.default {
         radioGroup.onChange && radioGroup.onChange(e);
       }
 
+      !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
       onChange && onChange(e);
     };
 
@@ -77,12 +82,23 @@ class Radio extends _baseComponent.default {
     this.state = {
       hover: false,
       addonId: props.addonId,
-      extraId: props.extraId
+      extraId: props.extraId,
+      checked: props.checked || props.defaultChecked || false
     };
     this.foundation = new _radioFoundation.default(this.adapter);
     this.radioEntity = null;
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.checked !== prevProps.checked) {
+      if ((0, _isUndefined2.default)(this.props.checked)) {
+        this.foundation.setChecked(false);
+      } else if ((0, _isBoolean2.default)(this.props.checked)) {
+        this.foundation.setChecked(this.props.checked);
+      }
+    }
+  }
+
   get adapter() {
     return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
       setHover: hover => {
@@ -97,6 +113,11 @@ class Radio extends _baseComponent.default {
           })
         });
       },
+      setChecked: checked => {
+        this.setState({
+          checked
+        });
+      },
       setExtraId: () => {
         this.setState({
           extraId: (0, _uuid.getUuidShort)({
@@ -131,7 +152,6 @@ class Radio extends _baseComponent.default {
     const {
       addonClassName,
       addonStyle,
-      checked,
       disabled,
       style,
       className,
@@ -149,9 +169,13 @@ class Radio extends _baseComponent.default {
       hover: isHover,
       addonId,
       extraId,
-      focusVisible
+      focusVisible,
+      checked
     } = this.state;
-    let props = {};
+    const props = {
+      checked,
+      disabled
+    };
 
     if (this.isInGroup()) {
       realChecked = this.context.radioGroup.value === propValue;
@@ -162,16 +186,17 @@ class Radio extends _baseComponent.default {
       isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
       buttonSize = this.context.radioGroup.buttonSize;
       realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-      props = {
-        checked: realChecked,
-        disabled: isDisabled
-      };
+      props.checked = realChecked;
+      props.disabled = isDisabled;
     } else {
       realChecked = checked;
       isDisabled = disabled;
       realMode = mode;
       isButtonRadioComponent = type === 'button';
       realPrefixCls = prefixCls;
+      isButtonRadioGroup = type === _constants.strings.TYPE_BUTTON;
+      isPureCardRadioGroup = type === _constants.strings.TYPE_PURECARD;
+      isCardRadioGroup = type === _constants.strings.TYPE_CARD || isPureCardRadioGroup;
     }
 
     const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;

package/lib/cjs/table/ColumnFilter.js

@@ -179,12 +179,14 @@ function ColumnFilter() {
   } else {
     iconElem = /*#__PURE__*/_react.default.createElement("div", {
       className: finalCls
-    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconFilter, {
+    }, '\u200b'
+    /* ZWSP(zero-width space) */
+    , /*#__PURE__*/_react.default.createElement(_semiIcons.IconFilter, {
       role: "button",
       "aria-label": "Filter data with this column",
       "aria-haspopup": "listbox",
       tabIndex: -1,
-      size: "small"
+      size: "default"
     }));
   }
 

package/lib/cjs/table/ColumnSorter.d.ts

@@ -7,6 +7,7 @@ export interface ColumnSorterProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     prefixCls?: string;
     sortOrder?: SortOrder;
+    title?: React.ReactNode;
 }
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
     static propTypes: {

package/lib/cjs/table/ColumnSorter.js

@@ -40,9 +40,10 @@ class ColumnSorter extends _react.PureComponent {
       prefixCls,
       onClick,
       sortOrder,
-      style
+      style,
+      title
     } = this.props;
-    const iconBtnSize = 'small';
+    const iconBtnSize = 'default';
     const upCls = (0, _classnames.default)("".concat(prefixCls, "-column-sorter-up"), {
       on: sortOrder === _constants.strings.SORT_DIRECTIONS[0]
     });
@@ -61,11 +62,13 @@ class ColumnSorter extends _react.PureComponent {
       role: 'button'
     }, ariaProps, {
       tabIndex: -1,
-      style: style,
-      className: "".concat(prefixCls, "-column-sorter"),
+      className: "".concat(prefixCls, "-column-sorter-wrapper"),
       onClick: onClick,
       onKeyPress: e => (0, _isEnterPress.default)(e) && onClick(e)
-    }), /*#__PURE__*/_react.default.createElement("span", {
+    }), title, /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: "".concat(prefixCls, "-column-sorter")
+    }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(upCls)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCaretup, {
       size: iconBtnSize
@@ -73,7 +76,7 @@ class ColumnSorter extends _react.PureComponent {
       className: "".concat(downCls)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCaretdown, {
       size: iconBtnSize
-    })));
+    }))));
   }
 
 }

package/lib/cjs/table/Table.js

@@ -555,15 +555,24 @@ class Table extends _baseComponent.default {
         const defaultSortOrder = (0, _get2.default)(curQuery, 'defaultSortOrder', false);
         const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
 
+        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: _constants.strings.DEFAULT_KEY_COLUMN_TITLE
+        }, rawTitle);
+
         if (typeof column.sorter === 'function' || column.sorter === true) {
+          // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+          // both the title and sorting areas are used as the click hot area for sorting。
           const sorter = /*#__PURE__*/_react.default.createElement(_ColumnSorter.default, {
             key: _constants.strings.DEFAULT_KEY_COLUMN_SORTER,
             sortOrder: sortOrder,
-            onClick: e => _this.foundation.handleSort(column, e)
+            onClick: e => _this.foundation.handleSort(column, e),
+            title: TitleNode
           });
 
           useFullRender && (titleMap.sorter = sorter);
           titleArr.push(sorter);
+        } else {
+          titleArr.push(TitleNode);
         }
 
         const stateFilteredValue = (0, _get2.default)(curQuery, 'filteredValue');
@@ -583,9 +592,7 @@ class Table extends _baseComponent.default {
           titleArr.push(filter);
         }
 
-        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr.unshift( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-          key: _constants.strings.DEFAULT_KEY_COLUMN_TITLE
-        }, rawTitle)) && titleArr;
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
         column = (0, _assign.default)((0, _assign.default)({}, column), {
           title: newTitle
         });

package/lib/cjs/tabs/TabBar.js

@@ -151,7 +151,11 @@ class TabBar extends _react.default.Component {
       var _context5, _context6;
 
       if ((0, _isEmpty2.default)(items)) {
-        return null;
+        return /*#__PURE__*/_react.default.createElement(_button.default, {
+          disabled: true,
+          icon: icon,
+          theme: "borderless"
+        });
       }
 
       const {

package/lib/cjs/transfer/index.js

@@ -322,7 +322,8 @@ class Transfer extends _baseComponent.default {
     const noMatch = inSearchMode && searchResult.size === 0;
     const emptySearch = emptyContent.search ? emptyContent.search : locale.emptySearch;
     const emptyLeft = emptyContent.left ? emptyContent.left : locale.emptyLeft;
-    const emptyCom = this.renderEmpty('left', inputValue ? emptySearch : emptyLeft);
+    const emptyDataCom = this.renderEmpty('left', emptyLeft);
+    const emptySearchCom = this.renderEmpty('left', emptySearch);
 
     const loadingCom = /*#__PURE__*/_react.default.createElement(_spin.default, null);
 
@@ -334,7 +335,11 @@ class Transfer extends _baseComponent.default {
         break;
 
       case noMatch:
-        content = emptyCom;
+        content = emptySearchCom;
+        break;
+
+      case data.length === 0:
+        content = emptyDataCom;
         break;
 
       case type === _constants.strings.TYPE_TREE_TO_LIST:

package/lib/es/checkbox/checkbox.d.ts

@@ -5,6 +5,7 @@ import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/checkbox/checkbox.css';
 import { CheckboxContextType } from './context';
+import { CheckboxType } from './checkboxGroup';
 export declare type CheckboxEvent = BasicCheckboxEvent;
 export declare type TargetObject = BasicTargetObject;
 export interface CheckboxProps extends BaseCheckboxProps {
@@ -24,6 +25,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
     tabIndex?: number;
     addonId?: string;
     extraId?: string;
+    type?: CheckboxType;
 }
 interface CheckboxState {
     checked: boolean;
@@ -55,6 +57,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         'aria-label': PropTypes.Requireable<string>;
         tabIndex: PropTypes.Requireable<number>;
         preventScroll: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         defaultChecked: boolean;
@@ -62,6 +65,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onChange: (...args: any[]) => void;
         onMouseEnter: (...args: any[]) => void;
         onMouseLeave: (...args: any[]) => void;
+        type: string;
     };
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;

package/lib/es/checkbox/checkbox.js

@@ -8,7 +8,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { checkboxClasses as css } from '@douyinfe/semi-foundation/lib/es/checkbox/constants';
+import { checkboxClasses as css, strings } from '@douyinfe/semi-foundation/lib/es/checkbox/constants';
 import CheckboxFoundation from '@douyinfe/semi-foundation/lib/es/checkbox/checkboxFoundation';
 import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
@@ -126,7 +126,8 @@ class Checkbox extends BaseComponent {
       value,
       role,
       tabIndex,
-      id
+      id,
+      type
     } = this.props;
     const {
       checked,
@@ -160,6 +161,9 @@ class Checkbox extends BaseComponent {
       props.isCardType = isCardType;
       props.isPureCardType = isPureCardType;
       props['name'] = this.context.checkboxGroup.name;
+    } else {
+      props.isPureCardType = type === strings.TYPE_PURECARD;
+      props.isCardType = type === strings.TYPE_CARD || props.isPureCardType;
     }
 
     const prefix = prefixCls || css.PREFIX;
@@ -250,13 +254,15 @@ Checkbox.propTypes = {
   index: PropTypes.number,
   'aria-label': PropTypes.string,
   tabIndex: PropTypes.number,
-  preventScroll: PropTypes.bool
+  preventScroll: PropTypes.bool,
+  type: PropTypes.string
 };
 Checkbox.defaultProps = {
   defaultChecked: false,
   indeterminate: false,
   onChange: _noop,
   onMouseEnter: _noop,
-  onMouseLeave: _noop
+  onMouseLeave: _noop,
+  type: 'default'
 };
 export default Checkbox;

package/lib/es/form/baseForm.js

@@ -68,7 +68,6 @@ class Form extends BaseComponent {
 
   componentWillUnmount() {
     this.foundation.destroy();
-    this.formApi = null;
   }
 
   get adapter() {

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

@@ -39,6 +39,7 @@ export interface RadioState {
     addonId?: string;
     extraId?: string;
     focusVisible?: boolean;
+    checked?: boolean;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -71,6 +72,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
     addonId: string;
     extraId: string;
     constructor(props: RadioProps);
+    componentDidUpdate(prevProps: RadioProps): void;
     get adapter(): RadioAdapter;
     isInGroup(): {
         value?: string | number;

package/lib/es/radio/radio.js

@@ -1,3 +1,5 @@
+import _isBoolean from "lodash/isBoolean";
+import _isUndefined from "lodash/isUndefined";
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -30,6 +32,7 @@ class Radio extends BaseComponent {
         radioGroup.onChange && radioGroup.onChange(e);
       }
 
+      !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
       onChange && onChange(e);
     };
 
@@ -54,12 +57,23 @@ class Radio extends BaseComponent {
     this.state = {
       hover: false,
       addonId: props.addonId,
-      extraId: props.extraId
+      extraId: props.extraId,
+      checked: props.checked || props.defaultChecked || false
     };
     this.foundation = new RadioFoundation(this.adapter);
     this.radioEntity = null;
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.checked !== prevProps.checked) {
+      if (_isUndefined(this.props.checked)) {
+        this.foundation.setChecked(false);
+      } else if (_isBoolean(this.props.checked)) {
+        this.foundation.setChecked(this.props.checked);
+      }
+    }
+  }
+
   get adapter() {
     return _Object$assign(_Object$assign({}, super.adapter), {
       setHover: hover => {
@@ -74,6 +88,11 @@ class Radio extends BaseComponent {
           })
         });
       },
+      setChecked: checked => {
+        this.setState({
+          checked
+        });
+      },
       setExtraId: () => {
         this.setState({
           extraId: getUuidShort({
@@ -108,7 +127,6 @@ class Radio extends BaseComponent {
     const {
       addonClassName,
       addonStyle,
-      checked,
       disabled,
       style,
       className,
@@ -126,9 +144,13 @@ class Radio extends BaseComponent {
       hover: isHover,
       addonId,
       extraId,
-      focusVisible
+      focusVisible,
+      checked
     } = this.state;
-    let props = {};
+    const props = {
+      checked,
+      disabled
+    };
 
     if (this.isInGroup()) {
       realChecked = this.context.radioGroup.value === propValue;
@@ -139,16 +161,17 @@ class Radio extends BaseComponent {
       isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
       buttonSize = this.context.radioGroup.buttonSize;
       realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-      props = {
-        checked: realChecked,
-        disabled: isDisabled
-      };
+      props.checked = realChecked;
+      props.disabled = isDisabled;
     } else {
       realChecked = checked;
       isDisabled = disabled;
       realMode = mode;
       isButtonRadioComponent = type === 'button';
       realPrefixCls = prefixCls;
+      isButtonRadioGroup = type === strings.TYPE_BUTTON;
+      isPureCardRadioGroup = type === strings.TYPE_PURECARD;
+      isCardRadioGroup = type === strings.TYPE_CARD || isPureCardRadioGroup;
     }
 
     const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;

package/lib/es/table/ColumnFilter.js

@@ -153,12 +153,14 @@ export default function ColumnFilter() {
   } else {
     iconElem = /*#__PURE__*/React.createElement("div", {
       className: finalCls
-    }, /*#__PURE__*/React.createElement(IconFilter, {
+    }, '\u200b'
+    /* ZWSP(zero-width space) */
+    , /*#__PURE__*/React.createElement(IconFilter, {
       role: "button",
       "aria-label": "Filter data with this column",
       "aria-haspopup": "listbox",
       tabIndex: -1,
-      size: "small"
+      size: "default"
     }));
   }
 

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

@@ -7,6 +7,7 @@ export interface ColumnSorterProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     prefixCls?: string;
     sortOrder?: SortOrder;
+    title?: React.ReactNode;
 }
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
     static propTypes: {

package/lib/es/table/ColumnSorter.js

@@ -12,9 +12,10 @@ export default class ColumnSorter extends PureComponent {
       prefixCls,
       onClick,
       sortOrder,
-      style
+      style,
+      title
     } = this.props;
-    const iconBtnSize = 'small';
+    const iconBtnSize = 'default';
     const upCls = cls("".concat(prefixCls, "-column-sorter-up"), {
       on: sortOrder === strings.SORT_DIRECTIONS[0]
     });
@@ -33,11 +34,13 @@ export default class ColumnSorter extends PureComponent {
       role: 'button'
     }, ariaProps, {
       tabIndex: -1,
-      style: style,
-      className: "".concat(prefixCls, "-column-sorter"),
+      className: "".concat(prefixCls, "-column-sorter-wrapper"),
       onClick: onClick,
       onKeyPress: e => isEnterPress(e) && onClick(e)
-    }), /*#__PURE__*/React.createElement("span", {
+    }), title, /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: "".concat(prefixCls, "-column-sorter")
+    }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(upCls)
     }, /*#__PURE__*/React.createElement(IconCaretup, {
       size: iconBtnSize
@@ -45,7 +48,7 @@ export default class ColumnSorter extends PureComponent {
       className: "".concat(downCls)
     }, /*#__PURE__*/React.createElement(IconCaretdown, {
       size: iconBtnSize
-    })));
+    }))));
   }
 
 }

package/lib/es/table/Table.js

@@ -494,15 +494,23 @@ class Table extends BaseComponent {
         const defaultSortOrder = _get(curQuery, 'defaultSortOrder', false);
 
         const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: strings.DEFAULT_KEY_COLUMN_TITLE
+        }, rawTitle);
 
         if (typeof column.sorter === 'function' || column.sorter === true) {
+          // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+          // both the title and sorting areas are used as the click hot area for sorting。
           const sorter = /*#__PURE__*/React.createElement(ColumnSorter, {
             key: strings.DEFAULT_KEY_COLUMN_SORTER,
             sortOrder: sortOrder,
-            onClick: e => _this.foundation.handleSort(column, e)
+            onClick: e => _this.foundation.handleSort(column, e),
+            title: TitleNode
           });
           useFullRender && (titleMap.sorter = sorter);
           titleArr.push(sorter);
+        } else {
+          titleArr.push(TitleNode);
         }
 
         const stateFilteredValue = _get(curQuery, 'filteredValue');
@@ -523,9 +531,7 @@ class Table extends BaseComponent {
           titleArr.push(filter);
         }
 
-        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr.unshift( /*#__PURE__*/React.createElement(React.Fragment, {
-          key: strings.DEFAULT_KEY_COLUMN_TITLE
-        }, rawTitle)) && titleArr;
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
         column = _Object$assign(_Object$assign({}, column), {
           title: newTitle
         });

package/lib/es/tabs/TabBar.js

@@ -125,7 +125,11 @@ class TabBar extends React.Component {
       var _context5, _context6;
 
       if (_isEmpty(items)) {
-        return null;
+        return /*#__PURE__*/React.createElement(Button, {
+          disabled: true,
+          icon: icon,
+          theme: "borderless"
+        });
       }
 
       const {