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

package/lib/es/tabs/TabItem.js

@@ -1,88 +1,78 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
-import { IconClose } from '@douyinfe/semi-icons';
-export default class TabItem extends React.Component {
-  constructor() {
-    super(...arguments);
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
-    this.handleKeyDown = event => {
-      const {
-        itemKey,
-        closable,
-        handleKeyDown
-      } = this.props;
-      handleKeyDown && handleKeyDown(event, itemKey, closable);
-    };
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
 
-    this.handleClick = e => {
-      const {
-        itemKey,
-        onClick,
-        disabled
-      } = this.props;
-      !disabled && onClick && onClick(itemKey, e);
-    };
+  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;
+};
 
-  renderIcon(icon) {
-    return /*#__PURE__*/React.createElement("span", null, icon);
-  }
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
+import { IconClose } from '@douyinfe/semi-icons';
 
-  render() {
-    const {
-      tab,
-      size,
-      type,
-      icon,
-      selected,
-      closable,
-      disabled,
-      itemKey,
-      deleteTabItem,
-      tabPosition
-    } = this.props;
-    const panelIcon = icon ? this.renderIcon(icon) : null;
-    const className = cls(cssClasses.TABS_TAB, "".concat(cssClasses.TABS_TAB, "-").concat(type), "".concat(cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(cssClasses.TABS_TAB, "-single"), {
-      [cssClasses.TABS_TAB_ACTIVE]: selected,
-      [cssClasses.TABS_TAB_DISABLED]: disabled,
-      ["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
-      ["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-    });
-    const closableIcon = type === 'card' && closable ? /*#__PURE__*/React.createElement(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 = useMemo(() => {
+    return type === 'card' && closable ? /*#__PURE__*/React.createElement(IconClose, {
       "aria-label": "Close",
       role: "button",
       className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
       onClick: e => deleteTabItem(itemKey, e)
     }) : null;
-    return /*#__PURE__*/React.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 = useCallback(icon => /*#__PURE__*/React.createElement("span", null, icon), []);
+  const handleKeyDownInItem = useCallback(event => {
+    handleKeyDown && handleKeyDown(event, itemKey, closable);
+  }, [handleKeyDown, itemKey, closable]);
+  const handleItemClick = useCallback(e => {
+    !disabled && onClick && onClick(itemKey, e);
+  }, [itemKey, disabled, onClick]);
+  const panelIcon = icon ? renderIcon(icon) : null;
+  const className = cls(cssClasses.TABS_TAB, "".concat(cssClasses.TABS_TAB, "-").concat(type), "".concat(cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(cssClasses.TABS_TAB, "-single"), {
+    [cssClasses.TABS_TAB_ACTIVE]: selected,
+    [cssClasses.TABS_TAB_DISABLED]: 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(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.propsTypes = {
-  tab: PropTypes.node,
-  icon: PropTypes.node,
-  size: PropTypes.oneOf(strings.SIZE),
-  type: PropTypes.oneOf(strings.TYPE_MAP),
-  tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
-  selected: PropTypes.bool,
-  closable: PropTypes.bool,
-  disabled: PropTypes.bool,
-  itemKey: PropTypes.string,
-  handleKeyDown: PropTypes.func,
-  deleteTabItem: PropTypes.func,
-  onClick: PropTypes.func
-};
-TabItem.elementType = 'TabItem';
+
+const ForwardTabItem = /*#__PURE__*/forwardRef(TabItem); // @ts-ignore 
+
+ForwardTabItem.elementType = 'TabItem';
+export default ForwardTabItem;

package/lib/es/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/es/tabs/foundation';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/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/es/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.27.0-alpha.0",
+    "version": "2.27.0-alpha.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.27.0-alpha.0",
-        "@douyinfe/semi-animation-react": "2.27.0-alpha.0",
-        "@douyinfe/semi-foundation": "2.27.0-alpha.0",
-        "@douyinfe/semi-icons": "2.27.0-alpha.0",
-        "@douyinfe/semi-illustrations": "2.27.0-alpha.0",
-        "@douyinfe/semi-theme-default": "2.27.0-alpha.0",
+        "@douyinfe/semi-animation": "2.27.0-alpha.1",
+        "@douyinfe/semi-animation-react": "2.27.0-alpha.1",
+        "@douyinfe/semi-foundation": "2.27.0-alpha.1",
+        "@douyinfe/semi-icons": "2.27.0-alpha.1",
+        "@douyinfe/semi-illustrations": "2.27.0-alpha.1",
+        "@douyinfe/semi-theme-default": "2.27.0-alpha.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "3e818e5687041820aab8c5094c3b6fae7c8f2049",
+    "gitHead": "45aa538331cc89a4e1e75f9c8ac9e4dcf59eeb3a",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",