@douyinfe/semi-ui 2.51.3 → 2.52.0-beta.0

package/lib/es/avatar/index.js

@@ -15,6 +15,7 @@ import '@douyinfe/semi-foundation/lib/es/avatar/avatar.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import BaseComponent from '../_base/baseComponent';
 import { handlePrevent } from '@douyinfe/semi-foundation/lib/es/utils/a11y';
+import TopSlotSvg from "./TopSlotSvg";
 const sizeSet = strings.SIZE;
 const shapeSet = strings.SHAPE;
 const colorSet = strings.COLOR;
@@ -88,6 +89,64 @@ export default class Avatar extends BaseComponent {
       }
       return content;
     };
+    this.renderBottomSlot = () => {
+      var _a, _b;
+      if (!this.props.bottomSlot) {
+        return null;
+      }
+      if (this.props.bottomSlot.render) {
+        return this.props.bottomSlot.render();
+      }
+      const renderContent = (_a = this.props.bottomSlot.render) !== null && _a !== void 0 ? _a : () => {
+        var _a;
+        const style = {};
+        if (this.props.bottomSlot.bgColor) {
+          style['backgroundColor'] = this.props.bottomSlot.bgColor;
+        }
+        if (this.props.bottomSlot.textColor) {
+          style['color'] = this.props.bottomSlot.textColor;
+        }
+        return /*#__PURE__*/React.createElement("span", {
+          style: style,
+          className: cls(`${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}`, `${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}-${this.props.size}`, (_a = this.props.bottomSlot.className) !== null && _a !== void 0 ? _a : "")
+        }, this.props.bottomSlot.text);
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-bottom_slot`]),
+        style: (_b = this.props.bottomSlot.style) !== null && _b !== void 0 ? _b : {}
+      }, renderContent());
+    };
+    this.renderTopSlot = () => {
+      var _a, _b, _c, _d;
+      if (!this.props.topSlot) {
+        return null;
+      }
+      if (this.props.topSlot.render) {
+        return this.props.topSlot.render();
+      }
+      const textStyle = {};
+      if (this.props.topSlot.textColor) {
+        textStyle['color'] = this.props.topSlot.textColor;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        style: (_a = this.props.topSlot.style) !== null && _a !== void 0 ? _a : {},
+        className: cls([`${prefixCls}-top_slot-wrapper`, (_b = this.props.topSlot.className) !== null && _b !== void 0 ? _b : "", {
+          [`${prefixCls}-animated`]: this.props.contentMotion
+        }])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-top_slot-bg`, `${prefixCls}-top_slot-bg-${this.props.size}`])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-top_slot-bg-svg`, `${prefixCls}-top_slot-bg-svg-${this.props.size}`])
+      }, /*#__PURE__*/React.createElement(TopSlotSvg, {
+        gradientStart: (_c = this.props.topSlot.gradientStart) !== null && _c !== void 0 ? _c : "var(--semi-color-primary)",
+        gradientEnd: (_d = this.props.topSlot.gradientEnd) !== null && _d !== void 0 ? _d : "var(--semi-color-primary)"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-top_slot`])
+      }, /*#__PURE__*/React.createElement("div", {
+        style: textStyle,
+        className: cls([`${prefixCls}-top_slot-content`, `${prefixCls}-top_slot-content-${this.props.size}`])
+      }, this.props.topSlot.text)));
+    };
     this.state = {
       isImgExist: true,
       hoverContent: '',
@@ -205,7 +264,8 @@ export default class Avatar extends BaseComponent {
     }
   }
   render() {
-    const _a = this.props,
+    var _a, _b;
+    const _c = this.props,
       {
         shape,
         children,
@@ -219,9 +279,13 @@ export default class Avatar extends BaseComponent {
         srcSet,
         style,
         alt,
-        gap
-      } = _a,
-      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
+        gap,
+        bottomSlot,
+        topSlot,
+        border,
+        contentMotion
+      } = _c,
+      others = __rest(_c, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap", "bottomSlot", "topSlot", "border", "contentMotion"]);
     const {
       isImgExist,
       hoverContent,
@@ -233,14 +297,15 @@ export default class Avatar extends BaseComponent {
       [`${prefixCls}-${size}`]: size,
       [`${prefixCls}-${color}`]: color && !isImg,
       [`${prefixCls}-img`]: isImg,
-      [`${prefixCls}-focus`]: focusVisible
+      [`${prefixCls}-focus`]: focusVisible,
+      [`${prefixCls}-animated`]: contentMotion
     }, className);
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-hover`,
       "x-semi-prop": "hoverContent"
     }, hoverContent) : null;
-    return /*#__PURE__*/React.createElement("span", Object.assign({}, others, {
-      style: style,
+    let avatar = /*#__PURE__*/React.createElement("span", Object.assign({}, others, {
+      style: border || bottomSlot || topSlot || border ? {} : style,
       className: avatarCls,
       onClick: onClick,
       onMouseEnter: this.onEnter,
@@ -248,6 +313,36 @@ export default class Avatar extends BaseComponent {
       role: 'listitem',
       ref: this.avatarRef
     }), this.getContent(), hoverRender);
+    if (border) {
+      const borderStyle = {};
+      if (border === null || border === void 0 ? void 0 : border.color) {
+        borderStyle['borderColor'] = border.color;
+      }
+      avatar = /*#__PURE__*/React.createElement("div", {
+        style: Object.assign({
+          position: "relative"
+        }, style)
+      }, avatar, /*#__PURE__*/React.createElement("span", {
+        style: borderStyle,
+        className: cls([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
+          [`${prefixCls}-${shape}`]: shape
+        }])
+      }), ((_a = this.props.border) === null || _a === void 0 ? void 0 : _a.motion) && /*#__PURE__*/React.createElement("span", {
+        style: borderStyle,
+        className: cls([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
+          [`${prefixCls}-${shape}`]: shape,
+          [`${prefixCls}-additionalBorder-animated`]: (_b = this.props.border) === null || _b === void 0 ? void 0 : _b.motion
+        }])
+      }));
+    }
+    if (bottomSlot || topSlot || border) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: cls([`${prefixCls}-wrapper`]),
+        style: style
+      }, avatar, topSlot && ["small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot(), bottomSlot && ["small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot());
+    } else {
+      return avatar;
+    }
   }
 }
 Avatar.defaultProps = {
@@ -275,6 +370,29 @@ Avatar.propTypes = {
   onError: PropTypes.func,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  bottomSlot: PropTypes.shape({
+    render: PropTypes.func,
+    shape: PropTypes.oneOf(['circle', 'square']),
+    text: PropTypes.node,
+    bgColor: PropTypes.string,
+    textColor: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object
+  }),
+  topSlot: PropTypes.shape({
+    render: PropTypes.func,
+    gradientStart: PropTypes.string,
+    gradientEnd: PropTypes.string,
+    text: PropTypes.node,
+    textColor: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object
+  }),
+  border: PropTypes.oneOfType([PropTypes.shape({
+    color: PropTypes.string,
+    motion: PropTypes.bool
+  }), PropTypes.bool]),
+  contentMotion: PropTypes.bool
 };
 Avatar.elementType = 'Avatar';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { BaseProps } from '../_base/baseComponent';
 export type AvatarShape = 'circle' | 'square';
 export type AvatarSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
@@ -18,6 +18,29 @@ export interface AvatarProps extends BaseProps {
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
     imgAttr?: React.ImgHTMLAttributes<HTMLImageElement>;
+    bottomSlot?: {
+        render?: () => React.ReactNode;
+        shape?: "circle" | "square";
+        text: React.ReactNode;
+        bgColor: string;
+        textColor: string;
+        className: string;
+        style?: CSSProperties;
+    };
+    topSlot?: {
+        render?: () => React.ReactNode;
+        gradientStart?: string;
+        gradientEnd?: string;
+        text: React.ReactNode;
+        textColor: string;
+        className: string;
+        style?: CSSProperties;
+    };
+    border?: {
+        color?: string;
+        motion?: boolean;
+    } & boolean;
+    contentMotion?: boolean;
 }
 export type AvatarGroupShape = 'circle' | 'square';
 export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';

package/lib/es/dropdown/dropdownItem.js

@@ -37,7 +37,8 @@ class DropdownItem extends BaseComponent {
     const events = {};
     if (!disabled) {
       ['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
-        if (eventName === "onClick") {
+        const isInAnotherDropdown = this.context.level !== 1;
+        if (isInAnotherDropdown && eventName === "onClick") {
           events["onMouseDown"] = e => {
             var _a, _b;
             if (e.button === 0) {

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

@@ -51,6 +51,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     preventScroll?: boolean;
     /** internal prop, DatePicker use it */
     showClearIgnoreDisabled?: boolean;
+    onlyBorder?: number;
 }
 export interface InputState {
     value: React.ReactText;

package/lib/es/input/index.js

@@ -333,9 +333,10 @@ class Input extends BaseComponent {
         getValueLength,
         preventScroll,
         borderless,
-        showClearIgnoreDisabled
+        showClearIgnoreDisabled,
+        onlyBorder
       } = _a,
-      rest = __rest(_a, ["addonAfter", "addonBefore", "autoFocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled"]);
+      rest = __rest(_a, ["addonAfter", "addonBefore", "autoFocus", "clearIcon", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength", "preventScroll", "borderless", "showClearIgnoreDisabled", "onlyBorder"]);
     const {
       value,
       isFocus,
@@ -363,7 +364,8 @@ class Input extends BaseComponent {
       [`${wrapperPrefix}-modebtn`]: mode === 'password',
       [`${wrapperPrefix}-hidden`]: type === 'hidden',
       [`${wrapperPrefix}-${size}`]: size,
-      [`${prefixCls}-borderless`]: borderless
+      [`${prefixCls}-borderless`]: borderless,
+      [`${prefixCls}-only_border`]: onlyBorder !== undefined && onlyBorder !== null
     });
     const inputCls = cls(prefixCls, {
       [`${prefixCls}-${size}`]: size,
@@ -397,12 +399,18 @@ class Input extends BaseComponent {
     if (validateStatus === 'error') {
       inputProps['aria-invalid'] = 'true';
     }
+    let wrapperStyle = Object.assign({}, style);
+    if (onlyBorder !== undefined) {
+      wrapperStyle = Object.assign({
+        borderWidth: onlyBorder
+      }, style);
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       React.createElement("div", {
         className: wrapperCls,
-        style: style,
+        style: wrapperStyle,
         onMouseEnter: e => this.handleMouseOver(e),
         onMouseLeave: e => this.handleMouseLeave(e),
         onClick: e => this.handleClick(e)

package/lib/es/modal/Modal.d.ts

@@ -66,6 +66,7 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
         lazyRender: PropTypes.Requireable<boolean>;
         direction: PropTypes.Requireable<string>;
         fullScreen: PropTypes.Requireable<boolean>;
+        footerFill: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         zIndex: number;

package/lib/es/modal/Modal.js

@@ -45,7 +45,8 @@ class Modal extends BaseComponent {
         cancelText,
         confirmLoading,
         cancelLoading,
-        hasCancel
+        hasCancel,
+        footerFill
       } = this.props;
       const getCancelButton = locale => {
         if (!hasCancel) {
@@ -56,6 +57,7 @@ class Modal extends BaseComponent {
             onClick: this.handleCancel,
             loading: cancelLoading === undefined ? this.state.onCancelReturnPromiseStatus === "pending" : cancelLoading,
             type: "tertiary",
+            block: footerFill,
             autoFocus: true
           }, this.props.cancelButtonProps, {
             "x-semi-children-alias": "cancelText"
@@ -64,10 +66,15 @@ class Modal extends BaseComponent {
       };
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Modal"
-      }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", null, getCancelButton(locale), /*#__PURE__*/React.createElement(Button, Object.assign({
+      }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
+        className: cls({
+          [`${cssClasses.DIALOG}-footerfill`]: footerFill
+        })
+      }, getCancelButton(locale), /*#__PURE__*/React.createElement(Button, Object.assign({
         "aria-label": "confirm",
         type: okType,
         theme: "solid",
+        block: footerFill,
         loading: confirmLoading === undefined ? this.state.onOKReturnPromiseStatus === "pending" : confirmLoading,
         onClick: this.handleOk
       }, this.props.okButtonProps, {
@@ -301,7 +308,8 @@ Modal.propTypes = {
   keepDOM: PropTypes.bool,
   lazyRender: PropTypes.bool,
   direction: PropTypes.oneOf(strings.directions),
-  fullScreen: PropTypes.bool
+  fullScreen: PropTypes.bool,
+  footerFill: PropTypes.bool
 };
 Modal.defaultProps = {
   zIndex: 1000,

package/lib/es/modal/confirm.d.ts

@@ -51,6 +51,7 @@ export declare function withInfo(props: ModalReactProps): {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
     type: "info";
 };
 export declare function withSuccess(props: ModalReactProps): {
@@ -94,6 +95,7 @@ export declare function withSuccess(props: ModalReactProps): {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
     type: "success";
 };
 export declare function withWarning(props: ModalReactProps): {
@@ -137,6 +139,7 @@ export declare function withWarning(props: ModalReactProps): {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
     type: "warning";
 };
 export declare function withError(props: ModalReactProps): {
@@ -179,6 +182,7 @@ export declare function withError(props: ModalReactProps): {
     onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     lazyRender?: boolean;
     fullScreen?: boolean;
+    footerFill?: boolean;
     type: "error";
     okButtonProps: {
         id?: string;
@@ -506,5 +510,6 @@ export declare function withConfirm(props: ModalReactProps): {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
     type: "confirm";
 };

package/lib/es/slider/index.js

@@ -28,6 +28,7 @@ export default class Slider extends BaseComponent {
   constructor(props) {
     super(props);
     this.renderHandle = () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       const {
         vertical,
         range,
@@ -126,6 +127,14 @@ export default class Slider extends BaseComponent {
         "aria-valuenow": currentValue,
         "aria-valuemax": max,
         "aria-valuemin": min
+      }), this.props.handleDot && /*#__PURE__*/React.createElement("div", {
+        className: cssClasses.HANDLE_DOT,
+        style: Object.assign(Object.assign({}, ((_a = this.props.handleDot) === null || _a === void 0 ? void 0 : _a.size) ? {
+          width: this.props.handleDot.size,
+          height: this.props.handleDot.size
+        } : {}), ((_b = this.props.handleDot) === null || _b === void 0 ? void 0 : _b.color) ? {
+          backgroundColor: this.props.handleDot.color
+        } : {})
       }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
         position: "top",
@@ -177,6 +186,14 @@ export default class Slider extends BaseComponent {
         "aria-valuenow": currentValue[0],
         "aria-valuemax": currentValue[1],
         "aria-valuemin": min
+      }), ((_c = this.props.handleDot) === null || _c === void 0 ? void 0 : _c[0]) && /*#__PURE__*/React.createElement("div", {
+        className: cssClasses.HANDLE_DOT,
+        style: Object.assign(Object.assign({}, ((_d = this.props.handleDot[0]) === null || _d === void 0 ? void 0 : _d.size) ? {
+          width: this.props.handleDot[0].size,
+          height: this.props.handleDot[0].size
+        } : {}), ((_e = this.props.handleDot[0]) === null || _e === void 0 ? void 0 : _e.color) ? {
+          backgroundColor: this.props.handleDot[0].color
+        } : {})
       }))), /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.max,
         position: "top",
@@ -228,6 +245,14 @@ export default class Slider extends BaseComponent {
         "aria-valuenow": currentValue[1],
         "aria-valuemax": max,
         "aria-valuemin": currentValue[0]
+      }), ((_f = this.props.handleDot) === null || _f === void 0 ? void 0 : _f[1]) && /*#__PURE__*/React.createElement("div", {
+        className: cssClasses.HANDLE_DOT,
+        style: Object.assign(Object.assign({}, ((_g = this.props.handleDot[1]) === null || _g === void 0 ? void 0 : _g.size) ? {
+          width: this.props.handleDot[1].size,
+          height: this.props.handleDot[1].size
+        } : {}), ((_h = this.props.handleDot[1]) === null || _h === void 0 ? void 0 : _h.color) ? {
+          backgroundColor: this.props.handleDot[1].color
+        } : {})
       }))));
       return handleContents;
     };
@@ -644,7 +669,14 @@ Slider.propTypes = {
   showBoundary: PropTypes.bool,
   railStyle: PropTypes.object,
   verticalReverse: PropTypes.bool,
-  getAriaValueText: PropTypes.func
+  getAriaValueText: PropTypes.func,
+  handleDot: PropTypes.oneOfType([PropTypes.shape({
+    size: PropTypes.string,
+    color: PropTypes.string
+  }), PropTypes.arrayOf(PropTypes.shape({
+    size: PropTypes.string,
+    color: PropTypes.string
+  }))])
 };
 Slider.defaultProps = {
   // allowClear: false,

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

@@ -1,34 +1,50 @@
 import React from 'react';
 import { DropdownProps } from '../dropdown';
-import { Trigger, Position } from '../tooltip';
 import { FilterIcon, Filter, OnFilterDropdownVisibleChange, RenderFilterDropdownItem } from './interface';
-export interface ColumnFilterProps {
+export default function ColumnFilter(props?: ColumnFilterProps): React.ReactElement;
+export interface ColumnFilterProps extends Omit<RenderDropdownProps, keyof RenderFilterDropdownProps> {
     prefixCls?: string;
     filteredValue?: any[];
     filterIcon?: FilterIcon;
     filterDropdown?: React.ReactElement;
-    renderFilterDropdown?: (props: RenderDropdownProps, options: {
-        iconElem: React.ReactNode;
-    }) => React.ReactElement;
-    filterDropdownProps?: DropdownProps;
-    onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
-    onSelect?: (data: OnSelectData) => void;
-}
-export default function ColumnFilter(props?: ColumnFilterProps): React.ReactElement;
-export interface OnSelectData {
-    value: any;
-    filteredValue: any;
-    included: boolean;
-    domEvent: React.MouseEvent<HTMLElement>;
+    filterDropdownProps?: FilterDropdownProps;
+    filters?: Filter[];
 }
-export interface RenderDropdownProps {
+export interface RenderDropdownProps extends FilterDropdownProps, RenderFilterDropdownProps {
     filterMultiple?: boolean;
     filters?: Filter[];
     filteredValue?: any[];
     filterDropdownVisible?: boolean;
     onSelect?: (data: OnSelectData) => void;
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
-    trigger?: Trigger;
-    position?: Position;
+    renderFilterDropdown?: (props?: RenderFilterDropdownProps) => React.ReactNode;
     renderFilterDropdownItem?: RenderFilterDropdownItem;
 }
+export interface FilterDropdownProps extends Omit<DropdownProps, 'render' | 'onVisibleChange'> {
+}
+export interface OnSelectData {
+    value?: any;
+    /** only this value is used now  */
+    filteredValue: any;
+    included?: boolean;
+    domEvent?: React.MouseEvent<HTMLElement>;
+}
+export interface RenderFilterDropdownProps {
+    /** temporary filteredValue  */
+    tempFilteredValue: any[];
+    /** set temporary filteredValue  */
+    setTempFilteredValue: (tempFilteredValue: any[]) => void;
+    /** set tempFilteredValue to filteredValue. You can also pass filteredValue to directly set the filteredValue  */
+    confirm: (props?: {
+        closeDropdown?: boolean;
+        filteredValue?: any[];
+    }) => void;
+    /** clear tempFilteredValue and filteredValue  */
+    clear: (props?: {
+        closeDropdown?: boolean;
+    }) => void;
+    /** close dropdown  */
+    close: () => void;
+    /** column filters  */
+    filters?: RenderDropdownProps['filters'];
+}