@arco-design/mobile-react 2.23.0 → 2.24.1

package/umd/_helpers/render.d.ts

@@ -1,10 +1,12 @@
 import { FunctionComponent } from 'react';
 import { RootType } from './react-dom';
+import { GlobalContextParams } from '../context-provider';
 export declare class ReactDOMRender {
     root: RootType | undefined;
     app: FunctionComponent;
     container: Element | DocumentFragment;
-    constructor(app: FunctionComponent, container: Element | DocumentFragment);
+    context: GlobalContextParams | undefined;
+    constructor(app: FunctionComponent, container: Element | DocumentFragment, context?: GlobalContextParams);
     render: (props: any) => void;
     unmount: () => void;
 }

package/umd/_helpers/render.js

@@ -1,38 +1,43 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "./react-dom"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "./react-dom"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("./react-dom"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("./react-dom"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.reactDom);
+    factory(mod.exports, global._extends, global.react, global.reactDom);
     global.render = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactDom) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
   _exports.ReactDOMRender = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireDefault(_react);
 
-  var ReactDOMRender = function ReactDOMRender(app, container) {
+  var ReactDOMRender = function ReactDOMRender(app, container, context) {
     var _this = this;
 
     this.root = void 0;
     this.app = void 0;
     this.container = void 0;
+    this.context = void 0;
 
     this.render = function (props) {
       var CustomApp = _this.app;
+      var propsWithContext = (0, _extends2.default)({}, props, {
+        context: _this.context
+      });
 
       if (_this.root) {
-        _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, props));
+        _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, propsWithContext));
       } else {
-        _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, props), _this.container);
+        _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, propsWithContext), _this.container);
       }
     };
 
@@ -45,6 +50,7 @@
 
     this.app = app;
     this.container = container;
+    this.context = context;
   };
 
   _exports.ReactDOMRender = ReactDOMRender;

package/umd/action-sheet/index.d.ts

@@ -72,7 +72,7 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
      */
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -86,18 +86,18 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<ActionSheetProps & React.RefAttributes<ActionSheetRef>, "title" | "ref" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<ActionSheetProps & React.RefAttributes<ActionSheetRef>, "title" | "ref" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };
 };
 /**
  * 动作面板组件
- * @en ActionSheet Commponent
+ * @en ActionSheet Component
  * @type 反馈
  * @type_en FeedBack
  * @name 动作面板

package/umd/action-sheet/index.js

@@ -109,17 +109,18 @@
       open: (0, _methods.open)(Comp)
     };
   }
+
+  var ActionSheetWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(ActionSheet);
   /**
    * 动作面板组件
-   * @en ActionSheet Commponent
+   * @en ActionSheet Component
    * @type 反馈
    * @type_en FeedBack
    * @name 动作面板
    * @name_en ActionSheet
    */
 
-
-  var _default = (0, _mobileUtils.componentWrapper)(ActionSheet, methodsGenerator(ActionSheet));
+  var _default = (0, _mobileUtils.componentWrapper)(ActionSheet, methodsGenerator(ActionSheetWithGlobalContext));
 
   _exports.default = _default;
 });

package/umd/action-sheet/methods.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OpenBaseProps } from '../masking/methods';
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
     key?: string | undefined;
-}) => {
+}, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;

package/umd/badge/style/css/index.css

@@ -9,8 +9,7 @@
             transform: scale(1);
     opacity: 1;
   }
