@arco-design/mobile-react 2.24.0 → 2.24.2

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.24.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.24.1...@arco-design/mobile-react@2.24.2) (2023-01-10)
+
+
+### Bug Fixes
+
+*  `Ellipsis` innerHTML keep wrap ([#80](https://github.com/arco-design/arco-design-mobile/issues/80)) ([29afadc](https://github.com/arco-design/arco-design-mobile/commit/29afadc571bba16fd2b8641622de1f2d0fbf5ba4))
+
+
+
+
+
+## [2.24.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.24.0...@arco-design/mobile-react@2.24.1) (2023-01-04)
+
+
+### Bug Fixes
+
+* `Ellipsis` support floatEllipsisNode ([#76](https://github.com/arco-design/arco-design-mobile/issues/76)) ([cc8e3d6](https://github.com/arco-design/arco-design-mobile/commit/cc8e3d6df1eec5a528a47c255c49ca94a326ca18))
+
+
+
+
+
 # [2.24.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.23.0...@arco-design/mobile-react@2.24.0) (2022-12-20)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.23.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.23.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.24.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.24.1/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.23.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.23.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.24.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.24.1/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/dialog/index.d.ts

@@ -193,11 +193,11 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/ellipsis/components/js-ellipsis.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-import { JsEllipsisProps, JsEllipsisRef } from '../type';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<JsEllipsisProps, "text" | "ellipsis" | "maxHeight" | "prefixCls" | "ellipsisNode" | "collapseNode" | "endExcludes" | "reflowOnResize" | "onReflow" | "onEllipsisNodeClick" | "onCollapseNodeClick" | "maxLine" | "dangerouslyUseInnerHTML"> & React.RefAttributes<JsEllipsisRef>>>;
+import { JsEllipsisRef } from '../type';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("../type").EllipsisBaseProps & {
+    prefixCls: string;
+} & Pick<import("../type").EllipsisProps, "maxHeight" | "endExcludes" | "reflowOnResize" | "onReflow"> & React.RefAttributes<JsEllipsisRef>>>;
 export default _default;

package/cjs/ellipsis/components/js-ellipsis.js

@@ -156,6 +156,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     if (dangerouslyUseInnerHTML) {
       textRef.current.innerHTML = text;
+      textRef.current.classList.add(prefixCls + "-js-content-text-pre");
     } else {
       textRef.current.innerText = text;
     }
@@ -164,6 +165,8 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return;
     }
 
+    textRef.current.classList.remove(prefixCls + "-js-content-text-pre");
+
     var _domRef$current$getBo = domRef.current.getBoundingClientRect(),
         height = _domRef$current$getBo.height;
 
@@ -220,7 +223,20 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     ref: textRef,
     className: prefixCls + "-js-content"
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }, dangerouslyUseInnerHTML ? /*#__PURE__*/_react.default.createElement("span", {
+    className: prefixCls + "-js-content-initial",
+    style: {
+      WebkitLineClamp: maxLine
+    },
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: prefixCls + "-js-content-initial",
+    style: {
+      WebkitLineClamp: maxLine
+    }
+  }, text)), /*#__PURE__*/_react.default.createElement("span", {
     ref: ellipsisRef,
     className: prefixCls + "-js-content-ellipsis",
     onClick: onEllipsisNodeClick

package/cjs/ellipsis/components/native-ellipsis.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { NativeEllipsisProps } from '../type';
-declare function NativeEllipsis({ prefixCls, ellipsis, dangerouslyUseInnerHTML, text, maxLine, collapseNode, onCollapseNodeClick, }: NativeEllipsisProps): JSX.Element;
+declare function NativeEllipsis({ prefixCls, ellipsis, dangerouslyUseInnerHTML, text, maxLine, ellipsisNode, collapseNode, onEllipsisNodeClick, onCollapseNodeClick, }: NativeEllipsisProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof NativeEllipsis>;
 export default _default;

package/cjs/ellipsis/components/native-ellipsis.js

@@ -15,8 +15,10 @@ function NativeEllipsis(_ref) {
       dangerouslyUseInnerHTML = _ref.dangerouslyUseInnerHTML,
       text = _ref.text,
       maxLine = _ref.maxLine,
+      ellipsisNode = _ref.ellipsisNode,
       _ref$collapseNode = _ref.collapseNode,
       collapseNode = _ref$collapseNode === void 0 ? '' : _ref$collapseNode,
+      onEllipsisNodeClick = _ref.onEllipsisNodeClick,
       onCollapseNodeClick = _ref.onCollapseNodeClick;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-native", {
@@ -35,7 +37,10 @@ function NativeEllipsis(_ref) {
   }) : /*#__PURE__*/_react.default.createElement("span", null, text), !ellipsis && collapseNode && /*#__PURE__*/_react.default.createElement("span", {
     onClick: onCollapseNodeClick,
     className: (0, _mobileUtils.cls)(prefixCls + "-native-collapse")
-  }, collapseNode));
+  }, collapseNode), ellipsis && (ellipsisNode !== '...' || onEllipsisNodeClick) ? /*#__PURE__*/_react.default.createElement("span", {
+    onClick: onEllipsisNodeClick,
+    className: (0, _mobileUtils.cls)(prefixCls + "-native-ellipsis-node")
+  }, ellipsisNode) : null);
 }
 
 var _default = /*#__PURE__*/_react.default.memo(NativeEllipsis);

