@arco-design/mobile-react 2.38.2 → 2.38.3

package/esnext/cell/style/css/index.css

@@ -569,16 +569,40 @@
     border-radius: 0;
   }
 }
-.arco-cell.without-group {
+.arco-cell-clickable {
+  -webkit-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  touch-action: manipulation;
+  position: relative;
+}
+.arco-cell-clickable.arco-cell-pressed {
+  background-color:  #F7F8FA ;
+}
+.arco-cell-clickable::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 100%;
+  width:  0.32rem ;
+  height: 100%;
+  background-color: inherit;
+  pointer-events: none;
+}
+.arco-cell-clickable.arco-cell-pressed::after {
+  background-color:  #F7F8FA ;
+}
+.arco-cell-without-group {
   background-color:  #FFFFFF ;
   padding-left:  0.32rem ;
   margin-left: 0;
 }
-.arco-cell.without-group.bordered {
+.arco-cell-without-group.bordered {
   position: relative;
   border-width: 0;
 }
-.arco-cell.without-group.bordered::before {
+.arco-cell-without-group.bordered::before {
   content: '';
   width: 100%;
   height: 1PX;
@@ -596,20 +620,20 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell.without-group.bordered::before {
+  .arco-cell-without-group.bordered::before {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell.without-group.bordered::before {
+  .arco-cell-without-group.bordered::before {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;
   }
 }
-.arco-cell.without-group.bordered::after {
+.arco-cell-without-group.bordered::after {
   content: '';
   width: 100%;
   height: 1PX;
@@ -627,14 +651,14 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell.without-group.bordered::after {
+  .arco-cell-without-group.bordered::after {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell.without-group.bordered::after {
+  .arco-cell-without-group.bordered::after {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;
@@ -866,14 +890,20 @@
     border-radius: 0;
   }
 }
-.arco-theme-dark .arco-cell.without-group {
+.arco-theme-dark .arco-cell-clickable.arco-cell-pressed {
+  background-color:  hsla(0, 0%, 100%, 0.08) ;
+}
+.arco-theme-dark .arco-cell-clickable.arco-cell-pressed::after {
+  background-color:  hsla(0, 0%, 100%, 0.08) ;
+}
+.arco-theme-dark .arco-cell-without-group {
   background-color:  #232324 ;
 }
-.arco-theme-dark .arco-cell.without-group.bordered {
+.arco-theme-dark .arco-cell-without-group.bordered {
   position: relative;
   border-width: 0;
 }
-.arco-theme-dark .arco-cell.without-group.bordered::before {
+.arco-theme-dark .arco-cell-without-group.bordered::before {
   content: '';
   width: 100%;
   height: 1PX;
@@ -891,20 +921,20 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-theme-dark .arco-cell.without-group.bordered::before {
+  .arco-theme-dark .arco-cell-without-group.bordered::before {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-theme-dark .arco-cell.without-group.bordered::before {
+  .arco-theme-dark .arco-cell-without-group.bordered::before {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;
   }
 }
-.arco-theme-dark .arco-cell.without-group.bordered::after {
+.arco-theme-dark .arco-cell-without-group.bordered::after {
   content: '';
   width: 100%;
   height: 1PX;
@@ -922,14 +952,14 @@
   border-radius: 0;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-theme-dark .arco-cell.without-group.bordered::after {
+  .arco-theme-dark .arco-cell-without-group.bordered::after {
     transform: scaleY(0.5);
     -webkit-transform: scaleY(0.5);
     border-radius: 0;
   }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-theme-dark .arco-cell.without-group.bordered::after {
+  .arco-theme-dark .arco-cell-without-group.bordered::after {
     transform: scaleY(0.33333333);
     -webkit-transform: scaleY(0.33333333);
     border-radius: 0;

package/esnext/cell/style/index.less

@@ -10,15 +10,42 @@
         .onepx-border-var(top, line-color);
     }
 
-    &.without-group {
+    &-clickable {
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+        touch-action: manipulation;
+        position: relative;
+
+        &.@{prefix}-cell-pressed {
+            .use-var(background-color, cell-clickable-background-color);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 100%;
+            .use-var(width, cell-horizontal-padding);
+            height: 100%;
+            background-color: inherit;
+            pointer-events: none;
+        }
+
+        &.@{prefix}-cell-pressed::after {
+            .use-var(background-color, cell-clickable-background-color);
+        }
+    }
+
+    &-without-group {
         .use-var(background-color, cell-background-color);
         .use-var(padding-left, cell-horizontal-padding);
         margin-left: 0;
+    }
 
-        &.bordered {
-            .onepx-border-var(top, line-color);
-            .onepx-border-var(bottom, line-color);
-        }
+    &-without-group.bordered {
+        .onepx-border-var(top, line-color);
+        .onepx-border-var(bottom, line-color);
     }
 
     &-inner {
@@ -63,6 +90,7 @@
     .cell-label-icon {
         .use-var-with-rtl(margin-right, cell-label-icon-gutter);
         font-size: 0;
+
         .@{prefix}-icon {
             line-height: initial;
             .use-var(font-size, cell-label-icon-font-size);
@@ -76,6 +104,7 @@
         });
         .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
+
         .@{prefix}-icon {
             .use-var(font-size, cell-arrow-font-size);
             .use-var(color, cell-arrow-color);
@@ -148,17 +177,29 @@
         .onepx-border-var(top, dark-line-color);
       }
     }
-    &.without-group {
-      @{arco-dark-mode-selector} & {
-        .use-var(background-color, dark-cell-background-color);
+    &-clickable {
+      &.@{prefix}-cell-pressed {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-cell-clickable-background-color);
+        }
       }
-      &.bordered {
+      &.@{prefix}-cell-pressed::after {
         @{arco-dark-mode-selector} & {
-          .onepx-border-var(top, dark-line-color);
-          .onepx-border-var(bottom, dark-line-color);
+          .use-var(background-color, dark-cell-clickable-background-color);
         }
       }
     }
+    &-without-group {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-cell-background-color);
+      }
+    }
+    &-without-group.bordered {
+      @{arco-dark-mode-selector} & {
+        .onepx-border-var(top, dark-line-color);
+        .onepx-border-var(bottom, dark-line-color);
+      }
+    }
     .cell-label {
       @{arco-dark-mode-selector} & {
         .use-var(color, dark-cell-label-color);

package/esnext/cell/type.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type React from 'react';
 export interface CellProps {
     /**
      * 自定义样式
@@ -60,6 +61,12 @@ export interface CellProps {
      * @default true
      */
     bordered?: boolean;
+    /**
+     * 是否启用点击态效果
+     * @en Whether to enable click effect
+     * @default false
+     */
+    clickable?: boolean;
     /**
      * 点击单元格事件回调
      * @en Callback for cell click event

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.38.2",
+    "version": "2.38.3",
     "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.23.2",
+        "@arco-design/mobile-utils": "2.23.3",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b01d0d5039bc9676ca38cf26bbdc4dd5c39ed7bc"
+    "gitHead": "57304aa9559040c8af15004e61cc7c331cf33646"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -489,6 +489,8 @@
     --cell-arrow-font-size: ~`pxtorem(12)`;
     --dark-cell-background-color: var(--dark-container-background-color);
     --cell-background-color: var(--container-background-color);
+    --dark-cell-clickable-background-color: var(--dark-card-background-color);
+    --cell-clickable-background-color: var(--card-background-color);
     --cell-font-size: ~`pxtorem(16)`;
     --cell-horizontal-padding: ~`pxtorem(16)`;
     --cell-item-height: ~`pxtorem(54)`;

package/tokens/app/arcodesign/default/index.d.ts

@@ -488,6 +488,8 @@ export interface ArcodesignToken extends Record<string, string> {
     'cell-arrow-font-size': string;
     'dark-cell-background-color': string;
     'cell-background-color': string;
+    'dark-cell-clickable-background-color': string;
+    'cell-clickable-background-color': string;
     'cell-font-size': string;
     'cell-horizontal-padding': string;
     'cell-item-height': string;

package/tokens/app/arcodesign/default/index.js

@@ -500,6 +500,8 @@ var tokens = {
   "cell-arrow-font-size": "0.24rem",
   "dark-cell-background-color": "var(--dark-container-background-color)",
   "cell-background-color": "var(--container-background-color)",
+  "dark-cell-clickable-background-color": "var(--dark-card-background-color)",
+  "cell-clickable-background-color": "var(--card-background-color)",
   "cell-font-size": "0.32rem",
   "cell-horizontal-padding": "0.32rem",
   "cell-item-height": "1.08rem",

package/tokens/app/arcodesign/default/index.json

@@ -1667,6 +1667,18 @@
             "en": "Cell background color"
         }
     },
+    "cellClickableBackgroundColor": {
+        "cssKey": "cell-clickable-background-color",
+        "desc": "单元格点击态背景色",
+        "override": "",
+        "value": "@card-background-color",
+        "jsValue": "@global@cardBackgroundColor",
+        "staticValue": "#F7F8FA",
+        "localeDesc": {
+            "ch": "单元格点击态背景色",
+            "en": "Cell clickable background color"
+        }
+    },
     "cellContentFontSize": {
         "cssKey": "cell-content-font-size",
         "desc": "单元格内容文字大小",
@@ -2539,6 +2551,14 @@
         "jsValue": "@global@darkContainerBackgroundColor",
         "staticValue": "#232324"
     },
+    "darkCellClickableBackgroundColor": {
+        "cssKey": "dark-cell-clickable-background-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-card-background-color",
+        "jsValue": "@global@darkCardBackgroundColor",
+        "staticValue": "hsla(0, 0%, 100%, 0.08)"
+    },
     "darkCellDescColor": {
         "cssKey": "dark-cell-desc-color",
         "desc": "",

package/tokens/app/arcodesign/default/index.less

@@ -488,6 +488,8 @@
 @cell-arrow-font-size: ~`pxtorem(12)`;
 @dark-cell-background-color: @dark-container-background-color;
 @cell-background-color: @container-background-color;
+@dark-cell-clickable-background-color: @dark-card-background-color;
+@cell-clickable-background-color: @card-background-color;
 @cell-font-size: ~`pxtorem(16)`;
 @cell-horizontal-padding: ~`pxtorem(16)`;
 @cell-item-height: ~`pxtorem(54)`;

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

@@ -1,7 +1,8 @@
-import React, { ReactNode, CSSProperties } from 'react';
-import { Promise } from 'es6-promise';
-import { PopupProps } from '../popup';
-import { OpenBaseProps } from '../masking';
+import type { ReactNode, CSSProperties } from 'react';
+import React from 'react';
+import type { Promise } from 'es6-promise';
+import type { PopupProps, PopupRef } from '../popup';
+import type { OpenBaseProps } from '../masking';
 export interface ActionSheetItemOptions {
     /**
      * 选项文字内容
@@ -29,7 +30,7 @@ export interface ActionSheetItemOptions {
      */
     onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
 }
-export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'> {
+export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'orientationDirection' | 'direction'> {
     /**
      * 选项配置，详情见 ActionSheetItemOptions
      * @en Option setting, see ActionSheetItemOptions for details
@@ -57,12 +58,12 @@ export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScro
      */
     needBottomOffset?: boolean;
 }
-export interface ActionSheetRef {
+export interface ActionSheetRef extends PopupRef {
     /**
-     * 最外层元素 DOM
+     * 菜单列表元素 DOM
      * @en The outermost element DOM
      */
-    dom: HTMLDivElement | null;
+    actionList: HTMLDivElement | null;
 }
 export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>): {
     /**
@@ -87,11 +88,11 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };

package/umd/action-sheet/index.js

@@ -40,8 +40,11 @@
         needBottomOffset = _props$needBottomOffs === void 0 ? true : _props$needBottomOffs,
         otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
     var popupRef = (0, _react.useRef)(null);
+    var listRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
-      return popupRef.current;
+      return (0, _extends2.default)({}, popupRef.current, {
+        actionList: listRef.current
+      });
     });
 
     function handleItemClick(e, item) {
@@ -78,7 +81,8 @@
       }, title) : null, subTitle ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-action-sheet-sub-title"
       }, subTitle) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixCls + "-action-sheet-list"
+        className: prefixCls + "-action-sheet-list",
+        ref: listRef
       }, (items || []).map(function (item, index) {
         return item.content ? /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _mobileUtils.cls)(prefixCls + "-action-sheet-item", item.className, item.status || 'normal'),

package/umd/action-sheet/methods.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { OpenBaseProps } from '../masking/methods';
+import type React from 'react';
+import type { OpenBaseProps } from '../masking/methods';
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
     key?: string | undefined;
 }, context?: import("../context-provider").GlobalContextParams | undefined) => {

package/umd/cell/cell.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { CellProps, CellRef } from './type';
+import type { CellProps, CellRef } from './type';
 export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<CellRef>>;

package/umd/cell/cell.js

@@ -39,28 +39,57 @@
         append = props.append,
         _props$bordered = props.bordered,
         bordered = _props$bordered === void 0 ? true : _props$bordered,
-        _onClick = props.onClick;
+        onClick = props.onClick,
+        _props$clickable = props.clickable,
+        clickable = _props$clickable === void 0 ? false : _props$clickable;
     var domRef = (0, _react.useRef)(null);
+
+    var _useState = (0, _react.useState)(false),
+        isPressed = _useState[0],
+        setIsPressed = _useState[1];
+
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current
       };
     });
+
+    var handleTouchStart = function handleTouchStart() {
+      if (clickable) {
+        setIsPressed(true);
+      }
+    };
+
+    var handleTouchEnd = function handleTouchEnd() {
+      if (clickable) {
+        setIsPressed(false);
+      }
+    };
+
+    var handleClick = function handleClick(e) {
+      if (onClick) {
+        onClick(e);
+      }
+    };
+
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement(_group.GroupContext.Consumer, null, function (_ref2) {
+        var _cls, _cls2, _cls3;
+
         var isFromGroup = _ref2.isFromGroup;
         return /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _mobileUtils.cls)(prefixCls + "-cell", 'all-border-box', {
-            'without-group': !isFromGroup
-          }, {
             bordered: bordered
-          }, className),
+          }, {
+            'without-group': !isFromGroup
+          }, (_cls = {}, _cls[prefixCls + "-cell-without-group"] = !isFromGroup, _cls), (_cls2 = {}, _cls2[prefixCls + "-cell-clickable"] = clickable, _cls2), (_cls3 = {}, _cls3[prefixCls + "-cell-pressed"] = isPressed, _cls3), className),
           style: style,
           ref: domRef,
-          onClick: function onClick(e) {
-            return _onClick && _onClick(e);
-          }
+          onClick: handleClick,
+          onTouchStart: handleTouchStart,
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd
         }, prepend, /*#__PURE__*/_react.default.createElement("div", {
           className: (0, _mobileUtils.cls)(prefixCls + "-cell-inner", {
             'has-desc': desc