@douyinfe/semi-ui 2.0.8 → 2.1.0-beta.1

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

@@ -1,10 +1,10 @@
-import { RefObject, ReactElement, MouseEvent, RefCallback, ReactNode } 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';
 import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
 import TabPane from './TabPane';
-import { TabsProps, PlainTab } from './interface';
+import { PlainTab, TabsProps } from './interface';
 export * from './interface';
 export interface TabsState {
     activeKey: string;
@@ -32,6 +32,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPaneMotion: PropTypes.Requireable<boolean | object>;
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
+        onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: TabsProps;
     contentRef: RefObject<HTMLDivElement>;
@@ -45,6 +46,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
     getActiveItem: () => ReactNode | ReactNode[];
+    deleteTabItem: (tabKey: string, event: MouseEvent<HTMLDivElement>) => void;
     render(): ReactNode;
 }
 export default Tabs;

package/lib/es/tabs/index.js

@@ -5,6 +5,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
@@ -26,7 +27,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tabs/const
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import TabsFoundation from '@douyinfe/semi-foundation/lib/es/tabs/foundation';
-import { isEqual, pick, omit } from 'lodash-es';
+import { isEqual, omit, pick } from 'lodash-es';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
 import TabBar from './TabBar';
@@ -87,6 +88,11 @@ class Tabs extends BaseComponent {
       });
     };
 
+    this.deleteTabItem = (tabKey, event) => {
+      event.stopPropagation();
+      this.foundation.handleTabDelete(tabKey);
+    };
+
     this.foundation = new TabsFoundation(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
@@ -119,13 +125,15 @@ class Tabs extends BaseComponent {
               tab,
               icon,
               disabled,
-              itemKey
+              itemKey,
+              closable
             } = child.props;
             return {
               tab,
               icon,
               disabled,
-              itemKey
+              itemKey,
+              closable
             };
           }
 
@@ -136,6 +144,61 @@ class Tabs extends BaseComponent {
           panes
         });
       },
+      collectActiveKey: () => {
+        let panes = [];
+        const {
+          tabList,
+          children,
+          activeKey: propsActiveKey
+        } = this.props;
+
+        if (typeof propsActiveKey !== 'undefined') {
+          return;
+        }
+
+        const {
+          activeKey
+        } = this.state;
+
+        if (_Array$isArray(tabList) && tabList.length) {
+          panes = tabList;
+        } else {
+          var _context3;
+
+          panes = _mapInstanceProperty(_context3 = React.Children).call(_context3, children, child => {
+            if (child) {
+              const {
+                tab,
+                icon,
+                disabled,
+                itemKey,
+                closable
+              } = child.props;
+              return {
+                tab,
+                icon,
+                disabled,
+                itemKey,
+                closable
+              };
+            }
+
+            return undefined;
+          });
+        }
+
+        if (_findIndexInstanceProperty(panes).call(panes, p => p.itemKey === activeKey) === -1) {
+          if (panes.length > 0) {
+            this.setState({
+              activeKey: panes[0].itemKey
+            });
+          } else {
+            this.setState({
+              activeKey: ''
+            });
+          }
+        }
+      },
       notifyTabClick: (activeKey, event) => {
         this.props.onTabClick(activeKey, event);
       },
@@ -148,14 +211,14 @@ class Tabs extends BaseComponent {
         });
       },
       getDefaultActiveKeyFromChildren: () => {
-        var _context3;
+        var _context4;
 
         const {
           tabList,
           children
         } = this.props;
         let activeKey = '';
-        const list = tabList ? tabList : _mapInstanceProperty(_context3 = React.Children.toArray(children)).call(_context3, child => child.props);
+        const list = tabList ? tabList : _mapInstanceProperty(_context4 = React.Children.toArray(children)).call(_context4, child => child.props);
 
         _forEachInstanceProperty(list).call(list, item => {
           if (item && !activeKey && !item.disabled) {
@@ -164,6 +227,9 @@ class Tabs extends BaseComponent {
         });
 
         return activeKey;
+      },
+      notifyTabDelete: tabKey => {
+        this.props.onTabClose && this.props.onTabClose(tabKey);
       }
     });
   }
