@arco-design/mobile-react 2.30.1 → 2.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.1",
+    "version": "2.30.2",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.17.1",
+        "@arco-design/mobile-utils": "2.17.2",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "219839170a2387d4b13338636023b9177073fba7"
+    "gitHead": "41b5f19cac228f71b84b7a5df4dcdbd6262e2c46"
 }

package/style/css/public.css

@@ -536,6 +536,8 @@ input,
 textarea {
   border: 0;
   outline: 0;
+  appearance: auto;
+  -webkit-appearance: none;
 }
 code,
 kbd,

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

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react"], factory);
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"));
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react);
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider);
     global.backIcon = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -22,16 +22,22 @@
   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/umd/picker-view/components/picker-cell.js

@@ -308,7 +308,7 @@
     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/umd/picker-view/index.js

@@ -127,7 +127,7 @@
       // @en Remove empty values from cascader
 
       return curValues.filter(function (v) {
-        return v;
+        return v !== undefined;
       });
     };
 

package/cjs/action-sheet/demo/style/css/mobile.css

@@ -1,523 +0,0 @@
-/**
- * @type mixin-var
- * @name GeneralMixinVars
- * @name_en General Mixin
- */
-/**
- * 根据base-font-size，设置单位尺寸为rem
- * @desc {en} set the unit size to rem based on base-font-size
- * @param @property css属性名
- * @param @property {en} css property
- * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
- * @param @values {en} css property value, the values can be separated by commas when the style is composite
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *     .rem(font-size, 14);
- *     .rem(padding, 16, 0);
- * }
- * ```
- */
-/**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
- * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
- * @param @property css属性名
- * @param @property {en} css property
- * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
- * @param @values {en} css property value, the values can be separated by commas when the style is composite
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *     .rem-with-rtl(font-size, 14);
- *     .rem-with-rtl(padding, 16, 0);
- * }
- * ```
- */
-/**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
- * @param @rules 对应的暗黑模式规则
- * @param @rules {en} Corresponding dark mode rules
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *     .use-dark-mode-query({
- *         background-color: #000;
- *     });
- * }
- * ```
- */
-/**
- * 为属性设置arco提供的token变量
- * @desc {en} set the token variable provided by Arco for the attribute
- * @param @property css属性名
- * @param @property {en} css property
- * @param @variables token变量名
- * @param @variables {en} token variable name
- * @param @preValues 复合属性css变量前缀
- * @param @preValues {en} prefix for Compound Attribute CSS Variables
- * @param @nextValues 复合属性css变量后缀
- * @param @nextValues {en} suffix for Compound Attribute CSS Variables
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *     .use-var(background, primary-color);
- *     .use-var(border, primary-color, 1px solid);
- *     .use-var(border, cell-border-width, '', solid black);
- * }
- * ```
- */
-/**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
- * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @variables token变量名
- * @param @variables {en} token variable name
- * @param @preValues
- * @param @preValues {en}
- * @param @nextValues
- * @param @nextValues {en}
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
- * }
- * ```
- */
-/**
- * 0.5px的边框线
- * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
- * @param @color {en} set border-color by CSS variable
- * @param @direction 边框方向，默认为全部方向
- * @param @direction {en} border direction，default to all directions.
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *     .hairline-var(line-color);
- *     .hairline-var(line-color, top);
- * }
- * ```
- */
-/**
- * 字体加粗
- * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
- * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
- * @param @stroke {en} font weight, default 0.3 pixel
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .text-medium-var();
- *    .text-medium-var(primary-color, 0.5PX);
- * }
- * ```
- */
-/**
- * 1px边框
- * @desc {en} 1 pixel border
- * @param @direction 边框方向
- * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
- * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
- * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
- * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
- * @param @borderStyle {en} border-style, default value is solid
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .onepx-border-var(top, line-color);
- *    .onepx-border-var(all, line-color, 2, 2px, dashed);
- * }
- * ```
- */
-/**
- * 元素右下0.5px边框
- * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
- * @param @color {en} set border-color by CSS variable
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .hairline-bottom-right-var(line-color);
- * }
- * ```
- */
-/**
- * 元素左上0.5px边框
- * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
- * @param @color {en} set border-color by CSS variable
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .hairline-top-left-var(line-color);
- * }
- * ```
- */
-/**
- * 设置Loading组件颜色
- * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
- * @param @color {en} set color by CSS variable
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .set-loading-color-var(primary-color);
- * }
- * ```
- */
-/**
- * 设置最小字号
- * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
- * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
- * @param @scale {en} set minimum font-size down text scale，default value is 0.9
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .set-font-size-var(badge-font-size);
- *    .set-font-size-var(badge-font-size, 0.5);
- * }
- * ```
- */
-/**
- * 设置content-box盒模型下元素宽度
- * @desc {en} set box width in content-box
- * @param @property css属性名
- * @param @property {en} css property
- * @param @width 元素总宽度，包含内边距
- * @param @width element width, include padding
- * @param @padding-left 左侧内边距
- * @param @padding-left {en} padding-left
- * @param @padding-right 右侧内边距
- * @param @padding-right {en} padding-right
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
- * }
- * ```
- */
-/**
- * 设置Steps组件颜色
- * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
- * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
- * @param @finish-color {en} set finished step color by CSS variable
- * @example
- * ```
- * @import '@arco-design/mobile-react/style/mixin.less';
- *
- * .demo {
- *    .set-steps-color-var(primary-color, lighter-primary-color);
- * }
- * ```
- */
-/**
- * @type mixin
- * @name GeneralMixin
- * @name_en General Mixin
- */
-/**
- * 文本溢出，支持1行/多行文本
- * @desc {en} text overflow, support single line or multiple lines
- * @param @lines 最大展示行数，默认为1行
- * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- * .demo1{
- *   .text-overflow();
- * }
- * .demo2 {
- *   .text-overflow(2);
- * }
- * ```
- */
-/**
- * 禁用用户选择文本
- * @desc {en} disable user selection of text
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .noselect();
- * }
- */
-/**
- * 全屏布局
- * @desc {en} full-screen layout
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .full-screen();
- * }
- */
-/**
- * 文本加粗，兼容安卓设备
- * @desc {en} text-bold, compatible with Android devices
- * @param @color 文本颜色，默认为currentColor
- * @param @color {en} text color, default to currentColor
- * @param @stroke 文本字符笔触宽度，默认为0.3PX
- * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo1 {
- *   .text-medium();
- * }
- * .demo2 {
- *   .text-medium(#fff, 0.5px);
- * }
- */
-/**
- * 消除文本加粗样式，兼容安卓设备
- * @desc {en} remove text-bold, compatible with Android devices
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .remove-text-medium();
- * }
- */
-/**
- * 1px(物理像素)边框
- * @desc {en} a border line of 1 pixel
- * @param @direction 边框方向
- * @param @direction {en} border direction
- * @param @borderColor 边框颜色，默认inherit
- * @param @borderColor {en} border color, default to inherit
- * @param @borderRadius 边框圆角，默认0
- * @param @borderRadius {en} border radius, default to 0
- * @param @borderWidth 边框宽度，默认1px
- * @param @borderWidth {en} border width, default to 1px
- * @param @borderStyle 边框样式，默认solid
- * @param @borderStyle {en} border style, default to solid
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .onepx-border();
- * }
- */
-/**
- * 移除0.5px的边框线
- * @desc {en} remove border line of 0.5 pixels
- * @param @direction 边框方向，默认为全部方向
- * @param @direction {en} border direction，default to all directions.
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *     .remove-hairline(all);
- * }
- * ```
- */
-/**
- * 元素右下 0.5px border
- * @desc {en} 0.5px border on bottom right
- * @param @color 边框颜色
- * @param @color {en} border-color
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *     .hairline-bottom-right(#000);
- * }
- * ```
- */
-/**
- * 元素左上 0.5px border
- * @desc {en} 0.5px border on top left
- * @param @color 边框颜色
- * @param @color {en} border-color
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *     .hairline-top-left(#000);
- * }
- * ```
- */
-/**
- * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
- * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
- * @param @origin-property css属性名
- * @param @origin-property {en} css property
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @param @rules 自定义的复写规则，默认重置为initial
- * @param @rules {en} customized rewrite rules, default to initial
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-prop-with-rtl(right, auto);
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-value-with-rtl(text-align, left);
- * }
- * ```
- */
-/**
- * 设置Loading组件颜色
- * @desc {en} set Loading component color
- * @param @color 颜色
- * @param @color {en} color
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *    .set-loading-color(#000);
- * }
- * ```
- */
-/**
- * 设置最小字号
- * @desc {en} set minimum font-size
- * @param @size 最小字号
- * @param @size {en} minimum font-size
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *    .set-font-size(10px);
- * }
- * ```
- */
-/**
- * 设置content-box盒模型下元素宽度
- * @desc {en} set box width in content-box
- * @param @property css属性名
- * @param @property {en} css property
- * @param @width 元素总宽度，包含内边距
- * @param @width element width, include padding
- * @param @padding-left 左侧内边距
- * @param @padding-left {en} padding-left
- * @param @padding-right 右侧内边距
- * @param @padding-right {en} padding-right
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *    .set-content-box-width(min-width, 300px, 10px, 10px);
- * }
- * ```
- */
-/**
- * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
- * @desc {en} set Steps component color
- * @param @color 当前步骤背景、标题文本颜色
- * @param @color {en} color of current step background and title text
- * @param @finish-color 已完成步骤背景色
- * @param @finish-color {en} color of finished step background
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *    .set-steps-color(#FFB400);
- * }
- * ```
- */
-#demo-action-sheet .arcodesign-mobile-demo-content {
-  padding: 0;
-  background: transparent;
-  margin: 0 0.24rem;
-  border-radius: 0.16rem;
-  overflow: hidden;
-}
-.demo-action-sheet .primary-item {
-  color:  #165DFF ;
-}
-/***************************************************
- *                                                 *
- *               Arco Theme Style                  *
- *                                                 *
- ***************************************************/
-.arco-theme-dark .process-bg-color-with-config,
-.arco-theme-dark .process-custom-icon-bg-color-with-config {
-  color:  rgba(255, 255, 255, 0.9) ;
-}
-.arco-theme-dark .wait-custom-icon-bg-color-with-config {
-  background:  #2e2e30 ;
-  color:  #929293 ;
-}
-.arco-theme-dark .demo-action-sheet .primary-item {
-  color:  #3C7EFF ;
-}
-/********************* End *************************/

package/cjs/action-sheet/demo/style/mobile.less

@@ -1,52 +0,0 @@
-@import "../../../../style/mixin.less";
-
-#demo-action-sheet {
-
-    .arcodesign-mobile-demo-content {
-        padding: 0;
-        background: transparent;
-        .rem(margin, 0, 12);
-        .rem(border-radius, 8);
-        overflow: hidden;
-    }
-
-}
-
-.demo-action-sheet {
-
-    .primary-item {
-        .use-var(color, primary-color);
-    }
-}
-
-/***************************************************
- *                                                 *
- *               Arco Theme Style                  *
- *                                                 *
- ***************************************************/
-    & when (@use-dark-mode = 1) {
-    
-  .process-bg-color-with-config,
-  .process-custom-icon-bg-color-with-config {
-    @{arco-dark-mode-selector} & {
-      .use-var(color, dark-steps-process-with-config-item-icon-color);
-      .use-var(color, dark-steps-process-with-config-item-icon-color);
-    }
-  }
-  .wait-custom-icon-bg-color-with-config {
-    @{arco-dark-mode-selector} & {
-      .use-var(background, dark-steps-wait-icon-num-background);
-      .use-var(color, dark-sub-info-font-color);
-      .use-var(background, dark-steps-wait-icon-num-background);
-      .use-var(color, dark-sub-info-font-color);
-    }
-  }
-  .demo-action-sheet {
-    .primary-item {
-      @{arco-dark-mode-selector} & {
-        .use-var(color, dark-primary-color);
-      }
-    }
-  }
-}
-/********************* End *************************/