@arco-design/mobile-react 2.30.0 → 2.30.2

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.1...@arco-design/mobile-react@2.30.2) (2023-11-09)
+
+
+### Bug Fixes
+
+* `NavBar` add aria-label to back arrow ([#196](https://github.com/arco-design/arco-design-mobile/issues/196)) ([ad97b65](https://github.com/arco-design/arco-design-mobile/commit/ad97b652d142a4d2331fbc4699c7d15d61153e50))
+* `Picker` fix the issue that value=0 cannot be selected ([#199](https://github.com/arco-design/arco-design-mobile/issues/199)) ([acb97ac](https://github.com/arco-design/arco-design-mobile/commit/acb97ac158995cea86f99755e6d0d60b166717fd))
+
+
+
+
+
+## [2.30.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.0...@arco-design/mobile-react@2.30.1) (2023-11-07)
+
+
+### Bug Fixes
+
+* `Form` put error types to classname & i18n usage description ([#192](https://github.com/arco-design/arco-design-mobile/issues/192)) ([d3a611a](https://github.com/arco-design/arco-design-mobile/commit/d3a611ab368a32c98495e1601a5e16e4d6f4f86f))
+* adjust dark mode style ([#193](https://github.com/arco-design/arco-design-mobile/issues/193)) ([919d661](https://github.com/arco-design/arco-design-mobile/commit/919d66120c1b2e445e3d0f95cf4d34e8c84e9998))
+
+
+
+
+
 # [2.30.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.6...@arco-design/mobile-react@2.30.0) (2023-10-19)
 
 

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

package/cjs/carousel/index.js

@@ -737,7 +737,9 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
 
     var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) * rtlRatio : dis;
-    var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+    var initTranslateDis = -1 * index * 100; // bugfix: prop `style` did not match in ssr
+
+    var transStr = childSize > 0 ? "" + translateDis + (translateDis ? 'px' : '') : "" + initTranslateDis + (initTranslateDis ? '%' : '');
 
     if (vertical) {
       var _translateStyle = (0, _helpers.getStyleWithVendor)({

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

@@ -47,11 +47,15 @@ export interface GlobalContextParams {
      * @default false
      */
     useRtl?: boolean;
+    /**
+     * 当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效
+     * @en Triggered when the system's native dark mode changes, valid when useDarkMode=true
+     */
+    onDarkModeChange?: (isDark: boolean) => void;
 }
 export declare const defaultContext: GlobalContextParams;
 export declare const GlobalContext: React.Context<GlobalContextParams>;
 export interface ContextProviderProps extends GlobalContextParams {
-    onDarkModeChange?: (isDark: boolean) => void;
     children: React.ReactNode;
 }
 export declare type WithGlobalContext<T> = T & {

package/cjs/context-provider/index.js

@@ -66,9 +66,15 @@ function ContextProvider(props) {
       isDarkModeState = _useState[0],
       setIsDarkModeState = _useState[1];
 
-  var setDarkModeState = function setDarkModeState(isDark) {
+  var mountedRef = (0, _react.useRef)(false);
+
+  var setDarkModeState = function setDarkModeState(isDark, needChange) {
+    if (needChange === void 0) {
+      needChange = true;
+    }
+
     setIsDarkModeState(isDark);
-    onDarkModeChange && onDarkModeChange(isDark);
+    needChange && onDarkModeChange && onDarkModeChange(isDark);
   };
 
   var isDarkMode = (0, _react.useMemo)(function () {
@@ -97,7 +103,7 @@ function ContextProvider(props) {
 
     if (useDarkMode) {
       var dark = matchMedia.matches;
-      setDarkModeState(dark);
+      setDarkModeState(dark, mountedRef.current);
 
       if (typeof matchMedia.addEventListener === 'function') {
         matchMedia.addEventListener('change', changeDarkMode);
@@ -106,6 +112,7 @@ function ContextProvider(props) {
       }
     }
 
+    mountedRef.current = true;
     return function () {
       if (useDarkMode) {
         if (typeof matchMedia.removeEventListener === 'function') {

package/cjs/form/form-item.js

@@ -88,12 +88,14 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
           fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
             var _getErrorAndWarnings = (0, _utils.getErrorAndWarnings)((errorsMap == null ? void 0 : errorsMap[field]) || []),
                 errors = _getErrorAndWarnings.errors,
-                warnings = _getErrorAndWarnings.warnings;
+                warnings = _getErrorAndWarnings.warnings,
+                errorTypes = _getErrorAndWarnings.errorTypes;
 
             _this._errors = errors;
             onValidateStatusChange({
               errors: _this._errors,
-              warnings: warnings
+              warnings: warnings,
+              errorTypes: errorTypes
             });
             return resolve({
               errors: _this._errors,
@@ -338,16 +340,22 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       errors = _useState[0],
       setErrors = _useState[1];
 
-  var _useState2 = (0, _react.useState)([]),
-      warnings = _useState2[0],
-      setWarnings = _useState2[1];
+  var _useState2 = (0, _react.useState)(null),
+      errorTypes = _useState2[0],
+      setErrorTypes = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      warnings = _useState3[0],
+      setWarnings = _useState3[1];
 
   var formItemRef = (0, _react.useRef)(null);
 
   var onValidateStatusChange = function onValidateStatusChange(validateResult) {
     var _errors = validateResult.errors,
-        _warnings = validateResult.warnings;
+        _warnings = validateResult.warnings,
+        _errorTypes = validateResult.errorTypes;
     setErrors(_errors.length ? _errors[0] : null);
+    setErrorTypes(_errorTypes.length ? _errorTypes[0] : null);
     setWarnings(_warnings);
   };
 
@@ -369,7 +377,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-form-item", prefixCls + "-form-item-" + (itemLayout || layout), className, (_cls = {
       disabled: fieldDisabled
-    }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls)),
+    }, _cls[prefixCls + "-form-item-error"] = !!errors, _cls[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _cls[prefixCls + "-form-item-error-" + errorTypes] = errorTypes, _cls)),
     style: style,
     ref: formItemRef
   }, /*#__PURE__*/_react.default.createElement("div", {

package/cjs/form/type.d.ts

@@ -344,8 +344,9 @@ export interface IFormItemInnerProps {
      * @en The callback when validating status changes
      */
     onValidateStatusChange: (data: {
-        errors: any;
-        warnings: any;
+        errors: ReactNode[];
+        warnings: ReactNode[];
+        errorTypes: string[];
     }) => void;
     /**
      * 获取内部表单项的dom

package/cjs/form/utils.d.ts

@@ -3,4 +3,5 @@ export declare const isFieldRequired: (rules?: IRules[]) => boolean;
 export declare const getErrorAndWarnings: (result: ValidatorError[]) => {
     warnings: string[];
     errors: string[];
+    errorTypes: string[];
 };

package/cjs/form/utils.js

@@ -18,11 +18,13 @@ exports.isFieldRequired = isFieldRequired;
 var getErrorAndWarnings = function getErrorAndWarnings(result) {
   var errors = [];
   var warnings = [];
+  var errorTypes = [];
   result.map(function (_ref) {
     var _ref$message = _ref.message,
         message = _ref$message === void 0 ? [] : _ref$message,
         _ref$validateLevel = _ref.validateLevel,
-        validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel;
+        validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel,
+        resultErrorTypes = _ref.errorTypes;
 
     if (!(message != null && message.length)) {
       return;
@@ -32,11 +34,13 @@ var getErrorAndWarnings = function getErrorAndWarnings(result) {
       warnings = [].concat(warnings, message);
     } else {
       errors = [].concat(errors, message);
+      errorTypes = [].concat(errorTypes, resultErrorTypes);
     }
   });
   return {
     warnings: warnings,
-    errors: errors
+    errors: errors,
+    errorTypes: errorTypes
   };
 };
 

package/cjs/nav-bar/back-icon.js

@@ -7,19 +7,29 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
 function BackArrow(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "c-svg-arrow nav-bar-back"
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    height: "100%",
-    viewBox: "0 0 16 16"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    id: "path-1_1_",
-    d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9 l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
-    fill: color
-  })));
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+    var _ref2$locale = _ref2.locale,
+        locale = _ref2$locale === void 0 ? _mobileUtils.defaultLocale : _ref2$locale;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      className: "c-svg-arrow nav-bar-back",
+      "aria-label": locale.NavBar.backBtnAriaLabel
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      height: "100%",
+      viewBox: "0 0 16 16"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      id: "path-1_1_",
+      d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9 l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
+      fill: color
+    })));
+  });
 }
 
 var _default = BackArrow;

package/cjs/nav-bar/style/css/index.css

@@ -650,7 +650,7 @@
 }
 .arco-theme-dark .arco-nav-bar {
   color:  #f6f6f6 ;
-  background:  #232324 ;
+  background:  #17171A ;
 }
 .arco-theme-dark .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
   position: relative;

package/cjs/picker-view/components/picker-cell.js

@@ -301,7 +301,7 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   function getCurrentCellValue() {
     var _data$currentIndex;
 
-    return currentValue || ((_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value);
+    return (_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value;
   }
 
   function _clearTimer() {

package/cjs/picker-view/index.js

@@ -131,7 +131,7 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // @en Remove empty values from cascader
 
     return curValues.filter(function (v) {
-      return v;
+      return v !== undefined;
     });
   };
 

package/cjs/tabs/style/css/index.css

@@ -1052,7 +1052,7 @@
   color:  #f6f6f6 ;
 }
 .arco-theme-dark .arco-tab-cell-container-wrap {
-  background:  #232324 ;
+  background:  #17171A ;
 }
 .arco-theme-dark .arco-tab-cell-container-inner.has-divider.pos-top {
   box-shadow: 0 -1PX 0 0 #484849 inset;

package/dist/index.js

@@ -1106,7 +1106,7 @@
      * @desc {en} Get properties of the scrolling container. Perform additional attribute compatibility processing for window and document.
      * @param property 所需属性
      * @param property {en} Required attributes
-     * @param getContainer 待计算滚动容器
+     * @param {() => HTMLElement | Window | Document | null} getContainer 待计算滚动容器
      * @param getContainer {en} Scrolling container to be calculated.
      * @example
      * ```
@@ -1147,7 +1147,7 @@
     /**
      * 提供了元素的大小及其相对于视口的位置。
      * @desc {en} Provide information about the size of an element and its position relative to the viewport.
-     * @param container 滚动容器
+     * @param {HTMLElement | Window | null} container 滚动容器
      * @param container {en} Scroll Container
      * @example
      * ```
@@ -1715,6 +1715,9 @@
         boolean: {
           equal: '%s 不等于 `%s`'
         }
+      },
+      NavBar: {
+        backBtnAriaLabel: '返回'
       }
     };
 
@@ -3771,9 +3774,15 @@
           isDarkModeState = _c[0],
           setIsDarkModeState = _c[1];
 
-      var setDarkModeState = function setDarkModeState(isDark) {
+      var mountedRef = React.useRef(false);
+
+      var setDarkModeState = function setDarkModeState(isDark, needChange) {
+        if (needChange === void 0) {
+          needChange = true;
+        }
+
         setIsDarkModeState(isDark);
-        onDarkModeChange && onDarkModeChange(isDark);
+        needChange && onDarkModeChange && onDarkModeChange(isDark);
       };
 
       var isDarkMode = React.useMemo(function () {
@@ -3802,7 +3811,7 @@
 
         if (useDarkMode) {
           var dark = matchMedia.matches;
-          setDarkModeState(dark);
+          setDarkModeState(dark, mountedRef.current);
 
           if (typeof matchMedia.addEventListener === 'function') {
             matchMedia.addEventListener('change', changeDarkMode);
@@ -3811,6 +3820,7 @@
           }
         }
 
+        mountedRef.current = true;
         return function () {
           if (useDarkMode) {
             if (typeof matchMedia.removeEventListener === 'function') {
@@ -10283,7 +10293,9 @@
         // @en When noLoop is used, the blank space of spaceBetween needs to be exposed at the end, so when sliding to the last one, the transform value moves to the left by the corresponding width
 
         var translateDis = noLoop ? noLoopDis - (total > 1 && index === total - 1 ? spaceBetween : 0) * rtlRatio : dis;
-        var transStr = childSize > 0 ? translateDis + "px" : "-" + index * 100 + "%";
+        var initTranslateDis = -1 * index * 100; // bugfix: prop `style` did not match in ssr
+
+        var transStr = childSize > 0 ? "" + translateDis + (translateDis ? 'px' : '') : "" + initTranslateDis + (initTranslateDis ? '%' : '');
 
         if (vertical) {
           var translateStyle_1 = getStyleWithVendor({
@@ -12448,7 +12460,7 @@
       function getCurrentCellValue() {
         var _a;
 
-        return currentValue || ((_a = data[currentIndex]) === null || _a === void 0 ? void 0 : _a.value);
+        return (_a = data[currentIndex]) === null || _a === void 0 ? void 0 : _a.value;
       }
 
       function _clearTimer() {
@@ -12745,7 +12757,7 @@
         // @en Remove empty values from cascader
 
         return curValues.filter(function (v) {
-          return v;
+          return v !== undefined;
         });
       };
 
@@ -16145,11 +16157,13 @@
     var getErrorAndWarnings = function getErrorAndWarnings(result) {
       var errors = [];
       var warnings = [];
+      var errorTypes = [];
       result.map(function (_a) {
         var _b = _a.message,
             message = _b === void 0 ? [] : _b,
             _c = _a.validateLevel,
-            validateLevel = _c === void 0 ? 'error' : _c;
+            validateLevel = _c === void 0 ? 'error' : _c,
+            resultErrorTypes = _a.errorTypes;
 
         if (!(message === null || message === void 0 ? void 0 : message.length)) {
           return;
@@ -16159,11 +16173,13 @@
           warnings = __spreadArrays$1(warnings, message);
         } else {
           errors = __spreadArrays$1(errors, message);
+          errorTypes = __spreadArrays$1(errorTypes, resultErrorTypes);
         }
       });
       return {
         warnings: warnings,
-        errors: errors
+        errors: errors,
+        errorTypes: errorTypes
       };
     };
 
@@ -16226,12 +16242,14 @@
               fieldValidator_1.validate((_a = {}, _a[field] = value, _a), function (errorsMap) {
                 var _a = getErrorAndWarnings((errorsMap === null || errorsMap === void 0 ? void 0 : errorsMap[field]) || []),
                     errors = _a.errors,
-                    warnings = _a.warnings;
+                    warnings = _a.warnings,
+                    errorTypes = _a.errorTypes;
 
                 _this._errors = errors;
                 onValidateStatusChange({
                   errors: _this._errors,
-                  warnings: warnings
+                  warnings: warnings,
+                  errorTypes: errorTypes
                 });
                 return resolve({
                   errors: _this._errors,
@@ -16470,16 +16488,22 @@
           errors = _e[0],
           setErrors = _e[1];
 
-      var _f = React.useState([]),
-          warnings = _f[0],
-          setWarnings = _f[1];
+      var _f = React.useState(null),
+          errorTypes = _f[0],
+          setErrorTypes = _f[1];
+
+      var _g = React.useState([]),
+          warnings = _g[0],
+          setWarnings = _g[1];
 
       var formItemRef = React.useRef(null);
 
       var onValidateStatusChange = function onValidateStatusChange(validateResult) {
         var _errors = validateResult.errors,
-            _warnings = validateResult.warnings;
+            _warnings = validateResult.warnings,
+            _errorTypes = validateResult.errorTypes;
         setErrors(_errors.length ? _errors[0] : null);
+        setErrorTypes(_errorTypes.length ? _errorTypes[0] : null);
         setWarnings(_warnings);
       };
 
@@ -16501,7 +16525,7 @@
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-form-item", prefixCls + "-form-item-" + (itemLayout || layout), className, (_a = {
           disabled: fieldDisabled
-        }, _a[prefixCls + "-form-item-error"] = !!errors, _a[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _a)),
+        }, _a[prefixCls + "-form-item-error"] = !!errors, _a[prefixCls + "-form-item-warning"] = Boolean(!errors && warnings), _a[prefixCls + "-form-item-error-" + errorTypes] = errorTypes, _a)),
         style: style,
         ref: formItemRef
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22953,16 +22977,22 @@
     function BackArrow(_a) {
       var _b = _a.color,
           color = _b === void 0 ? 'currentColor' : _b;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "c-svg-arrow nav-bar-back"
-      }, /*#__PURE__*/React__default["default"].createElement("svg", {
-        height: "100%",
-        viewBox: "0 0 16 16"
-      }, /*#__PURE__*/React__default["default"].createElement("path", {
-        id: "path-1_1_",
-        d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9\n                l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
-        fill: color
-      })));
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b = _a.locale,
+            locale = _b === void 0 ? defaultLocale : _b;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          role: "button",
+          className: "c-svg-arrow nav-bar-back",
+          "aria-label": locale.NavBar.backBtnAriaLabel
+        }, /*#__PURE__*/React__default["default"].createElement("svg", {
+          height: "100%",
+          viewBox: "0 0 16 16"
+        }, /*#__PURE__*/React__default["default"].createElement("path", {
+          id: "path-1_1_",
+          d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9\n                l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
+          fill: color
+        })));
+      });
     }
 
     /**