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

package/dist/umd/semi-ui.js

@@ -87177,94 +87177,84 @@ class foundation_TabsFoundation extends foundation {
 var tabs_tabs = __webpack_require__("X9hi");
 
 // CONCATENATED MODULE: ./tabs/TabItem.tsx
+var TabItem_rest = undefined && undefined.__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;
+};
 
 
 
-class TabItem_TabItem extends external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.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);
-    };
-  }
 
-  renderIcon(icon) {
-    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, icon);
-  }
+const TabItem = (props, ref) => {
+  const {
+    tab,
+    size,
+    type,
+    icon,
+    selected,
+    closable,
+    disabled,
+    itemKey,
+    deleteTabItem,
+    tabPosition,
+    handleKeyDown,
+    onClick
+  } = props,
+        resetProps = TabItem_rest(props, ["tab", "size", "type", "icon", "selected", "closable", "disabled", "itemKey", "deleteTabItem", "tabPosition", "handleKeyDown", "onClick"]);
 
-  render() {
-    const {
-      tab,
-      size,
-      type,
-      icon,
-      selected,
-      closable,
-      disabled,
-      itemKey,
-      deleteTabItem,
-      tabPosition
-    } = this.props;
-    const panelIcon = icon ? this.renderIcon(icon) : null;
-    const className = classnames_default()(tabs_constants_cssClasses.TABS_TAB, "".concat(tabs_constants_cssClasses.TABS_TAB, "-").concat(type), "".concat(tabs_constants_cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(tabs_constants_cssClasses.TABS_TAB, "-single"), {
-      [tabs_constants_cssClasses.TABS_TAB_ACTIVE]: selected,
-      [tabs_constants_cssClasses.TABS_TAB_DISABLED]: disabled,
-      ["".concat(tabs_constants_cssClasses.TABS_TAB, "-small")]: size === 'small',
-      ["".concat(tabs_constants_cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-    });
-    const closableIcon = type === 'card' && closable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, {
+  const closableIcon = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useMemo"])(() => {
+    return type === 'card' && closable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, {
       "aria-label": "Close",
       role: "button",
       className: "".concat(tabs_constants_cssClasses.TABS_TAB, "-icon-close"),
       onClick: e => deleteTabItem(itemKey, e)
     }) : null;
-    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.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 = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useCallback"])(icon => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, icon), []);
+  const handleKeyDownInItem = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useCallback"])(event => {
+    handleKeyDown && handleKeyDown(event, itemKey, closable);
+  }, [handleKeyDown, itemKey, closable]);
+  const handleItemClick = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useCallback"])(e => {
+    !disabled && onClick && onClick(itemKey, e);
+  }, [itemKey, disabled, onClick]);
+  const panelIcon = icon ? renderIcon(icon) : null;
+  const className = classnames_default()(tabs_constants_cssClasses.TABS_TAB, "".concat(tabs_constants_cssClasses.TABS_TAB, "-").concat(type), "".concat(tabs_constants_cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(tabs_constants_cssClasses.TABS_TAB, "-single"), {
+    [tabs_constants_cssClasses.TABS_TAB_ACTIVE]: selected,
+    [tabs_constants_cssClasses.TABS_TAB_DISABLED]: disabled,
+    ["".concat(tabs_constants_cssClasses.TABS_TAB, "-small")]: size === 'small',
+    ["".concat(tabs_constants_cssClasses.TABS_TAB, "-medium")]: size === 'medium'
+  });
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.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
 
-}
-TabItem_TabItem.propsTypes = {
-  tab: prop_types_default.a.node,
-  icon: prop_types_default.a.node,
-  size: prop_types_default.a.oneOf(tabs_constants_strings.SIZE),
-  type: prop_types_default.a.oneOf(tabs_constants_strings.TYPE_MAP),
-  tabPosition: prop_types_default.a.oneOf(tabs_constants_strings.POSITION_MAP),
-  selected: prop_types_default.a.bool,
-  closable: prop_types_default.a.bool,
-  disabled: prop_types_default.a.bool,
-  itemKey: prop_types_default.a.string,
-  handleKeyDown: prop_types_default.a.func,
-  deleteTabItem: prop_types_default.a.func,
-  onClick: prop_types_default.a.func
-};
-TabItem_TabItem.elementType = 'TabItem';
+
+const ForwardTabItem = /*#__PURE__*/Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["forwardRef"])(TabItem); // @ts-ignore 
+
+ForwardTabItem.elementType = 'TabItem';
+/* harmony default export */ var tabs_TabItem = (ForwardTabItem);
 // CONCATENATED MODULE: ./tabs/TabBar.tsx
 
 
@@ -87315,51 +87305,6 @@ class TabBar_TabBar extends external_root_React_commonjs2_react_commonjs_react_a
       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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, {
-        "aria-label": "Close",
-        role: "button",
-        className: "".concat(tabs_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 = classnames_default()(tabs_constants_cssClasses.TABS_TAB, {
-        [tabs_constants_cssClasses.TABS_TAB_ACTIVE]: isSelected,
-        [tabs_constants_cssClasses.TABS_TAB_DISABLED]: panel.disabled,
-        ["".concat(tabs_constants_cssClasses.TABS_TAB, "-small")]: size === 'small',
-        ["".concat(tabs_constants_cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-      });
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.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,
@@ -87371,9 +87316,8 @@ class TabBar_TabBar extends external_root_React_commonjs2_react_commonjs_react_a
 
       const isSelected = this._isActive(panel.itemKey);
 
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(TabItem_TabItem, Object.assign({
-        key: this._getItemKey(panel.itemKey)
-      }, panel, {
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tabs_TabItem, Object.assign({}, panel, {
+        key: this._getItemKey(panel.itemKey),
         selected: isSelected,
         size: size,
         type: type,
@@ -87487,7 +87431,7 @@ class TabBar_TabBar extends external_root_React_commonjs2_react_commonjs_react_a
         overflowRenderer: this.renderOverflow,
         renderMode: "scroll",
         className: "".concat(tabs_constants_cssClasses.TABS_BAR, "-overflow-list"),
-        visibleItemRenderer: this.renderTabItemInOverflowList
+        visibleItemRenderer: this.renderTabItem
       });
     };
 
@@ -88068,7 +88012,7 @@ class tabs_Tabs extends baseComponent_BaseComponent {
 }
 
 tabs_Tabs.TabPane = tabs_TabPane;
-tabs_Tabs.TabItem = TabItem_TabItem;
+tabs_Tabs.TabItem = tabs_TabItem;
 tabs_Tabs.propTypes = {
   activeKey: prop_types_default.a.string,
   className: prop_types_default.a.string,