@arco-design/mobile-react 2.23.0 → 2.24.1

package/esm/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/esm/checkbox/checkbox.js

@@ -136,6 +136,10 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
+      role: "checkbox",
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      tabIndex: 0,
       ref: domRef,
       style: style,
       className: cls(className, prefixCls + "-" + componentName, "shape-" + shape, {

package/esm/circle-progress/index.js

@@ -149,6 +149,10 @@ var CircleProgress = /*#__PURE__*/forwardRef(function (props, ref) {
   function renderCircleProgress(_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percentage,
       className: cls(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
       style: _extends({
         width: circleSize,

package/esm/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/esm/context-provider/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"];
+var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"],
+    _excluded2 = ["context"];
 import React, { createContext, useState, useEffect, useCallback } from 'react';
 import { addCssRules, removeCssStyleDom, defaultLocale } from '@arco-design/mobile-utils';
 export var defaultContext = {
@@ -78,4 +79,14 @@ export default function ContextProvider(props) {
     })
   }, children);
 }
-export var ContextLayout = GlobalContext.Consumer;
+export var ContextLayout = GlobalContext.Consumer;
+export function CompWithGlobalContext(Component) {
+  return function (props) {
+    var propsContext = props.context,
+        others = _objectWithoutPropertiesLoose(props, _excluded2);
+
+    return /*#__PURE__*/React.createElement(ContextLayout, null, function (context) {
+      return /*#__PURE__*/React.createElement(ContextProvider, _extends({}, context, propsContext), /*#__PURE__*/React.createElement(Component, others));
+    });
+  };
+}

package/esm/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/esm/dialog/index.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["close", "children", "title", "footer", "footerType", "renderFooter", "footerCollapseCount", "titleAlign", "contentAlign", "className", "maskClass", "contentClass", "contentStyle", "contentTransitionType", "maskTransitionTimeout", "contentTransitionTimeout", "extra"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { cls, componentWrapper } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
 import Masking from '../masking';
 import { alert, confirm, open } from './methods';
 import { useSystem } from '../_helpers';
@@ -143,6 +143,7 @@ export function methodsGenerator(Comp) {
     open: open(Comp)
   };
 }
+var DialogWithGlobalContext = 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.
@@ -152,4 +153,4 @@ export function methodsGenerator(Comp) {
  * @name_en Dialog
  */
 
-export default componentWrapper(Dialog, methodsGenerator(Dialog));
+export default componentWrapper(Dialog, methodsGenerator(DialogWithGlobalContext));

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

@@ -206,7 +206,20 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement("span", {
     ref: textRef,
     className: prefixCls + "-js-content"
-  }), /*#__PURE__*/React.createElement("span", {
+  }, dangerouslyUseInnerHTML ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "-js-content-initial",
+    style: {
+      WebkitLineClamp: maxLine
+    },
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "-js-content-initial",
+    style: {
+      WebkitLineClamp: maxLine
+    }
+  }, text)), /*#__PURE__*/React.createElement("span", {
     ref: ellipsisRef,
     className: prefixCls + "-js-content-ellipsis",
     onClick: onEllipsisNodeClick

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

@@ -7,8 +7,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.createElement("div", {
     className: cls(prefixCls + "-native", {
@@ -27,7 +29,10 @@ function NativeEllipsis(_ref) {
   }) : /*#__PURE__*/React.createElement("span", null, text), !ellipsis && collapseNode && /*#__PURE__*/React.createElement("span", {
     onClick: onCollapseNodeClick,
     className: cls(prefixCls + "-native-collapse")
-  }, collapseNode));
+  }, collapseNode), ellipsis && (ellipsisNode !== '...' || onEllipsisNodeClick) ? /*#__PURE__*/React.createElement("span", {
+    onClick: onEllipsisNodeClick,
+    className: cls(prefixCls + "-native-ellipsis-node")
+  }, ellipsisNode) : null);
 }
 
 export default /*#__PURE__*/React.memo(NativeEllipsis);

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

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

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

@@ -27,15 +27,17 @@ var Ellipsis = /*#__PURE__*/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 = useRef(null);
   var jsEllipsisRef = 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);
   useImperativeHandle(ref, function () {
     var _jsEllipsisRef$curren;
 
@@ -55,7 +57,9 @@ var Ellipsis = /*#__PURE__*/forwardRef(function (props, ref) {
       dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
       text: text,
       maxLine: maxLine,
+      ellipsisNode: ellipsisNode,
       collapseNode: collapseNode,
+      onEllipsisNodeClick: onEllipsisNodeClick,
       onCollapseNodeClick: onCollapseNodeClick
     }) : /*#__PURE__*/React.createElement(JsEllipsis, {
       ref: jsEllipsisRef,

package/esm/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/esm/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;
     }
 }

package/esm/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/esm/image-preview/index.d.ts

@@ -252,7 +252,7 @@ export declare function methodsGenerator<P extends ImagePreviewProps>(Comp: Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<P, Exclude<keyof P, "close">>) => {
+    open: (config: Pick<P, Exclude<keyof P, "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
     };
@@ -264,9 +264,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/esm/image-preview/index.js

@@ -4,7 +4,7 @@ var _excluded = ["style", "className", "images", "loop", "openIndex", "fit", "no
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';
 import { nextTick, componentWrapper, preventEleScroll, freeEleScroll, cls } from '@arco-design/mobile-utils';
 import TransformAble from '@arco-design/transformable';
-import { ContextLayout } from '../context-provider';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
 import Carousel from '../carousel';
 import Transition from '../transition';
 import BaseImage from '../image';
@@ -980,6 +980,7 @@ export function methodsGenerator(Comp) {
     open: open(Comp)
   };
 }
+var ImagePreviewWithGlobalContext = CompWithGlobalContext(ImagePreview);
 /**
  * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
@@ -989,4 +990,4 @@ export function methodsGenerator(Comp) {
  * @name_en ImagePreview
  */
 
-export default componentWrapper(ImagePreview, methodsGenerator(ImagePreview));
+export default componentWrapper(ImagePreview, methodsGenerator(ImagePreviewWithGlobalContext));

package/esm/image-preview/methods.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import { GlobalContextParams } from '../context-provider';
 export interface OpenBaseProps {
     onClose?: () => void;
     close: (e: any) => void;
     openIndex: number;
     images: any[];
 }
-export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>) => {
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>, context?: GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
 };

package/esm/image-preview/methods.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { appendElementById, removeElement } from '@arco-design/mobile-utils';
 import { ReactDOMRender } from '../_helpers/render';
 export function open(Component) {
-  return function (config) {
+  return function (config, context) {
     var baseProps = _extends({
       unmountOnExit: true
     }, config || {}, {
@@ -20,7 +20,7 @@ export function open(Component) {
 
     var leaving = false;
 
-    var _ReactDOMRender = new ReactDOMRender(Component, div),
+    var _ReactDOMRender = new ReactDOMRender(Component, div, context),
         render = _ReactDOMRender.render;
 
     function update(newConfig) {

package/esm/input/hooks.js

@@ -200,6 +200,7 @@ export function useInputLogic(props, inputRef) {
 
   function renderWrapper(prefixCls, type, children) {
     return /*#__PURE__*/React.createElement("div", {
+      role: "search",
       className: prefixCls + "-container all-border-box " + (className || ''),
       style: style,
       ref: wrapRef

package/esm/input/index.d.ts

@@ -27,6 +27,11 @@ export interface InputProps extends BasicInputProps {
      *  @en Other unlisted native properties have lower priority than listed component properties
      */
     nativeProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * 无障碍label
+     * @en accessible label
+     */
+    ariaLabel?: string;
 }
 export interface InputRef {
     /**

package/esm/input/index.js

@@ -27,7 +27,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       inputClass = props.inputClass,
       inputStyle = props.inputStyle,
       _props$nativeProps = props.nativeProps,
-      nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps;
+      nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps,
+      _props$ariaLabel = props.ariaLabel,
+      ariaLabel = _props$ariaLabel === void 0 ? '' : _props$ariaLabel;
   var inputRef = useRef(null);
 
   var _useInputLogic = useInputLogic(props, inputRef),
@@ -71,7 +73,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       onChange: handleChange,
       onInput: handleInput,
       onKeyDown: handleKeyDown,
-      onClick: handleClick
+      onClick: handleClick,
+      "aria-disabled": disabled,
+      "aria-label": ariaLabel
     })));
   }