@douyinfe/semi-ui 2.47.0 → 2.48.0-beta.0

package/lib/cjs/avatar/index.d.ts

@@ -10,12 +10,14 @@ export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
     focusVisible: boolean;
+    scale: number;
 }
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     static defaultProps: {
         size: string;
         color: string;
         shape: string;
+        gap: number;
         onClick: typeof noop;
         onMouseEnter: typeof noop;
         onMouseLeave: typeof noop;
@@ -29,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         hoverMask: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
+        gap: PropTypes.Requireable<number>;
         imgAttr: PropTypes.Requireable<object>;
         src: PropTypes.Requireable<string>;
         srcSet: PropTypes.Requireable<string>;
@@ -39,6 +42,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
     foundation: AvatarFoundation;
+    avatarRef: React.RefObject<HTMLElement | null>;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;

package/lib/cjs/avatar/index.js

@@ -95,8 +95,12 @@ class Avatar extends _baseComponent.default {
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
+        const stringStyle = {
+          transform: `scale(${this.state.scale})`
+        };
         content = /*#__PURE__*/_react.default.createElement("span", {
-          className: `${prefixCls}-content`
+          className: `${prefixCls}-content`,
+          style: stringStyle
         }, /*#__PURE__*/_react.default.createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -106,13 +110,15 @@ class Avatar extends _baseComponent.default {
     this.state = {
       isImgExist: true,
       hoverContent: '',
-      focusVisible: false
+      focusVisible: false,
+      scale: 1
     };
     this.onEnter = this.onEnter.bind(this);
     this.onLeave = this.onLeave.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.avatarRef = /*#__PURE__*/_react.default.createRef();
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -149,6 +155,15 @@ class Avatar extends _baseComponent.default {
         this.setState({
           focusVisible
         });
+      },
+      setScale: scale => {
+        this.setState({
+          scale
+        });
+      },
+      getAvatarNode: () => {
+        var _a;
+        return (_a = this.avatarRef) === null || _a === void 0 ? void 0 : _a.current;
       }
     });
   }
@@ -176,6 +191,9 @@ class Avatar extends _baseComponent.default {
         });
       };
     }
+    if (typeof this.props.children === "string" && this.props.children !== prevProps.children) {
+      this.foundation.changeScale();
+    }
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -219,9 +237,10 @@ class Avatar extends _baseComponent.default {
         src,
         srcSet,
         style,
-        alt
+        alt,
+        gap
       } = _a,
-      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
+      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
     const {
       isImgExist,
       hoverContent,
@@ -245,7 +264,8 @@ class Avatar extends _baseComponent.default {
       onClick: onClick,
       onMouseEnter: this.onEnter,
       onMouseLeave: this.onLeave,
-      role: 'listitem'
+      role: 'listitem',
+      ref: this.avatarRef
     }), this.getContent(), hoverRender);
   }
 }