@@ -179,12 +245,12 @@ class Tabs extends BaseComponent {
   }
 
   componentDidUpdate(prevProps) {
-    var _context4, _context5;
+    var _context5, _context6;
 
     // Panes state acts on tab bar, no need to compare TabPane children
-    const prevChildrenProps = _mapInstanceProperty(_context4 = React.Children.toArray(prevProps.children)).call(_context4, child => pick(child.props, panePickKeys));
+    const prevChildrenProps = _mapInstanceProperty(_context5 = React.Children.toArray(prevProps.children)).call(_context5, child => pick(child.props, panePickKeys));
 
-    const nowChildrenProps = _mapInstanceProperty(_context5 = React.Children.toArray(this.props.children)).call(_context5, child => pick(child.props, panePickKeys));
+    const nowChildrenProps = _mapInstanceProperty(_context6 = React.Children.toArray(this.props.children)).call(_context6, child => pick(child.props, panePickKeys));
 
     const isTabListType = this.props.tabList || prevProps.tabList;
 
@@ -202,7 +268,7 @@ class Tabs extends BaseComponent {
   }
 
   render() {
-    var _context6, _context7;
+    var _context7, _context8;
 
     const _a = this.props,
           {
@@ -230,11 +296,11 @@ class Tabs extends BaseComponent {
     } = this.state;
     const tabWrapperCls = cls(className, {
       [cssClasses.TABS]: true,
-      [_concatInstanceProperty(_context6 = "".concat(cssClasses.TABS, "-")).call(_context6, tabPosition)]: tabPosition
+      [_concatInstanceProperty(_context7 = "".concat(cssClasses.TABS, "-")).call(_context7, tabPosition)]: tabPosition
     });
     const tabContentCls = cls({
       [cssClasses.TABS_CONTENT]: true,
-      [_concatInstanceProperty(_context7 = "".concat(cssClasses.TABS_CONTENT, "-")).call(_context7, tabPosition)]: tabPosition
+      [_concatInstanceProperty(_context8 = "".concat(cssClasses.TABS_CONTENT, "-")).call(_context8, tabPosition)]: tabPosition
     });
     const tabBarProps = {
       activeKey,
@@ -246,7 +312,8 @@ class Tabs extends BaseComponent {
       style: tabBarStyle,
       tabBarExtraContent,
       tabPosition,
-      type
+      type,
+      deleteTabItem: this.deleteTabItem
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : /*#__PURE__*/React.createElement(TabBar, _Object$assign({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();
@@ -291,7 +358,8 @@ Tabs.propTypes = {
   tabList: PropTypes.array,
   tabPaneMotion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
-  type: PropTypes.oneOf(strings.TYPE_MAP)
+  type: PropTypes.oneOf(strings.TYPE_MAP),
+  onTabClose: PropTypes.func
 };
 Tabs.defaultProps = {
   children: [],
@@ -303,6 +371,7 @@ Tabs.defaultProps = {
   size: 'large',
   tabPaneMotion: true,
   tabPosition: 'top',
-  type: 'line'
+  type: 'line',
+  onTabClose: () => undefined
 };
 export default Tabs;

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

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, ComponentType, CSSProperties } from 'react';
+import { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
 export declare type TabType = 'line' | 'card' | 'button';
 export declare type TabSize = 'small' | 'medium' | 'large';
@@ -8,6 +8,7 @@ export interface PlainTab {
     icon?: ReactNode;
     itemKey: string;
     tab?: ReactNode;
+    closable: boolean;
 }
 export interface TabsProps {
     activeKey?: string;
@@ -30,6 +31,7 @@ export interface TabsProps {
     tabPaneMotion?: boolean;
     tabPosition?: TabPosition;
     type?: TabType;
+    onTabClose?: (tabKey: string) => void;
 }
 export interface TabBarProps {
     activeKey?: string;
@@ -44,6 +46,8 @@ export interface TabBarProps {
     type?: TabType;
     dropdownClassName?: string;
     dropdownStyle?: CSSProperties;
+    closable?: boolean;
+    deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
 }
 export interface TabPaneProps {
     className?: string;
@@ -52,6 +56,7 @@ export interface TabPaneProps {
     itemKey?: string;
     style?: CSSProperties;
     tab?: ReactNode;
+    closable?: boolean;
 }
 export interface TabPaneTransitionProps {
     [key: string]: any;

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

@@ -29,6 +29,7 @@ export interface TagInputProps {
     onFocus?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onInputChange?: (value: string, e: React.MouseEvent<HTMLInputElement>) => void;
     onInputExceed?: ((value: string) => void);
+    onKeyDown?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onRemove?: (removedValue: string, idx: number) => void;
     placeholder?: string;
     prefix?: React.ReactNode;
@@ -78,6 +79,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onInputExceed: PropTypes.Requireable<(...args: any[]) => any>;
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -101,6 +103,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onInputExceed: (...args: any[]) => void;
         onAdd: (...args: any[]) => void;
         onRemove: (...args: any[]) => void;
+        onKeyDown: (...args: any[]) => void;
     };
     inputRef: React.RefObject<HTMLInputElement>;
     constructor(props: TagInputProps);

package/lib/es/tagInput/index.js

@@ -112,6 +112,9 @@ class TagInput extends BaseComponent {
       },
       notifyTagRemove: (v, idx) => {
         this.props.onRemove(v, idx);
+      },
+      notifyKeyDown: e => {
+        this.props.onKeyDown(e);
       }
     });
   }
@@ -360,6 +363,7 @@ TagInput.propTypes = {
   onInputExceed: PropTypes.func,
   onAdd: PropTypes.func,
   onRemove: PropTypes.func,
+  onKeyDown: PropTypes.func,
   size: PropTypes.oneOf(strings.SIZE_SET),
   validateStatus: PropTypes.oneOf(strings.STATUS),
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -382,6 +386,7 @@ TagInput.defaultProps = {
   onExceed: noop,
   onInputExceed: noop,
   onAdd: noop,
-  onRemove: noop
+  onRemove: noop,
+  onKeyDown: noop
 };
 export default TagInput;

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

@@ -11,7 +11,7 @@ export interface ToastReactProps extends ToastProps {
     icon?: React.ReactNode;
     content: React.ReactNode;
 }
-export { ToastListProps, ToastListState, ToastState };
+export { ConfigProps, ToastListProps, ToastListState, ToastState };
 declare const createBaseToast: () => {
     new (props: ToastListProps): {
         readonly adapter: ToastListAdapter;

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

@@ -31,6 +31,7 @@ export interface TooltipProps extends BaseProps {
     content?: React.ReactNode;
     prefixCls?: string;
     onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
     spacing?: number;
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
@@ -77,6 +78,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefixCls: PropTypes.Requireable<string>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         spacing: PropTypes.Requireable<number>;
         showArrow: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         zIndex: PropTypes.Requireable<number>;
@@ -105,6 +107,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         mouseEnterDelay: 50;
         mouseLeaveDelay: 50;
         onVisibleChange: (...args: any[]) => void;
+        onClickOutSide: (...args: any[]) => void;
         spacing: 8;
         showArrow: boolean;
         arrowBounding: {

package/lib/es/tooltip/index.js

@@ -423,6 +423,7 @@ export default class Tooltip extends BaseComponent {
           popupEl = ReactDOM.findDOMNode(popupEl);
 
           if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide) {
+            this.props.onClickOutSide(e);
             cb();
           }
         };
@@ -621,6 +622,7 @@ Tooltip.propTypes = {
   content: PropTypes.node,
   prefixCls: PropTypes.string,
   onVisibleChange: PropTypes.func,
+  onClickOutSide: PropTypes.func,
   spacing: PropTypes.number,
   showArrow: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   zIndex: PropTypes.number,
@@ -646,6 +648,7 @@ Tooltip.defaultProps = {
   mouseEnterDelay: numbers.MOUSE_ENTER_DELAY,
   mouseLeaveDelay: numbers.MOUSE_LEAVE_DELAY,
   onVisibleChange: noop,
+  onClickOutSide: noop,
   spacing: numbers.SPACING,
   showArrow: true,
   arrowBounding: numbers.ARROW_BOUNDING

package/lib/es/tree/interface.d.ts

@@ -22,7 +22,7 @@ export interface OnDragProps extends BasicOnDragProps {
 export interface DragEnterProps extends DragProps {
     expandedKeys?: string[];
 }
-export interface ExpanedOtherProps extends BasicExpandedOtherProps {
+export interface ExpandedOtherProps extends BasicExpandedOtherProps {
     node: TreeNodeData;
 }
 export interface RenderFullLabelProps extends BasicRenderFullLabelProps {
@@ -57,7 +57,7 @@ export interface TreeProps extends BasicTreeProps {
     onDragStart?: (dragProps: DragProps) => void;
     onDragEnter?: (dragEnterProps: DragEnterProps) => void;
     onDrop?: (onDragProps: OnDragProps) => void;
-    onExpand?: (expandedKeys: string[], expanedOtherProps: ExpanedOtherProps) => void;
+    onExpand?: (expandedKeys: string[], expandedOtherProps: ExpandedOtherProps) => void;
     onLoad?: (loadedKeys?: Set<string>, treeNode?: TreeNodeData) => void;
     onContextMenu?: (e: MouseEvent, node: TreeNodeData) => void;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: TreeNodeData) => void;

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

@@ -27,16 +27,7 @@ export declare type RenderSelectedItemInMultiple = (treeNode: TreeNodeData, othe
     isRenderInTag: boolean;
     content: React.ReactNode;
 };
-export interface RenderSelectedItem {
-    (treeNode: TreeNodeData): React.ReactNode;
-    (treeNode: TreeNodeData, otherProps: {
-        index: number | string;
-        onClose: (tagContent: any, e: React.MouseEvent) => void;
-    }): {
-        isRenderInTag: boolean;
-        content: React.ReactNode;
-    };
-}
+export declare type RenderSelectedItem = RenderSelectedItemInSingle | RenderSelectedItemInMultiple;
 export declare type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand';
 /**
 * Type definition description:
@@ -205,7 +196,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderArrow: () => JSX.Element;
     renderClearBtn: () => JSX.Element;
     renderSelection: () => JSX.Element;
-    renderTagItem: (key: string, idx: number) => any;
+    renderTagItem: (key: string, idx: number) => React.ReactNode;
     renderTagInput: () => JSX.Element;
     renderInput: () => JSX.Element;
     renderEmpty: () => JSX.Element;

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

@@ -7,6 +7,7 @@ import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { ArrayElement } from '../_base/base';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/lib/es/upload/upload.css';
+export { BeforeUploadObjectResult, AfterUploadResult };
 export interface FileItem extends BaseFileItem {
     validateMessage?: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.0.8",
+    "version": "2.1.0-beta.1",
     "description": "",
     "main": "lib/es/index.js",
     "module": "lib/es/index.js",
@@ -19,11 +19,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.0.8",
-        "@douyinfe/semi-foundation": "2.0.8",
-        "@douyinfe/semi-icons": "2.0.8",
-        "@douyinfe/semi-illustrations": "2.0.8",
-        "@douyinfe/semi-theme-default": "2.0.8",
+        "@douyinfe/semi-animation-react": "2.1.0-beta.1",
+        "@douyinfe/semi-foundation": "2.1.0-beta.1",
+        "@douyinfe/semi-icons": "2.1.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.1.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.1.0-beta.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -64,13 +64,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "0a2a5df053d415ee634ae3c5b8aa24915aa2cf9b",
+    "gitHead": "112ef9a681542c2057f98e2e708648b4fdd5618c",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.0.8",
+        "@douyinfe/semi-scss-compile": "2.1.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "babel-loader": "^8.2.2",
         "case-sensitive-paths-webpack-plugin": "^2.4.0",