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

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,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.30.2",
+    "version": "2.31.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.30.2",
-        "@douyinfe/semi-animation-react": "2.30.2",
-        "@douyinfe/semi-foundation": "2.30.2",
-        "@douyinfe/semi-icons": "2.30.2",
-        "@douyinfe/semi-illustrations": "2.30.2",
-        "@douyinfe/semi-theme-default": "2.30.2",
+        "@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": "1cd39aa790995b2770f09a95ef89f1e9948b845b",
+    "gitHead": "8b378259f169ca3bfb9af17118e962d717efa685",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",