@arco-design/mobile-react 2.21.3 → 2.22.2

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.22.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.0...@arco-design/mobile-react@2.22.2) (2022-11-09)
+
+
+### Bug Fixes
+
+* `PullRefresh` support custom style ([edac495](https://github.com/arco-design/arco-design-mobile/commit/edac4954526b8f2e3a86c9742752222e19f899f8))
+* `Steps` optimize style & support custom alignment ([617c570](https://github.com/arco-design/arco-design-mobile/commit/617c57003135215787897b48c07d2b674c482828))
+* `Tabs` fix touch event on foldable screen ([a67fa71](https://github.com/arco-design/arco-design-mobile/commit/a67fa71c8944e27aa43d6353e4a24e4ba676cec3))
+* optimize .text-medium mixin ([ab62ab2](https://github.com/arco-design/arco-design-mobile/commit/ab62ab2cdb51174cbd2106467bbf1a3db4694982))
+
+
+
+
+
+# [2.22.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.3...@arco-design/mobile-react@2.22.0) (2022-10-28)
+
+
+### Bug Fixes
+
+*  `SwipeAction` prevent touchmove by gesture ([#59](https://github.com/arco-design/arco-design-mobile/issues/59)) ([c9ef474](https://github.com/arco-design/arco-design-mobile/commit/c9ef474312eb9f9af736431f16147cfb56dee623))
+* `Tabs` supports tabBarStopPropagation ([#62](https://github.com/arco-design/arco-design-mobile/issues/62)) ([ba24d17](https://github.com/arco-design/arco-design-mobile/commit/ba24d178320e12b0aa95e5d75feb34e5e5163af4))
+
+
+### Features
+
+* add support for react18 ([#57](https://github.com/arco-design/arco-design-mobile/issues/57)) ([7cbb4fc](https://github.com/arco-design/arco-design-mobile/commit/7cbb4fcd5bd8c2809141bf0546f42ecf3367fd73))
+
+
+
+
+
 ## [2.21.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.2...@arco-design/mobile-react@2.21.3) (2022-09-30)
 
 

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.21.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.22.0/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.21.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.22.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/index.d.ts

@@ -5,6 +5,7 @@
 import { CSSProperties } from 'react';
 export * from './hooks';
 export * from './type';
+export * from './react-dom';
 export declare function getStyleWithVendor(style: CSSProperties): CSSProperties;
 /**
  * 计算默认值，仅未定义时使用默认值

package/cjs/_helpers/index.js

@@ -30,6 +30,15 @@ Object.keys(_type).forEach(function (key) {
   exports[key] = _type[key];
 });
 
+var _reactDom = require("./react-dom");
+
+Object.keys(_reactDom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _reactDom[key]) return;
+  exports[key] = _reactDom[key];
+});
+
 /**
  * @type utils
  * @name componentUtils

package/cjs/_helpers/react-dom.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export interface RootType {
+    render: (container: ReactElement) => void;
+    _unmount: () => void;
+}
+export interface RootTypeReact extends RootType {
+    unmount?: () => void;
+}
+export declare type CreateRootFnType = (container: Element | DocumentFragment) => RootTypeReact;
+export declare const render: (app: ReactElement, container: Element | DocumentFragment) => {
+    render: (container: ReactElement) => void;
+    _unmount: () => void;
+};

package/cjs/_helpers/react-dom.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.render = void 0;
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _CopyReactDOM$version;
+
+function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+var __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
+var CopyReactDOM = _reactDom.default;
+var copyRender;
+var isReact18 = Number((_CopyReactDOM$version = CopyReactDOM.version) == null ? void 0 : _CopyReactDOM$version.split('.')[0]) > 17;
+
+var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
+  // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
+  // Avoid console warning
+  if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
+    CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+  }
+};
+
+var createRoot;
+
+try {
+  createRoot = CopyReactDOM.createRoot;
+} catch (_) {}
+
+if (isReact18 && createRoot) {
+  copyRender = function copyRender(app, container) {
+    updateUsingClientEntryPoint(true);
+    var root = createRoot(container);
+    updateUsingClientEntryPoint(false);
+    root.render(app);
+
+    root._unmount = function () {
+      setTimeout(function () {
+        root == null ? void 0 : root.unmount == null ? void 0 : root.unmount();
+      });
+    };
+
+    return root;
+  };
+} else {
+  copyRender = function copyRender(app, container) {
+    CopyReactDOM.render(app, container);
+    return {
+      render: function render(comment) {
+        CopyReactDOM.render(comment, container);
+      },
+      _unmount: function _unmount() {
+        CopyReactDOM.unmountComponentAtNode(container);
+      }
+    };
+  };
+}
+
+var render = copyRender;
+exports.render = render;

package/cjs/_helpers/render.d.ts

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

package/cjs/_helpers/render.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ReactDOMRender = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("./react-dom");
+
+var ReactDOMRender = function ReactDOMRender(app, container) {
+  var _this = this;
+
+  this.root = void 0;
+  this.app = void 0;
+  this.container = void 0;
+
+  this.render = function (props) {
+    var CustomApp = _this.app;
+
+    if (_this.root) {
+      _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, props));
+    } else {
+      _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, props), _this.container);
+    }
+  };
+
+  this.unmount = function () {
+    var _this$root;
+
+    (_this$root = _this.root) == null ? void 0 : _this$root._unmount();
+    _this.root = undefined;
+  };
+
+  this.app = app;
+  this.container = container;
+};
+
+exports.ReactDOMRender = ReactDOMRender;

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

@@ -26,7 +26,7 @@ export interface ActionSheetItemOptions {
      * 点击选项事件，返回值为 true 时可以阻止动作面板关闭
      * @en Click option event, actionSheet will be prevent from closing when returning true
      */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
 }
 export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'> {
     /**

package/cjs/action-sheet/style/css/index.css

@@ -46,8 +46,8 @@
 .arco-action-sheet-title.android,
 .arco-action-sheet-title.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-action-sheet-sub-title {
   color:  #86909c ;

package/cjs/action-sheet/style/index.less

@@ -11,7 +11,7 @@
 
     &-title {
         .use-var(font-size, action-sheet-title-font-size);
-        .text-medium-var(font-color);
+        .text-medium();
     }
 
     &-sub-title {

package/cjs/dialog/style/css/index.css

@@ -126,8 +126,8 @@
 .arco-dialog-header.ios.android,
 .arco-dialog-header.ios.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-dialog-header.ios.only-title {
   padding-bottom:  0.4rem ;

package/cjs/dialog/style/index.less

@@ -105,7 +105,7 @@
             .use-var(padding-right, dialog-ios-horizontal-padding);
             .use-var(font-size, dialog-header-ios-font-size);
             .use-var(line-height, dialog-header-ios-line-height);
-            .text-medium-var(dialog-header-ios-color);
+            .text-medium();
 
             &.only-title {
                 .use-var(padding-bottom, dialog-ios-vertical-padding);

package/cjs/image-picker/index.js

@@ -194,7 +194,6 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var timeOutEvent;
 
   var handleTouchStart = function handleTouchStart(e, image, index) {
-    e.preventDefault();
     timeOutEvent = setTimeout(function () {
       timeOutEvent = 0;
       onLongPress == null ? void 0 : onLongPress(e, image, index);

package/cjs/image-preview/index.d.ts

@@ -254,11 +254,7 @@ export declare function methodsGenerator<P extends ImagePreviewProps>(Comp: Reac
      */
     open: (config: Pick<P, Exclude<keyof P, "close">>) => {
         close: () => void;
-        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
     };
 };
 declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>> & {
@@ -270,11 +266,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      */
     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">) => {
         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; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        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;
     };
 };
 /**

package/cjs/image-preview/methods.js

@@ -7,12 +7,10 @@ exports.open = open;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _render = require("../_helpers/render");
+
 function open(Component) {
   return function (config) {
     var baseProps = (0, _extends2.default)({
@@ -30,13 +28,8 @@ function open(Component) {
 
     var leaving = false;
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig || {});

package/cjs/masking/index.d.ts

@@ -192,6 +192,11 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -208,6 +213,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
     open: (config: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "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;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "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;

package/cjs/masking/methods.js

@@ -8,12 +8,10 @@ exports.open = open;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _render = require("../_helpers/render");
+
 function getOpenMethod(Component, containerId, normalize) {
   if (normalize === void 0) {
     normalize = function normalize(config) {
@@ -37,13 +35,8 @@ function getOpenMethod(Component, containerId, normalize) {
 
     var leaving = false;
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = (0, _extends2.default)({}, dynamicProps, normalize(newConfig));

package/cjs/notify/methods.js

@@ -9,9 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _mobileUtils = require("@arco-design/mobile-utils");
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _render = require("../_helpers/render");
 
 function notify(Component, type) {
   return function (originConfig) {
@@ -33,17 +31,16 @@ function notify(Component, type) {
       document.body.appendChild(div);
     }
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount;
 
     function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
+      unmount();
 
-      var unmountResult = _reactDom.default.unmountComponentAtNode(div);
-
-      if (unmountResult && div.parentNode) {
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }

package/cjs/popover/hooks/useEvent.js

@@ -52,6 +52,7 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     onVisibleChange(false);
     window.clearTimeout(closeTimer.current);
     closeTimer.current = 0;
+    mayRemoveEventListenerOnBody();
   };
 
   var throttleHandleVerticalScroll = (0, _react.useMemo)(function () {
@@ -71,7 +72,7 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     };
   }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
   var mayRemoveEventListenerOnBody = (0, _react.useCallback)(function () {
-    document.body.removeEventListener('click', handleClickBody);
+    document.body.removeEventListener('click', handleClickBody, true);
     document.body.removeEventListener('touchstart', handleTouchBody);
     var el = getVerticalScrollContainer();
 
@@ -86,7 +87,6 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     // 仅处理子元素和气泡元素外的点击事件
     // @en Only handle click events outside of children elements and bubble elements
     if (!(0, _mobileUtils.isContains)(wrapperRef.current, e.target) && !(0, _mobileUtils.isContains)(((_popoverInnerRef$curr = popoverInnerRef.current) == null ? void 0 : _popoverInnerRef$curr.dom) || null, e.target)) {
-      // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
       if (preventBodyClick) {
         e.stopPropagation();
         e.preventDefault();
@@ -112,13 +112,13 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
     var handle = function handle(e) {
       e.stopPropagation();
       e.preventDefault();
-      document.body.removeEventListener('click', handle);
+      document.body.removeEventListener('click', handle, true);
       clearTimeout(preventRecentClickTimer);
     };
 
-    document.body.addEventListener('click', handle);
+    document.body.addEventListener('click', handle, true);
     preventRecentClickTimer = window.setTimeout(function () {
-      document.body.removeEventListener('click', handle);
+      document.body.removeEventListener('click', handle, true);
     }, 500);
   };
 
@@ -161,7 +161,7 @@ var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visibleRef,
       var el = getVerticalScrollContainer();
       el && el.addEventListener('scroll', handleScrollBody);
     } else if (clickOtherToClose) {
-      document.body.addEventListener('click', handleClickBody);
+      document.body.addEventListener('click', handleClickBody, true);
     }
   };
   /**

package/cjs/pull-refresh/android-pull-refresh.js

@@ -36,6 +36,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
 
   var className = props.className,
+      style = props.style,
       children = props.children,
       _props$loosingText = props.loosingText,
       loosingText = _props$loosingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -272,6 +273,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh all-border-box is-android", className, {
       'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== _model.PullRefreshStatus.Loading
     }),
+    style: style,
     ref: domRef
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-place"),

package/cjs/pull-refresh/ios-pull-refresh.js

@@ -35,6 +35,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var animationRef = (0, _react.useRef)(0);
   var className = props.className,
+      style = props.style,
       children = props.children,
       _props$loadingText = props.loadingText,
       loadingText = _props$loadingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -214,9 +215,9 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       'is-disabled': disabled || !touching && useHideAsNestedScroll
     }),
     ref: domRef,
-    style: contentHeight > 0 ? {
+    style: contentHeight > 0 ? (0, _extends2.default)({
       height: contentHeight
-    } : {}
+    }, style || {}) : style
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-content-wrapper")
   }, /*#__PURE__*/_react.default.createElement("div", {

package/cjs/pull-refresh/model.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM
@@ -32,9 +32,13 @@ export interface PullRefreshBasicProps {
     /**
      * 样式类名
      * @en Custom classname
-     * @default ""
      */
     className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
     /**
      * 是否禁用
      * @en Whether to be disabled

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

@@ -30,7 +30,10 @@
 #demo-steps #demo-order-7 .process-title-color-with-config {
   color: #FFB400;
 }
-#demo-steps #demo-order-7 .finish-tail-color-with-config:after {
+#demo-steps #demo-order-7 .finish-tail-color-with-config::before,
+#demo-steps #demo-order-7 .finish-tail-color-with-config::after,
+#demo-steps #demo-order-7 .process-tail-color-with-config::before,
+#demo-steps #demo-order-7 .error-tail-color-with-config::before {
   background: #FFB400;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
@@ -57,7 +60,10 @@
 #demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
   color: #165DFF;
 }
-#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config:after {
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
+#demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {

package/cjs/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

package/cjs/steps/index.js

@@ -44,6 +44,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       children = props.children,
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      userSetAlign = props.align,
       _props$iconType = props.iconType,
       iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
       current = props.current,
@@ -54,6 +55,8 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       items = props.items,
       onClick = props.onClick,
       onChange = props.onChange;
+  var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+  var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
   var _useState = (0, _react.useState)(Number(defaultIndex)),
       innerIndex = _useState[0],
@@ -89,11 +92,12 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         direction: direction,
         index: index,
         status: activeIndex === index ? status : void 0,
+        align: align,
         changeIndex: changeIndex
       },
       key: index
     }, child);
-  }, [iconType, activeIndex, direction]);
+  }, [iconType, activeIndex, direction, align]);
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {