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

package/lib/es/tabs/TabBar.js

@@ -19,9 +19,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 { IconChevronRight, IconChevronLeft, IconClose } 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) {
@@ -34,7 +33,7 @@ class TabBar extends React.Component {
         const key = this._getItemKey(itemKey); // eslint-disable-next-line max-len
 
 
-        const tabItem = document.querySelector("[data-uuid=\"".concat(this.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+        const tabItem = document.querySelector("[data-uuid=\"".concat(this.state.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
         tabItem.scrollIntoView({
           behavior: 'smooth',
           block: 'nearest',
@@ -51,23 +50,45 @@ class TabBar extends React.Component {
       const {
         size,
         type,
-        deleteTabItem,
-        handleKeyDown,
-        tabPosition
+        deleteTabItem
       } = 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(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
-      }));
+      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);
     };
 
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
@@ -82,7 +103,7 @@ class TabBar extends React.Component {
       const key = this._getItemKey(lastItem.itemKey); // eslint-disable-next-line max-len
 
 
-      const tabItem = document.querySelector("[data-uuid=\"".concat(this.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+      const tabItem = document.querySelector("[data-uuid=\"".concat(this.state.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
@@ -184,9 +205,15 @@ class TabBar extends React.Component {
     this.state = {
       endInd: props.list.length,
       rePosKey: 0,
-      startInd: 0
+      startInd: 0,
+      uuid: ''
     };
-    this.uuid = getUuidv4();
+  }
+
+  componentDidMount() {
+    this.setState({
+      uuid: getUuidv4()
+    });
   }
 
   renderIcon(icon) {
@@ -248,7 +275,7 @@ class TabBar extends React.Component {
       className: classNames,
       style: style
     }, getDataAttr(restProps), {
-      "data-uuid": this.uuid
+      "data-uuid": this.state.uuid
     }), contents, extra);
   }
 

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } 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';
@@ -14,7 +14,6 @@ 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,7 +23,6 @@ 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';
@@ -336,7 +335,6 @@ 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<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "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<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "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<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "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.27.0-alpha.1",
+    "version": "2.27.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@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",
+        "@douyinfe/semi-animation": "2.27.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.27.0-beta.0",
+        "@douyinfe/semi-foundation": "2.27.0-beta.0",
+        "@douyinfe/semi-icons": "2.27.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.27.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.27.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "45aa538331cc89a4e1e75f9c8ac9e4dcf59eeb3a",
+    "gitHead": "fa59dd4e1bce1f81bb2d8cce4118a26354476c91",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

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

@@ -1,18 +0,0 @@
-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/cjs/tabs/TabItem.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/tabs/constants");
-
-var _semiIcons = require("@douyinfe/semi-icons");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var __rest = void 0 && (void 0).__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;
-};
-
-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 = (0, _react.useMemo)(() => {
-    return type === 'card' && closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      "aria-label": "Close",
-      role: "button",
-      className: "".concat(_constants.cssClasses.TABS_TAB, "-icon-close"),
-      onClick: e => deleteTabItem(itemKey, e)
-    }) : null;
-  }, [type, closable, deleteTabItem, itemKey]);
-  const renderIcon = (0, _react.useCallback)(icon => /*#__PURE__*/_react.default.createElement("span", null, icon), []);
-  const handleKeyDownInItem = (0, _react.useCallback)(event => {
-    handleKeyDown && handleKeyDown(event, itemKey, closable);
-  }, [handleKeyDown, itemKey, closable]);
-  const handleItemClick = (0, _react.useCallback)(e => {
-    !disabled && onClick && onClick(itemKey, e);
-  }, [itemKey, disabled, onClick]);
-  const panelIcon = icon ? renderIcon(icon) : null;
-  const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, "".concat(_constants.cssClasses.TABS_TAB, "-").concat(type), "".concat(_constants.cssClasses.TABS_TAB, "-").concat(tabPosition), "".concat(_constants.cssClasses.TABS_TAB, "-single"), {
-    [_constants.cssClasses.TABS_TAB_ACTIVE]: selected,
-    [_constants.cssClasses.TABS_TAB_DISABLED]: disabled,
-    ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
-    ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-  });
-  return /*#__PURE__*/_react.default.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__*/(0, _react.forwardRef)(TabItem); // @ts-ignore 
-
-ForwardTabItem.elementType = 'TabItem';
-var _default = ForwardTabItem;
-exports.default = _default;

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

@@ -1,18 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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;