@douyinfe/semi-ui 2.30.1 → 2.31.0-beta.0

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import NormalTable from './Table';
 import Column from './Column';
 import { TableProps, Data } from './interface';
+import { ContextValue } from '../configProvider/context';
 declare class Table<RecordType extends Record<string, any> = Data> extends React.PureComponent<TableProps<RecordType>> {
     static Column: typeof Column;
     static DEFAULT_KEY_COLUMN_SELECTION: "column-selection";
@@ -91,7 +92,9 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
     static defaultProps: {
         hideExpandedColumn: boolean;
     };
+    static contextType: React.Context<ContextValue>;
     tableRef: React.RefObject<NormalTable<RecordType>>;
+    context: ContextValue;
     constructor(props: TableProps);
     getCurrentPageData: () => any;
     render(): JSX.Element;

package/lib/es/table/index.js

@@ -4,6 +4,7 @@ import NormalTable from './Table';
 import ResizableTable from './ResizableTable';
 import Column from './Column';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import ConfigContext from '../configProvider/context';
 
 class Table extends React.PureComponent {
   constructor(props) {
@@ -15,16 +16,21 @@ class Table extends React.PureComponent {
   }
 
   render() {
-    // eslint-disable-next-line prefer-destructuring
+    var _a; // eslint-disable-next-line prefer-destructuring
+
+
     const props = this.props;
+    const direction = (_a = this.props.direction) !== null && _a !== void 0 ? _a : this.context.direction;
 
     if (props.resizable) {
       return /*#__PURE__*/React.createElement(ResizableTable, Object.assign({}, props, {
-        ref: this.tableRef
+        ref: this.tableRef,
+        direction: direction
       }));
     } else {
       return /*#__PURE__*/React.createElement(NormalTable, Object.assign({}, props, {
-        ref: this.tableRef
+        ref: this.tableRef,
+        direction: direction
       }));
     }
   }
@@ -40,5 +46,6 @@ Table.propTypes = Object.assign(Object.assign({}, NormalTable.propTypes), {
 Table.defaultProps = {
   hideExpandedColumn: true
 };
+Table.contextType = ConfigContext;
 export * from './interface';
 export default Table;

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

@@ -56,6 +56,7 @@ export interface TableProps<RecordType extends Record<string, any> = any> extend
     onHeaderRow?: OnHeaderRow<RecordType>;
     onRow?: OnRow<RecordType>;
     sticky?: Sticky;
+    direction?: Direction;
 }
 export interface ColumnProps<RecordType extends Record<string, any> = any> {
     [x: string]: any;

package/lib/es/table/table-context.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ColumnProps, GetVirtualizedListRef, RowKey } from './interface';
 import { BaseHeadWidth } from '@douyinfe/semi-foundation/lib/es/table/foundation';
+import type { ContextValue } from '../configProvider/context';
 export interface TableContextProps {
     children?: React.ReactNode;
     anyColumnFixed?: boolean;
@@ -15,6 +16,7 @@ export interface TableContextProps {
     renderSelection?: (record?: Record<string, any>, isHeader?: boolean) => React.ReactNode;
     getVirtualizedListRef?: GetVirtualizedListRef;
     setBodyHasScrollbar?: (bodyHasScrollBar: boolean) => void;
+    direction?: ContextValue['direction'];
 }
 declare const TableContext: React.Context<TableContextProps>;
 export default TableContext;

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

@@ -54,7 +54,7 @@ export interface TabBarProps {
 }
 export interface TabPaneProps {
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     disabled?: boolean;
     icon?: ReactNode;
     itemKey?: string;

package/lib/es/tag/index.js

@@ -21,6 +21,7 @@ import Avatar from '../avatar/index';
 import { IconClose } from '@douyinfe/semi-icons';
 import { handlePrevent } from '@douyinfe/semi-foundation/lib/es/utils/a11y';
 import '@douyinfe/semi-foundation/lib/es/tag/tag.css';
+import cls from 'classnames';
 export * from './interface';
 const prefixCls = cssClasses.PREFIX;
 const tagColors = strings.TAG_COLOR;
@@ -140,11 +141,12 @@ export default class Tag extends Component {
 
     const a11yProps = {
       role: 'button',
-      tabIndex: tabIndex | 0,
+      tabIndex: tabIndex || 0,
       onKeyDown: this.handleKeyDown
     };
     const baseProps = Object.assign(Object.assign({}, attr), {
       onClick,
+      tabIndex: tabIndex,
       className: classNames(prefixCls, {
         [`${prefixCls}-default`]: size === 'default',
         [`${prefixCls}-small`]: size === 'small',
@@ -168,10 +170,14 @@ export default class Tag extends Component {
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
+
+    const stringChild = _isString(children);
+
+    const contentCls = cls(`${prefixCls}-content`, `${prefixCls}-content-${stringChild ? 'ellipsis' : 'center'}`);
     return /*#__PURE__*/React.createElement("div", Object.assign({
-      "aria-label": this.props['aria-label'] || _isString(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : ''
+      "aria-label": this.props['aria-label'] || stringChild ? `${closable ? 'Closable ' : ''}Tag: ${children}` : ''
     }, wrapProps), avatarSrc ? this.renderAvatar() : null, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-content`
+      className: contentCls
     }, children), closeIcon);
   }
 

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

@@ -46,7 +46,7 @@ export interface TagInputProps {
     style?: React.CSSProperties;
     suffix?: React.ReactNode;
     validateStatus?: ValidateStatus;
-    value?: string[] | undefined;
+    value?: string[];
     autoFocus?: boolean;
     'aria-label'?: string;
     preventScroll?: boolean;

package/lib/es/tagInput/index.js

@@ -140,15 +140,13 @@ class TagInput extends BaseComponent {
             key: elementKey,
             visible: true,
             "aria-label": `${!disabled ? 'Closable ' : ''}Tag: ${value}`
-          }, /*#__PURE__*/React.createElement("div", {
-            className: `${prefixCls}-tag-content-wrapper`
           }, showIconHandler && /*#__PURE__*/React.createElement(DragHandle, null), /*#__PURE__*/React.createElement(Paragraph, {
             className: typoCls,
             ellipsis: {
               showTooltip: showContentTooltip,
               rows: 1
             }
-          }, value)));
+          }, value));
         }
       });
     };

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

@@ -63,6 +63,7 @@ export interface TooltipProps extends BaseProps {
     preventScroll?: boolean;
     disableFocusListener?: boolean;
     afterClose?: () => void;
+    keepDOM?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -79,6 +80,7 @@ interface TooltipState {
     transitionStyle: Record<string, any>;
     isPositionUpdated: boolean;
     id: string;
+    displayNone: boolean;
 }
 export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     static contextType: React.Context<ContextValue>;
@@ -120,6 +122,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         guardFocus: PropTypes.Requireable<boolean>;
         returnFocusOnClose: PropTypes.Requireable<boolean>;
         preventScroll: PropTypes.Requireable<boolean>;
+        keepDOM: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -151,6 +154,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         onEscKeyDown: (...args: any[]) => void;
         disableFocusListener: boolean;
         disableArrowKeyDown: boolean;
+        keepDOM: boolean;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;

package/lib/es/tooltip/index.js

@@ -85,7 +85,12 @@ export default class Tooltip extends BaseComponent {
 
 
     this.didLeave = () => {
-      this.foundation.removePortal();
+      if (this.props.keepDOM) {
+        this.foundation.setDisplayNone(true);
+      } else {
+        this.foundation.removePortal();
+      }
+
       this.foundation.unBindEvent();
     };
 
@@ -155,6 +160,7 @@ export default class Tooltip extends BaseComponent {
         visible,
         portalEventSet,
         placement,
+        displayNone,
         transitionState,
         id,
         isPositionUpdated
@@ -209,7 +215,9 @@ export default class Tooltip extends BaseComponent {
         } = _ref;
         return /*#__PURE__*/React.createElement("div", Object.assign({
           className: classNames(className, animationClassName),
-          style: Object.assign(Object.assign(Object.assign(Object.assign({}, animationStyle), {
+          style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, animationStyle), displayNone ? {
+            display: "none"
+          } : {}), {
             transformOrigin
           }), style), {
             opacity: isPositionUpdated ? opacity : "0"
@@ -299,8 +307,8 @@ export default class Tooltip extends BaseComponent {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
-
+      id: props.wrapperId,
+      displayNone: false
     };
     this.foundation = new TooltipFoundation(this.adapter);
     this.eventManager = new Event();
@@ -424,6 +432,11 @@ export default class Tooltip extends BaseComponent {
           this.eventManager.emit('positionUpdated');
         });
       },
+      setDisplayNone: (displayNone, cb) => {
+        this.setState({
+          displayNone
+        }, cb);
+      },
       updatePlacementAttr: placement => {
         this.setState({
           placement
@@ -730,7 +743,8 @@ Tooltip.propTypes = {
   wrapWhenSpecial: PropTypes.bool,
   guardFocus: PropTypes.bool,
   returnFocusOnClose: PropTypes.bool,
-  preventScroll: PropTypes.bool
+  preventScroll: PropTypes.bool,
+  keepDOM: PropTypes.bool
 };
 Tooltip.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,
@@ -756,5 +770,6 @@ Tooltip.defaultProps = {
   returnFocusOnClose: false,
   onEscKeyDown: _noop,
   disableFocusListener: false,
-  disableArrowKeyDown: false
+  disableArrowKeyDown: false,
+  keepDOM: false
 };

package/lib/es/typography/copyable.d.ts

@@ -8,6 +8,7 @@ export interface CopyableProps extends BaseProps {
     duration?: number;
     forwardRef?: React.RefObject<any>;
     successTip?: React.ReactNode;
+    icon?: React.ReactNode;
     onCopy?: (e: React.MouseEvent, content: string, res: boolean) => void;
 }
 interface CopyableState {
@@ -23,6 +24,7 @@ export declare class Copyable extends React.PureComponent<CopyableProps, Copyabl
         duration: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         content: string;
@@ -38,6 +40,7 @@ export declare class Copyable extends React.PureComponent<CopyableProps, Copyabl
     setCopied: (item: string, timer: number) => void;
     resetCopied: () => void;
     renderSuccessTip: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    renderCopyIcon: () => JSX.Element;
     render(): JSX.Element;
 }
 export default Copyable;

package/lib/es/typography/copyable.js

@@ -59,6 +59,31 @@ export class Copyable extends React.PureComponent {
       }, locale => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconTick, null), locale.copied));
     };
 
+    this.renderCopyIcon = () => {
+      const {
+        icon
+      } = this.props;
+      const copyProps = {
+        role: "button",
+        tabIndex: 0,
+        onClick: this.copy,
+        onKeyPress: e => isEnterPress(e) && this.copy(e)
+      };
+      {
+        /* TODO: replace `a` tag with `span` in next major version
+          NOTE: may have effect on style */
+      }
+      const defaultIcon =
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+      React.createElement("a", {
+        className: `${prefixCls}-action-copy-icon`
+      }, /*#__PURE__*/React.createElement(IconCopy, Object.assign({
+        onClick: this.copy
+      }, copyProps)));
+      return /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/React.cloneElement(icon, copyProps) : defaultIcon;
+    };
+
     this.state = {
       copied: false,
       item: ''
@@ -96,14 +121,7 @@ export class Copyable extends React.PureComponent {
       ref: forwardRef
     }, copied ? this.renderSuccessTip() : /*#__PURE__*/React.createElement(Tooltip, {
       content: typeof copyTip !== 'undefined' ? copyTip : locale.copy
-    }, /*#__PURE__*/React.createElement("a", {
-      className: `${prefixCls}-action-copy-icon`
-    }, /*#__PURE__*/React.createElement(IconCopy, {
-      role: "button",
-      tabIndex: 0,
-      onClick: this.copy,
-      onKeyPress: e => isEnterPress(e) && this.copy(e)
-    })))));
+    }, this.renderCopyIcon())));
   }
 
 }
@@ -114,7 +132,8 @@ Copyable.propTypes = {
   copyTip: PropTypes.node,
   duration: PropTypes.number,
   style: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  icon: PropTypes.node
 };
 Copyable.defaultProps = {
   content: '',

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.30.1",
+    "version": "2.31.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
     "typings": "lib/es/index.d.ts",
     "scripts": {
         "clean": "rimraf dist lib",
-        "build:lib": "export NODE_OPTIONS=--no-experimental-fetch && node ./scripts/compileLib.js",
+        "build:lib": "node ./scripts/compileLib.js",
         "build:js": "node scripts/compileDist.js",
         "build:css": "node scripts/compileScss.js",
         "prepublishOnly": "npm run clean && npm run build:lib && npm run build:js && npm run build:css"
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.30.1",
-        "@douyinfe/semi-animation-react": "2.30.1",
-        "@douyinfe/semi-foundation": "2.30.1",
-        "@douyinfe/semi-icons": "2.30.1",
-        "@douyinfe/semi-illustrations": "2.30.1",
-        "@douyinfe/semi-theme-default": "2.30.1",
+        "@douyinfe/semi-animation": "2.31.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.31.0-beta.0",
+        "@douyinfe/semi-foundation": "2.31.0-beta.0",
+        "@douyinfe/semi-icons": "2.31.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.31.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.31.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": "653ba5577ec669cc8b9daf2f9bd29044843df197",
+    "gitHead": "8b378259f169ca3bfb9af17118e962d717efa685",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",