@@ -254,6 +274,7 @@ Avatar.defaultProps = {
   size: 'medium',
   color: 'grey',
   shape: 'circle',
+  gap: 3,
   onClick: _function.noop,
   onMouseEnter: _function.noop,
   onMouseLeave: _function.noop
@@ -266,6 +287,7 @@ Avatar.propTypes = {
   hoverMask: _propTypes.default.node,
   className: _propTypes.default.string,
   style: _propTypes.default.object,
+  gap: _propTypes.default.number,
   imgAttr: _propTypes.default.object,
   src: _propTypes.default.string,
   srcSet: _propTypes.default.string,

package/lib/cjs/avatar/interface.d.ts

@@ -12,6 +12,7 @@ export interface AvatarProps extends BaseProps {
     src?: string;
     srcSet?: string;
     alt?: string;
+    gap?: number;
     onError?: React.MouseEventHandler;
     onClick?: React.MouseEventHandler;
     onMouseEnter?: React.MouseEventHandler;

package/lib/cjs/slider/index.js

@@ -82,6 +82,7 @@ class Slider extends _baseComponent.default {
       });
       const handleContents = !range ? /*#__PURE__*/_react.default.createElement(_index.default, {
         content: tipChildren.min,
+        showArrow: this.props.showArrow,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
@@ -280,7 +281,7 @@ class Slider extends _baseComponent.default {
           [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ?
+        const dotDOM =
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         _react.default.createElement("span", {
@@ -290,11 +291,17 @@ class Slider extends _baseComponent.default {
           style: {
             [stylePos]: `calc(${markPercent * 100}% - 2px)`
           }
-        }) : null;
+        });
+        return activeResult ? this.props.tooltipOnMark ? /*#__PURE__*/_react.default.createElement(_index.default, {
+          content: marks[mark]
+        }, dotDOM) : dotDOM : null;
       })) : null;
       return labelContent;
     };
     this.renderLabel = () => {
+      if (!this.props.showMarkLabel) {
+        return null;
+      }
       const {
         min,
         max,
@@ -624,6 +631,7 @@ Slider.propTypes = {
   // allowClear: PropTypes.bool,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.array]),
   disabled: _propTypes.default.bool,
+  showMarkLabel: _propTypes.default.bool,
   included: _propTypes.default.bool,
   marks: _propTypes.default.object,
   max: _propTypes.default.number,
@@ -636,7 +644,9 @@ Slider.propTypes = {
   onAfterChange: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onMouseUp: _propTypes.default.func,
+  tooltipOnMark: _propTypes.default.bool,
   tooltipVisible: _propTypes.default.bool,
+  showArrow: _propTypes.default.bool,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   showBoundary: _propTypes.default.bool,
@@ -647,10 +657,13 @@ Slider.propTypes = {
 Slider.defaultProps = {
   // allowClear: false,
   disabled: false,
+  showMarkLabel: true,
+  tooltipOnMark: false,
   included: true,
   max: 100,
   min: 0,
   range: false,
+  showArrow: true,
   step: 1,
   tipFormatter: value => value,
   vertical: false,

package/lib/cjs/table/HeadTable.js

@@ -37,9 +37,6 @@ class HeadTable extends _react.default.PureComponent {
       bodyHasScrollBar,
       sticky
     } = this.props;
-    if (!showHeader) {
-      return null;
-    }
     const Table = (0, _get2.default)(components, 'header.outer', 'table');
     const x = (0, _get2.default)(scroll, 'x');
     const headStyle = {};
@@ -60,7 +57,8 @@ class HeadTable extends _react.default.PureComponent {
       onDidUpdate: onDidUpdate
     }));
     const headTableCls = (0, _classnames.default)(`${prefixCls}-header`, {
-      [`${prefixCls}-header-sticky`]: sticky
+      [`${prefixCls}-header-sticky`]: sticky,
+      [`${prefixCls}-header-hidden`]: !showHeader
     });
     const stickyTop = (0, _get2.default)(sticky, 'top', 0);
     if (typeof stickyTop === 'number') {

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

@@ -10,12 +10,14 @@ export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
     focusVisible: boolean;
+    scale: number;
 }
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     static defaultProps: {
         size: string;
         color: string;
         shape: string;
+        gap: number;
         onClick: typeof noop;
         onMouseEnter: typeof noop;
         onMouseLeave: typeof noop;
@@ -29,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         hoverMask: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
+        gap: PropTypes.Requireable<number>;
         imgAttr: PropTypes.Requireable<object>;
         src: PropTypes.Requireable<string>;
         srcSet: PropTypes.Requireable<string>;
@@ -39,6 +42,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
     foundation: AvatarFoundation;
+    avatarRef: React.RefObject<HTMLElement | null>;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;

package/lib/es/avatar/index.js

@@ -76,8 +76,12 @@ export default class Avatar extends BaseComponent {
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
+        const stringStyle = {
+          transform: `scale(${this.state.scale})`
+        };
         content = /*#__PURE__*/React.createElement("span", {
-          className: `${prefixCls}-content`
+          className: `${prefixCls}-content`,
+          style: stringStyle
         }, /*#__PURE__*/React.createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -87,13 +91,15 @@ export default class Avatar extends BaseComponent {
     this.state = {
       isImgExist: true,
       hoverContent: '',
-      focusVisible: false
+      focusVisible: false,
+      scale: 1
     };
     this.onEnter = this.onEnter.bind(this);
     this.onLeave = this.onLeave.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.avatarRef = /*#__PURE__*/React.createRef();
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -130,6 +136,15 @@ export default class Avatar extends BaseComponent {
         this.setState({
           focusVisible
         });
+      },
+      setScale: scale => {
+        this.setState({
+          scale
+        });
+      },
+      getAvatarNode: () => {
+        var _a;
+        return (_a = this.avatarRef) === null || _a === void 0 ? void 0 : _a.current;
       }
     });
   }
@@ -157,6 +172,9 @@ export default class Avatar extends BaseComponent {
         });
       };
     }
+    if (typeof this.props.children === "string" && this.props.children !== prevProps.children) {
+      this.foundation.changeScale();
+    }
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -200,9 +218,10 @@ export default class Avatar extends BaseComponent {
         src,
         srcSet,
         style,
-        alt
+        alt,
+        gap
       } = _a,
-      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
+      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
     const {
       isImgExist,
       hoverContent,
@@ -226,7 +245,8 @@ export default class Avatar extends BaseComponent {
       onClick: onClick,
       onMouseEnter: this.onEnter,
       onMouseLeave: this.onLeave,
-      role: 'listitem'
+      role: 'listitem',
+      ref: this.avatarRef
     }), this.getContent(), hoverRender);
   }
 }
