@arco-design/mobile-react 2.38.1 → 2.38.3

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.38.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.38.2...@arco-design/mobile-react@2.38.3) (2025-12-05)
+
+
+### Bug Fixes
+
+* `ActionSheet` support "getScrollContainer" ([8681a94](https://github.com/arco-design/arco-design-mobile/commit/8681a94490dc9fde0992aad15b07c0693e3a4f4b))
+* `Cell` support prop "clickable" for clickable effect ([b4d6f57](https://github.com/arco-design/arco-design-mobile/commit/b4d6f57baa99c01d661feb1d85df958ce1abf023))
+
+
+
+
+
+## [2.38.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.38.1...@arco-design/mobile-react@2.38.2) (2025-09-22)
+
+**Note:** Version bump only for package @arco-design/mobile-react
+
+
+
+
+
 ## [2.38.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.38.0...@arco-design/mobile-react@2.38.1) (2025-09-15)
 
 

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

package/cjs/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/cjs/action-sheet/index.js

@@ -38,8 +38,11 @@ var ActionSheet = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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) {
@@ -76,7 +79,8 @@ var ActionSheet = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, 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/cjs/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/cjs/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/cjs/cell/cell.js

@@ -34,28 +34,57 @@ var Cell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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

package/cjs/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/cjs/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/cjs/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/dist/index.js

@@ -9220,8 +9220,11 @@
           otherProps = __rest$1(props, ["className", "items", "cancelText", "close", "title", "subTitle", "needBottomOffset"]);
 
       var popupRef = React.useRef(null);
+      var listRef = React.useRef(null);
       React.useImperativeHandle(ref, function () {
-        return popupRef.current;
+        return __assign$3(__assign$3({}, popupRef.current), {
+          actionList: listRef.current
+        });
       });
 
       function handleItemClick(e, item) {
@@ -9258,7 +9261,8 @@
         }, title) : null, subTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-action-sheet-sub-title"
         }, subTitle) : null) : null, /*#__PURE__*/React__default["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["default"].createElement("div", {
             className: cls(prefixCls + "-action-sheet-item", item.className, item.status || 'normal'),
@@ -11466,28 +11470,57 @@
           append = props.append,
           _b = props.bordered,
           bordered = _b === void 0 ? true : _b,
-          _onClick = props.onClick;
+          onClick = props.onClick,
+          _c = props.clickable,
+          clickable = _c === void 0 ? false : _c;
       var domRef = React.useRef(null);
+
+      var _d = React.useState(false),
+          isPressed = _d[0],
+          setIsPressed = _d[1];
+
       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["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement(GroupContext.Consumer, null, function (_a) {
+          var _b, _c, _d;
+
           var isFromGroup = _a.isFromGroup;
           return /*#__PURE__*/React__default["default"].createElement("div", {
             className: cls(prefixCls + "-cell", 'all-border-box', {
-              'without-group': !isFromGroup
-            }, {
               bordered: bordered
-            }, className),
+            }, {
+              'without-group': !isFromGroup
+            }, (_b = {}, _b[prefixCls + "-cell-without-group"] = !isFromGroup, _b), (_c = {}, _c[prefixCls + "-cell-clickable"] = clickable, _c), (_d = {}, _d[prefixCls + "-cell-pressed"] = isPressed, _d), 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["default"].createElement("div", {
             className: cls(prefixCls + "-cell-inner", {
               'has-desc': desc