-}
-@keyframes scale-on {
+}@keyframes scale-on {
   0% {
     -webkit-transform: scale(0);
             transform: scale(0);

package/umd/checkbox/checkbox.js

@@ -154,6 +154,10 @@
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "checkbox",
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        tabIndex: 0,
         ref: domRef,
         style: style,
         className: (0, _mobileUtils.cls)(className, prefixCls + "-" + componentName, "shape-" + shape, {

package/umd/circle-progress/index.js

@@ -169,6 +169,10 @@
     function renderCircleProgress(_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": percentage,
         className: (0, _mobileUtils.cls)(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
         style: (0, _extends2.default)({
           width: circleSize,

package/umd/context-provider/index.d.ts

@@ -41,6 +41,9 @@ export declare const GlobalContext: React.Context<GlobalContextParams>;
 export interface ContextProviderProps extends GlobalContextParams {
     children: React.ReactNode;
 }
+export declare type WithGlobalContext<T> = T & {
+    context?: GlobalContextParams;
+};
 /**
  * 全局数据控制组件，用于替换全局数据。
  * @en Global data control component, used to replace global data.
@@ -51,3 +54,4 @@ export interface ContextProviderProps extends GlobalContextParams {
  */
 export default function ContextProvider(props: ContextProviderProps): JSX.Element;
 export declare const ContextLayout: React.Consumer<GlobalContextParams>;
+export declare function CompWithGlobalContext<P extends JSX.IntrinsicAttributes>(Component: React.FunctionComponent<P>): (props: WithGlobalContext<P>) => JSX.Element;

package/umd/context-provider/index.js

@@ -16,13 +16,15 @@
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
+  _exports.CompWithGlobalContext = CompWithGlobalContext;
   _exports.GlobalContext = _exports.ContextLayout = void 0;
   _exports.default = ContextProvider;
   _exports.defaultContext = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
   _react = _interopRequireWildcard(_react);
-  var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"];
+  var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"],
+      _excluded2 = ["context"];
 
   function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -108,4 +110,14 @@
 
   var ContextLayout = GlobalContext.Consumer;
   _exports.ContextLayout = ContextLayout;
+
+  function CompWithGlobalContext(Component) {
+    return function (props) {
+      var propsContext = props.context,
+          others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+      return /*#__PURE__*/_react.default.createElement(ContextLayout, null, function (context) {
+        return /*#__PURE__*/_react.default.createElement(ContextProvider, (0, _extends2.default)({}, context, propsContext), /*#__PURE__*/_react.default.createElement(Component, others));
+      });
+    };
+  }
 });

package/umd/dialog/index.d.ts

@@ -137,7 +137,7 @@ export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptio
      * @param {AlertOptions & DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
      */
-    alert: (config: A) => {
+    alert: (config: A, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: A) => void;
     };
@@ -147,7 +147,7 @@ export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptio
      * @param {ConfirmOptions & AlertOptions} config Configuration
      * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
      */
-    confirm: (config: C) => {
+    confirm: (config: C, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: C) => void;
     };
@@ -159,7 +159,7 @@ export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptio
      */
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -173,7 +173,7 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {AlertOptions & DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
      */
-    alert: (config: AlertOptions) => {
+    alert: (config: AlertOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: AlertOptions) => void;
     };
@@ -183,7 +183,7 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {ConfirmOptions & AlertOptions} config Configuration
      * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
      */
-    confirm: (config: ConfirmOptions) => {
+    confirm: (config: ConfirmOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: ConfirmOptions) => void;
     };
@@ -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<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "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<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "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/umd/dialog/index.js

@@ -171,6 +171,8 @@
       open: (0, _methods.open)(Comp)
     };
   }
+
+  var DialogWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(Dialog);
   /**
    * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
    * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -180,8 +182,7 @@
    * @name_en Dialog
    */
 
-
-  var _default = (0, _mobileUtils.componentWrapper)(Dialog, methodsGenerator(Dialog));
+  var _default = (0, _mobileUtils.componentWrapper)(Dialog, methodsGenerator(DialogWithGlobalContext));
 
   _exports.default = _default;
 });

package/umd/dialog/methods.d.ts

@@ -2,17 +2,17 @@ import React from 'react';
 import { OpenBaseProps } from '../masking/methods';
 export declare function normalizeAlert<AlertOptions, P>(config: AlertOptions): P;
 export declare function normalizeConfirm<ConfirmOptions, P>(config: ConfirmOptions): P;
-export declare function alert<AlertOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: AlertOptions) => {
+export declare function alert<AlertOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: AlertOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: AlertOptions) => void;
 };
-export declare function confirm<ConfirmOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: ConfirmOptions) => {
+export declare function confirm<ConfirmOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: ConfirmOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: ConfirmOptions) => void;
 };
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
     key?: string | undefined;
-}) => {
+}, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;

package/umd/dialog/style/css/index.css

@@ -9,8 +9,7 @@
     -webkit-transform: scale(1);
             transform: scale(1);
   }
-}
-@keyframes fade-scale-on {
+}@keyframes fade-scale-on {
   0% {
     opacity: 0;
     -webkit-transform: scale(0.5);

package/umd/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/umd/ellipsis/components/js-ellipsis.js

@@ -229,7 +229,20 @@
     }, /*#__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/umd/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/umd/ellipsis/components/native-ellipsis.js

@@ -25,8 +25,10 @@
         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", {
@@ -45,7 +47,10 @@
     }) : /*#__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/umd/ellipsis/demo/style/css/mobile.css

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

package/umd/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/umd/ellipsis/index.js

@@ -53,15 +53,17 @@
         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;
 
@@ -81,7 +83,9 @@
         dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
         text: text,
         maxLine: maxLine,
+        ellipsisNode: ellipsisNode,
         collapseNode: collapseNode,
+        onEllipsisNodeClick: onEllipsisNodeClick,
         onCollapseNodeClick: onCollapseNodeClick
       }) : /*#__PURE__*/_react.default.createElement(_jsEllipsis.default, {
         ref: jsEllipsisRef,

package/umd/ellipsis/style/css/index.css

@@ -1,10 +1,23 @@
 .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-ellipsis {
+  display: none;
 }

package/umd/ellipsis/style/index.less

@@ -3,11 +3,25 @@
 .@{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-ellipsis {
+        display: none;
     }
 }