@arco-design/mobile-react 2.33.0 → 2.34.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.34.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.33.0...@arco-design/mobile-react@2.34.0) (2024-11-21)
+
+
+### Bug Fixes
+
+* `Popover` custom show transition animation ([#297](https://github.com/arco-design/arco-design-mobile/issues/297)) ([c3ceaf2](https://github.com/arco-design/arco-design-mobile/commit/c3ceaf2a7571626c298132b2c486d7128a748007))
+* fix `useMountedState` in `hooks.ts` not correct init leavingRef in StrictMode. ([#292](https://github.com/arco-design/arco-design-mobile/issues/292)) ([af2bf5d](https://github.com/arco-design/arco-design-mobile/commit/af2bf5d5428eec252cac565ef708b2af6e0106a2))
+
+
+### Features
+
+* add a FAQ in the `Dialog`. ([#302](https://github.com/arco-design/arco-design-mobile/issues/302)) ([55f6940](https://github.com/arco-design/arco-design-mobile/commit/55f69406a3411faf5e67b2ef05a552121a9d3c04))
+* optimize `Divider` hairline style ([99b1604](https://github.com/arco-design/arco-design-mobile/commit/99b16041aa8e4b71a82ffb5744f180ee9273ef3b))
+* optimize `NoticeBar` close ([#294](https://github.com/arco-design/arco-design-mobile/issues/294)) ([a717540](https://github.com/arco-design/arco-design-mobile/commit/a7175403158c43c209b58c27cd994643f822aeeb))
+
+
+
+
+
 # [2.33.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.32.0...@arco-design/mobile-react@2.33.0) (2024-10-24)
 
 

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

package/cjs/_helpers/hooks.js

@@ -101,6 +101,8 @@ function useMountedState(initialState) {
     setState(value);
   }, []);
   (0, _react.useEffect)(function () {
+    // see: https://github.com/arco-design/arco-design-mobile/pull/292
+    leavingRef.current = false;
     return function () {
       leavingRef.current = true;
     };

package/cjs/divider/style/css/index.css

@@ -542,10 +542,12 @@
 .arco-divider::before {
   content: '';
 }
-.arco-divider--hairline::before,
-.arco-divider--hairline::after {
-  -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+  }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .arco-divider--hairline::before,

package/cjs/divider/style/index.less

@@ -27,7 +27,9 @@
     &--hairline {
         &::before,
         &::after {
-            transform: scaleY(0.5);
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
 
             @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
                 transform: scaleY(0.33333333);

package/cjs/notice-bar/index.js

@@ -57,9 +57,13 @@ var NoticeBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var contentRef = (0, _react.useRef)(null);
   var timerRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(false),
-      needMarquee = _useState[0],
-      setNeedMarquee = _useState[1];
+  var _useState = (0, _react.useState)(true),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),
+      needMarquee = _useState2[0],
+      setNeedMarquee = _useState2[1];
 
   var extraClass = (0, _react.useMemo)(function () {
     var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
@@ -100,9 +104,8 @@ var NoticeBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [useRtl]);
 
   function close() {
-    if (domRef.current) {
-      (0, _mobileUtils.removeElement)(domRef.current);
-    }
+    setVisible(false);
+    clear();
   }
 
   function handleClose(e) {
@@ -167,7 +170,7 @@ var NoticeBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function renderNoticeBar(prefix) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return visible ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefix, className, extraClass),
       style: style,
       ref: domRef,
@@ -193,7 +196,7 @@ var NoticeBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, rightContent) : null, closeable ? /*#__PURE__*/_react.default.createElement("div", {
       className: prefix + "-close",
       onClick: handleClose
-    }, closeIcon) : null);
+    }, closeIcon) : null) : null;
   }
 
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {

package/cjs/popover/popover-inner.js

@@ -63,7 +63,15 @@ var PopoverInner = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (left || width || top || height || bottom) {
       if (!show) {
         setTimeout(function () {
-          setShow(true);
+          setShow(function () {
+            var _domRef$current;
+
+            // bugfix:
+            // 外层CSSTransition使用dom API而非通过react className属性修改class
+            // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+            (_domRef$current = domRef.current) == null ? void 0 : _domRef$current.classList.add('show');
+            return true;
+          });
         }, 0);
       }
     }
@@ -115,7 +123,6 @@ var PopoverInner = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: domRef,
     className: (0, _mobileUtils.cls)(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
-      show: show,
       'with-shadow': needShadow,
       'with-suffix': showCloseIcon || textSuffix,
       'custom-content': typeof content !== 'string'

package/dist/index.js

@@ -3981,6 +3981,8 @@
         setState(value);
       }, []);
       React.useEffect(function () {
+        // see: https://github.com/arco-design/arco-design-mobile/pull/292
+        leavingRef.current = false;
         return function () {
           leavingRef.current = true;
         };
@@ -23516,9 +23518,13 @@
       var contentRef = React.useRef(null);
       var timerRef = React.useRef(null);
 
-      var _j = React.useState(false),
-          needMarquee = _j[0],
-          setNeedMarquee = _j[1];
+      var _j = React.useState(true),
+          visible = _j[0],
+          setVisible = _j[1];
+
+      var _k = React.useState(false),
+          needMarquee = _k[0],
+          setNeedMarquee = _k[1];
 
       var extraClass = React.useMemo(function () {
         var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
@@ -23559,9 +23565,8 @@
       }, [useRtl]);
 
       function close() {
-        if (domRef.current) {
-          removeElement(domRef.current);
-        }
+        setVisible(false);
+        clear();
       }
 
       function handleClose(e) {
@@ -23626,7 +23631,7 @@
       }
 
       function renderNoticeBar(prefix) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
+        return visible ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefix, className, extraClass),
           style: style,
           ref: domRef,
@@ -23652,7 +23657,7 @@
         }, rightContent) : null, closeable ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefix + "-close",
           onClick: handleClose
-        }, closeIcon) : null);
+        }, closeIcon) : null) : null;
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
@@ -24253,7 +24258,15 @@
         if (left || width || top || height || bottom) {
           if (!show) {
             setTimeout(function () {
-              setShow(true);
+              setShow(function () {
+                var _a; // bugfix:
+                // 外层CSSTransition使用dom API而非通过react className属性修改class
+                // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+
+
+                (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('show');
+                return true;
+              });
             }, 0);
           }
         }
@@ -24305,7 +24318,6 @@
       return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: domRef,
         className: cls(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
-          show: show,
           'with-shadow': needShadow,
           'with-suffix': showCloseIcon || textSuffix,
           'custom-content': typeof content !== 'string'