@douyinfe/semi-ui 2.48.0 → 2.49.0

package/lib/es/image/previewInner.js

@@ -14,14 +14,6 @@ import PreviewInnerFoundation from '@douyinfe/semi-foundation/lib/es/image/previ
 import { PreviewContext } from "./previewContext";
 import { getScrollbarWidth } from "../_utils";
 const prefixCls = cssClasses.PREFIX;
-let startMouseDown = {
-  x: 0,
-  y: 0
-};
-let mouseActiveTime = null;
-let stopTiming = false;
-let timer = null;
-// let bodyOverflowValue = document.body.style.overflow;
 export default class PreviewInner extends BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -105,30 +97,22 @@ export default class PreviewInner extends BaseComponent {
       unregisterKeyDownListener: () => {
         window && window.removeEventListener("keydown", this.handleKeyDown);
       },
-      getMouseActiveTime: () => {
-        return mouseActiveTime;
-      },
-      getStopTiming: () => {
-        return stopTiming;
-      },
-      setStopTiming: value => {
-        stopTiming = value;
-      },
-      getStartMouseDown: () => {
-        return startMouseDown;
-      },
-      setStartMouseDown: (x, y) => {
-        startMouseDown = {
-          x,
-          y
-        };
-      },
-      setMouseActiveTime: time => {
-        mouseActiveTime = time;
-      },
       getSetDownloadFunc: () => {
         var _a, _b;
         return (_b = (_a = this.context) === null || _a === void 0 ? void 0 : _a.setDownloadName) !== null && _b !== void 0 ? _b : this.props.setDownloadName;
+      },
+      isValidTarget: e => {
+        const headerDom = this.headerRef && this.headerRef.current;
+        const footerDom = this.footerRef && this.footerRef.current;
+        const leftIconDom = this.leftIconRef && this.leftIconRef.current;
+        const rightIconDom = this.rightIconRef && this.rightIconRef.current;
+        const target = e.target;
+        if (headerDom && headerDom.contains(target) || footerDom && footerDom.contains(target) || leftIconDom && leftIconDom.contains(target) || rightIconDom && rightIconDom.contains(target)) {
+          // Move in the operation area, return false
+          return false;
+        }
+        // Move in the preview area except the operation area, return true
+        return true;
       }
     });
   }
