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

package/lib/es/tabs/TabBar.js

@@ -19,8 +19,9 @@ 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';
 
 class TabBar extends React.Component {
   constructor(props) {
@@ -50,45 +51,23 @@ class TabBar extends React.Component {
       const {
         size,
         type,
-        deleteTabItem
+        deleteTabItem,
+        handleKeyDown,
+        tabPosition
       } = 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);
+      const isSelected = this._isActive(panel.itemKey);
+
+      return /*#__PURE__*/React.createElement(TabItem, Object.assign({}, panel, {
+        key: this._getItemKey(panel.itemKey),
+        selected: isSelected,
+        size: size,
+        type: type,
+        tabPosition: tabPosition,
+        handleKeyDown: handleKeyDown,
+        deleteTabItem: deleteTabItem,
+        onClick: this.handleItemClick
+      }));
     };
 
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));

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

@@ -0,0 +1,18 @@
+import React, { ReactNode, MouseEvent } from 'react';
+import { TabType, TabSize, TabPosition } from './interface';
+export interface TabItemProps {
+    tab?: ReactNode;
+    icon?: ReactNode;
+    size?: TabSize;
+    type?: TabType;
+    tabPosition?: TabPosition;
+    selected?: boolean;
+    closable?: boolean;
+    disabled?: boolean;
+    itemKey?: string;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
+    deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
+    onClick?: (itemKey: string, e: MouseEvent<Element>) => void;
+}
+declare const ForwardTabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement>>;
+export default ForwardTabItem;

package/lib/es/tabs/TabItem.js

@@ -0,0 +1,78 @@
+var __rest = this && this.__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;
+};
+
+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';
+
+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;
+  }, [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
+
+
+const ForwardTabItem = /*#__PURE__*/forwardRef(TabItem); // @ts-ignore 
+
+ForwardTabItem.elementType = 'TabItem';
+export default ForwardTabItem;

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

@@ -1,4 +1,4 @@
-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';
@@ -14,6 +14,7 @@ export interface TabsState {
 }
 declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static TabPane: typeof TabPane;
+    static TabItem: React.ForwardRefExoticComponent<import("./TabItem").TabItemProps & React.RefAttributes<HTMLDivElement>>;
     static propTypes: {
         activeKey: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;

package/lib/es/tabs/index.js

@@ -23,6 +23,7 @@ import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
 import TabBar from './TabBar';
 import TabPane from './TabPane';
+import TabItem from './TabItem';
 import TabsContext from './tabs-context';
 const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 export * from './interface';
@@ -335,6 +336,7 @@ class Tabs extends BaseComponent {
 }
 
 Tabs.TabPane = TabPane;
+Tabs.TabItem = TabItem;
 Tabs.propTypes = {
   activeKey: PropTypes.string,
   className: PropTypes.string,

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

@@ -92,7 +92,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/es/timePicker/TimePicker.d.ts

@@ -130,7 +130,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"default" | "small" | "large">;
+        size: PropTypes.Requireable<"small" | "default" | "large">;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

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

@@ -48,7 +48,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         secondStep: import("prop-types").Requireable<number>;
         focusOnOpen: import("prop-types").Requireable<boolean>;
         autoFocus: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        size: import("prop-types").Requireable<"small" | "default" | "large">;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
             panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.26.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.26.0",
-        "@douyinfe/semi-animation-react": "2.26.0",
-        "@douyinfe/semi-foundation": "2.26.0",
-        "@douyinfe/semi-icons": "2.26.0",
-        "@douyinfe/semi-illustrations": "2.26.0",
-        "@douyinfe/semi-theme-default": "2.26.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": "7fed74a6b19a9bf9d45f56eb36c97fce0ac9de76",
+    "gitHead": "45aa538331cc89a4e1e75f9c8ac9e4dcf59eeb3a",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",