package/cjs/ellipsis/demo/style/css/mobile.css

@@ -1,4 +1,4 @@
-#demo-ellipsis {
+#demo-ellipsis .arco-ellipsis {
   line-height: 26px;
 }
 #demo-ellipsis .demo-link,

package/cjs/ellipsis/demo/style/mobile.less

@@ -1,7 +1,9 @@
 @import '../../../../style/mixin.less';
 
 #demo-ellipsis {
-    line-height: 26px;
+    .@{prefix}-ellipsis {
+        line-height: 26px;
+    }
     .demo-link,
     .demo-link-line {
         .use-var(color, primary-color);

package/cjs/ellipsis/index.js

@@ -52,15 +52,17 @@ var Ellipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ellipsisNode = _props$ellipsisNode === void 0 ? '...' : _props$ellipsisNode,
       _props$collapseNode = props.collapseNode,
       collapseNode = _props$collapseNode === void 0 ? '' : _props$collapseNode,
-      onCollapseNodeClick = props.onCollapseNodeClick,
       endExcludes = props.endExcludes,
       _props$reflowOnResize = props.reflowOnResize,
       reflowOnResize = _props$reflowOnResize === void 0 ? false : _props$reflowOnResize,
+      _props$floatEllipsisN = props.floatEllipsisNode,
+      floatEllipsisNode = _props$floatEllipsisN === void 0 ? false : _props$floatEllipsisN,
       onReflow = props.onReflow,
+      onCollapseNodeClick = props.onCollapseNodeClick,
       onEllipsisNodeClick = props.onEllipsisNodeClick;
   var domRef = (0, _react.useRef)(null);
   var jsEllipsisRef = (0, _react.useRef)(null);
-  var useNativeEllipsis = (0, _is.isSupportWebkitLineClamp)() && maxHeight === void 0 && ellipsisNode === '...' && (!endExcludes || endExcludes.length === 0) && !onReflow && !onEllipsisNodeClick;
+  var useNativeEllipsis = (0, _is.isSupportWebkitLineClamp)() && maxHeight === void 0 && (!endExcludes || endExcludes.length === 0) && !onReflow && (floatEllipsisNode || ellipsisNode === '...' && !onEllipsisNodeClick);
   (0, _react.useImperativeHandle)(ref, function () {
     var _jsEllipsisRef$curren;
 
@@ -80,7 +82,9 @@ var Ellipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
       text: text,
       maxLine: maxLine,
+      ellipsisNode: ellipsisNode,
       collapseNode: collapseNode,
+      onEllipsisNodeClick: onEllipsisNodeClick,
       onCollapseNodeClick: onCollapseNodeClick
     }) : /*#__PURE__*/_react.default.createElement(_jsEllipsis.default, {
       ref: jsEllipsisRef,

package/cjs/ellipsis/style/css/index.css

@@ -1,10 +1,26 @@
 .arco-ellipsis {
   font-size:  0.32rem ;
 }
-.arco-ellipsis-native.ellipsis {
+.arco-ellipsis-native.ellipsis,
+.arco-ellipsis-js-content-initial {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
   -webkit-box-orient: vertical;
+  position: relative;
+}
+.arco-ellipsis-native-ellipsis-node {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background:  -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
+  background:  linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
+  padding-left:  20PX ;
+}
+.arco-ellipsis-js-content-text-pre {
+  white-space: pre-line;
+}
+.arco-ellipsis-js-content-ellipsis {
+  display: none;
 }

package/cjs/ellipsis/style/index.less

@@ -3,11 +3,29 @@
 .@{prefix}-ellipsis {
     .use-var(font-size, ellipsis-default-text-size);
 
-    &-native.ellipsis {
+    &-native.ellipsis,
+    &-js-content-initial {
         display: -webkit-box;
         overflow: hidden;
         text-overflow: ellipsis;
         word-break: break-word;
         -webkit-box-orient: vertical;
+        position: relative;
+    }
+
+    &-native-ellipsis-node {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        .use-var(background, ellipsis-float-ellipsis-node-background);
+        .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
+    }
+
+    &-js-content-text-pre {
+        white-space: pre-line;
+    }
+    
+    &-js-content-ellipsis {
+        display: none;
     }
 }

package/cjs/ellipsis/type.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, Ref } from 'react';
-interface BaseProps {
+import { ReactNode } from 'react';
+export interface EllipsisBaseProps {
     /**
      * 需要缩略的文本内容
      * @en Text content to be omitted
@@ -23,68 +23,17 @@ interface BaseProps {
      * @default false
      */
     dangerouslyUseInnerHTML?: boolean;
-}
-export interface NativeEllipsisProps extends BaseProps {
-    /**
-     * className 前缀
-     * @en Prefix classname
-     */
-    prefixCls: string;
-    /**
-     * 自定义收起节点，不为空时文本展开插入文本尾部
-     * @en Customize the collapsed node, when the text is not empty, the text expand Text expand content inserts the end of the text
-     */
-    collapseNode?: ReactNode;
-    /**
-     * 收起节点点击事件
-     * @en Collapse node click event
-     */
-    onCollapseNodeClick?: () => void;
-}
-export interface JsEllipsisRef {
-    dom: HTMLDivElement | null;
-    reflow: () => void;
-}
-export interface JsEllipsisProps extends BaseProps {
-    ref: Ref<HTMLDivElement | null>;
-    /**
-     * className 前缀
-     * @en Prefix classname
-     */
-    prefixCls: string;
-    /**
-     * 最大显示高度，单位 px，优先级高于 maxLine
-     * @en Maximum display height, unit px, priority higher than maxLine
-     */
-    maxHeight?: number;
     /**
      * 自定义缩略符节点，文本缩略时插入文本尾部
-     * @en Customize the ellipsis node, insert the end of the text when the text is omitted
+     * @en Customize the ellipsis node, insert at the end of the text when the text is omitted
      * @default "..."
      */
     ellipsisNode?: ReactNode;
     /**
      * 自定义收起符节点，不为空且文本展开时插入文本尾部
-     * @en Customize the collapse node, if the value is not empty, it will be inserted in the end of the text when the text is expanded
+     * @en Customize the collapse node, when the value is not empty and the text is expanded, the node is  inserted at the end of the text
      */
     collapseNode?: ReactNode;
-    /**
-     * 文本结尾处（缩略符之前）需要过滤掉的字符
-     * @en Characters that need to be filtered out at the end of the text (before abbreviations)
-     * @default []
-     */
-    endExcludes?: string[];
-    /**
-     * 容器大小变化时是否自适应，使用原生缩略时默认为 true
-     * @en Whether to adapt when the container size changes, the default is true when using native ellipsis
-     * @default false
-     */
-    reflowOnResize?: boolean;
-    /**
-     * 文本缩略处理的完成回调
-     * @en Callback when text omission processing is complete
-     */
-    onReflow?: (ellipsis: boolean, text: string) => void;
     /**
      * 缩略节点点击事件
      * @en Ellipsis node click event
@@ -108,7 +57,7 @@ export interface EllipsisRef {
      */
     reflow: (() => void) | undefined;
 }
-export interface EllipsisProps extends BaseProps {
+export interface EllipsisProps extends EllipsisBaseProps {
     /**
      * 自定义类名
      * @en Custom classname
@@ -119,17 +68,6 @@ export interface EllipsisProps extends BaseProps {
      * @en Maximum display height(unit: px), priority higher than maxLine
      */
     maxHeight?: number;
-    /**
-     * 自定义缩略符节点，文本缩略时插入文本尾部
-     * @en Customize the ellipsis node, insert at the end of the text when the text is omitted
-     * @default "..."
-     */
-    ellipsisNode?: ReactNode;
-    /**
-     * 自定义收起符节点，不为空且文本展开时插入文本尾部
-     * @en Customize the collapse node, when the value is not empty and the text is expanded, the node is  inserted at the end of the text
-     */
-    collapseNode?: ReactNode;
     /**
      * 文本结尾处（缩略符之前）需要过滤掉的字符
      * @en Characters to filter out at the end of the text (before the ellipsis)
@@ -142,20 +80,28 @@ export interface EllipsisProps extends BaseProps {
      * @default false
      */
     reflowOnResize?: boolean;
+    /**
+     * 文本缩略时，缩略符节点是否浮在文本右下角（默认加渐变色背景）
+     * @en Whether the abbreviation node is floating in the lower right corner of the text (with a gradient background by default)
+     * @default false
+     */
+    floatEllipsisNode?: boolean;
     /**
      * 文本缩略处理的完成回调
      * @en Callback when text omission processing is complete
      */
     onReflow?: (ellipsis: boolean, text: string) => void;
+}
+export declare type EllipsisCommonProps = EllipsisBaseProps & {
     /**
-     * 缩略节点点击事件
-     * @en Ellipsis node click event
-     */
-    onEllipsisNodeClick?: () => void;
-    /**
-     * 收起节点点击事件
-     * @en Collapse node click event
+     * className 前缀
+     * @en Prefix classname
      */
-    onCollapseNodeClick?: () => void;
+    prefixCls: string;
+};
+export declare type NativeEllipsisProps = EllipsisCommonProps;
+export interface JsEllipsisRef {
+    dom: HTMLDivElement | null;
+    reflow: () => void;
 }
-export {};
+export declare type JsEllipsisProps = EllipsisCommonProps & Pick<EllipsisProps, 'maxHeight' | 'endExcludes' | 'reflowOnResize' | 'onReflow'>;

package/cjs/masking/index.d.ts

@@ -205,11 +205,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
      * @param {MaskingProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/popup/index.d.ts

@@ -66,11 +66,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupProps & React.RefAt
      * @param {PopupProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/popup-swiper/index.d.ts

@@ -76,11 +76,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
      * @param {string | PopupSwiperProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
             key?: string | undefined;
         }) => void; /**
          * 内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件

package/dist/index.js

@@ -12308,6 +12308,7 @@
 
         if (dangerouslyUseInnerHTML) {
           textRef.current.innerHTML = text;
+          textRef.current.classList.add(prefixCls + "-js-content-text-pre");
         } else {
           textRef.current.innerText = text;
         }
@@ -12316,6 +12317,7 @@
           return;
         }
 
+        textRef.current.classList.remove(prefixCls + "-js-content-text-pre");
         var height = domRef.current.getBoundingClientRect().height;
         var max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
 
@@ -12370,7 +12372,20 @@
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         ref: textRef,
         className: prefixCls + "-js-content"
-      }), /*#__PURE__*/React__default["default"].createElement("span", {
+      }, dangerouslyUseInnerHTML ? /*#__PURE__*/React__default["default"].createElement("span", {
+        className: prefixCls + "-js-content-initial",
+        style: {
+          WebkitLineClamp: maxLine
+        },
+        dangerouslySetInnerHTML: {
+          __html: text
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement("span", {
+        className: prefixCls + "-js-content-initial",
+        style: {
+          WebkitLineClamp: maxLine
+        }
+      }, text)), /*#__PURE__*/React__default["default"].createElement("span", {
         ref: ellipsisRef,
         className: prefixCls + "-js-content-ellipsis",
         onClick: onEllipsisNodeClick
@@ -12387,8 +12402,10 @@
           dangerouslyUseInnerHTML = _a.dangerouslyUseInnerHTML,
           text = _a.text,
           maxLine = _a.maxLine,
+          ellipsisNode = _a.ellipsisNode,
           _b = _a.collapseNode,
           collapseNode = _b === void 0 ? '' : _b,
+          onEllipsisNodeClick = _a.onEllipsisNodeClick,
           onCollapseNodeClick = _a.onCollapseNodeClick;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-native", {
@@ -12407,7 +12424,10 @@
       }) : /*#__PURE__*/React__default["default"].createElement("span", null, text), !ellipsis && collapseNode && /*#__PURE__*/React__default["default"].createElement("span", {
         onClick: onCollapseNodeClick,
         className: cls(prefixCls + "-native-collapse")
-      }, collapseNode));
+      }, collapseNode), ellipsis && (ellipsisNode !== '...' || onEllipsisNodeClick) ? /*#__PURE__*/React__default["default"].createElement("span", {
+        onClick: onEllipsisNodeClick,
+        className: cls(prefixCls + "-native-ellipsis-node")
+      }, ellipsisNode) : null);
     }
 
     var NativeEllipsis$1 = /*#__PURE__*/React__default["default"].memo(NativeEllipsis);
@@ -12434,15 +12454,17 @@
           ellipsisNode = _c === void 0 ? '...' : _c,
           _d = props.collapseNode,
           collapseNode = _d === void 0 ? '' : _d,
-          onCollapseNodeClick = props.onCollapseNodeClick,
           endExcludes = props.endExcludes,
           _e = props.reflowOnResize,
           reflowOnResize = _e === void 0 ? false : _e,
+          _f = props.floatEllipsisNode,
+          floatEllipsisNode = _f === void 0 ? false : _f,
           onReflow = props.onReflow,
+          onCollapseNodeClick = props.onCollapseNodeClick,
           onEllipsisNodeClick = props.onEllipsisNodeClick;
       var domRef = React.useRef(null);
       var jsEllipsisRef = React.useRef(null);
-      var useNativeEllipsis = isSupportWebkitLineClamp() && maxHeight === void 0 && ellipsisNode === '...' && (!endExcludes || endExcludes.length === 0) && !onReflow && !onEllipsisNodeClick;
+      var useNativeEllipsis = isSupportWebkitLineClamp() && maxHeight === void 0 && (!endExcludes || endExcludes.length === 0) && !onReflow && (floatEllipsisNode || ellipsisNode === '...' && !onEllipsisNodeClick);
       React.useImperativeHandle(ref, function () {
         var _a;
 
@@ -12462,7 +12484,9 @@
           dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
           text: text,
           maxLine: maxLine,
+          ellipsisNode: ellipsisNode,
           collapseNode: collapseNode,
+          onEllipsisNodeClick: onEllipsisNodeClick,
           onCollapseNodeClick: onCollapseNodeClick
         }) : /*#__PURE__*/React__default["default"].createElement(JsEllipsis$1, {
           ref: jsEllipsisRef,