@@ -161,9 +145,6 @@ export default class PreviewInner extends BaseComponent {
     this.handleMouseMove = e => {
       this.foundation.handleMouseMove(e);
     };
-    this.handleMouseEvent = (e, event) => {
-      this.foundation.handleMouseMoveEvent(e, event);
-    };
     this.handleKeyDown = e => {
       this.foundation.handleKeyDown(e);
     };
@@ -176,6 +157,31 @@ export default class PreviewInner extends BaseComponent {
     this.handleMouseDown = e => {
       this.foundation.handleMouseDown(e);
     };
+    this.handleWheel = e => {
+      this.foundation.handleWheel(e);
+    };
+    // 为什么通过 addEventListener 注册 wheel 事件而不是使用 onWheel 事件？
+    // 因为 Passive Event Listeners（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners）
+    // Passive Event Listeners 是一种优化技术，用于提高滚动性能。在默认情况下，浏览器会假设事件的监听器不会调用 
+    // preventDefault() 方法来阻止事件的默认行为，从而允许进行一些优化操作，例如滚动平滑。
+    // 对于 Image 而言，如果使用触控板，双指朝不同方向分开放大图片，则需要  preventDefault 防止页面整体放大。
+    // Why register wheel event through addEventListener instead of using onWheel event？
+    // Because of Passive Event Listeners(an optimization technique used to improve scrolling performance. By default, 
+    // the browser will assume that event listeners will not call preventDefault() method to prevent the default behavior of the event, 
+    // allowing some optimization operations such as scroll smoothing.)
+    // For Image, if we use the trackpad and spread your fingers in different directions to enlarge the image, we need to preventDefault
+    // to prevent the page from being enlarged as a whole.
+    this.registryImageWrapRef = ref => {
+      if (this.imageWrapRef) {
+        this.imageWrapRef.removeEventListener("wheel", this.handleWheel);
+      }
+      if (ref) {
+        ref.addEventListener("wheel", this.handleWheel, {
+          passive: false
+        });
+      }
+      this.imageWrapRef = ref;
+    };
     this.state = {
       imgSrc: [],
       imgLoadStatus: new Map(),
@@ -192,6 +198,11 @@ export default class PreviewInner extends BaseComponent {
     this.bodyOverflow = '';
     this.originBodyWidth = '100%';
     this.scrollBarWidth = 0;
+    this.imageWrapRef = null;
+    this.headerRef = /*#__PURE__*/React.createRef();
+    this.footerRef = /*#__PURE__*/React.createRef();
+    this.leftIconRef = /*#__PURE__*/React.createRef();
+    this.rightIconRef = /*#__PURE__*/React.createRef();
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
@@ -207,6 +218,9 @@ export default class PreviewInner extends BaseComponent {
       willUpdateStates.visible = props.visible;
       if (props.visible) {
         willUpdateStates.preloadAfterVisibleChange = true;
+        willUpdateStates.viewerVisible = true;
+        willUpdateStates.rotation = 0;
+        willUpdateStates.ratio = 'adaptation';
       }
     }
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
@@ -225,10 +239,8 @@ export default class PreviewInner extends BaseComponent {
     }
   }
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.visible !== this.props.visible && this.props.visible) {
-      mouseActiveTime = new Date().getTime();
-      timer && clearInterval(timer);
-      timer = setInterval(this.viewVisibleChange, 1000);
+    if (prevProps.src !== this.props.src) {
+      this.foundation.updateTimer();
     }
     // hide => show
     if (!prevProps.visible && this.props.visible) {
@@ -240,7 +252,7 @@ export default class PreviewInner extends BaseComponent {
     }
   }
   componentWillUnmount() {
-    timer && clearInterval(timer);
+    this.foundation.clearTimer();
   }
   isInGroup() {
     return Boolean(this.context && this.context.isGroup);
@@ -305,10 +317,10 @@ export default class PreviewInner extends BaseComponent {
       style: style,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
-      onMouseMove: this.handleMouseMove,
-      onMouseOver: e => this.handleMouseEvent(e.nativeEvent, "over"),
-      onMouseOut: e => this.handleMouseEvent(e.nativeEvent, "out")
+      ref: this.registryImageWrapRef,
+      onMouseMove: this.handleMouseMove
     }, /*#__PURE__*/React.createElement(Header, {
+      ref: this.headerRef,
       className: cls(hideViewerCls),
       onClose: this.handlePreviewClose,
       renderHeader: renderHeader
@@ -319,7 +331,6 @@ export default class PreviewInner extends BaseComponent {
       setRatio: this.handleAdjustRatio,
       zoom: zoom,
       ratio: ratio,
-      zoomStep: zoomStep,
       rotation: rotation,
       crossOrigin: crossOrigin,
       onError: this.onImageError,
@@ -328,6 +339,7 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
+      ref: this.leftIconRef,
       className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-prev`, hideViewerCls),
       onClick: () => this.handleSwitchImage("prev")
     }, /*#__PURE__*/React.createElement(IconArrowLeft, {
@@ -336,11 +348,13 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
+      ref: this.rightIconRef,
       className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-next`, hideViewerCls),
       onClick: () => this.handleSwitchImage("next")
     }, /*#__PURE__*/React.createElement(IconArrowRight, {
       size: "large"
     })), /*#__PURE__*/React.createElement(Footer, {
+      forwardRef: this.footerRef,
       className: hideViewerCls,
       totalNum: total,
       curPage: currentIndex + 1,
@@ -398,6 +412,8 @@ PreviewInner.propTypes = {
   disableDownload: PropTypes.bool,
   viewerVisibleDelay: PropTypes.number,
   zIndex: PropTypes.number,
+  maxZoom: PropTypes.number,
+  minZoom: PropTypes.number,
   renderHeader: PropTypes.func,
   renderPreviewMenu: PropTypes.func,
   getPopupContainer: PropTypes.func,
@@ -422,5 +438,7 @@ PreviewInner.defaultProps = {
   preLoadGap: 2,
   zIndex: 1000,
   maskClosable: true,
-  viewerVisibleDelay: 10000
+  viewerVisibleDelay: 10000,
+  maxZoom: 5,
+  minZoom: 0.1
 };

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

@@ -59,7 +59,7 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         getContainerContext: PropTypes.Requireable<(...args: any[]) => any>;
         maskFixed: PropTypes.Requireable<boolean>;
-        closeIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        closeIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         closeOnEsc: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         keepDOM: PropTypes.Requireable<boolean>;

package/lib/es/modal/Modal.js

@@ -293,7 +293,7 @@ Modal.propTypes = {
   getPopupContainer: PropTypes.func,
   getContainerContext: PropTypes.func,
   maskFixed: PropTypes.bool,
-  closeIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  closeIcon: PropTypes.node,
   closeOnEsc: PropTypes.bool,
   size: PropTypes.oneOf(strings.SIZE),
   keepDOM: PropTypes.bool,

package/lib/es/navigation/SubNav.d.ts

@@ -53,7 +53,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         /**
          * Icon name on the left
          */
-        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Maximum height (for animation)
          */

package/lib/es/navigation/SubNav.js

@@ -346,7 +346,7 @@ SubNav.propTypes = {
   /**
    * Icon name on the left
    */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node,
   /**
    * Maximum height (for animation)
    */

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

@@ -46,7 +46,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         prefixCls: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         okText: PropTypes.Requireable<string>;
         okType: PropTypes.Requireable<string>;
         cancelText: PropTypes.Requireable<string>;

package/lib/es/popconfirm/index.js

@@ -233,7 +233,7 @@ Popconfirm.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.object,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node,
   okText: PropTypes.string,
   okType: PropTypes.string,
   cancelText: PropTypes.string,

package/lib/es/sideSheet/SideSheetContent.d.ts

@@ -1,8 +1,9 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { SideSheetProps } from '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheetFoundation';
 export interface SideSheetContentProps {
     onClose?: (e: React.MouseEvent) => void;
+    closeIcon?: ReactNode;
     mask?: boolean;
     maskStyle?: CSSProperties;
     maskClosable?: boolean;
@@ -30,6 +31,7 @@ export interface SideSheetContentProps {
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
     static propTypes: {
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        closeIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         onClose: (...args: any[]) => void;

package/lib/es/sideSheet/SideSheetContent.js

@@ -59,7 +59,8 @@ export default class SideSheetContent extends React.PureComponent {
     const {
       title,
       closable,
-      headerStyle
+      headerStyle,
+      closeIcon
     } = this.props;
     let header, closer;
     if (title) {
@@ -69,12 +70,13 @@ export default class SideSheetContent extends React.PureComponent {
       }, this.props.title);
     }
     if (closable) {
+      const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, null);
       closer = /*#__PURE__*/React.createElement(Button, {
         className: `${prefixCls}-close`,
         key: "close-btn",
         onClick: this.close,
         type: "tertiary",
-        icon: /*#__PURE__*/React.createElement(IconClose, null),
+        icon: iconType,
         theme: "borderless",
         size: "small"
       });
@@ -160,7 +162,8 @@ export default class SideSheetContent extends React.PureComponent {
   }
 }
 SideSheetContent.propTypes = {
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  closeIcon: PropTypes.node
 };
 SideSheetContent.defaultProps = {
   onClose: _noop

package/lib/es/table/Body/BaseRow.d.ts

@@ -43,6 +43,8 @@ export interface BaseRowProps {
     style?: React.CSSProperties;
     virtualized?: Virtualized;
     visible: boolean;
+    /** whether display none */
+    displayNone?: boolean;
 }
 export default class TableRow extends BaseComponent<BaseRowProps, Record<string, any>> {
     static propTypes: {
@@ -55,6 +57,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         expandIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         expandableRow: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
+        displayNone: PropTypes.Requireable<boolean>;
         expandedRow: PropTypes.Requireable<boolean>;
         fixed: PropTypes.Requireable<NonNullable<string | boolean>>;
         height: PropTypes.Requireable<NonNullable<string | number>>;

package/lib/es/table/Body/BaseRow.js

@@ -212,6 +212,7 @@ export default class TableRow extends BaseComponent {
       record,
       hovered,
       expanded,
+      displayNone,
       expandableRow,
       level,
       expandedRow,
@@ -229,7 +230,8 @@ export default class TableRow extends BaseComponent {
     const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? replaceClassName : classnames(className, `${prefixCls}-row`, {
       [`${prefixCls}-row-selected`]: selected,
       [`${prefixCls}-row-expanded`]: expanded,
-      [`${prefixCls}-row-hovered`]: hovered
+      [`${prefixCls}-row-hovered`]: hovered,
+      [`${prefixCls}-row-hidden`]: displayNone
     }, customClassName);
     const ariaProps = {};
     if (typeof index === 'number') {
@@ -270,6 +272,7 @@ TableRow.propTypes = {
   expandIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.node]),
   expandableRow: PropTypes.bool,
   expanded: PropTypes.bool,
+  displayNone: PropTypes.bool,
   expandedRow: PropTypes.bool,
   fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/lib/es/table/Body/ExpandedRow.d.ts

@@ -23,6 +23,7 @@ export interface TableExpandedRowProps {
     store?: Store;
     style?: React.CSSProperties;
     virtualized?: Virtualized;
+    displayNone?: boolean;
 }
 /**
  * Render expanded row

package/lib/es/table/Body/ExpandedRow.js

@@ -36,7 +36,8 @@ export default class TableExpandedRow extends PureComponent {
       style,
       virtualized,
       indentSize,
-      cellWidths
+      cellWidths,
+      displayNone
     } = this.props;
     const {
       tableWidth,
@@ -95,7 +96,8 @@ export default class TableExpandedRow extends PureComponent {
       store: store,
       virtualized: virtualized,
       indentSize: indentSize,
-      cellWidths: baseRowCellWidths
+      cellWidths: baseRowCellWidths,
+      displayNone: displayNone
     });
   }
 }

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

@@ -32,6 +32,7 @@ export interface BodyProps extends BaseProps {
     renderExpandIcon: (record: Record<string, any>, isNested: boolean) => ReactNode | null;
     headerRef?: React.MutableRefObject<HTMLDivElement> | ((instance: any) => void);
     onScroll?: VirtualizedOnScroll;
+    keepDOM?: boolean;
 }
 export interface BodyState {
     virtualizedData?: Array<FlattenData | GroupFlattenData>;
@@ -61,6 +62,8 @@ export interface RenderExpandedRowProps {
     rowKey?: RowKey<Record<string, any>>;
     virtualized?: Virtualized;
     level?: number;
+    keepDOM?: boolean;
+    displayNone?: boolean;
 }
 export interface RenderSectionRowProps {
     dataSource?: Record<string, any>[];

package/lib/es/table/Body/index.js

@@ -301,7 +301,8 @@ class Body extends BaseComponent {
         expanded,
         index,
         rowKey,
-        virtualized
+        virtualized,
+        displayNone
       } = props;
       let key = getRecordKey(record, rowKey);
       if (key == null) {
@@ -327,7 +328,8 @@ class Body extends BaseComponent {
         index: index,
         virtualized: virtualized,
         key: genExpandedRowKey(key),
-        cellWidths: _this.cellWidths
+        cellWidths: _this.cellWidths,
+        displayNone: displayNone
       });
     };
     /**
@@ -339,7 +341,8 @@ class Body extends BaseComponent {
         groups,
         dataSource: data,
         rowKey,
-        expandedRowKeys
+        expandedRowKeys,
+        keepDOM
       } = this.props;
       const {
         flattenedColumns
@@ -374,7 +377,7 @@ class Body extends BaseComponent {
           expanded
         })));
         // Render the grouped content when the group is expanded
-        if (expanded) {
+        if (expanded || keepDOM) {
           const dataInGroup = [];
           group.forEach(recordKey => {
             const record = getRecord(data, recordKey, rowKey);
@@ -385,7 +388,7 @@ class Body extends BaseComponent {
           /**
            * Render the contents of the group row
            */
-          renderedRows.push(this.renderBodyRows(dataInGroup));
+          renderedRows.push(this.renderBodyRows(dataInGroup, undefined, [], !expanded));
         }
       });
       return renderedRows;
@@ -629,12 +632,14 @@ class Body extends BaseComponent {
     let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     let renderedRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    let displayNone = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     const {
       rowKey,
       expandedRowRender,
       expandedRowKeys,
       childrenRecordName,
-      rowExpandable
+      rowExpandable,
+      keepDOM
     } = this.props;
     const hasExpandedRowRender = typeof expandedRowRender === 'function';
     const expandBtnShouldInRow = this.state.cachedExpandBtnShouldInRow;
@@ -651,6 +656,7 @@ class Body extends BaseComponent {
       renderedRows.push(this.renderBaseRow(Object.assign(Object.assign({}, this.props), {
         columns: flattenedColumns,
         expandBtnShouldInRow,
+        displayNone,
         record,
         key,
         level,
@@ -658,13 +664,15 @@ class Body extends BaseComponent {
       })));
       // render expand row
       const expanded = isExpanded(expandedRowKeys, key);
-      if (hasExpandedRowRender && rowExpandable && rowExpandable(record) && expanded) {
+      const shouldRenderExpandedRows = expanded || keepDOM;
+      if (hasExpandedRowRender && rowExpandable && rowExpandable(record) && shouldRenderExpandedRows) {
         const currentExpandRow = this.renderExpandedRow(Object.assign(Object.assign({}, this.props), {
           columns: flattenedColumns,
           level,
           index,
           record,
-          expanded
+          expanded,
+          displayNone: displayNone || !expanded
         }));
         /**
           * If expandedRowRender returns falsy, this expanded row will not be rendered
@@ -675,8 +683,8 @@ class Body extends BaseComponent {
         }
       }
       // render tree data
-      if (recordHasChildren && expanded) {
-        const nestedRows = this.renderBodyRows(recordChildren, level + 1);
+      if (recordHasChildren && shouldRenderExpandedRows) {
+        const nestedRows = this.renderBodyRows(recordChildren, level + 1, [], displayNone || !expanded);
         renderedRows.push(...nestedRows);
       }
     });

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

@@ -34,6 +34,7 @@ export interface TableProps<RecordType extends Record<string, any> = any> extend
     hideExpandedColumn?: boolean;
     id?: string;
     indentSize?: number;
+    keepDOM?: boolean;
     loading?: boolean;
     pagination?: TablePagination;
     prefixCls?: string;

package/lib/es/timePicker/TimePicker.d.ts

@@ -63,6 +63,7 @@ export type TimePickerProps = {
     secondStep?: number;
     showClear?: boolean;
     size?: InputSize;
+    stopPropagation: boolean;
     style?: React.CSSProperties;
     timeZone?: string | number;
     triggerRender?: (props?: any) => React.ReactNode;
@@ -133,6 +134,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
+        stopPropagation: PropTypes.Requireable<boolean>;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
@@ -166,6 +168,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         prefixCls: string;
         inputReadOnly: boolean;
         style: {};
+        stopPropagation: boolean;
         className: string;
         popupClassName: string;
         popupStyle: {

package/lib/es/timePicker/TimePicker.js

@@ -262,9 +262,10 @@ export default class TimePicker extends BaseComponent {
         scrollItemProps,
         triggerRender,
         motion,
-        autoAdjustOverflow
+        autoAdjustOverflow,
+        stopPropagation
       } = _a,
-      rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "dropdownMargin", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
+      rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "dropdownMargin", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow", "stopPropagation"]);
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
     const useCustomTrigger = typeof triggerRender === 'function';
@@ -322,7 +323,8 @@ export default class TimePicker extends BaseComponent {
       visible: disabled ? false : Boolean(open),
       motion: motion,
       margin: dropdownMargin,
-      autoAdjustOverflow: autoAdjustOverflow
+      autoAdjustOverflow: autoAdjustOverflow,
+      stopPropagation: stopPropagation
     }, useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
       triggerRender: triggerRender,
       disabled: disabled,
@@ -377,6 +379,7 @@ TimePicker.propTypes = Object.assign(Object.assign({
   focusOnOpen: PropTypes.bool,
   autoFocus: PropTypes.bool,
   size: PropTypes.oneOf(strings.SIZE),
+  stopPropagation: PropTypes.bool,
   panels: PropTypes.arrayOf(PropTypes.shape(PanelShape)),
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -410,6 +413,7 @@ TimePicker.defaultProps = Object.assign({
   prefixCls: cssClasses.PREFIX,
   inputReadOnly: false,
   style: {},
+  stopPropagation: true,
   className: '',
   popupClassName: '',
   popupStyle: {

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

@@ -50,6 +50,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         focusOnOpen: import("prop-types").Requireable<boolean>;
         autoFocus: import("prop-types").Requireable<boolean>;
         size: import("prop-types").Requireable<"default" | "small" | "large">;
+        stopPropagation: import("prop-types").Requireable<boolean>;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
             panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
@@ -83,6 +84,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         prefixCls: string;
         inputReadOnly: boolean;
         style: {};
+        stopPropagation: boolean;
         className: string;
         popupClassName: string;
         popupStyle: {

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

@@ -32,7 +32,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
         showClose: PropTypes.Requireable<boolean>;
         stack: PropTypes.Requireable<boolean>;
         stackExpanded: PropTypes.Requireable<boolean>;
-        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         direction: PropTypes.Requireable<string>;
     };
     static defaultProps: {

package/lib/es/toast/toast.js

@@ -150,7 +150,7 @@ Toast.propTypes = {
   showClose: PropTypes.bool,
   stack: PropTypes.bool,
   stackExpanded: PropTypes.bool,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node,
   direction: PropTypes.oneOf(strings.directions)
 };
 Toast.defaultProps = {

package/lib/es/typography/util.js

@@ -42,7 +42,6 @@ const getRenderText = function (originEle, rows) {
   const lineHeight = pxToNumber(originStyle.lineHeight);
   const maxHeight = Math.round(lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
   // Set shadow
-  const maxWidth = parseInt(originStyle.width);
   ellipsisContainer.setAttribute('style', originCSS);
   ellipsisContainer.style.position = 'fixed';
   ellipsisContainer.style.left = '0';
@@ -54,12 +53,12 @@ const getRenderText = function (originEle, rows) {
   ellipsisContainer.style.webkitLineClamp = 'none';
   // Render fake container
   ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer);
-  // Check if ellipsis in measure div is height enough for content
+  // Check if ellipsis in measure div is enough for content
   function inRange() {
-    if (originStyle.whiteSpace === 'nowrap') {
-      return ellipsisContainer.scrollWidth <= maxWidth;
-    }
-    return ellipsisContainer.scrollHeight < maxHeight;
+    // If content does not wrap due to line break strategy, width should be judged to determine whether it's in range
+    const widthInRange = ellipsisContainer.scrollWidth <= ellipsisContainer.offsetWidth;
+    const heightInRange = ellipsisContainer.scrollHeight < maxHeight;
+    return rows === 1 ? widthInRange && heightInRange : heightInRange;
   }
   // ========================= Find match ellipsis content =========================
   // Create origin content holder