@@ -234,6 +254,7 @@ Avatar.defaultProps = {
   size: 'medium',
   color: 'grey',
   shape: 'circle',
+  gap: 3,
   onClick: noop,
   onMouseEnter: noop,
   onMouseLeave: noop
@@ -246,6 +267,7 @@ Avatar.propTypes = {
   hoverMask: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.object,
+  gap: PropTypes.number,
   imgAttr: PropTypes.object,
   src: PropTypes.string,
   srcSet: PropTypes.string,

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

@@ -12,6 +12,7 @@ export interface AvatarProps extends BaseProps {
     src?: string;
     srcSet?: string;
     alt?: string;
+    gap?: number;
     onError?: React.MouseEventHandler;
     onClick?: React.MouseEventHandler;
     onMouseEnter?: React.MouseEventHandler;

package/lib/es/slider/index.js

@@ -75,6 +75,7 @@ export default class Slider extends BaseComponent {
       });
       const handleContents = !range ? /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
+        showArrow: this.props.showArrow,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
@@ -273,7 +274,7 @@ export default class Slider extends BaseComponent {
           [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ?
+        const dotDOM =
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         React.createElement("span", {
@@ -283,11 +284,17 @@ export default class Slider extends BaseComponent {
           style: {
             [stylePos]: `calc(${markPercent * 100}% - 2px)`
           }
-        }) : null;
+        });
+        return activeResult ? this.props.tooltipOnMark ? /*#__PURE__*/React.createElement(Tooltip, {
+          content: marks[mark]
+        }, dotDOM) : dotDOM : null;
       })) : null;
       return labelContent;
     };
     this.renderLabel = () => {
+      if (!this.props.showMarkLabel) {
+        return null;
+      }
       const {
         min,
         max,
@@ -616,6 +623,7 @@ Slider.propTypes = {
   // allowClear: PropTypes.bool,
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
   disabled: PropTypes.bool,
+  showMarkLabel: PropTypes.bool,
   included: PropTypes.bool,
   marks: PropTypes.object,
   max: PropTypes.number,
@@ -628,7 +636,9 @@ Slider.propTypes = {
   onAfterChange: PropTypes.func,
   onChange: PropTypes.func,
   onMouseUp: PropTypes.func,
+  tooltipOnMark: PropTypes.bool,
   tooltipVisible: PropTypes.bool,
+  showArrow: PropTypes.bool,
   style: PropTypes.object,
   className: PropTypes.string,
   showBoundary: PropTypes.bool,
@@ -639,10 +649,13 @@ Slider.propTypes = {
 Slider.defaultProps = {
   // allowClear: false,
   disabled: false,
+  showMarkLabel: true,
+  tooltipOnMark: false,
   included: true,
   max: 100,
   min: 0,
   range: false,
+  showArrow: true,
   step: 1,
   tipFormatter: value => value,
   vertical: false,

package/lib/es/table/HeadTable.js

@@ -30,9 +30,6 @@ class HeadTable extends React.PureComponent {
       bodyHasScrollBar,
       sticky
     } = this.props;
-    if (!showHeader) {
-      return null;
-    }
     const Table = _get(components, 'header.outer', 'table');
     const x = _get(scroll, 'x');
     const headStyle = {};
@@ -53,7 +50,8 @@ class HeadTable extends React.PureComponent {
       onDidUpdate: onDidUpdate
     }));
     const headTableCls = classnames(`${prefixCls}-header`, {
-      [`${prefixCls}-header-sticky`]: sticky
+      [`${prefixCls}-header-sticky`]: sticky,
+      [`${prefixCls}-header-hidden`]: !showHeader
     });
     const stickyTop = _get(sticky, 'top', 0);
     if (typeof stickyTop === 'number') {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.47.0",
+    "version": "2.48.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.47.0",
-        "@douyinfe/semi-animation-react": "2.47.0",
-        "@douyinfe/semi-foundation": "2.47.0",
-        "@douyinfe/semi-icons": "2.47.0",
-        "@douyinfe/semi-illustrations": "2.47.0",
-        "@douyinfe/semi-theme-default": "2.47.0",
+        "@douyinfe/semi-animation": "2.48.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.48.0-beta.0",
+        "@douyinfe/semi-foundation": "2.48.0-beta.0",
+        "@douyinfe/semi-icons": "2.48.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.48.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.48.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "6ec26559221487884e981fe44daa300af1a336f6",
+    "gitHead": "2eb75459ef1df87a83949a2f609da9468cd200c6",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",