@arco-design/mobile-react 2.33.0 → 2.35.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.35.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.34.0...@arco-design/mobile-react@2.35.0) (2025-01-09)
+
+
+### Bug Fixes
+
+* add new less variable `[@prefix-mobile](https://github.com/prefix-mobile)` ([#310](https://github.com/arco-design/arco-design-mobile/issues/310)) ([c8b539c](https://github.com/arco-design/arco-design-mobile/commit/c8b539cf7c5a064f1334de6d87a7c00d22c8f453))
+* change protocol from http to https ([#304](https://github.com/arco-design/arco-design-mobile/issues/304)) ([0c42f9b](https://github.com/arco-design/arco-design-mobile/commit/0c42f9becf74e2dcbd02d774b426e113ea2b260c))
+* fix `Context-Provider` demo url ([#306](https://github.com/arco-design/arco-design-mobile/issues/306)) ([4a5c0f8](https://github.com/arco-design/arco-design-mobile/commit/4a5c0f86de85f5eddb2b0b6816db2a9ea38cde40))
+* keep empty value in renderLinkedContainer of `DatePicker` ([#309](https://github.com/arco-design/arco-design-mobile/issues/309)) ([0f07a93](https://github.com/arco-design/arco-design-mobile/commit/0f07a931de93b22dfe17aa5eda878b51cc943913))
+
+
+### Features
+
+* add dynamic theme demo ([#305](https://github.com/arco-design/arco-design-mobile/issues/305)) ([f27ccc6](https://github.com/arco-design/arco-design-mobile/commit/f27ccc6910a700a064be22926c2321b3afac4694))
+
+
+
+
+
+# [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.34.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.34.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.34.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.34.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/date-picker/index.js

@@ -345,7 +345,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onOk: _handlePickerConfirm,
       touchToStop: touchToStop,
       renderLinkedContainer: renderLinkedContainer ? function () {
-        return renderLinkedContainer(currentTs, keyOptions);
+        return renderLinkedContainer((0, _mobileUtils.isEmptyValue)(props.currentTs) ? undefined : currentTs, keyOptions);
       } : undefined
     }));
   });

package/cjs/date-picker/type.d.ts

@@ -110,5 +110,5 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
 }

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;
         };
@@ -13962,7 +13964,7 @@
           onOk: _handlePickerConfirm,
           touchToStop: touchToStop,
           renderLinkedContainer: renderLinkedContainer ? function () {
-            return renderLinkedContainer(currentTs, keyOptions);
+            return renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions);
           } : undefined
         }));
       });
@@ -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'